{"version":3,"sources":["../src/ui/pieces/types.ts","../src/ui/pieces/pointer.ts","../src/ui/pieces/renderer.tsx","../src/ui/pieces/tokens.ts","../src/ui/pieces/dom/_shared.ts","../src/ui/pieces/dom/layout.ts","../src/ui/pieces/dom/content.ts","../src/ui/pieces/dom/data.ts","../src/ui/pieces/dom/inputs.ts","../src/ui/pieces/dom/actions.ts","../src/ui/pieces/dom/feedback.ts","../src/ui/pieces/dom/slot.ts","../src/ui/pieces/dom/index.ts","../src/ui/pieces/dom-renderer.ts","../src/ui/pieces/builtin/_shared.tsx","../src/ui/pieces/builtin/layout.tsx","../src/ui/pieces/builtin/content.tsx","../src/ui/pieces/builtin/data.tsx","../src/ui/pieces/builtin/inputs.tsx","../src/ui/pieces/builtin/actions.tsx","../src/ui/pieces/builtin/feedback.tsx","../src/ui/pieces/builtin/selection.tsx","../src/ui/pieces/builtin/slot.tsx","../src/ui/pieces/builtin/index.ts","../src/ui/pieces/builtin.ts","../src/ui/pieces/surface-bridge.ts","../src/ui/pieces/index.ts","../src/agent/webagent/cursor.ts","../src/agent/webagent/dom-reader.ts","../src/agent/webagent/runtime/streaming-envelope.ts","../src/index.ts","../src/triggers/space-gesture.ts","../src/utils/dom.ts","../src/utils/sdk-i18n.ts","../src/utils/selector.ts","../src/triggers/command-palette/styles.ts","../src/triggers/command-palette/prefix.ts","../src/triggers/command-palette/fuzzy.ts","../src/utils/id.ts","../src/triggers/command-palette/chip-bar.ts","../src/triggers/command-palette/qa.ts","../src/triggers/command-palette/screenshot.ts","../src/triggers/command-palette/index.ts","../src/triggers/spotter.ts","../src/skills/registry.ts","../src/prompts/registry.ts","../src/utils/llm-parse.ts","../src/agent/inline/parse.ts","../src/agent/plan/markdown.ts","../src/modules/immersive-translate/prompt.ts","../src/modules/voice/prompt.ts","../src/triggers/dwell/prompt.ts","../src/agent/sitemap/helpers.ts","../src/agent/webagent/prompt.ts","../src/agent/plan/prompt.ts","../src/prompts/defaults.ts","../src/triggers/panel-runtime.ts","../src/ui/placement.ts","../src/modules/pinned-panel.ts","../src/toolbox/common/types.ts","../src/utils/storage/memory.ts","../src/utils/storage/local-storage.ts","../src/utils/storage/indexeddb.ts","../src/utils/storage/index.ts","../src/utils/text/tokenize.ts","../src/utils/text/bm25.ts","../src/toolbox/search/store.ts","../src/toolbox/search/builtin.ts","../src/toolbox/search/index.ts","../src/toolbox/recommend/index.ts","../src/tools-registry.ts","../src/skills/preferences.ts","../src/ui/subtitle/styles.ts","../src/ui/subtitle/markdown.ts","../src/ui/subtitle/touch.ts","../src/ui/subtitle/paging.ts","../src/ui/subtitle/dismiss.ts","../src/ui/subtitle/streaming.ts","../src/ui/subtitle/choice.ts","../src/ui/subtitle/indicator.ts","../src/ui/subtitle/index.ts","../src/event-emitter.ts","../src/agent/webagent/session.ts","../src/agent/webagent/overlay.ts","../src/agent/webagent/actions.ts","../src/agent/webagent/actions-workflow.ts","../src/agent/webagent/cross-tab.ts","../src/agent/webagent/destructive.ts","../src/agent/webagent/cot.ts","../src/agent/webagent/execute-action.ts","../src/agent/webagent/runtime/helpers.ts","../src/agent/webagent/runtime/debug.ts","../src/agent/llm/router.ts","../src/agent/webagent/runtime/messages.ts","../src/agent/webagent/screenshot.ts","../src/agent/webagent/runtime/loops.ts","../src/agent/webagent/context-providers/url.ts","../src/agent/webagent/context-providers/page-summary.ts","../src/agent/webagent/context-providers/dom.ts","../src/agent/webagent/context-providers/screenshot.ts","../src/agent/webagent/context-providers/history.ts","../src/agent/webagent/context-providers/selection.ts","../src/agent/webagent/context-providers/index.ts","../src/agent/webagent/webagent.ts","../src/agent/index.ts","../src/agent/webagent/form-widgets.ts","../src/ui/inline-effects/styles.ts","../src/ui/inline-effects/inlineDiff.ts","../src/ui/inline-effects/chatSession.ts","../src/agent/inline/i18n.ts","../src/agent/inline/styles.ts","../src/agent/inline/scoping.ts","../src/agent/inline/index.ts","../src/agent/task/index.ts","../src/agent/cursor.ts","../src/agent/sitemap/learner.ts","../src/agent/memory/core.ts","../src/agent/memory/episodic.ts","../src/agent/memory/semantic.ts","../src/agent/memory/pii.ts","../src/agent/memory/drawer.ts","../src/agent/memory/unified.ts","../src/agent/memory/index.ts","../src/agent/plan/todos.ts","../src/agent/plan/index.ts","../src/orchestrator/agent-lifecycle.ts","../src/orchestrator/helpers.ts","../src/orchestrator/sessions-registry.ts","../src/orchestrator/agents-registry.ts","../src/orchestrator/skill-dispatcher.ts","../src/triggers/dwell/styles.ts","../src/orchestrator/highlight.ts","../src/orchestrator/intent-buffer.ts","../src/orchestrator/index.ts","../src/skills/evals.ts","../src/triggers/mobile-hero-greeting.ts","../src/triggers/mobile.ts","../src/init-sprite-urls.ts","../src/auto-install.ts","../src/triggers/dwell/index.ts","../src/triggers/action-panel.ts","../src/agent/llm/stream.ts","../src/utils/redact.ts","../src/agent/llm/openai.ts","../src/agent/llm/google/transform.ts","../src/agent/llm/google/stream.ts","../src/agent/llm/google/provider.ts","../src/agent/llm/proxy.ts","../src/agent/llm/adapters/registry.ts","../src/agent/llm/adapters/openai.ts","../src/agent/llm/adapters/google.ts","../src/agent/llm/adapters/proxy.ts","../src/agent/llm/adapters/agnes.ts","../src/agent/llm/adapters/index.ts","../src/skills/transaction.ts","../src/ui/dock-state.ts","../src/modules/immersive-translate/index.ts","../src/modules/voice/voice.ts","../src/modules/voice/tts.ts","../src/modules/voice/module.ts","../src/modules/theme-toggle.ts","../src/modules/language-switcher.ts","../src/modules/form-assist.ts","../src/modules/onboarding/index.ts","../src/utils/platform.ts","../src/cache.ts","../src/utils/heat-rank.ts","../src/ingest/schema.ts","../src/ingest/transport.ts","../src/analytics/store.ts","../src/analytics/sql-schema.ts","../src/analytics/mapper.ts","../src/analytics/export.ts"],"sourcesContent":["/**\n * Pieces — dddk's UI primitive system.\n *\n * Like HTML elements, but a curated set covering common SaaS UI patterns,\n * plus a `Slot` escape hatch for host-supplied components.\n *\n * Two ways to author the same UI:\n * 1. Direct API: Pieces.Card({ children: [Pieces.Heading({ text: 'Hi' })] })\n * 2. Flat envelope (id-keyed component list): { component: 'Card', children: [{ component: 'Heading', text: 'Hi' }] }\n *\n * Both paths resolve through the same PieceRenderer with the same catalog.\n */\n\nimport type { ReactNode } from 'react';\n\n// ─── core shapes ───────────────────────────────────────────────────\n\n/** Discriminated piece — `kind` selects the catalog entry. */\nexport interface PieceNode {\n kind: string;\n /** Optional id, used to address nodes for partial updates. */\n id?: string;\n /** Optional binding path (JSON Pointer or simple key) into the data model. */\n bind?: string;\n /** Catalog-specific props. */\n [key: string]: unknown;\n}\n\nexport interface PieceContext {\n /** Reactive data model (mutated by inputs, read by `bind`). */\n data: Record;\n /** Update a bound value. */\n setBinding(path: string, value: unknown): void;\n /** Fire a named action — e.g. 'submit', 'cancel', or any custom string. */\n trigger(actionName: string, payload?: unknown): void;\n /** Render a child PieceNode (recursive). */\n render(node: PieceNode): ReactNode;\n}\n\nexport interface PieceDefinition

> {\n kind: string;\n /**\n * Render function. Returns React node OR a DOM element factory for\n * non-React hosts (advanced — most users return JSX).\n */\n render(props: P & PieceNode, ctx: PieceContext): ReactNode;\n /**\n * Optional JSON Schema for props — useful when an LLM agent authors the\n * piece from an envelope (the schema gives the LLM a contract).\n */\n propsSchema?: Record;\n /**\n * Optional display metadata for tooling (palette previews, docs).\n */\n meta?: {\n category: 'layout' | 'content' | 'data' | 'input' | 'action' | 'feedback' | 'slot';\n description?: string;\n };\n}\n\n// ─── catalog ───────────────────────────────────────────────────────\n\nexport class PieceCatalog {\n private pieces = new Map();\n\n constructor(initial: PieceDefinition[] = []) {\n for (const p of initial) this.register(p);\n }\n\n register(piece: PieceDefinition): void {\n if (this.pieces.has(piece.kind)) {\n console.warn(`[Pieces] kind \"${piece.kind}\" already registered — replacing.`);\n }\n this.pieces.set(piece.kind, piece);\n }\n\n get(kind: string): PieceDefinition | undefined {\n return this.pieces.get(kind);\n }\n\n list(): PieceDefinition[] {\n return Array.from(this.pieces.values());\n }\n\n /**\n * Merge another catalog into this one. Host's custom catalog wins on\n * conflict — lets enterprises extend / override built-ins.\n */\n extend(other: PieceCatalog | PieceDefinition[]): void {\n const incoming = Array.isArray(other) ? other : other.list();\n for (const p of incoming) this.register(p);\n }\n}\n\n// ─── tree / surface ────────────────────────────────────────────────\n\n/**\n * A complete UI surface — root piece + optional initial data model.\n * Output of a skill, palette command, or external envelope translation.\n */\nexport interface PieceSurface {\n root: PieceNode;\n data?: Record;\n}\n","/**\n * JSON Pointer (RFC 6901, simplified) helpers shared by both renderers.\n */\n\nexport function readPointer(data: Record, path: string): unknown {\n if (!path) return undefined;\n if (!path.startsWith('/')) return data[path];\n const parts = path.slice(1).split('/').map((p) => p.replace(/~1/g, '/').replace(/~0/g, '~'));\n let cur: unknown = data;\n for (const p of parts) {\n if (cur && typeof cur === 'object' && p in (cur as object)) {\n cur = (cur as Record)[p];\n } else {\n return undefined;\n }\n }\n return cur;\n}\n\nexport function applyPointer(\n data: Record,\n path: string,\n value: unknown,\n): Record {\n if (!path) return data;\n if (!path.startsWith('/')) return { ...data, [path]: value };\n const parts = path.slice(1).split('/').map((p) => p.replace(/~1/g, '/').replace(/~0/g, '~'));\n const last = parts.pop();\n const next: Record = { ...data };\n if (!last) return next;\n let cur: Record = next;\n for (const p of parts) {\n const existing = cur[p];\n if (existing && typeof existing === 'object' && !Array.isArray(existing)) {\n const cloned = { ...(existing as Record) };\n cur[p] = cloned;\n cur = cloned;\n } else {\n const fresh: Record = {};\n cur[p] = fresh;\n cur = fresh;\n }\n }\n cur[last] = value;\n return next;\n}\n","/**\r\n * PieceRenderer — unified React renderer for any catalog.\r\n * Drives direct authoring, flat envelopes, and palette detail views.\r\n */\r\n\r\nimport { useCallback, useMemo, useState, type ReactNode } from 'react';\r\nimport type { PieceCatalog, PieceContext, PieceNode, PieceSurface } from './types';\r\nimport { readPointer, applyPointer } from './pointer';\r\n\r\nexport { readPointer } from './pointer';\r\n\r\nexport interface PieceRendererProps {\r\n surface: PieceSurface;\r\n catalog: PieceCatalog;\r\n onAction?: (name: string, payload: unknown, data: Record) => void;\r\n onDataChange?: (data: Record) => void;\r\n}\r\n\r\nexport function PieceRenderer({\r\n surface,\r\n catalog,\r\n onAction,\r\n onDataChange,\r\n}: PieceRendererProps) {\r\n const [data, setData] = useState>(surface.data ?? {});\r\n\r\n const setBinding = useCallback((path: string, value: unknown) => {\r\n setData((cur) => {\r\n const next = applyPointer(cur, path, value);\r\n onDataChange?.(next);\r\n return next;\r\n });\r\n }, [onDataChange]);\r\n\r\n const trigger = useCallback((name: string, payload?: unknown) => {\r\n onAction?.(name, payload, data);\r\n }, [onAction, data]);\r\n\r\n const ctx: PieceContext = useMemo(() => {\r\n const c: PieceContext = {\r\n data,\r\n setBinding,\r\n trigger,\r\n render: (node) => renderNode(node, c, catalog),\r\n };\r\n return c;\r\n }, [data, setBinding, trigger, catalog]);\r\n\r\n return <>{renderNode(surface.root, ctx, catalog)};\r\n}\r\n\r\nfunction renderNode(node: PieceNode, ctx: PieceContext, catalog: PieceCatalog): ReactNode {\r\n const def = catalog.get(node.kind);\r\n if (!def) {\r\n return (\r\n

\r\n Unknown piece: {node.kind}\r\n
\r\n );\r\n }\r\n return def.render(node, ctx);\r\n}\r\n\r\n/** Resolve a value via bind (preferred) or fallback to a literal prop. */\r\nexport function resolveValue(\r\n node: PieceNode,\r\n ctx: PieceContext,\r\n literalKey: string,\r\n fallback?: T\r\n): T {\r\n if (node.bind) {\r\n const v = readPointer(ctx.data, node.bind);\r\n if (v !== undefined) return v as T;\r\n }\r\n const lit = node[literalKey];\r\n if (lit !== undefined) return lit as T;\r\n return fallback as T;\r\n}\r\n","/**\n * Shared visual tokens for both React and DOM renderers.\n * Single source of truth — change once, propagates everywhere.\n */\n\nexport interface ToneColor {\n bg: string;\n fg: string;\n}\n\nexport const TONES: Record = {\n neutral: { bg: 'rgba(0,0,0,0.06)', fg: 'inherit' },\n success: { bg: 'rgba(16,185,129,0.12)', fg: '#10b981' },\n warning: { bg: 'rgba(245,158,11,0.12)', fg: '#f59e0b' },\n error: { bg: 'rgba(239,68,68,0.12)', fg: '#ef4444' },\n info: { bg: 'rgba(59,130,246,0.12)', fg: '#3b82f6' },\n};\n\nexport function tone(name: unknown): ToneColor {\n return TONES[String(name ?? 'neutral')] ?? TONES.neutral!;\n}\n\n/** CSS-property objects (React `style={}`-shaped) for button variants. */\nexport const BUTTON_VARIANTS_REACT: Record = {\n primary: { background: 'var(--dddk-accent, #3b82f6)', color: '#fff' },\n secondary: { background: 'transparent', color: 'inherit', border: '1px solid var(--dddk-border)' },\n destructive: { background: '#ef4444', color: '#fff' },\n};\n\n/** CSS text strings for DOM renderer (style.cssText fragment). */\nexport const BUTTON_VARIANTS_CSS: Record = {\n primary:\n 'background:var(--dddk-accent, #6366f1);color:var(--dddk-text-on-accent, #fff);border:0;',\n secondary:\n 'background:transparent;color:inherit;border:1px solid var(--dddk-border, rgba(0,0,0,0.15));',\n destructive: 'background:#ef4444;color:#fff;border:0;',\n};\n\n/** Base input style (React form). */\nexport const BASE_INPUT_STYLE: React.CSSProperties = {\n width: '100%',\n padding: '6px 8px',\n border: '1px solid var(--dddk-border, rgba(0,0,0,0.15))',\n borderRadius: 6,\n font: 'inherit',\n background: 'var(--dddk-bg, #fff)',\n color: 'inherit',\n};\n\n/** Base input style (DOM `cssText` form). */\nexport const BASE_INPUT_CSS =\n 'width:100%;padding:6px 8px;border:1px solid var(--dddk-border, rgba(0,0,0,0.15));' +\n 'border-radius:6px;font:inherit;background:var(--dddk-bg, #fff);color:inherit;box-sizing:border-box;';\n","/**\n * DOM-renderer shared helpers + the `DomHelpers` surface that each\n * per-category renderer module receives. Decouples sub-renderers from the\n * main class so they're testable and don't import it transitively.\n */\n\nimport type { PieceNode } from '../types';\nimport { BASE_INPUT_CSS } from '../tokens';\n\nexport interface DomHelpers {\n /** Resolve `node.bind` first, then literal `node[key]`, then `fallback`. */\n read(node: PieceNode, key: string, fallback?: T): T;\n /** Recursively render a child piece. */\n renderNode(node: PieceNode): HTMLElement;\n /** Render every `node.children` entry to an array of elements. */\n renderChildren(node: PieceNode): HTMLElement[];\n /** Mutate bound state path. */\n setBinding(path: string, value: unknown): void;\n /** Fire a named action. */\n trigger(name: string, payload?: unknown): void;\n}\n\nexport function applyInputStyle(el: HTMLElement): void {\n el.style.cssText = BASE_INPUT_CSS;\n}\n\nexport function px(value: unknown, fallback: number): string {\n if (typeof value === 'number') return `${value}px`;\n if (typeof value === 'string') return value;\n return `${fallback}px`;\n}\n\nexport function escapeHtml(s: string): string {\n return s.replace(/[&<>\"']/g, (c) =>\n ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' }[c]!),\n );\n}\n\nexport function appendAll(parent: HTMLElement, children: HTMLElement[]): void {\n for (const c of children) parent.appendChild(c);\n}\n\nexport function fieldWrap(node: PieceNode): HTMLElement {\n const wrap = document.createElement('label');\n wrap.style.cssText = 'display:flex;flex-direction:column;gap:4px;font-size:13px;';\n if (node.label != null) {\n const span = document.createElement('span');\n span.textContent = String(node.label);\n wrap.appendChild(span);\n }\n return wrap;\n}\n","import type { PieceNode } from '../types';\nimport { appendAll, px, type DomHelpers } from './_shared';\n\nexport function renderStack(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n el.style.display = 'flex';\n el.style.flexDirection = node.direction === 'horizontal' ? 'row' : 'column';\n el.style.gap = px(node.gap, 8);\n el.style.alignItems = String(node.align ?? 'stretch');\n appendAll(el, h.renderChildren(node));\n return el;\n}\n\nexport function renderGrid(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n el.style.display = 'grid';\n el.style.gridTemplateColumns = `repeat(${Number(node.columns ?? 2)}, minmax(0,1fr))`;\n el.style.gap = px(node.gap, 8);\n appendAll(el, h.renderChildren(node));\n return el;\n}\n\nexport function renderSplit(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n el.style.display = 'grid';\n el.style.gridTemplateColumns = '1fr 1fr';\n el.style.gap = '12px';\n appendAll(el, h.renderChildren(node));\n return el;\n}\n\nexport function renderCard(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n el.style.background = 'var(--dddk-bg-elevated, #fff)';\n el.style.borderRadius = 'var(--dddk-radius, 12px)';\n el.style.padding = '16px';\n el.style.boxShadow = 'var(--dddk-shadow-md, 0 1px 3px rgba(0,0,0,0.05))';\n el.style.display = 'flex';\n el.style.flexDirection = 'column';\n el.style.gap = '12px';\n appendAll(el, h.renderChildren(node));\n return el;\n}\n\nexport function renderGroup(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n el.style.display = 'flex';\n el.style.flexDirection = node.direction === 'horizontal' ? 'row' : 'column';\n el.style.gap = px(node.gap, 8);\n el.style.alignItems = String(node.align ?? 'stretch');\n appendAll(el, h.renderChildren(node));\n return el;\n}\n\nexport function renderTabs(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const tabs = (node.tabs as Array<{ id: string; label: string; content: PieceNode }>) ?? [];\n const activeKey = node.bind ?? (node.id ? `__activeTab_${node.id}` : '__activeTab');\n const active = (h.read(\n { kind: 'Tabs', bind: activeKey } as PieceNode,\n 'active',\n tabs[0]?.id ?? '',\n )) || tabs[0]?.id;\n\n const bar = document.createElement('div');\n bar.style.display = 'flex';\n bar.style.gap = '8px';\n bar.style.borderBottom = '1px solid var(--dddk-border, rgba(0,0,0,0.08))';\n for (const t of tabs) {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.textContent = t.label;\n btn.style.padding = '6px 12px';\n btn.style.background = 'transparent';\n btn.style.border = '0';\n btn.style.borderBottom = t.id === active\n ? '2px solid var(--dddk-accent, #6366f1)'\n : '2px solid transparent';\n btn.style.cursor = 'pointer';\n btn.style.font = 'inherit';\n btn.addEventListener('click', () => h.setBinding(String(activeKey), t.id));\n bar.appendChild(btn);\n }\n el.appendChild(bar);\n\n const panel = document.createElement('div');\n panel.style.padding = '12px';\n const activeTab = tabs.find((t) => t.id === active) ?? tabs[0];\n if (activeTab) panel.appendChild(h.renderNode(activeTab.content));\n el.appendChild(panel);\n return el;\n}\n","import type { PieceNode } from '../types';\nimport { tone } from '../tokens';\nimport type { DomHelpers } from './_shared';\n\nexport function renderHeading(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const level = Math.min(6, Math.max(1, Number(node.level ?? 3)));\n const tag = document.createElement(`h${level}`);\n tag.style.margin = '0 0 8px 0';\n tag.textContent = h.read(node, 'text', '');\n el.appendChild(tag);\n return el;\n}\n\nexport function renderText(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n el.style.display = 'inline';\n el.textContent = h.read(node, 'text', '');\n return el;\n}\n\nexport function renderMarkdown(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n el.style.whiteSpace = 'pre-wrap';\n el.textContent = h.read(node, 'text', '');\n return el;\n}\n\nexport function renderCode(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const pre = document.createElement('pre');\n pre.style.cssText =\n 'background:var(--dddk-bg, #fafafa);padding:8px;border-radius:6px;' +\n 'font-family:var(--dddk-font-mono, ui-monospace, monospace);' +\n 'font-size:12px;margin:0;overflow-x:auto;';\n pre.textContent = h.read(node, 'code', '');\n el.appendChild(pre);\n return el;\n}\n\nexport function renderImage(el: HTMLElement, node: PieceNode): HTMLElement {\n const img = document.createElement('img');\n img.src = String(node.src ?? '');\n img.alt = String(node.alt ?? '');\n img.style.cssText = 'max-width:100%;border-radius:6px;';\n el.appendChild(img);\n return el;\n}\n\nexport function renderTag(el: HTMLElement, node: PieceNode): HTMLElement {\n const c = tone(node.tone);\n const span = document.createElement('span');\n span.style.cssText =\n `background:${c.bg};color:${c.fg};padding:2px 8px;border-radius:12px;` +\n 'font-size:11px;font-weight:500;display:inline-block;';\n span.textContent = String(node.text ?? '');\n el.appendChild(span);\n return el;\n}\n\nexport function renderDivider(el: HTMLElement): HTMLElement {\n const hr = document.createElement('hr');\n hr.style.cssText = 'border:0;border-top:1px solid var(--dddk-border, rgba(0,0,0,0.08));margin:8px 0;';\n el.appendChild(hr);\n return el;\n}\n","import type { PieceNode } from '../types';\nimport { escapeHtml, type DomHelpers } from './_shared';\n\nexport function renderListing(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n type Item = { id: string; title: string; subtitle?: string; accessory?: string; icon?: string };\n const items = h.read(node, 'items', []);\n const ul = document.createElement('ul');\n ul.style.cssText = 'list-style:none;margin:0;padding:0;';\n for (const it of items) {\n const li = document.createElement('li');\n li.style.cssText =\n 'display:flex;gap:8px;padding:6px 8px;' +\n 'border-bottom:1px solid var(--dddk-border, rgba(0,0,0,0.05));';\n if (it.icon) {\n const ic = document.createElement('span');\n ic.textContent = it.icon;\n li.appendChild(ic);\n }\n const text = document.createElement('div');\n text.style.cssText = 'flex:1;min-width:0;';\n const t = document.createElement('div');\n t.textContent = it.title;\n text.appendChild(t);\n if (it.subtitle) {\n const s = document.createElement('small');\n s.style.color = 'var(--dddk-text-muted, #6b6b6b)';\n s.textContent = it.subtitle;\n text.appendChild(s);\n }\n li.appendChild(text);\n if (it.accessory) {\n const a = document.createElement('span');\n a.style.color = 'var(--dddk-text-muted, #6b6b6b)';\n a.textContent = it.accessory;\n li.appendChild(a);\n }\n ul.appendChild(li);\n }\n el.appendChild(ul);\n return el;\n}\n\nexport function renderTable(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const columns = (node.columns as Array<{ key: string; label: string }>) ?? [];\n const rows = h.read>>(node, 'rows', []);\n const table = document.createElement('table');\n table.style.cssText = 'width:100%;border-collapse:collapse;font-size:13px;';\n const thead = document.createElement('thead');\n const headRow = document.createElement('tr');\n for (const c of columns) {\n const th = document.createElement('th');\n th.style.cssText =\n 'text-align:left;padding:6px;border-bottom:1px solid var(--dddk-border, rgba(0,0,0,0.08));';\n th.textContent = c.label;\n headRow.appendChild(th);\n }\n thead.appendChild(headRow);\n table.appendChild(thead);\n const tbody = document.createElement('tbody');\n for (const r of rows) {\n const tr = document.createElement('tr');\n for (const c of columns) {\n const td = document.createElement('td');\n td.style.cssText =\n 'padding:6px;border-bottom:1px solid var(--dddk-border, rgba(0,0,0,0.05));';\n td.textContent = String(r[c.key] ?? '');\n tr.appendChild(td);\n }\n tbody.appendChild(tr);\n }\n table.appendChild(tbody);\n el.appendChild(table);\n return el;\n}\n\nexport function renderMetric(el: HTMLElement, node: PieceNode): HTMLElement {\n const trend = String(node.trend ?? 'flat');\n const color = trend === 'up' ? '#10b981' : trend === 'down' ? '#ef4444' : '#6b6b6b';\n const arrow = trend === 'up' ? '▲' : trend === 'down' ? '▼' : '–';\n const wrap = document.createElement('div');\n wrap.style.cssText = 'display:flex;flex-direction:column;gap:2px;';\n if (node.label) {\n const lbl = document.createElement('span');\n lbl.style.cssText = 'font-size:11px;color:var(--dddk-text-muted, #6b6b6b);';\n lbl.textContent = String(node.label);\n wrap.appendChild(lbl);\n }\n const row = document.createElement('div');\n row.style.cssText = 'display:flex;align-items:baseline;gap:8px;';\n const strong = document.createElement('strong');\n strong.style.fontSize = '22px';\n strong.textContent = String(node.value ?? '');\n row.appendChild(strong);\n if (node.delta != null) {\n const d = document.createElement('span');\n d.style.cssText = `color:${color};font-size:12px;`;\n d.textContent = `${arrow} ${node.delta}`;\n row.appendChild(d);\n }\n wrap.appendChild(row);\n el.appendChild(wrap);\n return el;\n}\n\nexport function renderTimeline(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n type Evt = { id: string; time: string; title: string; note?: string };\n const events = h.read(node, 'events', []);\n const ol = document.createElement('ol');\n ol.style.cssText =\n 'list-style:none;margin:0;padding:0;border-left:2px solid var(--dddk-border, rgba(0,0,0,0.08));';\n for (const e of events) {\n const li = document.createElement('li');\n li.style.cssText = 'margin-left:12px;padding-left:12px;padding-bottom:12px;position:relative;';\n li.innerHTML = `\n \n ${escapeHtml(e.time)}\n
${escapeHtml(e.title)}
\n ${e.note ? `${escapeHtml(e.note)}` : ''}\n `;\n ol.appendChild(li);\n }\n el.appendChild(ol);\n return el;\n}\n","import type { PieceNode } from '../types';\nimport { applyInputStyle, fieldWrap, type DomHelpers } from './_shared';\n\nexport function renderTextInput(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const f = fieldWrap(node);\n const input = document.createElement('input');\n input.type = node.kind === 'PasswordField' ? 'password' : 'text';\n applyInputStyle(input);\n input.value = String(h.read(node, 'value', '') ?? '');\n if (node.placeholder) input.placeholder = String(node.placeholder);\n input.addEventListener('input', () => {\n if (node.bind) h.setBinding(String(node.bind), input.value);\n });\n f.appendChild(input);\n el.appendChild(f);\n return el;\n}\n\nexport function renderTextArea(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const f = fieldWrap(node);\n const ta = document.createElement('textarea');\n applyInputStyle(ta);\n ta.rows = Number(node.rows ?? 3);\n ta.value = String(h.read(node, 'value', '') ?? '');\n if (node.placeholder) ta.placeholder = String(node.placeholder);\n ta.addEventListener('input', () => {\n if (node.bind) h.setBinding(String(node.bind), ta.value);\n });\n f.appendChild(ta);\n el.appendChild(f);\n return el;\n}\n\nexport function renderNumberField(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const f = fieldWrap(node);\n const input = document.createElement('input');\n input.type = 'number';\n applyInputStyle(input);\n input.value = String(h.read(node, 'value', 0) ?? 0);\n if (node.min != null) input.min = String(node.min);\n if (node.max != null) input.max = String(node.max);\n if (node.step != null) input.step = String(node.step);\n input.addEventListener('input', () => {\n if (node.bind) h.setBinding(String(node.bind), Number(input.value));\n });\n f.appendChild(input);\n el.appendChild(f);\n return el;\n}\n\nexport function renderCheckbox(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const lbl = document.createElement('label');\n lbl.style.cssText = 'display:flex;gap:6px;align-items:center;font-size:13px;cursor:pointer;';\n const input = document.createElement('input');\n input.type = 'checkbox';\n input.checked = Boolean(h.read(node, 'value', false));\n input.addEventListener('change', () => {\n if (node.bind) h.setBinding(String(node.bind), input.checked);\n });\n lbl.appendChild(input);\n const span = document.createElement('span');\n span.textContent = String(node.label ?? '');\n lbl.appendChild(span);\n el.appendChild(lbl);\n return el;\n}\n\nexport function renderSwitch(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const checked = Boolean(h.read(node, 'value', false));\n const lbl = document.createElement('label');\n lbl.style.cssText = 'display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer;';\n const track = document.createElement('span');\n track.style.cssText =\n 'width:32px;height:18px;border-radius:9px;position:relative;display:inline-block;' +\n `background:${checked ? 'var(--dddk-accent, #6366f1)' : 'rgba(0,0,0,0.2)'};` +\n 'transition:background 120ms;';\n const knob = document.createElement('span');\n knob.style.cssText =\n `position:absolute;top:2px;left:${checked ? 16 : 2}px;` +\n 'width:14px;height:14px;border-radius:50%;background:#fff;transition:left 120ms;';\n track.appendChild(knob);\n track.addEventListener('click', () => {\n if (node.bind) h.setBinding(String(node.bind), !checked);\n });\n lbl.appendChild(track);\n if (node.label) {\n const span = document.createElement('span');\n span.textContent = String(node.label);\n lbl.appendChild(span);\n }\n el.appendChild(lbl);\n return el;\n}\n\nexport function renderPicker(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const f = fieldWrap(node);\n const sel = document.createElement('select');\n applyInputStyle(sel);\n const opts = (node.options as Array) ?? [];\n const current = String(h.read(node, 'value', '') ?? '');\n for (const o of opts) {\n const v = typeof o === 'string' ? o : o.value;\n const l = typeof o === 'string' ? o : o.label;\n const opt = document.createElement('option');\n opt.value = v;\n opt.textContent = l;\n if (v === current) opt.selected = true;\n sel.appendChild(opt);\n }\n sel.addEventListener('change', () => {\n if (node.bind) h.setBinding(String(node.bind), sel.value);\n });\n f.appendChild(sel);\n el.appendChild(f);\n return el;\n}\n\nexport function renderDatePicker(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const f = fieldWrap(node);\n const input = document.createElement('input');\n input.type = 'datetime-local';\n applyInputStyle(input);\n input.value = String(h.read(node, 'value', '') ?? '');\n input.addEventListener('input', () => {\n if (node.bind) h.setBinding(String(node.bind), input.value);\n });\n f.appendChild(input);\n el.appendChild(f);\n return el;\n}\n\nexport function renderSlider(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const f = fieldWrap(node);\n const input = document.createElement('input');\n input.type = 'range';\n input.min = String(node.min ?? 0);\n input.max = String(node.max ?? 100);\n input.step = String(node.step ?? 1);\n input.value = String(h.read(node, 'value', 0) ?? 0);\n input.addEventListener('input', () => {\n if (node.bind) h.setBinding(String(node.bind), Number(input.value));\n });\n f.appendChild(input);\n el.appendChild(f);\n return el;\n}\n\nexport function renderFilePicker(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const f = fieldWrap(node);\n const input = document.createElement('input');\n input.type = 'file';\n if (node.accept) input.accept = String(node.accept);\n if (node.multiple) input.multiple = true;\n input.addEventListener('change', () => {\n if (!node.bind) return;\n h.setBinding(String(node.bind), Array.from(input.files ?? []));\n });\n f.appendChild(input);\n el.appendChild(f);\n return el;\n}\n","import type { PieceNode } from '../types';\nimport { BUTTON_VARIANTS_CSS } from '../tokens';\nimport type { DomHelpers } from './_shared';\n\nexport function renderButton(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const variant = String(node.variant ?? 'primary');\n const btn = document.createElement('button');\n btn.type = 'button';\n const variantCss = BUTTON_VARIANTS_CSS[variant] ?? BUTTON_VARIANTS_CSS.primary!;\n btn.style.cssText =\n `${variantCss}` +\n 'padding:6px 14px;border-radius:6px;font:inherit;cursor:pointer;font-weight:500;';\n btn.textContent = String(node.text ?? '');\n btn.addEventListener('click', () => h.trigger(String(node.action ?? 'submit'), node.payload));\n el.appendChild(btn);\n return el;\n}\n\nexport function renderLink(el: HTMLElement, node: PieceNode): HTMLElement {\n const a = document.createElement('a');\n a.href = String(node.href ?? '#');\n if (node.target) a.target = String(node.target);\n a.style.cssText = 'color:var(--dddk-accent, #6366f1);text-decoration:underline;cursor:pointer;';\n a.textContent = String(node.text ?? '');\n el.appendChild(a);\n return el;\n}\n\nexport function renderIconButton(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const btn = document.createElement('button');\n btn.type = 'button';\n if (node.title) btn.title = String(node.title);\n btn.style.cssText = 'background:transparent;border:0;cursor:pointer;padding:4px;font-size:16px;';\n btn.textContent = String(node.icon ?? '');\n btn.addEventListener('click', () => h.trigger(String(node.action ?? 'click'), node.payload));\n el.appendChild(btn);\n return el;\n}\n","import type { PieceNode } from '../types';\nimport type { DomHelpers } from './_shared';\n\nexport function renderSpinner(el: HTMLElement): HTMLElement {\n el.textContent = '⋯';\n return el;\n}\n\nexport function renderProgressBar(el: HTMLElement, node: PieceNode, h: DomHelpers): HTMLElement {\n const v = Math.min(100, Math.max(0, Number(h.read(node, 'value', 0) ?? 0)));\n const track = document.createElement('div');\n track.style.cssText = 'background:rgba(0,0,0,0.08);height:6px;border-radius:3px;overflow:hidden;';\n const fill = document.createElement('div');\n fill.style.cssText =\n `width:${v}%;height:100%;background:var(--dddk-accent, #6366f1);transition:width 200ms;`;\n track.appendChild(fill);\n el.appendChild(track);\n return el;\n}\n\nexport function renderEmptyState(el: HTMLElement, node: PieceNode): HTMLElement {\n el.style.cssText = 'padding:24px;text-align:center;color:var(--dddk-text-muted, #6b6b6b);';\n const icon = document.createElement('div');\n icon.style.cssText = 'font-size:28px;margin-bottom:8px;';\n icon.textContent = String(node.icon ?? '∅');\n el.appendChild(icon);\n const title = document.createElement('div');\n title.textContent = String(node.title ?? '');\n el.appendChild(title);\n if (node.description) {\n const small = document.createElement('small');\n small.textContent = String(node.description);\n el.appendChild(small);\n }\n return el;\n}\n\nexport function renderErrorState(el: HTMLElement, node: PieceNode): HTMLElement {\n el.style.cssText =\n 'padding:16px;background:rgba(239,68,68,0.08);border:1px solid #ef4444;' +\n 'border-radius:6px;color:#991b1b;';\n const strong = document.createElement('strong');\n strong.textContent = String(node.title ?? 'Error');\n el.appendChild(strong);\n if (node.message) {\n const msg = document.createElement('div');\n msg.style.cssText = 'margin-top:4px;font-size:13px;';\n msg.textContent = String(node.message);\n el.appendChild(msg);\n }\n return el;\n}\n","import type { PieceNode } from '../types';\n\nexport function renderSlot(el: HTMLElement, node: PieceNode): HTMLElement {\n const slotName = node.slotName;\n if (typeof slotName === 'string') {\n const map =\n (typeof window !== 'undefined' &&\n (window as unknown as { __dddkSlotElements?: Record }).__dddkSlotElements) ||\n {};\n const supplied = map[slotName];\n if (supplied) {\n el.appendChild(supplied);\n return el;\n }\n }\n el.style.cssText = 'padding:8px;background:rgba(0,0,0,0.04);border-radius:4px;font-size:11px;color:#6b6b6b;';\n el.textContent = `Slot: ${slotName ?? '(inline)'}`;\n return el;\n}\n","/**\n * PieceDomRenderer — vanilla-DOM, interactive renderer for `PieceSurface`.\n * Same tree shape as the React renderer, no React dependency.\n */\n\nimport type { PieceCatalog, PieceNode, PieceSurface } from '../types';\nimport { readPointer, applyPointer } from '../pointer';\nimport type { DomHelpers } from './_shared';\nimport * as L from './layout';\nimport * as C from './content';\nimport * as D from './data';\nimport * as I from './inputs';\nimport * as A from './actions';\nimport * as F from './feedback';\nimport { renderSlot } from './slot';\n\nexport interface PieceDomRendererOptions {\n catalog?: PieceCatalog;\n /** Read-only mode — inputs render but ignore changes. Default `false`. */\n readOnly?: boolean;\n /** Fired by Button / IconButton / Link clicks. */\n onAction?: (name: string, payload: unknown, data: Record) => void;\n /** Fired on every data-model mutation. */\n onDataChange?: (data: Record) => void;\n}\n\nexport class PieceDomRenderer {\n private opts: PieceDomRendererOptions;\n private data: Record = {};\n private surface: PieceSurface | null = null;\n private host: HTMLElement | null = null;\n\n constructor(opts: PieceDomRendererOptions = {}) {\n this.opts = opts;\n }\n\n mount(parent: HTMLElement, surface: PieceSurface): void {\n this.host = parent;\n this.surface = surface;\n this.data = { ...(surface.data ?? {}) };\n this.repaint();\n }\n\n update(surface: PieceSurface): void {\n this.surface = surface;\n // Preserve any user edits — merge incoming data on top of existing.\n this.data = { ...this.data, ...(surface.data ?? {}) };\n this.repaint();\n }\n\n setData(data: Record): void {\n this.data = { ...data };\n this.opts.onDataChange?.(this.data);\n this.repaint();\n }\n\n getData(): Record {\n return { ...this.data };\n }\n\n unmount(): void {\n if (this.host) this.host.innerHTML = '';\n this.host = null;\n this.surface = null;\n }\n\n private repaint(): void {\n if (!this.host || !this.surface) return;\n this.host.innerHTML = '';\n this.host.appendChild(this.renderNode(this.surface.root));\n }\n\n // QUICK FIX for focus-loss bug: each input rebuild via repaint() destroyed\n // the focused element. Until per-binding patching is implemented, skip the\n // repaint while the user is typing into a host-owned input — the input's\n // own `input` event has already updated its DOM value, so visually nothing\n // is lost. Any non-focused bindings re-resolve on the next repaint that\n // does fire (blur / button click / external setData). Bound siblings that\n // mirror the same value won't visually update mid-typing — accept that\n // for now; a follow-up should add real DOM diffing.\n private setBinding(path: string, value: unknown): void {\n if (this.opts.readOnly || !path) return;\n this.data = applyPointer(this.data, path, value);\n this.opts.onDataChange?.(this.data);\n const active = typeof document !== 'undefined' ? document.activeElement : null;\n if (active && this.host?.contains(active)) return;\n this.repaint();\n }\n\n private trigger(name: string, payload?: unknown): void {\n this.opts.onAction?.(name, payload, this.data);\n }\n\n private read(node: PieceNode, key: string, fallback?: T): T {\n if (node.bind) {\n const v = readPointer(this.data, String(node.bind));\n if (v !== undefined) return v as T;\n }\n const lit = node[key];\n if (lit !== undefined) return lit as T;\n return fallback as T;\n }\n\n private renderChildren(node: PieceNode): HTMLElement[] {\n const children = (node.children as PieceNode[] | undefined) ?? [];\n return children.map((c) => this.renderNode(c));\n }\n\n private helpers(): DomHelpers {\n return {\n read: (n, k, f) => this.read(n, k, f),\n renderNode: (n) => this.renderNode(n),\n renderChildren: (n) => this.renderChildren(n),\n setBinding: (p, v) => this.setBinding(p, v),\n trigger: (n, p) => this.trigger(n, p),\n };\n }\n\n private renderNode(node: PieceNode): HTMLElement {\n const el = document.createElement('div');\n el.setAttribute('data-dddk-piece', node.kind.toLowerCase());\n const h = this.helpers();\n\n switch (node.kind) {\n // Layout\n case 'Stack': return L.renderStack(el, node, h);\n case 'Grid': return L.renderGrid(el, node, h);\n case 'Split': return L.renderSplit(el, node, h);\n case 'Card': return L.renderCard(el, node, h);\n case 'Group': return L.renderGroup(el, node, h);\n case 'Tabs': return L.renderTabs(el, node, h);\n\n // Content\n case 'Heading': return C.renderHeading(el, node, h);\n case 'Text': return C.renderText(el, node, h);\n case 'Markdown': return C.renderMarkdown(el, node, h);\n case 'Code': return C.renderCode(el, node, h);\n case 'Image': return C.renderImage(el, node);\n case 'Tag': return C.renderTag(el, node);\n case 'Divider': return C.renderDivider(el);\n\n // Data\n case 'Listing': return D.renderListing(el, node, h);\n case 'Table': return D.renderTable(el, node, h);\n case 'Metric': return D.renderMetric(el, node);\n case 'Timeline': return D.renderTimeline(el, node, h);\n\n // Input\n case 'TextField':\n case 'PasswordField': return I.renderTextInput(el, node, h);\n case 'TextArea': return I.renderTextArea(el, node, h);\n case 'NumberField': return I.renderNumberField(el, node, h);\n case 'Checkbox': return I.renderCheckbox(el, node, h);\n case 'Switch': return I.renderSwitch(el, node, h);\n case 'Picker': return I.renderPicker(el, node, h);\n case 'DatePicker': return I.renderDatePicker(el, node, h);\n case 'Slider': return I.renderSlider(el, node, h);\n case 'FilePicker': return I.renderFilePicker(el, node, h);\n\n // Action\n case 'Button': return A.renderButton(el, node, h);\n case 'Link': return A.renderLink(el, node);\n case 'IconButton': return A.renderIconButton(el, node, h);\n\n // Feedback\n case 'Spinner': return F.renderSpinner(el);\n case 'ProgressBar': return F.renderProgressBar(el, node, h);\n case 'EmptyState': return F.renderEmptyState(el, node);\n case 'ErrorState': return F.renderErrorState(el, node);\n\n // Slot\n case 'Slot': return renderSlot(el, node);\n\n default: {\n const def = this.opts.catalog?.get(node.kind);\n el.style.cssText = 'padding:6px;background:rgba(0,0,0,0.03);border-radius:4px;font-size:12px;color:#6b6b6b;';\n el.textContent = def ? `<${node.kind}>` : `Unknown piece: ${node.kind}`;\n return el;\n }\n }\n }\n}\n","/**\r\n * Back-compat shim — implementation lives in `./dom/index.ts`.\r\n * External imports of `pieces/dom-renderer` still resolve here.\r\n */\r\nexport { PieceDomRenderer } from './dom';\r\nexport type { PieceDomRendererOptions } from './dom';\r\n","/**\n * Shared helpers for React built-in pieces.\n */\n\nimport type { ReactNode } from 'react';\nimport type { PieceContext, PieceNode } from '../types';\n\nexport const UI = 'data-dddk-piece';\n\nexport function Frag({ children }: { children: ReactNode }) {\n return <>{children};\n}\n\nexport function renderChildren(node: PieceNode, ctx: PieceContext): ReactNode {\n const children = node.children as PieceNode[] | undefined;\n if (!children) return null;\n return children.map((c, i) => {ctx.render(c)});\n}\n\nexport function field(node: PieceNode, child: ReactNode) {\n return (\n \n );\n}\n\n/**\n * Roving-tabindex keyboard handler shared by OptionGroup / ChoiceList.\n * Arrow keys move focus among siblings under the same parent; Enter/Space\n * confirms via the supplied `onConfirm`. Layout `row` swaps left/right with\n * up/down (the focused control is grid-shaped, both axes are valid).\n */\nexport function rovingTabindexKeyHandler(\n e: React.KeyboardEvent,\n idx: number,\n total: number,\n isRow: boolean,\n onConfirm: () => void,\n): void {\n const key = e.key;\n if (key === 'Enter' || key === ' ') {\n e.preventDefault();\n onConfirm();\n return;\n }\n let next = idx;\n if (isRow) {\n if (key === 'ArrowLeft' || key === 'ArrowUp') next = (idx - 1 + total) % total;\n else if (key === 'ArrowRight' || key === 'ArrowDown') next = (idx + 1) % total;\n } else {\n if (key === 'ArrowUp' || key === 'ArrowLeft') next = (idx - 1 + total) % total;\n else if (key === 'ArrowDown' || key === 'ArrowRight') next = (idx + 1) % total;\n }\n if (next !== idx) {\n e.preventDefault();\n const parent = e.currentTarget.parentElement;\n const nextEl = parent?.children[next] as HTMLElement | undefined;\n nextEl?.focus();\n }\n}\n","import type { PieceDefinition, PieceNode } from '../types';\nimport { UI, renderChildren } from './_shared';\n\nexport const Stack: PieceDefinition = {\n kind: 'Stack',\n meta: { category: 'layout', description: '垂直 / 水平堆疊' },\n render: (node, ctx) => (\n \n {renderChildren(node, ctx)}\n \n ),\n};\n\nexport const Grid: PieceDefinition = {\n kind: 'Grid',\n meta: { category: 'layout', description: '網格佈局' },\n render: (node, ctx) => (\n \n {renderChildren(node, ctx)}\n \n ),\n};\n\nexport const Split: PieceDefinition = {\n kind: 'Split',\n meta: { category: 'layout', description: '雙欄佈局' },\n render: (node, ctx) => (\n
\n {renderChildren(node, ctx)}\n
\n ),\n};\n\nexport const Card: PieceDefinition = {\n kind: 'Card',\n meta: { category: 'layout', description: '卡片容器' },\n render: (node, ctx) => (\n \n {renderChildren(node, ctx)}\n \n ),\n};\n\nexport const Tabs: PieceDefinition = {\n kind: 'Tabs',\n meta: { category: 'layout', description: '頁籤' },\n render: (node, ctx) => {\n const tabs = (node.tabs as Array<{ id: string; label: string; content: PieceNode }>) ?? [];\n const activeBind =\n node.bind ?? (node.id ? `__activeTab_${node.id}` : '__activeTab');\n const active = (ctx.data[activeBind] as string) ?? tabs[0]?.id;\n const activeTab = tabs.find((t) => t.id === active) ?? tabs[0];\n return (\n
\n
\n {tabs.map((t) => (\n ctx.setBinding(activeBind, t.id)}\n style={{\n padding: '6px 12px', background: 'transparent', border: 0,\n borderBottom: t.id === active ? '2px solid var(--dddk-accent)' : '2px solid transparent',\n cursor: 'pointer', font: 'inherit',\n }}\n >\n {t.label}\n \n ))}\n
\n
{activeTab && ctx.render(activeTab.content)}
\n
\n );\n },\n};\n\nexport const Group: PieceDefinition = {\n kind: 'Group',\n meta: { category: 'layout', description: 'Transparent flex container — no border / shadow / background. Use inside a Card to cluster children without stacking visual envelopes.' },\n render: (node, ctx) => (\n \n {renderChildren(node, ctx)}\n \n ),\n};\n","import type { PieceDefinition } from '../types';\nimport { resolveValue } from '../renderer';\nimport { tone } from '../tokens';\nimport { UI } from './_shared';\n\nexport const Heading: PieceDefinition = {\n kind: 'Heading',\n meta: { category: 'content' },\n render: (node, ctx) => {\n const level = ((node.level as number) ?? 3) as 1 | 2 | 3 | 4 | 5 | 6;\n const Tag = `h${level}` as const;\n const text = resolveValue(node, ctx, 'text', '');\n return {text};\n },\n};\n\nexport const Text: PieceDefinition = {\n kind: 'Text',\n meta: { category: 'content' },\n render: (node, ctx) => {\n const text = resolveValue(node, ctx, 'text', '');\n return {text};\n },\n};\n\nexport const Code: PieceDefinition = {\n kind: 'Code',\n meta: { category: 'content' },\n render: (node, ctx) => {\n const code = resolveValue(node, ctx, 'code', '');\n return (\n 
{code}
\n );\n },\n};\n\nexport const Image: PieceDefinition = {\n kind: 'Image',\n meta: { category: 'content' },\n render: (node) => (\n {(node.alt\n ),\n};\n\nexport const Tag: PieceDefinition = {\n kind: 'Tag',\n meta: { category: 'content' },\n render: (node) => {\n const c = tone(node.tone);\n return (\n {node.text as string}\n );\n },\n};\n\nexport const Divider: PieceDefinition = {\n kind: 'Divider',\n meta: { category: 'content' },\n render: () =>
,\n};\n\nexport const Markdown: PieceDefinition = {\n kind: 'Markdown',\n meta: { category: 'content' },\n render: (node, ctx) => {\n const text = resolveValue(node, ctx, 'text', '');\n return
{text}
;\n },\n};\n","import type { PieceDefinition } from '../types';\nimport { resolveValue } from '../renderer';\nimport { UI } from './_shared';\n\nexport const Listing: PieceDefinition = {\n kind: 'Listing',\n meta: { category: 'data', description: '搜尋式清單' },\n render: (node, ctx) => {\n type Item = { id: string; title: string; subtitle?: string; accessory?: string; icon?: string };\n const items = resolveValue(node, ctx, 'items', []);\n return (\n
    \n {items.map((it) => (\n
  • \n {it.icon && {it.icon}}\n
    \n
    {it.title}
    \n {it.subtitle && {it.subtitle}}\n
    \n {it.accessory && {it.accessory}}\n
    • \n ))}\n
\n );\n },\n};\n\nexport const Table: PieceDefinition = {\n kind: 'Table',\n meta: { category: 'data' },\n render: (node, ctx) => {\n const columns = (node.columns as Array<{ key: string; label: string }>) ?? [];\n const rows = resolveValue>>(node, ctx, 'rows', []);\n return (\n \n \n {columns.map((c) => (\n \n ))}\n \n \n {rows.map((r, i) => (\n \n {columns.map((c) => (\n \n ))}\n \n ))}\n \n
\n {c.label}\n
\n {String(r[c.key] ?? '')}\n
\n );\n },\n};\n\nexport const Metric: PieceDefinition = {\n kind: 'Metric',\n meta: { category: 'data', description: '單一數字 + 變動' },\n render: (node) => {\n const trend = (node.trend as string) ?? 'flat';\n const trendColor = trend === 'up' ? '#10b981' : trend === 'down' ? '#ef4444' : '#6b6b6b';\n const arrow = trend === 'up' ? '▲' : trend === 'down' ? '▼' : '–';\n return (\n
\n {Boolean(node.label) && {node.label as string}}\n
\n {node.value as string}\n {node.delta != null && (\n {arrow} {node.delta as string}\n )}\n
\n
\n );\n },\n};\n\nexport const Timeline: PieceDefinition = {\n kind: 'Timeline',\n meta: { category: 'data' },\n render: (node, ctx) => {\n type Event = { id: string; time: string; title: string; note?: string };\n const events = resolveValue(node, ctx, 'events', []);\n return (\n
    \n {events.map((e) => (\n
  1. \n \n {e.time}\n
    {e.title}
    \n {e.note && {e.note}}\n
    2. \n ))}\n
\n );\n },\n};\n","import type { PieceDefinition } from '../types';\nimport { resolveValue } from '../renderer';\nimport { BASE_INPUT_STYLE } from '../tokens';\nimport { UI, field } from './_shared';\n\nexport const TextField: PieceDefinition = {\n kind: 'TextField',\n meta: { category: 'input' },\n render: (node, ctx) => field(node, (\n (node, ctx, 'value', '') ?? '')}\n placeholder={node.placeholder as string}\n onChange={(e) => node.bind && ctx.setBinding(node.bind, e.target.value)} />\n )),\n};\n\nexport const TextArea: PieceDefinition = {\n kind: 'TextArea',\n meta: { category: 'input' },\n render: (node, ctx) => field(node, (\n