@tangle-network/agent-app 0.45.23 → 0.45.24

package/dist/design-canvas-react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/design-canvas-react/components/CanvasInsertPanel.tsx","../../src/design-canvas-react/components/LayersPanel.tsx","../../src/design-canvas-react/components/layer-tree.ts"],"sourcesContent":["/**\n * The human \"add element to the canvas\" side panel — a reusable left rail any\n * canvas consumer can mount so a person (not just the agent) can put images,\n * shapes, and text on the canvas. Designed for the `renderSidePanel` slot of\n * {@link DesignCanvasProps}; pass `renderSidePanel={(ctx) => <CanvasInsertPanel … />}`.\n *\n * Endpoints are per-app, so every I/O path is a callback — no product route is\n * hardcoded:\n *  - `onUploadImage(file) => Promise<url>` — optional. When provided, the host\n *    stores the file and returns the src to insert. The url MUST be http(s) or\n *    a rooted `/api/` path (enforced by `assertSceneMediaSrc` before insertion);\n *    a `data:` url is rejected, matching the scene model's media boundary.\n *  - `loadGenerations?()` — optional provider for \"already generated in this\n *    workspace\" images; omit to hide the tab.\n *  - `templates?` — optional template set; defaults to {@link DEFAULT_INSERT_TEMPLATES}.\n *\n * Insertion goes through `onInsert`, which the host wires to its\n * `onApplyOperations` pipeline (server-validated, undoable) — the same path\n * every other edit takes.\n *\n * Tokens/icons follow the canvas convention: CSS-var design tokens and inline\n * SVG glyphs, no icon-library or Tailwind-semantic-token dependency.\n */\n\nimport { useEffect, useRef, useState, type ReactElement } from 'react'\nimport type { SceneOperation } from '../../design-canvas/operations'\nimport { assertSceneMediaSrc } from '../../design-canvas/model'\nimport {\n  DEFAULT_INSERT_TEMPLATES,\n  buildInsertImageOp,\n  type InsertPageGeometry,\n  type InsertTemplate,\n} from '../insert-builders'\nimport { ImageGlyph, ShapesGlyph } from './glyphs'\n\n/** An already-generated image the panel can offer for one-click insertion. */\nexport interface InsertGeneration {\n  id: string\n  /** The image url to insert. Must satisfy the scene media boundary\n   *  (http(s) or rooted `/api/`); rejected otherwise at insert time. */\n  url: string\n  /** Optional prompt/label shown as the tile's title. */\n  label?: string\n}\n\nexport interface CanvasInsertPanelProps {\n  canWrite: boolean\n  /** The active page new elements are added to. */\n  page: InsertPageGeometry\n  /** Submit operations through the host's apply pipeline. */\n  onInsert(operations: SceneOperation[]): Promise<unknown>\n  /** Store an uploaded file and return its src (http(s) or rooted `/api/`). */\n  onUploadImage?(file: File): Promise<string>\n  /** Optional provider for the Generations tab; omit to hide it. */\n  loadGenerations?(): Promise<InsertGeneration[]>\n  /** Drop-in templates; defaults to the built-in starter set. */\n  templates?: readonly InsertTemplate[]\n  /** Accepted upload mime types. Default: PNG/JPEG/GIF/WebP. */\n  accept?: string\n  className?: string\n}\n\ntype Tab = 'uploads' | 'templates' | 'generations'\n\nconst DEFAULT_ACCEPT = 'image/png,image/jpeg,image/gif,image/webp'\n\n/** Read an image url's natural dimensions in the browser; resolves `{0,0}` when\n *  Image is unavailable (SSR/tests), the load fails, or the probe times out —\n *  builders fall back to the size cap, so a failed probe still inserts a sensibly\n *  sized element rather than blocking insertion. */\nconst PROBE_TIMEOUT_MS = 4000\n\nfunction probeImageSize(url: string): Promise<{ width: number; height: number }> {\n  return new Promise((resolve) => {\n    if (typeof Image === 'undefined') return resolve({ width: 0, height: 0 })\n    let settled = false\n    const finish = (size: { width: number; height: number }) => {\n      if (settled) return\n      settled = true\n      resolve(size)\n    }\n    const img = new Image()\n    img.onload = () => finish({ width: img.naturalWidth, height: img.naturalHeight })\n    img.onerror = () => finish({ width: 0, height: 0 })\n    // A URL that never loads (or an environment that never fires load/error)\n    // must not hang the insert forever.\n    setTimeout(() => finish({ width: 0, height: 0 }), PROBE_TIMEOUT_MS)\n    img.src = url\n  })\n}\n\nfunction UploadGlyph({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 9l5-5 5 5M12 4v12\" />\n    </svg>\n  )\n}\n\nfunction SparkleGlyph({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3l-2.1 2.1\" />\n    </svg>\n  )\n}\n\nfunction SpinnerGlyph({ className }: { className?: string }) {\n  return (\n    <svg className={`${className ?? ''} animate-spin`} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden>\n      <path d=\"M21 12a9 9 0 1 1-6.2-8.6\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\n/** Probe-page geometry for deriving a template's primary element kind. The\n *  result drives only the tile preview, so the exact dimensions don't matter. */\nconst PREVIEW_PROBE_PAGE: InsertPageGeometry = { pageId: 'preview', width: 1000, height: 1000 }\n\n/** The visual a template tile shows. Derived from the first element the\n *  template's (pure) `build` produces, so custom templates render correctly\n *  too — not just the built-in set. */\ntype TemplateShape = 'heading' | 'body' | 'rect' | 'ellipse' | 'other'\n\n/** A text element is treated as a heading (shown as \"T\") when it reads as a\n *  title — bold or set in a large face; otherwise body copy (shown as \"¶\"). */\nconst HEADING_FONT_SIZE = 32\n\nfunction templateShape(tpl: InsertTemplate): TemplateShape {\n  try {\n    const ops = tpl.build(PREVIEW_PROBE_PAGE)\n    const added = ops.find((op) => op.type === 'add_element')\n    if (!added || added.type !== 'add_element') return 'other'\n    const el = added.element\n    if (el.kind === 'rect') return 'rect'\n    if (el.kind === 'ellipse') return 'ellipse'\n    if (el.kind === 'text') {\n      const isHeading = el.fontStyle.includes('bold') || el.fontSize >= HEADING_FONT_SIZE\n      return isHeading ? 'heading' : 'body'\n    }\n    return 'other'\n  } catch {\n    // A throwing build can't preview; fall through to the neutral shape glyph.\n    return 'other'\n  }\n}\n\n/** A small visual standing in for what the template inserts, so tiles are\n *  distinguishable at a glance instead of four identical text chips. */\nfunction TemplatePreview({ shape }: { shape: TemplateShape }) {\n  if (shape === 'rect') {\n    return <span className=\"block h-6 w-9 rounded-sm bg-[var(--brand-primary)]\" aria-hidden />\n  }\n  if (shape === 'ellipse') {\n    return <span className=\"block h-7 w-7 rounded-full bg-[var(--brand-primary)]\" aria-hidden />\n  }\n  // Text tiles show a glyph: a bold \"T\" for a heading, a paragraph mark \"¶\"\n  // for body copy.\n  if (shape === 'heading' || shape === 'body') {\n    return (\n      <span\n        className={`block leading-none text-[var(--text-primary)] ${\n          shape === 'heading' ? 'text-2xl font-bold' : 'text-lg'\n        }`}\n        aria-hidden\n      >\n        {shape === 'heading' ? 'T' : '¶'}\n      </span>\n    )\n  }\n  return <ShapesGlyph className=\"h-6 w-6 text-[var(--text-muted)]\" />\n}\n\nexport function CanvasInsertPanel({\n  canWrite,\n  page,\n  onInsert,\n  onUploadImage,\n  loadGenerations,\n  templates = DEFAULT_INSERT_TEMPLATES,\n  accept = DEFAULT_ACCEPT,\n  className,\n}: CanvasInsertPanelProps) {\n  const [tab, setTab] = useState<Tab>(() => (templates.length > 0 ? 'templates' : 'uploads'))\n  const [busy, setBusy] = useState(false)\n  const [error, setError] = useState('')\n  const [dragOver, setDragOver] = useState(false)\n  const [generations, setGenerations] = useState<InsertGeneration[]>([])\n  const [generationsLoaded, setGenerationsLoaded] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement | null>(null)\n\n  useEffect(() => {\n    if (tab === 'uploads' && !onUploadImage) {\n      setTab(templates.length > 0 ? 'templates' : loadGenerations ? 'generations' : 'uploads')\n    }\n    if (tab === 'templates' && templates.length === 0) {\n      setTab(onUploadImage ? 'uploads' : loadGenerations ? 'generations' : 'uploads')\n    }\n    if (tab === 'generations' && !loadGenerations) {\n      setTab(templates.length > 0 ? 'templates' : onUploadImage ? 'uploads' : 'templates')\n    }\n  }, [tab, templates.length, onUploadImage, loadGenerations])\n\n  useEffect(() => {\n    if (tab !== 'generations' || generationsLoaded || !loadGenerations) return\n    let cancelled = false\n    void (async () => {\n      try {\n        const rows = await loadGenerations()\n        if (!cancelled) setGenerations(rows.filter((g) => g.url))\n      } catch (err) {\n        if (!cancelled) setError(err instanceof Error ? err.message : 'Could not load generations')\n      } finally {\n        if (!cancelled) setGenerationsLoaded(true)\n      }\n    })()\n    return () => {\n      cancelled = true\n    }\n  }, [tab, generationsLoaded, loadGenerations])\n\n  async function insertImageFromUrl(url: string) {\n    // Validate the media boundary BEFORE probing — a data: or sandbox-local url\n    // throws here (surfaced as an inline error) without a wasted image load.\n    assertSceneMediaSrc(url, 'image src')\n    const natural = await probeImageSize(url)\n    await onInsert([buildInsertImageOp(url, natural, page)])\n  }\n\n  async function handleFiles(files: FileList | File[]) {\n    if (!canWrite || busy) return\n    if (!onUploadImage) return\n    const list = Array.from(files).filter((f) => f.type.startsWith('image/'))\n    if (list.length === 0) {\n      setError('Only image files can be added to the canvas')\n      return\n    }\n    setBusy(true)\n    setError('')\n    try {\n      for (const file of list) {\n        const url = await onUploadImage(file)\n        await insertImageFromUrl(url)\n      }\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Upload failed')\n    } finally {\n      setBusy(false)\n    }\n  }\n\n  async function runInsert(build: () => SceneOperation[] | Promise<SceneOperation[]>) {\n    if (!canWrite || busy) return\n    setBusy(true)\n    setError('')\n    try {\n      await onInsert(await build())\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Insert failed')\n    } finally {\n      setBusy(false)\n    }\n  }\n\n  const tabs: Array<{ id: Tab; label: string; icon: (p: { className?: string }) => ReactElement; show: boolean }> = [\n    { id: 'uploads', label: 'Uploads', icon: ImageGlyph, show: !!onUploadImage },\n    { id: 'templates', label: 'Templates', icon: ShapesGlyph, show: templates.length > 0 },\n    { id: 'generations', label: 'Generations', icon: SparkleGlyph, show: !!loadGenerations },\n  ]\n  const visibleTabs = tabs.filter((t) => t.show)\n\n  return (\n    <div className={`flex h-full min-h-0 flex-col bg-[var(--bg-input)] text-[var(--text-primary)] ${className ?? ''}`}>\n      <div className=\"flex shrink-0 border-b border-[var(--border-default)]\">\n        {visibleTabs.map(({ id, label, icon: Icon }) => (\n          <button\n            key={id}\n            type=\"button\"\n            onClick={() => setTab(id)}\n            className={`flex flex-1 items-center justify-center gap-1.5 px-2 py-2.5 text-xs font-medium transition-colors ${\n              tab === id\n                ? 'border-b-2 border-[var(--brand-primary)] text-[var(--text-primary)]'\n                : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'\n            }`}\n          >\n            <Icon className=\"h-3.5 w-3.5\" />\n            {label}\n          </button>\n        ))}\n      </div>\n\n      {!canWrite ? (\n        <div className=\"flex flex-1 items-center justify-center p-4 text-center text-sm text-[var(--text-muted)]\">\n          You have view-only access to this design.\n        </div>\n      ) : (\n        <div className=\"min-h-0 flex-1 overflow-y-auto p-3\">\n          {tab === 'uploads' && (\n            <div className=\"flex flex-col gap-3\">\n              <button\n                type=\"button\"\n                disabled={busy}\n                onClick={() => fileInputRef.current?.click()}\n                onDragOver={(e) => {\n                  e.preventDefault()\n                  setDragOver(true)\n                }}\n                onDragLeave={() => setDragOver(false)}\n                onDrop={(e) => {\n                  e.preventDefault()\n                  setDragOver(false)\n                  if (e.dataTransfer?.files?.length) void handleFiles(e.dataTransfer.files)\n                }}\n                className={`flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-4 py-8 text-center transition-colors disabled:opacity-50 ${\n                  dragOver\n                    ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)]/5'\n                    : 'border-[var(--border-default)] hover:border-[var(--brand-primary)]/40'\n                }`}\n              >\n                {busy ? (\n                  <SpinnerGlyph className=\"h-6 w-6 text-[var(--brand-primary)]\" />\n                ) : (\n                  <UploadGlyph className=\"h-6 w-6 text-[var(--text-muted)]\" />\n                )}\n                <span className=\"text-sm font-medium text-[var(--text-primary)]\">\n                  {busy ? 'Uploading…' : 'Drop an image or click to upload'}\n                </span>\n                <span className=\"text-xs text-[var(--text-muted)]\">PNG, JPEG, GIF, or WebP</span>\n              </button>\n              <input\n                ref={fileInputRef}\n                type=\"file\"\n                accept={accept}\n                multiple\n                className=\"hidden\"\n                onChange={(e) => {\n                  if (e.target.files?.length) void handleFiles(e.target.files)\n                  e.target.value = ''\n                }}\n              />\n            </div>\n          )}\n\n          {tab === 'templates' && (\n            <div className=\"grid grid-cols-2 gap-2\">\n              {templates.map((tpl) => (\n                <button\n                  key={tpl.id}\n                  type=\"button\"\n                  disabled={busy}\n                  onClick={() => void runInsert(() => tpl.build(page))}\n                  className=\"flex h-20 flex-col items-center justify-center gap-1.5 rounded-md border border-[var(--border-default)] bg-[var(--bg-input)] text-xs font-medium text-[var(--text-primary)] transition-colors hover:border-[var(--brand-primary)]/40 disabled:opacity-50\"\n                >\n                  <span className=\"flex h-7 items-center justify-center\">\n                    <TemplatePreview shape={templateShape(tpl)} />\n                  </span>\n                  <span>{tpl.label}</span>\n                </button>\n              ))}\n            </div>\n          )}\n\n          {tab === 'generations' && (\n            <div className=\"flex flex-col gap-2\">\n              {!generationsLoaded ? (\n                <div className=\"flex items-center justify-center py-8 text-[var(--text-muted)]\">\n                  <SpinnerGlyph className=\"h-5 w-5\" />\n                </div>\n              ) : generations.length === 0 ? (\n                <p className=\"px-1 py-6 text-center text-sm text-[var(--text-muted)]\">\n                  No generated images yet. Ask the agent to generate one.\n                </p>\n              ) : (\n                <div className=\"grid grid-cols-2 gap-2\">\n                  {generations.map((gen) => (\n                    <button\n                      key={gen.id}\n                      type=\"button\"\n                      disabled={busy}\n                      onClick={() => {\n                        if (busy || !canWrite) return\n                        setBusy(true)\n                        setError('')\n                        insertImageFromUrl(gen.url)\n                          .catch((err) => setError(err instanceof Error ? err.message : 'Insert failed'))\n                          .finally(() => setBusy(false))\n                      }}\n                      title={gen.label}\n                      className=\"group relative aspect-square overflow-hidden rounded-md border border-[var(--border-default)] bg-[var(--bg-input)] transition-colors hover:border-[var(--brand-primary)] disabled:opacity-50\"\n                    >\n                      {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}\n                      <img src={gen.url} alt={gen.label || 'Generated image'} className=\"h-full w-full object-cover\" />\n                    </button>\n                  ))}\n                </div>\n              )}\n            </div>\n          )}\n\n          {error ? <p className=\"mt-3 text-xs leading-5 text-[var(--text-danger,#dc2626)]\">{error}</p> : null}\n        </div>\n      )}\n    </div>\n  )\n}\n","/**\n * Layers panel — reverse-z list of the active page's elements. Highest z-index\n * is at the top. Groups show their children indented beneath them. Clicking\n * selects an element; meta-click adds to selection. Double-clicking the name\n * opens an inline rename input. Eye and lock icons toggle visibility/locked.\n * Rows can be drag-reordered within the list (siblings only; cross-group reorder\n * is a pending integrator concern). Capped at LAYERS_PANEL_ROW_LIMIT rows.\n */\n\nimport { useCallback, useMemo, useRef, useState } from 'react'\nimport type { SceneElement, ScenePage } from '../../design-canvas/model'\nimport { flattenLayerTree, LAYERS_PANEL_ROW_LIMIT } from './layer-tree'\nimport {\n  EllipseGlyph,\n  EyeGlyph,\n  EyeOffGlyph,\n  GroupGlyph,\n  ImageGlyph,\n  LineGlyph,\n  LockGlyph,\n  RectGlyph,\n  SlotGlyph,\n  TextGlyph,\n  UnlockGlyph,\n  VideoGlyph,\n} from './glyphs'\nimport type { SceneElementKind } from '../../design-canvas/model'\n\nfunction KindIcon({ kind, className }: { kind: SceneElementKind; className?: string }) {\n  switch (kind) {\n    case 'rect': return <RectGlyph className={className} />\n    case 'ellipse': return <EllipseGlyph className={className} />\n    case 'line': return <LineGlyph className={className} />\n    case 'text': return <TextGlyph className={className} />\n    case 'image': return <ImageGlyph className={className} />\n    case 'video': return <VideoGlyph className={className} />\n    case 'group': return <GroupGlyph className={className} />\n  }\n}\n\nexport interface LayersPanelProps {\n  page: ScenePage\n  selectedElementIds: string[]\n  canWrite: boolean\n  /** Emit a set_attrs command for the given element. */\n  onSetAttrs(elementId: string, attrs: Partial<Pick<SceneElement, 'name' | 'visible' | 'locked'>>): void\n  /** Emit a reorder_element command. */\n  onReorder(elementId: string, toIndex: number): void\n  onSelect(elementId: string, additive: boolean): void\n}\n\nconst INDENT_PX = 16\n\nexport function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder, onSelect }: LayersPanelProps) {\n  const rows = useMemo(() => flattenLayerTree(page), [page])\n  const [renamingId, setRenamingId] = useState<string | null>(null)\n  const [renameValue, setRenameValue] = useState('')\n\n  // Drag-reorder state: we track the dragged row's ownerIndex and the target\n  // index within the SAME owner. Cross-owner reorder is not supported here.\n  const dragRowRef = useRef<{ elementId: string; ownerIndex: number; ownerLength: number } | null>(null)\n  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)\n\n  function startRename(element: SceneElement) {\n    setRenamingId(element.id)\n    setRenameValue(element.name)\n  }\n\n  function commitRename(elementId: string) {\n    const name = renameValue.trim()\n    if (name.length > 0) onSetAttrs(elementId, { name })\n    setRenamingId(null)\n  }\n\n  const visible = rows.length > LAYERS_PANEL_ROW_LIMIT ? rows.slice(0, LAYERS_PANEL_ROW_LIMIT) : rows\n\n  return (\n    <div className=\"flex h-full flex-col overflow-hidden text-[var(--text-primary)]\">\n      <div className=\"shrink-0 border-b border-[var(--border-default)] px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n        Layers\n      </div>\n\n      <div className=\"min-h-0 flex-1 overflow-y-auto\">\n        {visible.map((row) => {\n          const { element } = row\n          const isSelected = selectedElementIds.includes(element.id)\n          const isRenaming = renamingId === element.id\n\n          return (\n            <div\n              key={element.id}\n              data-layer-row={element.id}\n              draggable={canWrite}\n              onDragStart={() => {\n                dragRowRef.current = {\n                  elementId: element.id,\n                  ownerIndex: row.ownerIndex,\n                  ownerLength: row.ownerLength,\n                }\n              }}\n              onDragOver={(event) => {\n                if (!dragRowRef.current) return\n                // Only allow reorder within the same owner (same parentGroupId + depth)\n                event.preventDefault()\n                setDragOverIndex(row.ownerIndex)\n              }}\n              onDragLeave={() => setDragOverIndex(null)}\n              onDrop={() => {\n                const drag = dragRowRef.current\n                if (!drag) return\n                if (drag.elementId !== element.id) {\n                  onReorder(drag.elementId, row.ownerIndex)\n                }\n                dragRowRef.current = null\n                setDragOverIndex(null)\n              }}\n              onDragEnd={() => {\n                dragRowRef.current = null\n                setDragOverIndex(null)\n              }}\n              className={[\n                'group flex items-center gap-1.5 py-1 pr-2 text-[13px] transition-colors',\n                isSelected ? 'bg-[var(--brand-primary)]/15 text-[var(--text-primary)]' : 'hover:bg-[var(--border-default)]/40 text-[var(--text-secondary)]',\n                dragOverIndex === row.ownerIndex ? 'border-t border-[var(--brand-primary)]' : '',\n              ].join(' ')}\n              style={{ paddingLeft: 8 + row.depth * INDENT_PX }}\n            >\n              {isRenaming ? (\n                <input\n                  autoFocus\n                  value={renameValue}\n                  onChange={(event) => setRenameValue(event.target.value)}\n                  onBlur={() => commitRename(element.id)}\n                  onKeyDown={(event) => {\n                    if (event.key === 'Enter') commitRename(element.id)\n                    if (event.key === 'Escape') setRenamingId(null)\n                    event.stopPropagation()\n                  }}\n                  className=\"min-w-0 flex-1 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0 text-[13px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]\"\n                />\n              ) : (\n                // Selection is a real button (sibling of the eye/lock buttons) so\n                // the row is not an interactive control nesting interactive\n                // controls (axe: nested-interactive).\n                <button\n                  type=\"button\"\n                  onClick={(event) => onSelect(element.id, event.metaKey || event.ctrlKey)}\n                  onDoubleClick={() => {\n                    if (canWrite) startRename(element)\n                  }}\n                  title={element.name}\n                  className=\"flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 bg-transparent text-left focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]\"\n                >\n                  <KindIcon kind={element.kind} className=\"h-3.5 w-3.5 shrink-0 opacity-60\" />\n                  {element.slot ? <SlotGlyph className=\"h-3 w-3 shrink-0 text-[var(--brand-primary)]\" /> : null}\n                  <span className=\"min-w-0 flex-1 truncate\">{element.name}</span>\n                </button>\n              )}\n\n              {/* Visibility toggle */}\n              <button\n                type=\"button\"\n                aria-label={element.visible ? 'Hide element' : 'Show element'}\n                aria-pressed={!element.visible}\n                onClick={(event) => {\n                  event.stopPropagation()\n                  if (canWrite) onSetAttrs(element.id, { visible: !element.visible })\n                }}\n                disabled={!canWrite}\n                className={[\n                  'shrink-0 rounded p-0.5 transition-opacity group-hover:opacity-100 hover:opacity-100 focus-visible:opacity-100 focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]',\n                  element.visible ? 'opacity-0' : 'opacity-100',\n                ].join(' ')}\n              >\n                {element.visible\n                  ? <EyeGlyph className=\"h-3.5 w-3.5\" />\n                  : <EyeOffGlyph className=\"h-3.5 w-3.5 text-[var(--text-muted)]\" />}\n              </button>\n\n              {/* Lock toggle */}\n              <button\n                type=\"button\"\n                aria-label={element.locked ? 'Unlock element' : 'Lock element'}\n                aria-pressed={!!element.locked}\n                onClick={(event) => {\n                  event.stopPropagation()\n                  if (canWrite) onSetAttrs(element.id, { locked: !element.locked })\n                }}\n                disabled={!canWrite}\n                className={[\n                  'shrink-0 rounded p-0.5 transition-opacity group-hover:opacity-100 hover:opacity-100 focus-visible:opacity-100 focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]',\n                  element.locked ? 'opacity-100' : 'opacity-0',\n                ].join(' ')}\n              >\n                {element.locked\n                  ? <LockGlyph className=\"h-3.5 w-3.5 text-[var(--text-warning)]\" />\n                  : <UnlockGlyph className=\"h-3.5 w-3.5\" />}\n              </button>\n            </div>\n          )\n        })}\n\n        {rows.length > LAYERS_PANEL_ROW_LIMIT ? (\n          <div className=\"px-3 py-2 text-[11px] text-[var(--text-muted)]\">\n            +{rows.length - LAYERS_PANEL_ROW_LIMIT} more elements — select a group to scope the list\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n","/**\n * Pure layer-tree helpers: flatten a page's element array into an ordered list\n * for the LayersPanel, preserving group nesting. Extracted so render order,\n * depth, and selection math can be unit-tested independently of React.\n */\n\nimport type { SceneElement, ScenePage } from '../../design-canvas/model'\n\n/** Describe a layer row with its element, depth, grouping, ownership, and parent group details */\nexport interface LayerRow {\n  element: SceneElement\n  depth: number\n  /** True when this row is a group whose children follow it in the list. */\n  isGroup: boolean\n  /** Index within its owner (page.elements or group.children). */\n  ownerIndex: number\n  /** Length of the owner array — needed for z-order bound math. */\n  ownerLength: number\n  /** Id of the containing group, or null for page-root elements. */\n  parentGroupId: string | null\n}\n\n/**\n * Flatten `page.elements` into display order for the layers panel.\n *\n * Z-order is bottom→top in the element array; the layers panel shows\n * top→bottom (highest z-index first). A group row precedes its children\n * (the group is \"above\" its children in the panel, reflecting that the group\n * node itself paints last in Konva when empty; children paint inside it).\n *\n * Depth increases by 1 for each group level, starting at 0 for page-root\n * elements. Groups are expanded; collapsed state is a view concern the caller\n * tracks separately.\n */\nexport function flattenLayerTree(page: ScenePage): LayerRow[] {\n  const rows: LayerRow[] = []\n\n  function visit(elements: SceneElement[], depth: number, parentGroupId: string | null) {\n    // Reverse so highest z-index appears at the top of the panel.\n    for (let i = elements.length - 1; i >= 0; i -= 1) {\n      const element = elements[i]!\n      rows.push({\n        element,\n        depth,\n        isGroup: element.kind === 'group',\n        ownerIndex: i,\n        ownerLength: elements.length,\n        parentGroupId,\n      })\n      if (element.kind === 'group') {\n        visit(element.children, depth + 1, element.id)\n      }\n    }\n  }\n\n  visit(page.elements, 0, null)\n  return rows\n}\n\n/** The maximum number of rows the layers panel renders before truncating. */\nexport const LAYERS_PANEL_ROW_LIMIT = 500\n"],"mappings":"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","names":["useRef","useState","jsx","jsxs","useState","useRef"]}
+{"version":3,"sources":["../../src/design-canvas-react/components/CanvasInsertPanel.tsx","../../src/design-canvas-react/components/LayersPanel.tsx","../../src/design-canvas-react/components/layer-tree.ts"],"sourcesContent":["/**\n * The human \"add element to the canvas\" side panel — a reusable left rail any\n * canvas consumer can mount so a person (not just the agent) can put images,\n * shapes, and text on the canvas. Designed for the `renderSidePanel` slot of\n * {@link DesignCanvasProps}; pass `renderSidePanel={(ctx) => <CanvasInsertPanel … />}`.\n *\n * Endpoints are per-app, so every I/O path is a callback — no product route is\n * hardcoded:\n *  - `onUploadImage(file) => Promise<url>` — optional. When provided, the host\n *    stores the file and returns the src to insert. The url MUST be http(s) or\n *    a rooted `/api/` path (enforced by `assertSceneMediaSrc` before insertion);\n *    a `data:` url is rejected, matching the scene model's media boundary.\n *  - `loadGenerations?()` — optional provider for \"already generated in this\n *    workspace\" images; omit to hide the tab.\n *  - `templates?` — optional template set; defaults to {@link DEFAULT_INSERT_TEMPLATES}.\n *\n * Insertion goes through `onInsert`, which the host wires to its\n * `onApplyOperations` pipeline (server-validated, undoable) — the same path\n * every other edit takes.\n *\n * Tokens/icons follow the canvas convention: CSS-var design tokens and inline\n * SVG glyphs, no icon-library or Tailwind-semantic-token dependency.\n */\n\nimport { useEffect, useRef, useState, type ReactElement } from 'react'\nimport type { SceneOperation } from '../../design-canvas/operations'\nimport { assertSceneMediaSrc } from '../../design-canvas/model'\nimport {\n  DEFAULT_INSERT_TEMPLATES,\n  buildInsertImageOp,\n  type InsertPageGeometry,\n  type InsertTemplate,\n} from '../insert-builders'\nimport { ImageGlyph, ShapesGlyph } from './glyphs'\n\n/** An already-generated image the panel can offer for one-click insertion. */\nexport interface InsertGeneration {\n  id: string\n  /** The image url to insert. Must satisfy the scene media boundary\n   *  (http(s) or rooted `/api/`); rejected otherwise at insert time. */\n  url: string\n  /** Optional prompt/label shown as the tile's title. */\n  label?: string\n}\n\nexport interface CanvasInsertPanelProps {\n  canWrite: boolean\n  /** The active page new elements are added to. */\n  page: InsertPageGeometry\n  /** Submit operations through the host's apply pipeline. */\n  onInsert(operations: SceneOperation[]): Promise<unknown>\n  /** Store an uploaded file and return its src (http(s) or rooted `/api/`). */\n  onUploadImage?(file: File): Promise<string>\n  /** Optional provider for the Generations tab; omit to hide it. */\n  loadGenerations?(): Promise<InsertGeneration[]>\n  /** Drop-in templates; defaults to the built-in starter set. */\n  templates?: readonly InsertTemplate[]\n  /** Accepted upload mime types. Default: PNG/JPEG/GIF/WebP. */\n  accept?: string\n  className?: string\n}\n\ntype Tab = 'uploads' | 'templates' | 'generations'\n\nconst DEFAULT_ACCEPT = 'image/png,image/jpeg,image/gif,image/webp'\n\n/** Read an image url's natural dimensions in the browser; resolves `{0,0}` when\n *  Image is unavailable (SSR/tests), the load fails, or the probe times out —\n *  builders fall back to the size cap, so a failed probe still inserts a sensibly\n *  sized element rather than blocking insertion. */\nconst PROBE_TIMEOUT_MS = 4000\n\nfunction probeImageSize(url: string): Promise<{ width: number; height: number }> {\n  return new Promise((resolve) => {\n    if (typeof Image === 'undefined') return resolve({ width: 0, height: 0 })\n    let settled = false\n    const finish = (size: { width: number; height: number }) => {\n      if (settled) return\n      settled = true\n      resolve(size)\n    }\n    const img = new Image()\n    img.onload = () => finish({ width: img.naturalWidth, height: img.naturalHeight })\n    img.onerror = () => finish({ width: 0, height: 0 })\n    // A URL that never loads (or an environment that never fires load/error)\n    // must not hang the insert forever.\n    setTimeout(() => finish({ width: 0, height: 0 }), PROBE_TIMEOUT_MS)\n    img.src = url\n  })\n}\n\nfunction UploadGlyph({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 9l5-5 5 5M12 4v12\" />\n    </svg>\n  )\n}\n\nfunction SparkleGlyph({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3l-2.1 2.1\" />\n    </svg>\n  )\n}\n\nfunction SpinnerGlyph({ className }: { className?: string }) {\n  return (\n    <svg className={`${className ?? ''} animate-spin`} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden>\n      <path d=\"M21 12a9 9 0 1 1-6.2-8.6\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\n/** Probe-page geometry for deriving a template's primary element kind. The\n *  result drives only the tile preview, so the exact dimensions don't matter. */\nconst PREVIEW_PROBE_PAGE: InsertPageGeometry = { pageId: 'preview', width: 1000, height: 1000 }\n\n/** The visual a template tile shows. Derived from the first element the\n *  template's (pure) `build` produces, so custom templates render correctly\n *  too — not just the built-in set. */\ntype TemplateShape = 'heading' | 'body' | 'rect' | 'ellipse' | 'other'\n\n/** A text element is treated as a heading (shown as \"T\") when it reads as a\n *  title — bold or set in a large face; otherwise body copy (shown as \"¶\"). */\nconst HEADING_FONT_SIZE = 32\n\nfunction templateShape(tpl: InsertTemplate): TemplateShape {\n  try {\n    const ops = tpl.build(PREVIEW_PROBE_PAGE)\n    const added = ops.find((op) => op.type === 'add_element')\n    if (!added || added.type !== 'add_element') return 'other'\n    const el = added.element\n    if (el.kind === 'rect') return 'rect'\n    if (el.kind === 'ellipse') return 'ellipse'\n    if (el.kind === 'text') {\n      const isHeading = el.fontStyle.includes('bold') || el.fontSize >= HEADING_FONT_SIZE\n      return isHeading ? 'heading' : 'body'\n    }\n    return 'other'\n  } catch {\n    // A throwing build can't preview; fall through to the neutral shape glyph.\n    return 'other'\n  }\n}\n\n/** A small visual standing in for what the template inserts, so tiles are\n *  distinguishable at a glance instead of four identical text chips. */\nfunction TemplatePreview({ shape }: { shape: TemplateShape }) {\n  if (shape === 'rect') {\n    return <span className=\"block h-6 w-9 rounded-sm bg-[var(--brand-primary)]\" aria-hidden />\n  }\n  if (shape === 'ellipse') {\n    return <span className=\"block h-7 w-7 rounded-full bg-[var(--brand-primary)]\" aria-hidden />\n  }\n  // Text tiles show a glyph: a bold \"T\" for a heading, a paragraph mark \"¶\"\n  // for body copy.\n  if (shape === 'heading' || shape === 'body') {\n    return (\n      <span\n        className={`block leading-none text-[var(--text-primary)] ${\n          shape === 'heading' ? 'text-2xl font-bold' : 'text-lg'\n        }`}\n        aria-hidden\n      >\n        {shape === 'heading' ? 'T' : '¶'}\n      </span>\n    )\n  }\n  return <ShapesGlyph className=\"h-6 w-6 text-[var(--text-muted)]\" />\n}\n\nexport function CanvasInsertPanel({\n  canWrite,\n  page,\n  onInsert,\n  onUploadImage,\n  loadGenerations,\n  templates = DEFAULT_INSERT_TEMPLATES,\n  accept = DEFAULT_ACCEPT,\n  className,\n}: CanvasInsertPanelProps) {\n  const [tab, setTab] = useState<Tab>(() => (templates.length > 0 ? 'templates' : 'uploads'))\n  const [busy, setBusy] = useState(false)\n  const [error, setError] = useState('')\n  const [dragOver, setDragOver] = useState(false)\n  const [generations, setGenerations] = useState<InsertGeneration[]>([])\n  const [generationsLoaded, setGenerationsLoaded] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement | null>(null)\n\n  useEffect(() => {\n    if (tab === 'uploads' && !onUploadImage) {\n      setTab(templates.length > 0 ? 'templates' : loadGenerations ? 'generations' : 'uploads')\n    }\n    if (tab === 'templates' && templates.length === 0) {\n      setTab(onUploadImage ? 'uploads' : loadGenerations ? 'generations' : 'uploads')\n    }\n    if (tab === 'generations' && !loadGenerations) {\n      setTab(templates.length > 0 ? 'templates' : onUploadImage ? 'uploads' : 'templates')\n    }\n  }, [tab, templates.length, onUploadImage, loadGenerations])\n\n  useEffect(() => {\n    if (tab !== 'generations' || generationsLoaded || !loadGenerations) return\n    let cancelled = false\n    void (async () => {\n      try {\n        const rows = await loadGenerations()\n        if (!cancelled) setGenerations(rows.filter((g) => g.url))\n      } catch (err) {\n        if (!cancelled) setError(err instanceof Error ? err.message : 'Could not load generations')\n      } finally {\n        if (!cancelled) setGenerationsLoaded(true)\n      }\n    })()\n    return () => {\n      cancelled = true\n    }\n  }, [tab, generationsLoaded, loadGenerations])\n\n  async function insertImageFromUrl(url: string) {\n    // Validate the media boundary BEFORE probing — a data: or sandbox-local url\n    // throws here (surfaced as an inline error) without a wasted image load.\n    assertSceneMediaSrc(url, 'image src')\n    const natural = await probeImageSize(url)\n    await onInsert([buildInsertImageOp(url, natural, page)])\n  }\n\n  async function handleFiles(files: FileList | File[]) {\n    if (!canWrite || busy) return\n    if (!onUploadImage) return\n    const list = Array.from(files).filter((f) => f.type.startsWith('image/'))\n    if (list.length === 0) {\n      setError('Only image files can be added to the canvas')\n      return\n    }\n    setBusy(true)\n    setError('')\n    try {\n      for (const file of list) {\n        const url = await onUploadImage(file)\n        await insertImageFromUrl(url)\n      }\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Upload failed')\n    } finally {\n      setBusy(false)\n    }\n  }\n\n  async function runInsert(build: () => SceneOperation[] | Promise<SceneOperation[]>) {\n    if (!canWrite || busy) return\n    setBusy(true)\n    setError('')\n    try {\n      await onInsert(await build())\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Insert failed')\n    } finally {\n      setBusy(false)\n    }\n  }\n\n  const tabs: Array<{ id: Tab; label: string; icon: (p: { className?: string }) => ReactElement; show: boolean }> = [\n    { id: 'uploads', label: 'Uploads', icon: ImageGlyph, show: !!onUploadImage },\n    { id: 'templates', label: 'Templates', icon: ShapesGlyph, show: templates.length > 0 },\n    { id: 'generations', label: 'Generations', icon: SparkleGlyph, show: !!loadGenerations },\n  ]\n  const visibleTabs = tabs.filter((t) => t.show)\n\n  return (\n    <div className={`flex h-full min-h-0 flex-col bg-[var(--bg-input)] text-[var(--text-primary)] ${className ?? ''}`}>\n      <div className=\"flex shrink-0 border-b border-[var(--border-default)]\">\n        {visibleTabs.map(({ id, label, icon: Icon }) => (\n          <button\n            key={id}\n            type=\"button\"\n            onClick={() => setTab(id)}\n            // These tabs sit flush against the top and side edges of a panel\n            // that clips its overflow, so the floor's outward ring is cut off on\n            // three sides and reads as a stray underline. The negative offset\n            // draws the same ring inside the tab; width and colour still come\n            // from the tokens.\n            className={`flex flex-1 items-center justify-center gap-1.5 px-2 py-2.5 text-xs font-medium transition-colors focus-visible:[outline-offset:-2px] ${\n              tab === id\n                ? 'border-b-2 border-[var(--brand-primary)] text-[var(--text-primary)]'\n                : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'\n            }`}\n          >\n            <Icon className=\"h-3.5 w-3.5\" />\n            {label}\n          </button>\n        ))}\n      </div>\n\n      {!canWrite ? (\n        <div className=\"flex flex-1 items-center justify-center p-4 text-center text-sm text-[var(--text-muted)]\">\n          You have view-only access to this design.\n        </div>\n      ) : (\n        <div className=\"min-h-0 flex-1 overflow-y-auto p-3\">\n          {tab === 'uploads' && (\n            <div className=\"flex flex-col gap-3\">\n              <button\n                type=\"button\"\n                disabled={busy}\n                onClick={() => fileInputRef.current?.click()}\n                onDragOver={(e) => {\n                  e.preventDefault()\n                  setDragOver(true)\n                }}\n                onDragLeave={() => setDragOver(false)}\n                onDrop={(e) => {\n                  e.preventDefault()\n                  setDragOver(false)\n                  if (e.dataTransfer?.files?.length) void handleFiles(e.dataTransfer.files)\n                }}\n                className={`flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-4 py-8 text-center transition-colors disabled:opacity-50 ${\n                  dragOver\n                    ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)]/5'\n                    : 'border-[var(--border-default)] hover:border-[var(--brand-primary)]/40'\n                }`}\n              >\n                {busy ? (\n                  <SpinnerGlyph className=\"h-6 w-6 text-[var(--brand-primary)]\" />\n                ) : (\n                  <UploadGlyph className=\"h-6 w-6 text-[var(--text-muted)]\" />\n                )}\n                <span className=\"text-sm font-medium text-[var(--text-primary)]\">\n                  {busy ? 'Uploading…' : 'Drop an image or click to upload'}\n                </span>\n                <span className=\"text-xs text-[var(--text-muted)]\">PNG, JPEG, GIF, or WebP</span>\n              </button>\n              <input\n                ref={fileInputRef}\n                type=\"file\"\n                accept={accept}\n                multiple\n                className=\"hidden\"\n                onChange={(e) => {\n                  if (e.target.files?.length) void handleFiles(e.target.files)\n                  e.target.value = ''\n                }}\n              />\n            </div>\n          )}\n\n          {tab === 'templates' && (\n            <div className=\"grid grid-cols-2 gap-2\">\n              {templates.map((tpl) => (\n                <button\n                  key={tpl.id}\n                  type=\"button\"\n                  disabled={busy}\n                  onClick={() => void runInsert(() => tpl.build(page))}\n                  className=\"flex h-20 flex-col items-center justify-center gap-1.5 rounded-md border border-[var(--border-default)] bg-[var(--bg-input)] text-xs font-medium text-[var(--text-primary)] transition-colors hover:border-[var(--brand-primary)]/40 disabled:opacity-50\"\n                >\n                  <span className=\"flex h-7 items-center justify-center\">\n                    <TemplatePreview shape={templateShape(tpl)} />\n                  </span>\n                  <span>{tpl.label}</span>\n                </button>\n              ))}\n            </div>\n          )}\n\n          {tab === 'generations' && (\n            <div className=\"flex flex-col gap-2\">\n              {!generationsLoaded ? (\n                <div className=\"flex items-center justify-center py-8 text-[var(--text-muted)]\">\n                  <SpinnerGlyph className=\"h-5 w-5\" />\n                </div>\n              ) : generations.length === 0 ? (\n                <p className=\"px-1 py-6 text-center text-sm text-[var(--text-muted)]\">\n                  No generated images yet. Ask the agent to generate one.\n                </p>\n              ) : (\n                <div className=\"grid grid-cols-2 gap-2\">\n                  {generations.map((gen) => (\n                    <button\n                      key={gen.id}\n                      type=\"button\"\n                      disabled={busy}\n                      onClick={() => {\n                        if (busy || !canWrite) return\n                        setBusy(true)\n                        setError('')\n                        insertImageFromUrl(gen.url)\n                          .catch((err) => setError(err instanceof Error ? err.message : 'Insert failed'))\n                          .finally(() => setBusy(false))\n                      }}\n                      title={gen.label}\n                      className=\"group relative aspect-square overflow-hidden rounded-md border border-[var(--border-default)] bg-[var(--bg-input)] transition-colors hover:border-[var(--brand-primary)] disabled:opacity-50\"\n                    >\n                      {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}\n                      <img src={gen.url} alt={gen.label || 'Generated image'} className=\"h-full w-full object-cover\" />\n                    </button>\n                  ))}\n                </div>\n              )}\n            </div>\n          )}\n\n          {error ? <p className=\"mt-3 text-xs leading-5 text-[var(--text-danger,#dc2626)]\">{error}</p> : null}\n        </div>\n      )}\n    </div>\n  )\n}\n","/**\n * Layers panel — reverse-z list of the active page's elements. Highest z-index\n * is at the top. Groups show their children indented beneath them. Clicking\n * selects an element; meta-click adds to selection. Double-clicking the name\n * opens an inline rename input. Eye and lock icons toggle visibility/locked.\n * Rows can be drag-reordered within the list (siblings only; cross-group reorder\n * is a pending integrator concern). Capped at LAYERS_PANEL_ROW_LIMIT rows.\n */\n\nimport { useCallback, useMemo, useRef, useState } from 'react'\nimport type { SceneElement, ScenePage } from '../../design-canvas/model'\nimport { flattenLayerTree, LAYERS_PANEL_ROW_LIMIT } from './layer-tree'\nimport {\n  EllipseGlyph,\n  EyeGlyph,\n  EyeOffGlyph,\n  GroupGlyph,\n  ImageGlyph,\n  LineGlyph,\n  LockGlyph,\n  RectGlyph,\n  SlotGlyph,\n  TextGlyph,\n  UnlockGlyph,\n  VideoGlyph,\n} from './glyphs'\nimport type { SceneElementKind } from '../../design-canvas/model'\n\nfunction KindIcon({ kind, className }: { kind: SceneElementKind; className?: string }) {\n  switch (kind) {\n    case 'rect': return <RectGlyph className={className} />\n    case 'ellipse': return <EllipseGlyph className={className} />\n    case 'line': return <LineGlyph className={className} />\n    case 'text': return <TextGlyph className={className} />\n    case 'image': return <ImageGlyph className={className} />\n    case 'video': return <VideoGlyph className={className} />\n    case 'group': return <GroupGlyph className={className} />\n  }\n}\n\nexport interface LayersPanelProps {\n  page: ScenePage\n  selectedElementIds: string[]\n  canWrite: boolean\n  /** Emit a set_attrs command for the given element. */\n  onSetAttrs(elementId: string, attrs: Partial<Pick<SceneElement, 'name' | 'visible' | 'locked'>>): void\n  /** Emit a reorder_element command. */\n  onReorder(elementId: string, toIndex: number): void\n  onSelect(elementId: string, additive: boolean): void\n}\n\nconst INDENT_PX = 16\n\nexport function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder, onSelect }: LayersPanelProps) {\n  const rows = useMemo(() => flattenLayerTree(page), [page])\n  const [renamingId, setRenamingId] = useState<string | null>(null)\n  const [renameValue, setRenameValue] = useState('')\n\n  // Drag-reorder state: we track the dragged row's ownerIndex and the target\n  // index within the SAME owner. Cross-owner reorder is not supported here.\n  const dragRowRef = useRef<{ elementId: string; ownerIndex: number; ownerLength: number } | null>(null)\n  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)\n\n  function startRename(element: SceneElement) {\n    setRenamingId(element.id)\n    setRenameValue(element.name)\n  }\n\n  function commitRename(elementId: string) {\n    const name = renameValue.trim()\n    if (name.length > 0) onSetAttrs(elementId, { name })\n    setRenamingId(null)\n  }\n\n  const visible = rows.length > LAYERS_PANEL_ROW_LIMIT ? rows.slice(0, LAYERS_PANEL_ROW_LIMIT) : rows\n\n  return (\n    <div className=\"flex h-full flex-col overflow-hidden text-[var(--text-primary)]\">\n      <div className=\"shrink-0 border-b border-[var(--border-default)] px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n        Layers\n      </div>\n\n      <div className=\"min-h-0 flex-1 overflow-y-auto\">\n        {visible.map((row) => {\n          const { element } = row\n          const isSelected = selectedElementIds.includes(element.id)\n          const isRenaming = renamingId === element.id\n\n          return (\n            <div\n              key={element.id}\n              data-layer-row={element.id}\n              draggable={canWrite}\n              onDragStart={() => {\n                dragRowRef.current = {\n                  elementId: element.id,\n                  ownerIndex: row.ownerIndex,\n                  ownerLength: row.ownerLength,\n                }\n              }}\n              onDragOver={(event) => {\n                if (!dragRowRef.current) return\n                // Only allow reorder within the same owner (same parentGroupId + depth)\n                event.preventDefault()\n                setDragOverIndex(row.ownerIndex)\n              }}\n              onDragLeave={() => setDragOverIndex(null)}\n              onDrop={() => {\n                const drag = dragRowRef.current\n                if (!drag) return\n                if (drag.elementId !== element.id) {\n                  onReorder(drag.elementId, row.ownerIndex)\n                }\n                dragRowRef.current = null\n                setDragOverIndex(null)\n              }}\n              onDragEnd={() => {\n                dragRowRef.current = null\n                setDragOverIndex(null)\n              }}\n              className={[\n                'group flex items-center gap-1.5 py-1 pr-2 text-[13px] transition-colors',\n                isSelected ? 'bg-[var(--brand-primary)]/15 text-[var(--text-primary)]' : 'hover:bg-[var(--border-default)]/40 text-[var(--text-secondary)]',\n                dragOverIndex === row.ownerIndex ? 'border-t border-[var(--brand-primary)]' : '',\n              ].join(' ')}\n              style={{ paddingLeft: 8 + row.depth * INDENT_PX }}\n            >\n              {isRenaming ? (\n                <input\n                  autoFocus\n                  value={renameValue}\n                  onChange={(event) => setRenameValue(event.target.value)}\n                  onBlur={() => commitRename(element.id)}\n                  onKeyDown={(event) => {\n                    if (event.key === 'Enter') commitRename(element.id)\n                    if (event.key === 'Escape') setRenamingId(null)\n                    event.stopPropagation()\n                  }}\n                  className=\"min-w-0 flex-1 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0 text-[13px] text-[var(--text-primary)] focus:border-[var(--brand-primary)]\"\n                />\n              ) : (\n                // Selection is a real button (sibling of the eye/lock buttons) so\n                // the row is not an interactive control nesting interactive\n                // controls (axe: nested-interactive).\n                <button\n                  type=\"button\"\n                  onClick={(event) => onSelect(element.id, event.metaKey || event.ctrlKey)}\n                  onDoubleClick={() => {\n                    if (canWrite) startRename(element)\n                  }}\n                  title={element.name}\n                  className=\"flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 bg-transparent text-left\"\n                >\n                  <KindIcon kind={element.kind} className=\"h-3.5 w-3.5 shrink-0 opacity-60\" />\n                  {element.slot ? <SlotGlyph className=\"h-3 w-3 shrink-0 text-[var(--brand-primary)]\" /> : null}\n                  <span className=\"min-w-0 flex-1 truncate\">{element.name}</span>\n                </button>\n              )}\n\n              {/* Visibility toggle */}\n              <button\n                type=\"button\"\n                aria-label={element.visible ? 'Hide element' : 'Show element'}\n                aria-pressed={!element.visible}\n                onClick={(event) => {\n                  event.stopPropagation()\n                  if (canWrite) onSetAttrs(element.id, { visible: !element.visible })\n                }}\n                disabled={!canWrite}\n                className={[\n                  'shrink-0 rounded p-0.5 transition-opacity group-hover:opacity-100 hover:opacity-100 focus-visible:opacity-100',\n                  element.visible ? 'opacity-0' : 'opacity-100',\n                ].join(' ')}\n              >\n                {element.visible\n                  ? <EyeGlyph className=\"h-3.5 w-3.5\" />\n                  : <EyeOffGlyph className=\"h-3.5 w-3.5 text-[var(--text-muted)]\" />}\n              </button>\n\n              {/* Lock toggle */}\n              <button\n                type=\"button\"\n                aria-label={element.locked ? 'Unlock element' : 'Lock element'}\n                aria-pressed={!!element.locked}\n                onClick={(event) => {\n                  event.stopPropagation()\n                  if (canWrite) onSetAttrs(element.id, { locked: !element.locked })\n                }}\n                disabled={!canWrite}\n                className={[\n                  'shrink-0 rounded p-0.5 transition-opacity group-hover:opacity-100 hover:opacity-100 focus-visible:opacity-100',\n                  element.locked ? 'opacity-100' : 'opacity-0',\n                ].join(' ')}\n              >\n                {element.locked\n                  ? <LockGlyph className=\"h-3.5 w-3.5 text-[var(--text-warning)]\" />\n                  : <UnlockGlyph className=\"h-3.5 w-3.5\" />}\n              </button>\n            </div>\n          )\n        })}\n\n        {rows.length > LAYERS_PANEL_ROW_LIMIT ? (\n          <div className=\"px-3 py-2 text-[11px] text-[var(--text-muted)]\">\n            +{rows.length - LAYERS_PANEL_ROW_LIMIT} more elements — select a group to scope the list\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n","/**\n * Pure layer-tree helpers: flatten a page's element array into an ordered list\n * for the LayersPanel, preserving group nesting. Extracted so render order,\n * depth, and selection math can be unit-tested independently of React.\n */\n\nimport type { SceneElement, ScenePage } from '../../design-canvas/model'\n\n/** Describe a layer row with its element, depth, grouping, ownership, and parent group details */\nexport interface LayerRow {\n  element: SceneElement\n  depth: number\n  /** True when this row is a group whose children follow it in the list. */\n  isGroup: boolean\n  /** Index within its owner (page.elements or group.children). */\n  ownerIndex: number\n  /** Length of the owner array — needed for z-order bound math. */\n  ownerLength: number\n  /** Id of the containing group, or null for page-root elements. */\n  parentGroupId: string | null\n}\n\n/**\n * Flatten `page.elements` into display order for the layers panel.\n *\n * Z-order is bottom→top in the element array; the layers panel shows\n * top→bottom (highest z-index first). A group row precedes its children\n * (the group is \"above\" its children in the panel, reflecting that the group\n * node itself paints last in Konva when empty; children paint inside it).\n *\n * Depth increases by 1 for each group level, starting at 0 for page-root\n * elements. Groups are expanded; collapsed state is a view concern the caller\n * tracks separately.\n */\nexport function flattenLayerTree(page: ScenePage): LayerRow[] {\n  const rows: LayerRow[] = []\n\n  function visit(elements: SceneElement[], depth: number, parentGroupId: string | null) {\n    // Reverse so highest z-index appears at the top of the panel.\n    for (let i = elements.length - 1; i >= 0; i -= 1) {\n      const element = elements[i]!\n      rows.push({\n        element,\n        depth,\n        isGroup: element.kind === 'group',\n        ownerIndex: i,\n        ownerLength: elements.length,\n        parentGroupId,\n      })\n      if (element.kind === 'group') {\n        visit(element.children, depth + 1, element.id)\n      }\n    }\n  }\n\n  visit(page.elements, 0, null)\n  return rows\n}\n\n/** The maximum number of rows the layers panel renders before truncating. */\nexport const LAYERS_PANEL_ROW_LIMIT = 500\n"],"mappings":"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","names":["useRef","useState","jsx","jsxs","useState","useRef"]}

package/dist/design-canvas-react/lazy.js

@@ -1,7 +1,7 @@
 import {
   DesignCanvasChromeLazy,
   DesignCanvasLazy
-} from "../chunk-OASVAPRL.js";
+} from "../chunk-AWPK7ZDS.js";
 export {
   DesignCanvasChromeLazy,
   DesignCanvasLazy

package/dist/sequences-react/index.js

@@ -52,7 +52,7 @@ import {
   trimClipCommand,
   trimEndDrag,
   trimStartDrag
-} from "../chunk-MLACJ6DB.js";
+} from "../chunk-7O4FZAFP.js";
 import "../chunk-BVKQKGRK.js";
 
 // src/sequences-react/media/transcription.ts
@@ -187,7 +187,7 @@ function createWhisperTranscriptionProvider(opts) {
 
 // src/sequences-react/lazy.tsx
 import React from "react";
-var SequenceTimelineEditorLazy = React.lazy(() => import("../TimelineEditor-6PV42FLG.js"));
+var SequenceTimelineEditorLazy = React.lazy(() => import("../TimelineEditor-IIBVCAZV.js"));
 export {
   BrandMark,
   COMMAND_HISTORY_LIMIT,

package/dist/theme/index.d.ts

@@ -6,6 +6,11 @@
  * paints to a bitmap and cannot resolve `var(--…)`.
  *
  * Values are shadcn-style HSL channel triples ("H S% L%"); wrap with `color()`.
+ *
+ * The neutral triples are the RESOLVED form of tokens.css's `--neutral-*` ramp
+ * (that file states them as `var(--neutral-NN-hsl)`; JS has no cascade to
+ * resolve through, so they are inlined here). `tests/theme/tokens-contract.test.ts`
+ * resolves the CSS one level and fails if this mirror has drifted.
  */
 interface AgentAppTheme {
     background: string;
@@ -31,8 +36,24 @@ interface AgentAppTheme {
     successForeground: string;
     warning: string;
     warningForeground: string;
+    /**
+     * Warning as TEXT on a warning-TINTED surface, as a channel triple. Optional
+     * so a consumer's existing `AgentAppTheme` literal still type-checks;
+     * {@link themeToCssVars} falls back to `warningForeground`, which is what the
+     * surface used before this token existed.
+     */
+    warningStrong?: string;
     /** Full CSS color (not a triple) — the canvas/scene backdrop. */
     canvasBackdrop: string;
+    /**
+     * Border tiers as FULL CSS colors (they are `color-mix()` results, not
+     * triples). Optional so a consumer's existing `AgentAppTheme` literal still
+     * type-checks; {@link themeToCssVars} falls back to full-strength
+     * `hsl(var(--border))`, which can never erase an edge.
+     */
+    borderSoft?: string;
+    /** @see borderSoft */
+    cardEdge?: string;
     /** Konva render palette — full hex colors the bitmap canvas paints with
      *  (it cannot resolve `var(--…)`). NOT emitted by themeToCssVars. */
     canvasRender: CanvasRenderPalette;
@@ -70,7 +91,12 @@ interface CanvasRenderPalette {
 declare const lightTheme: AgentAppTheme;
 /** Define a dark color scheme for the Agent app interface with specific background and foreground hues */
 declare const darkTheme: AgentAppTheme;
-/** Wrap a channel triple in `hsl()`; pass through values already in a color form. */
+/**
+ * Wrap a channel triple in `hsl()`; pass through values already in a color form.
+ * `oklch(…)` / `oklab(…)` / `color-mix(…)` are recognised because the ramp is
+ * authored in oklch and the border tiers are colour mixes — wrapping either in
+ * `hsl()` yields an invalid colour that paints as nothing.
+ */
 declare function themeColor(value: string): string;
 /**
  * Map a theme to the full CSS-variable set (shadcn triples + canvas/sequences

package/dist/theme/index.js

@@ -3,7 +3,7 @@ import {
   lightTheme,
   themeColor,
   themeToCssVars
-} from "../chunk-TZO3SOUL.js";
+} from "../chunk-LSQR6HM6.js";
 export {
   darkTheme,
   lightTheme,

package/dist/theme/tailwind-preset.d.ts

@@ -10,6 +10,9 @@
  * Pair with `import '@tangle-network/agent-app/styles'` for the variable values.
  * design-canvas/sequences need no preset — they consume vars via arbitrary
  * values (bg-[var(--bg-input)]), which Tailwind supports without color config.
+ *
+ * Beyond colour this preset also maps the border TIERS, the semantic radius
+ * steps, and the motion scale. See docs/design-tokens.md.
  */
 /** Define a preset configuration for dark mode and extended theme colors with foreground variants */
 declare const agentAppPreset: {
@@ -27,6 +30,7 @@ declare const agentAppPreset: {
                     foreground: string;
                 };
                 warning: {
+                    strong: string;
                     DEFAULT: string;
                     foreground: string;
                 };
@@ -62,6 +66,27 @@ declare const agentAppPreset: {
                 'surface-container-high': string;
                 'surface-container-highest': string;
             };
+            borderColor: {
+                border: string;
+                'card-edge': string;
+                strong: string;
+            };
+            borderRadius: {
+                control: string;
+                card: string;
+                surface: string;
+            };
+            transitionDuration: {
+                instant: string;
+                fast: string;
+                base: string;
+                slow: string;
+            };
+            transitionTimingFunction: {
+                standard: string;
+                entrance: string;
+                exit: string;
+            };
         };
     };
 };

package/dist/theme/tailwind-preset.js

@@ -3,6 +3,7 @@ var withForeground = (name) => ({
   DEFAULT: `hsl(var(--${name}))`,
   foreground: `hsl(var(--${name}-foreground))`
 });
+var tier = (token) => `color-mix(in oklch, var(${token}) calc(<alpha-value> * 100%), transparent)`;
 var agentAppPreset = {
   darkMode: ["class", '[data-theme="dark"]'],
   theme: {
@@ -14,7 +15,12 @@ var agentAppPreset = {
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         success: withForeground("success"),
-        warning: withForeground("warning"),
+        // `strong` sits alongside DEFAULT/foreground rather than replacing
+        // either: `--warning` is the dot/border/tint hue, `--warning-foreground`
+        // is what goes on a SOLID gold chip, and `text-warning-strong` is the
+        // only one of the three that stays legible as text on a warning TINT in
+        // both themes.
+        warning: { ...withForeground("warning"), strong: "hsl(var(--warning-strong))" },
         card: withForeground("card"),
         popover: withForeground("popover"),
         primary: withForeground("primary"),
@@ -28,6 +34,54 @@ var agentAppPreset = {
         "surface-container": "hsl(var(--card))",
         "surface-container-high": "hsl(var(--popover))",
         "surface-container-highest": "hsl(var(--secondary))"
+      },
+      // Border tiers. `borderColor` is a separate scale from `colors`, so
+      // pointing `border-border` at the soft tier here leaves `bg-border` /
+      // `text-border` (and the `--border` triple itself) at full strength.
+      //
+      // This is the one place a single edit reaches every `border-border` in
+      // the fleet — 151 in this package alone — which is the only reason the
+      // tiers are worth having. Editing 151 call sites to say `border-soft`
+      // would be the same change spelled 151 times, and the next component
+      // written would still say `border-border`.
+      //
+      // `border-input` is untouched on purpose: a form field's edge is a
+      // control affordance, not a divider.
+      //
+      // Opting out is one line in the consumer's own config
+      // (`borderColor: { border: 'hsl(var(--border))' }`) or one line in its
+      // CSS (`--border-soft: hsl(var(--border))`), and the second also restores
+      // the pre-tier look for any consumer-owned `--color-border` mapping,
+      // which a Tailwind v4 app defines in its own `@theme` and this preset
+      // cannot reach.
+      borderColor: {
+        border: tier("--border-soft"),
+        "card-edge": tier("--card-edge"),
+        strong: "hsl(var(--border))"
+      },
+      // Semantic radius. Deliberately NOT a remap of Tailwind's `rounded-md` /
+      // `rounded-lg`: those names collide with the token ladder's names at
+      // DIFFERENT values (`--radius-md` is 8px, `rounded-md` is 6px), so
+      // remapping would silently resize 302 existing `rounded-*` usages across
+      // four products. New names, opt-in, no resize.
+      borderRadius: {
+        control: "var(--radius-sm)",
+        card: "var(--radius-lg)",
+        surface: "var(--radius-2xl)"
+      },
+      // Motion. Additive names alongside Tailwind's numeric durations and
+      // in/out/in-out curves, so `duration-fast` and `ease-entrance` compile
+      // without displacing `duration-150` or `ease-out`.
+      transitionDuration: {
+        instant: "var(--duration-instant)",
+        fast: "var(--duration-fast)",
+        base: "var(--duration-base)",
+        slow: "var(--duration-slow)"
+      },
+      transitionTimingFunction: {
+        standard: "var(--ease-standard)",
+        entrance: "var(--ease-entrance)",
+        exit: "var(--ease-exit)"
       }
     }
   }

package/dist/theme/tailwind-preset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind preset mapping the shadcn semantic color names used by web-react\n * (bg-card, text-muted-foreground, border-border, …) onto the CSS variables in\n * tokens.css — so a consuming app themes every agent-app surface from one source.\n *\n *   // tailwind.config.{js,ts}\n *   import agentAppPreset from '@tangle-network/agent-app/tailwind-preset'\n *   export default { presets: [agentAppPreset], content: [...] }\n *\n * Pair with `import '@tangle-network/agent-app/styles'` for the variable values.\n * design-canvas/sequences need no preset — they consume vars via arbitrary\n * values (bg-[var(--bg-input)]), which Tailwind supports without color config.\n */\n\nconst withForeground = (name: string) => ({\n  DEFAULT: `hsl(var(--${name}))`,\n  foreground: `hsl(var(--${name}-foreground))`,\n})\n\n/** Define a preset configuration for dark mode and extended theme colors with foreground variants */\nconst agentAppPreset = {\n  darkMode: ['class', '[data-theme=\"dark\"]'] as [string, string],\n  theme: {\n    extend: {\n      colors: {\n        background: 'hsl(var(--background))',\n        foreground: 'hsl(var(--foreground))',\n        border: 'hsl(var(--border))',\n        input: 'hsl(var(--input))',\n        ring: 'hsl(var(--ring))',\n        success: withForeground('success'),\n        warning: withForeground('warning'),\n        card: withForeground('card'),\n        popover: withForeground('popover'),\n        primary: withForeground('primary'),\n        secondary: withForeground('secondary'),\n        muted: withForeground('muted'),\n        accent: withForeground('accent'),\n        destructive: withForeground('destructive'),\n        // MD3 surface ladder — wires sandbox-ui's `bg-surface-container*`\n        // utilities (used by AgentComposer + its pickers) onto the shadcn\n        // elevation triples, so those components render on-palette here.\n        'surface-container': 'hsl(var(--card))',\n        'surface-container-high': 'hsl(var(--popover))',\n        'surface-container-highest': 'hsl(var(--secondary))',\n      },\n    },\n  },\n}\n\nexport default agentAppPreset\n"],"mappings":";AAcA,IAAM,iBAAiB,CAAC,UAAkB;AAAA,EACxC,SAAS,aAAa,IAAI;AAAA,EAC1B,YAAY,aAAa,IAAI;AAC/B;AAGA,IAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC,SAAS,qBAAqB;AAAA,EACzC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS,eAAe,SAAS;AAAA,QACjC,SAAS,eAAe,SAAS;AAAA,QACjC,MAAM,eAAe,MAAM;AAAA,QAC3B,SAAS,eAAe,SAAS;AAAA,QACjC,SAAS,eAAe,SAAS;AAAA,QACjC,WAAW,eAAe,WAAW;AAAA,QACrC,OAAO,eAAe,OAAO;AAAA,QAC7B,QAAQ,eAAe,QAAQ;AAAA,QAC/B,aAAa,eAAe,aAAa;AAAA;AAAA;AAAA;AAAA,QAIzC,qBAAqB;AAAA,QACrB,0BAA0B;AAAA,QAC1B,6BAA6B;AAAA,MAC/B;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,0BAAQ;","names":[]}
+{"version":3,"sources":["../../src/theme/tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind preset mapping the shadcn semantic color names used by web-react\n * (bg-card, text-muted-foreground, border-border, …) onto the CSS variables in\n * tokens.css — so a consuming app themes every agent-app surface from one source.\n *\n *   // tailwind.config.{js,ts}\n *   import agentAppPreset from '@tangle-network/agent-app/tailwind-preset'\n *   export default { presets: [agentAppPreset], content: [...] }\n *\n * Pair with `import '@tangle-network/agent-app/styles'` for the variable values.\n * design-canvas/sequences need no preset — they consume vars via arbitrary\n * values (bg-[var(--bg-input)]), which Tailwind supports without color config.\n *\n * Beyond colour this preset also maps the border TIERS, the semantic radius\n * steps, and the motion scale. See docs/design-tokens.md.\n */\n\nconst withForeground = (name: string) => ({\n  DEFAULT: `hsl(var(--${name}))`,\n  foreground: `hsl(var(--${name}-foreground))`,\n})\n\n/**\n * A border tier as a Tailwind colour that still honours the `/40` opacity\n * modifier.\n *\n * The tier tokens are `color-mix()` results, not channel triples, and Tailwind\n * cannot inject an alpha into a value it cannot parse — pointing `border-border`\n * straight at `var(--border-soft)` makes Tailwind DROP `border-border/50`\n * entirely rather than emit it without the modifier, which is silent: the\n * element falls back to `currentColor` and nothing errors. This package has 18\n * such usages. Wrapping the token in a `color-mix` that consumes\n * `<alpha-value>` keeps the token as the source AND composes with the modifier:\n * bare → 100% of the tier, `/50` → half of it.\n */\nconst tier = (token: string) => `color-mix(in oklch, var(${token}) calc(<alpha-value> * 100%), transparent)`\n\n/** Define a preset configuration for dark mode and extended theme colors with foreground variants */\nconst agentAppPreset = {\n  darkMode: ['class', '[data-theme=\"dark\"]'] as [string, string],\n  theme: {\n    extend: {\n      colors: {\n        background: 'hsl(var(--background))',\n        foreground: 'hsl(var(--foreground))',\n        border: 'hsl(var(--border))',\n        input: 'hsl(var(--input))',\n        ring: 'hsl(var(--ring))',\n        success: withForeground('success'),\n        // `strong` sits alongside DEFAULT/foreground rather than replacing\n        // either: `--warning` is the dot/border/tint hue, `--warning-foreground`\n        // is what goes on a SOLID gold chip, and `text-warning-strong` is the\n        // only one of the three that stays legible as text on a warning TINT in\n        // both themes.\n        warning: { ...withForeground('warning'), strong: 'hsl(var(--warning-strong))' },\n        card: withForeground('card'),\n        popover: withForeground('popover'),\n        primary: withForeground('primary'),\n        secondary: withForeground('secondary'),\n        muted: withForeground('muted'),\n        accent: withForeground('accent'),\n        destructive: withForeground('destructive'),\n        // MD3 surface ladder — wires sandbox-ui's `bg-surface-container*`\n        // utilities (used by AgentComposer + its pickers) onto the shadcn\n        // elevation triples, so those components render on-palette here.\n        'surface-container': 'hsl(var(--card))',\n        'surface-container-high': 'hsl(var(--popover))',\n        'surface-container-highest': 'hsl(var(--secondary))',\n      },\n      // Border tiers. `borderColor` is a separate scale from `colors`, so\n      // pointing `border-border` at the soft tier here leaves `bg-border` /\n      // `text-border` (and the `--border` triple itself) at full strength.\n      //\n      // This is the one place a single edit reaches every `border-border` in\n      // the fleet — 151 in this package alone — which is the only reason the\n      // tiers are worth having. Editing 151 call sites to say `border-soft`\n      // would be the same change spelled 151 times, and the next component\n      // written would still say `border-border`.\n      //\n      // `border-input` is untouched on purpose: a form field's edge is a\n      // control affordance, not a divider.\n      //\n      // Opting out is one line in the consumer's own config\n      // (`borderColor: { border: 'hsl(var(--border))' }`) or one line in its\n      // CSS (`--border-soft: hsl(var(--border))`), and the second also restores\n      // the pre-tier look for any consumer-owned `--color-border` mapping,\n      // which a Tailwind v4 app defines in its own `@theme` and this preset\n      // cannot reach.\n      borderColor: {\n        border: tier('--border-soft'),\n        'card-edge': tier('--card-edge'),\n        strong: 'hsl(var(--border))',\n      },\n      // Semantic radius. Deliberately NOT a remap of Tailwind's `rounded-md` /\n      // `rounded-lg`: those names collide with the token ladder's names at\n      // DIFFERENT values (`--radius-md` is 8px, `rounded-md` is 6px), so\n      // remapping would silently resize 302 existing `rounded-*` usages across\n      // four products. New names, opt-in, no resize.\n      borderRadius: {\n        control: 'var(--radius-sm)',\n        card: 'var(--radius-lg)',\n        surface: 'var(--radius-2xl)',\n      },\n      // Motion. Additive names alongside Tailwind's numeric durations and\n      // in/out/in-out curves, so `duration-fast` and `ease-entrance` compile\n      // without displacing `duration-150` or `ease-out`.\n      transitionDuration: {\n        instant: 'var(--duration-instant)',\n        fast: 'var(--duration-fast)',\n        base: 'var(--duration-base)',\n        slow: 'var(--duration-slow)',\n      },\n      transitionTimingFunction: {\n        standard: 'var(--ease-standard)',\n        entrance: 'var(--ease-entrance)',\n        exit: 'var(--ease-exit)',\n      },\n    },\n  },\n}\n\nexport default agentAppPreset\n"],"mappings":";AAiBA,IAAM,iBAAiB,CAAC,UAAkB;AAAA,EACxC,SAAS,aAAa,IAAI;AAAA,EAC1B,YAAY,aAAa,IAAI;AAC/B;AAeA,IAAM,OAAO,CAAC,UAAkB,2BAA2B,KAAK;AAGhE,IAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC,SAAS,qBAAqB;AAAA,EACzC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS,eAAe,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMjC,SAAS,EAAE,GAAG,eAAe,SAAS,GAAG,QAAQ,6BAA6B;AAAA,QAC9E,MAAM,eAAe,MAAM;AAAA,QAC3B,SAAS,eAAe,SAAS;AAAA,QACjC,SAAS,eAAe,SAAS;AAAA,QACjC,WAAW,eAAe,WAAW;AAAA,QACrC,OAAO,eAAe,OAAO;AAAA,QAC7B,QAAQ,eAAe,QAAQ;AAAA,QAC/B,aAAa,eAAe,aAAa;AAAA;AAAA;AAAA;AAAA,QAIzC,qBAAqB;AAAA,QACrB,0BAA0B;AAAA,QAC1B,6BAA6B;AAAA,MAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAoBA,aAAa;AAAA,QACX,QAAQ,KAAK,eAAe;AAAA,QAC5B,aAAa,KAAK,aAAa;AAAA,QAC/B,QAAQ;AAAA,MACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,cAAc;AAAA,QACZ,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA;AAAA;AAAA;AAAA,MAIA,oBAAoB;AAAA,QAClB,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,0BAA0B;AAAA,QACxB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,0BAAQ;","names":[]}