@xenosystem/blocks 0.12.4 → 0.12.5

package/dist/edit/index.d.ts

@@ -592,7 +592,14 @@ declare class LayersPanelController {
  */
 
 /** Options for {@link createLayersPanel}. */
-type CreateLayersPanelOptions = LayersPanelControllerOptions;
+interface CreateLayersPanelOptions extends LayersPanelControllerOptions {
+    /**
+     * Draw the panel yourself — a host that mounts the block AS ITS DECLARATION renders
+     * `LAYERS_DECLARATION` from `layersViewState(controller)` with `layersRuntimeComponents(controller)`
+     * in its registry and applies `ui` intents with `applyLayersUi`. Default: the code view.
+     */
+    render?: (root: HTMLElement, controller: LayersPanelController) => () => void;
+}
 /**
  * Build the Layers panel module.
  *
@@ -707,10 +714,10 @@ declare const layersManifest: PanelManifest;
  * `useSyncExternalStore` and forwards interactions. No tree logic, no op construction, no
  * virtualization math lives here — all of that is in the framework-free controller.
  *
- * Rendered over the chrome family: a `Toolbar` with the search, a `ScrollArea` the virtualizer
- * measures, a `RowList[tree]` of `VirtualWindow`ed `Row`s (the tree twisty, `selected`, `active`,
- * `dimmed` for a filter miss, `dropHint` while dragging, eye/lock in `leading`, S/M/R `ChipToggle`s,
- * a `ColorTag`, badges and the opacity readout in `trailing`), and a `StatusBar`.
+ * Drawn from the SAME view state as `LAYERS_DECLARATION` (`layersViewState(controller)`) — the
+ * declaration test holds the two byte-identical. Rows are data; the runtime-bound units are the
+ * scroller (measure, scroll mirror, keys, and the pointer DRAG by delegation), the rename field and
+ * the thumbnail.
  *
  * Drag is **pointer-based, never HTML5 DnD** (Electron file-drop conflict, union spec §1.2).
  *
@@ -722,6 +729,108 @@ interface LayersPanelViewProps {
     controller: LayersPanelController;
 }
 declare function LayersPanelView({ controller }: LayersPanelViewProps): ReactElement;
+/**
+ * The units the runtime registers for `LAYERS_DECLARATION`, bound to ITS controller: the scroller
+ * (with the drag), the rename field, the thumbnail, and the glyphs.
+ */
+declare function layersRuntimeComponents(controller: LayersPanelController): Record<string, React.ComponentType<any>>;
+
+/**
+ * The layers panel AS A DECLARATION — the seventh block written the §8d way (auth gate, agent,
+ * account, transport, inspector, history, layers), and the first tree with pointer drag.
+ *
+ * Presentation contract: input `view` (a {@link LayersViewState} the runtime derives from the
+ * controller on every draw — the window computed, every row flag decided), output `ui`
+ * (a {@link LayersUiIntent}) applied by the runtime to the controller's own methods. Every row is
+ * DATA: depth, selection, the drop hint, the tree twisty, the eye/lock/S-M-R/colour cluster, the
+ * adornments and the opacity readout all bind from the row record.
+ *
+ * What a declaration cannot hold: the SCROLLER (`layers/Scroller` — measured by the virtualizer,
+ * scrollTop mirrored, the keyboard model, and the pointer DRAG by delegation: press → threshold →
+ * beginDrag → updateDrag over rows → endDrag, with a press on a control inside a row never starting
+ * the row's drag), the RENAME field (`layers/RenameField`, a draft that commits on Enter/blur) and
+ * the THUMBNAIL (`layers/Thumbnail`, a canvas drawn from the controller's cache). The runtime
+ * registers those bound to its controller ({@link layersRuntimeComponents}).
+ */
+
+interface LayersViewRow {
+    id: string;
+    name: string;
+    title: string;
+    depth: number;
+    height: number;
+    selected: boolean;
+    active: boolean;
+    dimmed: boolean;
+    dropHint: 'before' | 'after' | 'into' | null;
+    /** `undefined` on a leaf — the twisty slot stays, empty. */
+    expanded?: boolean;
+    renaming: boolean;
+    notRenaming: boolean;
+    hasThumbnail: boolean;
+    noThumbnail: boolean;
+    thumbnailKey?: string;
+    showVisibility: boolean;
+    visible: boolean;
+    visibilityLabel: string;
+    showLock: boolean;
+    locked: boolean;
+    lockLabel: string;
+    showSolo: boolean;
+    solo: boolean;
+    showMute: boolean;
+    muted: boolean;
+    showArm: boolean;
+    armed: boolean;
+    showColor: boolean;
+    colorLabel: string | null;
+    adornments: {
+        key: string;
+        text: string;
+        title?: string;
+    }[];
+    showOpacity: boolean;
+    opacity: string;
+}
+interface LayersViewState {
+    searchShown: boolean;
+    filter: string;
+    totalHeight: number;
+    offsetTop: number;
+    rows: LayersViewRow[];
+    empty: boolean;
+    count: string;
+    orderLabel?: string;
+    thumbnailSize: number;
+}
+type LayersUiIntent = {
+    kind: 'filter';
+    value: string;
+} | {
+    kind: 'toggleExpanded';
+    id: string;
+} | {
+    kind: 'toggleProp';
+    id: string;
+    prop: 'visible' | 'locked' | 'solo' | 'muted' | 'armed';
+} | {
+    kind: 'beginRename';
+    id: string;
+} | {
+    kind: 'contextMenu';
+    id: string;
+    x: number;
+    y: number;
+};
+/** Derive the view state from the live controller — the runtime calls this on every draw. */
+declare function layersViewState(c: LayersPanelController): LayersViewState;
+/** Apply a `ui` intent to the controller — the runtime's half of the contract. */
+declare function applyLayersUi(c: LayersPanelController, intent: LayersUiIntent): void;
+declare const layersViewManifest: PanelManifest;
+declare const BEHAVIOURS$2: {
+    'edit/layersPanelView': (inputs: Record<string, unknown>) => LayersViewState;
+};
+declare const LAYERS_DECLARATION: BlockDeclaration;
 
 /**
  * Row thumbnail — draws whatever the host returned on the `thumbnail` input.
@@ -6727,4 +6836,4 @@ declare function TreeIcon({ name, size }: {
     size?: number;
 }): ReactNode;
 
-export { type BlendModeGroup, type BlendModeOption, type Box, COLOR_SPACES, COMMENTS_PANEL_ID, CURVE_PANEL_ID, type ChannelId, ColorPanelController, type ColorPanelControllerOptions, type ColorPanelSerialized, ColorPanelView, type ColorPanelViewProps, type ColorSpace, type ColorStopSink, type ColorToken, CommentsController, type CommentsControllerOptions, type CommentsHostBridge, type CommentsPanelState, CommentsPanelView, type CommentsPanelViewProps, type CommentsRenderContext, type CommentsThreadView, type CommentsViewState, type ConnectRules, type ConnectVerdict, type CreateColorPanelOptions, type CreateCommentsPanelOptions, type CreateCurvePanelOptions, type CreateFindPanelOptions, type CreateHistoryPanelOptions, type CreateInspectorPanelOptions, type CreateLayersPanelOptions, type CreateNodeGraphPanelOptions, type CreateTreePanelOptions, type CreateViewportPanelOptions, CurveController, type CurveControllerOptions, type CurveDragKind, type CurveDragState, type CurveHostBridge, type CurvePanelState, CurvePanelView, type CurvePanelViewProps, type CurvePreview, type CurveRenderConfig, type CurveRenderContext, type CurveViewState, DEFAULT_BLEND_MODES, DEFAULT_CURVE_ZOOM, DEFAULT_GRAPH_ZOOM, DEFAULT_ICON_MAP, DEFAULT_ORIGINAL_LABEL, type DropInput, EASING_PRESETS, EDIT_SPACES, EMPTY_HISTORY, EMPTY_SCHEMA, EMPTY_TREE, EMPTY_TREE_SOURCE, FIND_PANEL_ID, FindController, type FindControllerOptions, type FindHostBridge, type FindPanelState, FindPanelView, type FindPanelViewProps, type FindRenderContext, type FindViewState, type FlatRow, type FlattenOptions, GENERIC_ICON, GraphController, type GraphControllerOptions, type GraphDragKind, type GraphDragState, type GraphHostBridge, type GraphPanelState, type GraphPreview, type GraphRenderConfig, type GraphRenderContext, type GraphViewState, BEHAVIOURS as HISTORY_BEHAVIOURS, HISTORY_DECLARATION, type HistoryKeyEvent, HistoryPanelController, type HistoryPanelControllerOptions, type HistoryPanelSerialized, HistoryPanelView, type HistoryPanelViewProps, type ProjectOptions as HistoryProjectOptions, type HistoryRow, type HistoryUiIntent, type HistoryViewRow, type HistoryViewState, type Hsl, type Hsv, IMPLEMENTED_TREE_MODES, BEHAVIOURS$1 as INSPECTOR_BEHAVIOURS, INSPECTOR_DECLARATION, type InspectorKeyEvent, InspectorPanelController, type InspectorPanelControllerOptions, type InspectorPanelSerialized, InspectorPanelView, type InspectorPanelViewProps, type ProjectOptions$1 as InspectorProjectOptions, type InspectorUiIntent, type InspectorViewField, type InspectorViewSection, type InspectorViewState, LAYER_COLUMNS, type LayerColumn, type LayersKeyEvent, LayersPanelController, type LayersPanelControllerOptions, type LayersPanelSerialized, LayersPanelView, type LayersPanelViewProps, MIXED, NODEGRAPH_PANEL_ID, NodeGraphPanelView, type NodeGraphPanelViewProps, type NumericConstraints, type OklchDisplay, type ParseResult, type ProjectedSection, type Rgba, type ScrubOptions, type SelectMods, TREE_PANEL_ID, type TangentEdit, Thumbnail, type ThumbnailProps, TreeController, type TreeControllerOptions, type TreeHostBridge, TreeIcon, type TreeKeyEvent, type TreePanelState, TreePanelView, type TreePanelViewProps, type TreeRenderContext, type TreeRow, type TreeViewState, VIEWPORT_PANEL_ID, VIEWPORT_SLOTS, VIEW_STATE_OPS, ViewportController, type ViewportControllerOptions, type ViewportHostBridge, type ViewportPanelState, ViewportPanelView, type ViewportPanelViewProps, type ViewportRenderContext, type ViewportViewState, type XenoAddMenuItem, type XenoAnchorState, type XenoColorValue, type XenoCommentAuthor, type XenoCommentFilter, type XenoCommentMessage, type XenoCommentOp, type XenoCommentReaction, type XenoCommentSort, type XenoCommentThread, type XenoCommitPolicy, type XenoContextMenuRequest, type XenoCurveChannel, type XenoCurveInterpolation, type XenoCurveKey, type XenoCurveKeyRef, type XenoCurveOp, type XenoCurvePoint, XenoCurveScale, type XenoCurveScaleGeometry, type XenoCurveScaleState, type XenoCurveSelection, type XenoCurveSet, type XenoCurveViewport, type XenoCurveZoom, type XenoEasingPreset, type XenoEdge, type XenoFieldAnim, type XenoFieldFocus, type XenoFieldOption, type XenoFieldToken, type XenoFieldType, type XenoFieldValue, type XenoFindMatch, type XenoFindNavigate, type XenoFindOptions, type XenoFindQuery, type XenoFindReplace, type XenoFindResults, type XenoFindStatus, type XenoGradient, type XenoGraph, type XenoGraphOp, XenoGraphScale, type XenoGraphScaleGeometry, type XenoGraphScaleState, type XenoGraphSelection, type XenoGraphViewport, type XenoGraphZoom, type XenoHistoryEntry, type XenoHistoryIntent, type XenoHistoryMemory, type XenoHistoryOrder, type XenoHistoryScope, type XenoHistorySnapshot, type XenoHistorySource, type XenoHistoryState, type XenoHistoryStatus, type XenoInspectorEdit, type XenoInspectorField, type XenoInspectorSchema, type XenoInspectorSection, type XenoInspectorTarget, type XenoInspectorToken, type XenoKeyframeKind, type XenoLayerAdornment, type XenoLayerCap, type XenoLayerKind, type XenoLayerNode, type XenoLayerOp, type XenoLayerTree, type XenoNavigateRequest, type XenoNode, XenoNodeIndex, type XenoPort, type XenoPortDirection, type XenoPortRef, type XenoSectionAction, type XenoTangent, type XenoTangentMode, type XenoTangentSide, type XenoThreadActivate, type XenoThumbnailRequest, type XenoThumbnailResponse, type XenoTreeAction, type XenoTreeBadge, type XenoTreeCaps, type XenoTreeChildState, type XenoTreeChildrenResponse, type XenoTreeError, type XenoTreeGlyph, type XenoTreeIcon, type XenoTreeInvalidate, type XenoTreeMode, type XenoTreeModifiers, type XenoTreeNode, type XenoTreeNodeKind, type XenoTreeOp, type XenoTreeReveal, type XenoTreeSource, type XenoTreeSourceKind, type XenoTreeSourceState, type XenoViewportClient, type XenoViewportKey, type XenoViewportPointer, type XenoViewportSlot, type XenoViewportStats, type XenoViewportSurface, allFields, allIds, anchorStateOf, appliedCount, applyHistoryUi, applyInspectorUi, applyPrecision, applyTangentDrag, ariaSliderProps, boxesIntersect, canConnect, canRedo, canUndo, childStateOf, clamp, clampAlpha, clampTangent, collectDescendants, colorManifest, colorPanel, commentsManifest, commentsPanel, commitPolicyOf, componentsForSpace, computeSurfaceSize, constraintsOf, countIsMeaningful, createColorPanel, createCommentsPanel, createCurvePanel, createFindPanel, createHistoryPanel, createInspectorPanel, createLayersPanel, createNodeGraphPanel, createTreePanel, createViewportPanel, createsCycle, currentRowIndex, curveManifest, curvePanel, defaultIconFor, displayOrder, distanceToEdge, easeAt, easingPreset, edgeBounds, edgeKey, edgePath, edgesToReplace, edgesTouching, evaluateChannel, fieldMatches, findField, findManifest, findPanel, findPort, findSectionOf, fitToBounds, fitValueRange, flattenVisible, focusOrder, formatAge, formatNumeric, getAncestors, graphBounds, groupMatches, hasCap, hasDraggableTangents, hasTreeCap, hexFromHsv, highlightSegments, historyManifest, historyPanel, historyRuntimeComponents, historyViewManifest, historyViewState, hslToRgb, hsvFromHex, hsvToRgb, inspectorManifest, inspectorPanel, inspectorRuntimeComponents, inspectorViewManifest, inspectorViewState, interpolateSegment, isAncestorOf, isAnimated, isCollapsed, isColorSpace, isContainer, isEmptyContainer, isFieldEditable, isFieldMixed, isJumpable, isKeyEditable, isLayerColumn, isMixedValue, isOrphaned, isTreeContainer, isValidHex, isViewStateOp, keyRefId, layersManifest, layersPanel, liveEdges, makeColorValue, matchesFilter, messagesOf, mirrorTangent, nodeBounds, nodegraphManifest, nodegraphPanel, normalizeColorInput, normalizeHistoryState, normalizeKindKey, normalizeNumeric, normalizeRanges, normalizeSchema, normalizeTree, nudgeValue, oklchToRgb, parseCssColor, parseHexColor, parseNumeric, passesFilter, patternError, portHasRoom, portRefId, positionToValue, projectRows, projectSections, rangeBetween, resolveDropTarget, resolveIconName, rgbToHex, rgbToHsl, rgbToHsv, rgbToOklch, rgbaToCssHex, roundRgb, rowIndexOf, rowIndexOfEntry, safeAddColorStop, safeAddColorStops, sameKey, sampleChannel, scrubValue, segmentsAround, solveBezierT, sortThreads, surfaceChanged, tangentsForMode, tangentsToControlPoints, toViewportCoords, totalCount, treeManifest, treePanel, usesLogScale, valueExtent, valueToPosition, valuesEqual, viewportManifest, viewportPanel, visibleEdges, walkTree, wheelZoomFactor, zoomAboutCursor, zoomTimeAboutCursor, zoomValueAboutCursor };
+export { type BlendModeGroup, type BlendModeOption, type Box, COLOR_SPACES, COMMENTS_PANEL_ID, CURVE_PANEL_ID, type ChannelId, ColorPanelController, type ColorPanelControllerOptions, type ColorPanelSerialized, ColorPanelView, type ColorPanelViewProps, type ColorSpace, type ColorStopSink, type ColorToken, CommentsController, type CommentsControllerOptions, type CommentsHostBridge, type CommentsPanelState, CommentsPanelView, type CommentsPanelViewProps, type CommentsRenderContext, type CommentsThreadView, type CommentsViewState, type ConnectRules, type ConnectVerdict, type CreateColorPanelOptions, type CreateCommentsPanelOptions, type CreateCurvePanelOptions, type CreateFindPanelOptions, type CreateHistoryPanelOptions, type CreateInspectorPanelOptions, type CreateLayersPanelOptions, type CreateNodeGraphPanelOptions, type CreateTreePanelOptions, type CreateViewportPanelOptions, CurveController, type CurveControllerOptions, type CurveDragKind, type CurveDragState, type CurveHostBridge, type CurvePanelState, CurvePanelView, type CurvePanelViewProps, type CurvePreview, type CurveRenderConfig, type CurveRenderContext, type CurveViewState, DEFAULT_BLEND_MODES, DEFAULT_CURVE_ZOOM, DEFAULT_GRAPH_ZOOM, DEFAULT_ICON_MAP, DEFAULT_ORIGINAL_LABEL, type DropInput, EASING_PRESETS, EDIT_SPACES, EMPTY_HISTORY, EMPTY_SCHEMA, EMPTY_TREE, EMPTY_TREE_SOURCE, FIND_PANEL_ID, FindController, type FindControllerOptions, type FindHostBridge, type FindPanelState, FindPanelView, type FindPanelViewProps, type FindRenderContext, type FindViewState, type FlatRow, type FlattenOptions, GENERIC_ICON, GraphController, type GraphControllerOptions, type GraphDragKind, type GraphDragState, type GraphHostBridge, type GraphPanelState, type GraphPreview, type GraphRenderConfig, type GraphRenderContext, type GraphViewState, BEHAVIOURS as HISTORY_BEHAVIOURS, HISTORY_DECLARATION, type HistoryKeyEvent, HistoryPanelController, type HistoryPanelControllerOptions, type HistoryPanelSerialized, HistoryPanelView, type HistoryPanelViewProps, type ProjectOptions as HistoryProjectOptions, type HistoryRow, type HistoryUiIntent, type HistoryViewRow, type HistoryViewState, type Hsl, type Hsv, IMPLEMENTED_TREE_MODES, BEHAVIOURS$1 as INSPECTOR_BEHAVIOURS, INSPECTOR_DECLARATION, type InspectorKeyEvent, InspectorPanelController, type InspectorPanelControllerOptions, type InspectorPanelSerialized, InspectorPanelView, type InspectorPanelViewProps, type ProjectOptions$1 as InspectorProjectOptions, type InspectorUiIntent, type InspectorViewField, type InspectorViewSection, type InspectorViewState, BEHAVIOURS$2 as LAYERS_BEHAVIOURS, LAYERS_DECLARATION, LAYER_COLUMNS, type LayerColumn, type LayersKeyEvent, LayersPanelController, type LayersPanelControllerOptions, type LayersPanelSerialized, LayersPanelView, type LayersPanelViewProps, type LayersUiIntent, type LayersViewRow, type LayersViewState, MIXED, NODEGRAPH_PANEL_ID, NodeGraphPanelView, type NodeGraphPanelViewProps, type NumericConstraints, type OklchDisplay, type ParseResult, type ProjectedSection, type Rgba, type ScrubOptions, type SelectMods, TREE_PANEL_ID, type TangentEdit, Thumbnail, type ThumbnailProps, TreeController, type TreeControllerOptions, type TreeHostBridge, TreeIcon, type TreeKeyEvent, type TreePanelState, TreePanelView, type TreePanelViewProps, type TreeRenderContext, type TreeRow, type TreeViewState, VIEWPORT_PANEL_ID, VIEWPORT_SLOTS, VIEW_STATE_OPS, ViewportController, type ViewportControllerOptions, type ViewportHostBridge, type ViewportPanelState, ViewportPanelView, type ViewportPanelViewProps, type ViewportRenderContext, type ViewportViewState, type XenoAddMenuItem, type XenoAnchorState, type XenoColorValue, type XenoCommentAuthor, type XenoCommentFilter, type XenoCommentMessage, type XenoCommentOp, type XenoCommentReaction, type XenoCommentSort, type XenoCommentThread, type XenoCommitPolicy, type XenoContextMenuRequest, type XenoCurveChannel, type XenoCurveInterpolation, type XenoCurveKey, type XenoCurveKeyRef, type XenoCurveOp, type XenoCurvePoint, XenoCurveScale, type XenoCurveScaleGeometry, type XenoCurveScaleState, type XenoCurveSelection, type XenoCurveSet, type XenoCurveViewport, type XenoCurveZoom, type XenoEasingPreset, type XenoEdge, type XenoFieldAnim, type XenoFieldFocus, type XenoFieldOption, type XenoFieldToken, type XenoFieldType, type XenoFieldValue, type XenoFindMatch, type XenoFindNavigate, type XenoFindOptions, type XenoFindQuery, type XenoFindReplace, type XenoFindResults, type XenoFindStatus, type XenoGradient, type XenoGraph, type XenoGraphOp, XenoGraphScale, type XenoGraphScaleGeometry, type XenoGraphScaleState, type XenoGraphSelection, type XenoGraphViewport, type XenoGraphZoom, type XenoHistoryEntry, type XenoHistoryIntent, type XenoHistoryMemory, type XenoHistoryOrder, type XenoHistoryScope, type XenoHistorySnapshot, type XenoHistorySource, type XenoHistoryState, type XenoHistoryStatus, type XenoInspectorEdit, type XenoInspectorField, type XenoInspectorSchema, type XenoInspectorSection, type XenoInspectorTarget, type XenoInspectorToken, type XenoKeyframeKind, type XenoLayerAdornment, type XenoLayerCap, type XenoLayerKind, type XenoLayerNode, type XenoLayerOp, type XenoLayerTree, type XenoNavigateRequest, type XenoNode, XenoNodeIndex, type XenoPort, type XenoPortDirection, type XenoPortRef, type XenoSectionAction, type XenoTangent, type XenoTangentMode, type XenoTangentSide, type XenoThreadActivate, type XenoThumbnailRequest, type XenoThumbnailResponse, type XenoTreeAction, type XenoTreeBadge, type XenoTreeCaps, type XenoTreeChildState, type XenoTreeChildrenResponse, type XenoTreeError, type XenoTreeGlyph, type XenoTreeIcon, type XenoTreeInvalidate, type XenoTreeMode, type XenoTreeModifiers, type XenoTreeNode, type XenoTreeNodeKind, type XenoTreeOp, type XenoTreeReveal, type XenoTreeSource, type XenoTreeSourceKind, type XenoTreeSourceState, type XenoViewportClient, type XenoViewportKey, type XenoViewportPointer, type XenoViewportSlot, type XenoViewportStats, type XenoViewportSurface, allFields, allIds, anchorStateOf, appliedCount, applyHistoryUi, applyInspectorUi, applyLayersUi, applyPrecision, applyTangentDrag, ariaSliderProps, boxesIntersect, canConnect, canRedo, canUndo, childStateOf, clamp, clampAlpha, clampTangent, collectDescendants, colorManifest, colorPanel, commentsManifest, commentsPanel, commitPolicyOf, componentsForSpace, computeSurfaceSize, constraintsOf, countIsMeaningful, createColorPanel, createCommentsPanel, createCurvePanel, createFindPanel, createHistoryPanel, createInspectorPanel, createLayersPanel, createNodeGraphPanel, createTreePanel, createViewportPanel, createsCycle, currentRowIndex, curveManifest, curvePanel, defaultIconFor, displayOrder, distanceToEdge, easeAt, easingPreset, edgeBounds, edgeKey, edgePath, edgesToReplace, edgesTouching, evaluateChannel, fieldMatches, findField, findManifest, findPanel, findPort, findSectionOf, fitToBounds, fitValueRange, flattenVisible, focusOrder, formatAge, formatNumeric, getAncestors, graphBounds, groupMatches, hasCap, hasDraggableTangents, hasTreeCap, hexFromHsv, highlightSegments, historyManifest, historyPanel, historyRuntimeComponents, historyViewManifest, historyViewState, hslToRgb, hsvFromHex, hsvToRgb, inspectorManifest, inspectorPanel, inspectorRuntimeComponents, inspectorViewManifest, inspectorViewState, interpolateSegment, isAncestorOf, isAnimated, isCollapsed, isColorSpace, isContainer, isEmptyContainer, isFieldEditable, isFieldMixed, isJumpable, isKeyEditable, isLayerColumn, isMixedValue, isOrphaned, isTreeContainer, isValidHex, isViewStateOp, keyRefId, layersManifest, layersPanel, layersRuntimeComponents, layersViewManifest, layersViewState, liveEdges, makeColorValue, matchesFilter, messagesOf, mirrorTangent, nodeBounds, nodegraphManifest, nodegraphPanel, normalizeColorInput, normalizeHistoryState, normalizeKindKey, normalizeNumeric, normalizeRanges, normalizeSchema, normalizeTree, nudgeValue, oklchToRgb, parseCssColor, parseHexColor, parseNumeric, passesFilter, patternError, portHasRoom, portRefId, positionToValue, projectRows, projectSections, rangeBetween, resolveDropTarget, resolveIconName, rgbToHex, rgbToHsl, rgbToHsv, rgbToOklch, rgbaToCssHex, roundRgb, rowIndexOf, rowIndexOfEntry, safeAddColorStop, safeAddColorStops, sameKey, sampleChannel, scrubValue, segmentsAround, solveBezierT, sortThreads, surfaceChanged, tangentsForMode, tangentsToControlPoints, toViewportCoords, totalCount, treeManifest, treePanel, usesLogScale, valueExtent, valueToPosition, valuesEqual, viewportManifest, viewportPanel, visibleEdges, walkTree, wheelZoomFactor, zoomAboutCursor, zoomTimeAboutCursor, zoomValueAboutCursor };

package/dist/edit/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.12.4",
+  "version": "0.12.5",
   "description": "XENO Blocks — rung 3 of the front ladder: components composed into a contract-bearing unit (manifest: ports, intents, commands, agent surface), rendered by @xenosystem/workbench. ONE package, one subpath per family (/auth, /edit, /data, /time, /ops, /trust, /agent), one named export per block — XENO PACKAGE NAMING - STANDARD.md.",
   "license": "UNLICENSED",
   "type": "module",