@xenosystem/blocks 0.12.4 → 0.12.6

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;
@@ -882,15 +882,15 @@ var LayersPanelController = class {
   requestVisibleThumbnails() {
     if (!this.thumbnailsEnabled) return;
     if (!this.getColumns().includes("thumbnail")) return;
-    for (const row of this.getWindowRows()) {
-      const key = row.node.thumbnailKey;
+    for (const row2 of this.getWindowRows()) {
+      const key = row2.node.thumbnailKey;
       if (!key || this.thumbnails.has(key) || this.requestedThumbs.has(key)) continue;
       this.requestedThumbs.add(key);
       const request = {
         key,
         width: this.thumbnailSize,
         height: this.thumbnailSize,
-        nodeId: row.id
+        nodeId: row2.id
       };
       this.host.emit("thumbnailRequest", request);
     }
@@ -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((row2) => {
+      const node = row2.node;
+      const container = isContainer(node);
+      return {
+        id: row2.id,
+        name: node.name,
+        title: node.name,
+        depth: row2.depth,
+        height: rowHeight,
+        selected: c.isSelected(row2.id),
+        active: activeId === row2.id,
+        dimmed: !row2.matched,
+        dropHint: drag?.target && drag.target.targetId === row2.id ? drag.target.position : null,
+        expanded: container ? row2.expanded : void 0,
+        renaming: renamingId === row2.id,
+        notRenaming: renamingId !== row2.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 ui5 = (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) => ui5({ 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((row2) => /* @__PURE__ */ jsx3(LayerRow, { row: row2, thumbnailSize: view.thumbnailSize, controller }, row2.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: row2, thumbnailSize, controller }) {
+  const ui5 = (intent) => applyLayersUi(controller, intent);
   return /* @__PURE__ */ jsx3(
     Row,
     {
-      "data-layer-row": row.id,
-      height: rowHeight,
-      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, {}),
+      "data-layer-row": row2.id,
+      height: row2.height,
+      depth: row2.depth,
+      selected: row2.selected,
+      active: row2.active,
+      dimmed: row2.dimmed,
+      dropHint: row2.dropHint,
+      expanded: row2.expanded,
+      title: row2.title,
+      icon: row2.hasThumbnail ? /* @__PURE__ */ jsx3(LayersThumbnail, { thumbnailKey: row2.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
+        row2.showVisibility ? /* @__PURE__ */ jsx3(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx3(VisibilityIcon, { open: row2.visible }), label: row2.visibilityLabel, active: row2.visible, onClick: () => ui5({ kind: "toggleProp", id: row2.id, prop: "visible" }) }) : null,
+        row2.showLock ? /* @__PURE__ */ jsx3(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx3(LockStateIcon, { locked: row2.locked }), label: row2.lockLabel, active: row2.locked, onClick: () => ui5({ kind: "toggleProp", id: row2.id, prop: "locked" }) }) : null,
+        row2.showSolo ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "S", label: "Solo", on: row2.solo, onChange: () => ui5({ kind: "toggleProp", id: row2.id, prop: "solo" }) }) : null,
+        row2.showMute ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "M", label: "Mute", on: row2.muted, onChange: () => ui5({ kind: "toggleProp", id: row2.id, prop: "muted" }) }) : null,
+        row2.showArm ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "R", label: "Arm", on: row2.armed, onChange: () => ui5({ kind: "toggleProp", id: row2.id, prop: "armed" }) }) : null,
+        row2.showColor ? /* @__PURE__ */ jsx3(ColorTag, { color: row2.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: row2.renaming ? /* @__PURE__ */ jsx3(LayersRenameField, { id: row2.id, controller }) : row2.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
+        row2.adornments.map((a) => /* @__PURE__ */ jsx3(Badge, { size: "sm", title: a.title, children: a.text }, a.key)),
+        row2.showOpacity ? /* @__PURE__ */ jsx3(Text, { role: "number", children: row2.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: () => ui5({ kind: "toggleExpanded", id: row2.id }),
+      onDoubleClick: () => ui5({ kind: "beginRename", id: row2.id }),
+      onContextMenuAt: (x, y) => ui5({ kind: "contextMenu", id: row2.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(text3) {
-  const trimmed = String(text3).trim();
+function parseNumeric(text5) {
+  const trimmed = String(text5).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 text3 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
-  return field.unit ? `${text3}${field.unit}` : text3;
+  const text5 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
+  return field.unit ? `${text5}${field.unit}` : text5;
 }
 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 text3 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
-    this.drafts.set(fieldId, { text: text3, original: value });
+    const text5 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
+    this.drafts.set(fieldId, { text: text5, original: value });
     this.focusedFieldId = fieldId;
     this.emitFieldFocus(fieldId);
     this.notify();
   }
   /** Update the draft text (typing). Emits nothing under the `blur` policy. */
-  setDraft(fieldId, text3) {
+  setDraft(fieldId, text5) {
     const draft = this.drafts.get(fieldId);
     if (!draft) {
-      this.drafts.set(fieldId, { text: text3, original: this.getFieldValue(fieldId) });
+      this.drafts.set(fieldId, { text: text5, original: this.getFieldValue(fieldId) });
     } else {
-      draft.text = text3;
+      draft.text = text5;
     }
     const field = this.getField(fieldId);
     if (field && commitPolicyOf(field) === "live") {
-      const parsed = this.parseDraft(fieldId, text3);
+      const parsed = this.parseDraft(fieldId, text5);
       if (parsed.ok) this.emitSet(fieldId, parsed.value);
     }
     this.notify();
   }
   /** Parse a draft string into a field-appropriate value. */
-  parseDraft(fieldId, text3) {
+  parseDraft(fieldId, text5) {
     const field = this.getField(fieldId);
     if (!field) return { ok: false };
     if (field.type === "number") {
-      const parsed = parseNumeric(text3);
+      const parsed = parseNumeric(text5);
       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(text3) };
+        return { ok: true, value: JSON.parse(text5) };
       } catch {
         return { ok: false };
       }
     }
-    return { ok: true, value: text3 };
+    return { ok: true, value: text5 };
   }
   /**
    * 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 text3 = component !== void 0 ? (() => {
+  const text5 = 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: text3,
+        value: text5,
         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 ui3 = (intent) => applyInspectorUi(controller, intent);
+  const ui5 = (intent) => applyInspectorUi(controller, intent);
   const hasActions = section.actions.length > 0 || section.hasAddMenu;
   return /* @__PURE__ */ jsxs5(
     Section,
@@ -3483,51 +3663,51 @@ function SectionView({ section, controller }) {
       flush: true,
       collapsible: section.collapsible,
       collapsed: section.collapsed,
-      onCollapsedChange: () => ui3({ kind: "toggleSectionCollapsed", sectionId: section.id }),
+      onCollapsedChange: () => ui5({ kind: "toggleSectionCollapsed", sectionId: section.id }),
       enabled: section.enabled,
-      onEnabledChange: () => ui3({ kind: "toggleSectionEnabled", sectionId: section.id }),
+      onEnabledChange: () => ui5({ 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: () => ui3({ 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) => ui3({ 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: () => ui5({ 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) => ui5({ 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,
-        /* @__PURE__ */ jsx6(FieldGroup, { labelWidth: section.labelWidth, children: section.fields.map((row) => /* @__PURE__ */ jsx6(FieldRow, { row, controller }, row.id)) })
+        /* @__PURE__ */ jsx6(FieldGroup, { labelWidth: section.labelWidth, children: section.fields.map((row2) => /* @__PURE__ */ jsx6(FieldRow, { row: row2, controller }, row2.id)) })
       ]
     }
   );
 }
-function FieldRow({ row, controller }) {
-  const ui3 = (intent) => applyInspectorUi(controller, intent);
+function FieldRow({ row: row2, controller }) {
+  const ui5 = (intent) => applyInspectorUi(controller, intent);
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsxs5(
       Field,
       {
-        label: row.label,
-        title: row.title,
-        focused: row.focused,
-        onLabelClick: () => ui3({ kind: "focusField", fieldId: row.id }),
-        onContextMenu: (x, y) => ui3({ 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: () => ui3({ 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: () => ui3({ 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: () => ui3({ 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: () => ui3({ kind: "keyframe", fieldId: row.id, op: "next" }) }) : null
+        label: row2.label,
+        title: row2.title,
+        focused: row2.focused,
+        onLabelClick: () => ui5({ kind: "focusField", fieldId: row2.id }),
+        onContextMenu: (x, y) => ui5({ kind: "contextMenu", fieldId: row2.id, x, y }),
+        leading: row2.showKeyframes ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(StopwatchIcon, {}), label: "Toggle animation", active: row2.animated, onClick: () => ui5({ kind: "keyframe", fieldId: row2.id, op: "toggleAnim" }) }),
+          row2.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(PrevIcon, {}), label: "Previous keyframe", disabled: row2.prevDisabled, onClick: () => ui5({ kind: "keyframe", fieldId: row2.id, op: "prev" }) }) : null,
+          row2.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(DiamondIcon, { filled: row2.onKeyframe }), label: row2.keyframeLabel, onClick: () => ui5({ kind: "keyframe", fieldId: row2.id, op: row2.keyframeOp }) }) : null,
+          row2.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(NextIcon, {}), label: "Next keyframe", disabled: row2.nextDisabled, onClick: () => ui5({ kind: "keyframe", fieldId: row2.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) => ui3({ 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: () => ui3({ kind: "bindToken", fieldId: row.id }) }) : null,
-          row.showReset ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ResetIcon, {}), label: "Reset to default", onClick: () => ui3({ kind: "resetField", fieldId: row.id }) }) : null
+          row2.showEasing ? /* @__PURE__ */ jsx6(Select2, { size: "sm", options: row2.easingOptions, value: row2.easing, label: "Easing", onChange: (v) => ui5({ kind: "setEasing", fieldId: row2.id, easing: v }) }) : null,
+          row2.showKeyframes ? /* @__PURE__ */ jsx6(Badge2, { size: "sm", children: row2.keyframeChip }) : null,
+          row2.showToken ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(LinkIcon, {}), label: row2.tokenActionLabel, active: row2.bound, onClick: () => ui5({ kind: "bindToken", fieldId: row2.id }) }) : null,
+          row2.showReset ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ResetIcon, {}), label: "Reset to default", onClick: () => ui5({ kind: "resetField", fieldId: row2.id }) }) : null
         ] }),
         children: [
-          row.bound ? /* @__PURE__ */ jsx6(Badge2, { title: row.tokenTitle, children: row.tokenLabel }) : null,
-          row.unbound ? /* @__PURE__ */ jsx6(FieldWidget, { field: row.field, controller }) : null
+          row2.bound ? /* @__PURE__ */ jsx6(Badge2, { title: row2.tokenTitle, children: row2.tokenLabel }) : null,
+          row2.unbound ? /* @__PURE__ */ jsx6(FieldWidget, { field: row2.field, controller }) : null
         ]
       }
     ),
-    row.showInfoNote ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: row.infoNote }) }) : null
+    row2.showInfoNote ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: row2.infoNote }) }) : null
   ] });
 }
 function FieldWidget({
@@ -4318,9 +4498,9 @@ var HistoryPanelController = class {
       case "ArrowUp": {
         const delta = event.key === "ArrowDown" ? 1 : -1;
         const next = focusIndex < 0 ? 0 : Math.min(rows.length - 1, Math.max(0, focusIndex + delta));
-        const row = rows[next];
-        if (row) {
-          this.focusedEntryId = row.entryId;
+        const row2 = rows[next];
+        if (row2) {
+          this.focusedEntryId = row2.entryId;
           this.scrollIndexIntoView(next, rows.length);
         }
         this.notify();
@@ -4329,9 +4509,9 @@ var HistoryPanelController = class {
       case "Home":
       case "End": {
         const index = event.key === "Home" ? 0 : rows.length - 1;
-        const row = rows[index];
-        if (row) {
-          this.focusedEntryId = row.entryId;
+        const row2 = rows[index];
+        if (row2) {
+          this.focusedEntryId = row2.entryId;
           this.scrollIndexIntoView(index, rows.length);
         }
         this.notify();
@@ -4571,22 +4751,22 @@ function historyViewState(c) {
     pruned: c.isPruned(),
     totalHeight: window_.totalHeight,
     offsetTop: window_.offsetTop,
-    rows: c.getWindowRows().map((row) => {
-      const entry = row.entry;
+    rows: c.getWindowRows().map((row2) => {
+      const entry = row2.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,
+        key: row2.entryId ?? "__original__",
+        entryId: row2.entryId,
+        label: row2.label,
+        meta: row2.kind === "entry" ? row2.ordinal : void 0,
+        current: row2.current,
+        future: row2.future,
+        focused: focused === row2.entryId,
         jumpable: jumpAllowed && entry?.caps?.jumpable !== false,
         showIcon: showIcons,
         hideIcon: !showIcons,
-        iconName: row.kind === "original" ? "original" : c.getIconName(entry?.kind),
+        iconName: row2.kind === "original" ? "original" : c.getIconName(entry?.kind),
         pending,
         failed: entry?.status === "failed",
         showSource: showSource && !!source && source !== "user",
@@ -4651,12 +4831,12 @@ var historyViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, entryId?, value?, x?, y? } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-var EMPTY2 = { 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 BEHAVIOURS2 = {
-  "edit/historyPanelView": (inputs) => inputs.view ?? EMPTY2
+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 text2 = (b) => ({ component: "text", props: { text: b } });
-var ui2 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+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,
@@ -4672,8 +4852,8 @@ var HISTORY_DECLARATION = {
             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: ui2("undo") } },
-                { component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "history/RedoIcon" } }, label: { value: "Redo" }, disabled: { input: "view.cannotRedo" } }, on: { onClick: ui2("redo") } }
+                { 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") } }
               ]
             }
           },
@@ -4681,23 +4861,23 @@ var HISTORY_DECLARATION = {
             node: {
               component: "fragment",
               children: [
-                { component: "chrome/Text", props: { role: { value: "number" } }, children: [text2({ 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: ui2("requestClear") } }
+                { 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: ui2("filter", { value: { arg: "" } }) } }
+          { 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: ui2("confirmClear"), onCancel: ui2("cancelClear") }
+        on: { onConfirm: ui3("confirmClear"), onCancel: ui3("cancelClear") }
       },
-      { component: "chrome/Text", when: { input: "view.pruned" }, props: { role: { value: "caption" } }, children: [text2({ value: "Earlier history discarded (limit reached)" })] },
+      { component: "chrome/Text", when: { input: "view.pruned" }, props: { role: { value: "caption" } }, children: [text3({ value: "Earlier history discarded (limit reached)" })] },
       {
         component: "history/Scroller",
         children: [
@@ -4729,19 +4909,19 @@ var HISTORY_DECLARATION = {
                           component: "fragment",
                           children: [
                             { component: "history/PendingGlyph", when: { item: "pending" } },
-                            { component: "chrome/Badge", when: { item: "failed" }, props: { size: { value: "sm" }, tone: { value: "error" } }, children: [text2({ value: "failed" })] },
-                            { component: "chrome/Badge", when: { item: "showSource" }, props: { size: { value: "sm" }, title: { item: "sourceTitle" } }, children: [text2({ item: "sourceGlyph" })] },
-                            { component: "chrome/Badge", when: { item: "showCoalesced" }, props: { size: { value: "sm" }, title: { item: "coalescedTitle" } }, children: [text2({ item: "coalescedText" })] },
-                            { component: "chrome/Text", when: { item: "showTime" }, props: { role: { value: "meta" } }, children: [text2({ item: "time" })] },
+                            { 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: ui2("jump", { entryId: { item: "entryId" } }),
-                      onMouseEnter: ui2("hover", { entryId: { item: "entryId" } }),
-                      onContextMenuAt: ui2("contextMenu", { entryId: { item: "entryId" }, x: { arg: "" }, y: { arg: "", index: 1 } })
+                      onClick: ui3("jump", { entryId: { item: "entryId" } }),
+                      onMouseEnter: ui3("hover", { entryId: { item: "entryId" } }),
+                      onContextMenuAt: ui3("contextMenu", { entryId: { item: "entryId" }, x: { arg: "" }, y: { arg: "", index: 1 } })
                     }
                   }
                 ]
@@ -4755,8 +4935,8 @@ var HISTORY_DECLARATION = {
         component: "chrome/StatusBar",
         when: { input: "view.hasMemory" },
         props: {
-          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text2({ input: "view.memoryText" })] } },
-          right: { node: { component: "chrome/Text", when: { input: "view.memoryDisk" }, props: { role: { value: "meta" } }, children: [text2({ input: "view.memoryDisk" })] } }
+          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" })] } }
         }
       }
     ]
@@ -4866,26 +5046,26 @@ function HistoryPanelView({ controller }) {
   const getSnapshot = useCallback4(() => controller.getRevision(), [controller]);
   useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
   const view = historyViewState(controller);
-  const ui3 = (intent) => applyHistoryUi(controller, intent);
+  const ui5 = (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: () => ui3({ kind: "undo" }) }),
-          /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(RedoIcon, {}), label: "Redo", disabled: view.cannotRedo, onClick: () => ui3({ kind: "redo" }) })
+          /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(UndoIcon, {}), label: "Undo", disabled: view.cannotUndo, onClick: () => ui5({ kind: "undo" }) }),
+          /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(RedoIcon, {}), label: "Redo", disabled: view.cannotRedo, onClick: () => ui5({ 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: () => ui3({ kind: "requestClear" }) }) : null
+          view.clearAllowed ? /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(TrashIcon, {}), label: "Clear history", onClick: () => ui5({ kind: "requestClear" }) }) : null
         ] }),
-        children: view.searchShown ? /* @__PURE__ */ jsx8(SearchField3, { value: view.filter, onChange: (v) => ui3({ kind: "filter", value: v }), placeholder: "Search history", label: "Search history" }) : null
+        children: view.searchShown ? /* @__PURE__ */ jsx8(SearchField3, { value: view.filter, onChange: (v) => ui5({ 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: () => ui3({ kind: "confirmClear" }), onCancel: () => ui3({ kind: "cancelClear" }) }) : null,
+    view.confirmingClear ? /* @__PURE__ */ jsx8(InlineConfirm, { message: "Clear all history?", label: "Confirm clear history", confirmLabel: "Clear", onConfirm: () => ui5({ kind: "confirmClear" }), onCancel: () => ui5({ 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)) }) }),
+      /* @__PURE__ */ jsx8(RowList2, { role: "listbox", "aria-label": "History", children: /* @__PURE__ */ jsx8(VirtualWindow2, { totalHeight: view.totalHeight, offsetTop: view.offsetTop, children: view.rows.map((row2) => /* @__PURE__ */ jsx8(HistoryRowView, { row: row2, controller }, row2.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
@@ -4939,33 +5119,33 @@ function HistoryCancelButton({ entryId, controller }) {
     }
   );
 }
-function HistoryRowView({ row, controller }) {
-  const ui3 = (intent) => applyHistoryUi(controller, intent);
+function HistoryRowView({ row: row2, controller }) {
+  const ui5 = (intent) => applyHistoryUi(controller, intent);
   return /* @__PURE__ */ jsx8(
     Row2,
     {
-      height: row.height,
-      selected: row.current,
-      focused: row.focused,
-      struck: row.future,
-      noIcon: row.hideIcon,
-      interactive: row.jumpable,
-      icon: /* @__PURE__ */ jsx8(EntryIcon, { name: row.iconName }),
-      label: row.label,
-      meta: row.meta,
-      "data-history-row": row.key,
-      title: row.label,
+      height: row2.height,
+      selected: row2.current,
+      focused: row2.focused,
+      struck: row2.future,
+      noIcon: row2.hideIcon,
+      interactive: row2.jumpable,
+      icon: /* @__PURE__ */ jsx8(EntryIcon, { name: row2.iconName }),
+      label: row2.label,
+      meta: row2.meta,
+      "data-history-row": row2.key,
+      title: row2.label,
       trailing: /* @__PURE__ */ jsxs7(Fragment4, { children: [
-        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
+        row2.pending ? /* @__PURE__ */ jsx8(PendingGlyph, {}) : null,
+        row2.failed ? /* @__PURE__ */ jsx8(Badge3, { size: "sm", tone: "error", children: "failed" }) : null,
+        row2.showSource ? /* @__PURE__ */ jsx8(Badge3, { size: "sm", title: row2.sourceTitle, children: row2.sourceGlyph }) : null,
+        row2.showCoalesced ? /* @__PURE__ */ jsx8(Badge3, { size: "sm", title: row2.coalescedTitle, children: row2.coalescedText }) : null,
+        row2.showTime ? /* @__PURE__ */ jsx8(Text4, { role: "meta", children: row2.time }) : null,
+        row2.pending ? /* @__PURE__ */ jsx8(HistoryCancelButton, { entryId: row2.cancelId, controller }) : null
       ] }),
-      onClick: () => ui3({ kind: "jump", entryId: row.entryId }),
-      onMouseEnter: () => ui3({ kind: "hover", entryId: row.entryId }),
-      onContextMenuAt: (x, y) => ui3({ kind: "contextMenu", entryId: row.entryId, x, y })
+      onClick: () => ui5({ kind: "jump", entryId: row2.entryId }),
+      onMouseEnter: () => ui5({ kind: "hover", entryId: row2.entryId }),
+      onContextMenuAt: (x, y) => ui5({ kind: "contextMenu", entryId: row2.entryId, x, y })
     }
   );
 }
@@ -6003,6 +6183,181 @@ var ColorPanelController = class {
 import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef5 } from "react";
 import { useSyncExternalStore as useSyncExternalStore4 } from "react";
 
+// src/edit/color/declaration.ts
+var SPACE_LABEL = { hex: "HEX", rgb: "RGB", hsl: "HSL", hsv: "HSV", oklch: "OKLCH" };
+var COMPONENT_LABELS = { rgb: ["R", "G", "B"], hsl: ["H", "S", "L"], oklch: ["L", "C", "H"] };
+function roundForSpace(space, v) {
+  if (space === "oklch") return Math.round(v * 10) / 10;
+  return Math.round(v);
+}
+function colorViewState(c) {
+  const value = c.getColorValue();
+  const space = c.getSpace();
+  const comps = value.components ?? [];
+  const labels = COMPONENT_LABELS[space] ?? [];
+  const active = c.getActiveChannel();
+  return {
+    hex: value.hex,
+    bound: c.isBound(),
+    fgBg: c.getChannelsMode() === "fg-bg",
+    fgActive: active === "fg",
+    bgActive: active === "bg",
+    space,
+    spaceOptions: EDIT_SPACES.map((sp) => ({ value: sp, label: SPACE_LABEL[sp] })),
+    isHex: space === "hex",
+    isComponents: space !== "hex",
+    components: labels.map((label, index) => ({ key: label, label, index, value: roundForSpace(space, comps[index] ?? 0) })),
+    alphaShown: c.isAlphaShown(),
+    alphaPercent: Math.round(value.alpha * 100),
+    hasTokens: c.hasTokens(),
+    boundTokenId: c.getBoundTokenId() ?? "",
+    tokenOptions: c.getTokens().map((t) => ({ value: t.id, label: t.name })),
+    swatches: c.getSwatches().map((hex) => ({ key: hex, hex })),
+    hasRecent: c.getRecent().length > 0,
+    recent: c.getRecent().map((hex, i) => ({ key: `${hex}-${i}`, hex }))
+  };
+}
+function applyColorUi(c, intent) {
+  switch (intent.kind) {
+    case "setChannel":
+      c.setChannel(intent.channel);
+      break;
+    case "swapChannels":
+      c.swapChannels();
+      break;
+    case "setSpace":
+      c.setSpace(intent.space);
+      break;
+    case "setHex":
+      c.setFromColor(intent.value, void 0, { commit: true });
+      break;
+    case "setComponent": {
+      const comps = [...c.getColorValue().components ?? [0, 0, 0]];
+      comps[intent.index] = intent.value;
+      c.setFromComponents(c.getSpace(), comps, { commit: true });
+      break;
+    }
+    case "setAlpha":
+      c.setAlpha(intent.percent / 100, { commit: true });
+      break;
+    case "eyedropper":
+      c.requestEyedropper();
+      break;
+    case "bindToken":
+      if (intent.tokenId) c.bindToken(intent.tokenId);
+      else c.unbindToken();
+      break;
+    case "unbindToken":
+      c.unbindToken();
+      break;
+    case "addSwatch":
+      void c.addSwatch();
+      break;
+    case "selectColor":
+      c.selectColor(intent.hex);
+      break;
+    case "removeSwatch":
+      void c.removeSwatch(intent.hex);
+      break;
+  }
+}
+var colorViewManifest = {
+  id: colorManifest.id,
+  version: "1.0.0",
+  title: "Color",
+  category: "edit",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The ColorViewState the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, \u2026 } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY4 = { hex: "#000000", bound: false, fgBg: false, fgActive: true, bgActive: false, space: "hex", spaceOptions: EDIT_SPACES.map((sp) => ({ value: sp, label: SPACE_LABEL[sp] })), isHex: true, isComponents: false, components: [], alphaShown: false, alphaPercent: 100, hasTokens: false, boundTokenId: "", tokenOptions: [], swatches: [], hasRecent: false, recent: [] };
+var BEHAVIOURS4 = {
+  "edit/colorPanelView": (inputs) => inputs.view ?? EMPTY4
+};
+var text4 = (b) => ({ component: "text", props: { text: b } });
+var ui4 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var row = (children, extra = {}, when) => ({
+  component: "chrome/Stack",
+  ...when ? { when } : {},
+  props: { direction: { value: "row" }, pad: { value: "none" }, ...extra },
+  children
+});
+var COLOR_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: colorViewManifest,
+  behaviour: "edit/colorPanelView",
+  composition: {
+    component: "chrome/Column",
+    props: { className: { value: "xeno-color-panel" } },
+    children: [
+      {
+        component: "chrome/Stack",
+        props: { gap: { value: 8 } },
+        children: [
+          row(
+            [
+              { component: "chrome/ColorChip", props: { color: { input: "view.hex" }, label: { value: "Foreground" }, pressed: { input: "view.fgActive" } }, on: { onClick: ui4("setChannel", { channel: { value: "fg" } }) } },
+              { component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "color/SwapIcon" } }, label: { value: "Swap FG/BG (X)" } }, on: { onClick: ui4("swapChannels") } },
+              { component: "chrome/ColorChip", props: { color: { value: null }, label: { value: "Background" }, pressed: { input: "view.bgActive" } }, on: { onClick: ui4("setChannel", { channel: { value: "bg" } }) } }
+            ],
+            {},
+            { input: "view.fgBg" }
+          ),
+          { component: "color/Picker" },
+          row(
+            [
+              { component: "chrome/Select", props: { size: { value: "sm" }, label: { value: "Color model" }, value: { input: "view.space" }, options: { input: "view.spaceOptions" } }, on: { onChange: ui4("setSpace", { space: { arg: "" } }) } },
+              { component: "chrome/Input", when: { input: "view.isHex" }, props: { variant: { value: "mono" }, label: { value: "Hex" }, value: { input: "view.hex" }, disabled: { input: "view.bound" } }, on: { onChange: ui4("setHex", { value: { arg: "" } }) } },
+              { component: "chrome/NumberInput", each: { input: "view.components", key: "key" }, props: { caption: { item: "label" }, value: { item: "value" }, disabled: { input: "view.bound" } }, on: { onChange: ui4("setComponent", { index: { item: "index" }, value: { arg: "" } }) } },
+              { component: "chrome/NumberInput", when: { input: "view.alphaShown" }, props: { caption: { value: "A" }, label: { value: "Alpha" }, min: { value: 0 }, max: { value: 100 }, value: { input: "view.alphaPercent" }, disabled: { input: "view.bound" } }, on: { onChange: ui4("setAlpha", { percent: { arg: "" } }) } },
+              { component: "chrome/IconButton", props: { size: { value: "sm" }, icon: { node: { component: "color/EyedropperIcon" } }, label: { value: "Pick from screen" } }, on: { onClick: ui4("eyedropper") } }
+            ],
+            { gap: { value: 4 } }
+          ),
+          {
+            component: "chrome/Field",
+            when: { input: "view.hasTokens" },
+            props: { label: { value: "Token" }, htmlFor: { value: "xeno-color-token" } },
+            children: [
+              row(
+                [
+                  { component: "chrome/Select", props: { size: { value: "sm" }, label: { value: "Bind token" }, value: { input: "view.boundTokenId" }, placeholder: { value: "\u2014 raw \u2014" }, options: { input: "view.tokenOptions" } }, on: { onChange: ui4("bindToken", { tokenId: { arg: "" } }) } },
+                  { component: "chrome/TextButton", when: { input: "view.bound" }, on: { onClick: ui4("unbindToken") }, children: [text4({ value: "Unbind" })] }
+                ],
+                { gap: { value: 4 } }
+              )
+            ]
+          },
+          {
+            component: "chrome/Section",
+            props: { title: { value: "Swatches" }, flush: { value: true }, actions: { node: { component: "chrome/TextButton", on: { onClick: ui4("addSwatch") }, children: [text4({ value: "+ Save" })] } } },
+            children: [
+              {
+                component: "chrome/SwatchGrid",
+                props: { label: { value: "Swatches" } },
+                children: [{ component: "chrome/ColorChip", each: { input: "view.swatches", key: "key" }, props: { size: { value: "grid" }, color: { item: "hex" }, label: { item: "hex" } }, on: { onClick: ui4("selectColor", { hex: { item: "hex" } }), onContextMenu: ui4("removeSwatch", { hex: { item: "hex" } }) } }]
+              }
+            ]
+          },
+          {
+            component: "chrome/Section",
+            when: { input: "view.hasRecent" },
+            props: { title: { value: "Recent" }, flush: { value: true } },
+            children: [
+              {
+                component: "chrome/SwatchGrid",
+                props: { label: { value: "Recent" } },
+                children: [{ component: "chrome/ColorChip", each: { input: "view.recent", key: "key" }, props: { size: { value: "grid" }, color: { item: "hex" }, label: { item: "hex" } }, on: { onClick: ui4("selectColor", { hex: { item: "hex" } }) } }]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+};
+
 // src/edit/color/react/viewHelpers.ts
 function hsvFromHexOrBlack(hex) {
   const rgba = parseHexColor(hex);
@@ -6096,24 +6451,39 @@ function SwapIcon() {
 
 // src/edit/color/react/ColorPanelView.tsx
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var SPACE_LABEL = {
-  hex: "HEX",
-  rgb: "RGB",
-  hsl: "HSL",
-  hsv: "HSV",
-  oklch: "OKLCH"
-};
-var COMPONENT_LABELS = {
-  rgb: ["R", "G", "B"],
-  hsl: ["H", "S", "L"],
-  oklch: ["L", "C", "H"]
-};
 function ColorPanelView({ controller }) {
+  const subscribe = useCallback5((cb) => controller.subscribe(cb), [controller]);
+  const getSnapshot = useCallback5(() => controller.getRevision(), [controller]);
+  useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
+  const view = colorViewState(controller);
+  const ui5 = (intent) => applyColorUi(controller, intent);
+  return /* @__PURE__ */ jsx10(Column4, { className: "xeno-color-panel", children: /* @__PURE__ */ jsxs9(Stack3, { gap: 8, children: [
+    view.fgBg ? /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", children: [
+      /* @__PURE__ */ jsx10(ColorChip, { color: view.hex, label: "Foreground", pressed: view.fgActive, onClick: () => ui5({ kind: "setChannel", channel: "fg" }) }),
+      /* @__PURE__ */ jsx10(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx10(SwapIcon, {}), label: "Swap FG/BG (X)", onClick: () => ui5({ kind: "swapChannels" }) }),
+      /* @__PURE__ */ jsx10(ColorChip, { color: null, label: "Background", pressed: view.bgActive, onClick: () => ui5({ kind: "setChannel", channel: "bg" }) })
+    ] }) : null,
+    /* @__PURE__ */ jsx10(ColorPicker, { controller }),
+    /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", gap: 4, children: [
+      /* @__PURE__ */ jsx10(Select3, { size: "sm", label: "Color model", value: view.space, options: view.spaceOptions, onChange: (v) => ui5({ kind: "setSpace", space: v }) }),
+      view.isHex ? /* @__PURE__ */ jsx10(Input3, { variant: "mono", label: "Hex", value: view.hex, onChange: (v) => ui5({ kind: "setHex", value: v }), disabled: view.bound }) : null,
+      view.components.map((comp) => /* @__PURE__ */ jsx10(NumberInput, { caption: comp.label, value: comp.value, onChange: (n) => ui5({ kind: "setComponent", index: comp.index, value: n }), disabled: view.bound }, comp.key)),
+      view.alphaShown ? /* @__PURE__ */ jsx10(NumberInput, { caption: "A", label: "Alpha", min: 0, max: 100, value: view.alphaPercent, onChange: (n) => ui5({ kind: "setAlpha", percent: n }), disabled: view.bound }) : null,
+      /* @__PURE__ */ jsx10(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx10(EyedropperIcon, {}), label: "Pick from screen", onClick: () => ui5({ kind: "eyedropper" }) })
+    ] }),
+    view.hasTokens ? /* @__PURE__ */ jsx10(Field2, { label: "Token", htmlFor: "xeno-color-token", children: /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", gap: 4, children: [
+      /* @__PURE__ */ jsx10(Select3, { size: "sm", label: "Bind token", value: view.boundTokenId, placeholder: "\u2014 raw \u2014", options: view.tokenOptions, onChange: (id) => ui5({ kind: "bindToken", tokenId: id }) }),
+      view.bound ? /* @__PURE__ */ jsx10(TextButton2, { onClick: () => ui5({ kind: "unbindToken" }), children: "Unbind" }) : null
+    ] }) }) : null,
+    /* @__PURE__ */ jsx10(Section2, { title: "Swatches", flush: true, actions: /* @__PURE__ */ jsx10(TextButton2, { onClick: () => ui5({ kind: "addSwatch" }), children: "+ Save" }), children: /* @__PURE__ */ jsx10(SwatchGrid, { label: "Swatches", children: view.swatches.map((sw) => /* @__PURE__ */ jsx10(ColorChip, { size: "grid", color: sw.hex, label: sw.hex, onClick: () => ui5({ kind: "selectColor", hex: sw.hex }), onContextMenu: () => ui5({ kind: "removeSwatch", hex: sw.hex }) }, sw.key)) }) }),
+    view.hasRecent ? /* @__PURE__ */ jsx10(Section2, { title: "Recent", flush: true, children: /* @__PURE__ */ jsx10(SwatchGrid, { label: "Recent", children: view.recent.map((r) => /* @__PURE__ */ jsx10(ColorChip, { size: "grid", color: r.hex, label: r.hex, onClick: () => ui5({ kind: "selectColor", hex: r.hex }) }, r.key)) }) }) : null
+  ] }) });
+}
+function ColorPicker({ controller }) {
   const subscribe = useCallback5((cb) => controller.subscribe(cb), [controller]);
   const getSnapshot = useCallback5(() => controller.getRevision(), [controller]);
   useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
   const value = controller.getColorValue();
-  const space = controller.getSpace();
   const bound = controller.isBound();
   const hsv = hsvFromHexOrBlack(value.hex);
   const spectrumRef = useRef5(null);
@@ -6184,116 +6554,82 @@ function ColorPanelView({ controller }) {
       controller.endDrag();
     }
   }, [controller]);
-  const onHexInput = useCallback5(
-    (raw) => {
-      controller.setFromColor(raw, void 0, { commit: true });
-    },
-    [controller]
-  );
-  const onComponentInput = useCallback5(
-    (index, n) => {
-      const comps2 = [...value.components ?? [0, 0, 0]];
-      comps2[index] = n;
-      controller.setFromComponents(space, comps2, { commit: true });
-    },
-    [controller, space, value.components]
-  );
-  const componentLabels = COMPONENT_LABELS[space];
-  const comps = value.components ?? [];
-  const activeChannel = controller.getActiveChannel();
-  return /* @__PURE__ */ jsx10(Column4, { className: "xeno-color-panel", children: /* @__PURE__ */ jsxs9(Stack3, { gap: 8, children: [
-    controller.getChannelsMode() === "fg-bg" ? /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", children: [
-      /* @__PURE__ */ jsx10(ColorChip, { color: value.hex, label: "Foreground", pressed: activeChannel === "fg", onClick: () => controller.setChannel("fg") }),
-      /* @__PURE__ */ jsx10(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx10(SwapIcon, {}), label: "Swap FG/BG (X)", onClick: () => controller.swapChannels() }),
-      /* @__PURE__ */ jsx10(ColorChip, { color: null, label: "Background", pressed: activeChannel === "bg", onClick: () => controller.setChannel("bg") })
-    ] }) : null,
-    /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", children: [
-      /* @__PURE__ */ jsx10(
-        CanvasSurface,
-        {
-          ref: spectrumRef,
-          width: 200,
-          height: 140,
-          grow: true,
-          cursor: "crosshair",
-          disabled: bound,
-          "aria-label": "Saturation and value",
-          onPointerDown: (e) => onSpectrumPointer(e, true),
-          onPointerMove: (e) => onSpectrumPointer(e, false),
-          onPointerUp: endDrag
-        }
-      ),
-      /* @__PURE__ */ jsx10(
-        CanvasSurface,
-        {
-          ref: hueRef,
-          width: 14,
-          height: 140,
-          cursor: "ns-resize",
-          disabled: bound,
-          "aria-label": "Hue",
-          onPointerDown: (e) => onHuePointer(e, true),
-          onPointerMove: (e) => onHuePointer(e, false),
-          onPointerUp: endDrag
-        }
-      ),
-      controller.isAlphaShown() ? /* @__PURE__ */ jsx10(
-        CanvasSurface,
-        {
-          ref: alphaRef,
-          width: 14,
-          height: 140,
-          cursor: "ns-resize",
-          disabled: bound,
-          "aria-label": "Alpha",
-          onPointerDown: (e) => onAlphaPointer(e, true),
-          onPointerMove: (e) => onAlphaPointer(e, false),
-          onPointerUp: endDrag
-        }
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", gap: 4, children: [
-      /* @__PURE__ */ jsx10(Select3, { size: "sm", label: "Color model", value: space, options: EDIT_SPACES.map((sp) => ({ value: sp, label: SPACE_LABEL[sp] })), onChange: (v) => controller.setSpace(v) }),
-      space === "hex" ? /* @__PURE__ */ jsx10(Input3, { variant: "mono", label: "Hex", value: value.hex, onChange: onHexInput, disabled: bound }) : (componentLabels ?? []).map((label, i) => /* @__PURE__ */ jsx10(NumberInput, { caption: label, value: roundForSpace(space, i, comps[i] ?? 0), onChange: (n) => onComponentInput(i, n), disabled: bound }, label)),
-      controller.isAlphaShown() ? /* @__PURE__ */ jsx10(NumberInput, { caption: "A", label: "Alpha", min: 0, max: 100, value: Math.round(value.alpha * 100), onChange: (n) => controller.setAlpha(n / 100, { commit: true }), disabled: bound }) : null,
-      /* @__PURE__ */ jsx10(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx10(EyedropperIcon, {}), label: "Pick from screen", onClick: () => controller.requestEyedropper() })
-    ] }),
-    controller.hasTokens() ? /* @__PURE__ */ jsx10(Field2, { label: "Token", htmlFor: "xeno-color-token", children: /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", gap: 4, children: [
-      /* @__PURE__ */ jsx10(
-        Select3,
-        {
-          size: "sm",
-          label: "Bind token",
-          value: controller.getBoundTokenId() ?? "",
-          placeholder: "\u2014 raw \u2014",
-          options: controller.getTokens().map((t) => ({ value: t.id, label: t.name })),
-          onChange: (id) => id ? controller.bindToken(id) : controller.unbindToken()
-        }
-      ),
-      bound ? /* @__PURE__ */ jsx10(TextButton2, { onClick: () => controller.unbindToken(), children: "Unbind" }) : null
-    ] }) }) : null,
-    /* @__PURE__ */ jsx10(Section2, { title: "Swatches", flush: true, actions: /* @__PURE__ */ jsx10(TextButton2, { onClick: () => void controller.addSwatch(), children: "+ Save" }), children: /* @__PURE__ */ jsx10(SwatchGrid, { label: "Swatches", children: controller.getSwatches().map((hex) => /* @__PURE__ */ jsx10(ColorChip, { size: "grid", color: hex, label: hex, onClick: () => controller.selectColor(hex), onContextMenu: () => void controller.removeSwatch(hex) }, hex)) }) }),
-    controller.getRecent().length > 0 ? /* @__PURE__ */ jsx10(Section2, { title: "Recent", flush: true, children: /* @__PURE__ */ jsx10(SwatchGrid, { label: "Recent", children: controller.getRecent().map((hex, i) => /* @__PURE__ */ jsx10(ColorChip, { size: "grid", color: hex, label: hex, onClick: () => controller.selectColor(hex) }, `${hex}-${i}`)) }) }) : null
-  ] }) });
+  return /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", children: [
+    /* @__PURE__ */ jsx10(
+      CanvasSurface,
+      {
+        ref: spectrumRef,
+        width: 200,
+        height: 140,
+        grow: true,
+        cursor: "crosshair",
+        disabled: bound,
+        "aria-label": "Saturation and value",
+        onPointerDown: (e) => onSpectrumPointer(e, true),
+        onPointerMove: (e) => onSpectrumPointer(e, false),
+        onPointerUp: endDrag
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      CanvasSurface,
+      {
+        ref: hueRef,
+        width: 14,
+        height: 140,
+        cursor: "ns-resize",
+        disabled: bound,
+        "aria-label": "Hue",
+        onPointerDown: (e) => onHuePointer(e, true),
+        onPointerMove: (e) => onHuePointer(e, false),
+        onPointerUp: endDrag
+      }
+    ),
+    controller.isAlphaShown() ? /* @__PURE__ */ jsx10(
+      CanvasSurface,
+      {
+        ref: alphaRef,
+        width: 14,
+        height: 140,
+        cursor: "ns-resize",
+        disabled: bound,
+        "aria-label": "Alpha",
+        onPointerDown: (e) => onAlphaPointer(e, true),
+        onPointerMove: (e) => onAlphaPointer(e, false),
+        onPointerUp: endDrag
+      }
+    ) : null
+  ] });
+}
+function colorRuntimeComponents(controller) {
+  return {
+    "color/Picker": () => /* @__PURE__ */ jsx10(ColorPicker, { controller }),
+    "color/SwapIcon": SwapIcon,
+    "color/EyedropperIcon": EyedropperIcon
+  };
 }
 function clamp01(n) {
   return Math.max(0, Math.min(1, Number.isFinite(n) ? n : 0));
 }
-function roundForSpace(space, index, v) {
-  if (space === "oklch") return Math.round(v * 10) / 10;
-  return Math.round(v);
-}
 
 // src/edit/color/panel.ts
 function createColorPanel(options = {}) {
   return {
     manifest: colorManifest,
     activate(host) {
-      const controller = new ColorPanelController(host, options);
+      const { render: customRender, ...controllerOptions } = options;
+      const controller = new ColorPanelController(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 = createRoot4(el);
           root.render(createElement4(ColorPanelView, { controller }));
           return () => {
@@ -6316,6 +6652,8 @@ function createColorPanel(options = {}) {
         dispose() {
           root?.unmount();
           root = null;
+          unrender?.();
+          unrender = null;
           controller.dispose();
         }
       };
@@ -8801,11 +9139,11 @@ var FindController = class {
    * @param text - The new query text.
    * @param immediate - Skip the debounce (a paste, or pressing Enter).
    */
-  setText(text3, immediate = false) {
-    if (text3 === this.text) return;
-    this.text = text3;
+  setText(text5, immediate = false) {
+    if (text5 === this.text) return;
+    this.text = text5;
     this.index = -1;
-    if (text3 === "") {
+    if (text5 === "") {
       this.clearResults("idle");
       this.emitQuery(true);
       return;
@@ -8833,8 +9171,8 @@ var FindController = class {
     this.notify();
   }
   /** The replacement text. Never emitted on its own — a replacement is not a search. */
-  setReplaceText(text3) {
-    this.replaceText = text3;
+  setReplaceText(text5) {
+    this.replaceText = text5;
     this.notify();
   }
   /** Show or hide the replace row. */
@@ -12124,14 +12462,14 @@ var TreeController = class {
       filter: this.filter,
       labelOf: (node) => node.label,
       isContainer: isTreeContainer
-    }).map((row) => ({
-      id: row.id,
-      node: row.node,
-      depth: row.depth,
-      container: row.container,
-      expanded: row.expanded,
-      matched: row.matched,
-      childState: childStateOf(row.node)
+    }).map((row2) => ({
+      id: row2.id,
+      node: row2.node,
+      depth: row2.depth,
+      container: row2.container,
+      expanded: row2.expanded,
+      matched: row2.matched,
+      childState: childStateOf(row2.node)
     }));
     return this.rowCache;
   }
@@ -12416,7 +12754,7 @@ var TreeController = class {
     if (rows.length === 0) return false;
     const index = rows.findIndex((r) => r.id === this.focusedId);
     const current = index >= 0 ? index : 0;
-    const row = rows[current];
+    const row2 = rows[current];
     switch (event.key) {
       case "ArrowDown":
         this.moveFocus(rows, Math.min(rows.length - 1, current + 1), event);
@@ -12431,15 +12769,15 @@ var TreeController = class {
         this.moveFocus(rows, rows.length - 1, event);
         return true;
       case "ArrowRight":
-        if (row?.container && !row.expanded) this.setExpanded(row.id, true);
-        else if (row && current + 1 < rows.length) this.moveFocus(rows, current + 1, event);
+        if (row2?.container && !row2.expanded) this.setExpanded(row2.id, true);
+        else if (row2 && current + 1 < rows.length) this.moveFocus(rows, current + 1, event);
         return true;
       case "ArrowLeft": {
-        if (row?.container && row.expanded) {
-          this.setExpanded(row.id, false);
+        if (row2?.container && row2.expanded) {
+          this.setExpanded(row2.id, false);
           return true;
         }
-        const parentId = row?.node.parentId;
+        const parentId = row2?.node.parentId;
         if (parentId) {
           this.focusedId = parentId;
           this.select([parentId]);
@@ -12447,10 +12785,10 @@ var TreeController = class {
         return true;
       }
       case "Enter":
-        if (row) this.open(row.id, { alt: event.altKey });
+        if (row2) this.open(row2.id, { alt: event.altKey });
         return true;
       case "F2":
-        if (row) this.beginRename(row.id);
+        if (row2) this.beginRename(row2.id);
         return true;
       case "Delete":
       case "Backspace":
@@ -12470,12 +12808,12 @@ var TreeController = class {
     }
     if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
       const fresh = now - this.typeAhead.at > this.typeAheadMs;
-      const text3 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
-      this.typeAhead = { text: text3, at: now };
+      const text5 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
+      this.typeAhead = { text: text5, 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(text3)) {
+        if (candidate.node.label.toLowerCase().startsWith(text5)) {
           this.focusedId = candidate.id;
           this.select([candidate.id]);
           return true;
@@ -12501,9 +12839,9 @@ var TreeController = class {
     return true;
   }
   /** Update the rename draft. */
-  updateRenameDraft(text3) {
+  updateRenameDraft(text5) {
     if (!this.renaming) return;
-    this.renaming = { ...this.renaming, draft: text3 };
+    this.renaming = { ...this.renaming, draft: text5 };
     this.notify();
   }
   /**
@@ -13232,10 +13570,10 @@ function TreePanelView({
             e.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsx17("div", { style: { height: window2.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx17("div", { style: { transform: `translateY(${window2.offsetTop}px)` }, children: slice.map((row) => /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx17("div", { style: { height: window2.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx17("div", { style: { transform: `translateY(${window2.offsetTop}px)` }, children: slice.map((row2) => /* @__PURE__ */ jsx17(
           TreeRowView,
           {
-            row,
+            row: row2,
             controller,
             state,
             rowHeight,
@@ -13243,7 +13581,7 @@ function TreePanelView({
             openOn,
             columns
           },
-          row.id
+          row2.id
         )) }) })
       }
     ) });
@@ -13285,7 +13623,7 @@ function TreePanelView({
   ] });
 }
 function TreeRowView({
-  row,
+  row: row2,
   controller,
   state,
   rowHeight,
@@ -13293,18 +13631,18 @@ function TreeRowView({
   openOn,
   columns
 }) {
-  const node = row.node;
-  const selected = state.selection.includes(row.id);
-  const renaming = state.renaming?.id === row.id ? state.renaming : null;
-  const drop = state.drag?.targetId === row.id ? state.drag : null;
-  const twisty = row.container ? /* @__PURE__ */ jsx17(
+  const node = row2.node;
+  const selected = state.selection.includes(row2.id);
+  const renaming = state.renaming?.id === row2.id ? state.renaming : null;
+  const drop = state.drag?.targetId === row2.id ? state.drag : null;
+  const twisty = row2.container ? /* @__PURE__ */ jsx17(
     "span",
     {
       role: "button",
-      "aria-label": row.expanded ? "Collapse" : "Expand",
+      "aria-label": row2.expanded ? "Collapse" : "Expand",
       onClick: (e) => {
         e.stopPropagation();
-        controller.setExpanded(row.id, !row.expanded);
+        controller.setExpanded(row2.id, !row2.expanded);
       },
       style: {
         display: "flex",
@@ -13313,7 +13651,7 @@ function TreeRowView({
         width: 12,
         flex: "0 0 auto",
         cursor: "pointer",
-        transform: row.expanded ? "rotate(90deg)" : void 0,
+        transform: row2.expanded ? "rotate(90deg)" : void 0,
         transition: "transform 80ms ease",
         opacity: 0.7
       },
@@ -13338,34 +13676,34 @@ function TreeRowView({
         Row4,
         {
           role: "treeitem",
-          "aria-expanded": row.container ? row.expanded : void 0,
-          "aria-level": row.depth + 1,
+          "aria-expanded": row2.container ? row2.expanded : void 0,
+          "aria-level": row2.depth + 1,
           selected,
           disabled: node.caps?.select === false,
           depth: 0,
-          style: { height: rowHeight, paddingLeft: 6 + row.depth * indentPx },
+          style: { height: rowHeight, paddingLeft: 6 + row2.depth * indentPx },
           onClick: (e) => {
-            controller.select([row.id], {
+            controller.select([row2.id], {
               toggle: e.ctrlKey || e.metaKey,
               range: e.shiftKey
             });
-            if (openOn === "single") controller.open(row.id, { alt: e.altKey });
+            if (openOn === "single") controller.open(row2.id, { alt: e.altKey });
           },
           onDoubleClick: () => {
-            if (openOn === "double") controller.open(row.id);
+            if (openOn === "double") controller.open(row2.id);
           },
           onContextMenu: (e) => {
             e.preventDefault();
-            controller.requestContextMenu(selected ? state.selection : [row.id], e.clientX, e.clientY);
+            controller.requestContextMenu(selected ? state.selection : [row2.id], e.clientX, e.clientY);
           },
           onPointerDown: (e) => {
             if (e.button !== 0) return;
-            controller.beginDrag(selected ? state.selection : [row.id]);
+            controller.beginDrag(selected ? state.selection : [row2.id]);
           },
           onPointerMove: (e) => {
             if (!state.drag) return;
             const rect = e.currentTarget.getBoundingClientRect();
-            controller.dragOver(row.id, e.clientY - rect.top);
+            controller.dragOver(row2.id, e.clientY - rect.top);
           },
           onPointerUp: () => {
             if (state.drag) controller.endDrag();
@@ -13399,7 +13737,7 @@ function TreeRowView({
               }
             }
           ) : node.label,
-          meta: /* @__PURE__ */ jsx17(ChildStateChip, { row, controller }),
+          meta: /* @__PURE__ */ jsx17(ChildStateChip, { row: row2, controller }),
           trailing: /* @__PURE__ */ jsxs16(Fragment9, { children: [
             columns?.map((columnId) => /* @__PURE__ */ jsx17("span", { style: { opacity: 0.7, fontVariantNumeric: "tabular-nums" }, children: node.columns?.[columnId] ?? "" }, columnId)),
             node.glyphs?.map((glyph) => /* @__PURE__ */ jsx17("span", { title: glyph.title, style: { display: "flex", opacity: 0.7 }, children: /* @__PURE__ */ jsx17(NodeIcon, { icon: glyph.icon }) }, glyph.id)),
@@ -13414,7 +13752,7 @@ function TreeRowView({
                 icon: /* @__PURE__ */ jsx17(NodeIcon, { icon: action.icon }),
                 label: action.label,
                 disabled: action.disabled,
-                onClick: () => controller.runAction(row.id, action.id)
+                onClick: () => controller.runAction(row2.id, action.id)
               },
               action.id
             ))
@@ -13425,35 +13763,35 @@ function TreeRowView({
   );
 }
 function ChildStateChip({
-  row,
+  row: row2,
   controller
 }) {
-  if (!row.container) return null;
-  if (row.childState === "loading") {
+  if (!row2.container) return null;
+  if (row2.childState === "loading") {
     return /* @__PURE__ */ jsx17("span", { style: { opacity: 0.5, fontSize: 9 }, children: "loading\u2026" });
   }
-  if (row.childState === "error") {
-    const error = row.node.error;
+  if (row2.childState === "error") {
+    const error = row2.node.error;
     return /* @__PURE__ */ jsx17(Badge7, { tone: "error", children: error?.code === "denied" ? "no access" : error?.code ?? "failed" });
   }
-  if (row.node.hasMore && row.expanded) {
+  if (row2.node.hasMore && row2.expanded) {
     return /* @__PURE__ */ jsx17(
       "span",
       {
         role: "button",
         onClick: (e) => {
           e.stopPropagation();
-          controller.loadMore(row.id);
+          controller.loadMore(row2.id);
         },
         style: { cursor: "pointer", opacity: 0.7, fontSize: 9 },
         children: "load more\u2026"
       }
     );
   }
-  if (row.node.truncatedAt !== void 0) {
-    return /* @__PURE__ */ jsx17(Badge7, { tone: "warning", children: `first ${row.node.truncatedAt}` });
+  if (row2.node.truncatedAt !== void 0) {
+    return /* @__PURE__ */ jsx17(Badge7, { tone: "warning", children: `first ${row2.node.truncatedAt}` });
   }
-  if (row.expanded && isEmptyContainer(row.node)) {
+  if (row2.expanded && isEmptyContainer(row2.node)) {
     return /* @__PURE__ */ jsx17("span", { style: { opacity: 0.4, fontSize: 9 }, children: "empty" });
   }
   return null;
@@ -13667,6 +14005,8 @@ function numberConfig(value, fallback) {
 }
 var treePanel = createTreePanel();
 export {
+  BEHAVIOURS4 as COLOR_BEHAVIOURS,
+  COLOR_DECLARATION,
   COLOR_SPACES,
   COMMENTS_PANEL_ID,
   CURVE_PANEL_ID,
@@ -13692,21 +14032,24 @@ export {
   FindPanelView,
   GENERIC_ICON,
   GraphController,
-  BEHAVIOURS2 as HISTORY_BEHAVIOURS,
+  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,
   MIXED,
   NODEGRAPH_PANEL_ID,
   NodeGraphPanelView,
+  SPACE_LABEL,
   TREE_PANEL_ID,
   Thumbnail,
   TreeController,
@@ -13724,8 +14067,10 @@ export {
   allIds,
   anchorStateOf,
   appliedCount,
+  applyColorUi,
   applyHistoryUi,
   applyInspectorUi,
+  applyLayersUi,
   applyPrecision,
   applyTangentDrag,
   ariaSliderProps,
@@ -13740,6 +14085,9 @@ export {
   collectDescendants,
   colorManifest,
   colorPanel,
+  colorRuntimeComponents,
+  colorViewManifest,
+  colorViewState,
   commentsManifest,
   commentsPanel,
   commitPolicyOf,
@@ -13825,6 +14173,9 @@ export {
   keyRefId,
   layersManifest,
   layersPanel,
+  layersRuntimeComponents,
+  layersViewManifest,
+  layersViewState,
   liveEdges,
   makeColorValue,
   matchesFilter,