@xenosystem/blocks 0.12.1 → 0.12.3

package/dist/auth/index.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import { ReactNode } from 'react';
 import { PanelModule, PanelManifest, BlockDeclaration } from '@xenosystem/block-sdk';
 import { PanelTone } from '@xenosystem/components/chrome';
@@ -314,7 +314,7 @@ interface AuthGateViewProps {
     heroSrc?: string;
     now?: () => number;
 }
-declare function AuthGateView$1({ controller, productName, children, heroSrc, now }: AuthGateViewProps): react.JSX.Element;
+declare function AuthGateView$1({ controller, productName, children, heroSrc, now }: AuthGateViewProps): React.JSX.Element;
 
 /**
  * The auth gate AS A DECLARATION — the first block written the way `xeno-apps/SPEC.md` §8d says every

package/dist/edit/index.d.ts

@@ -1,6 +1,7 @@
-import { PanelHost, PanelModule, PanelManifest } from '@xenosystem/block-sdk';
+import { PanelHost, PanelModule, PanelManifest, BlockDeclaration } from '@xenosystem/block-sdk';
 import { FlatRow as FlatRow$1, DropTarget, ThrottleClock, VirtualWindow, DropPosition } from '@xenosystem/tree-core';
 export { DropPosition, DropTarget } from '@xenosystem/tree-core';
+import * as React from 'react';
 import { ReactElement, ReactNode } from 'react';
 import { XenoTimebase, XenoTick } from '@xenosystem/time-core';
 
@@ -1360,7 +1361,14 @@ declare class InspectorPanelController {
  * components cannot cross a sandbox RPC boundary, so a sandboxed host simply cannot supply them and
  * `type:'custom'` fields degrade to their JSON representation (union spec §1.1).
  */
-type CreateInspectorPanelOptions = InspectorPanelControllerOptions;
+interface CreateInspectorPanelOptions extends InspectorPanelControllerOptions {
+    /**
+     * Draw the panel yourself — a host that mounts the block AS ITS DECLARATION renders
+     * `INSPECTOR_DECLARATION` from `inspectorViewState(controller)` with `inspectorRuntimeComponents(controller)`
+     * in its registry and applies `ui` intents with `applyInspectorUi`. Default: the code view.
+     */
+    render?: (root: HTMLElement, controller: InspectorPanelController) => () => void;
+}
 /**
  * Build the Inspector panel module.
  *
@@ -1469,6 +1477,149 @@ declare function nudgeValue(current: number, direction: number, options: Numeric
 /** ARIA slider attributes for a numeric field (Sound ships the only accessible fields today). */
 declare function ariaSliderProps(field: XenoInspectorField, value: number | null): Record<string, string | number | undefined>;
 
+/**
+ * The inspector AS A DECLARATION — the fifth block written the §8d way (auth gate, agent, account,
+ * transport, inspector), and the first whose rows carry a runtime-bound unit.
+ *
+ * Presentation contract: input `view` (an {@link InspectorViewState} the runtime derives from the
+ * controller on every draw — sections already projected, every row flag already decided), output
+ * `ui` (an {@link InspectorUiIntent}) applied by the runtime to the controller's own methods. The
+ * declaration composes the SHELL: search and target chip, the multi-select banner, sections with
+ * their enable switch / badge / actions / add menu, one `Field` row per property with the keyframe
+ * cluster leading and easing / chip / bind-token / reset trailing, the empty state.
+ *
+ * What a declaration cannot hold is the CELL: scrub gestures on an axis label, select-on-focus,
+ * wheel and arrow nudges, a draft that commits on blur. That is `inspector/FieldWidget`, a unit the
+ * runtime registers bound to its controller (see {@link inspectorRuntimeComponents}) — the same
+ * shape as `slot`: the declaration names it and binds `field: { item: '' }`; the runtime supplies it.
+ *
+ * The code view (`InspectorPanelView`) draws the same model; the test holds the two byte-identical.
+ */
+
+/** One projected row — the field plus every flag the row's chrome reads, decided by the runtime. */
+interface InspectorViewField {
+    id: string;
+    sectionId: string;
+    label: string;
+    title: string;
+    focused: boolean;
+    bound: boolean;
+    unbound: boolean;
+    tokenLabel?: string;
+    tokenTitle?: string;
+    showKeyframes: boolean;
+    animated: boolean;
+    onKeyframe: boolean;
+    prevDisabled: boolean;
+    nextDisabled: boolean;
+    keyframeLabel: string;
+    keyframeOp: 'add' | 'remove';
+    showEasing: boolean;
+    easing: string;
+    easingOptions: {
+        value: string;
+        label: string;
+    }[];
+    keyframeChip: string;
+    showToken: boolean;
+    tokenActionLabel: string;
+    showReset: boolean;
+    showInfoNote: boolean;
+    infoNote?: string;
+    /** The field record itself — what `inspector/FieldWidget` renders. */
+    field: XenoInspectorField;
+}
+interface InspectorViewSection {
+    id: string;
+    title: string;
+    collapsible: boolean;
+    collapsed: boolean;
+    hasEnabled: boolean;
+    enabled?: boolean;
+    badge?: string;
+    actions: {
+        id: string;
+        sectionId: string;
+        label: string;
+        glyph: string;
+        disabled?: boolean;
+    }[];
+    hasAddMenu: boolean;
+    hasActions: boolean;
+    addLabel: string;
+    addOptions: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+        group?: string;
+    }[];
+    showEmptyHint: boolean;
+    emptyHint?: string;
+    labelWidth: number;
+    fields: InspectorViewField[];
+}
+/** What the runtime pushes on `view`. */
+interface InspectorViewState {
+    searchShown: boolean;
+    filter: string;
+    hasTarget: boolean;
+    targetLabel: string;
+    multi: boolean;
+    banner: string;
+    sections: InspectorViewSection[];
+    empty: boolean;
+    emptyTitle: string;
+}
+type InspectorUiIntent = {
+    kind: 'filter';
+    value: string;
+} | {
+    kind: 'toggleSectionCollapsed';
+    sectionId: string;
+} | {
+    kind: 'toggleSectionEnabled';
+    sectionId: string;
+} | {
+    kind: 'runAction';
+    sectionId: string;
+    actionId: string;
+} | {
+    kind: 'addItem';
+    sectionId: string;
+    itemId: string;
+} | {
+    kind: 'focusField';
+    fieldId: string;
+} | {
+    kind: 'contextMenu';
+    fieldId: string;
+    x: number;
+    y: number;
+} | {
+    kind: 'keyframe';
+    fieldId: string;
+    op: 'toggleAnim' | 'prev' | 'next' | 'add' | 'remove';
+} | {
+    kind: 'setEasing';
+    fieldId: string;
+    easing: string;
+} | {
+    kind: 'bindToken';
+    fieldId: string;
+} | {
+    kind: 'resetField';
+    fieldId: string;
+};
+/** Derive the view state from the live controller — the runtime calls this on every draw. */
+declare function inspectorViewState(c: InspectorPanelController): InspectorViewState;
+/** Apply a `ui` intent to the controller — the runtime's half of the contract. */
+declare function applyInspectorUi(c: InspectorPanelController, intent: InspectorUiIntent): void;
+declare const inspectorViewManifest: PanelManifest;
+declare const BEHAVIOURS: {
+    'edit/inspectorPanelView': (inputs: Record<string, unknown>) => InspectorViewState;
+};
+declare const INSPECTOR_DECLARATION: BlockDeclaration;
+
 /**
  * `InspectorPanelView` — the React rendering half of the Inspector panel.
  *
@@ -1484,12 +1635,17 @@ interface InspectorPanelViewProps {
     controller: InspectorPanelController;
 }
 /**
- * The inspector shell over the chrome family: search, the target chip, the multi-select banner,
- * sections with an enable switch / badge / actions / add menu, and one `Field` row per property with
- * the keyframe cluster leading and bind-token / reset / easing trailing. The keyboard model and every
- * intent stay in the controller.
+ * The inspector shell over the chrome family, drawn from the SAME view state as `INSPECTOR_DECLARATION`
+ * (`inspectorViewState(controller)`) — the declaration test holds the two byte-identical. The keyboard
+ * model and every intent stay in the controller; the cell is `FieldWidget`, bound to it.
  */
 declare function InspectorPanelView({ controller }: InspectorPanelViewProps): ReactElement;
+/**
+ * The units the runtime registers for `INSPECTOR_DECLARATION`, bound to ITS controller: the cell
+ * (`inspector/FieldWidget`), the keyboard group (`inspector/Properties`), and the glyphs. A
+ * declaration can name them and bind their data props; only the runtime can supply the controller.
+ */
+declare function inspectorRuntimeComponents(controller: InspectorPanelController): Record<string, React.ComponentType<any>>;
 
 /**
  * The canonical History wire contract (union spec §3): `XenoHistoryState` in,
@@ -6461,4 +6617,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, type HistoryKeyEvent, HistoryPanelController, type HistoryPanelControllerOptions, type HistoryPanelSerialized, HistoryPanelView, type HistoryPanelViewProps, type ProjectOptions as HistoryProjectOptions, type HistoryRow, type Hsl, type Hsv, IMPLEMENTED_TREE_MODES, type InspectorKeyEvent, InspectorPanelController, type InspectorPanelControllerOptions, type InspectorPanelSerialized, InspectorPanelView, type InspectorPanelViewProps, type ProjectOptions$1 as InspectorProjectOptions, 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, 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, hslToRgb, hsvFromHex, hsvToRgb, inspectorManifest, inspectorPanel, 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, type HistoryKeyEvent, HistoryPanelController, type HistoryPanelControllerOptions, type HistoryPanelSerialized, HistoryPanelView, type HistoryPanelViewProps, type ProjectOptions as HistoryProjectOptions, type HistoryRow, type Hsl, type Hsv, IMPLEMENTED_TREE_MODES, BEHAVIOURS 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, 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, 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 };

package/dist/edit/index.js

@@ -1871,8 +1871,8 @@ function constraintsOf(field) {
     scale: field.scale
   };
 }
-function parseNumeric(text) {
-  const trimmed = String(text).trim();
+function parseNumeric(text2) {
+  const trimmed = String(text2).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 +1897,8 @@ function normalizeNumeric(value, c) {
 function formatNumeric(value, field) {
   if (!Number.isFinite(value)) return "";
   const precision = field.precision;
-  const text = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
-  return field.unit ? `${text}${field.unit}` : text;
+  const text2 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
+  return field.unit ? `${text2}${field.unit}` : text2;
 }
 function usesLogScale(c) {
   return c.scale === "log" && typeof c.min === "number" && typeof c.max === "number" && c.min > 0 && c.max > c.min;
@@ -2232,44 +2232,44 @@ var InspectorPanelController = class {
     if (!field || !isFieldEditable(field)) return;
     const mixed = isFieldMixed(field);
     const value = this.getFieldValue(fieldId);
-    const text = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
-    this.drafts.set(fieldId, { text, original: value });
+    const text2 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
+    this.drafts.set(fieldId, { text: text2, original: value });
     this.focusedFieldId = fieldId;
     this.emitFieldFocus(fieldId);
     this.notify();
   }
   /** Update the draft text (typing). Emits nothing under the `blur` policy. */
-  setDraft(fieldId, text) {
+  setDraft(fieldId, text2) {
     const draft = this.drafts.get(fieldId);
     if (!draft) {
-      this.drafts.set(fieldId, { text, original: this.getFieldValue(fieldId) });
+      this.drafts.set(fieldId, { text: text2, original: this.getFieldValue(fieldId) });
     } else {
-      draft.text = text;
+      draft.text = text2;
     }
     const field = this.getField(fieldId);
     if (field && commitPolicyOf(field) === "live") {
-      const parsed = this.parseDraft(fieldId, text);
+      const parsed = this.parseDraft(fieldId, text2);
       if (parsed.ok) this.emitSet(fieldId, parsed.value);
     }
     this.notify();
   }
   /** Parse a draft string into a field-appropriate value. */
-  parseDraft(fieldId, text) {
+  parseDraft(fieldId, text2) {
     const field = this.getField(fieldId);
     if (!field) return { ok: false };
     if (field.type === "number") {
-      const parsed = parseNumeric(text);
+      const parsed = parseNumeric(text2);
       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(text) };
+        return { ok: true, value: JSON.parse(text2) };
       } catch {
         return { ok: false };
       }
     }
-    return { ok: true, value: text };
+    return { ok: true, value: text2 };
   }
   /**
    * Commit the draft (Enter / blur). Invalid input reverts instead of committing garbage.
@@ -2810,6 +2810,271 @@ var InspectorPanelController = class {
 
 // src/edit/inspector/react/InspectorPanelView.tsx
 import { useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+
+// src/edit/inspector/declaration.ts
+function inspectorViewState(c) {
+  const targets = c.getTargets();
+  const multi = targets.length > 1;
+  const blocked = multi && !c.canEditTargets();
+  const showKeyframes = c.areKeyframesShown();
+  const showTokens = c.areTokensShown();
+  const focusedId = c.getFocused();
+  const labelWidth = c.getLabelWidth();
+  const sections = c.getSections().map((p) => {
+    const s = p.section;
+    return {
+      id: s.id,
+      title: s.title,
+      collapsible: !!s.collapsible,
+      collapsed: p.collapsed,
+      hasEnabled: s.enabled !== void 0,
+      enabled: s.enabled?.value,
+      badge: s.badge,
+      actions: (s.actions ?? []).map((a) => ({ id: a.id, sectionId: s.id, label: a.label, glyph: a.label.slice(0, 1), disabled: a.disabled })),
+      hasAddMenu: !!s.addMenu && s.addMenu.length > 0,
+      hasActions: (s.actions?.length ?? 0) > 0 || !!s.addMenu && s.addMenu.length > 0,
+      addLabel: `Add to ${s.title}`,
+      addOptions: (s.addMenu ?? []).map((i) => ({ value: i.id, label: i.label, disabled: i.disabled, group: i.group })),
+      showEmptyHint: p.empty && !!s.emptyHint,
+      emptyHint: s.emptyHint,
+      labelWidth,
+      fields: p.fields.map((field) => {
+        const anim = field.anim;
+        const sk = showKeyframes && !!anim;
+        const bound = !!field.token?.tokenId;
+        const easing = anim?.easing ?? "";
+        const easingOptions = anim?.easingOptions ?? [];
+        const easingAll = easingOptions.some((o) => o.value === easing) ? easingOptions : [{ value: easing, label: easing || "\u2014" }, ...easingOptions];
+        const tokenName = field.token?.tokenName ?? field.token?.tokenId ?? void 0;
+        return {
+          id: field.id,
+          sectionId: s.id,
+          label: field.label,
+          title: field.description ?? field.label,
+          focused: focusedId === field.id,
+          bound,
+          unbound: !bound,
+          tokenLabel: tokenName,
+          tokenTitle: bound ? `Bound to ${tokenName}` : void 0,
+          showKeyframes: sk,
+          animated: sk && !!anim.animated,
+          onKeyframe: sk && !!anim.onKeyframe,
+          prevDisabled: sk ? anim.canPrev === false : false,
+          nextDisabled: sk ? anim.canNext === false : false,
+          keyframeLabel: sk && anim.onKeyframe ? "Remove keyframe" : "Add keyframe",
+          keyframeOp: sk && anim.onKeyframe ? "remove" : "add",
+          showEasing: sk && !!anim.animated && !!anim.onKeyframe,
+          easing,
+          easingOptions: easingAll.map((o) => ({ value: o.value, label: o.label })),
+          keyframeChip: sk ? c.keyframeChip(field.id) : "",
+          showToken: showTokens && field.token?.bindable !== false,
+          tokenActionLabel: bound ? "Unbind token" : "Bind token",
+          showReset: field.defaultValue !== void 0 && isFieldEditable(field),
+          showInfoNote: !!field.description && field.type === "info",
+          infoNote: field.description,
+          field
+        };
+      })
+    };
+  });
+  return {
+    searchShown: c.isSearchShown(),
+    filter: c.getFilter(),
+    hasTarget: targets.length > 0,
+    targetLabel: multi ? `${targets.length} selected` : targets[0]?.label ?? targets[0]?.id ?? "",
+    multi,
+    banner: blocked ? `${targets.length} selected \u2014 multi-editing is disabled` : `${targets.length} selected \xB7 shared values shown`,
+    sections,
+    empty: sections.length === 0,
+    emptyTitle: targets.length === 0 ? "Nothing selected" : "No properties"
+  };
+}
+function applyInspectorUi(c, intent) {
+  switch (intent.kind) {
+    case "filter":
+      c.setFilter(intent.value);
+      break;
+    case "toggleSectionCollapsed":
+      c.toggleSectionCollapsed(intent.sectionId);
+      break;
+    case "toggleSectionEnabled":
+      c.toggleSectionEnabled(intent.sectionId);
+      break;
+    case "runAction":
+      c.runAction(intent.sectionId, intent.actionId);
+      break;
+    case "addItem":
+      c.addItem(intent.sectionId, intent.itemId);
+      break;
+    case "focusField":
+      c.focusField(intent.fieldId);
+      break;
+    case "contextMenu":
+      c.requestContextMenu(intent.fieldId, intent.x, intent.y);
+      break;
+    case "keyframe":
+      c.keyframe(intent.fieldId, intent.op);
+      break;
+    case "setEasing":
+      c.keyframe(intent.fieldId, "setEasing", intent.easing);
+      break;
+    case "bindToken": {
+      const bound = !!c.getSections().flatMap((p) => p.fields).find((f) => f.id === intent.fieldId)?.token?.tokenId;
+      c.bindToken(intent.fieldId, bound ? null : c.getTokens()[0]?.id ?? null);
+      break;
+    }
+    case "resetField":
+      c.resetField(intent.fieldId);
+      break;
+  }
+}
+var inspectorViewManifest = {
+  id: inspectorManifest.id,
+  version: "1.0.0",
+  title: "Inspector",
+  category: "edit",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The InspectorViewState the runtime derives from the controller on every draw." }],
+  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 text = (b) => ({ component: "text", props: { text: b } });
+var ui = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var iconButton = (glyph, label, emit, extra = {}) => ({
+  component: "chrome/IconButton",
+  ...extra.when ? { when: extra.when } : {},
+  props: { size: { value: "sm" }, icon: { node: { component: `inspector/${glyph}` } }, label, ...extra.props ?? {} },
+  on: { onClick: emit }
+});
+var INSPECTOR_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: inspectorViewManifest,
+  behaviour: "edit/inspectorPanelView",
+  composition: {
+    component: "chrome/Column",
+    props: { className: { value: "xeno-inspector-panel" } },
+    children: [
+      {
+        component: "chrome/Stack",
+        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/Stack", when: { input: "view.multi" }, props: { pad: { value: "inset" } }, children: [{ component: "chrome/Text", props: { role: { value: "caption" } }, children: [text({ input: "view.banner" })] }] },
+      {
+        component: "chrome/ScrollArea",
+        children: [
+          {
+            component: "inspector/Properties",
+            children: [
+              {
+                component: "chrome/Section",
+                each: { input: "view.sections", key: "id" },
+                props: {
+                  title: { item: "title" },
+                  flush: { value: true },
+                  collapsible: { item: "collapsible" },
+                  collapsed: { item: "collapsed" },
+                  enabled: { item: "enabled" },
+                  badge: { node: { component: "chrome/Badge", when: { item: "badge" }, children: [text({ item: "badge" })] } },
+                  actions: {
+                    node: {
+                      component: "fragment",
+                      when: { item: "hasActions" },
+                      children: [
+                        {
+                          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" } }) }
+                        },
+                        {
+                          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: {
+                  onCollapsedChange: ui("toggleSectionCollapsed", { sectionId: { item: "id" } }),
+                  onEnabledChange: ui("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/FieldGroup",
+                    props: { labelWidth: { item: "labelWidth" } },
+                    children: [
+                      {
+                        component: "fragment",
+                        each: { item: "fields", key: "id" },
+                        children: [
+                          {
+                            component: "chrome/Field",
+                            props: {
+                              label: { item: "label" },
+                              title: { item: "title" },
+                              focused: { item: "focused" },
+                              leading: {
+                                node: {
+                                  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" } } })
+                                  ]
+                                }
+                              },
+                              trailing: {
+                                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" } })
+                                  ]
+                                }
+                              }
+                            },
+                            on: {
+                              onLabelClick: ui("focusField", { fieldId: { item: "id" } }),
+                              onContextMenu: ui("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: "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/EmptyState", when: { input: "view.empty" }, props: { title: { input: "view.emptyTitle" } } }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+};
+
+// src/edit/inspector/react/InspectorPanelView.tsx
 import { Badge as Badge2, Column as Column2, EmptyState as EmptyState2, Field, FieldGroup, IconButton as IconButton3, ScrollArea as ScrollArea2, SearchField as SearchField2, Section, Select as Select2, Stack as Stack2, Text as Text3 } from "@xenosystem/components/chrome";
 
 // src/edit/inspector/react/icons.tsx
@@ -2979,7 +3244,7 @@ function NumberWidget({ field, controller, component }) {
     },
     [controller, editable, field.id, component]
   );
-  const text = component !== void 0 ? (() => {
+  const text2 = 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) : "";
@@ -2991,7 +3256,7 @@ function NumberWidget({ field, controller, component }) {
       Input2,
       {
         inputMode: "decimal",
-        value: text,
+        value: text2,
         placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder,
         mixed,
         readOnly: !editable,
@@ -3180,8 +3445,20 @@ function InspectorPanelView({ controller }) {
   const subscribe = useCallback3((cb) => controller.subscribe(cb), [controller]);
   const getSnapshot = useCallback3(() => controller.getRevision(), [controller]);
   useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
-  const sections = controller.getSections();
-  const targets = controller.getTargets();
+  const view = inspectorViewState(controller);
+  return /* @__PURE__ */ jsxs5(Column2, { className: "xeno-inspector-panel", children: [
+    view.searchShown ? /* @__PURE__ */ jsxs5(Stack2, { direction: "row", gap: 6, children: [
+      /* @__PURE__ */ jsx6(SearchField2, { value: view.filter, onChange: (v) => controller.setFilter(v), placeholder: "Search properties", label: "Search properties" }),
+      view.hasTarget ? /* @__PURE__ */ jsx6(Badge2, { children: view.targetLabel }) : null
+    ] }) : null,
+    view.multi ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: view.banner }) }) : null,
+    /* @__PURE__ */ jsx6(ScrollArea2, { children: /* @__PURE__ */ jsxs5(InspectorProperties, { controller, children: [
+      view.sections.map((section) => /* @__PURE__ */ jsx6(SectionView, { section, controller }, section.id)),
+      view.empty ? /* @__PURE__ */ jsx6(EmptyState2, { title: view.emptyTitle }) : null
+    ] }) })
+  ] });
+}
+function InspectorProperties({ controller, children }) {
   const onKeyDown = useCallback3(
     (e) => {
       if (controller.handleKey({ key: e.key, ctrl: e.ctrlKey, meta: e.metaKey, shift: e.shiftKey, alt: e.altKey })) {
@@ -3191,83 +3468,66 @@ function InspectorPanelView({ controller }) {
     },
     [controller]
   );
-  const multi = targets.length > 1;
-  const blocked = multi && !controller.canEditTargets();
-  return /* @__PURE__ */ jsxs5(Column2, { className: "xeno-inspector-panel", children: [
-    controller.isSearchShown() ? /* @__PURE__ */ jsxs5(Stack2, { direction: "row", gap: 6, children: [
-      /* @__PURE__ */ jsx6(SearchField2, { value: controller.getFilter(), onChange: (v) => controller.setFilter(v), placeholder: "Search properties", label: "Search properties" }),
-      targets.length > 0 ? /* @__PURE__ */ jsx6(Badge2, { children: multi ? `${targets.length} selected` : targets[0]?.label ?? targets[0]?.id }) : null
-    ] }) : null,
-    multi ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: blocked ? `${targets.length} selected \u2014 multi-editing is disabled` : `${targets.length} selected \xB7 shared values shown` }) }) : null,
-    /* @__PURE__ */ jsx6(ScrollArea2, { children: /* @__PURE__ */ jsxs5("div", { onKeyDown, tabIndex: 0, role: "group", "aria-label": "Properties", className: "xeno-inspector-properties", children: [
-      sections.map((projected) => /* @__PURE__ */ jsx6(SectionView, { projected, controller }, projected.section.id)),
-      sections.length === 0 ? /* @__PURE__ */ jsx6(EmptyState2, { title: targets.length === 0 ? "Nothing selected" : "No properties" }) : null
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsx6("div", { onKeyDown, tabIndex: 0, role: "group", "aria-label": "Properties", className: "xeno-inspector-properties", children });
 }
-function SectionView({ projected, controller }) {
-  const { section, fields, collapsed, empty } = projected;
+function ActionGlyph({ glyph }) {
+  return /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: glyph });
+}
+function SectionView({ section, controller }) {
+  const ui2 = (intent) => applyInspectorUi(controller, intent);
+  const hasActions = section.actions.length > 0 || section.hasAddMenu;
   return /* @__PURE__ */ jsxs5(
     Section,
     {
       title: section.title,
       flush: true,
       collapsible: section.collapsible,
-      collapsed,
-      onCollapsedChange: () => controller.toggleSectionCollapsed(section.id),
-      enabled: section.enabled?.value,
-      onEnabledChange: section.enabled ? () => controller.toggleSectionEnabled(section.id) : void 0,
+      collapsed: section.collapsed,
+      onCollapsedChange: () => ui2({ kind: "toggleSectionCollapsed", sectionId: section.id }),
+      enabled: section.enabled,
+      onEnabledChange: () => ui2({ kind: "toggleSectionEnabled", sectionId: section.id }),
       badge: section.badge ? /* @__PURE__ */ jsx6(Badge2, { children: section.badge }) : null,
-      actions: /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        section.actions?.map((action) => /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: action.label.slice(0, 1) }), label: action.label, disabled: action.disabled, onClick: () => controller.runAction(section.id, action.id) }, action.id)),
-        section.addMenu && section.addMenu.length > 0 ? /* @__PURE__ */ jsx6(AddMenu, { section, controller }) : null
-      ] }),
+      actions: hasActions ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        section.actions.map((action) => /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ActionGlyph, { glyph: action.glyph }), label: action.label, disabled: action.disabled, onClick: () => ui2({ kind: "runAction", sectionId: section.id, actionId: action.id }) }, action.id)),
+        section.hasAddMenu ? /* @__PURE__ */ jsx6(Select2, { size: "sm", placeholder: "\uFF0B", options: section.addOptions, value: "", label: section.addLabel, onChange: (id) => ui2({ kind: "addItem", sectionId: section.id, itemId: id }) }) : null
+      ] }) : null,
       children: [
-        empty && section.emptyHint ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: section.emptyHint }) }) : null,
-        /* @__PURE__ */ jsx6(FieldGroup, { labelWidth: controller.getLabelWidth(), children: fields.map((field) => /* @__PURE__ */ jsx6(FieldRow, { field, controller }, field.id)) })
+        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)) })
       ]
     }
   );
 }
-function AddMenu({ section, controller }) {
-  const options = (section.addMenu ?? []).map((i) => ({ value: i.id, label: i.label, disabled: i.disabled, group: i.group }));
-  return /* @__PURE__ */ jsx6(Select2, { size: "sm", placeholder: "\uFF0B", options, value: "", label: `Add to ${section.title}`, onChange: (id) => controller.addItem(section.id, id) });
-}
-function FieldRow({ field, controller }) {
-  const focused = controller.getFocused() === field.id;
-  const bound = !!field.token?.tokenId;
-  const anim = field.anim;
-  const showKeyframes = controller.areKeyframesShown() && !!anim;
-  const easingOptions = anim?.easingOptions ?? [];
-  const easing = anim?.easing ?? "";
-  const easingAll = easingOptions.some((o) => o.value === easing) ? easingOptions : [{ value: easing, label: easing || "\u2014" }, ...easingOptions];
+function FieldRow({ row, controller }) {
+  const ui2 = (intent) => applyInspectorUi(controller, intent);
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs5(
       Field,
       {
-        label: field.label,
-        title: field.description ?? field.label,
-        focused,
-        onLabelClick: () => controller.focusField(field.id),
-        onContextMenu: (x, y) => controller.requestContextMenu(field.id, x, y),
-        leading: showKeyframes ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(StopwatchIcon, {}), label: "Toggle animation", active: anim.animated, onClick: () => controller.keyframe(field.id, "toggleAnim") }),
-          anim.animated ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-            /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(PrevIcon, {}), label: "Previous keyframe", disabled: anim.canPrev === false, onClick: () => controller.keyframe(field.id, "prev") }),
-            /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(DiamondIcon, { filled: !!anim.onKeyframe }), label: anim.onKeyframe ? "Remove keyframe" : "Add keyframe", onClick: () => controller.keyframe(field.id, anim.onKeyframe ? "remove" : "add") }),
-            /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(NextIcon, {}), label: "Next keyframe", disabled: anim.canNext === false, onClick: () => controller.keyframe(field.id, "next") })
-          ] }) : null
+        label: row.label,
+        title: row.title,
+        focused: row.focused,
+        onLabelClick: () => ui2({ kind: "focusField", fieldId: row.id }),
+        onContextMenu: (x, y) => ui2({ kind: "contextMenu", fieldId: row.id, x, y }),
+        leading: row.showKeyframes ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(StopwatchIcon, {}), label: "Toggle animation", active: row.animated, onClick: () => ui2({ kind: "keyframe", fieldId: row.id, op: "toggleAnim" }) }),
+          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(PrevIcon, {}), label: "Previous keyframe", disabled: row.prevDisabled, onClick: () => ui2({ kind: "keyframe", fieldId: row.id, op: "prev" }) }) : null,
+          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(DiamondIcon, { filled: row.onKeyframe }), label: row.keyframeLabel, onClick: () => ui2({ kind: "keyframe", fieldId: row.id, op: row.keyframeOp }) }) : null,
+          row.animated ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(NextIcon, {}), label: "Next keyframe", disabled: row.nextDisabled, onClick: () => ui2({ kind: "keyframe", fieldId: row.id, op: "next" }) }) : null
         ] }) : null,
         trailing: /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          showKeyframes && anim.animated && anim.onKeyframe ? /* @__PURE__ */ jsx6(Select2, { size: "sm", options: easingAll, value: easing, label: "Easing", onChange: (v) => controller.keyframe(field.id, "setEasing", v) }) : null,
-          showKeyframes ? /* @__PURE__ */ jsx6(Badge2, { size: "sm", children: controller.keyframeChip(field.id) }) : null,
-          controller.areTokensShown() && field.token?.bindable !== false ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(LinkIcon, {}), label: bound ? "Unbind token" : "Bind token", active: bound, onClick: () => controller.bindToken(field.id, bound ? null : controller.getTokens()[0]?.id ?? null) }) : null,
-          field.defaultValue !== void 0 && isFieldEditable(field) ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ResetIcon, {}), label: "Reset to default", onClick: () => controller.resetField(field.id) }) : null
+          row.showEasing ? /* @__PURE__ */ jsx6(Select2, { size: "sm", options: row.easingOptions, value: row.easing, label: "Easing", onChange: (v) => ui2({ kind: "setEasing", fieldId: row.id, easing: v }) }) : null,
+          row.showKeyframes ? /* @__PURE__ */ jsx6(Badge2, { size: "sm", children: row.keyframeChip }) : null,
+          row.showToken ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(LinkIcon, {}), label: row.tokenActionLabel, active: row.bound, onClick: () => ui2({ kind: "bindToken", fieldId: row.id }) }) : null,
+          row.showReset ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ResetIcon, {}), label: "Reset to default", onClick: () => ui2({ kind: "resetField", fieldId: row.id }) }) : null
         ] }),
-        children: bound ? /* @__PURE__ */ jsx6(Badge2, { title: `Bound to ${field.token?.tokenName ?? field.token?.tokenId}`, children: field.token?.tokenName ?? field.token?.tokenId }) : /* @__PURE__ */ jsx6(FieldWidget, { field, controller })
+        children: [
+          row.bound ? /* @__PURE__ */ jsx6(Badge2, { title: row.tokenTitle, children: row.tokenLabel }) : null,
+          row.unbound ? /* @__PURE__ */ jsx6(FieldWidget, { field: row.field, controller }) : null
+        ]
       }
     ),
-    field.description && field.type === "info" ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: field.description }) }) : null
+    row.showInfoNote ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: row.infoNote }) }) : null
   ] });
 }
 function FieldWidget({
@@ -3308,17 +3568,39 @@ function FieldWidget({
       return /* @__PURE__ */ jsx6(JsonWidget, { field, controller });
   }
 }
+function inspectorRuntimeComponents(controller) {
+  return {
+    "inspector/FieldWidget": ({ field }) => /* @__PURE__ */ jsx6(FieldWidget, { field, controller }),
+    "inspector/Properties": ({ children }) => /* @__PURE__ */ jsx6(InspectorProperties, { controller, children }),
+    "inspector/ActionGlyph": ActionGlyph,
+    "inspector/StopwatchIcon": StopwatchIcon,
+    "inspector/DiamondIcon": DiamondIcon,
+    "inspector/PrevIcon": PrevIcon,
+    "inspector/NextIcon": NextIcon,
+    "inspector/LinkIcon": LinkIcon,
+    "inspector/ResetIcon": ResetIcon
+  };
+}
 
 // src/edit/inspector/panel.ts
 function createInspectorPanel(options = {}) {
   return {
     manifest: inspectorManifest,
     activate(host) {
-      const controller = new InspectorPanelController(host, options);
+      const { render: customRender, ...controllerOptions } = options;
+      const controller = new InspectorPanelController(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 = createRoot2(el);
           root.render(createElement2(InspectorPanelView, { controller }));
           return () => {
@@ -3341,6 +3623,8 @@ function createInspectorPanel(options = {}) {
         dispose() {
           root?.unmount();
           root = null;
+          unrender?.();
+          unrender = null;
           controller.dispose();
         }
       };
@@ -8314,11 +8598,11 @@ var FindController = class {
    * @param text - The new query text.
    * @param immediate - Skip the debounce (a paste, or pressing Enter).
    */
-  setText(text, immediate = false) {
-    if (text === this.text) return;
-    this.text = text;
+  setText(text2, immediate = false) {
+    if (text2 === this.text) return;
+    this.text = text2;
     this.index = -1;
-    if (text === "") {
+    if (text2 === "") {
       this.clearResults("idle");
       this.emitQuery(true);
       return;
@@ -8346,8 +8630,8 @@ var FindController = class {
     this.notify();
   }
   /** The replacement text. Never emitted on its own — a replacement is not a search. */
-  setReplaceText(text) {
-    this.replaceText = text;
+  setReplaceText(text2) {
+    this.replaceText = text2;
     this.notify();
   }
   /** Show or hide the replace row. */
@@ -11983,12 +12267,12 @@ var TreeController = class {
     }
     if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
       const fresh = now - this.typeAhead.at > this.typeAheadMs;
-      const text = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
-      this.typeAhead = { text, at: now };
+      const text2 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
+      this.typeAhead = { text: text2, 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(text)) {
+        if (candidate.node.label.toLowerCase().startsWith(text2)) {
           this.focusedId = candidate.id;
           this.select([candidate.id]);
           return true;
@@ -12014,9 +12298,9 @@ var TreeController = class {
     return true;
   }
   /** Update the rename draft. */
-  updateRenameDraft(text) {
+  updateRenameDraft(text2) {
     if (!this.renaming) return;
-    this.renaming = { ...this.renaming, draft: text };
+    this.renaming = { ...this.renaming, draft: text2 };
     this.notify();
   }
   /**
@@ -13208,6 +13492,8 @@ export {
   HistoryPanelController,
   HistoryPanelView,
   IMPLEMENTED_TREE_MODES,
+  BEHAVIOURS as INSPECTOR_BEHAVIOURS,
+  INSPECTOR_DECLARATION,
   InspectorPanelController,
   InspectorPanelView,
   LAYER_COLUMNS,
@@ -13233,6 +13519,7 @@ export {
   allIds,
   anchorStateOf,
   appliedCount,
+  applyInspectorUi,
   applyPrecision,
   applyTangentDrag,
   ariaSliderProps,
@@ -13306,6 +13593,9 @@ export {
   hsvToRgb,
   inspectorManifest,
   inspectorPanel,
+  inspectorRuntimeComponents,
+  inspectorViewManifest,
+  inspectorViewState,
   interpolateSegment,
   isAncestorOf,
   isAnimated,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "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",
@@ -59,7 +59,7 @@
   },
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
-    "@xenosystem/block-sdk": ">=0.3.2 <1",
+    "@xenosystem/block-sdk": ">=0.3.3 <1",
     "@xenosystem/components": ">=0.16.0 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": ">=0.0.1",
@@ -75,7 +75,7 @@
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@xenosystem/block-sdk": "^0.3.2",
+    "@xenosystem/block-sdk": "^0.3.3",
     "@xenosystem/components": "^0.16.0",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": "0.0.1",