@xenosystem/blocks 0.12.3 → 0.12.5

package/dist/edit/index.js

@@ -573,12 +573,12 @@ var LayersPanelController = class {
   selectNode(id, mods = {}) {
     if (!this.tree.nodes[id]) return;
     const multi = this.multiSelect;
-    const toggle = multi && !!(mods.ctrl || mods.meta);
+    const toggle2 = multi && !!(mods.ctrl || mods.meta);
     const range = multi && !!mods.shift;
     if (range && this.anchorId) {
       this.selectedIds = rangeBetween(this.getRows(), this.anchorId, id);
       this.activeId = id;
-    } else if (toggle) {
+    } else if (toggle2) {
       this.selectedIds = this.selectedIds.includes(id) ? this.selectedIds.filter((s) => s !== id) : [...this.selectedIds, id];
       this.activeId = this.selectedIds.includes(id) ? id : this.selectedIds[this.selectedIds.length - 1] ?? null;
       this.anchorId = id;
@@ -1201,6 +1201,204 @@ var LayersPanelController = class {
 
 // src/edit/layers/react/LayersPanelView.tsx
 import { useCallback, useEffect as useEffect2, useRef as useRef2, useState, useSyncExternalStore } from "react";
+
+// src/edit/layers/declaration.ts
+function layersViewState(c) {
+  const rows = c.getRows();
+  const window_ = c.getWindow();
+  const columns = c.getColumns();
+  const rowHeight = c.getRowHeight();
+  const renamingId = c.getRenamingId();
+  const drag = c.getDrag();
+  const activeId = c.getActiveId();
+  return {
+    searchShown: c.isSearchShown(),
+    filter: c.getFilter(),
+    totalHeight: window_.totalHeight,
+    offsetTop: window_.offsetTop,
+    rows: c.getWindowRows().map((row) => {
+      const node = row.node;
+      const container = isContainer(node);
+      return {
+        id: row.id,
+        name: node.name,
+        title: node.name,
+        depth: row.depth,
+        height: rowHeight,
+        selected: c.isSelected(row.id),
+        active: activeId === row.id,
+        dimmed: !row.matched,
+        dropHint: drag?.target && drag.target.targetId === row.id ? drag.target.position : null,
+        expanded: container ? row.expanded : void 0,
+        renaming: renamingId === row.id,
+        notRenaming: renamingId !== row.id,
+        hasThumbnail: columns.includes("thumbnail") && !!node.thumbnailKey,
+        noThumbnail: !(columns.includes("thumbnail") && !!node.thumbnailKey),
+        thumbnailKey: node.thumbnailKey,
+        showVisibility: columns.includes("visibility") && node.visible !== void 0,
+        visible: !!node.visible,
+        visibilityLabel: node.visible ? "Hide layer" : "Show layer",
+        showLock: columns.includes("lock") && node.locked !== void 0,
+        locked: !!node.locked,
+        lockLabel: node.locked ? "Unlock layer" : "Lock layer",
+        showSolo: columns.includes("solo") && node.solo !== void 0,
+        solo: !!node.solo,
+        showMute: columns.includes("mute") && node.muted !== void 0,
+        muted: !!node.muted,
+        showArm: columns.includes("arm") && node.armed !== void 0,
+        armed: !!node.armed,
+        showColor: columns.includes("colorLabel") && node.colorLabel !== void 0,
+        colorLabel: node.colorLabel ?? null,
+        adornments: (node.adornments ?? []).map((a, i) => ({ key: a.id ?? `${a.kind}-${i}`, text: a.kind === "spinner" ? "\u2026" : a.label ?? "", title: a.tooltip })),
+        showOpacity: columns.includes("opacity") && node.opacity !== void 0,
+        opacity: node.opacity !== void 0 ? `${Math.round(node.opacity * 100)}%` : ""
+      };
+    }),
+    empty: rows.length === 0,
+    count: `${rows.length} ${rows.length === 1 ? "layer" : "layers"}`,
+    orderLabel: c.getOrderLabel() || void 0,
+    thumbnailSize: c.getThumbnailSize()
+  };
+}
+function applyLayersUi(c, intent) {
+  switch (intent.kind) {
+    case "filter":
+      c.setFilter(intent.value);
+      break;
+    case "toggleExpanded":
+      c.toggleExpanded(intent.id);
+      break;
+    case "toggleProp":
+      c.toggleProp(intent.prop, intent.id);
+      break;
+    case "beginRename":
+      c.beginRename(intent.id);
+      break;
+    case "contextMenu":
+      c.requestContextMenu(intent.id, intent.x, intent.y);
+      break;
+  }
+}
+var layersViewManifest = {
+  id: layersManifest.id,
+  version: "1.0.0",
+  title: "Layers",
+  category: "edit",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The LayersViewState the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, id?, prop?, value?, x?, y? } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY = { searchShown: true, filter: "", totalHeight: 0, offsetTop: 0, rows: [], empty: true, count: "0 layers", thumbnailSize: 24 };
+var BEHAVIOURS = {
+  "edit/layersPanelView": (inputs) => inputs.view ?? EMPTY
+};
+var text = (b) => ({ component: "text", props: { text: b } });
+var ui = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var toggle = (prop) => ui("toggleProp", { id: { item: "id" }, prop: { value: prop } });
+var LAYERS_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: layersViewManifest,
+  behaviour: "edit/layersPanelView",
+  composition: {
+    component: "chrome/Column",
+    props: { className: { value: "xeno-layers-panel" } },
+    children: [
+      {
+        component: "chrome/Toolbar",
+        when: { input: "view.searchShown" },
+        children: [{ component: "chrome/SearchField", props: { value: { input: "view.filter" }, placeholder: { value: "Search layers" }, label: { value: "Search layers" } }, on: { onChange: ui("filter", { value: { arg: "" } }) } }]
+      },
+      {
+        component: "layers/Scroller",
+        children: [
+          {
+            component: "chrome/RowList",
+            props: { role: { value: "tree" }, "aria-label": { value: "Layers" } },
+            children: [
+              {
+                component: "chrome/VirtualWindow",
+                props: { totalHeight: { input: "view.totalHeight" }, offsetTop: { input: "view.offsetTop" } },
+                children: [
+                  {
+                    component: "chrome/Row",
+                    each: { input: "view.rows", key: "id" },
+                    props: {
+                      "data-layer-row": { item: "id" },
+                      height: { item: "height" },
+                      depth: { item: "depth" },
+                      selected: { item: "selected" },
+                      active: { item: "active" },
+                      dimmed: { item: "dimmed" },
+                      dropHint: { item: "dropHint" },
+                      expanded: { item: "expanded" },
+                      title: { item: "title" },
+                      icon: {
+                        node: {
+                          component: "fragment",
+                          children: [
+                            { component: "layers/Thumbnail", when: { item: "hasThumbnail" }, props: { thumbnailKey: { item: "thumbnailKey" }, size: { input: "view.thumbnailSize" } } },
+                            { component: "layers/KindGlyph", when: { item: "noThumbnail" } }
+                          ]
+                        }
+                      },
+                      leading: {
+                        node: {
+                          component: "fragment",
+                          children: [
+                            { component: "chrome/IconButton", when: { item: "showVisibility" }, props: { size: { value: "sm" }, icon: { node: { component: "layers/VisibilityIcon", props: { open: { item: "visible" } } } }, label: { item: "visibilityLabel" }, active: { item: "visible" } }, on: { onClick: toggle("visible") } },
+                            { component: "chrome/IconButton", when: { item: "showLock" }, props: { size: { value: "sm" }, icon: { node: { component: "layers/LockStateIcon", props: { locked: { item: "locked" } } } }, label: { item: "lockLabel" }, active: { item: "locked" } }, on: { onClick: toggle("locked") } },
+                            { component: "chrome/ChipToggle", when: { item: "showSolo" }, props: { glyph: { value: "S" }, label: { value: "Solo" }, on: { item: "solo" } }, on: { onChange: toggle("solo") } },
+                            { component: "chrome/ChipToggle", when: { item: "showMute" }, props: { glyph: { value: "M" }, label: { value: "Mute" }, on: { item: "muted" } }, on: { onChange: toggle("muted") } },
+                            { component: "chrome/ChipToggle", when: { item: "showArm" }, props: { glyph: { value: "R" }, label: { value: "Arm" }, on: { item: "armed" } }, on: { onChange: toggle("armed") } },
+                            { component: "chrome/ColorTag", when: { item: "showColor" }, props: { color: { item: "colorLabel" } } }
+                          ]
+                        }
+                      },
+                      label: {
+                        node: {
+                          component: "fragment",
+                          children: [
+                            { component: "layers/RenameField", when: { item: "renaming" }, props: { id: { item: "id" } } },
+                            { component: "text", when: { item: "notRenaming" }, props: { text: { item: "name" } } }
+                          ]
+                        }
+                      },
+                      trailing: {
+                        node: {
+                          component: "fragment",
+                          children: [
+                            { component: "chrome/Badge", each: { item: "adornments", key: "key" }, props: { size: { value: "sm" }, title: { item: "title" } }, children: [text({ item: "text" })] },
+                            { component: "chrome/Text", when: { item: "showOpacity" }, props: { role: { value: "number" } }, children: [text({ item: "opacity" })] }
+                          ]
+                        }
+                      }
+                    },
+                    on: {
+                      onExpandedChange: ui("toggleExpanded", { id: { item: "id" } }),
+                      onDoubleClick: ui("beginRename", { id: { item: "id" } }),
+                      onContextMenuAt: ui("contextMenu", { id: { item: "id" }, x: { arg: "" }, y: { arg: "", index: 1 } })
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { value: "No layers" } } }
+        ]
+      },
+      {
+        component: "chrome/StatusBar",
+        props: {
+          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text({ input: "view.count" })] } },
+          right: { node: { component: "chrome/Text", when: { input: "view.orderLabel" }, props: { role: { value: "meta" } }, children: [text({ input: "view.orderLabel" })] } }
+        }
+      }
+    ]
+  }
+};
+
+// src/edit/layers/react/LayersPanelView.tsx
 import { Badge, ChipToggle, ColorTag, Column, EmptyState, IconButton, Input, RowList, Row, ScrollArea, SearchField, StatusBar, Text, Toolbar, VirtualWindow } from "@xenosystem/components/chrome";
 
 // src/edit/layers/react/icons.tsx
@@ -1244,6 +1442,12 @@ function UnlockIcon({ size = 12, className }) {
 function KindGlyph({ size = 10 }) {
   return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }) });
 }
+function VisibilityIcon({ open, size }) {
+  return open ? /* @__PURE__ */ jsx(EyeIcon, { size }) : /* @__PURE__ */ jsx(EyeOffIcon, { size });
+}
+function LockStateIcon({ locked, size }) {
+  return locked ? /* @__PURE__ */ jsx(LockIcon, { size }) : /* @__PURE__ */ jsx(UnlockIcon, { size });
+}
 
 // src/edit/layers/react/Thumbnail.tsx
 import { useEffect, useRef } from "react";
@@ -1308,16 +1512,20 @@ function LayersPanelView({ controller }) {
   const subscribe = useCallback((cb) => controller.subscribe(cb), [controller]);
   const getSnapshot = useCallback(() => controller.getRevision(), [controller]);
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const view = layersViewState(controller);
+  const ui4 = (intent) => applyLayersUi(controller, intent);
+  return /* @__PURE__ */ jsxs2(Column, { className: "xeno-layers-panel", children: [
+    view.searchShown ? /* @__PURE__ */ jsx3(Toolbar, { children: /* @__PURE__ */ jsx3(SearchField, { value: view.filter, onChange: (v) => ui4({ kind: "filter", value: v }), placeholder: "Search layers", label: "Search layers" }) }) : null,
+    /* @__PURE__ */ jsxs2(LayersScroller, { controller, children: [
+      /* @__PURE__ */ jsx3(RowList, { role: "tree", "aria-label": "Layers", children: /* @__PURE__ */ jsx3(VirtualWindow, { totalHeight: view.totalHeight, offsetTop: view.offsetTop, children: view.rows.map((row) => /* @__PURE__ */ jsx3(LayerRow, { row, thumbnailSize: view.thumbnailSize, controller }, row.id)) }) }),
+      view.empty ? /* @__PURE__ */ jsx3(EmptyState, { title: "No layers" }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(StatusBar, { left: /* @__PURE__ */ jsx3(Text, { role: "number", children: view.count }), right: view.orderLabel ? /* @__PURE__ */ jsx3(Text, { role: "meta", children: view.orderLabel }) : null })
+  ] });
+}
+function LayersScroller({ controller, children }) {
   const scrollRef = useRef2(null);
   const pressRef = useRef2(null);
-  const [renameDraft, setRenameDraft] = useState("");
-  const rows = controller.getRows();
-  const window_ = controller.getWindow();
-  const windowRows = controller.getWindowRows();
-  const columns = controller.getColumns();
-  const rowHeight = controller.getRowHeight();
-  const renamingId = controller.getRenamingId();
-  const drag = controller.getDrag();
   useEffect2(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -1335,16 +1543,8 @@ function LayersPanelView({ controller }) {
     if (el && Math.abs(el.scrollTop - controller.getScrollTop()) > 1) {
       el.scrollTop = controller.getScrollTop();
     }
-  }, [controller, window_.offsetTop]);
-  useEffect2(() => {
-    if (renamingId) {
-      setRenameDraft(controller.getTree().nodes[renamingId]?.name ?? "");
-    }
-  }, [renamingId, controller]);
-  const onScroll = useCallback(
-    (e) => controller.setScrollTop(e.currentTarget.scrollTop),
-    [controller]
-  );
+  });
+  const onScroll = useCallback((e) => controller.setScrollTop(e.currentTarget.scrollTop), [controller]);
   const rowFromPoint = useCallback((clientX, clientY) => {
     const el = document.elementFromPoint(clientX, clientY);
     const rowEl = el?.closest?.("[data-layer-row]");
@@ -1353,17 +1553,21 @@ function LayersPanelView({ controller }) {
     if (!id) return null;
     return { id, offsetY: clientY - rowEl.getBoundingClientRect().top };
   }, []);
-  const onRowPointerDown = useCallback(
-    (e, row) => {
+  const onPointerDown = useCallback(
+    (e) => {
       if (e.button !== 0) return;
-      if (e.target?.closest?.("button,input")) return;
-      pressRef.current = { id: row.id, x: e.clientX, y: e.clientY, dragging: false };
-      controller.selectNode(row.id, { ctrl: e.ctrlKey, meta: e.metaKey, shift: e.shiftKey });
+      const target = e.target;
+      if (target?.closest?.("button,input")) return;
+      const rowEl = target?.closest?.("[data-layer-row]");
+      const id = rowEl?.getAttribute("data-layer-row");
+      if (!id) return;
+      pressRef.current = { id, x: e.clientX, y: e.clientY, dragging: false };
+      controller.selectNode(id, { ctrl: e.ctrlKey, meta: e.metaKey, shift: e.shiftKey });
       e.currentTarget.setPointerCapture(e.pointerId);
     },
     [controller]
   );
-  const onRowPointerMove = useCallback(
+  const onPointerMove = useCallback(
     (e) => {
       const press = pressRef.current;
       if (!press) return;
@@ -1377,7 +1581,7 @@ function LayersPanelView({ controller }) {
     },
     [controller, rowFromPoint]
   );
-  const onRowPointerUp = useCallback(
+  const onPointerUp = useCallback(
     (e) => {
       const press = pressRef.current;
       pressRef.current = null;
@@ -1391,128 +1595,102 @@ function LayersPanelView({ controller }) {
   );
   const onKeyDown = useCallback(
     (e) => {
-      if (renamingId) return;
-      const handled = controller.handleKey({
-        key: e.key,
-        ctrl: e.ctrlKey,
-        meta: e.metaKey,
-        shift: e.shiftKey
-      });
+      if (controller.getRenamingId()) return;
+      const handled = controller.handleKey({ key: e.key, ctrl: e.ctrlKey, meta: e.metaKey, shift: e.shiftKey });
       if (handled) {
         e.preventDefault();
         e.stopPropagation();
       }
     },
-    [controller, renamingId]
+    [controller]
   );
-  return /* @__PURE__ */ jsxs2(Column, { className: "xeno-layers-panel", children: [
-    controller.isSearchShown() ? /* @__PURE__ */ jsx3(Toolbar, { children: /* @__PURE__ */ jsx3(SearchField, { value: controller.getFilter(), onChange: (v) => controller.setFilter(v), placeholder: "Search layers", label: "Search layers" }) }) : null,
-    /* @__PURE__ */ jsxs2(ScrollArea, { ref: scrollRef, onScroll, onKeyDown, tabIndex: 0, children: [
-      /* @__PURE__ */ jsx3(RowList, { role: "tree", "aria-label": "Layers", children: /* @__PURE__ */ jsx3(VirtualWindow, { totalHeight: window_.totalHeight, offsetTop: window_.offsetTop, children: windowRows.map((row) => /* @__PURE__ */ jsx3(
-        LayerRow,
-        {
-          row,
-          controller,
-          columns,
-          rowHeight,
-          selected: controller.isSelected(row.id),
-          active: controller.getActiveId() === row.id,
-          renaming: renamingId === row.id,
-          renameDraft,
-          onRenameDraft: setRenameDraft,
-          dropHint: drag?.target && drag.target.targetId === row.id ? drag.target.position : null,
-          onPointerDown: onRowPointerDown,
-          onPointerMove: onRowPointerMove,
-          onPointerUp: onRowPointerUp
-        },
-        row.id
-      )) }) }),
-      rows.length === 0 ? /* @__PURE__ */ jsx3(EmptyState, { title: "No layers" }) : null
-    ] }),
-    /* @__PURE__ */ jsx3(
-      StatusBar,
-      {
-        left: /* @__PURE__ */ jsxs2(Text, { role: "number", children: [
-          rows.length,
-          " ",
-          rows.length === 1 ? "layer" : "layers"
-        ] }),
-        right: controller.getOrderLabel() ? /* @__PURE__ */ jsx3(Text, { role: "meta", children: controller.getOrderLabel() }) : null
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx3(ScrollArea, { ref: scrollRef, onScroll, onKeyDown, onPointerDown, onPointerMove, onPointerUp, tabIndex: 0, children });
 }
-function LayerRow(props) {
-  const { row, controller, columns, rowHeight, selected, active, renaming, dropHint } = props;
-  const node = row.node;
-  const container = isContainer(node);
-  const thumb = controller.getThumbnail(node.thumbnailKey);
+function LayersRenameField({ id, controller }) {
+  const [draft, setDraft] = useState(() => controller.getTree().nodes[id]?.name ?? "");
+  return /* @__PURE__ */ jsx3(
+    Input,
+    {
+      autoFocus: true,
+      value: draft,
+      onChange: setDraft,
+      onBlur: () => controller.commitRename(draft),
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (e.key === "Enter") controller.commitRename(draft);
+        if (e.key === "Escape") controller.cancelRename();
+      },
+      label: "Layer name"
+    }
+  );
+}
+function LayersThumbnail({ thumbnailKey, size, controller }) {
+  return /* @__PURE__ */ jsx3(Thumbnail, { size, data: controller.getThumbnail(thumbnailKey) });
+}
+function LayerRow({ row, thumbnailSize, controller }) {
+  const ui4 = (intent) => applyLayersUi(controller, intent);
   return /* @__PURE__ */ jsx3(
     Row,
     {
       "data-layer-row": row.id,
-      height: rowHeight,
+      height: row.height,
       depth: row.depth,
-      selected,
-      active,
-      dimmed: !row.matched,
-      dropHint,
-      expanded: container ? row.expanded : void 0,
-      onExpandedChange: container ? () => controller.toggleExpanded(row.id) : void 0,
-      icon: columns.includes("thumbnail") && node.thumbnailKey ? /* @__PURE__ */ jsx3(Thumbnail, { size: controller.getThumbnailSize(), data: thumb }) : /* @__PURE__ */ jsx3(KindGlyph, {}),
+      selected: row.selected,
+      active: row.active,
+      dimmed: row.dimmed,
+      dropHint: row.dropHint,
+      expanded: row.expanded,
+      title: row.title,
+      icon: row.hasThumbnail ? /* @__PURE__ */ jsx3(LayersThumbnail, { thumbnailKey: row.thumbnailKey, size: thumbnailSize, controller }) : /* @__PURE__ */ jsx3(KindGlyph, {}),
       leading: /* @__PURE__ */ jsxs2(Fragment, { children: [
-        columns.includes("visibility") && node.visible !== void 0 ? /* @__PURE__ */ jsx3(IconButton, { size: "sm", icon: node.visible ? /* @__PURE__ */ jsx3(EyeIcon, {}) : /* @__PURE__ */ jsx3(EyeOffIcon, {}), label: node.visible ? "Hide layer" : "Show layer", active: node.visible, onClick: () => controller.toggleProp("visible", row.id) }) : null,
-        columns.includes("lock") && node.locked !== void 0 ? /* @__PURE__ */ jsx3(IconButton, { size: "sm", icon: node.locked ? /* @__PURE__ */ jsx3(LockIcon, {}) : /* @__PURE__ */ jsx3(UnlockIcon, {}), label: node.locked ? "Unlock layer" : "Lock layer", active: node.locked, onClick: () => controller.toggleProp("locked", row.id) }) : null,
-        columns.includes("solo") && node.solo !== void 0 ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "S", label: "Solo", on: !!node.solo, onChange: () => controller.toggleProp("solo", row.id) }) : null,
-        columns.includes("mute") && node.muted !== void 0 ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "M", label: "Mute", on: !!node.muted, onChange: () => controller.toggleProp("muted", row.id) }) : null,
-        columns.includes("arm") && node.armed !== void 0 ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "R", label: "Arm", on: !!node.armed, onChange: () => controller.toggleProp("armed", row.id) }) : null,
-        columns.includes("colorLabel") && node.colorLabel !== void 0 ? /* @__PURE__ */ jsx3(ColorTag, { color: node.colorLabel }) : null
+        row.showVisibility ? /* @__PURE__ */ jsx3(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx3(VisibilityIcon, { open: row.visible }), label: row.visibilityLabel, active: row.visible, onClick: () => ui4({ kind: "toggleProp", id: row.id, prop: "visible" }) }) : null,
+        row.showLock ? /* @__PURE__ */ jsx3(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx3(LockStateIcon, { locked: row.locked }), label: row.lockLabel, active: row.locked, onClick: () => ui4({ kind: "toggleProp", id: row.id, prop: "locked" }) }) : null,
+        row.showSolo ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "S", label: "Solo", on: row.solo, onChange: () => ui4({ kind: "toggleProp", id: row.id, prop: "solo" }) }) : null,
+        row.showMute ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "M", label: "Mute", on: row.muted, onChange: () => ui4({ kind: "toggleProp", id: row.id, prop: "muted" }) }) : null,
+        row.showArm ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "R", label: "Arm", on: row.armed, onChange: () => ui4({ kind: "toggleProp", id: row.id, prop: "armed" }) }) : null,
+        row.showColor ? /* @__PURE__ */ jsx3(ColorTag, { color: row.colorLabel }) : null
       ] }),
-      label: renaming ? /* @__PURE__ */ jsx3(
-        Input,
-        {
-          autoFocus: true,
-          value: props.renameDraft,
-          onChange: (v) => props.onRenameDraft(v),
-          onBlur: () => controller.commitRename(props.renameDraft),
-          onKeyDown: (e) => {
-            e.stopPropagation();
-            if (e.key === "Enter") controller.commitRename(props.renameDraft);
-            if (e.key === "Escape") controller.cancelRename();
-          },
-          label: "Layer name"
-        }
-      ) : node.name,
+      label: row.renaming ? /* @__PURE__ */ jsx3(LayersRenameField, { id: row.id, controller }) : row.name,
       trailing: /* @__PURE__ */ jsxs2(Fragment, { children: [
-        node.adornments?.map((a, i) => /* @__PURE__ */ jsx3(Badge, { size: "sm", title: a.tooltip, children: a.kind === "spinner" ? "\u2026" : a.label ?? "" }, a.id ?? `${a.kind}-${i}`)),
-        columns.includes("opacity") && node.opacity !== void 0 ? /* @__PURE__ */ jsxs2(Text, { role: "number", children: [
-          Math.round(node.opacity * 100),
-          "%"
-        ] }) : null
+        row.adornments.map((a) => /* @__PURE__ */ jsx3(Badge, { size: "sm", title: a.title, children: a.text }, a.key)),
+        row.showOpacity ? /* @__PURE__ */ jsx3(Text, { role: "number", children: row.opacity }) : null
       ] }),
-      onPointerDown: (e) => props.onPointerDown(e, row),
-      onPointerMove: props.onPointerMove,
-      onPointerUp: props.onPointerUp,
-      onDoubleClick: () => controller.beginRename(row.id),
-      onContextMenu: (e) => {
-        e.preventDefault();
-        controller.requestContextMenu(row.id, e.clientX, e.clientY);
-      },
-      title: node.name
+      onExpandedChange: () => ui4({ kind: "toggleExpanded", id: row.id }),
+      onDoubleClick: () => ui4({ kind: "beginRename", id: row.id }),
+      onContextMenuAt: (x, y) => ui4({ kind: "contextMenu", id: row.id, x, y })
     }
   );
 }
+function layersRuntimeComponents(controller) {
+  return {
+    "layers/Scroller": ({ children }) => /* @__PURE__ */ jsx3(LayersScroller, { controller, children }),
+    "layers/RenameField": ({ id }) => /* @__PURE__ */ jsx3(LayersRenameField, { id, controller }),
+    "layers/Thumbnail": ({ thumbnailKey, size }) => /* @__PURE__ */ jsx3(LayersThumbnail, { thumbnailKey, size, controller }),
+    "layers/KindGlyph": KindGlyph,
+    "layers/VisibilityIcon": VisibilityIcon,
+    "layers/LockStateIcon": LockStateIcon
+  };
+}
 
 // src/edit/layers/panel.ts
 function createLayersPanel(options = {}) {
   return {
     manifest: layersManifest,
     activate(host) {
-      const controller = new LayersPanelController(host, options);
+      const { render: customRender, ...controllerOptions } = options;
+      const controller = new LayersPanelController(host, controllerOptions);
       void controller.load();
       let root = null;
+      let unrender = null;
       return {
         render(el) {
+          if (customRender) {
+            unrender = customRender(el, controller);
+            return () => {
+              unrender?.();
+              unrender = null;
+            };
+          }
           root = createRoot(el);
           root.render(createElement(LayersPanelView, { controller }));
           return () => {
@@ -1535,6 +1713,8 @@ function createLayersPanel(options = {}) {
         dispose() {
           root?.unmount();
           root = null;
+          unrender?.();
+          unrender = null;
           controller.dispose();
         }
       };
@@ -1871,8 +2051,8 @@ function constraintsOf(field) {
     scale: field.scale
   };
 }
-function parseNumeric(text2) {
-  const trimmed = String(text2).trim();
+function parseNumeric(text4) {
+  const trimmed = String(text4).trim();
   if (trimmed.length === 0) return { ok: false, reason: "empty" };
   const match = /^[+-]?(\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/.exec(trimmed);
   if (!match) return { ok: false, reason: "nan" };
@@ -1897,8 +2077,8 @@ function normalizeNumeric(value, c) {
 function formatNumeric(value, field) {
   if (!Number.isFinite(value)) return "";
   const precision = field.precision;
-  const text2 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
-  return field.unit ? `${text2}${field.unit}` : text2;
+  const text4 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
+  return field.unit ? `${text4}${field.unit}` : text4;
 }
 function usesLogScale(c) {
   return c.scale === "log" && typeof c.min === "number" && typeof c.max === "number" && c.min > 0 && c.max > c.min;
@@ -2232,44 +2412,44 @@ var InspectorPanelController = class {
     if (!field || !isFieldEditable(field)) return;
     const mixed = isFieldMixed(field);
     const value = this.getFieldValue(fieldId);
-    const text2 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
-    this.drafts.set(fieldId, { text: text2, original: value });
+    const text4 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
+    this.drafts.set(fieldId, { text: text4, original: value });
     this.focusedFieldId = fieldId;
     this.emitFieldFocus(fieldId);
     this.notify();
   }
   /** Update the draft text (typing). Emits nothing under the `blur` policy. */
-  setDraft(fieldId, text2) {
+  setDraft(fieldId, text4) {
     const draft = this.drafts.get(fieldId);
     if (!draft) {
-      this.drafts.set(fieldId, { text: text2, original: this.getFieldValue(fieldId) });
+      this.drafts.set(fieldId, { text: text4, original: this.getFieldValue(fieldId) });
     } else {
-      draft.text = text2;
+      draft.text = text4;
     }
     const field = this.getField(fieldId);
     if (field && commitPolicyOf(field) === "live") {
-      const parsed = this.parseDraft(fieldId, text2);
+      const parsed = this.parseDraft(fieldId, text4);
       if (parsed.ok) this.emitSet(fieldId, parsed.value);
     }
     this.notify();
   }
   /** Parse a draft string into a field-appropriate value. */
-  parseDraft(fieldId, text2) {
+  parseDraft(fieldId, text4) {
     const field = this.getField(fieldId);
     if (!field) return { ok: false };
     if (field.type === "number") {
-      const parsed = parseNumeric(text2);
+      const parsed = parseNumeric(text4);
       if (!parsed.ok) return { ok: false };
       return { ok: true, value: normalizeNumeric(parsed.value, constraintsOf(field)) };
     }
     if (field.type === "json") {
       try {
-        return { ok: true, value: JSON.parse(text2) };
+        return { ok: true, value: JSON.parse(text4) };
       } catch {
         return { ok: false };
       }
     }
-    return { ok: true, value: text2 };
+    return { ok: true, value: text4 };
   }
   /**
    * Commit the draft (Enter / blur). Invalid input reverts instead of committing garbage.
@@ -2938,12 +3118,12 @@ var inspectorViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, sectionId?, fieldId?, \u2026 } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-var EMPTY = { searchShown: true, filter: "", hasTarget: false, targetLabel: "", multi: false, banner: "", sections: [], empty: true, emptyTitle: "Nothing selected" };
-var BEHAVIOURS = {
-  "edit/inspectorPanelView": (inputs) => inputs.view ?? EMPTY
+var EMPTY2 = { searchShown: true, filter: "", hasTarget: false, targetLabel: "", multi: false, banner: "", sections: [], empty: true, emptyTitle: "Nothing selected" };
+var BEHAVIOURS2 = {
+  "edit/inspectorPanelView": (inputs) => inputs.view ?? EMPTY2
 };
-var text = (b) => ({ component: "text", props: { text: b } });
-var ui = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var text2 = (b) => ({ component: "text", props: { text: b } });
+var ui2 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
 var iconButton = (glyph, label, emit, extra = {}) => ({
   component: "chrome/IconButton",
   ...extra.when ? { when: extra.when } : {},
@@ -2963,11 +3143,11 @@ var INSPECTOR_DECLARATION = {
         when: { input: "view.searchShown" },
         props: { direction: { value: "row" }, gap: { value: 6 } },
         children: [
-          { component: "chrome/SearchField", props: { value: { input: "view.filter" }, placeholder: { value: "Search properties" }, label: { value: "Search properties" } }, on: { onChange: ui("filter", { value: { arg: "" } }) } },
-          { component: "chrome/Badge", when: { input: "view.hasTarget" }, children: [text({ input: "view.targetLabel" })] }
+          { component: "chrome/SearchField", props: { value: { input: "view.filter" }, placeholder: { value: "Search properties" }, label: { value: "Search properties" } }, on: { onChange: ui2("filter", { value: { arg: "" } }) } },
+          { component: "chrome/Badge", when: { input: "view.hasTarget" }, children: [text2({ input: "view.targetLabel" })] }
         ]
       },
-      { component: "chrome/Stack", when: { input: "view.multi" }, props: { pad: { value: "inset" } }, children: [{ component: "chrome/Text", props: { role: { value: "caption" } }, children: [text({ input: "view.banner" })] }] },
+      { component: "chrome/Stack", when: { input: "view.multi" }, props: { pad: { value: "inset" } }, children: [{ component: "chrome/Text", props: { role: { value: "caption" } }, children: [text2({ input: "view.banner" })] }] },
       {
         component: "chrome/ScrollArea",
         children: [
@@ -2983,7 +3163,7 @@ var INSPECTOR_DECLARATION = {
                   collapsible: { item: "collapsible" },
                   collapsed: { item: "collapsed" },
                   enabled: { item: "enabled" },
-                  badge: { node: { component: "chrome/Badge", when: { item: "badge" }, children: [text({ item: "badge" })] } },
+                  badge: { node: { component: "chrome/Badge", when: { item: "badge" }, children: [text2({ item: "badge" })] } },
                   actions: {
                     node: {
                       component: "fragment",
@@ -2993,24 +3173,24 @@ var INSPECTOR_DECLARATION = {
                           component: "chrome/IconButton",
                           each: { item: "actions", key: "id" },
                           props: { size: { value: "sm" }, icon: { node: { component: "inspector/ActionGlyph", props: { glyph: { item: "glyph" } } } }, label: { item: "label" }, disabled: { item: "disabled" } },
-                          on: { onClick: ui("runAction", { sectionId: { item: "sectionId" }, actionId: { item: "id" } }) }
+                          on: { onClick: ui2("runAction", { sectionId: { item: "sectionId" }, actionId: { item: "id" } }) }
                         },
                         {
                           component: "chrome/Select",
                           when: { item: "hasAddMenu" },
                           props: { size: { value: "sm" }, placeholder: { value: "\uFF0B" }, options: { item: "addOptions" }, value: { value: "" }, label: { item: "addLabel" } },
-                          on: { onChange: ui("addItem", { sectionId: { item: "id" }, itemId: { arg: "" } }) }
+                          on: { onChange: ui2("addItem", { sectionId: { item: "id" }, itemId: { arg: "" } }) }
                         }
                       ]
                     }
                   }
                 },
                 on: {
-                  onCollapsedChange: ui("toggleSectionCollapsed", { sectionId: { item: "id" } }),
-                  onEnabledChange: ui("toggleSectionEnabled", { sectionId: { item: "id" } })
+                  onCollapsedChange: ui2("toggleSectionCollapsed", { sectionId: { item: "id" } }),
+                  onEnabledChange: ui2("toggleSectionEnabled", { sectionId: { item: "id" } })
                 },
                 children: [
-                  { component: "chrome/Stack", when: { item: "showEmptyHint" }, props: { pad: { value: "inset" } }, children: [{ component: "chrome/Text", props: { role: { value: "caption" } }, children: [text({ item: "emptyHint" })] }] },
+                  { component: "chrome/Stack", when: { item: "showEmptyHint" }, props: { pad: { value: "inset" } }, children: [{ component: "chrome/Text", props: { role: { value: "caption" } }, children: [text2({ item: "emptyHint" })] }] },
                   {
                     component: "chrome/FieldGroup",
                     props: { labelWidth: { item: "labelWidth" } },
@@ -3030,10 +3210,10 @@ var INSPECTOR_DECLARATION = {
                                   component: "fragment",
                                   when: { item: "showKeyframes" },
                                   children: [
-                                    iconButton("StopwatchIcon", { value: "Toggle animation" }, ui("keyframe", { fieldId: { item: "id" }, op: { value: "toggleAnim" } }), { props: { active: { item: "animated" } } }),
-                                    iconButton("PrevIcon", { value: "Previous keyframe" }, ui("keyframe", { fieldId: { item: "id" }, op: { value: "prev" } }), { when: { item: "animated" }, props: { disabled: { item: "prevDisabled" } } }),
-                                    { component: "chrome/IconButton", when: { item: "animated" }, props: { size: { value: "sm" }, icon: { node: { component: "inspector/DiamondIcon", props: { filled: { item: "onKeyframe" } } } }, label: { item: "keyframeLabel" } }, on: { onClick: ui("keyframe", { fieldId: { item: "id" }, op: { item: "keyframeOp" } }) } },
-                                    iconButton("NextIcon", { value: "Next keyframe" }, ui("keyframe", { fieldId: { item: "id" }, op: { value: "next" } }), { when: { item: "animated" }, props: { disabled: { item: "nextDisabled" } } })
+                                    iconButton("StopwatchIcon", { value: "Toggle animation" }, ui2("keyframe", { fieldId: { item: "id" }, op: { value: "toggleAnim" } }), { props: { active: { item: "animated" } } }),
+                                    iconButton("PrevIcon", { value: "Previous keyframe" }, ui2("keyframe", { fieldId: { item: "id" }, op: { value: "prev" } }), { when: { item: "animated" }, props: { disabled: { item: "prevDisabled" } } }),
+                                    { component: "chrome/IconButton", when: { item: "animated" }, props: { size: { value: "sm" }, icon: { node: { component: "inspector/DiamondIcon", props: { filled: { item: "onKeyframe" } } } }, label: { item: "keyframeLabel" } }, on: { onClick: ui2("keyframe", { fieldId: { item: "id" }, op: { item: "keyframeOp" } }) } },
+                                    iconButton("NextIcon", { value: "Next keyframe" }, ui2("keyframe", { fieldId: { item: "id" }, op: { value: "next" } }), { when: { item: "animated" }, props: { disabled: { item: "nextDisabled" } } })
                                   ]
                                 }
                               },
@@ -3041,24 +3221,24 @@ var INSPECTOR_DECLARATION = {
                                 node: {
                                   component: "fragment",
                                   children: [
-                                    { component: "chrome/Select", when: { item: "showEasing" }, props: { size: { value: "sm" }, options: { item: "easingOptions" }, value: { item: "easing" }, label: { value: "Easing" } }, on: { onChange: ui("setEasing", { fieldId: { item: "id" }, easing: { arg: "" } }) } },
-                                    { component: "chrome/Badge", when: { item: "showKeyframes" }, props: { size: { value: "sm" } }, children: [text({ item: "keyframeChip" })] },
-                                    iconButton("LinkIcon", { item: "tokenActionLabel" }, ui("bindToken", { fieldId: { item: "id" } }), { when: { item: "showToken" }, props: { active: { item: "bound" } } }),
-                                    iconButton("ResetIcon", { value: "Reset to default" }, ui("resetField", { fieldId: { item: "id" } }), { when: { item: "showReset" } })
+                                    { component: "chrome/Select", when: { item: "showEasing" }, props: { size: { value: "sm" }, options: { item: "easingOptions" }, value: { item: "easing" }, label: { value: "Easing" } }, on: { onChange: ui2("setEasing", { fieldId: { item: "id" }, easing: { arg: "" } }) } },
+                                    { component: "chrome/Badge", when: { item: "showKeyframes" }, props: { size: { value: "sm" } }, children: [text2({ item: "keyframeChip" })] },
+                                    iconButton("LinkIcon", { item: "tokenActionLabel" }, ui2("bindToken", { fieldId: { item: "id" } }), { when: { item: "showToken" }, props: { active: { item: "bound" } } }),
+                                    iconButton("ResetIcon", { value: "Reset to default" }, ui2("resetField", { fieldId: { item: "id" } }), { when: { item: "showReset" } })
                                   ]
                                 }
                               }
                             },
                             on: {
-                              onLabelClick: ui("focusField", { fieldId: { item: "id" } }),
-                              onContextMenu: ui("contextMenu", { fieldId: { item: "id" }, x: { arg: "" }, y: { arg: "", index: 1 } })
+                              onLabelClick: ui2("focusField", { fieldId: { item: "id" } }),
+                              onContextMenu: ui2("contextMenu", { fieldId: { item: "id" }, x: { arg: "" }, y: { arg: "", index: 1 } })
                             },
                             children: [
-                              { component: "chrome/Badge", when: { item: "bound" }, props: { title: { item: "tokenTitle" } }, children: [text({ item: "tokenLabel" })] },
+                              { component: "chrome/Badge", when: { item: "bound" }, props: { title: { item: "tokenTitle" } }, children: [text2({ item: "tokenLabel" })] },
                               { component: "inspector/FieldWidget", when: { item: "unbound" }, props: { field: { item: "field" } } }
                             ]
                           },
-                          { component: "chrome/Stack", when: { item: "showInfoNote" }, props: { pad: { value: "inset" } }, children: [{ component: "chrome/Text", props: { role: { value: "caption" } }, children: [text({ item: "infoNote" })] }] }
+                          { component: "chrome/Stack", when: { item: "showInfoNote" }, props: { pad: { value: "inset" } }, children: [{ component: "chrome/Text", props: { role: { value: "caption" } }, children: [text2({ item: "infoNote" })] }] }
                         ]
                       }
                     ]
@@ -3244,7 +3424,7 @@ function NumberWidget({ field, controller, component }) {
     },
     [controller, editable, field.id, component]
   );
-  const text2 = component !== void 0 ? (() => {
+  const text4 = component !== void 0 ? (() => {
     const raw = controller.getFieldValue(field.id);
     const v = Array.isArray(raw) ? raw[component] : void 0;
     return typeof v === "number" ? formatNumeric(v, field) : "";
@@ -3256,7 +3436,7 @@ function NumberWidget({ field, controller, component }) {
       Input2,
       {
         inputMode: "decimal",
-        value: text2,
+        value: text4,
         placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder,
         mixed,
         readOnly: !editable,
@@ -3277,16 +3457,16 @@ function VectorWidget({ field, controller }) {
   const expanded = controller.isExpanded(field.id) || !controller.isUniformVector(field.id);
   const value = controller.getFieldValue(field.id);
   const count = Array.isArray(value) ? value.length : field.components?.length ?? 0;
-  const toggle = (label, title) => /* @__PURE__ */ jsx5(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "\u22EF" }), label, onClick: () => controller.toggleExpanded(field.id) });
+  const toggle2 = (label, title) => /* @__PURE__ */ jsx5(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "\u22EF" }), label, onClick: () => controller.toggleExpanded(field.id) });
   if (!expanded && field.expandable) {
     return /* @__PURE__ */ jsxs4(Stack, { direction: "row", gap: 3, pad: "none", children: [
       /* @__PURE__ */ jsx5(NumberWidget, { field, controller, component: 0 }),
-      toggle("Expand", "Edit each axis separately")
+      toggle2("Expand", "Edit each axis separately")
     ] });
   }
   return /* @__PURE__ */ jsxs4(Stack, { direction: "row", gap: 3, pad: "none", children: [
     Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx5(NumberWidget, { field, controller, component: i }, i)),
-    field.expandable && controller.isUniformVector(field.id) ? toggle("Collapse", "Link axes") : null
+    field.expandable && controller.isUniformVector(field.id) ? toggle2("Collapse", "Link axes") : null
   ] });
 }
 function TextWidget({ field, controller }) {
@@ -3474,7 +3654,7 @@ function ActionGlyph({ glyph }) {
   return /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: glyph });
 }
 function SectionView({ section, controller }) {
-  const ui2 = (intent) => applyInspectorUi(controller, intent);
+  const ui4 = (intent) => applyInspectorUi(controller, intent);
   const hasActions = section.actions.length > 0 || section.hasAddMenu;
   return /* @__PURE__ */ jsxs5(
     Section,
@@ -3483,13 +3663,13 @@ function SectionView({ section, controller }) {
       flush: true,
       collapsible: section.collapsible,
       collapsed: section.collapsed,
-      onCollapsedChange: () => ui2({ kind: "toggleSectionCollapsed", sectionId: section.id }),
+      onCollapsedChange: () => ui4({ kind: "toggleSectionCollapsed", sectionId: section.id }),
       enabled: section.enabled,
-      onEnabledChange: () => ui2({ kind: "toggleSectionEnabled", sectionId: section.id }),
+      onEnabledChange: () => ui4({ kind: "toggleSectionEnabled", sectionId: section.id }),
       badge: section.badge ? /* @__PURE__ */ jsx6(Badge2, { children: section.badge }) : null,
       actions: hasActions ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        section.actions.map((action) => /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ActionGlyph, { glyph: action.glyph }), label: action.label, disabled: action.disabled, onClick: () => ui2({ kind: "runAction", sectionId: section.id, actionId: action.id }) }, action.id)),
-        section.hasAddMenu ? /* @__PURE__ */ jsx6(Select2, { size: "sm", placeholder: "\uFF0B", options: section.addOptions, value: "", label: section.addLabel, onChange: (id) => ui2({ kind: "addItem", sectionId: section.id, itemId: id }) }) : null
+        section.actions.map((action) => /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ActionGlyph, { glyph: action.glyph }), label: action.label, disabled: action.disabled, onClick: () => ui4({ kind: "runAction", sectionId: section.id, actionId: action.id }) }, action.id)),
+        section.hasAddMenu ? /* @__PURE__ */ jsx6(Select2, { size: "sm", placeholder: "\uFF0B", options: section.addOptions, value: "", label: section.addLabel, onChange: (id) => ui4({ kind: "addItem", sectionId: section.id, itemId: id }) }) : null
       ] }) : null,
       children: [
         section.showEmptyHint ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: section.emptyHint }) }) : null,
@@ -3499,7 +3679,7 @@ function SectionView({ section, controller }) {
   );
 }
 function FieldRow({ row, controller }) {
-  const ui2 = (intent) => applyInspectorUi(controller, intent);
+  const ui4 = (intent) => applyInspectorUi(controller, intent);
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsxs5(
       Field,
@@ -3507,19 +3687,19 @@ function FieldRow({ row, controller }) {
         label: row.label,
         title: row.title,
         focused: row.focused,
-        onLabelClick: () => ui2({ kind: "focusField", fieldId: row.id }),
-        onContextMenu: (x, y) => ui2({ kind: "contextMenu", fieldId: row.id, x, y }),
+        onLabelClick: () => ui4({ kind: "focusField", fieldId: row.id }),
+        onContextMenu: (x, y) => ui4({ kind: "contextMenu", fieldId: row.id, x, y }),
         leading: row.showKeyframes ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(StopwatchIcon, {}), label: "Toggle animation", active: row.animated, onClick: () => ui2({ kind: "keyframe", fieldId: row.id, op: "toggleAnim" }) }),
-          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(PrevIcon, {}), label: "Previous keyframe", disabled: row.prevDisabled, onClick: () => ui2({ kind: "keyframe", fieldId: row.id, op: "prev" }) }) : null,
-          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(DiamondIcon, { filled: row.onKeyframe }), label: row.keyframeLabel, onClick: () => ui2({ kind: "keyframe", fieldId: row.id, op: row.keyframeOp }) }) : null,
-          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(NextIcon, {}), label: "Next keyframe", disabled: row.nextDisabled, onClick: () => ui2({ kind: "keyframe", fieldId: row.id, op: "next" }) }) : null
+          /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(StopwatchIcon, {}), label: "Toggle animation", active: row.animated, onClick: () => ui4({ kind: "keyframe", fieldId: row.id, op: "toggleAnim" }) }),
+          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(PrevIcon, {}), label: "Previous keyframe", disabled: row.prevDisabled, onClick: () => ui4({ kind: "keyframe", fieldId: row.id, op: "prev" }) }) : null,
+          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(DiamondIcon, { filled: row.onKeyframe }), label: row.keyframeLabel, onClick: () => ui4({ kind: "keyframe", fieldId: row.id, op: row.keyframeOp }) }) : null,
+          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(NextIcon, {}), label: "Next keyframe", disabled: row.nextDisabled, onClick: () => ui4({ kind: "keyframe", fieldId: row.id, op: "next" }) }) : null
         ] }) : null,
         trailing: /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          row.showEasing ? /* @__PURE__ */ jsx6(Select2, { size: "sm", options: row.easingOptions, value: row.easing, label: "Easing", onChange: (v) => ui2({ kind: "setEasing", fieldId: row.id, easing: v }) }) : null,
+          row.showEasing ? /* @__PURE__ */ jsx6(Select2, { size: "sm", options: row.easingOptions, value: row.easing, label: "Easing", onChange: (v) => ui4({ kind: "setEasing", fieldId: row.id, easing: v }) }) : null,
           row.showKeyframes ? /* @__PURE__ */ jsx6(Badge2, { size: "sm", children: row.keyframeChip }) : null,
-          row.showToken ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(LinkIcon, {}), label: row.tokenActionLabel, active: row.bound, onClick: () => ui2({ kind: "bindToken", fieldId: row.id }) }) : null,
-          row.showReset ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ResetIcon, {}), label: "Reset to default", onClick: () => ui2({ kind: "resetField", fieldId: row.id }) }) : null
+          row.showToken ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(LinkIcon, {}), label: row.tokenActionLabel, active: row.bound, onClick: () => ui4({ kind: "bindToken", fieldId: row.id }) }) : null,
+          row.showReset ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ResetIcon, {}), label: "Reset to default", onClick: () => ui4({ kind: "resetField", fieldId: row.id }) }) : null
         ] }),
         children: [
           row.bound ? /* @__PURE__ */ jsx6(Badge2, { title: row.tokenTitle, children: row.tokenLabel }) : null,
@@ -4539,6 +4719,231 @@ var HistoryPanelController = class {
 
 // src/edit/history/react/HistoryPanelView.tsx
 import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4, useSyncExternalStore as useSyncExternalStore3 } from "react";
+
+// src/edit/history/react/format.ts
+function formatTime(at) {
+  const date = typeof at === "number" ? new Date(at) : new Date(at);
+  if (Number.isNaN(date.getTime())) return typeof at === "string" ? at : "";
+  return date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+}
+
+// src/edit/history/declaration.ts
+function historyViewState(c) {
+  const rows = c.getRows();
+  const window_ = c.getWindow();
+  const rowHeight = c.getRowHeight();
+  const memory = c.getMemory();
+  const focused = c.getFocused();
+  const showIcons = c.areIconsShown();
+  const showSource = c.isSourceShown();
+  const showTime = c.areTimestampsShown();
+  const jumpAllowed = c.isJumpAllowed();
+  return {
+    canUndo: c.canUndo(),
+    canRedo: c.canRedo(),
+    cannotUndo: !c.canUndo(),
+    cannotRedo: !c.canRedo(),
+    searchShown: c.isSearchShown(),
+    filter: c.getFilter(),
+    counter: `${c.getAppliedCount()} / ${c.getTotalCount()}`,
+    clearAllowed: c.isClearAllowed(),
+    confirmingClear: c.isConfirmingClear(),
+    pruned: c.isPruned(),
+    totalHeight: window_.totalHeight,
+    offsetTop: window_.offsetTop,
+    rows: c.getWindowRows().map((row) => {
+      const entry = row.entry;
+      const pending = entry?.status === "pending";
+      const source = entry?.source;
+      return {
+        key: row.entryId ?? "__original__",
+        entryId: row.entryId,
+        label: row.label,
+        meta: row.kind === "entry" ? row.ordinal : void 0,
+        current: row.current,
+        future: row.future,
+        focused: focused === row.entryId,
+        jumpable: jumpAllowed && entry?.caps?.jumpable !== false,
+        showIcon: showIcons,
+        hideIcon: !showIcons,
+        iconName: row.kind === "original" ? "original" : c.getIconName(entry?.kind),
+        pending,
+        failed: entry?.status === "failed",
+        showSource: showSource && !!source && source !== "user",
+        sourceGlyph: source === "agent" ? "AI" : "S",
+        sourceTitle: `Source: ${source ?? ""}`,
+        showCoalesced: !!entry?.coalesced && entry.coalesced > 1,
+        coalescedText: `\xD7${entry?.coalesced ?? 0}`,
+        coalescedTitle: `${entry?.coalesced ?? 0} actions coalesced`,
+        showTime: showTime && entry?.at !== void 0,
+        time: entry?.at !== void 0 ? formatTime(entry.at) : "",
+        height: rowHeight,
+        cancelId: pending ? entry?.id : void 0
+      };
+    }),
+    empty: rows.length === 0,
+    hasMemory: !!memory,
+    memoryText: memory ? `${memory.usedMB.toFixed(1)} MB${memory.limitMB ? ` / ${memory.limitMB} MB` : ""}` : "",
+    memoryDisk: memory?.onDiskCount !== void 0 ? `${memory.onDiskCount} on disk` : void 0
+  };
+}
+function applyHistoryUi(c, intent) {
+  switch (intent.kind) {
+    case "undo":
+      c.undo();
+      break;
+    case "redo":
+      c.redo();
+      break;
+    case "filter":
+      c.setFilter(intent.value);
+      break;
+    case "requestClear":
+      c.requestClear();
+      break;
+    case "confirmClear":
+      c.confirmClearNow();
+      break;
+    case "cancelClear":
+      c.cancelClear();
+      break;
+    case "jump":
+      c.jumpTo(intent.entryId);
+      break;
+    case "hover":
+      c.setHovered(intent.entryId);
+      break;
+    case "contextMenu":
+      c.requestContextMenu(intent.entryId, intent.x, intent.y);
+      break;
+    case "cancelPending":
+      c.cancelPending(intent.entryId);
+      break;
+  }
+}
+var historyViewManifest = {
+  id: historyManifest.id,
+  version: "1.0.0",
+  title: "History",
+  category: "edit",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The HistoryViewState the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, entryId?, value?, x?, y? } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY3 = { canUndo: false, canRedo: false, cannotUndo: true, cannotRedo: true, searchShown: true, filter: "", counter: "0 / 0", clearAllowed: false, confirmingClear: false, pruned: false, totalHeight: 0, offsetTop: 0, rows: [], empty: true, hasMemory: false, memoryText: "" };
+var BEHAVIOURS3 = {
+  "edit/historyPanelView": (inputs) => inputs.view ?? EMPTY3
+};
+var text3 = (b) => ({ component: "text", props: { text: b } });
+var ui3 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var HISTORY_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: historyViewManifest,
+  behaviour: "edit/historyPanelView",
+  composition: {
+    component: "chrome/Column",
+    props: { className: { value: "xeno-history-panel" } },
+    children: [
+      {
+        component: "chrome/Toolbar",
+        props: {
+          left: {
+            node: {
+              component: "fragment",
+              children: [
+                { component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "history/UndoIcon" } }, label: { value: "Undo" }, disabled: { input: "view.cannotUndo" } }, on: { onClick: ui3("undo") } },
+                { component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "history/RedoIcon" } }, label: { value: "Redo" }, disabled: { input: "view.cannotRedo" } }, on: { onClick: ui3("redo") } }
+              ]
+            }
+          },
+          right: {
+            node: {
+              component: "fragment",
+              children: [
+                { component: "chrome/Text", props: { role: { value: "number" } }, children: [text3({ input: "view.counter" })] },
+                { component: "chrome/IconButton", when: { input: "view.clearAllowed" }, props: { size: { value: "sm" }, icon: { node: { component: "history/TrashIcon" } }, label: { value: "Clear history" } }, on: { onClick: ui3("requestClear") } }
+              ]
+            }
+          }
+        },
+        children: [
+          { component: "chrome/SearchField", when: { input: "view.searchShown" }, props: { value: { input: "view.filter" }, placeholder: { value: "Search history" }, label: { value: "Search history" } }, on: { onChange: ui3("filter", { value: { arg: "" } }) } }
+        ]
+      },
+      {
+        component: "chrome/InlineConfirm",
+        when: { input: "view.confirmingClear" },
+        props: { message: { value: "Clear all history?" }, label: { value: "Confirm clear history" }, confirmLabel: { value: "Clear" } },
+        on: { onConfirm: ui3("confirmClear"), onCancel: ui3("cancelClear") }
+      },
+      { component: "chrome/Text", when: { input: "view.pruned" }, props: { role: { value: "caption" } }, children: [text3({ value: "Earlier history discarded (limit reached)" })] },
+      {
+        component: "history/Scroller",
+        children: [
+          {
+            component: "chrome/RowList",
+            props: { role: { value: "listbox" }, "aria-label": { value: "History" } },
+            children: [
+              {
+                component: "chrome/VirtualWindow",
+                props: { totalHeight: { input: "view.totalHeight" }, offsetTop: { input: "view.offsetTop" } },
+                children: [
+                  {
+                    component: "chrome/Row",
+                    each: { input: "view.rows", key: "key" },
+                    props: {
+                      height: { item: "height" },
+                      selected: { item: "current" },
+                      focused: { item: "focused" },
+                      struck: { item: "future" },
+                      noIcon: { item: "hideIcon" },
+                      interactive: { item: "jumpable" },
+                      icon: { node: { component: "history/EntryIcon", props: { name: { item: "iconName" } } } },
+                      label: { item: "label" },
+                      meta: { item: "meta" },
+                      "data-history-row": { item: "key" },
+                      title: { item: "label" },
+                      trailing: {
+                        node: {
+                          component: "fragment",
+                          children: [
+                            { component: "history/PendingGlyph", when: { item: "pending" } },
+                            { component: "chrome/Badge", when: { item: "failed" }, props: { size: { value: "sm" }, tone: { value: "error" } }, children: [text3({ value: "failed" })] },
+                            { component: "chrome/Badge", when: { item: "showSource" }, props: { size: { value: "sm" }, title: { item: "sourceTitle" } }, children: [text3({ item: "sourceGlyph" })] },
+                            { component: "chrome/Badge", when: { item: "showCoalesced" }, props: { size: { value: "sm" }, title: { item: "coalescedTitle" } }, children: [text3({ item: "coalescedText" })] },
+                            { component: "chrome/Text", when: { item: "showTime" }, props: { role: { value: "meta" } }, children: [text3({ item: "time" })] },
+                            { component: "history/CancelButton", when: { item: "pending" }, props: { entryId: { item: "cancelId" } } }
+                          ]
+                        }
+                      }
+                    },
+                    on: {
+                      onClick: ui3("jump", { entryId: { item: "entryId" } }),
+                      onMouseEnter: ui3("hover", { entryId: { item: "entryId" } }),
+                      onContextMenuAt: ui3("contextMenu", { entryId: { item: "entryId" }, x: { arg: "" }, y: { arg: "", index: 1 } })
+                    }
+                  }
+                ]
+              }
+            ]
+          },
+          { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { value: "No history" } } }
+        ]
+      },
+      {
+        component: "chrome/StatusBar",
+        when: { input: "view.hasMemory" },
+        props: {
+          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text3({ input: "view.memoryText" })] } },
+          right: { node: { component: "chrome/Text", when: { input: "view.memoryDisk" }, props: { role: { value: "meta" } }, children: [text3({ input: "view.memoryDisk" })] } }
+        }
+      }
+    ]
+  }
+};
+
+// src/edit/history/react/HistoryPanelView.tsx
 import { Badge as Badge3, Column as Column3, EmptyState as EmptyState3, IconButton as IconButton4, InlineConfirm, RowList as RowList2, Row as Row2, ScrollArea as ScrollArea3, SearchField as SearchField3, StatusBar as StatusBar2, Text as Text4, Toolbar as Toolbar2, VirtualWindow as VirtualWindow2 } from "@xenosystem/components/chrome";
 
 // src/edit/history/react/icons.tsx
@@ -4640,12 +5045,34 @@ function HistoryPanelView({ controller }) {
   const subscribe = useCallback4((cb) => controller.subscribe(cb), [controller]);
   const getSnapshot = useCallback4(() => controller.getRevision(), [controller]);
   useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
+  const view = historyViewState(controller);
+  const ui4 = (intent) => applyHistoryUi(controller, intent);
+  return /* @__PURE__ */ jsxs7(Column3, { className: "xeno-history-panel", children: [
+    /* @__PURE__ */ jsx8(
+      Toolbar2,
+      {
+        left: /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(UndoIcon, {}), label: "Undo", disabled: view.cannotUndo, onClick: () => ui4({ kind: "undo" }) }),
+          /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(RedoIcon, {}), label: "Redo", disabled: view.cannotRedo, onClick: () => ui4({ kind: "redo" }) })
+        ] }),
+        right: /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          /* @__PURE__ */ jsx8(Text4, { role: "number", children: view.counter }),
+          view.clearAllowed ? /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(TrashIcon, {}), label: "Clear history", onClick: () => ui4({ kind: "requestClear" }) }) : null
+        ] }),
+        children: view.searchShown ? /* @__PURE__ */ jsx8(SearchField3, { value: view.filter, onChange: (v) => ui4({ kind: "filter", value: v }), placeholder: "Search history", label: "Search history" }) : null
+      }
+    ),
+    view.confirmingClear ? /* @__PURE__ */ jsx8(InlineConfirm, { message: "Clear all history?", label: "Confirm clear history", confirmLabel: "Clear", onConfirm: () => ui4({ kind: "confirmClear" }), onCancel: () => ui4({ kind: "cancelClear" }) }) : null,
+    view.pruned ? /* @__PURE__ */ jsx8(Text4, { role: "caption", children: "Earlier history discarded (limit reached)" }) : null,
+    /* @__PURE__ */ jsxs7(HistoryScroller, { controller, children: [
+      /* @__PURE__ */ jsx8(RowList2, { role: "listbox", "aria-label": "History", children: /* @__PURE__ */ jsx8(VirtualWindow2, { totalHeight: view.totalHeight, offsetTop: view.offsetTop, children: view.rows.map((row) => /* @__PURE__ */ jsx8(HistoryRowView, { row, controller }, row.key)) }) }),
+      view.empty ? /* @__PURE__ */ jsx8(EmptyState3, { title: "No history" }) : null
+    ] }),
+    view.hasMemory ? /* @__PURE__ */ jsx8(StatusBar2, { left: /* @__PURE__ */ jsx8(Text4, { role: "number", children: view.memoryText }), right: view.memoryDisk ? /* @__PURE__ */ jsx8(Text4, { role: "meta", children: view.memoryDisk }) : null }) : null
+  ] });
+}
+function HistoryScroller({ controller, children }) {
   const scrollRef = useRef4(null);
-  const rows = controller.getRows();
-  const window_ = controller.getWindow();
-  const windowRows = controller.getWindowRows();
-  const rowHeight = controller.getRowHeight();
-  const memory = controller.getMemory();
   useEffect3(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -4665,18 +5092,10 @@ function HistoryPanelView({ controller }) {
       el.scrollTop = controller.getScrollTop();
     }
   });
-  const onScroll = useCallback4(
-    (e) => controller.setScrollTop(e.currentTarget.scrollTop),
-    [controller]
-  );
+  const onScroll = useCallback4((e) => controller.setScrollTop(e.currentTarget.scrollTop), [controller]);
   const onKeyDown = useCallback4(
     (e) => {
-      const handled = controller.handleKey({
-        key: e.key,
-        ctrl: e.ctrlKey,
-        meta: e.metaKey,
-        shift: e.shiftKey
-      });
+      const handled = controller.handleKey({ key: e.key, ctrl: e.ctrlKey, meta: e.metaKey, shift: e.shiftKey });
       if (handled) {
         e.preventDefault();
         e.stopPropagation();
@@ -4684,109 +5103,62 @@ function HistoryPanelView({ controller }) {
     },
     [controller]
   );
-  return /* @__PURE__ */ jsxs7(Column3, { className: "xeno-history-panel", children: [
-    /* @__PURE__ */ jsx8(
-      Toolbar2,
-      {
-        left: /* @__PURE__ */ jsxs7(Fragment4, { children: [
-          /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(UndoIcon, {}), label: "Undo", disabled: !controller.canUndo(), onClick: () => controller.undo() }),
-          /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(RedoIcon, {}), label: "Redo", disabled: !controller.canRedo(), onClick: () => controller.redo() })
-        ] }),
-        right: /* @__PURE__ */ jsxs7(Fragment4, { children: [
-          /* @__PURE__ */ jsxs7(Text4, { role: "number", children: [
-            controller.getAppliedCount(),
-            " / ",
-            controller.getTotalCount()
-          ] }),
-          controller.isClearAllowed() ? /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(TrashIcon, {}), label: "Clear history", onClick: () => controller.requestClear() }) : null
-        ] }),
-        children: controller.isSearchShown() ? /* @__PURE__ */ jsx8(SearchField3, { value: controller.getFilter(), onChange: (v) => controller.setFilter(v), placeholder: "Search history", label: "Search history" }) : null
-      }
-    ),
-    controller.isConfirmingClear() ? /* @__PURE__ */ jsx8(InlineConfirm, { message: "Clear all history?", label: "Confirm clear history", confirmLabel: "Clear", onConfirm: () => controller.confirmClearNow(), onCancel: () => controller.cancelClear() }) : null,
-    controller.isPruned() ? /* @__PURE__ */ jsx8(Text4, { role: "caption", children: "Earlier history discarded (limit reached)" }) : null,
-    /* @__PURE__ */ jsxs7(ScrollArea3, { ref: scrollRef, onScroll, onKeyDown, onMouseLeave: () => controller.setHovered(null), tabIndex: 0, children: [
-      /* @__PURE__ */ jsx8(RowList2, { role: "listbox", "aria-label": "History", children: /* @__PURE__ */ jsx8(VirtualWindow2, { totalHeight: window_.totalHeight, offsetTop: window_.offsetTop, children: windowRows.map((row) => /* @__PURE__ */ jsx8(
-        HistoryRowView,
-        {
-          row,
-          controller,
-          rowHeight,
-          focused: controller.getFocused() === row.entryId
-        },
-        row.entryId ?? "__original__"
-      )) }) }),
-      rows.length === 0 ? /* @__PURE__ */ jsx8(EmptyState3, { title: "No history" }) : null
-    ] }),
-    memory ? /* @__PURE__ */ jsx8(
-      StatusBar2,
-      {
-        left: /* @__PURE__ */ jsxs7(Text4, { role: "number", children: [
-          memory.usedMB.toFixed(1),
-          " MB",
-          memory.limitMB ? ` / ${memory.limitMB} MB` : ""
-        ] }),
-        right: memory.onDiskCount !== void 0 ? /* @__PURE__ */ jsxs7(Text4, { role: "meta", children: [
-          memory.onDiskCount,
-          " on disk"
-        ] }) : null
+  return /* @__PURE__ */ jsx8(ScrollArea3, { ref: scrollRef, onScroll, onKeyDown, onMouseLeave: () => controller.setHovered(null), tabIndex: 0, children });
+}
+function HistoryCancelButton({ entryId, controller }) {
+  return /* @__PURE__ */ jsx8(
+    IconButton4,
+    {
+      size: "sm",
+      icon: /* @__PURE__ */ jsx8(XIcon2, {}),
+      label: "Cancel operation",
+      onClick: (e) => {
+        e.stopPropagation();
+        controller.cancelPending(entryId);
       }
-    ) : null
-  ] });
+    }
+  );
 }
-function HistoryRowView({ row, controller, rowHeight, focused }) {
-  const entry = row.entry;
-  const pending = entry?.status === "pending";
-  const failed = entry?.status === "failed";
-  const jumpable = controller.isJumpAllowed() && entry?.caps?.jumpable !== false;
+function HistoryRowView({ row, controller }) {
+  const ui4 = (intent) => applyHistoryUi(controller, intent);
   return /* @__PURE__ */ jsx8(
     Row2,
     {
-      height: rowHeight,
+      height: row.height,
       selected: row.current,
-      focused,
+      focused: row.focused,
       struck: row.future,
-      noIcon: !controller.areIconsShown(),
-      icon: /* @__PURE__ */ jsx8(EntryIcon, { name: row.kind === "original" ? "original" : controller.getIconName(entry?.kind) }),
+      noIcon: row.hideIcon,
+      interactive: row.jumpable,
+      icon: /* @__PURE__ */ jsx8(EntryIcon, { name: row.iconName }),
       label: row.label,
-      meta: row.kind === "entry" ? row.ordinal : void 0,
-      "data-history-row": row.entryId ?? "__original__",
-      onClick: jumpable ? () => controller.jumpTo(row.entryId) : void 0,
-      onMouseEnter: () => controller.setHovered(row.entryId),
-      onContextMenu: (e) => {
-        e.preventDefault();
-        controller.requestContextMenu(row.entryId, e.clientX, e.clientY);
-      },
+      meta: row.meta,
+      "data-history-row": row.key,
       title: row.label,
       trailing: /* @__PURE__ */ jsxs7(Fragment4, { children: [
-        pending ? /* @__PURE__ */ jsx8(PendingGlyph, {}) : null,
-        failed ? /* @__PURE__ */ jsx8(Badge3, { size: "sm", tone: "error", children: "failed" }) : null,
-        controller.isSourceShown() && entry?.source && entry.source !== "user" ? /* @__PURE__ */ jsx8(Badge3, { size: "sm", title: `Source: ${entry.source}`, children: entry.source === "agent" ? "AI" : "S" }) : null,
-        entry?.coalesced && entry.coalesced > 1 ? /* @__PURE__ */ jsxs7(Badge3, { size: "sm", title: `${entry.coalesced} actions coalesced`, children: [
-          "\xD7",
-          entry.coalesced
-        ] }) : null,
-        controller.areTimestampsShown() && entry?.at !== void 0 ? /* @__PURE__ */ jsx8(Text4, { role: "meta", children: formatTime(entry.at) }) : null,
-        pending ? /* @__PURE__ */ jsx8(
-          IconButton4,
-          {
-            size: "sm",
-            icon: /* @__PURE__ */ jsx8(XIcon2, {}),
-            label: "Cancel operation",
-            onClick: (e) => {
-              e.stopPropagation();
-              controller.cancelPending(entry?.id);
-            }
-          }
-        ) : null
-      ] })
+        row.pending ? /* @__PURE__ */ jsx8(PendingGlyph, {}) : null,
+        row.failed ? /* @__PURE__ */ jsx8(Badge3, { size: "sm", tone: "error", children: "failed" }) : null,
+        row.showSource ? /* @__PURE__ */ jsx8(Badge3, { size: "sm", title: row.sourceTitle, children: row.sourceGlyph }) : null,
+        row.showCoalesced ? /* @__PURE__ */ jsx8(Badge3, { size: "sm", title: row.coalescedTitle, children: row.coalescedText }) : null,
+        row.showTime ? /* @__PURE__ */ jsx8(Text4, { role: "meta", children: row.time }) : null,
+        row.pending ? /* @__PURE__ */ jsx8(HistoryCancelButton, { entryId: row.cancelId, controller }) : null
+      ] }),
+      onClick: () => ui4({ kind: "jump", entryId: row.entryId }),
+      onMouseEnter: () => ui4({ kind: "hover", entryId: row.entryId }),
+      onContextMenuAt: (x, y) => ui4({ kind: "contextMenu", entryId: row.entryId, x, y })
     }
   );
 }
-function formatTime(at) {
-  const date = typeof at === "number" ? new Date(at) : new Date(at);
-  if (Number.isNaN(date.getTime())) return typeof at === "string" ? at : "";
-  return date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+function historyRuntimeComponents(controller) {
+  return {
+    "history/Scroller": ({ children }) => /* @__PURE__ */ jsx8(HistoryScroller, { controller, children }),
+    "history/CancelButton": ({ entryId }) => /* @__PURE__ */ jsx8(HistoryCancelButton, { entryId, controller }),
+    "history/EntryIcon": EntryIcon,
+    "history/PendingGlyph": PendingGlyph,
+    "history/UndoIcon": UndoIcon,
+    "history/RedoIcon": RedoIcon,
+    "history/TrashIcon": TrashIcon
+  };
 }
 
 // src/edit/history/panel.ts
@@ -4794,11 +5166,20 @@ function createHistoryPanel(options = {}) {
   return {
     manifest: historyManifest,
     activate(host) {
-      const controller = new HistoryPanelController(host, options);
+      const { render: customRender, ...controllerOptions } = options;
+      const controller = new HistoryPanelController(host, controllerOptions);
       void controller.load();
       let root = null;
+      let unrender = null;
       return {
         render(el) {
+          if (customRender) {
+            unrender = customRender(el, controller);
+            return () => {
+              unrender?.();
+              unrender = null;
+            };
+          }
           root = createRoot3(el);
           root.render(createElement3(HistoryPanelView, { controller }));
           return () => {
@@ -4821,6 +5202,8 @@ function createHistoryPanel(options = {}) {
         dispose() {
           root?.unmount();
           root = null;
+          unrender?.();
+          unrender = null;
           controller.dispose();
         }
       };
@@ -8598,11 +8981,11 @@ var FindController = class {
    * @param text - The new query text.
    * @param immediate - Skip the debounce (a paste, or pressing Enter).
    */
-  setText(text2, immediate = false) {
-    if (text2 === this.text) return;
-    this.text = text2;
+  setText(text4, immediate = false) {
+    if (text4 === this.text) return;
+    this.text = text4;
     this.index = -1;
-    if (text2 === "") {
+    if (text4 === "") {
       this.clearResults("idle");
       this.emitQuery(true);
       return;
@@ -8630,8 +9013,8 @@ var FindController = class {
     this.notify();
   }
   /** The replacement text. Never emitted on its own — a replacement is not a search. */
-  setReplaceText(text2) {
-    this.replaceText = text2;
+  setReplaceText(text4) {
+    this.replaceText = text4;
     this.notify();
   }
   /** Show or hide the replace row. */
@@ -12267,12 +12650,12 @@ var TreeController = class {
     }
     if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
       const fresh = now - this.typeAhead.at > this.typeAheadMs;
-      const text2 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
-      this.typeAhead = { text: text2, at: now };
+      const text4 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
+      this.typeAhead = { text: text4, at: now };
       const from = fresh ? current : current + 1;
       for (let i = 0; i < rows.length; i += 1) {
         const candidate = rows[(from + i) % rows.length];
-        if (candidate.node.label.toLowerCase().startsWith(text2)) {
+        if (candidate.node.label.toLowerCase().startsWith(text4)) {
           this.focusedId = candidate.id;
           this.select([candidate.id]);
           return true;
@@ -12298,9 +12681,9 @@ var TreeController = class {
     return true;
   }
   /** Update the rename draft. */
-  updateRenameDraft(text2) {
+  updateRenameDraft(text4) {
     if (!this.renaming) return;
-    this.renaming = { ...this.renaming, draft: text2 };
+    this.renaming = { ...this.renaming, draft: text4 };
     this.notify();
   }
   /**
@@ -13489,13 +13872,17 @@ export {
   FindPanelView,
   GENERIC_ICON,
   GraphController,
+  BEHAVIOURS3 as HISTORY_BEHAVIOURS,
+  HISTORY_DECLARATION,
   HistoryPanelController,
   HistoryPanelView,
   IMPLEMENTED_TREE_MODES,
-  BEHAVIOURS as INSPECTOR_BEHAVIOURS,
+  BEHAVIOURS2 as INSPECTOR_BEHAVIOURS,
   INSPECTOR_DECLARATION,
   InspectorPanelController,
   InspectorPanelView,
+  BEHAVIOURS as LAYERS_BEHAVIOURS,
+  LAYERS_DECLARATION,
   LAYER_COLUMNS,
   LayersPanelController,
   LayersPanelView,
@@ -13519,7 +13906,9 @@ export {
   allIds,
   anchorStateOf,
   appliedCount,
+  applyHistoryUi,
   applyInspectorUi,
+  applyLayersUi,
   applyPrecision,
   applyTangentDrag,
   ariaSliderProps,
@@ -13588,6 +13977,9 @@ export {
   highlightSegments,
   historyManifest,
   historyPanel,
+  historyRuntimeComponents,
+  historyViewManifest,
+  historyViewState,
   hslToRgb,
   hsvFromHex,
   hsvToRgb,
@@ -13616,6 +14008,9 @@ export {
   keyRefId,
   layersManifest,
   layersPanel,
+  layersRuntimeComponents,
+  layersViewManifest,
+  layersViewState,
   liveEdges,
   makeColorValue,
   matchesFilter,