@xenosystem/blocks 0.12.5 → 0.12.6

package/dist/edit/index.js

@@ -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);
     }
@@ -1216,22 +1216,22 @@ function layersViewState(c) {
     filter: c.getFilter(),
     totalHeight: window_.totalHeight,
     offsetTop: window_.offsetTop,
-    rows: c.getWindowRows().map((row) => {
-      const node = row.node;
+    rows: c.getWindowRows().map((row2) => {
+      const node = row2.node;
       const container = isContainer(node);
       return {
-        id: row.id,
+        id: row2.id,
         name: node.name,
         title: node.name,
-        depth: row.depth,
+        depth: row2.depth,
         height: rowHeight,
-        selected: c.isSelected(row.id),
-        active: activeId === row.id,
-        dimmed: !row.matched,
-        dropHint: drag?.target && drag.target.targetId === row.id ? drag.target.position : null,
-        expanded: container ? row.expanded : void 0,
-        renaming: renamingId === row.id,
-        notRenaming: renamingId !== row.id,
+        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,
@@ -1513,11 +1513,11 @@ function LayersPanelView({ controller }) {
   const getSnapshot = useCallback(() => controller.getRevision(), [controller]);
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const view = layersViewState(controller);
-  const ui4 = (intent) => applyLayersUi(controller, intent);
+  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) => ui4({ kind: "filter", value: v }), placeholder: "Search layers", label: "Search layers" }) }) : null,
+    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((row) => /* @__PURE__ */ jsx3(LayerRow, { row, thumbnailSize: view.thumbnailSize, controller }, row.id)) }) }),
+      /* @__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 })
@@ -1627,37 +1627,37 @@ function LayersRenameField({ id, controller }) {
 function LayersThumbnail({ thumbnailKey, size, controller }) {
   return /* @__PURE__ */ jsx3(Thumbnail, { size, data: controller.getThumbnail(thumbnailKey) });
 }
-function LayerRow({ row, thumbnailSize, controller }) {
-  const ui4 = (intent) => applyLayersUi(controller, intent);
+function LayerRow({ row: row2, thumbnailSize, controller }) {
+  const ui5 = (intent) => applyLayersUi(controller, intent);
   return /* @__PURE__ */ jsx3(
     Row,
     {
-      "data-layer-row": row.id,
-      height: row.height,
-      depth: row.depth,
-      selected: row.selected,
-      active: row.active,
-      dimmed: row.dimmed,
-      dropHint: row.dropHint,
-      expanded: row.expanded,
-      title: row.title,
-      icon: row.hasThumbnail ? /* @__PURE__ */ jsx3(LayersThumbnail, { thumbnailKey: row.thumbnailKey, size: thumbnailSize, controller }) : /* @__PURE__ */ jsx3(KindGlyph, {}),
+      "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: [
-        row.showVisibility ? /* @__PURE__ */ jsx3(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx3(VisibilityIcon, { open: row.visible }), label: row.visibilityLabel, active: row.visible, onClick: () => ui4({ kind: "toggleProp", id: row.id, prop: "visible" }) }) : null,
-        row.showLock ? /* @__PURE__ */ jsx3(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx3(LockStateIcon, { locked: row.locked }), label: row.lockLabel, active: row.locked, onClick: () => ui4({ kind: "toggleProp", id: row.id, prop: "locked" }) }) : null,
-        row.showSolo ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "S", label: "Solo", on: row.solo, onChange: () => ui4({ kind: "toggleProp", id: row.id, prop: "solo" }) }) : null,
-        row.showMute ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "M", label: "Mute", on: row.muted, onChange: () => ui4({ kind: "toggleProp", id: row.id, prop: "muted" }) }) : null,
-        row.showArm ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "R", label: "Arm", on: row.armed, onChange: () => ui4({ kind: "toggleProp", id: row.id, prop: "armed" }) }) : null,
-        row.showColor ? /* @__PURE__ */ jsx3(ColorTag, { color: row.colorLabel }) : null
+        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: row.renaming ? /* @__PURE__ */ jsx3(LayersRenameField, { id: row.id, controller }) : row.name,
+      label: row2.renaming ? /* @__PURE__ */ jsx3(LayersRenameField, { id: row2.id, controller }) : row2.name,
       trailing: /* @__PURE__ */ jsxs2(Fragment, { children: [
-        row.adornments.map((a) => /* @__PURE__ */ jsx3(Badge, { size: "sm", title: a.title, children: a.text }, a.key)),
-        row.showOpacity ? /* @__PURE__ */ jsx3(Text, { role: "number", children: row.opacity }) : null
+        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
       ] }),
-      onExpandedChange: () => ui4({ kind: "toggleExpanded", id: row.id }),
-      onDoubleClick: () => ui4({ kind: "beginRename", id: row.id }),
-      onContextMenuAt: (x, y) => ui4({ kind: "contextMenu", id: row.id, x, y })
+      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 })
     }
   );
 }
@@ -2051,8 +2051,8 @@ function constraintsOf(field) {
     scale: field.scale
   };
 }
-function parseNumeric(text4) {
-  const trimmed = String(text4).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" };
@@ -2077,8 +2077,8 @@ function normalizeNumeric(value, c) {
 function formatNumeric(value, field) {
   if (!Number.isFinite(value)) return "";
   const precision = field.precision;
-  const text4 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
-  return field.unit ? `${text4}${field.unit}` : text4;
+  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;
@@ -2412,44 +2412,44 @@ var InspectorPanelController = class {
     if (!field || !isFieldEditable(field)) return;
     const mixed = isFieldMixed(field);
     const value = this.getFieldValue(fieldId);
-    const text4 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
-    this.drafts.set(fieldId, { text: text4, original: value });
+    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, text4) {
+  setDraft(fieldId, text5) {
     const draft = this.drafts.get(fieldId);
     if (!draft) {
-      this.drafts.set(fieldId, { text: text4, original: this.getFieldValue(fieldId) });
+      this.drafts.set(fieldId, { text: text5, original: this.getFieldValue(fieldId) });
     } else {
-      draft.text = text4;
+      draft.text = text5;
     }
     const field = this.getField(fieldId);
     if (field && commitPolicyOf(field) === "live") {
-      const parsed = this.parseDraft(fieldId, text4);
+      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, text4) {
+  parseDraft(fieldId, text5) {
     const field = this.getField(fieldId);
     if (!field) return { ok: false };
     if (field.type === "number") {
-      const parsed = parseNumeric(text4);
+      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(text4) };
+        return { ok: true, value: JSON.parse(text5) };
       } catch {
         return { ok: false };
       }
     }
-    return { ok: true, value: text4 };
+    return { ok: true, value: text5 };
   }
   /**
    * Commit the draft (Enter / blur). Invalid input reverts instead of committing garbage.
@@ -3424,7 +3424,7 @@ function NumberWidget({ field, controller, component }) {
     },
     [controller, editable, field.id, component]
   );
-  const text4 = 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) : "";
@@ -3436,7 +3436,7 @@ function NumberWidget({ field, controller, component }) {
       Input2,
       {
         inputMode: "decimal",
-        value: text4,
+        value: text5,
         placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder,
         mixed,
         readOnly: !editable,
@@ -3654,7 +3654,7 @@ function ActionGlyph({ glyph }) {
   return /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: glyph });
 }
 function SectionView({ section, controller }) {
-  const ui4 = (intent) => applyInspectorUi(controller, intent);
+  const ui5 = (intent) => applyInspectorUi(controller, intent);
   const hasActions = section.actions.length > 0 || section.hasAddMenu;
   return /* @__PURE__ */ jsxs5(
     Section,
@@ -3663,51 +3663,51 @@ function SectionView({ section, controller }) {
       flush: true,
       collapsible: section.collapsible,
       collapsed: section.collapsed,
-      onCollapsedChange: () => ui4({ kind: "toggleSectionCollapsed", sectionId: section.id }),
+      onCollapsedChange: () => ui5({ kind: "toggleSectionCollapsed", sectionId: section.id }),
       enabled: section.enabled,
-      onEnabledChange: () => ui4({ 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: () => ui4({ kind: "runAction", sectionId: section.id, actionId: action.id }) }, action.id)),
-        section.hasAddMenu ? /* @__PURE__ */ jsx6(Select2, { size: "sm", placeholder: "\uFF0B", options: section.addOptions, value: "", label: section.addLabel, onChange: (id) => ui4({ kind: "addItem", sectionId: section.id, itemId: id }) }) : null
+        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 ui4 = (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: () => ui4({ kind: "focusField", fieldId: row.id }),
-        onContextMenu: (x, y) => ui4({ kind: "contextMenu", fieldId: row.id, x, y }),
-        leading: row.showKeyframes ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(StopwatchIcon, {}), label: "Toggle animation", active: row.animated, onClick: () => ui4({ kind: "keyframe", fieldId: row.id, op: "toggleAnim" }) }),
-          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(PrevIcon, {}), label: "Previous keyframe", disabled: row.prevDisabled, onClick: () => ui4({ kind: "keyframe", fieldId: row.id, op: "prev" }) }) : null,
-          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(DiamondIcon, { filled: row.onKeyframe }), label: row.keyframeLabel, onClick: () => ui4({ kind: "keyframe", fieldId: row.id, op: row.keyframeOp }) }) : null,
-          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(NextIcon, {}), label: "Next keyframe", disabled: row.nextDisabled, onClick: () => ui4({ kind: "keyframe", fieldId: row.id, op: "next" }) }) : null
+        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) => ui4({ kind: "setEasing", fieldId: row.id, easing: v }) }) : null,
-          row.showKeyframes ? /* @__PURE__ */ jsx6(Badge2, { size: "sm", children: row.keyframeChip }) : null,
-          row.showToken ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(LinkIcon, {}), label: row.tokenActionLabel, active: row.bound, onClick: () => ui4({ kind: "bindToken", fieldId: row.id }) }) : null,
-          row.showReset ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ResetIcon, {}), label: "Reset to default", onClick: () => ui4({ kind: "resetField", fieldId: row.id }) }) : null
+          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({
@@ -4498,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();
@@ -4509,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();
@@ -4751,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",
@@ -5046,26 +5046,26 @@ function HistoryPanelView({ controller }) {
   const getSnapshot = useCallback4(() => controller.getRevision(), [controller]);
   useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
   const view = historyViewState(controller);
-  const ui4 = (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: () => ui4({ kind: "undo" }) }),
-          /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(RedoIcon, {}), label: "Redo", disabled: view.cannotRedo, onClick: () => ui4({ 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: () => ui4({ 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) => ui4({ 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: () => ui4({ kind: "confirmClear" }), onCancel: () => ui4({ 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
@@ -5119,33 +5119,33 @@ function HistoryCancelButton({ entryId, controller }) {
     }
   );
 }
-function HistoryRowView({ row, controller }) {
-  const ui4 = (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: () => ui4({ kind: "jump", entryId: row.entryId }),
-      onMouseEnter: () => ui4({ kind: "hover", entryId: row.entryId }),
-      onContextMenuAt: (x, y) => ui4({ 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 })
     }
   );
 }
@@ -6183,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);
@@ -6276,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);
@@ -6364,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 () => {
@@ -6496,6 +6652,8 @@ function createColorPanel(options = {}) {
         dispose() {
           root?.unmount();
           root = null;
+          unrender?.();
+          unrender = null;
           controller.dispose();
         }
       };
@@ -8981,11 +9139,11 @@ var FindController = class {
    * @param text - The new query text.
    * @param immediate - Skip the debounce (a paste, or pressing Enter).
    */
-  setText(text4, immediate = false) {
-    if (text4 === this.text) return;
-    this.text = text4;
+  setText(text5, immediate = false) {
+    if (text5 === this.text) return;
+    this.text = text5;
     this.index = -1;
-    if (text4 === "") {
+    if (text5 === "") {
       this.clearResults("idle");
       this.emitQuery(true);
       return;
@@ -9013,8 +9171,8 @@ var FindController = class {
     this.notify();
   }
   /** The replacement text. Never emitted on its own — a replacement is not a search. */
-  setReplaceText(text4) {
-    this.replaceText = text4;
+  setReplaceText(text5) {
+    this.replaceText = text5;
     this.notify();
   }
   /** Show or hide the replace row. */
@@ -12304,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;
   }
@@ -12596,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);
@@ -12611,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]);
@@ -12627,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":
@@ -12650,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 text4 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
-      this.typeAhead = { text: text4, 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(text4)) {
+        if (candidate.node.label.toLowerCase().startsWith(text5)) {
           this.focusedId = candidate.id;
           this.select([candidate.id]);
           return true;
@@ -12681,9 +12839,9 @@ var TreeController = class {
     return true;
   }
   /** Update the rename draft. */
-  updateRenameDraft(text4) {
+  updateRenameDraft(text5) {
     if (!this.renaming) return;
-    this.renaming = { ...this.renaming, draft: text4 };
+    this.renaming = { ...this.renaming, draft: text5 };
     this.notify();
   }
   /**
@@ -13412,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,
@@ -13423,7 +13581,7 @@ function TreePanelView({
             openOn,
             columns
           },
-          row.id
+          row2.id
         )) }) })
       }
     ) });
@@ -13465,7 +13623,7 @@ function TreePanelView({
   ] });
 }
 function TreeRowView({
-  row,
+  row: row2,
   controller,
   state,
   rowHeight,
@@ -13473,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",
@@ -13493,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
       },
@@ -13518,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();
@@ -13579,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)),
@@ -13594,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
             ))
@@ -13605,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;
@@ -13847,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,
@@ -13889,6 +14049,7 @@ export {
   MIXED,
   NODEGRAPH_PANEL_ID,
   NodeGraphPanelView,
+  SPACE_LABEL,
   TREE_PANEL_ID,
   Thumbnail,
   TreeController,
@@ -13906,6 +14067,7 @@ export {
   allIds,
   anchorStateOf,
   appliedCount,
+  applyColorUi,
   applyHistoryUi,
   applyInspectorUi,
   applyLayersUi,
@@ -13923,6 +14085,9 @@ export {
   collectDescendants,
   colorManifest,
   colorPanel,
+  colorRuntimeComponents,
+  colorViewManifest,
+  colorViewState,
   commentsManifest,
   commentsPanel,
   commitPolicyOf,