@xenosystem/blocks 0.13.26 → 0.13.27

package/dist/edit/index.d.ts

@@ -827,7 +827,7 @@ 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$8: {
+declare const BEHAVIOURS$9: {
     'edit/layersPanelView': (inputs: Record<string, unknown>) => LayersViewState;
 };
 declare const LAYERS_DECLARATION: BlockDeclaration;
@@ -1723,7 +1723,7 @@ declare function inspectorViewState(c: InspectorPanelController): InspectorViewS
 /** 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$7: {
+declare const BEHAVIOURS$8: {
     'edit/inspectorPanelView': (inputs: Record<string, unknown>) => InspectorViewState;
 };
 declare const INSPECTOR_DECLARATION: BlockDeclaration;
@@ -2334,7 +2334,7 @@ declare function historyViewState(c: HistoryPanelController): HistoryViewState;
 /** Apply a `ui` intent to the controller — the runtime's half of the contract. */
 declare function applyHistoryUi(c: HistoryPanelController, intent: HistoryUiIntent): void;
 declare const historyViewManifest: PanelManifest;
-declare const BEHAVIOURS$6: {
+declare const BEHAVIOURS$7: {
     'edit/historyPanelView': (inputs: Record<string, unknown>) => HistoryViewState;
 };
 declare const HISTORY_DECLARATION: BlockDeclaration;
@@ -2896,7 +2896,7 @@ declare function colorViewState(c: ColorPanelController): ColorViewState;
 /** Apply a `ui` intent to the controller — the runtime's half of the contract. */
 declare function applyColorUi(c: ColorPanelController, intent: ColorUiIntent): void;
 declare const colorViewManifest: PanelManifest;
-declare const BEHAVIOURS$5: {
+declare const BEHAVIOURS$6: {
     'edit/colorPanelView': (inputs: Record<string, unknown>) => ColorViewState;
 };
 declare const COLOR_DECLARATION: BlockDeclaration;
@@ -3956,7 +3956,7 @@ declare function curveViewState(c: CurveController, options?: CurveViewOptions):
 /** Apply a `ui` intent to the controller — the runtime's half of the contract. */
 declare function applyCurveUi(c: CurveController, intent: CurveUiIntent): void;
 declare const curveViewManifest: PanelManifest;
-declare const BEHAVIOURS$4: {
+declare const BEHAVIOURS$5: {
     'edit/curvePanelView': (inputs: Record<string, unknown>) => CurveViewModel;
 };
 declare const CURVE_DECLARATION: BlockDeclaration;
@@ -4373,26 +4373,69 @@ declare const VIEWPORT_PANEL_ID = "xeno.core.viewport";
 declare const viewportManifest: PanelManifest;
 
 /**
- * The Viewport panel view.
+ * The Viewport panel AS A DECLARATION — the twenty-fourth block written the §8d way, the third
+ * DRAWN surface — and the one where the surface IS the panel: a canvas the host's renderer client
+ * draws into, nine overlay slots the host fills with whatever it likes, an element-scoped pointer
+ * and keyboard model. The chrome that is data sits OVER it: the stats readout (`chrome/Overlay`
+ * at the bottom, a `StatusBar` of fps and surface size) and the lost-context notice (a scrimmed
+ * `Overlay` with an error badge). Both are children of the runtime unit (`viewport/Surface`), which
+ * is positioned so they can be.
  *
- * **Where primitives fit and where they do not.** The stats readout uses `Badge`/`StatusBar`, but
- * the body of this panel is a canvas and nine positioned slots — there is no primitive for "a
- * drawing surface with overlay anchors", and inventing one would be a primitive with exactly one
- * consumer. The slot geometry is therefore local, and deliberately so.
+ * Presentation contract: input `view` (a {@link ViewportViewModel}). There is no `ui` output — every
+ * pointer and key reaches the controller through the surface, and the readouts have no controls.
+ */
+
+/** The half of a renderer's config the view reads. */
+interface ViewportViewOptions {
+    showStats?: boolean;
+    background?: string;
+}
+interface ViewportViewModel {
+    contextLost: boolean;
+    statsShown: boolean;
+    fpsLabel?: string;
+    surfaceLabel?: string;
+}
+/** Derive the view model from the live controller — the runtime calls this on every draw. */
+declare function viewportViewState(c: ViewportController, options?: ViewportViewOptions): ViewportViewModel;
+declare const viewportViewManifest: PanelManifest;
+declare const BEHAVIOURS$4: {
+    'edit/viewportPanelView': (inputs: Record<string, unknown>) => ViewportViewModel;
+};
+declare const VIEWPORT_DECLARATION: BlockDeclaration;
+
+/**
+ * The Viewport panel view — the CODE VIEW of `VIEWPORT_DECLARATION`, drawing the same
+ * {@link ViewportViewModel} byte-identical (the equivalence suite holds the two together). The one
+ * runtime-bound unit is the SURFACE (`viewport/Surface`) — and here the surface is the panel: a
+ * canvas the host's renderer client draws into, nine overlay slots the host fills, the element-scoped
+ * pointer and keyboard model. The stats readout and the lost-context notice are `Overlay`s over it.
  *
  * @module
  */
 
 /** Props for {@link ViewportPanelView}. */
-interface ViewportPanelViewProps {
+interface ViewportPanelViewProps extends ViewportViewOptions {
     controller: ViewportController;
     /** Overlay widgets, keyed by slot. Opaque to the panel — the host renders whatever it likes. */
     overlays?: Partial<Record<XenoViewportSlot, ReactNode>>;
-    showStats?: boolean;
-    background?: string;
 }
 /** The Viewport panel view. */
-declare function ViewportPanelView({ controller, overlays, showStats, background, }: ViewportPanelViewProps): ReactNode;
+declare function ViewportPanelView({ controller, overlays, ...options }: ViewportPanelViewProps): ReactNode;
+/**
+ * The surface — `viewport/Surface` in the declaration, bound to the controller: the canvas the
+ * client draws into, the host's overlays in their slots, and the element-scoped input model.
+ */
+declare function ViewportSurface({ controller, overlays, background, children }: {
+    controller: ViewportController;
+    overlays?: Partial<Record<XenoViewportSlot, ReactNode>>;
+    background?: string;
+    children?: ReactNode;
+}): ReactNode;
+/** The unit names the runtime supplies for this block — what a host's registry check must accept beside the shared families. */
+declare const VIEWPORT_RUNTIME_UNITS: readonly ["viewport/Surface"];
+/** The units the runtime registers for `VIEWPORT_DECLARATION`, bound to ITS controller and the host's overlays. */
+declare function viewportRuntimeComponents(controller: ViewportController, overlays?: Partial<Record<XenoViewportSlot, ReactNode>>, background?: string): Record<(typeof VIEWPORT_RUNTIME_UNITS)[number], React.ComponentType<any>>;
 
 /**
  * The Find contract.
@@ -7507,4 +7550,4 @@ declare function TreeIcon({ name, size }: {
     size?: number;
 }): ReactNode;
 
-export { type BlendModeGroup, type BlendModeOption, type Box, BEHAVIOURS$5 as COLOR_BEHAVIOURS, COLOR_DECLARATION, COLOR_RUNTIME_UNITS, COLOR_SPACES, BEHAVIOURS$2 as COMMENTS_BEHAVIOURS, COMMENTS_DECLARATION, COMMENTS_PANEL_ID, COMMENTS_RUNTIME_UNITS, BEHAVIOURS$4 as CURVE_BEHAVIOURS, CURVE_DECLARATION, CURVE_PANEL_ID, CURVE_RUNTIME_UNITS, type ChannelId, ColorPanelController, type ColorPanelControllerOptions, type ColorPanelSerialized, ColorPanelView, type ColorPanelViewProps, type ColorSpace, type ColorStopSink, type ColorToken, type ColorUiIntent, type ColorViewState, CommentsController, type CommentsControllerOptions, type CommentsHostBridge, type CommentsPanelState, CommentsPanelView, type CommentsPanelViewProps, type CommentsRenderContext, type CommentsThreadView, type CommentsUiIntent, type CommentsViewMessage, type CommentsViewModel, type CommentsViewOptions, type CommentsViewReaction, type CommentsViewState, type CommentsViewThread, 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, CurveSurface, type CurveUiIntent, type CurveViewModel, type CurveViewOptions, 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, BEHAVIOURS$3 as FIND_BEHAVIOURS, FIND_DECLARATION, FIND_PANEL_ID, FIND_RUNTIME_UNITS, FindController, type FindControllerOptions, type FindHostBridge, FindKeys, type FindPanelState, FindPanelView, type FindPanelViewProps, type FindRenderContext, type FindUiIntent, type FindViewGroup, type FindViewModel, type FindViewOptions, type FindViewRow, 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$6 as HISTORY_BEHAVIOURS, HISTORY_DECLARATION, HISTORY_RUNTIME_UNITS, 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$7 as INSPECTOR_BEHAVIOURS, INSPECTOR_DECLARATION, INSPECTOR_RUNTIME_UNITS, type InspectorKeyEvent, InspectorPanelController, type InspectorPanelControllerOptions, type InspectorPanelSerialized, InspectorPanelView, type InspectorPanelViewProps, type ProjectOptions$1 as InspectorProjectOptions, type InspectorUiIntent, type InspectorViewField, type InspectorViewSection, type InspectorViewState, BEHAVIOURS$8 as LAYERS_BEHAVIOURS, LAYERS_DECLARATION, LAYERS_RUNTIME_UNITS, LAYER_COLUMNS, type LayerColumn, type LayersKeyEvent, LayersPanelController, type LayersPanelControllerOptions, type LayersPanelSerialized, LayersPanelView, type LayersPanelViewProps, type LayersUiIntent, type LayersViewRow, type LayersViewState, MIXED, BEHAVIOURS$1 as NODEGRAPH_BEHAVIOURS, NODEGRAPH_DECLARATION, NODEGRAPH_PANEL_ID, NODEGRAPH_RUNTIME_UNITS, NodeGraphPanelView, type NodeGraphPanelViewProps, NodeGraphSurface, type NodeGraphUiIntent, type NodeGraphViewModel, type NodeGraphViewOptions, type NumericConstraints, type OklchDisplay, type ParseResult, type ProjectedSection, type Rgba, SPACE_LABEL, type ScrubOptions, type SelectMods, BEHAVIOURS as TREE_BEHAVIOURS, TREE_DECLARATION, TREE_PANEL_ID, TREE_RUNTIME_UNITS, type TangentEdit, Thumbnail, type ThumbnailProps, TreeController, type TreeControllerOptions, type TreeHostBridge, TreeIcon, type TreeKeyEvent, type TreePanelState, TreePanelView, type TreePanelViewProps, type TreeRenderContext, type TreeRow, TreeScroller, type TreeUiIntent, type TreeViewAction, type TreeViewModel, type TreeViewOptions, type TreeViewRow, 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, applyColorUi, applyCommentsUi, applyCurveUi, applyFindUi, applyHistoryUi, applyInspectorUi, applyLayersUi, applyNodeGraphUi, applyPrecision, applyTangentDrag, applyTreeUi, ariaSliderProps, boxesIntersect, canConnect, canRedo, canUndo, childStateOf, clamp, clampAlpha, clampTangent, collectDescendants, colorManifest, colorPanel, colorRuntimeComponents, colorViewManifest, colorViewState, commentsManifest, commentsPanel, commentsViewManifest, commentsViewState, commitPolicyOf, componentsForSpace, computeSurfaceSize, constraintsOf, countIsMeaningful, createColorPanel, createCommentsPanel, createCurvePanel, createFindPanel, createHistoryPanel, createInspectorPanel, createLayersPanel, createNodeGraphPanel, createTreePanel, createViewportPanel, createsCycle, currentRowIndex, curveManifest, curvePanel, curveRuntimeComponents, curveViewManifest, curveViewState, defaultIconFor, displayOrder, distanceToEdge, easeAt, easingPreset, edgeBounds, edgeKey, edgePath, edgesToReplace, edgesTouching, evaluateChannel, fieldMatches, findField, findManifest, findPanel, findPort, findRuntimeComponents, findSectionOf, findViewManifest, findViewState, 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, nodegraphRuntimeComponents, nodegraphViewManifest, nodegraphViewState, 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, treeRuntimeComponents, treeViewManifest, treeViewState, usesLogScale, valueExtent, valueToPosition, valuesEqual, viewportManifest, viewportPanel, visibleEdges, walkTree, wheelZoomFactor, zoomAboutCursor, zoomTimeAboutCursor, zoomValueAboutCursor };
+export { type BlendModeGroup, type BlendModeOption, type Box, BEHAVIOURS$6 as COLOR_BEHAVIOURS, COLOR_DECLARATION, COLOR_RUNTIME_UNITS, COLOR_SPACES, BEHAVIOURS$2 as COMMENTS_BEHAVIOURS, COMMENTS_DECLARATION, COMMENTS_PANEL_ID, COMMENTS_RUNTIME_UNITS, BEHAVIOURS$5 as CURVE_BEHAVIOURS, CURVE_DECLARATION, CURVE_PANEL_ID, CURVE_RUNTIME_UNITS, type ChannelId, ColorPanelController, type ColorPanelControllerOptions, type ColorPanelSerialized, ColorPanelView, type ColorPanelViewProps, type ColorSpace, type ColorStopSink, type ColorToken, type ColorUiIntent, type ColorViewState, CommentsController, type CommentsControllerOptions, type CommentsHostBridge, type CommentsPanelState, CommentsPanelView, type CommentsPanelViewProps, type CommentsRenderContext, type CommentsThreadView, type CommentsUiIntent, type CommentsViewMessage, type CommentsViewModel, type CommentsViewOptions, type CommentsViewReaction, type CommentsViewState, type CommentsViewThread, 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, CurveSurface, type CurveUiIntent, type CurveViewModel, type CurveViewOptions, 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, BEHAVIOURS$3 as FIND_BEHAVIOURS, FIND_DECLARATION, FIND_PANEL_ID, FIND_RUNTIME_UNITS, FindController, type FindControllerOptions, type FindHostBridge, FindKeys, type FindPanelState, FindPanelView, type FindPanelViewProps, type FindRenderContext, type FindUiIntent, type FindViewGroup, type FindViewModel, type FindViewOptions, type FindViewRow, 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$7 as HISTORY_BEHAVIOURS, HISTORY_DECLARATION, HISTORY_RUNTIME_UNITS, 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$8 as INSPECTOR_BEHAVIOURS, INSPECTOR_DECLARATION, INSPECTOR_RUNTIME_UNITS, type InspectorKeyEvent, InspectorPanelController, type InspectorPanelControllerOptions, type InspectorPanelSerialized, InspectorPanelView, type InspectorPanelViewProps, type ProjectOptions$1 as InspectorProjectOptions, type InspectorUiIntent, type InspectorViewField, type InspectorViewSection, type InspectorViewState, BEHAVIOURS$9 as LAYERS_BEHAVIOURS, LAYERS_DECLARATION, LAYERS_RUNTIME_UNITS, LAYER_COLUMNS, type LayerColumn, type LayersKeyEvent, LayersPanelController, type LayersPanelControllerOptions, type LayersPanelSerialized, LayersPanelView, type LayersPanelViewProps, type LayersUiIntent, type LayersViewRow, type LayersViewState, MIXED, BEHAVIOURS$1 as NODEGRAPH_BEHAVIOURS, NODEGRAPH_DECLARATION, NODEGRAPH_PANEL_ID, NODEGRAPH_RUNTIME_UNITS, NodeGraphPanelView, type NodeGraphPanelViewProps, NodeGraphSurface, type NodeGraphUiIntent, type NodeGraphViewModel, type NodeGraphViewOptions, type NumericConstraints, type OklchDisplay, type ParseResult, type ProjectedSection, type Rgba, SPACE_LABEL, type ScrubOptions, type SelectMods, BEHAVIOURS as TREE_BEHAVIOURS, TREE_DECLARATION, TREE_PANEL_ID, TREE_RUNTIME_UNITS, type TangentEdit, Thumbnail, type ThumbnailProps, TreeController, type TreeControllerOptions, type TreeHostBridge, TreeIcon, type TreeKeyEvent, type TreePanelState, TreePanelView, type TreePanelViewProps, type TreeRenderContext, type TreeRow, TreeScroller, type TreeUiIntent, type TreeViewAction, type TreeViewModel, type TreeViewOptions, type TreeViewRow, type TreeViewState, BEHAVIOURS$4 as VIEWPORT_BEHAVIOURS, VIEWPORT_DECLARATION, VIEWPORT_PANEL_ID, VIEWPORT_RUNTIME_UNITS, VIEWPORT_SLOTS, VIEW_STATE_OPS, ViewportController, type ViewportControllerOptions, type ViewportHostBridge, type ViewportPanelState, ViewportPanelView, type ViewportPanelViewProps, type ViewportRenderContext, ViewportSurface, type ViewportViewModel, type ViewportViewOptions, 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, applyColorUi, applyCommentsUi, applyCurveUi, applyFindUi, applyHistoryUi, applyInspectorUi, applyLayersUi, applyNodeGraphUi, applyPrecision, applyTangentDrag, applyTreeUi, ariaSliderProps, boxesIntersect, canConnect, canRedo, canUndo, childStateOf, clamp, clampAlpha, clampTangent, collectDescendants, colorManifest, colorPanel, colorRuntimeComponents, colorViewManifest, colorViewState, commentsManifest, commentsPanel, commentsViewManifest, commentsViewState, commitPolicyOf, componentsForSpace, computeSurfaceSize, constraintsOf, countIsMeaningful, createColorPanel, createCommentsPanel, createCurvePanel, createFindPanel, createHistoryPanel, createInspectorPanel, createLayersPanel, createNodeGraphPanel, createTreePanel, createViewportPanel, createsCycle, currentRowIndex, curveManifest, curvePanel, curveRuntimeComponents, curveViewManifest, curveViewState, defaultIconFor, displayOrder, distanceToEdge, easeAt, easingPreset, edgeBounds, edgeKey, edgePath, edgesToReplace, edgesTouching, evaluateChannel, fieldMatches, findField, findManifest, findPanel, findPort, findRuntimeComponents, findSectionOf, findViewManifest, findViewState, 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, nodegraphRuntimeComponents, nodegraphViewManifest, nodegraphViewState, 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, treeRuntimeComponents, treeViewManifest, treeViewState, usesLogScale, valueExtent, valueToPosition, valuesEqual, viewportManifest, viewportPanel, viewportRuntimeComponents, viewportViewManifest, viewportViewState, visibleEdges, walkTree, wheelZoomFactor, zoomAboutCursor, zoomTimeAboutCursor, zoomValueAboutCursor };

package/dist/edit/index.js

@@ -2023,8 +2023,8 @@ function constraintsOf(field) {
     scale: field.scale
   };
 }
-function parseNumeric(text10) {
-  const trimmed = String(text10).trim();
+function parseNumeric(text11) {
+  const trimmed = String(text11).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" };
@@ -2049,8 +2049,8 @@ function normalizeNumeric(value, c) {
 function formatNumeric(value, field) {
   if (!Number.isFinite(value)) return "";
   const precision = field.precision;
-  const text10 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
-  return field.unit ? `${text10}${field.unit}` : text10;
+  const text11 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
+  return field.unit ? `${text11}${field.unit}` : text11;
 }
 function usesLogScale(c) {
   return c.scale === "log" && typeof c.min === "number" && typeof c.max === "number" && c.min > 0 && c.max > c.min;
@@ -2384,44 +2384,44 @@ var InspectorPanelController = class {
     if (!field || !isFieldEditable(field)) return;
     const mixed = isFieldMixed(field);
     const value = this.getFieldValue(fieldId);
-    const text10 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
-    this.drafts.set(fieldId, { text: text10, original: value });
+    const text11 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
+    this.drafts.set(fieldId, { text: text11, original: value });
     this.focusedFieldId = fieldId;
     this.emitFieldFocus(fieldId);
     this.notify();
   }
   /** Update the draft text (typing). Emits nothing under the `blur` policy. */
-  setDraft(fieldId, text10) {
+  setDraft(fieldId, text11) {
     const draft = this.drafts.get(fieldId);
     if (!draft) {
-      this.drafts.set(fieldId, { text: text10, original: this.getFieldValue(fieldId) });
+      this.drafts.set(fieldId, { text: text11, original: this.getFieldValue(fieldId) });
     } else {
-      draft.text = text10;
+      draft.text = text11;
     }
     const field = this.getField(fieldId);
     if (field && commitPolicyOf(field) === "live") {
-      const parsed = this.parseDraft(fieldId, text10);
+      const parsed = this.parseDraft(fieldId, text11);
       if (parsed.ok) this.emitSet(fieldId, parsed.value);
     }
     this.notify();
   }
   /** Parse a draft string into a field-appropriate value. */
-  parseDraft(fieldId, text10) {
+  parseDraft(fieldId, text11) {
     const field = this.getField(fieldId);
     if (!field) return { ok: false };
     if (field.type === "number") {
-      const parsed = parseNumeric(text10);
+      const parsed = parseNumeric(text11);
       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(text10) };
+        return { ok: true, value: JSON.parse(text11) };
       } catch {
         return { ok: false };
       }
     }
-    return { ok: true, value: text10 };
+    return { ok: true, value: text11 };
   }
   /**
    * Commit the draft (Enter / blur). Invalid input reverts instead of committing garbage.
@@ -3347,7 +3347,7 @@ function NumberWidget({ field, controller, component }) {
     },
     [controller, editable, field.id, component]
   );
-  const text10 = component !== void 0 ? (() => {
+  const text11 = 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) : "";
@@ -3359,7 +3359,7 @@ function NumberWidget({ field, controller, component }) {
       Input2,
       {
         inputMode: "decimal",
-        value: text10,
+        value: text11,
         placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder,
         mixed,
         readOnly: !editable,
@@ -8646,7 +8646,58 @@ var viewportManifest = {
 
 // src/edit/viewport/react/ViewportPanelView.tsx
 import { useEffect as useEffect6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore6 } from "react";
-import { Badge as Badge4, StatusBar as StatusBar4 } from "@xenosystem/components/chrome";
+import { Badge as Badge4, Overlay, StatusBar as StatusBar4 } from "@xenosystem/components/chrome";
+
+// src/edit/viewport/declaration.ts
+function viewportViewState(c, options = {}) {
+  const { showStats = true } = options;
+  const state = c.getState();
+  return {
+    contextLost: state.contextLost,
+    statsShown: showStats && state.stats !== null,
+    fpsLabel: state.stats?.fps !== void 0 ? `${Math.round(state.stats.fps)} fps` : void 0,
+    surfaceLabel: state.surface ? `${state.surface.cssWidth}\xD7${state.surface.cssHeight} @${state.surface.dpr}\xD7` : void 0
+  };
+}
+var viewportViewManifest = {
+  id: viewportManifest.id,
+  version: "1.0.0",
+  title: "Viewport",
+  category: "edit",
+  layout: { slot: "center" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The ViewportViewModel the runtime derives from the controller on every draw." }],
+  outputs: [],
+  commands: []
+};
+var EMPTY6 = { contextLost: false, statsShown: false };
+var BEHAVIOURS6 = {
+  "edit/viewportPanelView": (inputs) => inputs.view ?? EMPTY6
+};
+var text6 = (b) => ({ component: "text", props: { text: b } });
+var VIEWPORT_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: viewportViewManifest,
+  behaviour: "edit/viewportPanelView",
+  composition: {
+    component: "viewport/Surface",
+    children: [
+      {
+        component: "chrome/Overlay",
+        when: { input: "view.contextLost" },
+        props: { scrim: { value: true } },
+        children: [{ component: "chrome/Badge", props: { tone: { value: "error" } }, children: [text6({ value: "graphics context lost \u2014 restoring" })] }]
+      },
+      {
+        component: "chrome/Overlay",
+        when: { input: "view.statsShown" },
+        props: { anchor: { value: "bottom" } },
+        children: [{ component: "chrome/StatusBar", props: { left: { input: "view.fpsLabel" }, right: { input: "view.surfaceLabel" } } }]
+      }
+    ]
+  }
+};
+
+// src/edit/viewport/react/ViewportPanelView.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var SLOT_STYLE = {
   "top-left": { top: 8, left: 8 },
@@ -8659,12 +8710,15 @@ var SLOT_STYLE = {
   "bottom-right": { bottom: 8, right: 8 },
   free: { inset: 0 }
 };
-function ViewportPanelView({
-  controller,
-  overlays,
-  showStats = true,
-  background
-}) {
+function ViewportPanelView({ controller, overlays, ...options }) {
+  useSyncExternalStore6(controller.subscribe, controller.getState, controller.getState);
+  const view = viewportViewState(controller, options);
+  return /* @__PURE__ */ jsxs7(ViewportSurface, { controller, overlays, background: options.background, children: [
+    view.contextLost ? /* @__PURE__ */ jsx8(Overlay, { scrim: true, children: /* @__PURE__ */ jsx8(Badge4, { tone: "error", children: "graphics context lost \u2014 restoring" }) }) : null,
+    view.statsShown ? /* @__PURE__ */ jsx8(Overlay, { anchor: "bottom", children: /* @__PURE__ */ jsx8(StatusBar4, { left: view.fpsLabel, right: view.surfaceLabel }) }) : null
+  ] });
+}
+function ViewportSurface({ controller, overlays, background, children }) {
   const state = useSyncExternalStore6(controller.subscribe, controller.getState, controller.getState);
   const canvasRef = useRef7(null);
   const containerRef = useRef7(null);
@@ -8743,33 +8797,15 @@ function ViewportPanelView({
             slot
           );
         }),
-        state.contextLost ? /* @__PURE__ */ jsx8(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              background: "var(--xeno-elevated)",
-              fontSize: 11,
-              zIndex: 20
-            },
-            children: /* @__PURE__ */ jsx8(Badge4, { tone: "error", children: "graphics context lost \u2014 restoring" })
-          }
-        ) : null,
-        showStats && state.stats ? /* @__PURE__ */ jsx8("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, zIndex: 10 }, children: /* @__PURE__ */ jsx8(
-          StatusBar4,
-          {
-            left: state.stats.fps !== void 0 ? `${Math.round(state.stats.fps)} fps` : void 0,
-            right: state.surface ? `${state.surface.cssWidth}\xD7${state.surface.cssHeight} @${state.surface.dpr}\xD7` : void 0
-          }
-        ) }) : null
+        children
       ]
     }
   );
 }
+var VIEWPORT_RUNTIME_UNITS = ["viewport/Surface"];
+function viewportRuntimeComponents(controller, overlays, background) {
+  return { "viewport/Surface": ({ children }) => /* @__PURE__ */ jsx8(ViewportSurface, { controller, overlays, background, children }) };
+}
 
 // src/edit/viewport/panel.ts
 function createViewportPanel(options = {}) {
@@ -9016,11 +9052,11 @@ var FindController = class {
    * @param text - The new query text.
    * @param immediate - Skip the debounce (a paste, or pressing Enter).
    */
-  setText(text10, immediate = false) {
-    if (text10 === this.text) return;
-    this.text = text10;
+  setText(text11, immediate = false) {
+    if (text11 === this.text) return;
+    this.text = text11;
     this.index = -1;
-    if (text10 === "") {
+    if (text11 === "") {
       this.clearResults("idle");
       this.emitQuery(true);
       return;
@@ -9048,8 +9084,8 @@ var FindController = class {
     this.notify();
   }
   /** The replacement text. Never emitted on its own — a replacement is not a search. */
-  setReplaceText(text10) {
-    this.replaceText = text10;
+  setReplaceText(text11) {
+    this.replaceText = text11;
     this.notify();
   }
   /** Show or hide the replace row. */
@@ -9523,7 +9559,7 @@ var findViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, value?, option?, matchId?, x?, y? } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-var EMPTY6 = {
+var EMPTY7 = {
   text: "",
   hasText: false,
   placeholder: "Find",
@@ -9555,11 +9591,11 @@ var EMPTY6 = {
   rows: [],
   groups: []
 };
-var BEHAVIOURS6 = {
-  "edit/findPanelView": (inputs) => inputs.view ?? EMPTY6
+var BEHAVIOURS7 = {
+  "edit/findPanelView": (inputs) => inputs.view ?? EMPTY7
 };
 var FIND_RUNTIME_UNITS = ["find/Keys"];
-var text6 = (b) => ({ component: "text", props: { text: b } });
+var text7 = (b) => ({ component: "text", props: { text: b } });
 var ui6 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
 var option = (option2, icon, label) => ({
   component: "chrome/IconButton",
@@ -9605,10 +9641,10 @@ var FIND_DECLARATION = {
             node: {
               component: "fragment",
               children: [
-                { component: "chrome/Badge", when: { input: "view.invalid" }, props: { tone: { value: "error" }, title: { input: "view.message" } }, children: [text6({ value: "invalid pattern" })] },
-                { component: "chrome/Badge", when: { input: "view.failed" }, props: { tone: { value: "error" }, title: { input: "view.message" } }, children: [text6({ value: "search failed" })] },
-                { component: "chrome/Badge", when: { input: "view.searchingBadge" }, children: [text6({ value: "searching\u2026" })] },
-                { component: "chrome/Text", when: { input: "view.countShown" }, props: { role: { value: "number" } }, children: [text6({ input: "view.counter" })] }
+                { component: "chrome/Badge", when: { input: "view.invalid" }, props: { tone: { value: "error" }, title: { input: "view.message" } }, children: [text7({ value: "invalid pattern" })] },
+                { component: "chrome/Badge", when: { input: "view.failed" }, props: { tone: { value: "error" }, title: { input: "view.message" } }, children: [text7({ value: "search failed" })] },
+                { component: "chrome/Badge", when: { input: "view.searchingBadge" }, children: [text7({ value: "searching\u2026" })] },
+                { component: "chrome/Text", when: { input: "view.countShown" }, props: { role: { value: "number" } }, children: [text7({ input: "view.counter" })] }
               ]
             }
           },
@@ -9619,13 +9655,13 @@ var FIND_DECLARATION = {
               children: [
                 { component: "chrome/IconButton", props: { label: { value: "Previous match" }, disabled: { not: { input: "view.hasMatches" } }, icon: { node: { component: "icons/Chevron", props: { direction: { value: "up" }, size: { value: 12 } } } } }, on: { onClick: ui6("previous") } },
                 { component: "chrome/IconButton", props: { label: { value: "Next match" }, disabled: { not: { input: "view.hasMatches" } }, icon: { node: { component: "icons/Chevron", props: { direction: { value: "down" }, size: { value: 12 } } } } }, on: { onClick: ui6("next") } },
-                { component: "chrome/TextButton", on: { onClick: ui6("toggleReplace") }, children: [text6({ input: "view.replaceLabel" })] }
+                { component: "chrome/TextButton", on: { onClick: ui6("toggleReplace") }, children: [text7({ input: "view.replaceLabel" })] }
               ]
             }
           }
         }
       },
-      { component: "chrome/Text", when: { input: "view.invalid" }, props: { role: { value: "caption" }, className: { value: "xeno-find-message" } }, children: [text6({ input: "view.message" })] },
+      { component: "chrome/Text", when: { input: "view.invalid" }, props: { role: { value: "caption" }, className: { value: "xeno-find-message" } }, children: [text7({ input: "view.message" })] },
       {
         component: "chrome/Toolbar",
         when: { input: "view.replaceVisible" },
@@ -9636,8 +9672,8 @@ var FIND_DECLARATION = {
               component: "chrome/ToolbarGroup",
               props: { end: { value: true } },
               children: [
-                { component: "chrome/TextButton", props: { disabled: { not: { input: "view.canReplace" } } }, on: { onClick: ui6("replaceCurrent") }, children: [text6({ value: "Replace" })] },
-                { component: "chrome/TextButton", props: { disabled: { not: { input: "view.canReplace" } } }, on: { onClick: ui6("replaceAll") }, children: [text6({ input: "view.allLabel" })] }
+                { component: "chrome/TextButton", props: { disabled: { not: { input: "view.canReplace" } } }, on: { onClick: ui6("replaceCurrent") }, children: [text7({ value: "Replace" })] },
+                { component: "chrome/TextButton", props: { disabled: { not: { input: "view.canReplace" } } }, on: { onClick: ui6("replaceAll") }, children: [text7({ input: "view.allLabel" })] }
               ]
             }
           }
@@ -9659,7 +9695,7 @@ var FIND_DECLARATION = {
               {
                 component: "chrome/Section",
                 each: { input: "view.groups", key: "id" },
-                props: { title: { item: "label" }, flush: { value: true }, badge: { node: { component: "chrome/Badge", children: [text6({ item: "count" })] } } },
+                props: { title: { item: "label" }, flush: { value: true }, badge: { node: { component: "chrome/Badge", children: [text7({ item: "count" })] } } },
                 children: [{ component: "chrome/RowList", children: [resultRow] }]
               }
             ]
@@ -10549,12 +10585,12 @@ var commentsViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, \u2026 } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-var EMPTY7 = { show: "open", shows: [], sort: "document", sorts: [], orphanedHidden: false, filteredEmpty: false, filteredHint: "", empty: true, emptyHint: "Select something and add a comment.", listed: false, open: [], hasResolved: false, resolvedTitle: "", resolved: [], draft: "", placeholder: "", composerDisabled: true, commentDisabled: true, countLabel: "0 open" };
-var BEHAVIOURS7 = {
-  "edit/commentsPanelView": (inputs) => inputs.view ?? EMPTY7
+var EMPTY8 = { show: "open", shows: [], sort: "document", sorts: [], orphanedHidden: false, filteredEmpty: false, filteredHint: "", empty: true, emptyHint: "Select something and add a comment.", listed: false, open: [], hasResolved: false, resolvedTitle: "", resolved: [], draft: "", placeholder: "", composerDisabled: true, commentDisabled: true, countLabel: "0 open" };
+var BEHAVIOURS8 = {
+  "edit/commentsPanelView": (inputs) => inputs.view ?? EMPTY8
 };
 var COMMENTS_RUNTIME_UNITS = [];
-var text7 = (b) => ({ component: "text", props: { text: b } });
+var text8 = (b) => ({ component: "text", props: { text: b } });
 var ui7 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
 var threadCard = (input) => ({
   component: "chrome/ThreadCard",
@@ -10566,18 +10602,18 @@ var threadCard = (input) => ({
       component: "chrome/Stack",
       props: { direction: { value: "row" }, gap: { value: 4 }, pad: { value: "none" } },
       children: [
-        { component: "chrome/Badge", when: { item: "hasAnchorBadge" }, props: { tone: { item: "anchorTone" }, title: { item: "anchorTitle" } }, children: [text7({ item: "anchorLabel" })] },
-        { component: "chrome/Badge", when: { item: "resolved" }, children: [text7({ value: "resolved" })] },
-        { component: "chrome/Text", props: { role: { value: "caption" } }, children: [text7({ item: "age" })] }
+        { component: "chrome/Badge", when: { item: "hasAnchorBadge" }, props: { tone: { item: "anchorTone" }, title: { item: "anchorTitle" } }, children: [text8({ item: "anchorLabel" })] },
+        { component: "chrome/Badge", when: { item: "resolved" }, children: [text8({ value: "resolved" })] },
+        { component: "chrome/Text", props: { role: { value: "caption" } }, children: [text8({ item: "age" })] }
       ]
     },
-    { component: "chrome/Quote", when: { item: "hasQuote" }, props: { orphaned: { item: "orphaned" } }, on: { onActivate: ui7("activate", { id: { item: "id" } }) }, children: [text7({ item: "quote" })] },
-    { component: "chrome/Message", each: { item: "messages", key: "id" }, props: { author: { item: "author" }, age: { item: "age" }, edited: { item: "edited" } }, children: [text7({ item: "body" })] },
+    { component: "chrome/Quote", when: { item: "hasQuote" }, props: { orphaned: { item: "orphaned" } }, on: { onActivate: ui7("activate", { id: { item: "id" } }) }, children: [text8({ item: "quote" })] },
+    { component: "chrome/Message", each: { item: "messages", key: "id" }, props: { author: { item: "author" }, age: { item: "age" }, edited: { item: "edited" } }, children: [text8({ item: "body" })] },
     {
       component: "chrome/Stack",
       when: { item: "hasReactions" },
       props: { direction: { value: "row" }, gap: { value: 4 }, pad: { value: "none" } },
-      children: [{ component: "chrome/TextButton", each: { item: "reactions", key: "emoji" }, on: { onClick: ui7("react", { id: { item: "threadId" }, emoji: { item: "emoji" }, on: { item: "reactTo" } }) }, children: [text7({ item: "label" })] }]
+      children: [{ component: "chrome/TextButton", each: { item: "reactions", key: "emoji" }, on: { onClick: ui7("react", { id: { item: "threadId" }, emoji: { item: "emoji" }, on: { item: "reactTo" } }) }, children: [text8({ item: "label" })] }]
     },
     {
       component: "chrome/Stack",
@@ -10585,7 +10621,7 @@ var threadCard = (input) => ({
       props: { direction: { value: "row" }, gap: { value: 4 }, pad: { value: "none" } },
       children: [
         { component: "chrome/Input", props: { value: { item: "replyDraft" }, placeholder: { value: "Reply" }, autoFocus: { value: true }, label: { value: "Reply" } }, on: { onChange: ui7("replyDraft", { value: { arg: "" } }), onKeyDown: ui7("replyKey", { id: { item: "id" }, key: { arg: "key" }, shift: { arg: "shiftKey" } }) } },
-        { component: "chrome/TextButton", on: { onClick: ui7("reply", { id: { item: "id" } }) }, children: [text7({ value: "Send" })] }
+        { component: "chrome/TextButton", on: { onClick: ui7("reply", { id: { item: "id" } }) }, children: [text8({ value: "Send" })] }
       ]
     },
     {
@@ -10593,9 +10629,9 @@ var threadCard = (input) => ({
       when: { item: "idle" },
       props: { direction: { value: "row" }, gap: { value: 6 }, pad: { value: "none" } },
       children: [
-        { component: "chrome/TextButton", on: { onClick: ui7("startReply", { id: { item: "id" } }) }, children: [text7({ value: "Reply" })] },
-        { component: "chrome/TextButton", on: { onClick: ui7("resolve", { id: { item: "id" }, resolved: { item: "resolveTo" } }) }, children: [text7({ item: "resolveLabel" })] },
-        { component: "chrome/TextButton", on: { onClick: ui7("remove", { id: { item: "id" } }) }, children: [text7({ value: "Delete" })] }
+        { component: "chrome/TextButton", on: { onClick: ui7("startReply", { id: { item: "id" } }) }, children: [text8({ value: "Reply" })] },
+        { component: "chrome/TextButton", on: { onClick: ui7("resolve", { id: { item: "id" }, resolved: { item: "resolveTo" } }) }, children: [text8({ item: "resolveLabel" })] },
+        { component: "chrome/TextButton", on: { onClick: ui7("remove", { id: { item: "id" } }) }, children: [text8({ value: "Delete" })] }
       ]
     }
   ]
@@ -10617,7 +10653,7 @@ var COMMENTS_DECLARATION = {
       {
         component: "chrome/Note",
         when: { input: "view.orphanedNotice" },
-        children: [text7({ input: "view.orphanedNotice" }), { component: "chrome/TextButton", when: { input: "view.orphanedHidden" }, on: { onClick: ui7("showOrphaned") }, children: [text7({ value: "Show" })] }]
+        children: [text8({ input: "view.orphanedNotice" }), { component: "chrome/TextButton", when: { input: "view.orphanedHidden" }, on: { onClick: ui7("showOrphaned") }, children: [text8({ value: "Show" })] }]
       },
       {
         component: "chrome/ScrollArea",
@@ -10633,7 +10669,7 @@ var COMMENTS_DECLARATION = {
         props: { gap: { value: 2 }, pad: { value: "gutter" }, className: { value: "xeno-comments-composer" } },
         children: [
           { component: "chrome/TextArea", props: { value: { input: "view.draft" }, placeholder: { input: "view.placeholder" }, disabled: { input: "view.composerDisabled" }, rows: { value: 2 }, label: { value: "New comment" } }, on: { onChange: ui7("draft", { value: { arg: "" } }), onKeyDown: ui7("draftKey", { key: { arg: "key" }, ctrl: { arg: "ctrlKey" }, meta: { arg: "metaKey" } }) } },
-          { component: "chrome/Toolbar", props: { divided: { value: false }, right: { node: { component: "chrome/ToolbarGroup", props: { end: { value: true } }, children: [{ component: "chrome/TextButton", props: { strong: { value: true }, disabled: { input: "view.commentDisabled" } }, on: { onClick: ui7("create") }, children: [text7({ value: "Comment" })] }] } } } }
+          { component: "chrome/Toolbar", props: { divided: { value: false }, right: { node: { component: "chrome/ToolbarGroup", props: { end: { value: true } }, children: [{ component: "chrome/TextButton", props: { strong: { value: true }, disabled: { input: "view.commentDisabled" } }, on: { onClick: ui7("create") }, children: [text8({ value: "Comment" })] }] } } } }
         ]
       },
       { component: "chrome/StatusBar", props: { left: { input: "view.countLabel" }, right: { input: "view.staleLabel" } } }
@@ -11888,11 +11924,11 @@ var nodegraphViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-var EMPTY8 = { empty: true, drawn: false, nodesLabel: "0 nodes", zoomLabel: "100%" };
-var BEHAVIOURS8 = {
-  "edit/nodegraphPanelView": (inputs) => inputs.view ?? EMPTY8
+var EMPTY9 = { empty: true, drawn: false, nodesLabel: "0 nodes", zoomLabel: "100%" };
+var BEHAVIOURS9 = {
+  "edit/nodegraphPanelView": (inputs) => inputs.view ?? EMPTY9
 };
-var text8 = (b) => ({ component: "text", props: { text: b } });
+var text9 = (b) => ({ component: "text", props: { text: b } });
 var ui8 = (kind) => ({ emit: "ui", value: { object: { kind: { value: kind } } } });
 var NODEGRAPH_DECLARATION = {
   format: "xeno.block@1",
@@ -11909,8 +11945,8 @@ var NODEGRAPH_DECLARATION = {
               component: "chrome/ToolbarGroup",
               props: { end: { value: true } },
               children: [
-                { component: "chrome/TextButton", children: [text8({ value: "Fit" })], on: { onClick: ui8("fit") } },
-                { component: "chrome/TextButton", children: [text8({ value: "Fit selection" })], on: { onClick: ui8("fitSelection") } }
+                { component: "chrome/TextButton", children: [text9({ value: "Fit" })], on: { onClick: ui8("fit") } },
+                { component: "chrome/TextButton", children: [text9({ value: "Fit selection" })], on: { onClick: ui8("fitSelection") } }
               ]
             }
           }
@@ -11921,8 +11957,8 @@ var NODEGRAPH_DECLARATION = {
       {
         component: "chrome/StatusBar",
         props: {
-          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text8({ input: "view.nodesLabel" })] } },
-          right: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text8({ input: "view.zoomLabel" })] } }
+          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text9({ input: "view.nodesLabel" })] } },
+          right: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text9({ input: "view.zoomLabel" })] } }
         }
       }
     ]
@@ -12890,12 +12926,12 @@ var TreeController = class {
     }
     if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
       const fresh = now - this.typeAhead.at > this.typeAheadMs;
-      const text10 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
-      this.typeAhead = { text: text10, at: now };
+      const text11 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
+      this.typeAhead = { text: text11, 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(text10)) {
+        if (candidate.node.label.toLowerCase().startsWith(text11)) {
           this.focusedId = candidate.id;
           this.select([candidate.id]);
           return true;
@@ -12921,9 +12957,9 @@ var TreeController = class {
     return true;
   }
   /** Update the rename draft. */
-  updateRenameDraft(text10) {
+  updateRenameDraft(text11) {
     if (!this.renaming) return;
-    this.renaming = { ...this.renaming, draft: text10 };
+    this.renaming = { ...this.renaming, draft: text11 };
     this.notify();
   }
   /**
@@ -13637,7 +13673,7 @@ var treeViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, id?, value?, key?, actionId?, x?, y?, ctrlKey?, metaKey?, shiftKey?, altKey? } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-var EMPTY9 = {
+var EMPTY10 = {
   searchShown: true,
   filter: "",
   noSource: true,
@@ -13658,16 +13694,16 @@ var EMPTY9 = {
   rows: [],
   countLabel: "0 items"
 };
-var BEHAVIOURS9 = {
-  "edit/treePanelView": (inputs) => inputs.view ?? EMPTY9
+var BEHAVIOURS10 = {
+  "edit/treePanelView": (inputs) => inputs.view ?? EMPTY10
 };
-var text9 = (b) => ({ component: "text", props: { text: b } });
+var text10 = (b) => ({ component: "text", props: { text: b } });
 var ui9 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
 var nodeIcon = () => ({
   component: "fragment",
   children: [
     { component: "icons/TreeKind", when: { item: "iconName" }, props: { name: { item: "iconName" } } },
-    { component: "chrome/Text", when: { item: "iconText" }, props: { role: { value: "caption" } }, children: [text9({ item: "iconText" })] }
+    { component: "chrome/Text", when: { item: "iconText" }, props: { role: { value: "caption" } }, children: [text10({ item: "iconText" })] }
   ]
 });
 var TREE_DECLARATION = {
@@ -13738,11 +13774,11 @@ var TREE_DECLARATION = {
                         node: {
                           component: "fragment",
                           children: [
-                            { component: "chrome/Text", when: { item: "chipLoading" }, props: { role: { value: "caption" } }, children: [text9({ value: "loading\u2026" })] },
-                            { component: "chrome/Badge", when: { item: "chipError" }, props: { tone: { value: "error" } }, children: [text9({ item: "chipErrorText" })] },
-                            { component: "chrome/TextButton", when: { item: "chipLoadMore" }, children: [text9({ value: "load more\u2026" })], on: { onClick: ui9("loadMore", { id: { item: "id" } }) } },
-                            { component: "chrome/Badge", when: { item: "chipTruncated" }, props: { tone: { value: "warning" } }, children: [text9({ item: "chipTruncatedText" })] },
-                            { component: "chrome/Text", when: { item: "chipEmpty" }, props: { role: { value: "caption" } }, children: [text9({ value: "empty" })] }
+                            { component: "chrome/Text", when: { item: "chipLoading" }, props: { role: { value: "caption" } }, children: [text10({ value: "loading\u2026" })] },
+                            { component: "chrome/Badge", when: { item: "chipError" }, props: { tone: { value: "error" } }, children: [text10({ item: "chipErrorText" })] },
+                            { component: "chrome/TextButton", when: { item: "chipLoadMore" }, children: [text10({ value: "load more\u2026" })], on: { onClick: ui9("loadMore", { id: { item: "id" } }) } },
+                            { component: "chrome/Badge", when: { item: "chipTruncated" }, props: { tone: { value: "warning" } }, children: [text10({ item: "chipTruncatedText" })] },
+                            { component: "chrome/Text", when: { item: "chipEmpty" }, props: { role: { value: "caption" } }, children: [text10({ value: "empty" })] }
                           ]
                         }
                       },
@@ -13750,9 +13786,9 @@ var TREE_DECLARATION = {
                         node: {
                           component: "fragment",
                           children: [
-                            { component: "chrome/Text", each: { item: "columns", key: "key" }, props: { role: { value: "number" } }, children: [text9({ item: "text" })] },
+                            { component: "chrome/Text", each: { item: "columns", key: "key" }, props: { role: { value: "number" } }, children: [text10({ item: "text" })] },
                             { component: "chrome/Text", each: { item: "glyphs", key: "key" }, props: { role: { value: "meta" }, title: { item: "title" } }, children: [nodeIcon()] },
-                            { component: "chrome/Badge", each: { item: "badges", key: "key" }, props: { tone: { item: "tone" } }, children: [text9({ item: "text" })] },
+                            { component: "chrome/Badge", each: { item: "badges", key: "key" }, props: { tone: { item: "tone" } }, children: [text10({ item: "text" })] },
                             { component: "chrome/IconButton", each: { item: "actions", key: "key" }, props: { size: { value: "sm" }, icon: { node: nodeIcon() }, label: { item: "label" }, disabled: { item: "disabled" } }, on: { onClick: ui9("action", { id: { item: "rowId" }, actionId: { item: "actionId" } }) } }
                           ]
                         }
@@ -13774,8 +13810,8 @@ var TREE_DECLARATION = {
       {
         component: "chrome/StatusBar",
         props: {
-          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text9({ input: "view.countLabel" })] } },
-          right: { node: { component: "chrome/Text", when: { input: "view.selectedLabel" }, props: { role: { value: "meta" } }, children: [text9({ input: "view.selectedLabel" })] } }
+          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text10({ input: "view.countLabel" })] } },
+          right: { node: { component: "chrome/Text", when: { input: "view.selectedLabel" }, props: { role: { value: "meta" } }, children: [text10({ input: "view.selectedLabel" })] } }
         }
       }
     ]
@@ -14136,7 +14172,7 @@ export {
   COLOR_DECLARATION,
   COLOR_RUNTIME_UNITS,
   COLOR_SPACES,
-  BEHAVIOURS7 as COMMENTS_BEHAVIOURS,
+  BEHAVIOURS8 as COMMENTS_BEHAVIOURS,
   COMMENTS_DECLARATION,
   COMMENTS_PANEL_ID,
   COMMENTS_RUNTIME_UNITS,
@@ -14162,7 +14198,7 @@ export {
   EMPTY_SCHEMA,
   EMPTY_TREE,
   EMPTY_TREE_SOURCE,
-  BEHAVIOURS6 as FIND_BEHAVIOURS,
+  BEHAVIOURS7 as FIND_BEHAVIOURS,
   FIND_DECLARATION,
   FIND_PANEL_ID,
   FIND_RUNTIME_UNITS,
@@ -14189,14 +14225,14 @@ export {
   LayersPanelController,
   LayersPanelView,
   MIXED,
-  BEHAVIOURS8 as NODEGRAPH_BEHAVIOURS,
+  BEHAVIOURS9 as NODEGRAPH_BEHAVIOURS,
   NODEGRAPH_DECLARATION,
   NODEGRAPH_PANEL_ID,
   NODEGRAPH_RUNTIME_UNITS,
   NodeGraphPanelView,
   NodeGraphSurface,
   SPACE_LABEL,
-  BEHAVIOURS9 as TREE_BEHAVIOURS,
+  BEHAVIOURS10 as TREE_BEHAVIOURS,
   TREE_DECLARATION,
   TREE_PANEL_ID,
   TREE_RUNTIME_UNITS,
@@ -14205,11 +14241,15 @@ export {
   TreeIcon,
   TreePanelView,
   TreeScroller,
+  BEHAVIOURS6 as VIEWPORT_BEHAVIOURS,
+  VIEWPORT_DECLARATION,
   VIEWPORT_PANEL_ID,
+  VIEWPORT_RUNTIME_UNITS,
   VIEWPORT_SLOTS,
   VIEW_STATE_OPS,
   ViewportController,
   ViewportPanelView,
+  ViewportSurface,
   XenoCurveScale,
   XenoGraphScale,
   XenoNodeIndex,
@@ -14404,6 +14444,9 @@ export {
   valuesEqual,
   viewportManifest,
   viewportPanel,
+  viewportRuntimeComponents,
+  viewportViewManifest,
+  viewportViewState,
   visibleEdges,
   walkTree,
   wheelZoomFactor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.13.26",
+  "version": "0.13.27",
   "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",
@@ -64,7 +64,7 @@
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
     "@xenosystem/block-sdk": ">=0.3.4 <1",
-    "@xenosystem/components": ">=0.28.1 <1",
+    "@xenosystem/components": ">=0.29.1 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": ">=0.0.1",
     "@xenosystem/elements-react": ">=0.0.1",
@@ -81,7 +81,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@xenosystem/block-sdk": "^0.3.4",
-    "@xenosystem/components": "^0.28.1",
+    "@xenosystem/components": "^0.29.1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements": "0.0.1",
     "@xenosystem/elements-react": "0.0.1",