@almadar/shell-web 0.0.0-stage → 1.0.0

package/dist/avl/index.d.ts

@@ -0,0 +1,2248 @@
+import { OperatorCategory } from '@almadar/std';
+import * as React$1 from 'react';
+import React__default from 'react';
+import { FieldType, FieldTag, EntityPersistence, SExpr, EvalTrace, A11yProps, EventEmit, Expression, OrbitalSchema, EntityData, EditFocus, EventPayload, AriaRole, DomainQuestion, DomainQuestionAnswer, ThemeDefinition, DependencyGraph, DependencyLayer, EventKey, CircuitStepResult, GuardEvaluation, EffectTrace, EventPayloadValue } from '@almadar/core';
+export { DependencyLayer } from '@almadar/core';
+import { A as AvlAnnotations, a as AvlNodeData, b as AvlNote } from '../FileTree-BCFnBEuQ.js';
+import { FileTreeItem } from '../components/index.js';
+export { c as AvlEdgeData, d as AvlStateMachine, e as AvlStateMachineProps, B as BehaviorView, M as ModuleCard, s as schemaToFlowGraph } from '../FileTree-BCFnBEuQ.js';
+import { T as TraitLevelData, d as TraitTransitionInfo, c as TransitionLevelData, S as SerializedEffect } from '../avl-schema-parser-CtJxJ9KU.js';
+export { A as ApplicationLevelData, C as CrossLink, b as OrbitalLevelData, p as parseApplicationLevel, e as parseOrbitalLevel, f as parseTraitLevel, g as parseTransitionLevel, t as traitLevelFromTrait } from '../avl-schema-parser-CtJxJ9KU.js';
+import { NodeProps, EdgeProps, Edge, Node, NodeTypes, ReactFlowProps } from '@xyflow/react';
+import { AnyPatternConfig } from '@almadar/core/patterns';
+import { useDraggable } from '@dnd-kit/core';
+import { Z as ZoomLevel } from '../avl-zoom-state-CKMVuBFg.js';
+
+/**
+ * AVL theme roles — every AVL color is a theme token or a `color-mix` of one,
+ * so a diagram repaints with the active `data-theme`. Structure stays neutral;
+ * saturated color is reserved for meaning (the focused/active element).
+ */
+
+/** Every AVL atom renders a `<g>` placed inside a parent svg. */
+interface AvlBaseProps {
+    x?: number;
+    y?: number;
+    color?: string;
+    opacity?: number;
+    className?: string;
+}
+type StateRole = 'initial' | 'terminal' | 'hub' | 'default';
+declare const STATE_COLORS: Record<StateRole, {
+    fill: string;
+    border: string;
+}>;
+declare function getStateRole(isInitial?: boolean, isTerminal?: boolean, transitionCount?: number, maxTransitionCount?: number): StateRole;
+declare const CONNECTION_COLORS: {
+    readonly forward: {
+        readonly color: "var(--color-muted-foreground)";
+        readonly width: 1.5;
+        readonly dash: "none";
+    };
+    readonly backward: {
+        readonly color: "var(--color-muted-foreground)";
+        readonly width: 1.5;
+        readonly dash: "5 4";
+    };
+    readonly selfLoop: {
+        readonly color: "var(--color-muted-foreground)";
+        readonly width: 1;
+        readonly dash: "3 2";
+    };
+    readonly emitListen: {
+        readonly color: "var(--color-warning)";
+        readonly width: 1.5;
+        readonly dash: "4 3";
+    };
+};
+type EffectCategory = 'ui' | 'data' | 'communication' | 'lifecycle' | 'control' | 'async' | 'compute' | 'system';
+declare const EFFECT_CATEGORY_COLORS: Record<EffectCategory, {
+    color: string;
+    bg: string;
+}>;
+/** Category of an effect head as it appears in a program; null when @almadar/core declares no such effect. */
+declare function effectCategoryOf(head: string): EffectCategory | null;
+declare const OPERATOR_CATEGORY_COLORS: Record<OperatorCategory, string>;
+
+interface AvlFieldTypeProps extends AvlBaseProps {
+    kind: FieldType;
+    size?: number;
+    label?: string;
+}
+type FieldTypeShape = 'circle' | 'triangle' | 'square' | 'diamond' | 'ring' | 'hexagon' | 'bars' | 'link' | 'variable';
+/** Every @almadar/core field type drawn as the shape of its data family. */
+declare const FIELD_TYPE_SHAPES: Record<FieldTag, FieldTypeShape>;
+declare const AvlFieldType: React__default.FC<AvlFieldTypeProps>;
+
+interface AvlOrbitalProps {
+    cx?: number;
+    cy?: number;
+    r?: number;
+    label?: string;
+    color?: string;
+    opacity?: number;
+    className?: string;
+}
+declare const AvlOrbital: React__default.FC<AvlOrbitalProps>;
+
+interface AvlEntityProps extends AvlBaseProps {
+    r?: number;
+    fieldCount?: number;
+    persistence?: EntityPersistence;
+    label?: string;
+}
+declare const AvlEntity: React__default.FC<AvlEntityProps>;
+
+interface AvlTraitProps {
+    cx?: number;
+    cy?: number;
+    rx?: number;
+    ry?: number;
+    rotation?: number;
+    label?: string;
+    color?: string;
+    opacity?: number;
+    className?: string;
+}
+declare const AvlTrait: React__default.FC<AvlTraitProps>;
+
+interface AvlPageProps extends AvlBaseProps {
+    size?: number;
+    label?: string;
+}
+declare const AvlPage: React__default.FC<AvlPageProps>;
+
+interface AvlApplicationProps extends AvlBaseProps {
+    width?: number;
+    height?: number;
+    label?: string;
+}
+declare const AvlApplication: React__default.FC<AvlApplicationProps>;
+
+interface AvlStateProps extends AvlBaseProps {
+    name?: string;
+    isInitial?: boolean;
+    isTerminal?: boolean;
+    width?: number;
+    height?: number;
+    /** V2: Role-based fill color. When set, overrides monochrome rendering. */
+    role?: StateRole;
+    /** V2: Number of transitions touching this state. Drives proportional width. */
+    transitionCount?: number;
+}
+declare const AvlState: React__default.FC<AvlStateProps>;
+
+interface AvlTransitionProps {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    curved?: boolean;
+    /** Center point to curve away from (curves outward if provided). */
+    curveAwayFrom?: {
+        x: number;
+        y: number;
+    };
+    label?: string;
+    color?: string;
+    opacity?: number;
+    className?: string;
+}
+declare const AvlTransition: React__default.FC<AvlTransitionProps>;
+
+interface AvlEventProps extends AvlBaseProps {
+    size?: number;
+    label?: string;
+}
+declare const AvlEvent: React__default.FC<AvlEventProps>;
+
+interface AvlGuardProps extends AvlBaseProps {
+    size?: number;
+    label?: string;
+}
+declare const AvlGuard: React__default.FC<AvlGuardProps>;
+
+interface AvlEffectProps extends AvlBaseProps {
+    /** Effect operator as it appears in the program (`set`, `emit`, `llm/generate`, …). */
+    effectType: string;
+    size?: number;
+    label?: string;
+    /** V2: Render a category-colored background circle behind the icon. */
+    showBackground?: boolean;
+}
+declare const AvlEffect: React__default.FC<AvlEffectProps>;
+
+interface AvlFieldProps extends AvlBaseProps {
+    /** Angle in radians from entity center. */
+    angle?: number;
+    length?: number;
+    required?: boolean;
+    label?: string;
+}
+declare const AvlField: React__default.FC<AvlFieldProps>;
+
+interface AvlBindingProps {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    label?: string;
+    color?: string;
+    opacity?: number;
+    className?: string;
+}
+declare const AvlBinding: React__default.FC<AvlBindingProps>;
+
+interface AvlPersistenceProps extends AvlBaseProps {
+    kind: EntityPersistence;
+    size?: number;
+    label?: string;
+}
+declare const AvlPersistence: React__default.FC<AvlPersistenceProps>;
+
+interface AvlOperatorProps extends AvlBaseProps {
+    name: string;
+    namespace?: OperatorCategory;
+    size?: number;
+}
+declare const AvlOperator: React__default.FC<AvlOperatorProps>;
+
+interface AvlSExprProps extends AvlBaseProps {
+    width?: number;
+    height?: number;
+    label?: string;
+}
+declare const AvlSExpr: React__default.FC<AvlSExprProps>;
+
+interface AvlLiteralProps extends AvlBaseProps {
+    value: string;
+    size?: number;
+}
+declare const AvlLiteral: React__default.FC<AvlLiteralProps>;
+
+interface AvlBindingRefProps extends AvlBaseProps {
+    path: string;
+    size?: number;
+}
+declare const AvlBindingRef: React__default.FC<AvlBindingRefProps>;
+
+/**
+ * AVL ELK Layout
+ *
+ * Shared ELK-based layout engine for state machines. Extracted from
+ * AvlTraitScene so both the V2 scene renderer and the V3 BehaviorView
+ * can share the same layout computation.
+ */
+
+interface LayoutNode {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    isInitial?: boolean;
+    isTerminal?: boolean;
+    role: StateRole;
+    transitionCount: number;
+}
+interface LayoutEdge {
+    id: string;
+    from: string;
+    to: string;
+    event: string;
+    effects: Array<{
+        type: string;
+    }>;
+    guard: boolean;
+    guardExpr?: string;
+    index: number;
+    labelX: number;
+    labelY: number;
+    labelW: number;
+    labelH: number;
+    points: Array<{
+        x: number;
+        y: number;
+    }>;
+    isSelf: boolean;
+    isBackward: boolean;
+}
+interface ElkLayout {
+    nodes: LayoutNode[];
+    edges: LayoutEdge[];
+    width: number;
+    height: number;
+}
+/** Measured sizes for a renderer that draws real nodes and label pills. */
+interface TraitLayoutMetrics {
+    nodeSize: (stateName: string) => {
+        width: number;
+        height: number;
+    };
+    labelSize: (transition: TraitLevelData['transitions'][number]) => {
+        width: number;
+        height: number;
+    };
+    nodeSpacing: number;
+    layerSpacing: number;
+    orthogonal: boolean;
+    direction: 'ltr' | 'rtl';
+}
+declare function computeTraitLayout(data: TraitLevelData, metrics?: TraitLayoutMetrics): Promise<ElkLayout>;
+declare function edgePath(points: Array<{
+    x: number;
+    y: number;
+}>): string;
+
+/**
+ * AvlCircuit — a Lisp S-expression drawn as a circuit and, given a trace,
+ * shown executing: values ride the wires, `and`/`or` are switch chains that
+ * break where a condition fails, `if` throws a track switch, lambdas run items
+ * down a conveyor, effects light rungs of a ladder.
+ */
+
+interface AvlCircuitProps {
+    /** The Lisp code to draw (an `.orb` S-expression). */
+    expr: SExpr;
+    /** Evaluation trace of `expr` (see `evaluateTraced`). */
+    trace?: EvalTrace;
+    /** Last trace step to show. Defaults to the end of the trace. */
+    cursor?: number;
+    /** Caption over the board (e.g. "guard of SAVE"). */
+    title?: string;
+    /** Show the code line under the title. @default true */
+    showCode?: boolean;
+    className?: string;
+}
+declare const AvlCircuit: React__default.FC<AvlCircuitProps>;
+
+/**
+ * AvlGlyph — one AVL notation symbol, standalone: the atom drawn in its own
+ * svg, framed to its measured bounds, with a caption. The single render-ui
+ * surface for every AVL atom (a symbol legend, a docs callout, a key).
+ */
+
+declare const AVL_GLYPH_KINDS: readonly ["application", "orbital", "entity", "trait", "page", "state", "transition", "event", "guard", "effect", "field", "fieldType", "binding", "bindingRef", "persistence", "operator", "sexpr", "literal"];
+type AvlGlyphKind = (typeof AVL_GLYPH_KINDS)[number];
+interface AvlGlyphProps extends Omit<React__default.AriaAttributes, keyof A11yProps>, A11yProps {
+    /** Which notation symbol to draw.
+     * @example "state"
+     */
+    kind: AvlGlyphKind;
+    /** Caption, and the drawn text for operator / literal / bindingRef symbols. */
+    label?: string;
+    /** Effect symbol variant. @default 'set' */
+    effectType?: string;
+    /** Field-type symbol variant. @default 'string' */
+    fieldType?: FieldType;
+    /** Persistence symbol variant (also the entity's ring). @default 'persistent' */
+    persistence?: EntityPersistence;
+    /** Operator category tint. @default 'arithmetic' */
+    namespace?: OperatorCategory;
+    /** Symbol height; `xs` sits inline with a line of text. @default 'md' */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Show the caption under the symbol. @default true */
+    showCaption?: boolean;
+    className?: string;
+}
+declare const AvlGlyph: React__default.FC<AvlGlyphProps>;
+
+interface AvlOrbitalUnitTrait {
+    name: string;
+    color?: string;
+}
+interface AvlOrbitalUnitPage {
+    name: string;
+}
+interface AvlOrbitalUnitProps {
+    entityName: string;
+    fields?: number;
+    persistence?: EntityPersistence;
+    traits: AvlOrbitalUnitTrait[];
+    pages: AvlOrbitalUnitPage[];
+    className?: string;
+    color?: string;
+    animated?: boolean;
+}
+declare const AvlOrbitalUnit: React__default.FC<AvlOrbitalUnitProps>;
+
+interface AvlClosedCircuitState {
+    name: string;
+}
+interface AvlClosedCircuitTransition {
+    from: string;
+    to: string;
+    event?: string;
+    guard?: string;
+    effects?: string[];
+}
+interface AvlClosedCircuitProps {
+    states: AvlClosedCircuitState[];
+    transitions: AvlClosedCircuitTransition[];
+    className?: string;
+    color?: string;
+    animated?: boolean;
+}
+declare const AvlClosedCircuit: React__default.FC<AvlClosedCircuitProps>;
+
+interface AvlEmitListenProps {
+    emitter: {
+        name: string;
+        fields?: number;
+    };
+    listener: {
+        name: string;
+        fields?: number;
+    };
+    eventName?: string;
+    className?: string;
+    color?: string;
+    animated?: boolean;
+}
+declare const AvlEmitListen: React__default.FC<AvlEmitListenProps>;
+
+interface AvlSlotMapSlot {
+    name: string;
+    /** Manual position overrides. Omit for auto-layout. */
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+interface AvlSlotMapProps {
+    slots: AvlSlotMapSlot[];
+    pageWidth?: number;
+    pageHeight?: number;
+    className?: string;
+    color?: string;
+    animated?: boolean;
+}
+declare const AvlSlotMap: React__default.FC<AvlSlotMapProps>;
+
+interface AvlExprTreeNode {
+    label: string;
+    type: 'operator' | 'literal' | 'binding';
+    children?: AvlExprTreeNode[];
+}
+interface AvlExprTreeProps {
+    expression: AvlExprTreeNode;
+    className?: string;
+    color?: string;
+    animated?: boolean;
+}
+declare const AvlExprTree: React__default.FC<AvlExprTreeProps>;
+
+interface AvlTransitionLaneEffect {
+    type: string | string;
+}
+interface AvlTransitionLaneProps {
+    event: string;
+    guard?: string;
+    effects: AvlTransitionLaneEffect[];
+    width: number;
+    x?: number;
+    y?: number;
+    isBackward?: boolean;
+    isSelfLoop?: boolean;
+    color?: string;
+    onTransitionClick?: () => void;
+}
+declare const AvlTransitionLane: React__default.FC<AvlTransitionLaneProps>;
+
+interface AvlSwimLaneProps {
+    listenedEvents: string[];
+    emittedEvents: string[];
+    centerWidth: number;
+    height: number;
+    color?: string;
+    children: React__default.ReactNode;
+}
+declare const AvlSwimLane: React__default.FC<AvlSwimLaneProps>;
+
+/**
+ * AvlBehaviorGlyph - Visual identity for a behavior.
+ *
+ * Generates a unique glyph from behavior properties:
+ * - Core shape = persistence type
+ * - Spokes = field count
+ * - Rings = state count
+ * - Markers = effect types used
+ * - Color = domain hue
+ * - Composition = child glyphs + event wiring (molecule/organism)
+ */
+
+declare const DOMAIN_COLORS: Record<string, string>;
+type BehaviorLevel = 'atom' | 'molecule' | 'organism';
+type GlyphSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface BehaviorGlyphChild {
+    name: string;
+    fieldCount?: number;
+    stateCount?: number;
+    persistence?: EntityPersistence;
+    effectTypes?: string[];
+}
+interface BehaviorGlyphConnection {
+    from: string;
+    to: string;
+    event: string;
+}
+interface AvlBehaviorGlyphProps {
+    /** Behavior name */
+    name: string;
+    /** Composition level */
+    level?: BehaviorLevel;
+    /** Domain for color coding */
+    domain?: string;
+    /** Override color (otherwise derived from domain) */
+    color?: string;
+    /** Entity field count (drives spoke count) */
+    fieldCount?: number;
+    /** State count (drives ring count) */
+    stateCount?: number;
+    /** Persistence type (drives core shape) */
+    persistence?: EntityPersistence;
+    /** Effect types used (drives markers on rings) */
+    effectTypes?: string[];
+    /** Child behaviors for molecule/organism composition */
+    children?: BehaviorGlyphChild[];
+    /** Event connections between children (organism level) */
+    connections?: BehaviorGlyphConnection[];
+    /** Size preset */
+    size?: GlyphSize;
+    /** Show text labels */
+    showLabels?: boolean;
+    /** Animate orbital rings */
+    animated?: boolean;
+    /** Additional className */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+declare const AvlBehaviorGlyph: React__default.FC<AvlBehaviorGlyphProps>;
+
+/**
+ * AVL layout utilities for positioning atoms in composed diagrams.
+ */
+/** Distribute N points evenly around a ring.
+ *  Handles edge cases: 1 state (centered), 2 states (horizontal). */
+declare function ringPositions(cx: number, cy: number, r: number, count: number, startAngle?: number): Array<{
+    x: number;
+    y: number;
+    angle: number;
+}>;
+/** Create an SVG arc path between two angles on a circle. */
+declare function arcPath(cx: number, cy: number, r: number, startAngle: number, endAngle: number): string;
+/** Distribute N points radially from a center. */
+declare function radialPositions(cx: number, cy: number, innerR: number, outerR: number, count: number, startAngle?: number): Array<{
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    angle: number;
+}>;
+/** Simple grid layout: position items in columns and rows. */
+declare function gridPositions(startX: number, startY: number, cols: number, cellWidth: number, cellHeight: number, count: number): Array<{
+    x: number;
+    y: number;
+    col: number;
+    row: number;
+}>;
+/** Compute a quadratic bezier control point offset perpendicular to the line. */
+declare function curveControlPoint(x1: number, y1: number, x2: number, y2: number, offset: number): {
+    cpx: number;
+    cpy: number;
+};
+
+/**
+ * AVL Zoom Band
+ *
+ * Continuous semantic zoom for the unified AVL canvas.
+ * React Flow nodes read the current zoom band from context
+ * and switch their rendering accordingly.
+ */
+/** The four zoom bands of the unified AVL canvas. */
+type ZoomBand = 'system' | 'module' | 'behavior' | 'detail';
+/** Thresholds for zoom band transitions (React Flow viewport zoom). */
+declare const ZOOM_BAND_THRESHOLDS: {
+    readonly system: readonly [0.1, 0.4];
+    readonly module: readonly [0.4, 1];
+    readonly behavior: readonly [1, 2.5];
+    readonly detail: readonly [2.5, 5];
+};
+/** Determine which zoom band the current viewport zoom falls into. */
+declare function computeZoomBand(zoom: number): ZoomBand;
+/**
+ * Compute progress (0..1) within a zoom band.
+ * Useful for crossfade transitions between bands.
+ */
+declare function zoomProgress(zoom: number, band: ZoomBand): number;
+/** Context providing the current zoom band to all node components. */
+declare const ZoomBandContext: React$1.Context<ZoomBand>;
+/** Hook to read the current zoom band. */
+declare function useZoomBand(): ZoomBand;
+
+/**
+ * SystemNode — one orbital on the system map (cosmic L1): name, entity and
+ * its size (traits · pages · fields). Hovering shows what the host renders
+ * for the orbital (its live screen), with Open traits (drill in), Open code
+ * and Preview. `SystemBandNode` heads the connected / standalone bands.
+ */
+
+interface SystemMapContextValue {
+    /** React hosts: drill into the orbital's traits. */
+    openTraits?: (orbital: string) => void;
+    /** Emits UI:{openTraitsEvent} with { orbital } to drill into the orbital's traits (set from FlowCanvas's own `openTraitsEvent`). */
+    openTraitsEvent?: EventEmit<{
+        orbital: string;
+    }>;
+    /** Show each orbital's live screen in its hover card (the canvas renders it). */
+    preview?: boolean;
+    /** React hosts: what the hover shows for an orbital; no hover card without it (or `preview`). */
+    renderPreview?: (orbital: string) => React__default.ReactNode;
+    /** Emits UI:{openCodeEvent} with { orbital }. */
+    openCodeEvent?: EventEmit<{
+        orbital: string;
+    }>;
+    /** Emits UI:{previewEvent} with { orbital }. */
+    previewEvent?: EventEmit<{
+        orbital: string;
+    }>;
+    /** The orbital to ring (the one the user came from). */
+    highlighted?: string;
+    /** Dependencies lens: a node was clicked (its id; clicking the selected one clears). */
+    selectDependency?: (id: string) => void;
+}
+declare const SystemMapContext: React__default.Context<SystemMapContextValue>;
+declare const SystemNode: React__default.NamedExoticComponent<NodeProps>;
+declare const SystemBandNode: React__default.NamedExoticComponent<NodeProps>;
+declare const DependencyNode: React__default.NamedExoticComponent<NodeProps>;
+declare const DependencyColumnNode: React__default.NamedExoticComponent<NodeProps>;
+
+/**
+ * MiniStateMachine — Inline simplified state machine for the ModuleCard.
+ *
+ * Renders a compact left-to-right flow of AvlState nodes connected
+ * by AvlTransition arrows, with AvlEffect icons below.
+ * No ELK layout needed — uses simple horizontal positioning.
+ */
+
+interface MiniStateMachineProps {
+    data: TraitLevelData;
+    /** Author notes, shown in a popover on hover of a state or an effect. */
+    annotations?: AvlAnnotations;
+    className?: string;
+}
+declare const MiniStateMachine: React__default.FC<MiniStateMachineProps>;
+
+/**
+ * DetailView — Transition specification card for the detail zoom band (2.5x-5.0x).
+ *
+ * Renders a spec card with: from/to AvlState nodes, AvlEvent trigger,
+ * AvlGuard diamond, numbered AvlEffect icons with binding paths,
+ * and AvlFieldType shapes.
+ */
+
+interface DetailViewProps {
+    data: AvlNodeData;
+}
+declare const DetailView: React__default.FC<DetailViewProps>;
+
+/**
+ * AvlTransitionEdge — React Flow edge for state machine transitions.
+ *
+ * Bezier path with event label at midpoint. Guard diamond and effect
+ * dot indicators shown inline. Forward transitions are solid dark,
+ * backward transitions are dashed lighter.
+ */
+
+interface AvlTransitionEdgeData {
+    [key: string]: string | boolean | undefined;
+    event: string;
+    hasGuard?: boolean;
+    hasEffects?: boolean;
+}
+type AvlTransitionFlowEdge = Edge<AvlTransitionEdgeData, 'transition'>;
+declare const AvlTransitionEdge: React__default.FC<EdgeProps<AvlTransitionFlowEdge>>;
+
+/**
+ * AvlEventWireEdge — React Flow edge for emit/listen event wiring.
+ *
+ * Dashed orange Bezier path with event name label at midpoint.
+ * Uses AVL CONNECTION_COLORS.emitListen styling.
+ */
+
+interface AvlEventWireEdgeData {
+    [key: string]: string | boolean | undefined;
+    event: string;
+    compatible?: boolean;
+}
+type AvlEventWireFlowEdge = Edge<AvlEventWireEdgeData, 'eventWire'>;
+declare const AvlEventWireEdge: React__default.FC<EdgeProps<AvlEventWireFlowEdge>>;
+
+/**
+ * AvlBackwardEdge — Dashed backward/retry transition edge.
+ *
+ * Uses CONNECTION_COLORS.backward styling: dashed, lighter color.
+ */
+
+declare const AvlBackwardEdge: React__default.FC<EdgeProps>;
+
+/**
+ * AvlPageEdge — Thin solid page-reference edge.
+ *
+ * Slate colored, 1px, used for page-to-trait references.
+ */
+
+declare const AvlPageEdge: React__default.FC<EdgeProps>;
+
+/**
+ * AvlBindingEdge — Dotted violet binding edge with @ marker.
+ *
+ * Used for data binding connections. Dotted line at 1px with
+ * a small @ label at the midpoint.
+ */
+
+declare const AvlBindingEdge: React__default.FC<EdgeProps>;
+
+/**
+ * AVL Preview Converter
+ *
+ * Extracts render-ui pattern configs from OrbitalSchema transitions
+ * and builds the FlowCanvas graph: one card per orbital (all of them, or
+ * only the focused one), each showing the live orbital or a state picked
+ * from its dropdown (`stateOptionsOf`).
+ *
+ * Key feature: detects interactive elements (buttons, links) inside
+ * patterns that fire events. These become per-element source handles
+ * so edges connect from the specific trigger element to the target screen.
+ *
+ * Uses @almadar/core types for schema-level constructs.
+ */
+
+/**
+ * What a FlowCanvas lays out: `overview` — orbital cards (the focused one, or
+ * all of them); `trait-expanded` — one card per trait of a single orbital,
+ * wired by intra-orbital `emits → listens` edges (the cosmic tab's circuit).
+ */
+type ViewLevel = 'overview' | 'trait-expanded' | 'system';
+/**
+ * Screen size preset for OrbPreview rendering inside nodes.
+ *
+ * Aligned with the four-breakpoint responsiveness audit:
+ *   mobile  — phone portrait  (≤640px)
+ *   tablet  — iPad / small landscape (641–1024px)
+ *   laptop  — 13–15" notebook (1025–1440px)
+ *   wide    — desktop / monitor (≥1441px)
+ *
+ * Preset widths are representative viewport widths within each range; the
+ * preview renders at exactly this width so the embedded UI experiences
+ * the same media-query / container-query behavior it would at the real
+ * viewport. `minHeight` only floors the preview frame; vertical sizing is
+ * content-driven (OrbPreview height="auto").
+ */
+type ScreenSize = 'mobile' | 'tablet' | 'laptop' | 'wide';
+/**
+ * An interactive element inside a render-ui pattern that fires an event.
+ * For example, a button with `event: "CHECKOUT"` is an event source.
+ * These are used to draw edges from the specific trigger element to the
+ * target screen, making the prototype flow concrete.
+ */
+interface PatternEventSource {
+    /** The event name fired by this element (e.g., "CHECKOUT"). */
+    event: string;
+    /** The pattern type of the trigger element (e.g., "button", "link", "icon-button"). */
+    patternType: string;
+    /** Human label if available (e.g., "Checkout", "Submit"). */
+    label?: string;
+    /**
+     * Path within the pattern tree (e.g., "children.2" means third child).
+     * Used to position the handle near the trigger element.
+     */
+    path: string;
+    /** Vertical position hint (0..1) for handle placement on the node. */
+    positionHint: number;
+    /** Typed payload fields if this event carries data. */
+    payloadFields?: Array<{
+        name: string;
+        type: string;
+        required?: boolean;
+    }>;
+}
+/** A slot + pattern config pair extracted from a render-ui effect. */
+interface RenderUIEntry {
+    slot: string;
+    pattern: AnyPatternConfig;
+}
+/**
+ * Data for a preview node (used at both overview and expanded levels). A closed
+ * type alias, not an index-signature interface: it stays assignable to React
+ * Flow's `Record<string, unknown>` node-data bound while every field is declared.
+ */
+type PreviewNodeData = {
+    /** Orbital this node belongs to. */
+    orbitalName: string;
+    /** Trait name (a card showing a picked state). */
+    traitName?: string;
+    /** State name after this transition fires (a card showing a picked state). */
+    stateName?: string;
+    /** Event that triggers this transition (a card showing a picked state). */
+    transitionEvent?: string;
+    /** From state (a card showing a picked state). */
+    fromState?: string;
+    /** To state (a card showing a picked state). */
+    toState?: string;
+    /** The card frame's width set by the designer; the screen-size preset otherwise. */
+    cardWidth?: number;
+    /** `'screen'`: a designer card standing for every transition that paints this same render. */
+    cardLabel?: 'screen';
+    /** Screen cards: every event that shows this render, in declaration order. */
+    enteredBy?: string[];
+    /** The screen its trait shows when the app opens: entered by INIT fired from the trait's initial state. */
+    opensApp?: boolean;
+    /**
+     * Render-ui patterns extracted from the transition's effects.
+     * Each entry is a slot + pattern config pair.
+     */
+    patterns: RenderUIEntry[];
+    /**
+     * Interactive elements within the patterns that fire events.
+     * Each one becomes a source handle on the node, allowing edges
+     * to connect from the specific button/link to the target screen.
+     */
+    eventSources: PatternEventSource[];
+    /** Behavior layer for visual indicator (color band). */
+    layer?: string;
+    /** State role for visual indicator. */
+    stateRole?: StateRole;
+    /** All effect types on this transition (for overlay). */
+    effectTypes?: string[];
+    /** Guard expression (for overlay). */
+    guard?: Expression | null;
+    entityName?: string;
+    persistence?: string;
+    fieldCount?: number;
+    traitCount?: number;
+    pageRoutes?: string[];
+    /**
+     * Generation status for this orbital. When `'running'`, the overview node
+     * renders a spinner overlay + accent border so the user can see which
+     * orbital the coordinator is currently dispatching to. Other states are
+     * available so consumers can also paint success/error treatments
+     * (e.g. green border on completion, red on failure). Default is `'idle'`.
+     *
+     * Set by FlowCanvasProps.orbitalStatus and threaded through the converter.
+     * Future expansion: hover over a `'running'` node to surface the subagent
+     * trace inline.
+     */
+    status?: 'idle' | 'running' | 'success' | 'error';
+    /**
+     * The `OrbitalSchema.name` this node was derived from. The reserved value
+     * `'__design_system__'` identifies nodes belonging to the Design System
+     * tab's synthesized catalog schema, so downstream event handlers can route
+     * mutation events to the project theme manifest instead of the project's
+     * orbital schema. Unset for project orbitals — handlers treat absence as
+     * "project schema".
+     */
+    sourceSchemaName?: string;
+    /** World view: this card is the focused orbital. */
+    focused?: boolean;
+    /**
+     * Discriminator for the node variant. Absent on orbital cards (a card
+     * showing a picked state carries `transitionEvent`). Set to `'trait-card'` for nodes
+     * produced by `orbitalToTraitGraph` so renderers can branch cleanly.
+     */
+    kind?: 'trait-card' | 'system-orbital' | 'system-band' | 'dependency' | 'dependency-column';
+    /** `dependency` / `dependency-column`: the column the node sits in (the app, or the layer it is imported from). */
+    dependencyColumn?: 'app' | 'own' | 'io' | 'std' | 'primitive' | 'unknown' | 'client' | 'host' | 'service' | 'store' | 'external';
+    /** `dependency`: its part in the current selection (`both`: on each side of it). */
+    dependencyRole?: 'selected' | 'upstream' | 'downstream' | 'both' | 'dim';
+    /** Trait flow: a composed unit's traits and embedded render pieces. */
+    flowTraits?: number;
+    flowRenderPieces?: number;
+    /** `dependency`: a live unit's health (the infrastructure view), and one metric to show beside it. */
+    unitStatus?: 'ok' | 'degraded' | 'down' | 'idle';
+    unitMetric?: string;
+    /** `system-band`: which band the label heads, and how many orbitals it holds. */
+    bandKind?: 'connected' | 'standalone';
+    bandCount?: number;
+    /** `system-orbital`: the events this orbital exchanges with others (in and out), for search. */
+    wireEvents?: string[];
+    /**
+     * Trait-card transitions (`kind === 'trait-card'` only). One row per
+     * transition; each row is clickable and drills to L4 transition detail
+     * in cosmic. `event` is the trigger; `fromState` / `toState` mirror the
+     * underlying state-machine edge.
+     */
+    transitions?: Array<{
+        event: string;
+        fromState: string;
+        toState: string;
+    }>;
+    /**
+     * Trait-card `emits` event names (`kind === 'trait-card'` only). One
+     * source handle per entry on the right edge of the card. Drives the
+     * outgoing wire endpoints in `orbitalToTraitGraph`.
+     */
+    emits?: string[];
+    /**
+     * Trait-card `listens` event names (`kind === 'trait-card'` only). One
+     * target handle per entry on the left edge of the card. Drives the
+     * incoming wire endpoints in `orbitalToTraitGraph`.
+     */
+    listens?: string[];
+    /**
+     * Trait-card `linkedEntity` (`kind === 'trait-card'` only). Surfaced as a
+     * subtitle/badge next to the trait name so users can see what entity the
+     * trait operates on. Mirrors `Trait.linkedEntity` from the resolved schema.
+     */
+    linkedEntity?: string;
+    /** Full parsed schema threaded to node renderers (e.g. TraitCardNode). */
+    _fullSchema?: OrbitalSchema;
+    /** Mock entity data for the orbital preview. */
+    _mockData?: EntityData;
+};
+/** Data for event flow edges. */
+interface EventEdgeData {
+    [key: string]: string | boolean | undefined;
+    /** The event name displayed on the edge. */
+    event: string;
+    /** Source state name (expanded level). */
+    fromState?: string;
+    /** Target state name (expanded level). */
+    toState?: string;
+    /** Whether this is a backward/retry transition. */
+    isBackward?: boolean;
+    /** Whether this is a cross-orbital event wire (overview level). */
+    isCrossOrbital?: boolean;
+    /** Source trait (for cross-orbital wires). */
+    fromTrait?: string;
+    /** Target trait (for cross-orbital wires). */
+    toTrait?: string;
+    /**
+     * The pattern type that triggers this event (e.g., "button").
+     * Displayed on the edge label for context.
+     */
+    triggerPatternType?: string;
+    /** The trigger element's label (e.g., "Checkout"). */
+    triggerLabel?: string;
+}
+/**
+ * Build a React Flow graph for the overview level.
+ * Each orbital gets one node showing its INIT transition's UI.
+ */
+declare function schemaToOverviewGraph(schema: OrbitalSchema, mockData?: EntityData, behaviorMeta?: Record<string, {
+    layer: string;
+}>, layoutHint?: 'pipeline' | 'grid', orbitalStatus?: Record<string, PreviewNodeData['status']>, screenSize?: ScreenSize): {
+    nodes: Node<PreviewNodeData>[];
+    edges: Edge<EventEdgeData>[];
+};
+/** How a card's states are listed: one per render-ui transition, or one per distinct render (designer). */
+type CanvasStateView = 'transitions' | 'screens';
+/** The state-dropdown entry that shows the whole orbital running from its initial state. */
+declare const LIVE_STATE = "live";
+interface CanvasStateOption {
+    id: string;
+    label: string;
+    hint: string;
+    data: PreviewNodeData;
+}
+interface CanvasStateGroup {
+    alias: string;
+    behaviorName: string;
+    options: CanvasStateOption[];
+}
+interface CanvasStateOptions {
+    own: CanvasStateOption[];
+    groups: CanvasStateGroup[];
+}
+/**
+ * The states a card can show: the orbital's own render-ui transitions, plus
+ * one group per imported behavior (`sourceBehavior.alias`). A trait embedded
+ * in another trait's render (`@trait.X`) draws inside that screen, so it is
+ * not a state of its own.
+ */
+declare function stateOptionsOf(schema: OrbitalSchema, orbitalName: string, view: CanvasStateView, mockData?: EntityData): CanvasStateOptions;
+/**
+ * The state a card opens on: an INIT render (own, then an imported behavior's)
+ * — the screen the app actually opens on — else its first state, else the
+ * live orbital.
+ */
+declare function initialStateOf(options: CanvasStateOptions): string;
+/** One transition a verification run played on a card's trait. */
+interface PlayedStep {
+    trait: string;
+    event: string;
+    from: string;
+    to: string;
+}
+/**
+ * The card option showing where a played step landed: the option for exactly that transition,
+ * else the trait's first screen of the state it reached. `undefined` when the state has no
+ * screen of its own (the card then stays as it is).
+ */
+declare function optionForPlayedStep(options: CanvasStateOptions, step: PlayedStep): string | undefined;
+interface CanvasViewOptions {
+    /** `local`: the focused orbital's card only; `world`: every orbital's card. */
+    scope: 'local' | 'world';
+    focusedOrbital?: string;
+    /** Each card's dropdown choice (a `CanvasStateOption.id`); its `initialStateOf` when absent or gone. */
+    stateByOrbital?: Record<string, string>;
+    view: CanvasStateView;
+    mockData?: EntityData;
+    behaviorMeta?: Record<string, {
+        layer: string;
+    }>;
+    layoutHint?: 'pipeline' | 'grid';
+    orbitalStatus?: Record<string, PreviewNodeData['status']>;
+    screenSize?: ScreenSize;
+}
+/** The canvas's cards and edges for a scope, each card showing its chosen state. */
+declare function canvasViewGraph(schema: OrbitalSchema, opts: CanvasViewOptions): {
+    nodes: Node<PreviewNodeData>[];
+    edges: Edge<EventEdgeData>[];
+    focusedOrbital: string | undefined;
+    /** Every card's world-view layout position (the local view draws its one card at the origin). */
+    worldPositions: Record<string, {
+        x: number;
+        y: number;
+    }>;
+};
+
+/**
+ * Where the design-selection overlay draws its spacing handles, from the
+ * selected container's box and its direct children's boxes (all in the
+ * card's content coordinates).
+ */
+
+/** An element's distances from its parent's four sides (negative where it sticks out), and the parent's size. */
+interface OffsetInParent {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    parentWidth: number;
+    parentHeight: number;
+}
+
+/**
+ * OrbPreviewNode
+ *
+ * React Flow node that renders a real OrbPreview inside it.
+ * The canvas is always live and editable (like Figma). Clicking any
+ * rendered UI element selects its pattern and shows props in the
+ * TransitionPanel. No edit mode toggle needed.
+ *
+ * The header is the drag handle for React Flow. The content area
+ * passes clicks through to the pattern elements.
+ */
+
+/** Selected pattern info, emitted when user clicks a UI element in the node. */
+interface SelectedPattern {
+    /** The pattern type (e.g., "button", "input", "stack"). */
+    patternType: string;
+    /** The DOM element's data-pattern-id if available. */
+    patternId?: string;
+    /** The node this pattern belongs to. */
+    nodeData: PreviewNodeData;
+    /** The source trait for this slot content. */
+    sourceTrait?: string;
+    /** Bounding rect relative to the node for floating inspector positioning. */
+    rect?: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    /** Every selected pattern path in this node (multi-select), this one — the primary — last. */
+    selection?: string[];
+    /** Its distances from its parent's four sides and the parent's size (card px), when it has a parent pattern. */
+    offsetInParent?: OffsetInParent;
+    /** The element's own address — the trait that drew it (an embedded trait's, not the card's), transition, slot, path. */
+    focus?: EditFocus;
+    /** Every selected element's own address (multi-select), the primary last — `selection` repeats paths across embedded traits. */
+    elements?: EditFocus[];
+}
+/** A trait's latest verification verdict, as the host keeps it. */
+interface CardVerdict {
+    status: 'pass' | 'fail' | 'stale' | 'running';
+    detail?: string;
+}
+/**
+ * A host that verifies from the canvas (Studio's Designer): each card shows controls to verify
+ * the transition it shows (`UI:CARD_VERIFY_STEP`) or its trait's whole walk
+ * (`UI:CARD_VERIFY_TRAIT`, paused and stopped with `UI:CARD_VERIFY_PAUSE` / `_STOP`), and the
+ * trait's verdict. Absent: no verify controls.
+ */
+interface CanvasVerify {
+    verdictOf: (orbital: string, trait: string) => CardVerdict | undefined;
+    playing: (orbital: string) => boolean;
+    /** Subscribe to the states a run reaches; a card with a screen for the step flips to it. Returns the unsubscribe. */
+    follow: (onStep: (step: CanvasStepReached) => void) => () => void;
+}
+/** A transition a verification run just took, on the trait of `orbital`. */
+interface CanvasStepReached {
+    orbital: string;
+    trait: string;
+    event: string;
+    from: string;
+    to: string;
+}
+declare const CanvasVerifyContext: React__default.Context<CanvasVerify | null>;
+declare const OrbPreviewNode: React__default.NamedExoticComponent<NodeProps>;
+
+/**
+ * EventFlowEdge
+ *
+ * React Flow edge for the V3 FlowCanvas. Shows the event name and
+ * optionally the trigger element (button label) that fires it.
+ *
+ * When the edge originates from a specific event source handle,
+ * the label shows "Button Label \u2192 EVENT" to make the connection
+ * between UI element and transition clear.
+ */
+
+declare const EventFlowEdge: React__default.NamedExoticComponent<EdgeProps>;
+
+declare function deriveEditFocusFromElement(el: HTMLElement): EditFocus | null;
+
+interface InlineTextEditOptions {
+    /** The schema being rendered — the literal-or-bound check reads the prop from it. */
+    schema: OrbitalSchema | null | undefined;
+    enabled: boolean;
+    /** The card's own trait + transition, when the host knows them better than the DOM (a canvas card). */
+    node?: {
+        traitName?: string;
+        transitionEvent?: string;
+    };
+}
+/** A `onDoubleClickCapture` handler for the element that contains the rendered content. */
+declare function useInlineTextEdit({ schema, enabled, node }: InlineTextEditOptions): (e: React.MouseEvent) => void;
+
+/**
+ * useCanvasDnd — drag/drop primitives for the AVL canvas surface.
+ *
+ * Shares the sensor stack + collision waterfall with `useDataDnd` (both
+ * import from `hooks/useAlmadarDndCollision`); diverges on drop semantics
+ * because palette → canvas is a cursor-resolved tree insert, not a
+ * sortable-list reorder.
+ *
+ * Pointer-sensor based so it works inside React Flow nodes (the native
+ * HTML5 DnD path was swallowed by React Flow's pan/zoom handlers).
+ *
+ * The kind being dragged is React context (`useCanvasDragKind`), not a bus event.
+ *
+ * Event contract (defaults — overridable via `CanvasDndProvider.onDrop`):
+ *   - On 'pattern' drop:          emits `UI:PATTERN_DROP` { patternType, containerNode, parentPath?, index? }
+ *   - On 'behavior' drop:         emits `UI:BEHAVIOR_DROP` { behaviorName, containerNode }
+ *   - On 'pattern-instance' drop: emits `UI:PATTERN_MOVE` { fromPath, loc, toParentPath?, toIndex? } —
+ *     reorder of an already-placed pattern; `loc` is the source's own
+ *     containerNode (orbitalName/traitName/transitionEvent), `toParentPath`/
+ *     `toIndex` come from `target.resolvePath` same as an insert drop.
+ *
+ * The `onDrop` callback lets consumers route ANY payload kind (including
+ * the defaults above) to their own bus events or schema mutations instead —
+ * e.g. the builder app bypasses ALL default emits (see UIEditor.tsx) because
+ * `useEventBus()` resolves to a different chunk's context inside this
+ * provider. Return `true` from `onDrop` to suppress the default emit.
+ */
+
+/**
+ * Drag kinds the canvas understands. Open-ended `string` so consumers can
+ * introduce further kinds without touching this file — the provider's
+ * defaults cover `'pattern'`, `'behavior'` and `'pattern-instance'`
+ * (in-canvas reorder of an existing pattern, source: `OrbPreviewNode`'s L2
+ * content); anything else routes through the consumer's `onDrop`.
+ */
+type CanvasDragKind = 'pattern' | 'behavior' | 'pattern-instance' | (string & {});
+/**
+ * Payload carried by a draggable. For `'pattern'` tiles `data` is
+ * `{ type: string }`, for `'behavior'` tiles `{ name: string }`, for
+ * `'pattern-instance'` (reorder) `{ fromPath: string, loc: CanvasContainerNode }`.
+ * For any other consumer-defined kind, the shape is whatever the consumer
+ * agrees on with its own `onDrop`.
+ */
+interface CanvasDragPayload {
+    kind: CanvasDragKind;
+    data: EventPayload;
+}
+/**
+ * Orbital/trait/transition context a drop will mutate.
+ *
+ * A type alias (not an interface) so it is assignable to `EventPayload` — we pass the whole
+ * object as a field on the `UI:PATTERN_DROP` payload.
+ */
+type CanvasContainerNode = {
+    orbitalName?: string;
+    traitName?: string;
+    transitionEvent?: string;
+};
+/** Drop-target metadata stored on each droppable's `data` field. */
+/** Where a drop lands: the card path + index, and the container element's own address when the card knows it. */
+interface CanvasResolvedDrop {
+    parentPath: string;
+    index: number;
+    /** The container's own address (the trait that drew it — paths restart in each embedded behavior). */
+    container?: {
+        orbital: string;
+        trait: string;
+        transition: string;
+        slot: string;
+        path: string;
+    };
+}
+interface CanvasDropTarget {
+    /**
+     * `l1` = outer orbital frame (overview level).
+     * `l2` = render-ui slot inside an expanded orbital.
+     * `wrapper` = page-level catch-all fired when nothing inner caught the drop.
+     */
+    level: 'l1' | 'l2' | 'wrapper' | (string & {});
+    /** Full or partial container context this drop will mutate. */
+    containerNode: CanvasContainerNode;
+    /**
+     * Optional resolver called at drop time to derive `parentPath` + `index`
+     * from the pointer's final client position. L2 slots use this to walk the
+     * DOM under their `contentRef` and find the nearest `data-accepts-children`
+     * container plus the cursor-relative insertion index.
+     */
+    resolvePath?: (cursor: {
+        x: number;
+        y: number;
+    }) => CanvasResolvedDrop | null;
+}
+interface CanvasDropEvent {
+    payload: CanvasDragPayload;
+    target: CanvasDropTarget;
+    /** Final pointer client position, when dnd-kit could compute it. */
+    cursor: {
+        x: number;
+        y: number;
+    } | null;
+    /**
+     * Resolved insertion path/index from `target.resolvePath(cursor)`. Null
+     * when the target has no resolver or the cursor was unavailable.
+     */
+    resolved: CanvasResolvedDrop | null;
+}
+interface UseCanvasDraggableArgs {
+    /** Unique id (per-tile). dnd-kit uses this to track the active drag. */
+    id: string;
+    payload: CanvasDragPayload;
+    disabled?: boolean;
+}
+interface UseCanvasDraggableResult {
+    setNodeRef: (node: HTMLElement | null) => void;
+    /** dnd-kit's attributes, with `role` narrowed to a declared ARIA role so they spread onto a core `Box`. */
+    attributes: Omit<ReturnType<typeof useDraggable>['attributes'], 'role'> & {
+        role?: AriaRole;
+    };
+    listeners: ReturnType<typeof useDraggable>['listeners'];
+    isDragging: boolean;
+    /** Spread on the tile — live transform + grab cursor + touch-action. */
+    style: React__default.CSSProperties;
+}
+declare function useCanvasDraggable({ id, payload, disabled, }: UseCanvasDraggableArgs): UseCanvasDraggableResult;
+interface UseCanvasDroppableArgs {
+    id: string;
+    target: CanvasDropTarget;
+    /** Which drag kinds this zone accepts. Defaults to ['pattern','behavior']. */
+    accepts?: readonly CanvasDragKind[];
+    disabled?: boolean;
+}
+interface UseCanvasDroppableResult {
+    setNodeRef: (node: HTMLElement | null) => void;
+    isOver: boolean;
+}
+declare function useCanvasDroppable({ id, target, accepts, disabled, }: UseCanvasDroppableArgs): UseCanvasDroppableResult;
+interface CanvasDndProviderProps {
+    children: React__default.ReactNode;
+    /**
+     * Override the default drop behavior. The default emits `UI:PATTERN_DROP`
+     * / `UI:BEHAVIOR_DROP` based on payload kind. Pass an `onDrop` to route
+     * additional kinds (e.g. `'pattern-instance'` reorder) elsewhere, or to
+     * mutate schema directly without going through the bus.
+     *
+     * Return `true` from `onDrop` to suppress the default emit; return
+     * `false`/`undefined` to fall through to defaults after running your code.
+     */
+    onDrop?: (drop: CanvasDropEvent) => boolean | void;
+    /**
+     * Renders the floating preview that follows the cursor during a drag.
+     * @dnd-kit moves the source DOM node via CSS transform, which gets clipped
+     * by any ancestor with `overflow: hidden|auto|scroll` (e.g. a scrollable
+     * palette column). Returning a node here mounts a portal-attached overlay
+     * outside the clip so the user always sees what they're dragging.
+     *
+     * Receives the active payload (or null between drags) and returns the
+     * preview element — typically the same JSX the tile renders inline.
+     */
+    renderOverlay?: (payload: CanvasDragPayload | null) => React__default.ReactNode;
+}
+/**
+ * The bus event a canvas drop becomes — one shaping for every emitter (the
+ * provider's default emit, and a host bridge emitting on its own bus):
+ * a palette pattern → `UI:PATTERN_DROP`, a behavior → `UI:BEHAVIOR_DROP`
+ * (both with the resolved position and the container's own address), an
+ * already-placed pattern → `UI:PATTERN_MOVE`. Null for anything else.
+ */
+declare function dropBusEvent(drop: CanvasDropEvent): {
+    event: 'UI:PATTERN_DROP' | 'UI:BEHAVIOR_DROP' | 'UI:PATTERN_MOVE';
+    payload: EventPayload;
+} | null;
+/**
+ * Wraps a canvas subtree in one DndContext + sensors + collision waterfall.
+ * Every `useCanvasDraggable` / `useCanvasDroppable` inside this provider
+ * participates in the same drag session.
+ */
+declare function CanvasDndProvider({ children, onDrop, renderOverlay, }: CanvasDndProviderProps): React__default.ReactElement;
+
+type ElementPropAccess = 
+/** `knob`: the prop is that knob of the element's call site (edited in Settings). */
+{
+    editable: true;
+    knob?: string;
+} | {
+    editable: false;
+    reason: 'bound' | 'fixed' | 'loading';
+    detail: string;
+};
+/** One knob of the behavior an element belongs to, as its editor asks it. */
+interface ElementKnob {
+    key: string;
+    question: DomainQuestion;
+    value: DomainQuestionAnswer | undefined;
+}
+/** The knobs the element's call site (`trait`) sets on its behavior. */
+interface ElementSettings {
+    trait: string;
+    knobs: ReadonlyArray<ElementKnob>;
+}
+interface ElementEditAccess {
+    prop: (name: string) => ElementPropAccess;
+    /** The behavior an embedded element belongs to — shown as "Part of <behavior>". */
+    partOf?: string;
+    /** Its behavior's knobs, for the inspector's Settings. */
+    settings?: ElementSettings;
+}
+type ElementEditAccessResolver = (focus: EditFocus) => ElementEditAccess;
+declare const EDITABLE: ElementPropAccess;
+declare const ElementEditAccessContext: React$1.Context<ElementEditAccessResolver | null>;
+/** A prop's access at the element, editable when the host gives no answer. */
+declare function propAccessAt(resolver: ElementEditAccessResolver | null, focus: EditFocus | null | undefined, prop: string): ElementPropAccess;
+
+/**
+ * OrbInspector
+ *
+ * Universal contextual inspector for .orb programs. Built into FlowCanvas.
+ * Two tabs: Inspector (contextual sections) and Code (.orb syntax view).
+ *
+ * Inspector shows different sections based on what was clicked:
+ *   - Orbital header → entity fields, traits, pages
+ *   - Pattern element → pattern props, entity (if entity-aware), transition (if fires event)
+ *   - Transition node → state diagram, guard, effects, render-ui source
+ *
+ * Code tab shows the .orb representation of the selected context.
+ *
+ * When `editable` is true, inspector fields become inputs.
+ */
+
+interface OrbInspectorProps {
+    node: PreviewNodeData;
+    schema: OrbitalSchema;
+    editable?: boolean;
+    /**
+     * Studio persona viewing the inspector. Controls tab visibility (Code is
+     * architect-only, Styles is universal) and section visibility (Entity,
+     * raw guard, raw effects are architect-only). Default `'builder'` matches
+     * pre-Phase-2 behavior except for the new Styles tab, which every persona
+     * gets.
+     */
+    userType?: 'builder' | 'designer' | 'architect';
+    /**
+     * Project theme tokens. The Styles tab reads them for Global edits (and, on
+     * the synthesized `__design_system__` schema, lists them all); those edits
+     * emit `UI:PROP_CHANGE` with `scope: 'global'` + `tokenGroup`/`tokenKey`.
+     */
+    themeManifest?: ThemeDefinition;
+    /**
+     * Initial tab on mount. Local state still owns the active tab after
+     * that — this does not make the component controlled. Enables
+     * deep-linking into a specific tab (e.g. from a LayersPanel selection).
+     */
+    defaultTab?: InspectorTab;
+    /** Fires whenever the tab-bar selection changes. */
+    onTabChange?: (tab: InspectorTab) => void;
+    onSchemaChange?: (schema: OrbitalSchema) => void;
+    onClose: () => void;
+    /**
+     * In-node pattern selection, when this inspector is rendered OUTSIDE
+     * `FlowCanvas` (see `FlowCanvas`'s `externalInspector` +
+     * `onSelectedPatternChange`). `PatternSelectionContext` only reaches
+     * descendants of `FlowCanvas`'s own render tree, so a standalone
+     * consumer has no other way to feed pattern-level selection in — pass
+     * `FlowCanvas`'s `onSelectedPatternChange` payload straight through here.
+     * When omitted (the inline, built-in-inspector usage), falls back to
+     * `PatternSelectionContext`, unchanged.
+     */
+    selectedPattern?: SelectedPattern | null;
+    /** What the selected element lets the user change; `ElementEditAccessContext` (inside a canvas) when omitted. */
+    elementAccess?: ElementEditAccessResolver;
+}
+type InspectorTab = 'inspector' | 'design' | 'prototype' | 'code';
+declare function OrbInspector({ node, schema, editable, userType, themeManifest, defaultTab, onTabChange, onSchemaChange, onClose, selectedPattern: selectedPatternProp, elementAccess: elementAccessProp }: OrbInspectorProps): React__default.ReactElement;
+declare namespace OrbInspector {
+    var displayName: string;
+}
+
+/**
+ * LayersPanel
+ *
+ * Figma-style layers tree for an OrbitalSchema. Thin adapter over FileTree's
+ * generic `items` mode — all it does is flatten the schema into
+ * `FileTreeItem[]` via `schemaToLayerItems` and render `<FileTree look="nav" />`.
+ * No tree/panel logic of its own.
+ *
+ * ---------------------------------------------------------------------------
+ * ID scheme (stable, parseable, '/'-joined path of typed segments)
+ * ---------------------------------------------------------------------------
+ *   orbital:<orbitalName>
+ *   orbital:<orbitalName>/page:<pageName>
+ *   orbital:<orbitalName>/trait:<traitName>
+ *   orbital:<orbitalName>/trait:<traitName>/transition:<index>
+ *   orbital:<orbitalName>/trait:<traitName>/transition:<index>/slot:<slotName>
+ *   orbital:<orbitalName>/trait:<traitName>/transition:<index>/slot:<slotName>/pattern:<slotIndex>:<patternPath>
+ *
+ * The transition segment uses the transition's array INDEX (not its event
+ * name) because two transitions in the same trait can share an event name
+ * (same event fired from different `from` states) — the index is the only
+ * value `parseTraitLevel`/`parseTransitionLevel` guarantee is unique. The
+ * slot segment uses the slot's NAME (render-ui slots are conventionally
+ * distinct within one transition); the `pattern:<slotIndex>` part of the
+ * final leaf's key disambiguates the rare case of two render-ui effects
+ * targeting the same slot name within one transition by falling back to
+ * their position among that transition's render-ui effects.
+ *
+ * `<patternPath>` is the same schema-compatible address `UISlotRenderer`
+ * stamps as `data-pattern-path` and `useSchemaEditor`'s `navigatePatternPath`
+ * / `splitPatternChildPath` consume: `root` for the render-ui root, then
+ * `root.children.<i>`, `root.children.<i>.children.<j>`, … recursing into
+ * every nested pattern's `children` (an array, or a single bare pattern
+ * object — both normalized the same way `UISlotRenderer.renderPatternChildren`
+ * does). Non-object children (`@entity.X` / `@trait.X` string bindings,
+ * literals) are bindings, not nested patterns, and never get a row. Every
+ * pattern node in the render-ui tree — root and nested alike — gets its own
+ * `pattern:<slotIndex>:<patternPath>` leaf, parented to its containing
+ * pattern's row (or the slot row, for `root`), so a consumer can walk the
+ * exact tree `schemaEditor.movePattern`/`removePattern`/`updatePatternProp`
+ * address.
+ *
+ * This is backward-compatible one level up: every non-pattern segment
+ * (`orbital:` / `page:` / `trait:` / `transition:` / `slot:`) is unchanged,
+ * so a consumer parsing only those levels (e.g. to resolve which orbital a
+ * click belongs to) needs no changes. Only the trailing pattern leaf's key
+ * gained the `:<patternPath>` suffix — use the exported `parseLayerId` to
+ * read it instead of re-deriving the regex.
+ *
+ * Hierarchy choice: orbitals are the roots, with each orbital's `pages` and
+ * `traits` as sibling children (an OrbitalDefinition owns both directly).
+ * A schema has no cross-orbital "Page" entity and no data linking a
+ * render-ui slot back to a specific page route, so a page-rooted tree
+ * (pages containing the orbitals that render on them) is not derivable
+ * without guessing — forbidden by the no-heuristics rule. See the Wave D3
+ * report for this deviation from the literal "pages → orbitals → ..." spec
+ * line.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Flattens an OrbitalSchema into FileTree's `items` shape. See the ID scheme
+ * doc comment above the file header for the exact id grammar.
+ */
+declare function schemaToLayerItems(schema: OrbitalSchema): FileTreeItem[];
+/** Every field a LayersPanel id can carry, populated up to whatever depth the id reaches. `orbitalName` is the only field guaranteed present. */
+interface LayerIdParts {
+    orbitalName: string;
+    pageName?: string;
+    traitName?: string;
+    /** The transition's array INDEX (see the id-scheme doc comment — not its event name). */
+    transitionIndex?: number;
+    slotName?: string;
+    /** Position among the slot's render-ui effects (disambiguates two effects targeting the same slot name). */
+    patternSlotIndex?: number;
+    /** Schema-compatible address into the render-ui tree (`root`, `root.children.0`, …) — the exact `patternPath` `schemaEditor.movePattern`/`removePattern`/`updatePatternProp` expect. */
+    patternPath?: string;
+}
+/**
+ * Parses any id `schemaToLayerItems` produces back into its typed segments.
+ * Returns `null` for a malformed id (missing/garbled `orbital:` root, or an
+ * unrecognized segment). Segments below the deepest one present in `id` are
+ * left `undefined` — e.g. a trait-level id has no `slotName`/`patternPath`.
+ */
+declare function parseLayerId(id: string): LayerIdParts | null;
+interface LayersPanelProps {
+    schema: OrbitalSchema;
+    /** Currently selected node id (any level of the ID scheme above). */
+    selectedId?: string;
+    onSelect?: (id: string) => void;
+    /**
+     * Reorder a node within the tree. Threaded to FileTree's `onNodeReorder`
+     * seam — presence-gated there, so omitting it just means no dragging.
+     */
+    onReorder?: (id: string, newParentId: string | null, index: number) => void;
+}
+declare const LayersPanel: React__default.FC<LayersPanelProps>;
+
+/**
+ * Canvas editing tools a studio host can turn on for its canvas (a persona's
+ * shell manifest declares its list; the canvas never branches on persona).
+ */
+declare const CANVAS_TOOLS: readonly ["multiSelect", "clipboard", "inlineText", "zoomToSelection", "designHandles", "autoLayout", "sizeLimits", "absolute", "guides", "measure"];
+type CanvasTool = (typeof CANVAS_TOOLS)[number];
+declare function hasCanvasTool(tools: readonly CanvasTool[], tool: CanvasTool): boolean;
+
+/**
+ * AVL dependency graph — the app over what it is built from (the cosmic
+ * Dependencies lens): orbitals, then the io realizations, std behaviors and
+ * std UI primitives they import, left to right, one edge per `uses` import.
+ * The host supplies the graph (orbitals' imports and each behavior's own).
+ */
+
+type SystemDependencies = DependencyGraph;
+declare function schemaToDependencyGraph(deps: SystemDependencies): {
+    nodes: Node<PreviewNodeData>[];
+    edges: Edge[];
+};
+/** What `selected` is built from (upstream, through every import) and what reaches it (downstream). */
+declare function dependencyReach(deps: SystemDependencies, selected: string): {
+    upstream: Set<string>;
+    downstream: Set<string>;
+};
+
+/**
+ * AVL trait flow — one orbital as the units its traits come from (cosmic L2
+ * "Flow"): each own trait on its own, each composed behavior as one unit
+ * (its traits, plus the render pieces other traits embed), and the event
+ * wires between units, rolled up from the trait wires the runtime delivers.
+ */
+
+type FlowColumn = 'own' | DependencyLayer;
+interface TraitFlowUnit {
+    id: string;
+    name: string;
+    column: FlowColumn;
+    /** Traits that do their own work. */
+    traits: string[];
+    /** Traits other traits embed to render a piece of their screen. */
+    renderPieces: string[];
+}
+interface TraitFlowEdge {
+    source: string;
+    target: string;
+    events: string[];
+}
+declare function traitFlowGraph(schema: OrbitalSchema, orbital: string, layers?: Readonly<Record<string, DependencyLayer>>): {
+    units: TraitFlowUnit[];
+    edges: TraitFlowEdge[];
+};
+/** One hop each way: the units that trigger `selected`, and the units it triggers. */
+declare function flowNeighbors(edges: readonly TraitFlowEdge[], selected: string): {
+    triggeredBy: Set<string>;
+    triggers: Set<string>;
+};
+
+/**
+ * AVL play — maps played circuit steps (`CircuitStepResult`, produced by
+ * `@almadar-io/verify`'s `playCircuitStep`) onto what the AVL views draw.
+ * Pure mapping; the host plays.
+ */
+
+/** One played step of a scene, as the host recorded it. */
+interface AvlPlayStep {
+    orbital: string;
+    trait: string;
+    from: string;
+    /** The event the step fired. */
+    event: EventKey;
+    /** The fired event's payload.
+     *  @payloadFor event */
+    payload: EventPayload;
+    result: CircuitStepResult;
+}
+/** What a Step control asks the host to play. */
+type AvlStepRequest = {
+    orbital: string;
+    trait: string;
+    from: string;
+    /** The event to fire. */
+    event: EventKey;
+    /** The event's payload.
+     *  @payloadFor event */
+    payload: EventPayload;
+};
+/** The trait's `from --event-->` arms in declaration order — the order `firedArm` / `GuardEvaluation.arm` index. */
+declare function armsOf(trait: TraitLevelData, from: string, event: string): TraitTransitionInfo[];
+/** Position of `transition` among its own `from --event-->` arms. */
+declare function armPosition(trait: TraitLevelData, transition: TraitTransitionInfo): number;
+/** The trait transition a step fired, or undefined when no arm fired. */
+declare function firedTransition(trait: TraitLevelData, step: AvlPlayStep): TraitTransitionInfo | undefined;
+interface AvlStateMachinePlayback {
+    activeState?: string;
+    activeTransition?: number;
+    visitedStates: string[];
+}
+/** State-machine highlights after steps `0..cursor` of the scene, for one trait. */
+declare function stateMachinePlayback(trait: TraitLevelData, orbital: string, steps: readonly AvlPlayStep[], cursor: number): AvlStateMachinePlayback;
+interface AvlTransitionPlayback {
+    step: AvlPlayStep;
+    /** Whether this transition is the arm that fired. */
+    fired: boolean;
+    guard?: GuardEvaluation;
+    /** Per declared effect, in order; empty when the arm did not fire. */
+    effects: ReadonlyArray<EffectTrace>;
+}
+/** The latest step within `0..cursor` that evaluated `transition` (its guard ran, or it fired). */
+declare function transitionPlayback(trait: TraitLevelData, orbital: string, transition: TraitTransitionInfo, steps: readonly AvlPlayStep[], cursor: number): AvlTransitionPlayback | undefined;
+
+/**
+ * FlowCanvas — V3 UI Projection Canvas
+ *
+ * The canvas IS the app. Nodes show rendered UI thumbnails from
+ * render-ui effects. Edges show events connecting screens.
+ *
+ * Local view (default): one orbital card, Tab / Shift+Tab to move between
+ * orbitals. World view: every orbital card. Each card picks the state it
+ * shows from a dropdown in its header.
+ */
+
+/** The trait level's lens, and the unit whose traits the Traits lens is narrowed to. */
+interface TraitView {
+    lens: 'flow' | 'traits';
+    filter: {
+        unit: string;
+        traits: readonly string[];
+    } | null;
+}
+/** `local`: only the focused orbital's card; `world`: every orbital's card. */
+type CanvasScope = 'local' | 'world';
+interface CanvasFocusChange {
+    orbital: string;
+    scope: CanvasScope;
+    /** The focused card's chosen state (`LIVE_STATE` for the live orbital). */
+    state: string;
+}
+/** Where a card sits on the canvas, and its frame width when the designer resized it. */
+interface CanvasNodePlacement {
+    x: number;
+    y: number;
+    width?: number;
+}
+interface FlowCanvasProps {
+    schema: OrbitalSchema | string;
+    mockData?: EntityData;
+    className?: string;
+    width?: number | string;
+    height?: number | string;
+    onNodeClick?: (context: {
+        level: ViewLevel | 'code' | 'transition';
+        orbital: string;
+        trait?: string;
+        transition?: string;
+        /** With `level: 'transition'`: the clicked transition's index in the trait's state machine. */
+        transitionIndex?: number;
+    }) => void;
+    /** With `initialLevel="system"`: what an orbital chip does (drill in, hover preview, open code, preview). */
+    systemMap?: Omit<SystemMapContextValue, 'openTraitsEvent' | 'selectDependency'>;
+    /** Emits UI:{openTraitsEvent} with { orbital } when an orbital on the system map is opened (drilled into). */
+    openTraitsEvent?: EventEmit<{
+        orbital: string;
+    }>;
+    /** With `initialLevel="system"`: the app's imports, for the Dependencies lens (absent: Events only). */
+    systemDependencies?: SystemDependencies;
+    /** Trait level: which lens (and trait filter) shows — pass with `onTraitViewChange` to keep it across remounts. */
+    traitView?: TraitView;
+    /** @notification */
+    onTraitViewChange?: (view: TraitView) => void;
+    /** The top bar (lenses, scope, screen size); an embedding host that drives the canvas itself can leave it out. */
+    toolbar?: boolean;
+    /** Refit whenever the frame resizes (a host column that grows on hover); off, a user's pan and zoom survive. */
+    fitOnResize?: boolean;
+    /** Flow lens: the unit the host lights (`null`: none); absent, the user's own clicks select. */
+    flowSelection?: string | null;
+    /**
+     * Flow lens: the unit the user clicked.
+     * @notification
+     */
+    onFlowSelect?: (unit: TraitFlowUnit) => void;
+    /** Flow lens: emits UI:{flowSelectEvent} with the selected unit. */
+    flowSelectEvent?: EventEmit<TraitFlowUnit>;
+    /** Dependencies lens: emits UI:{openBehaviorEvent} with { name } to open a selected behavior's source. */
+    openBehaviorEvent?: EventEmit<{
+        name: string;
+    }>;
+    /** Maps a keydown `e.code` — optionally prefixed `Mod+` (⌘/Ctrl), `Shift+`, `Alt+` in that order — to an event, emitted as `UI:{event}`; keystrokes inside inputs/textareas never route. */
+    keyMap?: Record<string, EventKey>;
+    /** With `initialLevel="trait-expanded"`: played steps lighting each trait card's state machine. */
+    scene?: {
+        steps: readonly AvlPlayStep[];
+        cursor: number;
+    };
+    /**
+     * Fired when the focused orbital, the scope, or the focused card's state changes.
+     * @notification
+     */
+    onFocusChange?: (focus: CanvasFocusChange) => void;
+    /** The orbital cards open on (local view) — or, with `initialLevel="trait-expanded"`, the orbital whose traits are shown. */
+    initialOrbital?: string;
+    /** `trait-expanded`: one card per trait of `initialOrbital` (cosmic). Default: orbital cards. */
+    initialLevel?: ViewLevel;
+    /** Focus this orbital (e.g. picked in a Layers panel); changing it moves the focus without remounting. */
+    focusedOrbital?: string;
+    /** Pre-select a node on mount (opens OrbInspector). */
+    initialSelectedNode?: PreviewNodeData;
+    /** Enable editing in the inspector. When true, fields become inputs. */
+    editable?: boolean;
+    /** Called when the user edits the schema via the inspector. */
+    onSchemaChange?: (schema: OrbitalSchema) => void;
+    /** Called when the user presses Delete/Backspace with patterns selected (all of a multi-select). */
+    onPatternDelete?: (context: {
+        patternIds: string[];
+        nodeData: PreviewNodeData;
+        elements?: EditFocus[];
+    }) => void;
+    /** Editing tools the canvas turns on (a persona's shell manifest declares them); all by default. */
+    tools?: readonly CanvasTool[];
+    /** What each element lets the user change (knob, data-bound, fixed by a behavior); every prop is editable without it. */
+    elementAccess?: ElementEditAccessResolver;
+    /** Called when the user drags from a source handle to a target handle (event wiring). */
+    onEventWire?: (wire: {
+        eventName: string;
+        sourceOrbital: string;
+        targetOrbital: string;
+        sourceTraitName?: string;
+        targetTraitName?: string;
+    }) => void;
+    /** Behavior layer metadata for node styling (layer color bands). */
+    behaviorMeta?: Record<string, {
+        layer: string;
+    }>;
+    /**
+     * Per-orbital generation status. Keyed by orbital name. Drives the spinner
+     * + accent border treatment on the overview node and (future) the hover
+     * trace surface. Defaults to `'idle'` for missing entries. Consumers
+     * derive this from agent subagent_start/complete SSE events.
+     */
+    orbitalStatus?: Record<string, PreviewNodeData['status']>;
+    /**
+     * Hover handler for overview-level orbital nodes. Fires with the orbital
+     * name on enter and `null` on leave. Reserved for the upcoming trace
+     * tooltip: consumers will use it to anchor a popover that shows the
+     * subagent's live trace + reasoning for the hovered orbital.
+     * @notification
+     */
+    onOrbitalHover?: (orbitalName: string | null) => void;
+    /** Layout hint: 'pipeline' renders nodes left-to-right, 'grid' (default) uses sqrt-based grid. */
+    layoutHint?: 'pipeline' | 'grid';
+    /** Called when the user clicks a node in overview level (for composition hints). */
+    onNodeSelect?: (orbitalName: string) => void;
+    /**
+     * @deprecated Use onNodeClick instead. Kept for AvlCosmicZoom compat.
+     * @notification
+     */
+    onZoomChange?: (level: string, context: Record<string, string | undefined>) => void;
+    /** @deprecated Not used in V3. */
+    focusTarget?: {
+        type: string;
+        name: string;
+    };
+    /** @deprecated Not used in V3. */
+    color?: string;
+    /** @deprecated Not used in V3. */
+    animated?: boolean;
+    /** @deprecated Not used in V3. */
+    initialTrait?: string;
+    /** @deprecated Not used in V3. */
+    stateCoverage?: Record<string, string>;
+    /**
+     * Studio persona viewing the canvas. Drives `OrbInspector` tab/section
+     * visibility — designers and builders hide the raw `code` tab and the
+     * architect-only Entity / raw-guard / raw-effects sections; architects see
+     * everything. Default `'builder'` preserves pre-Phase-2 behavior.
+     */
+    userType?: 'builder' | 'designer' | 'architect';
+    /**
+     * Project theme tokens (Design System tab only). Forwarded to `OrbInspector`
+     * so the Styles tab can render an editable token list when the selection
+     * originates from the synthesized `__design_system__` schema.
+     */
+    themeManifest?: ThemeDefinition;
+    /**
+     * Persisted node positions keyed by node id. When the node set changes
+     * (level/schema switch), any id present here overrides the computed layout
+     * position, restoring a user's manual drag arrangement. Node ids are unique
+     * per view level, so a single flat map covers overview + expanded. A saved
+     * `width` restores a card frame the designer resized.
+     */
+    nodePositions?: Record<string, CanvasNodePlacement>;
+    /**
+     * Fired on node drag-stop and card resize with the full {id → placement}
+     * map of the current node set, so the consumer can persist the arrangement.
+     * @notification
+     */
+    onPositionsChange?: (positions: Record<string, CanvasNodePlacement>) => void;
+    /**
+     * Fired whenever the internal `selectedNode` changes — select, clear-on-
+     * escape, clear-on-level-change, and pattern-selection sync all route
+     * through this. Lets a consumer mirror selection into a persistent
+     * properties panel rendered outside the canvas (see `externalInspector`).
+     * @notification
+     */
+    onSelectedNodeChange?: (node: PreviewNodeData | null) => void;
+    /**
+     * Fired whenever the in-node pattern selection changes (a pattern click
+     * inside `OrbPreviewNode`, cleared on background click / Escape / pattern
+     * delete). `PatternSelectionContext` is internal to this component's own
+     * render tree, so an externally-rendered `OrbInspector` (see
+     * `externalInspector`) has no other way to learn which pattern the user
+     * picked — pass this straight through to `OrbInspector`'s `selectedPattern`
+     * prop to keep Design-tab prop editing working outside the canvas.
+     * @notification
+     */
+    onSelectedPatternChange?: (pattern: SelectedPattern | null) => void;
+    /**
+     * When true, FlowCanvas does not render its inline `OrbInspector` — the
+     * consumer is expected to render one externally, fed by
+     * `onSelectedNodeChange` + `onSelectedPatternChange`. Selection
+     * highlighting, keyboard delete, and every other behavior is unchanged.
+     * Default `false` preserves the built-in inline panel.
+     */
+    externalInspector?: boolean;
+    /** A host that verifies from the canvas: cards show verify controls and the trait's verdict,
+     *  and follow the states a run reaches (`verify.follow`). */
+    verify?: CanvasVerify;
+}
+declare const FlowCanvas: React__default.FC<FlowCanvasProps>;
+
+/**
+ * AvlGraphCanvas — the chrome every AVL graph shares: the zoom range, fitting the graph with
+ * a lens's padding, the dotted background, and zoom controls (hidden on compact screens,
+ * which pinch-zoom). A lens supplies its nodes, node types and handlers. Must sit inside a
+ * `ReactFlowProvider`.
+ */
+
+/** Node types for a layered graph (`layeredGraph`): pills and their column headers. */
+declare const AVL_GRAPH_NODE_TYPES: NodeTypes;
+type AvlGraphCanvasProps<N extends Node = Node, E extends Edge = Edge> = ReactFlowProps<N, E> & {
+    /** Space around the fitted graph, as a fraction of the viewport. */
+    fitPadding: number;
+    /** Compact screens pinch-zoom, so the zoom controls are hidden. */
+    compact?: boolean;
+};
+declare function AvlGraphCanvas<N extends Node = Node, E extends Edge = Edge>({ fitPadding, compact, children, ...flow }: AvlGraphCanvasProps<N, E>): React__default.ReactElement;
+
+/**
+ * ZoomBreadcrumb — HTML overlay showing current zoom band context.
+ *
+ * Positioned absolute top-left of the FlowCanvas.
+ * Shows AVL primitive icons inline with breadcrumb segments.
+ */
+
+interface ZoomBreadcrumbProps {
+    band: ZoomBand;
+    applicationName?: string;
+    orbitalName?: string;
+    traitName?: string;
+    eventName?: string;
+}
+declare const ZoomBreadcrumb: React__default.FC<ZoomBreadcrumbProps>;
+
+/**
+ * ZoomLegend — Collapsible HTML overlay showing AVL primitives
+ * relevant to the current zoom band.
+ */
+
+interface ZoomLegendProps {
+    band: ZoomBand;
+}
+declare const ZoomLegend: React__default.FC<ZoomLegendProps>;
+
+/**
+ * AvlCosmicZoom — Interactive Orbital Visualization
+ *
+ * V3: Delegates to FlowCanvas. Nodes are live OrbPreview renders
+ * of each orbital/transition. Two-level navigation (overview + expanded).
+ * Props interface preserved for backward compatibility with callers.
+ */
+
+interface AvlCosmicZoomProps {
+    /** The orbital schema (parsed object or JSON string) */
+    schema: OrbitalSchema | string;
+    /** CSS class for the outer container */
+    className?: string;
+    /** Primary color for the visualization */
+    color?: string;
+    /** Enable animations (default: true) */
+    animated?: boolean;
+    /** Pre-select an orbital on mount */
+    initialOrbital?: string;
+    /** Pre-select a trait on mount */
+    initialTrait?: string;
+    /** Callback when zoom level changes */
+    onZoomChange?: (level: ZoomLevel, context: {
+        orbital?: string;
+        trait?: string;
+    }) => void;
+    /** Container width */
+    width?: number | string;
+    /** Container height */
+    height?: number | string;
+    /** Coverage data for verification overlay */
+    stateCoverage?: Record<string, 'covered' | 'uncovered' | 'partial'>;
+    /** Dynamic focus target. Changes animate the zoom to the specified orbital/trait. */
+    focusTarget?: {
+        type: 'orbital' | 'trait';
+        name: string;
+    };
+}
+declare const AvlCosmicZoom: React__default.FC<AvlCosmicZoomProps>;
+
+/**
+ * AvlOrbitalsCosmicZoom — the whole app, drillable: L1 the system map
+ * (`FlowCanvas` at `system`: one chip per orbital, the event wires the runtime
+ * delivers between them), L3 an orbital's traits as state machines, L4 one
+ * transition as circuits that a host can play (`scene`, `stepEvent`, …).
+ * Every level is the same canvas, so pan, scroll-wheel zoom and fit behave
+ * as on the design canvas.
+ */
+
+interface AvlOrbitalsCosmicZoomProps {
+    /** The orbital schema (parsed object or JSON string) */
+    schema: OrbitalSchema | string;
+    /** CSS class for the outer container */
+    className?: string;
+    /** Accent for the breadcrumb */
+    color?: string;
+    /** Container width */
+    width?: number | string;
+    /** Container height */
+    height?: number | string;
+    /** Orbital ringed on the system map (e.g. the one the user came from). */
+    highlightedOrbital?: string;
+    /** Fired when the user opens an orbital's traits. */
+    onOrbitalSelect?: (orbital: string) => void;
+    /** What hovering an orbital on the system map shows (e.g. its live screen). */
+    renderOrbitalPreview?: (orbital: string) => React__default.ReactNode;
+    /** Emits UI:{openCodeEvent} with { orbital } from an orbital's hover card. */
+    openCodeEvent?: EventEmit<{
+        orbital: string;
+    }>;
+    /** The app's imports (each orbital's, and each behavior's own), for the Dependencies lens on the system map. */
+    dependencies?: SystemDependencies;
+    /** Emits UI:{openBehaviorEvent} with { name } to open a behavior selected in the Dependencies lens. */
+    openBehaviorEvent?: EventEmit<{
+        name: string;
+    }>;
+    /** Emits UI:{previewEvent} with { orbital } from an orbital's hover card. */
+    previewEvent?: EventEmit<{
+        orbital: string;
+    }>;
+    /** Played steps, in order; they light the L3 state machines and the L4 circuits. A scrubber picks the step shown. */
+    scene?: readonly AvlPlayStep[];
+    /** Emits UI:{stepEvent} from L4's Step button — the host plays the transition and appends the result to `scene`. */
+    stepEvent?: EventEmit<AvlStepRequest>;
+    /** Emits UI:{playEvent} with the drilled trait; the host keeps stepping it until paused or stopped. */
+    playEvent?: EventEmit<{
+        orbital: string;
+        trait: string;
+    }>;
+    /** Emits UI:{pauseEvent} while `playing`. */
+    pauseEvent?: EventEmit<{
+        orbital: string;
+        trait: string;
+    }>;
+    /** Emits UI:{stopEvent}; the host ends the run and clears the scene. */
+    stopEvent?: EventEmit<{
+        orbital: string;
+        trait: string;
+    }>;
+    /** Whether the host is continuously playing. */
+    playing?: boolean;
+}
+declare const AvlOrbitalsCosmicZoom: React__default.FC<AvlOrbitalsCosmicZoomProps>;
+
+/**
+ * AvlTraitScene V2 - Zoom Level 3
+ *
+ * Left-to-right horizontal flow with color-coded states,
+ * transition lanes, and swim lanes for emit/listen events.
+ */
+
+interface AvlTraitSceneProps {
+    data: TraitLevelData;
+    color?: string;
+    onTransitionClick?: (transitionIndex: number, position: {
+        x: number;
+        y: number;
+    }) => void;
+}
+declare const AvlTraitScene: React__default.FC<AvlTraitSceneProps>;
+
+/**
+ * AvlTransitionScene V2 - Zoom Level 4
+ *
+ * Card layout replacing vertical waterfall.
+ * Reads like a spec card: from → to, trigger, guard, effects.
+ */
+
+interface AvlTransitionSceneProps {
+    data: TransitionLevelData;
+    color?: string;
+}
+declare const AvlTransitionScene: React__default.FC<AvlTransitionSceneProps>;
+
+/**
+ * AvlClickTarget
+ *
+ * Transparent SVG rect overlay that makes AVL atoms clickable.
+ * AVL atoms render <g> elements which don't natively support
+ * bounding-box click events. This wrapper adds an invisible
+ * rect with pointer events and optional hover glow.
+ *
+ * @packageDocumentation
+ */
+
+interface AvlClickTargetProps {
+    /** Bounding box position */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Click handler */
+    onClick: () => void;
+    /** Hover callback */
+    onHover?: (hovering: boolean) => void;
+    /** Cursor style (default: pointer) */
+    cursor?: string;
+    /** Glow color on hover */
+    glowColor?: string;
+    /** Accessible label */
+    label?: string;
+    /** Children (the AVL atoms to render on top) */
+    children: React__default.ReactNode;
+}
+declare const AvlClickTarget: React__default.FC<AvlClickTargetProps>;
+
+/**
+ * AvlTransitionDetail — cosmic L4: one transition as circuits. The guard is
+ * a board of its own; each effect is a board in an accordion. Given a
+ * played step the boards show that run's values; `stepEvent` adds a
+ * payload editor and a Step button that asks the host to play this
+ * transition.
+ */
+
+/**
+ * One transition explained: from-state, event and to-state, the guard that
+ * must hold, and each effect it runs in order, drawn as circuit boards.
+ *
+ * @capabilities transition explainer, event guard effects walkthrough, state machine step detail
+ */
+interface AvlTransitionDetailProps {
+    /** Orbital the transition belongs to. */
+    orbital: string;
+    /** Trait the transition belongs to. */
+    trait: string;
+    /** The transition to explain.
+     * @example {"from":"pending","to":"paid","event":"PAY","effects":[{"type":"set","args":[]},{"type":"persist","args":[]}],"index":0}
+     */
+    transition?: TraitTransitionInfo;
+    /** The program the transition belongs to (object or JSON text), when it is given by position instead of `transition`. */
+    schema?: OrbitalSchema | string;
+    /** The transition's position among the trait's transitions, read from `schema`. */
+    transitionIndex?: number;
+    /** Played steps; the one at `cursor` that ran this transition lights the boards (with `schema`). */
+    scene?: readonly AvlPlayStep[];
+    /** The scene step shown. Default: the last. */
+    cursor?: number;
+    /** Author explanations shown in a popover on hover: the transition's event note and per-effect-type notes.
+     * @example {"transitions":{"PAY":{"title":"Paying","body":"The customer pays the order total."}},"effects":{"persist":{"body":"Saves the order."}}}
+     */
+    annotations?: AvlAnnotations;
+    /** The latest played run of this transition (see `transitionPlayback`). */
+    playback?: AvlTransitionPlayback;
+    /** Emits UI:{stepEvent} with an {@link AvlStepRequest} when Step is pressed. */
+    stepEvent?: EventEmit<AvlStepRequest>;
+    className?: string;
+}
+declare const AvlTransitionDetail: React__default.FC<AvlTransitionDetailProps>;
+
+/**
+ * AvlTransitionExplainer — the render-ui face of {@link AvlTransitionDetail}:
+ * one transition explained (from, event, to, the guard that must hold, each
+ * effect in order) with optional author notes. Playing a transition is a host
+ * capability and stays on AvlTransitionDetail.
+ */
+
+/** A transition as `.lolo` data hands it over: `guard` is omitted when there is none. */
+interface ExplainedTransition {
+    from: string;
+    to: string;
+    event: string;
+    guard?: SExpr;
+    effects: SerializedEffect[];
+    index: number;
+}
+/**
+ * One transition explained step by step: from-state, event and to-state, the
+ * guard that must hold, and each effect it runs in order.
+ *
+ * @capabilities transition explainer, event guard effects walkthrough, what happens when an event fires
+ */
+interface AvlTransitionExplainerProps extends A11yProps {
+    /** Orbital the transition belongs to. */
+    orbitalName: string;
+    /** Trait the transition belongs to. */
+    traitName: string;
+    /** The transition to explain.
+     * @example {"from":"pending","to":"paid","event":"PAY","effects":[{"type":"set","args":[]},{"type":"persist","args":[]}],"index":0}
+     */
+    transition: ExplainedTransition;
+    /** Author explanations shown in a popover on hover: the event's note and per-effect-type notes.
+     * @example {"transitions":{"PAY":{"title":"Paying","body":"The customer pays the order total."}},"effects":{"persist":{"body":"Saves the order."}}}
+     */
+    annotations?: AvlAnnotations;
+    className?: string;
+}
+declare const AvlTransitionExplainer: React__default.FC<AvlTransitionExplainerProps>;
+
+/**
+ * AvlEffectChip — one effect glyph that names itself: its operator, the
+ * plain-language category, and the std registry description, on hover/focus.
+ */
+
+interface AvlEffectChipProps {
+    effectType: string;
+    /** Glyph box in px. @default 16 */
+    size?: number;
+    note?: AvlNote;
+    /** The effect's code (`(set @entity.status "paid")`), shown under its explanation. */
+    code?: string;
+}
+declare const AvlEffectChip: React__default.FC<AvlEffectChipProps>;
+
+/**
+ * AVL layered graph: labelled columns of pills, left to right, with edges between pills.
+ * The one layout behind the app's dependencies, one orbital's trait flow and a deployment's
+ * infrastructure (clients, host, services, stores). Callers choose the columns, their widths
+ * and spacing, and whether edges attach on the side facing the other end.
+ */
+
+type LayeredColumnId = NonNullable<PreviewNodeData['dependencyColumn']>;
+interface LayeredColumn {
+    id: LayeredColumnId;
+    width: number;
+}
+interface LayeredUnit {
+    id: string;
+    column: LayeredColumnId;
+    label: string;
+    status?: PreviewNodeData['unitStatus'];
+    metric?: string;
+    /** Trait flow: a composed unit's traits and embedded render pieces. */
+    flowTraits?: number;
+    flowRenderPieces?: number;
+}
+interface LayeredEdge {
+    id: string;
+    source: string;
+    target: string;
+    /** Drawn on the wire, e.g. a deployment's call count, errors and p50. */
+    label?: string;
+    /** Health of the wire; a `down` or `degraded` one draws in the error / warning colour. */
+    status?: PreviewNodeData['unitStatus'];
+}
+interface LayeredRow {
+    height: number;
+    gap: number;
+    columnGap: number;
+    headerHeight: number;
+}
+interface LayeredGraphInput {
+    columns: readonly LayeredColumn[];
+    units: readonly LayeredUnit[];
+    edges: readonly LayeredEdge[];
+    row: LayeredRow;
+    /** `facing`: each wire leaves and arrives on the side facing the other end (looping out on
+     *  the right within one column); `default`: the renderer's default sides. */
+    handles: 'facing' | 'default';
+}
+declare function layeredGraph(input: LayeredGraphInput): {
+    nodes: Node<PreviewNodeData>[];
+    edges: Edge[];
+};
+
+/**
+ * The deployment lens: a published app's infrastructure as layered columns, visitors → host →
+ * services → stores → external services, each unit with its health and one metric, each wire
+ * with its call count and health.
+ */
+
+declare const DEPLOYMENT_ROW: {
+    height: number;
+    gap: number;
+    columnGap: number;
+    headerHeight: number;
+};
+declare function deploymentGraph(input: {
+    units: readonly LayeredUnit[];
+    edges: readonly LayeredEdge[];
+}): {
+    nodes: Node<PreviewNodeData>[];
+    edges: Edge[];
+};
+
+/**
+ * KnobField — the editor for one factory knob (`DomainQuestion`, derived by
+ * `@almadar/core` from the knob's declared type). One editor for every place a
+ * behavior's config is set: the build questionnaire and the inspector's
+ * Settings. Structured knobs (`listOfObjects`, `objectForm`, `tagList`,
+ * `fieldList`) emit native array/object values.
+ */
+
+interface KnobFieldProps {
+    question: DomainQuestion;
+    value: DomainQuestionAnswer | undefined;
+    onChange: (next: DomainQuestionAnswer) => void;
+}
+declare function KnobField({ question, value, onChange, }: KnobFieldProps): React__default.ReactElement;
+
+/**
+ * KnobSettingRow — one knob of a call site, edited with its questionnaire field and set on the
+ * call site through the knob's own question (core `answerToMutations` →
+ * `UI:TRAIT_CONFIG_CHANGE`). A click-to-choose knob commits at once; a typed one when its
+ * field loses focus. The inspector's Settings list and the studio's knob search share it.
+ */
+
+interface KnobSettingRowProps {
+    knob: ElementKnob;
+    editable: boolean;
+}
+declare function KnobSettingRow({ knob, editable }: KnobSettingRowProps): React__default.ReactElement;
+declare namespace KnobSettingRow {
+    var displayName: string;
+}
+
+/**
+ * Typed decoders for the AVL organisms' rich props (G-CROSS-131): a `.lolo` value arrives as an
+ * `EventPayloadValue` and is validated into the component's declared type field by field, so the
+ * compiled app needs no cast. Pattern configs go through core's `PatternObjectSchema`.
+ */
+
+/** Validates a node of the canvas preview (`OrbInspector node`). */
+declare function decodePreviewNodeData(value: EventPayloadValue): PreviewNodeData;
+/** Validates an in-node pattern selection (`OrbInspector selectedPattern`). */
+declare function decodeSelectedPattern(value: EventPayloadValue): SelectedPattern;
+/** Validates persisted canvas node positions (`FlowCanvas nodePositions`). */
+declare function decodeNodePlacements(value: EventPayloadValue): Record<string, CanvasNodePlacement>;
+
+export { AVL_GLYPH_KINDS, AVL_GRAPH_NODE_TYPES, AvlAnnotations, AvlApplication, AvlBackwardEdge, AvlBehaviorGlyph, AvlBinding, AvlBindingEdge, AvlBindingRef, AvlCircuit, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEffectChip, AvlEmitListen, AvlEntity, AvlEvent, AvlEventWireEdge, AvlExprTree, AvlField, AvlFieldType, AvlGlyph, AvlGraphCanvas, AvlGuard, AvlLiteral, AvlNodeData, AvlNote, AvlOperator, AvlOrbital, AvlOrbitalUnit, AvlOrbitalsCosmicZoom, AvlPage, AvlPageEdge, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlSwimLane, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionDetail, AvlTransitionEdge, AvlTransitionExplainer, AvlTransitionLane, AvlTransitionScene, CANVAS_TOOLS, CONNECTION_COLORS, CanvasDndProvider, CanvasVerifyContext, DEPLOYMENT_ROW, DOMAIN_COLORS, DependencyColumnNode, DependencyNode, DetailView, EDITABLE, EFFECT_CATEGORY_COLORS, ElementEditAccessContext, EventFlowEdge, FIELD_TYPE_SHAPES, FlowCanvas, KnobField, KnobSettingRow, LIVE_STATE, LayersPanel, MiniStateMachine, OPERATOR_CATEGORY_COLORS, OrbInspector, OrbPreviewNode, STATE_COLORS, SystemBandNode, SystemMapContext, SystemNode, TraitLevelData, TraitTransitionInfo, TransitionLevelData, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, ZoomLevel, arcPath, armPosition, armsOf, canvasViewGraph, computeTraitLayout, computeZoomBand, curveControlPoint, decodeNodePlacements, decodePreviewNodeData, decodeSelectedPattern, dependencyReach, deploymentGraph, deriveEditFocusFromElement, dropBusEvent, edgePath, effectCategoryOf, firedTransition, flowNeighbors, getStateRole, gridPositions, hasCanvasTool, initialStateOf, layeredGraph, optionForPlayedStep, parseLayerId, propAccessAt, radialPositions, ringPositions, schemaToDependencyGraph, schemaToLayerItems, schemaToOverviewGraph, stateMachinePlayback, stateOptionsOf, traitFlowGraph, transitionPlayback, useCanvasDraggable, useCanvasDroppable, useInlineTextEdit, useZoomBand, zoomProgress };
+export type { AvlApplicationProps, AvlBaseProps, AvlBehaviorGlyphProps, AvlBindingProps, AvlBindingRefProps, AvlCircuitProps, AvlClickTargetProps, AvlClosedCircuitProps, AvlClosedCircuitState, AvlClosedCircuitTransition, AvlCosmicZoomProps, AvlEffectChipProps, AvlEffectProps, AvlEmitListenProps, AvlEntityProps, AvlEventProps, AvlEventWireEdgeData, AvlExprTreeNode, AvlExprTreeProps, AvlFieldProps, AvlFieldTypeProps, AvlGlyphKind, AvlGlyphProps, AvlGraphCanvasProps, AvlGuardProps, AvlLiteralProps, AvlOperatorProps, AvlOrbitalProps, AvlOrbitalUnitPage, AvlOrbitalUnitProps, AvlOrbitalUnitTrait, AvlOrbitalsCosmicZoomProps, AvlPageProps, AvlPersistenceProps, AvlPlayStep, AvlSExprProps, AvlSlotMapProps, AvlSlotMapSlot, AvlStateMachinePlayback, AvlStateProps, AvlStepRequest, AvlSwimLaneProps, AvlTraitProps, AvlTraitSceneProps, AvlTransitionDetailProps, AvlTransitionEdgeData, AvlTransitionExplainerProps, AvlTransitionLaneProps, AvlTransitionPlayback, AvlTransitionProps, AvlTransitionSceneProps, BehaviorGlyphChild, BehaviorGlyphConnection, BehaviorLevel, CanvasContainerNode, CanvasDndProviderProps, CanvasDragKind, CanvasDragPayload, CanvasDropEvent, CanvasDropTarget, CanvasFocusChange, CanvasResolvedDrop, CanvasScope, CanvasStateGroup, CanvasStateOption, CanvasStateOptions, CanvasStateView, CanvasStepReached, CanvasTool, CanvasVerify, CanvasViewOptions, CardVerdict, EffectCategory, ElementEditAccess, ElementEditAccessResolver, ElementKnob, ElementPropAccess, ElementSettings, ElkLayout, EventEdgeData, FieldTypeShape, FlowCanvasProps, GlyphSize, InlineTextEditOptions, KnobFieldProps, KnobSettingRowProps, LayerIdParts, LayeredColumn, LayeredColumnId, LayeredEdge, LayeredGraphInput, LayeredRow, LayeredUnit, LayersPanelProps, LayoutEdge, LayoutNode, OrbInspectorProps, PatternEventSource, PlayedStep, PreviewNodeData, RenderUIEntry, SelectedPattern, StateRole, SystemDependencies, SystemMapContextValue, TraitFlowEdge, TraitFlowUnit, TraitView, UseCanvasDraggableArgs, UseCanvasDraggableResult, UseCanvasDroppableArgs, UseCanvasDroppableResult, ViewLevel, ZoomBand, ZoomBreadcrumbProps, ZoomLegendProps };