@tangle-network/agent-app 0.45.28 → 0.45.29

package/dist/design-canvas-react/engine.d.ts

@@ -267,6 +267,20 @@ declare function resolveExportParams(page: ScenePage, opts: {
     includeBleed?: boolean;
     preset?: ExportPreset;
 }): ResolvedExportParams;
+/** Hard ceiling for node cache rasterization. Without it a deep zoom (max 32)
+ *  on a retina display would rasterize page-size elements into canvases beyond
+ *  browser backing-store limits; 4x supersampling covers every realistic
+ *  crispness-critical range (fit-page → 200% at dpr 2). */
+declare const NODE_CACHE_PIXEL_RATIO_MAX = 4;
+/**
+ * Pixel ratio a Konva node bitmap cache should rasterize at so the cached
+ * bitmap matches the screen exactly: the node's absolute scale (content-group
+ * zoom) × device pixel ratio. Konva's cache default ignores zoom, so the
+ * bitmap is re-scaled at draw time — bilinear-soft at fit-page zooms like
+ * 0.47, badly upscaled on zoom-in. ElementNode caches at this ratio and
+ * export.ts restores cleared caches at it, keeping one policy in one place.
+ */
+declare function resolveNodeCachePixelRatio(absoluteScale: number, devicePixelRatio: number): number;
 /**
  * Walk image nodes to find the src of any that may have caused a SecurityError
  * when the stage called toDataURL. Returns the first offending src found, or
@@ -383,4 +397,4 @@ interface InsertTemplate {
  *  default so every canvas gets a usable set out of the box. */
 declare const DEFAULT_INSERT_TEMPLATES: readonly InsertTemplate[];
 
-export { type AddElementInput, type AddPageInput, type BindSlotInput, DEFAULT_INSERT_TEMPLATES, DUPLICATE_OFFSET, type DeleteElementInput, type DeletePageInput, type DuplicatePageInput, ExportCropRect, ExportPreset, type ExportViewSnapshot, type GroupElementsInput, type InsertPageGeometry, type InsertTemplate, MAX_INSERT_DIMENSION, type MarqueeSelectOptions, type MultiSetAttrsEntry, type NudgeDelta, type ReorderElementInput, type ReorderPageInput, type ResolvedExportParams, SceneCommand, type SetAttrsInput, type SetDocumentTitleInput, type SetPageGuidesInput, type SetPagePropsInput, SnapEngine, SnapTarget, type UngroupElementInput, type ZoomPanConfig, ZoomPanMath, addElementCommand, addPageCommand, bindSlotCommand, buildInsertImageOp, centeredPosition, collectGridTargets, createSnapEngine, createZoomPanMath, deleteElementCommand, deletePageCommand, documentCropToStageCoords, duplicatePageCommand, fittedSize, groupElementsCommand, hitTestPoint, identifyTaintedSrc, isCrossOriginSrc, isExportHiddenNodeName, marqueeSelect, mintElementId, multiSetAttrsCommand, nudgeDelta, reorderElementCommand, reorderPageCommand, resolveExportParams, setAttrsCommand, setDocumentTitleCommand, setPageGuidesCommand, setPagePropsCommand, ungroupElementCommand };
+export { type AddElementInput, type AddPageInput, type BindSlotInput, DEFAULT_INSERT_TEMPLATES, DUPLICATE_OFFSET, type DeleteElementInput, type DeletePageInput, type DuplicatePageInput, ExportCropRect, ExportPreset, type ExportViewSnapshot, type GroupElementsInput, type InsertPageGeometry, type InsertTemplate, MAX_INSERT_DIMENSION, type MarqueeSelectOptions, type MultiSetAttrsEntry, NODE_CACHE_PIXEL_RATIO_MAX, type NudgeDelta, type ReorderElementInput, type ReorderPageInput, type ResolvedExportParams, SceneCommand, type SetAttrsInput, type SetDocumentTitleInput, type SetPageGuidesInput, type SetPagePropsInput, SnapEngine, SnapTarget, type UngroupElementInput, type ZoomPanConfig, ZoomPanMath, addElementCommand, addPageCommand, bindSlotCommand, buildInsertImageOp, centeredPosition, collectGridTargets, createSnapEngine, createZoomPanMath, deleteElementCommand, deletePageCommand, documentCropToStageCoords, duplicatePageCommand, fittedSize, groupElementsCommand, hitTestPoint, identifyTaintedSrc, isCrossOriginSrc, isExportHiddenNodeName, marqueeSelect, mintElementId, multiSetAttrsCommand, nudgeDelta, reorderElementCommand, reorderPageCommand, resolveExportParams, resolveNodeCachePixelRatio, setAttrsCommand, setDocumentTitleCommand, setPageGuidesCommand, setPagePropsCommand, ungroupElementCommand };

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

@@ -3,6 +3,7 @@ import {
   DEFAULT_INSERT_TEMPLATES,
   DUPLICATE_OFFSET,
   MAX_INSERT_DIMENSION,
+  NODE_CACHE_PIXEL_RATIO_MAX,
   buildInsertImageOp,
   centeredPosition,
   collectGridTargets,
@@ -17,8 +18,9 @@ import {
   marqueeSelect,
   mintElementId,
   nudgeDelta,
-  resolveExportParams
-} from "../chunk-4QVG4WJQ.js";
+  resolveExportParams,
+  resolveNodeCachePixelRatio
+} from "../chunk-OYTMILRK.js";
 import {
   SCENE_COMMAND_HISTORY_LIMIT,
   addElementCommand,
@@ -47,6 +49,7 @@ export {
   DEFAULT_INSERT_TEMPLATES,
   DUPLICATE_OFFSET,
   MAX_INSERT_DIMENSION,
+  NODE_CACHE_PIXEL_RATIO_MAX,
   SCENE_COMMAND_HISTORY_LIMIT,
   addElementCommand,
   addPageCommand,
@@ -75,6 +78,7 @@ export {
   reorderElementCommand,
   reorderPageCommand,
   resolveExportParams,
+  resolveNodeCachePixelRatio,
   scaleForPreset,
   setAttrsCommand,
   setDocumentTitleCommand,

package/dist/design-canvas-react/index.d.ts

@@ -1,7 +1,7 @@
 import { D as DesignCanvasProps, c as createSceneCommandStack, E as ExportTriggerOptions, a as DesignCanvasMode } from '../command-stack-TNPWJCzW.js';
 export { A as ApplySceneResult, b as EditorSceneState, S as SCENE_COMMAND_HISTORY_LIMIT, d as SceneCommand, e as SceneCommandStack, f as SceneCommandStackWithReapply, g as SnapEngine, h as SnapResult, i as SnapTarget, j as SnapTargetKind, k as SnapTargets, Z as ZoomPanMath } from '../command-stack-TNPWJCzW.js';
 import { InsertPageGeometry, InsertTemplate, MultiSetAttrsEntry } from './engine.js';
-export { AddElementInput, AddPageInput, BindSlotInput, DEFAULT_INSERT_TEMPLATES, DUPLICATE_OFFSET, DeleteElementInput, DeletePageInput, DuplicatePageInput, ExportViewSnapshot, GroupElementsInput, MAX_INSERT_DIMENSION, MarqueeSelectOptions, NudgeDelta, ReorderElementInput, ReorderPageInput, ResolvedExportParams, SetAttrsInput, SetDocumentTitleInput, SetPageGuidesInput, SetPagePropsInput, UngroupElementInput, ZoomPanConfig, addElementCommand, addPageCommand, bindSlotCommand, buildInsertImageOp, centeredPosition, collectGridTargets, createSnapEngine, createZoomPanMath, deleteElementCommand, deletePageCommand, documentCropToStageCoords, duplicatePageCommand, fittedSize, groupElementsCommand, hitTestPoint, identifyTaintedSrc, isCrossOriginSrc, isExportHiddenNodeName, marqueeSelect, mintElementId, multiSetAttrsCommand, nudgeDelta, reorderElementCommand, reorderPageCommand, resolveExportParams, setAttrsCommand, setDocumentTitleCommand, setPageGuidesCommand, setPagePropsCommand, ungroupElementCommand } from './engine.js';
+export { AddElementInput, AddPageInput, BindSlotInput, DEFAULT_INSERT_TEMPLATES, DUPLICATE_OFFSET, DeleteElementInput, DeletePageInput, DuplicatePageInput, ExportViewSnapshot, GroupElementsInput, MAX_INSERT_DIMENSION, MarqueeSelectOptions, NODE_CACHE_PIXEL_RATIO_MAX, NudgeDelta, ReorderElementInput, ReorderPageInput, ResolvedExportParams, SetAttrsInput, SetDocumentTitleInput, SetPageGuidesInput, SetPagePropsInput, UngroupElementInput, ZoomPanConfig, addElementCommand, addPageCommand, bindSlotCommand, buildInsertImageOp, centeredPosition, collectGridTargets, createSnapEngine, createZoomPanMath, deleteElementCommand, deletePageCommand, documentCropToStageCoords, duplicatePageCommand, fittedSize, groupElementsCommand, hitTestPoint, identifyTaintedSrc, isCrossOriginSrc, isExportHiddenNodeName, marqueeSelect, mintElementId, multiSetAttrsCommand, nudgeDelta, reorderElementCommand, reorderPageCommand, resolveExportParams, resolveNodeCachePixelRatio, setAttrsCommand, setDocumentTitleCommand, setPageGuidesCommand, setPagePropsCommand, ungroupElementCommand } from './engine.js';
 import { c as SceneDocument, S as ScenePage, a as SceneElement, P as PageBleed, b as PageGuides } from '../model-DnfO_PdJ.js';
 import { f as ExportPreset } from '../export-presets-mgVulRaV.js';
 export { d as ExportCropRect, h as bleedAwareExportBounds, s as scaleForPreset } from '../export-presets-mgVulRaV.js';
@@ -31,6 +31,18 @@ interface KonvaNodeLike {
     visible(): boolean;
     visible(v: boolean): void;
     getAttr(key: string): unknown;
+    isCached(): boolean;
+    clearCache(): void;
+    cache(config?: {
+        pixelRatio?: number;
+    }): void;
+    getAbsoluteScale(): {
+        x: number;
+        y: number;
+    };
+    /** Konva.Container only — leaf shapes lack it; the cache walk treats its
+     *  absence as "no children". */
+    getChildren?(): KonvaNodeLike[];
 }
 interface KonvaLayerLike {
     getChildren(): KonvaNodeLike[];

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

@@ -12,7 +12,7 @@ import {
   downloadDataUrl,
   exportDocumentJson,
   exportPageDataUrl
-} from "../chunk-OYGM5WLD.js";
+} from "../chunk-PURHUAOR.js";
 import {
   BTN,
   BTN_ACTIVE,
@@ -41,13 +41,14 @@ import {
   buildRulerTicks,
   formatRulerLabel,
   selectTickStep
-} from "../chunk-NC2V63EL.js";
+} from "../chunk-FNM7JYME.js";
 import "../chunk-LSQR6HM6.js";
 import "../chunk-ZN5J47UX.js";
 import {
   DEFAULT_INSERT_TEMPLATES,
   DUPLICATE_OFFSET,
   MAX_INSERT_DIMENSION,
+  NODE_CACHE_PIXEL_RATIO_MAX,
   buildInsertImageOp,
   centeredPosition,
   collectGridTargets,
@@ -62,8 +63,9 @@ import {
   marqueeSelect,
   mintElementId,
   nudgeDelta,
-  resolveExportParams
-} from "../chunk-4QVG4WJQ.js";
+  resolveExportParams,
+  resolveNodeCachePixelRatio
+} from "../chunk-OYTMILRK.js";
 import {
   SCENE_COMMAND_HISTORY_LIMIT,
   addElementCommand,
@@ -91,7 +93,7 @@ import {
 import {
   DesignCanvasChromeLazy,
   DesignCanvasLazy
-} from "../chunk-AWPK7ZDS.js";
+} from "../chunk-QGOU3VXH.js";
 import "../chunk-F7VH4G5C.js";
 
 // src/design-canvas-react/components/CanvasInsertPanel.tsx
@@ -283,7 +285,7 @@ function CanvasInsertPanel({
               setDragOver(false);
               if (e.dataTransfer?.files?.length) void handleFiles(e.dataTransfer.files);
             },
-            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 ${dragOver ? "border-[var(--brand-primary)] bg-[var(--brand-primary)]/5" : "border-[var(--border-default)] hover:border-[var(--brand-primary)]/40"}`,
+            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 ${dragOver ? "border-[var(--brand-primary)] bg-[color-mix(in_srgb,var(--brand-primary)_5%,transparent)]" : "border-[var(--border-default)] hover:border-[color-mix(in_srgb,var(--brand-primary)_40%,transparent)]"}`,
             children: [
               busy ? /* @__PURE__ */ jsx(SpinnerGlyph, { className: "h-6 w-6 text-[var(--brand-primary)]" }) : /* @__PURE__ */ jsx(UploadGlyph, { className: "h-6 w-6 text-[var(--text-muted)]" }),
               /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: busy ? "Uploading\u2026" : "Drop an image or click to upload" }),
@@ -312,7 +314,7 @@ function CanvasInsertPanel({
           type: "button",
           disabled: busy,
           onClick: () => void runInsert(() => tpl.build(page)),
-          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",
+          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-[color-mix(in_srgb,var(--brand-primary)_40%,transparent)] disabled:opacity-50",
           children: [
             /* @__PURE__ */ jsx("span", { className: "flex h-7 items-center justify-center", children: /* @__PURE__ */ jsx(TemplatePreview, { shape: templateShape(tpl) }) }),
             /* @__PURE__ */ jsx("span", { children: tpl.label })
@@ -409,6 +411,7 @@ function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder
   return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col overflow-hidden text-[var(--text-primary)]", children: [
     /* @__PURE__ */ jsx2("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)]", children: "Layers" }),
     /* @__PURE__ */ jsxs2("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+      visible.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "px-3 py-2 text-[11px] text-[var(--text-muted)]", children: "No layers yet" }) : null,
       visible.map((row) => {
         const { element } = row;
         const isSelected = selectedElementIds.includes(element.id);
@@ -446,7 +449,7 @@ function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder
             },
             className: [
               "group flex items-center gap-1.5 py-1 pr-2 text-[13px] transition-colors",
-              isSelected ? "bg-[var(--brand-primary)]/15 text-[var(--text-primary)]" : "hover:bg-[var(--border-default)]/40 text-[var(--text-secondary)]",
+              isSelected ? "bg-[color-mix(in_srgb,var(--brand-primary)_15%,transparent)] text-[var(--text-primary)]" : "hover:bg-[color-mix(in_srgb,var(--border-default)_40%,transparent)] text-[var(--text-secondary)]",
               dragOverIndex === row.ownerIndex ? "border-t border-[var(--brand-primary)]" : ""
             ].join(" "),
             style: { paddingLeft: 8 + row.depth * INDENT_PX },
@@ -556,6 +559,7 @@ export {
   LAYERS_PANEL_ROW_LIMIT,
   LayersPanel,
   MAX_INSERT_DIMENSION,
+  NODE_CACHE_PIXEL_RATIO_MAX,
   PagesStrip,
   Rulers,
   SCENE_COMMAND_HISTORY_LIMIT,
@@ -600,6 +604,7 @@ export {
   reorderElementCommand,
   reorderPageCommand,
   resolveExportParams,
+  resolveNodeCachePixelRatio,
   scaleForPreset,
   selectTickStep,
   setAttrsCommand,

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            // 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"]}
+{"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-[color-mix(in_srgb,var(--brand-primary)_5%,transparent)]'\n                    : 'border-[var(--border-default)] hover:border-[color-mix(in_srgb,var(--brand-primary)_40%,transparent)]'\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-[color-mix(in_srgb,var(--brand-primary)_40%,transparent)] 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.length === 0 ? (\n          <div className=\"px-3 py-2 text-[11px] text-[var(--text-muted)]\">No layers yet</div>\n        ) : null}\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-[color-mix(in_srgb,var(--brand-primary)_15%,transparent)] text-[var(--text-primary)]' : 'hover:bg-[color-mix(in_srgb,var(--border-default)_40%,transparent)] 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAS,WAAW,QAAQ,gBAAmC;AAsEzD,cAqLI,YArLJ;AA9BN,IAAM,iBAAiB;AAMvB,IAAM,mBAAmB;AAEzB,SAAS,eAAe,KAAyD;AAC/E,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,OAAO,UAAU,YAAa,QAAO,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AACxE,QAAI,UAAU;AACd,UAAM,SAAS,CAAC,SAA4C;AAC1D,UAAI,QAAS;AACb,gBAAU;AACV,cAAQ,IAAI;AAAA,IACd;AACA,UAAM,MAAM,IAAI,MAAM;AACtB,QAAI,SAAS,MAAM,OAAO,EAAE,OAAO,IAAI,cAAc,QAAQ,IAAI,cAAc,CAAC;AAChF,QAAI,UAAU,MAAM,OAAO,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAGlD,eAAW,MAAM,OAAO,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC,GAAG,gBAAgB;AAClE,QAAI,MAAM;AAAA,EACZ,CAAC;AACH;AAEA,SAAS,YAAY,EAAE,UAAU,GAA2B;AAC1D,SACE,oBAAC,SAAI,WAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACvJ,8BAAC,UAAK,GAAE,iEAAgE,GAC1E;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,GAA2B;AAC3D,SACE,oBAAC,SAAI,WAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACvJ,8BAAC,UAAK,GAAE,iGAAgG,GAC1G;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,GAA2B;AAC3D,SACE,oBAAC,SAAI,WAAW,GAAG,aAAa,EAAE,iBAAiB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAW,MAClI,8BAAC,UAAK,GAAE,4BAA2B,eAAc,SAAQ,GAC3D;AAEJ;AAIA,IAAM,qBAAyC,EAAE,QAAQ,WAAW,OAAO,KAAM,QAAQ,IAAK;AAS9F,IAAM,oBAAoB;AAE1B,SAAS,cAAc,KAAoC;AACzD,MAAI;AACF,UAAM,MAAM,IAAI,MAAM,kBAAkB;AACxC,UAAM,QAAQ,IAAI,KAAK,CAAC,OAAO,GAAG,SAAS,aAAa;AACxD,QAAI,CAAC,SAAS,MAAM,SAAS,cAAe,QAAO;AACnD,UAAM,KAAK,MAAM;AACjB,QAAI,GAAG,SAAS,OAAQ,QAAO;AAC/B,QAAI,GAAG,SAAS,UAAW,QAAO;AAClC,QAAI,GAAG,SAAS,QAAQ;AACtB,YAAM,YAAY,GAAG,UAAU,SAAS,MAAM,KAAK,GAAG,YAAY;AAClE,aAAO,YAAY,YAAY;AAAA,IACjC;AACA,WAAO;AAAA,EACT,QAAQ;AAEN,WAAO;AAAA,EACT;AACF;AAIA,SAAS,gBAAgB,EAAE,MAAM,GAA6B;AAC5D,MAAI,UAAU,QAAQ;AACpB,WAAO,oBAAC,UAAK,WAAU,sDAAqD,eAAW,MAAC;AAAA,EAC1F;AACA,MAAI,UAAU,WAAW;AACvB,WAAO,oBAAC,UAAK,WAAU,wDAAuD,eAAW,MAAC;AAAA,EAC5F;AAGA,MAAI,UAAU,aAAa,UAAU,QAAQ;AAC3C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,iDACT,UAAU,YAAY,uBAAuB,SAC/C;AAAA,QACA,eAAW;AAAA,QAEV,oBAAU,YAAY,MAAM;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACA,SAAO,oBAAC,eAAY,WAAU,oCAAmC;AACnE;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AACF,GAA2B;AACzB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAc,MAAO,UAAU,SAAS,IAAI,cAAc,SAAU;AAC1F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B,CAAC,CAAC;AACrE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,eAAe,OAAgC,IAAI;AAEzD,YAAU,MAAM;AACd,QAAI,QAAQ,aAAa,CAAC,eAAe;AACvC,aAAO,UAAU,SAAS,IAAI,cAAc,kBAAkB,gBAAgB,SAAS;AAAA,IACzF;AACA,QAAI,QAAQ,eAAe,UAAU,WAAW,GAAG;AACjD,aAAO,gBAAgB,YAAY,kBAAkB,gBAAgB,SAAS;AAAA,IAChF;AACA,QAAI,QAAQ,iBAAiB,CAAC,iBAAiB;AAC7C,aAAO,UAAU,SAAS,IAAI,cAAc,gBAAgB,YAAY,WAAW;AAAA,IACrF;AAAA,EACF,GAAG,CAAC,KAAK,UAAU,QAAQ,eAAe,eAAe,CAAC;AAE1D,YAAU,MAAM;AACd,QAAI,QAAQ,iBAAiB,qBAAqB,CAAC,gBAAiB;AACpE,QAAI,YAAY;AAChB,UAAM,YAAY;AAChB,UAAI;AACF,cAAM,OAAO,MAAM,gBAAgB;AACnC,YAAI,CAAC,UAAW,gBAAe,KAAK,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;AAAA,MAC1D,SAAS,KAAK;AACZ,YAAI,CAAC,UAAW,UAAS,eAAe,QAAQ,IAAI,UAAU,4BAA4B;AAAA,MAC5F,UAAE;AACA,YAAI,CAAC,UAAW,sBAAqB,IAAI;AAAA,MAC3C;AAAA,IACF,GAAG;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,KAAK,mBAAmB,eAAe,CAAC;AAE5C,iBAAe,mBAAmB,KAAa;AAG7C,wBAAoB,KAAK,WAAW;AACpC,UAAM,UAAU,MAAM,eAAe,GAAG;AACxC,UAAM,SAAS,CAAC,mBAAmB,KAAK,SAAS,IAAI,CAAC,CAAC;AAAA,EACzD;AAEA,iBAAe,YAAY,OAA0B;AACnD,QAAI,CAAC,YAAY,KAAM;AACvB,QAAI,CAAC,cAAe;AACpB,UAAM,OAAO,MAAM,KAAK,KAAK,EAAE,OAAO,CAAC,MAAM,EAAE,KAAK,WAAW,QAAQ,CAAC;AACxE,QAAI,KAAK,WAAW,GAAG;AACrB,eAAS,6CAA6C;AACtD;AAAA,IACF;AACA,YAAQ,IAAI;AACZ,aAAS,EAAE;AACX,QAAI;AACF,iBAAW,QAAQ,MAAM;AACvB,cAAM,MAAM,MAAM,cAAc,IAAI;AACpC,cAAM,mBAAmB,GAAG;AAAA,MAC9B;AAAA,IACF,SAAS,KAAK;AACZ,eAAS,eAAe,QAAQ,IAAI,UAAU,eAAe;AAAA,IAC/D,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,iBAAe,UAAU,OAA2D;AAClF,QAAI,CAAC,YAAY,KAAM;AACvB,YAAQ,IAAI;AACZ,aAAS,EAAE;AACX,QAAI;AACF,YAAM,SAAS,MAAM,MAAM,CAAC;AAAA,IAC9B,SAAS,KAAK;AACZ,eAAS,eAAe,QAAQ,IAAI,UAAU,eAAe;AAAA,IAC/D,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,QAAM,OAA4G;AAAA,IAChH,EAAE,IAAI,WAAW,OAAO,WAAW,MAAM,YAAY,MAAM,CAAC,CAAC,cAAc;AAAA,IAC3E,EAAE,IAAI,aAAa,OAAO,aAAa,MAAM,aAAa,MAAM,UAAU,SAAS,EAAE;AAAA,IACrF,EAAE,IAAI,eAAe,OAAO,eAAe,MAAM,cAAc,MAAM,CAAC,CAAC,gBAAgB;AAAA,EACzF;AACA,QAAM,cAAc,KAAK,OAAO,CAAC,MAAM,EAAE,IAAI;AAE7C,SACE,qBAAC,SAAI,WAAW,gFAAgF,aAAa,EAAE,IAC7G;AAAA,wBAAC,SAAI,WAAU,yDACZ,sBAAY,IAAI,CAAC,EAAE,IAAI,OAAO,MAAM,KAAK,MACxC;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAAS,MAAM,OAAO,EAAE;AAAA,QAMxB,WAAW,yIACT,QAAQ,KACJ,wEACA,2DACN;AAAA,QAEA;AAAA,8BAAC,QAAK,WAAU,eAAc;AAAA,UAC7B;AAAA;AAAA;AAAA,MAfI;AAAA,IAgBP,CACD,GACH;AAAA,IAEC,CAAC,WACA,oBAAC,SAAI,WAAU,4FAA2F,uDAE1G,IAEA,qBAAC,SAAI,WAAU,sCACZ;AAAA,cAAQ,aACP,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,UAAU;AAAA,YACV,SAAS,MAAM,aAAa,SAAS,MAAM;AAAA,YAC3C,YAAY,CAAC,MAAM;AACjB,gBAAE,eAAe;AACjB,0BAAY,IAAI;AAAA,YAClB;AAAA,YACA,aAAa,MAAM,YAAY,KAAK;AAAA,YACpC,QAAQ,CAAC,MAAM;AACb,gBAAE,eAAe;AACjB,0BAAY,KAAK;AACjB,kBAAI,EAAE,cAAc,OAAO,OAAQ,MAAK,YAAY,EAAE,aAAa,KAAK;AAAA,YAC1E;AAAA,YACA,WAAW,iJACT,WACI,8FACA,uGACN;AAAA,YAEC;AAAA,qBACC,oBAAC,gBAAa,WAAU,uCAAsC,IAE9D,oBAAC,eAAY,WAAU,oCAAmC;AAAA,cAE5D,oBAAC,UAAK,WAAU,kDACb,iBAAO,oBAAe,oCACzB;AAAA,cACA,oBAAC,UAAK,WAAU,oCAAmC,qCAAuB;AAAA;AAAA;AAAA,QAC5E;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL;AAAA,YACA,UAAQ;AAAA,YACR,WAAU;AAAA,YACV,UAAU,CAAC,MAAM;AACf,kBAAI,EAAE,OAAO,OAAO,OAAQ,MAAK,YAAY,EAAE,OAAO,KAAK;AAC3D,gBAAE,OAAO,QAAQ;AAAA,YACnB;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MAGD,QAAQ,eACP,oBAAC,SAAI,WAAU,0BACZ,oBAAU,IAAI,CAAC,QACd;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,SAAS,MAAM,KAAK,UAAU,MAAM,IAAI,MAAM,IAAI,CAAC;AAAA,UACnD,WAAU;AAAA,UAEV;AAAA,gCAAC,UAAK,WAAU,wCACd,8BAAC,mBAAgB,OAAO,cAAc,GAAG,GAAG,GAC9C;AAAA,YACA,oBAAC,UAAM,cAAI,OAAM;AAAA;AAAA;AAAA,QATZ,IAAI;AAAA,MAUX,CACD,GACH;AAAA,MAGD,QAAQ,iBACP,oBAAC,SAAI,WAAU,uBACZ,WAAC,oBACA,oBAAC,SAAI,WAAU,kEACb,8BAAC,gBAAa,WAAU,WAAU,GACpC,IACE,YAAY,WAAW,IACzB,oBAAC,OAAE,WAAU,0DAAyD,qEAEtE,IAEA,oBAAC,SAAI,WAAU,0BACZ,sBAAY,IAAI,CAAC,QAChB;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,SAAS,MAAM;AACb,gBAAI,QAAQ,CAAC,SAAU;AACvB,oBAAQ,IAAI;AACZ,qBAAS,EAAE;AACX,+BAAmB,IAAI,GAAG,EACvB,MAAM,CAAC,QAAQ,SAAS,eAAe,QAAQ,IAAI,UAAU,eAAe,CAAC,EAC7E,QAAQ,MAAM,QAAQ,KAAK,CAAC;AAAA,UACjC;AAAA,UACA,OAAO,IAAI;AAAA,UACX,WAAU;AAAA,UAGV,8BAAC,SAAI,KAAK,IAAI,KAAK,KAAK,IAAI,SAAS,mBAAmB,WAAU,8BAA6B;AAAA;AAAA,QAf1F,IAAI;AAAA,MAgBX,CACD,GACH,GAEJ;AAAA,MAGD,QAAQ,oBAAC,OAAE,WAAU,4DAA4D,iBAAM,IAAO;AAAA,OACjG;AAAA,KAEJ;AAEJ;;;AChZA,SAAsB,SAAS,UAAAA,SAAQ,YAAAC,iBAAgB;;;ACyBhD,SAAS,iBAAiB,MAA6B;AAC5D,QAAM,OAAmB,CAAC;AAE1B,WAAS,MAAM,UAA0B,OAAe,eAA8B;AAEpF,aAAS,IAAI,SAAS,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG;AAChD,YAAM,UAAU,SAAS,CAAC;AAC1B,WAAK,KAAK;AAAA,QACR;AAAA,QACA;AAAA,QACA,SAAS,QAAQ,SAAS;AAAA,QAC1B,YAAY;AAAA,QACZ,aAAa,SAAS;AAAA,QACtB;AAAA,MACF,CAAC;AACD,UAAI,QAAQ,SAAS,SAAS;AAC5B,cAAM,QAAQ,UAAU,QAAQ,GAAG,QAAQ,EAAE;AAAA,MAC/C;AAAA,IACF;AAAA,EACF;AAEA,QAAM,KAAK,UAAU,GAAG,IAAI;AAC5B,SAAO;AACT;AAGO,IAAM,yBAAyB;;;AD9Bd,gBAAAC,MAqHR,QAAAC,aArHQ;AAFxB,SAAS,SAAS,EAAE,MAAM,UAAU,GAAmD;AACrF,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAQ,aAAO,gBAAAD,KAAC,aAAU,WAAsB;AAAA,IACrD,KAAK;AAAW,aAAO,gBAAAA,KAAC,gBAAa,WAAsB;AAAA,IAC3D,KAAK;AAAQ,aAAO,gBAAAA,KAAC,aAAU,WAAsB;AAAA,IACrD,KAAK;AAAQ,aAAO,gBAAAA,KAAC,aAAU,WAAsB;AAAA,IACrD,KAAK;AAAS,aAAO,gBAAAA,KAAC,cAAW,WAAsB;AAAA,IACvD,KAAK;AAAS,aAAO,gBAAAA,KAAC,cAAW,WAAsB;AAAA,IACvD,KAAK;AAAS,aAAO,gBAAAA,KAAC,cAAW,WAAsB;AAAA,EACzD;AACF;AAaA,IAAM,YAAY;AAEX,SAAS,YAAY,EAAE,MAAM,oBAAoB,UAAU,YAAY,WAAW,SAAS,GAAqB;AACrH,QAAM,OAAO,QAAQ,MAAM,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;AACzD,QAAM,CAAC,YAAY,aAAa,IAAIE,UAAwB,IAAI;AAChE,QAAM,CAAC,aAAa,cAAc,IAAIA,UAAS,EAAE;AAIjD,QAAM,aAAaC,QAA8E,IAAI;AACrG,QAAM,CAAC,eAAe,gBAAgB,IAAID,UAAwB,IAAI;AAEtE,WAAS,YAAY,SAAuB;AAC1C,kBAAc,QAAQ,EAAE;AACxB,mBAAe,QAAQ,IAAI;AAAA,EAC7B;AAEA,WAAS,aAAa,WAAmB;AACvC,UAAM,OAAO,YAAY,KAAK;AAC9B,QAAI,KAAK,SAAS,EAAG,YAAW,WAAW,EAAE,KAAK,CAAC;AACnD,kBAAc,IAAI;AAAA,EACpB;AAEA,QAAM,UAAU,KAAK,SAAS,yBAAyB,KAAK,MAAM,GAAG,sBAAsB,IAAI;AAE/F,SACE,gBAAAD,MAAC,SAAI,WAAU,mEACb;AAAA,oBAAAD,KAAC,SAAI,WAAU,yIAAwI,oBAEvJ;AAAA,IAEA,gBAAAC,MAAC,SAAI,WAAU,kCACZ;AAAA,cAAQ,WAAW,IAClB,gBAAAD,KAAC,SAAI,WAAU,kDAAiD,2BAAa,IAC3E;AAAA,MACH,QAAQ,IAAI,CAAC,QAAQ;AACpB,cAAM,EAAE,QAAQ,IAAI;AACpB,cAAM,aAAa,mBAAmB,SAAS,QAAQ,EAAE;AACzD,cAAM,aAAa,eAAe,QAAQ;AAE1C,eACE,gBAAAC;AAAA,UAAC;AAAA;AAAA,YAEC,kBAAgB,QAAQ;AAAA,YACxB,WAAW;AAAA,YACX,aAAa,MAAM;AACjB,yBAAW,UAAU;AAAA,gBACnB,WAAW,QAAQ;AAAA,gBACnB,YAAY,IAAI;AAAA,gBAChB,aAAa,IAAI;AAAA,cACnB;AAAA,YACF;AAAA,YACA,YAAY,CAAC,UAAU;AACrB,kBAAI,CAAC,WAAW,QAAS;AAEzB,oBAAM,eAAe;AACrB,+BAAiB,IAAI,UAAU;AAAA,YACjC;AAAA,YACA,aAAa,MAAM,iBAAiB,IAAI;AAAA,YACxC,QAAQ,MAAM;AACZ,oBAAM,OAAO,WAAW;AACxB,kBAAI,CAAC,KAAM;AACX,kBAAI,KAAK,cAAc,QAAQ,IAAI;AACjC,0BAAU,KAAK,WAAW,IAAI,UAAU;AAAA,cAC1C;AACA,yBAAW,UAAU;AACrB,+BAAiB,IAAI;AAAA,YACvB;AAAA,YACA,WAAW,MAAM;AACf,yBAAW,UAAU;AACrB,+BAAiB,IAAI;AAAA,YACvB;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA,aAAa,4FAA4F;AAAA,cACzG,kBAAkB,IAAI,aAAa,2CAA2C;AAAA,YAChF,EAAE,KAAK,GAAG;AAAA,YACV,OAAO,EAAE,aAAa,IAAI,IAAI,QAAQ,UAAU;AAAA,YAE/C;AAAA,2BACC,gBAAAD;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAS;AAAA,kBACT,OAAO;AAAA,kBACP,UAAU,CAAC,UAAU,eAAe,MAAM,OAAO,KAAK;AAAA,kBACtD,QAAQ,MAAM,aAAa,QAAQ,EAAE;AAAA,kBACrC,WAAW,CAAC,UAAU;AACpB,wBAAI,MAAM,QAAQ,QAAS,cAAa,QAAQ,EAAE;AAClD,wBAAI,MAAM,QAAQ,SAAU,eAAc,IAAI;AAC9C,0BAAM,gBAAgB;AAAA,kBACxB;AAAA,kBACA,WAAU;AAAA;AAAA,cACZ;AAAA;AAAA;AAAA;AAAA,gBAKA,gBAAAC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS,CAAC,UAAU,SAAS,QAAQ,IAAI,MAAM,WAAW,MAAM,OAAO;AAAA,oBACvE,eAAe,MAAM;AACnB,0BAAI,SAAU,aAAY,OAAO;AAAA,oBACnC;AAAA,oBACA,OAAO,QAAQ;AAAA,oBACf,WAAU;AAAA,oBAEV;AAAA,sCAAAD,KAAC,YAAS,MAAM,QAAQ,MAAM,WAAU,mCAAkC;AAAA,sBACzE,QAAQ,OAAO,gBAAAA,KAAC,aAAU,WAAU,gDAA+C,IAAK;AAAA,sBACzF,gBAAAA,KAAC,UAAK,WAAU,2BAA2B,kBAAQ,MAAK;AAAA;AAAA;AAAA,gBAC1D;AAAA;AAAA,cAIF,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,cAAY,QAAQ,UAAU,iBAAiB;AAAA,kBAC/C,gBAAc,CAAC,QAAQ;AAAA,kBACvB,SAAS,CAAC,UAAU;AAClB,0BAAM,gBAAgB;AACtB,wBAAI,SAAU,YAAW,QAAQ,IAAI,EAAE,SAAS,CAAC,QAAQ,QAAQ,CAAC;AAAA,kBACpE;AAAA,kBACA,UAAU,CAAC;AAAA,kBACX,WAAW;AAAA,oBACT;AAAA,oBACA,QAAQ,UAAU,cAAc;AAAA,kBAClC,EAAE,KAAK,GAAG;AAAA,kBAET,kBAAQ,UACL,gBAAAA,KAAC,YAAS,WAAU,eAAc,IAClC,gBAAAA,KAAC,eAAY,WAAU,wCAAuC;AAAA;AAAA,cACpE;AAAA,cAGA,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,cAAY,QAAQ,SAAS,mBAAmB;AAAA,kBAChD,gBAAc,CAAC,CAAC,QAAQ;AAAA,kBACxB,SAAS,CAAC,UAAU;AAClB,0BAAM,gBAAgB;AACtB,wBAAI,SAAU,YAAW,QAAQ,IAAI,EAAE,QAAQ,CAAC,QAAQ,OAAO,CAAC;AAAA,kBAClE;AAAA,kBACA,UAAU,CAAC;AAAA,kBACX,WAAW;AAAA,oBACT;AAAA,oBACA,QAAQ,SAAS,gBAAgB;AAAA,kBACnC,EAAE,KAAK,GAAG;AAAA,kBAET,kBAAQ,SACL,gBAAAA,KAAC,aAAU,WAAU,0CAAyC,IAC9D,gBAAAA,KAAC,eAAY,WAAU,eAAc;AAAA;AAAA,cAC3C;AAAA;AAAA;AAAA,UA3GK,QAAQ;AAAA,QA4Gf;AAAA,MAEJ,CAAC;AAAA,MAEA,KAAK,SAAS,yBACb,gBAAAC,MAAC,SAAI,WAAU,kDAAiD;AAAA;AAAA,QAC5D,KAAK,SAAS;AAAA,QAAuB;AAAA,SACzC,IACE;AAAA,OACN;AAAA,KACF;AAEJ;","names":["useRef","useState","jsx","jsxs","useState","useRef"]}

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

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

package/dist/sandbox/index.d.ts

@@ -1104,6 +1104,16 @@ interface LivenessProbeConfig {
     sidecarProcessPattern?: (harness: Harness) => string;
     execTimeoutMs?: number;
     psTimeoutMs?: number;
+    /**
+     * Reuse a successful liveness result for this many milliseconds for the
+     * same box id. Defaults to 5 seconds; set to 0 to probe on every reuse.
+     *
+     * Only the exec/sidecar probe is cached. Runtime readiness, egress policy,
+     * deferred-file materialization, and bootstrap still run on every reuse.
+     * A box that dies during this window is surfaced by the next dispatch and
+     * is probed again after the TTL; the cache never triggers box deletion.
+     */
+    cacheTtlMs?: number;
 }
 /** Define options for composing a user profile including prompts, files, servers, and name */
 interface ProfileComposeOptions {
@@ -1201,7 +1211,7 @@ interface SandboxRuntimeConfig {
 declare const DEFAULT_SANDBOX_RESOURCES: SandboxResourceConfig;
 /** Resolve a synchronous sandbox client from provided runtime configuration credentials */
 declare function getClient(shell: SandboxRuntimeConfig): Sandbox;
-/** Reset the client cache to clear stored data and force fresh retrieval */
+/** Reset the process-local sandbox client and liveness-verification caches. */
 declare function resetClientCache(): void;
 /** Describe an application tool with its name, unique key, and description */
 interface AppToolDescriptor {

package/dist/sandbox/index.js

@@ -89,7 +89,7 @@ import {
   workspaceSandboxRecoveryMessage,
   workspaceSandboxRecoveryRecommendedActions,
   writeProfileFilesToBox
-} from "../chunk-OTLEYHOG.js";
+} from "../chunk-RRH23CGS.js";
 import "../chunk-TH7L265V.js";
 import "../chunk-LWSJK546.js";
 import "../chunk-P5PIAQVS.js";

package/dist/web-react/index.d.ts

@@ -489,11 +489,14 @@ interface ChatComposerProps {
     dropDescription?: string;
     /** Cmd/Ctrl+L focuses the input and shows the hint. Default true. */
     focusShortcut?: boolean;
+    /** Float the card on a soft two-layer foreground-tinted shadow (opt-in).
+     *  Elevation only — radius, ring, and control layout are unchanged. */
+    floating?: boolean;
     /** Send button label. Default "Send". */
     sendLabel?: string;
     className?: string;
 }
-declare function ChatComposer({ onSend, onSendParts, onSendFailed, sendFailureMessage, onCancel, isStreaming, disabled, placeholder, value, onValueChange, initialValue, seed, onSeedApplied, controls, controlsPlacement, onAttach, onAttachFolder, pendingFiles, onRemoveFile, accept, dropTitle, dropDescription, focusShortcut, sendLabel, className, }: ChatComposerProps): react.JSX.Element;
+declare function ChatComposer({ onSend, onSendParts, onSendFailed, sendFailureMessage, onCancel, isStreaming, disabled, placeholder, value, onValueChange, initialValue, seed, onSeedApplied, controls, controlsPlacement, onAttach, onAttachFolder, pendingFiles, onRemoveFile, accept, dropTitle, dropDescription, focusShortcut, floating, sendLabel, className, }: ChatComposerProps): react.JSX.Element;
 
 type InteractionBadgeVariant = 'outline' | 'default' | 'destructive';
 declare function InteractionBadge({ variant, children }: {
@@ -1967,6 +1970,11 @@ interface ModelPickerProps {
  * Searchable model picker pill + popover: a featured/recommended section
  * first, then per-provider groups in catalogue order (the server already
  * sorts providers by tier).
+ *
+ * This is the CANONICAL ecosystem model picker (see "UI chrome ownership
+ * (picker canon)" in AGENTS.md). sandbox-ui's `dashboard/ModelPicker` is
+ * legacy — deprecated, frozen, removed at sandbox-ui's next major; new code
+ * belongs here.
  */
 declare function ModelPicker({ value, onChange, models, loading, renderProviderBadge, recommendedLabel, priorityGroup }: ModelPickerProps): react.JSX.Element;
 /** One reasoning-budget level: the engine `id` is unchanged (the value the
@@ -1993,7 +2001,10 @@ interface EffortPickerProps {
 }
 /** Thinking-budget selector pill, styled to match {@link ModelPicker}. Show
  *  it only when the selected model `supportsReasoning`. "Thinking" is the
- *  plain-English name for what was internally called "effort". */
+ *  plain-English name for what was internally called "effort".
+ *
+ *  The CANONICAL ecosystem effort picker — sandbox-ui's reasoning menu (inside
+ *  its `chat/AgentSessionControls`) is legacy and frozen. */
 declare function EffortPicker({ value, onChange, levels, label }: EffortPickerProps): react.JSX.Element;
 
 interface AgentSessionControlsProps {
@@ -2113,6 +2124,13 @@ interface ChatMessagesProps {
     /** Shared reading scale for both user and assistant prose. Defaults to 16px;
      *  `large` uses 17px without enlarging labels, tool chrome, or metadata. */
     messageSize?: 'default' | 'large';
+    /** Transcript chrome. `labeled` (default) keeps the always-on role label +
+     *  model/tok-s/cost meta line and the primary-tinted user bubble. `quiet`
+     *  drops the label row into a fixed-height meta lane at each row's bottom
+     *  (copy + the demoted meta, revealed on hover/focus, always visible on
+     *  touch) and renders user bubbles neutral with a symmetric radius.
+     *  Everything else — tool cards, reasoning, streaming — is identical. */
+    chrome?: 'labeled' | 'quiet';
     /** Catalogue models, for per-message cost from pricing. Pass [] to skip cost. */
     models?: CatalogModel[];
     /** Markdown renderer for assistant content; default renders pre-wrapped text. */
@@ -2207,8 +2225,9 @@ declare function useThinkingSeconds(active: boolean): number;
  * The message thread: one centered column; user messages are right-aligned
  * bubbles with a User label; agent messages carry an Agent meta line with
  * model id, tokens/sec, and cost, plus a collapsible thinking section and
- * tool-call chips.
+ * tool-call chips. `chrome="quiet"` opts into the label-free variant: the
+ * label/meta row becomes a hover-revealed meta lane under each row.
  */
-declare function ChatMessages({ messages, messageSize, models, renderMarkdown, renderExtras, durableCards, userLabel, agentLabel, loading, approval, onToolCallClick, toolRenderers, error, onRetry, renderEmpty, emptyState, header, resolveAttachmentUrl, workProductCards, }: ChatMessagesProps): react.JSX.Element;
+declare function ChatMessages({ messages, messageSize, chrome, models, renderMarkdown, renderExtras, durableCards, userLabel, agentLabel, loading, approval, onToolCallClick, toolRenderers, error, onRetry, renderEmpty, emptyState, header, resolveAttachmentUrl, workProductCards, }: ChatMessagesProps): react.JSX.Element;
 
 export { type ActivityTone, type AgentActivityPage, AgentActivityPanel, type AgentActivityPanelProps, type AgentActivityRecord, AgentSessionControls, type AgentSessionControlsProps, type AttachmentFileResult, CatalogModel, ChatAttachmentInput, ChatAttachmentKind, ChatAttachmentPart, ChatComposer, type ChatComposerProps, type ChatEmptyDoor, ChatEmptyState, type ChatEmptyStateProps, ChatInteraction, ChatInteractionField, type ChatInteractionRestoreMode, ChatInteractionStatus, ChatMentionPart, type ChatMessageMetrics, type ChatMessageSegment, ChatMessages, type ChatMessagesProps, ChatSelectField, type ChatStreamCallbacks, type ChatStreamToolCall, type ChatStreamToolResult, type ChatToolCallInfo, type ChatUiMessage, type ComposerFile, type ComposerFilePart, type ComposerSendFailure, type ComposerSendHandler, type ComposerSendOutcome, type ComposerSendPartsHandler, type ComposerSendRejected, type ComposerSendResult, type ConsumeChatStreamResult, DEFAULT_EFFORT_LEVELS, DEFAULT_PROVENANCE_CONFIDENCE_POLICY, type DurableChatCard, DurableChatCards, type DurableChatCardsProps, type DurableInteractionAnswerSubmitterOptions, DurablePlanCard, type DurablePlanCardProps, DurablePlanClientError, type DurablePlanCurrentInput, type DurablePlanDecision, type DurablePlanDecisionClient, type DurablePlanDecisionClientOptions, type DurablePlanDecisionInput, type DurablePlanDecisionResult, type DurablePlanFollowUpReceipt, EMPTY_RECORD_GRID_OVERLAY, type EffortLevel, EffortPicker, type EffortPickerProps, EvidenceLineageTable, type EvidenceLineageTableProps, ExceptionList, type ExceptionListProps, type FetchSessionPage, type FieldValues, FlowWaterfall, type FlowWaterfallProps, INTERACTION_SUBMIT_TIMEOUT_MESSAGE, INTERACTION_SUBMIT_TIMEOUT_MS, InteractionActionButton, type InteractionAnswerSubmission, type InteractionAnswerSubmitterOptions, InteractionAnswers, type InteractionAttemptStore, InteractionBadge, type InteractionBadgeVariant, InteractionCancelData, InteractionPlanCard, type InteractionPlanCardProps, InteractionQuestionCard, type InteractionQuestionCardProps, InteractionRequestWire, type InteractionSubmitResult, type LinkLikeComponent, type LinkLikeProps, type MentionTextSegment, MessageAttachments, type MessageAttachmentsProps, MissionActivityLane, type MissionActivityLaneProps, ModelPicker, type ModelPickerProps, PROVENANCE_BASES, type ProposalApprovalHandlers, type ProvenanceBasis, type ProvenanceBasisMeta, type ProvenanceConfidencePolicy, type ProvenanceGap, type ProvenanceGapKind, ProvenanceLegend, type ProvenanceLegendProps, type ProvenanceRecord, type ProvenanceSource, type ProvenanceSourceStatus, ProvenanceStamp, type ProvenanceStampProps, type ProvenanceStanding, type ProvenanceStandingMeta, ProvenanceValue, type ProvenanceValueProps, ProviderLogo, type ProviderLogoProps, QualityCheckList, type QualityCheckListProps, QuestionOptionList, type QuestionOptionListProps, RecordGrid, type RecordGridBooleanColumn, type RecordGridCellChange, type RecordGridCellOutcome, type RecordGridCellSource, type RecordGridColumn, type RecordGridColumnBase, type RecordGridCreateOutcome, type RecordGridCurrencyColumn, type RecordGridDateColumn, type RecordGridDependency, type RecordGridNumberColumn, type RecordGridOverlay, type RecordGridProps, type RecordGridRow, type RecordGridRowOutcome, type RecordGridSelectColumn, type RecordGridSelectOption, type RecordGridSourceBasis, type RecordGridTextColumn, type RecordGridValue, type RecordGridWriteOutcome, type RestoreChatInteractionsOptions, ReviewQueueItem, type ReviewQueuePage, ReviewQueuePanel, type ReviewQueuePanelProps, ReviewQueueState, RunDrillIn, type RunDrillInProps, SeatPaywall, type SeatPaywallProps, type SessionActionLabels, type SessionActions, type SessionActionsOptions, type SessionBulkAction, SessionHistoryPanel, type SessionHistoryPanelProps, type SessionHistoryState, type SessionPageQuery, type SmoothRevealOptions, type StreamChatOptions, type SubmitInteractionAnswer, type ToolDetailRenderers, type ToolRunRecord, type ToolRunStep, type UseChatInteractionsOptions, type UseChatInteractionsResult, type UseComposerAttachmentsOptions, type UseComposerAttachmentsResult, type UseDurablePlanFlowOptions, type UseDurablePlanFlowResult, type UseInfiniteScrollOptions, type UseSessionHistoryOptions, type WaterfallRow, WorkProductCard, type WorkProductCardProps, __resetAttachmentFileCacheForTests, activityTone, buildAnswerData, cancelChatInteraction, consumeChatStream, createDurableInteractionAnswerSubmitter, createDurablePlanDecisionClient, createInteractionAnswerSubmitter, createMemoryInteractionAttemptStore, createSessionInteractionAttemptStore, describeProvenance, describeProvenanceSourceStatus, dispatchChatStreamLine, durableChatCardsFromParts, fieldAnswer, fieldValuesFromAnswers, formatActivityCost, formatActivityDuration, formatModelCost, formatRecordGridValue, formatSessionTimestamp, formatTokensPerSecond, hasSecretField, hydrateChatInteractions, interactionStatusLabels, interactionSubmissionSignature, interactionTerminalNotes, isLateAnswerableStatus, isRecordGridCellApplicable, lateAnswerMessage, loadAttachmentFile, loadingProvenanceSources, mergeActivityPages, mergeReviewQueuePages, nextRevealCount, parseRecordGridInput, pendingApprovalOf, projectRecordGridRows, provenanceBasisMeta, provenanceGaps, provenanceNextMove, provenanceStandingMeta, provenanceTriggerLabel, pruneRecordGridOverlay, readRecordGridCell, recordGridEditorText, recordGridFail, recordGridOk, recordGridRowLabel, resolveChatInteraction, resolveProvenanceStanding, responseErrorMessage, restoreChatInteractions, reviewQueueStateLabel, rollUpProvenanceStanding, sameRecordGridValue, segmentMentionContent, settleInteractionSubmit, standingFromConfidence, streamChatTurn, sumRecordGridColumn, terminalizePendingChatInteractions, triggerAttachmentDownload, upsertChatInteraction, useChatInteractions, useComposerAttachments, useDurablePlanFlow, useInfiniteScroll, usePending, usePopover, useSessionActions, useSessionHistory, useSmoothText, useThinkingSeconds, validateRecordGridCell, validateRecordGridRow, waterfallLayout, weakerProvenanceStanding, withRecordGridCreated, withRecordGridRemoved, withRecordGridServerRow, withRecordGridUpdate, withoutRecordGridCreated, withoutRecordGridRemoved, withoutRecordGridUpdate, workProductPartsFromMessageParts, workProductStatusLabel };

package/dist/web-react/index.js

@@ -117,7 +117,7 @@ import {
   withoutRecordGridCreated,
   withoutRecordGridRemoved,
   withoutRecordGridUpdate
-} from "../chunk-WC43OQMR.js";
+} from "../chunk-3I27SDU3.js";
 import "../chunk-FBVLEGEG.js";
 import {
   EvidenceLineageTable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/agent-app",
-  "version": "0.45.28",
+  "version": "0.45.29",
   "packageManager": "pnpm@11.17.0",
   "description": "Build agent applications with typed chat, tools, sandboxes, integrations, billing, and evaluation.",
   "keywords": [
@@ -501,12 +501,17 @@
     "typecheck": "tsc --noEmit",
     "docs:gen": "agent-docs",
     "knip": "knip",
-    "signoff": "node dist/signoff/cli.js"
+    "signoff": "node dist/signoff/cli.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "5.20260722.1",
     "@firecrawl/pdf-inspector-wasm": "^0.1.3",
+    "@hocuspocus/provider": "^4.4.0",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@storybook/react": "^10.5.5",
+    "@storybook/react-vite": "^10.5.5",
     "@tangle-network/agent-docs": "0.2.1",
     "@tangle-network/agent-eval": "0.143.0",
     "@tangle-network/agent-integrations": "0.53.37",
@@ -530,6 +535,7 @@
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "@xyflow/react": "^12.0.0",
+    "autoprefixer": "^10.5.4",
     "better-auth": "^1.6.16",
     "better-sqlite3": "^12.10.0",
     "drizzle-orm": "^0.45.2",
@@ -540,15 +546,20 @@
     "lucide-react": "^1.16.0",
     "npm": "11.18.0",
     "pdf-lib": "^1.17.1",
+    "postcss": "^8.5.25",
     "react": "^19.0.0",
     "react-dom": "^19.2.7",
     "react-konva": "^19.2.5",
     "react-router": "^8.3.0",
     "resend": "^6.12.4",
     "semver": "^7.8.5",
+    "storybook": "^10.5.5",
+    "tailwindcss": "^3.4.19",
     "tsup": "^8.0.0",
     "typescript": "^5.7.0",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.10",
+    "y-protocols": "^1.0.7",
+    "yjs": "^13.6.31"
   },
   "peerDependencies": {
     "@firecrawl/pdf-inspector-wasm": ">=0.1.3",