machinalayout 0.3.0 → 0.3.1

package/README.md

@@ -397,5 +397,5 @@ This repo uses Biome.
 - [Z-order and containment](docs/z-order-and-containment.md)
 - [Error code reference](docs/error-codes.md)
 - [MachinaDispatch runtime guide](docs/machina-dispatch.md)
-- [DeusMachina behavioral kernel](docs/deusmachina.md)
+- [DeusMachina behavioral kernel and framework bindings](docs/deusmachina.md)
 - Dispatch sample: [`samples/dispatch-counter`](samples/dispatch-counter/README.md) (uses `machinalayout/dispatch`)

package/dist/MachinaReactView-Bau5bErA.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { M as MachinaDebugOverlayMode } from './debugOverlay-fWLv1cS7.js';
+import { R as ResolvedLayoutDocument, N as NodeId, a as Rect, b as ResolvedLayoutNode } from './types-CYgsjDai.js';
+
+type MachinaSlotProps<TViewData = unknown, TNodeData = unknown> = {
+    id: NodeId;
+    rect: Rect;
+    debugLabel?: string;
+    node: ResolvedLayoutNode;
+    viewKey?: string;
+    viewData?: TViewData;
+    nodeData?: TNodeData;
+};
+type MachinaRenderLayer = {
+    z: number;
+};
+type MachinaReactDebugOverlayOptions = {
+    mode?: MachinaDebugOverlayMode;
+    labels?: boolean;
+    borders?: boolean;
+    selectedNodeId?: string;
+};
+type MachinaReactViewProps = {
+    layout: ResolvedLayoutDocument;
+    views?: Record<string, React.ComponentType<MachinaSlotProps>>;
+    viewData?: Record<string, unknown>;
+    nodeData?: Record<NodeId, unknown>;
+    className?: string;
+    style?: React.CSSProperties;
+    nodeClassName?: string;
+    debug?: boolean;
+    nodeContainment?: "none" | "layout-paint" | "strict";
+    nodeContentVisibility?: "none" | "auto";
+    nodeContainIntrinsicSize?: string;
+    layers?: Record<string, MachinaRenderLayer>;
+    defaultLayer?: string;
+    debugOverlay?: MachinaReactDebugOverlayOptions;
+};
+declare function MachinaReactView(props: MachinaReactViewProps): React.JSX.Element;
+
+export { type MachinaReactDebugOverlayOptions as M, MachinaReactView as a, type MachinaReactViewProps as b, type MachinaSlotProps as c };

package/dist/chunk-ZIGW44D5.js

@@ -0,0 +1,63 @@
+import {
+  createDeusSnapshot,
+  stepDeusMachine
+} from "./chunk-2ZQ2RFFI.js";
+
+// src/react-common/useDeusMachine.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function resolveInitialBoard(initialBoard) {
+  return typeof initialBoard === "function" ? initialBoard() : initialBoard;
+}
+function useDeusMachine(machine, initialBoard) {
+  const initialBoardRef = useRef(initialBoard);
+  initialBoardRef.current = initialBoard;
+  const createSnapshot = useCallback(
+    (board) => createDeusSnapshot(machine, resolveInitialBoard(board ?? initialBoardRef.current)),
+    [machine]
+  );
+  const [snapshot, setSnapshot] = useState(() => createSnapshot());
+  const snapshotRef = useRef(snapshot);
+  const [lastTrace, setLastTrace] = useState(null);
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return;
+    }
+    const nextSnapshot = createSnapshot();
+    snapshotRef.current = nextSnapshot;
+    setSnapshot(nextSnapshot);
+    setLastTrace(null);
+  }, [createSnapshot]);
+  const dispatch = useCallback(
+    (event) => {
+      const result = stepDeusMachine(machine, snapshotRef.current, event);
+      snapshotRef.current = result.snapshot;
+      setSnapshot(result.snapshot);
+      setLastTrace(result.trace);
+      return result;
+    },
+    [machine]
+  );
+  const reset = useCallback(
+    (board) => {
+      const nextSnapshot = createSnapshot(board);
+      snapshotRef.current = nextSnapshot;
+      setSnapshot(nextSnapshot);
+      setLastTrace(null);
+    },
+    [createSnapshot]
+  );
+  return {
+    snapshot,
+    board: snapshot.board,
+    state: snapshot.state,
+    dispatch,
+    lastTrace,
+    reset
+  };
+}
+
+export {
+  useDeusMachine
+};

package/dist/debugOverlay-fWLv1cS7.d.ts

@@ -0,0 +1,36 @@
+import { e as DeusMachine } from './types-CWaup8Z6.js';
+
+type MachinaDebugOverlayMode = "collapsed" | "nonInteractiveOverlay" | "interactivePanel";
+type MachinaDebugOverlayBoard = {
+    mode: MachinaDebugOverlayMode;
+    labels: boolean;
+    borders: boolean;
+    selectedNodeId?: string;
+};
+type MachinaDebugOverlayEvent = {
+    type: "showOverlay";
+} | {
+    type: "openPanel";
+    nodeId?: string;
+} | {
+    type: "collapse";
+} | {
+    type: "toggleLabels";
+} | {
+    type: "toggleBorders";
+} | {
+    type: "selectNode";
+    nodeId: string;
+};
+type MachinaDebugOverlayBehavior = {
+    visible: boolean;
+    pointerEvents: "none" | "auto";
+    consumesLayoutSpace: boolean;
+    showPanel: boolean;
+    showLabels: boolean;
+    showBorders: boolean;
+};
+declare function createMachinaDebugOverlayMachine(): DeusMachine<MachinaDebugOverlayBoard, MachinaDebugOverlayEvent>;
+declare function getMachinaDebugOverlayBehavior(board: MachinaDebugOverlayBoard): MachinaDebugOverlayBehavior;
+
+export { type MachinaDebugOverlayMode as M, type MachinaDebugOverlayBehavior as a, type MachinaDebugOverlayBoard as b, type MachinaDebugOverlayEvent as c, createMachinaDebugOverlayMachine as d, getMachinaDebugOverlayBehavior as g };

package/dist/deus/index.d.ts

@@ -1,5 +1,6 @@
-import { U as UtilityCandidate, J as JudgeUtilityOptions, a as UtilityJudgment, D as DeusEvent, b as DeusMachine, c as DeusSnapshot, d as DeusStatePath, e as DeusStepTrace, f as DeusStepResult } from '../debugOverlay-pJpj0n5H.js';
-export { g as DeusAction, h as DeusMachinaError, i as DeusStateRow, j as DeusTransitionRow, k as DeusTransitionTrace, l as DeusUtilityTransitionCandidate, M as MachinaDebugOverlayBehavior, m as MachinaDebugOverlayBoard, n as MachinaDebugOverlayEvent, o as MachinaDebugOverlayMode, p as UtilityCandidateResult, q as UtilityScore, r as createMachinaDebugOverlayMachine, s as getMachinaDebugOverlayBehavior } from '../debugOverlay-pJpj0n5H.js';
+import { U as UtilityCandidate, J as JudgeUtilityOptions, f as UtilityJudgment, D as DeusEvent, e as DeusMachine, a as DeusSnapshot, b as DeusStatePath, d as DeusStepTrace, c as DeusStepResult } from '../types-CWaup8Z6.js';
+export { g as DeusAction, h as DeusMachinaError, i as DeusStateRow, j as DeusTransitionRow, k as DeusTransitionTrace, l as DeusUtilityTransitionCandidate, m as UtilityCandidateResult, n as UtilityScore } from '../types-CWaup8Z6.js';
+export { a as MachinaDebugOverlayBehavior, b as MachinaDebugOverlayBoard, c as MachinaDebugOverlayEvent, M as MachinaDebugOverlayMode, d as createMachinaDebugOverlayMachine, g as getMachinaDebugOverlayBehavior } from '../debugOverlay-fWLv1cS7.js';
 
 declare function judgeUtility<TContext, TKey extends string = string>(context: TContext, candidates: readonly UtilityCandidate<TContext, TKey>[], options?: JudgeUtilityOptions<TKey>): UtilityJudgment<TKey>;
 

package/dist/handoff/index.d.ts

@@ -1,6 +1,6 @@
-import { M as MachinaDomSummary } from '../types-DLYAhNXw.js';
+import { M as MachinaDomSummary } from '../types-bJlg6wno.js';
 import { M as MachinaViewport, a as MachinaScreenViewportTask } from '../screenCatalog-ZjonGiOi.js';
-import '../types-B90jb3RW.js';
+import '../types-CYgsjDai.js';
 
 type MachinaHandoffArtifactPaths = {
     screenshot?: string;

package/dist/index.d.ts

@@ -1,12 +1,13 @@
-import { E as EdgeInsets, U as UiLength, R as Rect, O as OffsetSpec, L as LayoutRow, c as LayoutDocument, F as FrameSpec, b as ResolvedLayoutDocument, d as ResolvedLayoutTree, a as ResolvedLayoutNode, N as NodeId, e as LayerName, S as StackAxis, A as ArrangeSpec } from './types-B90jb3RW.js';
-export { f as AbsoluteFrame, g as AnchorFrame, C as CellFrame, h as EdgeRef, i as FillFrame, j as FixedFrame, G as GridArrange, k as GridTrack, l as GuideFrame, m as GuideLength, n as LayoutNode, o as LayoutRowVariant, p as LayoutVariantCondition, q as RectEdge, r as RootFrame, s as StackAlign, t as StackArrange, u as StackJustify } from './types-B90jb3RW.js';
-export { MachinaReactDebugOverlayOptions, MachinaReactView, MachinaReactViewProps, MachinaSlotProps } from './react/index.js';
+import { E as EdgeInsets, U as UiLength, a as Rect, O as OffsetSpec, L as LayoutRow, c as LayoutDocument, F as FrameSpec, R as ResolvedLayoutDocument, d as ResolvedLayoutTree, b as ResolvedLayoutNode, N as NodeId, e as LayerName, S as StackAxis, A as ArrangeSpec } from './types-CYgsjDai.js';
+export { f as AbsoluteFrame, g as AnchorFrame, C as CellFrame, h as EdgeRef, i as FillFrame, j as FixedFrame, G as GridArrange, k as GridTrack, l as GuideFrame, m as GuideLength, n as LayoutNode, o as LayoutRowVariant, p as LayoutVariantCondition, q as RectEdge, r as RootFrame, s as StackAlign, t as StackArrange, u as StackJustify } from './types-CYgsjDai.js';
+export { M as MachinaReactDebugOverlayOptions, a as MachinaReactView, b as MachinaReactViewProps, c as MachinaSlotProps } from './MachinaReactView-Bau5bErA.js';
 export { c as MachinaBulletItem, d as MachinaInline, e as MachinaTextAlign, f as MachinaTextBlock, g as MachinaTextDiagnostic, h as MachinaTextDiagnosticCode, i as MachinaTextDiagnosticLevel, b as MachinaTextDocument, j as MachinaTextLeading, k as MachinaTextOverflow, a as MachinaTextSource, M as MachinaTextSpec, l as MachinaTextVariant, m as MachinaTextVerticalAlign, n as MachinaTextWrap, P as ParseMachinaTextResult } from './types-C4poVJpR.js';
 export { parseMachinaText, parseMachinaTextInline } from './text/index.js';
 export { MachinaTextView, MachinaTextViewProps } from './text/react/index.js';
 export { b as MachinaScreen, c as MachinaScreenCatalog, a as MachinaScreenViewportTask, M as MachinaViewport, d as MachinaViewportMatrix, e as createViewportMatrix, f as defineMachinaScreens, g as defineMachinaViewports, h as expandScreenViewportTasks, i as getMachinaViewport, s as slugMachinaArtifactName } from './screenCatalog-ZjonGiOi.js';
 import 'react';
-import './debugOverlay-pJpj0n5H.js';
+import './debugOverlay-fWLv1cS7.js';
+import './types-CWaup8Z6.js';
 
 type MachinaLayoutErrorCode = "EmptyRows" | "MissingRoot" | "MultipleRoots" | "DuplicateId" | "InvalidId" | "MissingParent" | "UnknownParent" | "SelfParent" | "Cycle" | "UnreachableNode" | "NonFiniteNumber" | "InvalidLengthUnit" | "InvalidZ" | "InvalidVariantCondition" | "NegativeSize" | "NegativeGap" | "NegativePadding" | "InvalidAnchorHorizontal" | "InvalidAnchorVertical" | "NegativeResolvedSize" | "FixedFrameWithoutArranger" | "FillFrameWithoutArranger" | "InvalidFillWeight" | "StackChildMustBeFixed" | "StackContentNegative" | "StackOverflow" | "ExpectedStackArrange" | "StackQueryInvalidRange" | "CellFrameWithoutGrid" | "GridChildMustBeCell" | "InvalidGridTrack" | "InvalidGridCell" | "GridContentNegative" | "GridOverflow" | "RootFrameNotRoot" | "RootFrameWithoutRoot" | "IncompatibleLayouts" | "GuideTargetNotFound" | "GuideSelfReference" | "GuideReferenceCycle" | "GuideInvalidEdgeForAxis" | "GuideTooManyReferencesPerAxis" | "InvalidGuideFrame" | "GuideTargetUnresolved" | "InvalidViewport" | "DuplicateViewportKey" | "UnknownViewportKey" | "InvalidScreen" | "DuplicateScreenKey" | "UnknownScreenKey";
 declare class MachinaLayoutError extends Error {

package/dist/index.js

@@ -8,8 +8,7 @@ import {
 } from "./chunk-33CKBEJH.js";
 import {
   MachinaReactView
-} from "./chunk-ZVDE7PX4.js";
-import "./chunk-2ZQ2RFFI.js";
+} from "./chunk-MSTBFD7H.js";
 import "./chunk-RJYRJ3LD.js";
 import {
   MachinaTextView
@@ -18,12 +17,14 @@ import {
   parseMachinaText,
   parseMachinaTextInline
 } from "./chunk-BJOQRPPX.js";
+import "./chunk-ZIGW44D5.js";
 import {
   toResolvedTree
 } from "./chunk-SVWYWI7I.js";
 import {
   MachinaLayoutError
 } from "./chunk-VREK57S3.js";
+import "./chunk-2ZQ2RFFI.js";
 
 // src/validation.ts
 function assertFiniteNumber(value, fieldName) {

package/dist/inspect/index.d.ts

@@ -1,6 +1,6 @@
-import { S as SummarizeMachinaDomOptions, M as MachinaDomSummary } from '../types-DLYAhNXw.js';
-export { a as MachinaDomSummaryNode } from '../types-DLYAhNXw.js';
-import '../types-B90jb3RW.js';
+import { S as SummarizeMachinaDomOptions, M as MachinaDomSummary } from '../types-bJlg6wno.js';
+export { a as MachinaDomSummaryNode } from '../types-bJlg6wno.js';
+import '../types-CYgsjDai.js';
 
 type DomRoot = ParentNode | Element | Document;
 declare function summarizeMachinaDom(rootOrOptions?: DomRoot | SummarizeMachinaDomOptions): MachinaDomSummary;

package/dist/react/index.d.ts

@@ -1,41 +1,6 @@
-import React from 'react';
-import { o as MachinaDebugOverlayMode } from '../debugOverlay-pJpj0n5H.js';
-import { b as ResolvedLayoutDocument, N as NodeId, R as Rect, a as ResolvedLayoutNode } from '../types-B90jb3RW.js';
-
-type MachinaSlotProps<TViewData = unknown, TNodeData = unknown> = {
-    id: NodeId;
-    rect: Rect;
-    debugLabel?: string;
-    node: ResolvedLayoutNode;
-    viewKey?: string;
-    viewData?: TViewData;
-    nodeData?: TNodeData;
-};
-type MachinaRenderLayer = {
-    z: number;
-};
-type MachinaReactDebugOverlayOptions = {
-    mode?: MachinaDebugOverlayMode;
-    labels?: boolean;
-    borders?: boolean;
-    selectedNodeId?: string;
-};
-type MachinaReactViewProps = {
-    layout: ResolvedLayoutDocument;
-    views?: Record<string, React.ComponentType<MachinaSlotProps>>;
-    viewData?: Record<string, unknown>;
-    nodeData?: Record<NodeId, unknown>;
-    className?: string;
-    style?: React.CSSProperties;
-    nodeClassName?: string;
-    debug?: boolean;
-    nodeContainment?: "none" | "layout-paint" | "strict";
-    nodeContentVisibility?: "none" | "auto";
-    nodeContainIntrinsicSize?: string;
-    layers?: Record<string, MachinaRenderLayer>;
-    defaultLayer?: string;
-    debugOverlay?: MachinaReactDebugOverlayOptions;
-};
-declare function MachinaReactView(props: MachinaReactViewProps): React.JSX.Element;
-
-export { type MachinaReactDebugOverlayOptions, MachinaReactView, type MachinaReactViewProps, type MachinaSlotProps };
+export { U as UseDeusMachineResult, u as useDeusMachine } from '../useDeusMachine-2w2u_dki.js';
+export { M as MachinaReactDebugOverlayOptions, a as MachinaReactView, b as MachinaReactViewProps, c as MachinaSlotProps } from '../MachinaReactView-Bau5bErA.js';
+import '../types-CWaup8Z6.js';
+import 'react';
+import '../debugOverlay-fWLv1cS7.js';
+import '../types-CYgsjDai.js';

package/dist/react/index.js

@@ -1,9 +1,13 @@
 import {
   MachinaReactView
-} from "../chunk-ZVDE7PX4.js";
-import "../chunk-2ZQ2RFFI.js";
+} from "../chunk-MSTBFD7H.js";
+import {
+  useDeusMachine
+} from "../chunk-ZIGW44D5.js";
 import "../chunk-SVWYWI7I.js";
 import "../chunk-VREK57S3.js";
+import "../chunk-2ZQ2RFFI.js";
 export {
-  MachinaReactView
+  MachinaReactView,
+  useDeusMachine
 };

package/dist/react-native/index.d.ts

@@ -1,6 +1,8 @@
+export { U as UseDeusMachineResult, u as useDeusMachine } from '../useDeusMachine-2w2u_dki.js';
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { N as NodeId, R as Rect, a as ResolvedLayoutNode, b as ResolvedLayoutDocument } from '../types-B90jb3RW.js';
+import { N as NodeId, a as Rect, b as ResolvedLayoutNode, R as ResolvedLayoutDocument } from '../types-CYgsjDai.js';
+import '../types-CWaup8Z6.js';
 
 type MachinaNativeSlotProps<TViewData = unknown, TNodeData = unknown> = {
     id: NodeId;

package/dist/react-native/index.js

@@ -1,7 +1,11 @@
+import {
+  useDeusMachine
+} from "../chunk-ZIGW44D5.js";
 import {
   toResolvedTree
 } from "../chunk-SVWYWI7I.js";
 import "../chunk-VREK57S3.js";
+import "../chunk-2ZQ2RFFI.js";
 
 // src/react-native/MachinaReactNativeView.tsx
 import React from "react";
@@ -80,5 +84,6 @@ function MachinaReactNativeView(props) {
   );
 }
 export {
-  MachinaReactNativeView
+  MachinaReactNativeView,
+  useDeusMachine
 };

package/dist/{debugOverlay-pJpj0n5H.d.ts → types-CWaup8Z6.d.ts}

@@ -89,37 +89,4 @@ type DeusStepResult<TBoard> = {
     trace: DeusStepTrace;
 };
 
-type MachinaDebugOverlayMode = "collapsed" | "nonInteractiveOverlay" | "interactivePanel";
-type MachinaDebugOverlayBoard = {
-    mode: MachinaDebugOverlayMode;
-    labels: boolean;
-    borders: boolean;
-    selectedNodeId?: string;
-};
-type MachinaDebugOverlayEvent = {
-    type: "showOverlay";
-} | {
-    type: "openPanel";
-    nodeId?: string;
-} | {
-    type: "collapse";
-} | {
-    type: "toggleLabels";
-} | {
-    type: "toggleBorders";
-} | {
-    type: "selectNode";
-    nodeId: string;
-};
-type MachinaDebugOverlayBehavior = {
-    visible: boolean;
-    pointerEvents: "none" | "auto";
-    consumesLayoutSpace: boolean;
-    showPanel: boolean;
-    showLabels: boolean;
-    showBorders: boolean;
-};
-declare function createMachinaDebugOverlayMachine(): DeusMachine<MachinaDebugOverlayBoard, MachinaDebugOverlayEvent>;
-declare function getMachinaDebugOverlayBehavior(board: MachinaDebugOverlayBoard): MachinaDebugOverlayBehavior;
-
-export { type DeusEvent as D, type JudgeUtilityOptions as J, type MachinaDebugOverlayBehavior as M, type UtilityCandidate as U, type UtilityJudgment as a, type DeusMachine as b, type DeusSnapshot as c, type DeusStatePath as d, type DeusStepTrace as e, type DeusStepResult as f, type DeusAction as g, DeusMachinaError as h, type DeusStateRow as i, type DeusTransitionRow as j, type DeusTransitionTrace as k, type DeusUtilityTransitionCandidate as l, type MachinaDebugOverlayBoard as m, type MachinaDebugOverlayEvent as n, type MachinaDebugOverlayMode as o, type UtilityCandidateResult as p, type UtilityScore as q, createMachinaDebugOverlayMachine as r, getMachinaDebugOverlayBehavior as s };
+export { type DeusEvent as D, type JudgeUtilityOptions as J, type UtilityCandidate as U, type DeusSnapshot as a, type DeusStatePath as b, type DeusStepResult as c, type DeusStepTrace as d, type DeusMachine as e, type UtilityJudgment as f, type DeusAction as g, DeusMachinaError as h, type DeusStateRow as i, type DeusTransitionRow as j, type DeusTransitionTrace as k, type DeusUtilityTransitionCandidate as l, type UtilityCandidateResult as m, type UtilityScore as n };

package/dist/{types-B90jb3RW.d.ts → types-CYgsjDai.d.ts}

@@ -181,4 +181,4 @@ type ResolvedLayoutTree = {
     children: ResolvedLayoutTree[];
 };
 
-export type { ArrangeSpec as A, CellFrame as C, EdgeInsets as E, FrameSpec as F, GridArrange as G, LayoutRow as L, NodeId as N, OffsetSpec as O, Rect as R, StackAxis as S, UiLength as U, ResolvedLayoutNode as a, ResolvedLayoutDocument as b, LayoutDocument as c, ResolvedLayoutTree as d, LayerName as e, AbsoluteFrame as f, AnchorFrame as g, EdgeRef as h, FillFrame as i, FixedFrame as j, GridTrack as k, GuideFrame as l, GuideLength as m, LayoutNode as n, LayoutRowVariant as o, LayoutVariantCondition as p, RectEdge as q, RootFrame as r, StackAlign as s, StackArrange as t, StackJustify as u };
+export type { ArrangeSpec as A, CellFrame as C, EdgeInsets as E, FrameSpec as F, GridArrange as G, LayoutRow as L, NodeId as N, OffsetSpec as O, ResolvedLayoutDocument as R, StackAxis as S, UiLength as U, Rect as a, ResolvedLayoutNode as b, LayoutDocument as c, ResolvedLayoutTree as d, LayerName as e, AbsoluteFrame as f, AnchorFrame as g, EdgeRef as h, FillFrame as i, FixedFrame as j, GridTrack as k, GuideFrame as l, GuideLength as m, LayoutNode as n, LayoutRowVariant as o, LayoutVariantCondition as p, RectEdge as q, RootFrame as r, StackAlign as s, StackArrange as t, StackJustify as u };

package/dist/{types-DLYAhNXw.d.ts → types-bJlg6wno.d.ts}

@@ -1,4 +1,4 @@
-import { R as Rect } from './types-B90jb3RW.js';
+import { a as Rect } from './types-CYgsjDai.js';
 
 type MachinaDomSummaryNode = {
     nodeId?: string;

package/dist/useDeusMachine-2w2u_dki.d.ts

@@ -0,0 +1,14 @@
+import { D as DeusEvent, a as DeusSnapshot, b as DeusStatePath, c as DeusStepResult, d as DeusStepTrace, e as DeusMachine } from './types-CWaup8Z6.js';
+
+type UseDeusMachineResult<TBoard, TEvent extends DeusEvent> = {
+    snapshot: DeusSnapshot<TBoard>;
+    board: TBoard;
+    state: DeusStatePath;
+    dispatch: (event: TEvent) => DeusStepResult<TBoard>;
+    lastTrace: DeusStepTrace | null;
+    reset: (board?: TBoard | (() => TBoard)) => void;
+};
+type InitialBoard<TBoard> = TBoard | (() => TBoard);
+declare function useDeusMachine<TBoard, TEvent extends DeusEvent>(machine: DeusMachine<TBoard, TEvent>, initialBoard: InitialBoard<TBoard>): UseDeusMachineResult<TBoard, TEvent>;
+
+export { type UseDeusMachineResult as U, useDeusMachine as u };

package/dist/vue/index.d.ts

@@ -1,6 +1,18 @@
 import * as vue from 'vue';
-import { PropType, Component, StyleValue } from 'vue';
-import { N as NodeId, R as Rect, a as ResolvedLayoutNode, b as ResolvedLayoutDocument } from '../types-B90jb3RW.js';
+import { Ref, ComputedRef, PropType, Component, StyleValue } from 'vue';
+import { D as DeusEvent, a as DeusSnapshot, b as DeusStatePath, c as DeusStepResult, d as DeusStepTrace, e as DeusMachine } from '../types-CWaup8Z6.js';
+import { N as NodeId, a as Rect, b as ResolvedLayoutNode, R as ResolvedLayoutDocument } from '../types-CYgsjDai.js';
+
+type UseVueDeusMachineResult<TBoard, TEvent extends DeusEvent> = {
+    snapshot: Ref<DeusSnapshot<TBoard>>;
+    board: ComputedRef<TBoard>;
+    state: ComputedRef<DeusStatePath>;
+    dispatch: (event: TEvent) => DeusStepResult<TBoard>;
+    lastTrace: Ref<DeusStepTrace | null>;
+    reset: (board?: TBoard | (() => TBoard)) => void;
+};
+type InitialBoard<TBoard> = TBoard | (() => TBoard);
+declare function useDeusMachine<TBoard, TEvent extends DeusEvent>(machine: DeusMachine<TBoard, TEvent>, initialBoard: InitialBoard<TBoard>): UseVueDeusMachineResult<TBoard, TEvent>;
 
 type MachinaVueSlotProps<TViewData = unknown, TNodeData = unknown> = {
     id: NodeId;
@@ -170,4 +182,4 @@ declare const MachinaVueView: vue.DefineComponent<vue.ExtractPropTypes<{
     nodeContainIntrinsicSize: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { type MachinaVueLayer, type MachinaVueSlotProps, MachinaVueView, type MachinaVueViewProps };
+export { type MachinaVueLayer, type MachinaVueSlotProps, MachinaVueView, type MachinaVueViewProps, type UseVueDeusMachineResult, useDeusMachine };

package/dist/vue/index.js

@@ -2,9 +2,42 @@ import {
   toResolvedTree
 } from "../chunk-SVWYWI7I.js";
 import "../chunk-VREK57S3.js";
+import {
+  createDeusSnapshot,
+  stepDeusMachine
+} from "../chunk-2ZQ2RFFI.js";
+
+// src/vue/useDeusMachine.ts
+import { computed, ref } from "vue";
+function resolveInitialBoard(initialBoard) {
+  return typeof initialBoard === "function" ? initialBoard() : initialBoard;
+}
+function useDeusMachine(machine, initialBoard) {
+  const createSnapshot = (board) => createDeusSnapshot(machine, resolveInitialBoard(board ?? initialBoard));
+  const snapshot = ref(createSnapshot());
+  const lastTrace = ref(null);
+  const dispatch = (event) => {
+    const result = stepDeusMachine(machine, snapshot.value, event);
+    snapshot.value = result.snapshot;
+    lastTrace.value = result.trace;
+    return result;
+  };
+  const reset = (board) => {
+    snapshot.value = createSnapshot(board);
+    lastTrace.value = null;
+  };
+  return {
+    snapshot,
+    board: computed(() => snapshot.value.board),
+    state: computed(() => snapshot.value.state),
+    dispatch,
+    lastTrace,
+    reset
+  };
+}
 
 // src/vue/MachinaVueView.ts
-import { computed, defineComponent, h } from "vue";
+import { computed as computed2, defineComponent, h } from "vue";
 var normalizeLayerZ = (v) => v === void 0 || !Number.isFinite(v) || !Number.isInteger(v) || v < -5 || v > 5 ? 0 : v;
 var getEffectiveLayer = (n, d) => n.layer ?? d;
 var getEffectiveLayerZ = (n, l, d) => normalizeLayerZ(l[getEffectiveLayer(n, d)]?.z);
@@ -33,7 +66,7 @@ var MachinaVueView = defineComponent({
     nodeContainIntrinsicSize: { type: String, default: void 0 }
   },
   setup(props) {
-    const tree = computed(() => toResolvedTree(props.layout));
+    const tree = computed2(() => toResolvedTree(props.layout));
     const renderNode = (node, parentRect) => {
       const viewKey = node.view ?? node.slot;
       const View = viewKey ? props.views[viewKey] : void 0;
@@ -108,5 +141,6 @@ var MachinaVueView = defineComponent({
   }
 });
 export {
-  MachinaVueView
+  MachinaVueView,
+  useDeusMachine
 };

package/docs/deusmachina.md

@@ -106,3 +106,86 @@ Labels and borders remain controlled by the board booleans; `false` stays false
 ## Non-goals
 
 DeusMachina intentionally does not include async workflows, tools, actors, persistence, LLM calls, schedulers, nested authoring syntax, uncontrolled React state, or a visual editor.
+
+## Framework bindings
+
+M26b adds thin framework bindings for the DeusMachina kernel from the existing adapter subpaths:
+
+```ts
+import { useDeusMachine } from "machinalayout/react";
+import { useDeusMachine as useNativeDeusMachine } from "machinalayout/react-native";
+import { useDeusMachine as useVueDeusMachine } from "machinalayout/vue";
+```
+
+The bindings wrap `createDeusSnapshot` and `stepDeusMachine`; `machinalayout/deus` remains framework-free and does not import React, React Native, or Vue. They do not add stores, context providers, async workflows, persistence, actors, or router integration.
+
+All bindings return the current `snapshot`, `board`, `state`, `dispatch`, `lastTrace`, and `reset`. Deus actions keep the kernel's mutable board convention: user actions may mutate the board in place, and the bindings trigger framework updates by replacing the snapshot wrapper after every dispatch. They do not deep-clone, freeze, proxy, or sandbox the board.
+
+Define machines outside render/setup when possible. The React and React Native hooks reset the snapshot when the `machine` reference changes; the Vue composable expects a stable machine input.
+
+`reset()` recreates the snapshot with `stepIndex: 0` and clears `lastTrace`. Pass a board value or factory to reset to that board; omit the argument to reuse the original initial board/factory.
+
+### React debug overlay example
+
+```tsx
+import {
+  createMachinaDebugOverlayMachine,
+  getMachinaDebugOverlayBehavior,
+  type MachinaDebugOverlayBoard,
+  type MachinaDebugOverlayEvent,
+} from "machinalayout/deus";
+import { useDeusMachine } from "machinalayout/react";
+
+const debugMachine = createMachinaDebugOverlayMachine();
+
+function DebugControls() {
+  const debug = useDeusMachine<MachinaDebugOverlayBoard, MachinaDebugOverlayEvent>(debugMachine, {
+    mode: "collapsed",
+    labels: true,
+    borders: true,
+  });
+  const behavior = getMachinaDebugOverlayBehavior(debug.board);
+
+  return (
+    <>
+      <button onClick={() => debug.dispatch({ type: "showOverlay" })}>Overlay</button>
+      <button onClick={() => debug.dispatch({ type: "openPanel" })}>Panel</button>
+      <button onClick={() => debug.dispatch({ type: "collapse" })}>Collapse</button>
+      <pre>{JSON.stringify(behavior, null, 2)}</pre>
+    </>
+  );
+}
+```
+
+### React Native debug overlay example
+
+```tsx
+import { Button, Text, View } from "react-native";
+import { createMachinaDebugOverlayMachine, getMachinaDebugOverlayBehavior } from "machinalayout/deus";
+import { useDeusMachine } from "machinalayout/react-native";
+
+const debugMachine = createMachinaDebugOverlayMachine();
+
+function NativeDebugControls() {
+  const debug = useDeusMachine(debugMachine, { mode: "collapsed", labels: true, borders: true });
+  const behavior = getMachinaDebugOverlayBehavior(debug.board);
+  return (
+    <View>
+      <Button title="Overlay" onPress={() => debug.dispatch({ type: "showOverlay" })} />
+      <Text>{behavior.visible ? "visible" : "hidden"}</Text>
+    </View>
+  );
+}
+```
+
+### Vue debug overlay example
+
+```ts
+import { computed } from "vue";
+import { createMachinaDebugOverlayMachine, getMachinaDebugOverlayBehavior } from "machinalayout/deus";
+import { useDeusMachine } from "machinalayout/vue";
+
+const debugMachine = createMachinaDebugOverlayMachine();
+const debug = useDeusMachine(debugMachine, { mode: "collapsed", labels: true, borders: true });
+const behavior = computed(() => getMachinaDebugOverlayBehavior(debug.board.value));
+```

package/docs/react-adapter.md

@@ -113,3 +113,7 @@ Modes:
 - `interactivePanel`: overlay labels/borders can render with a small panel and `pointer-events: auto` for human inspection.
 
 The prop is controlled. M26 does not add React state management or hooks; DeusMachina provides the standalone behavior helpers used to derive the rendering semantics. In `nonInteractiveOverlay`, overlay artifacts use `pointer-events: none` and do not consume layout space; in `collapsed`, overlay artifacts are not rendered. Labels and borders remain controlled booleans and do not change existing `data-machina-*` attributes on node wrappers.
+
+## DeusMachina hook
+
+`machinalayout/react` exports `useDeusMachine(machine, initialBoard)`. The hook is a thin wrapper around the DeusMachina kernel and returns `snapshot`, `board`, `state`, `dispatch`, `lastTrace`, and `reset`. It follows the mutable board contract: actions may mutate the board, while the hook replaces the snapshot object after dispatch so React re-renders. Keep machine definitions stable; changing the machine reference resets the hook snapshot.

package/docs/react-native-adapter.md

@@ -54,3 +54,7 @@ Keep `views` stable (component references). Send changing values through `viewDa
 - this package only renders layout boxes; text rendering is provided separately by `machinalayout/text/react-native`
 - portals/reparenting
 - DOM-only features
+
+## DeusMachina hook
+
+`machinalayout/react-native` exports the same `useDeusMachine(machine, initialBoard)` contract as the React adapter without importing the DOM adapter. It returns `snapshot`, `board`, `state`, `dispatch`, `lastTrace`, and `reset`, and re-renders by replacing the snapshot wrapper while preserving the mutable board convention.

package/docs/vue-adapter.md

@@ -53,3 +53,7 @@ To avoid conflicts with Vue fallthrough attrs, root/node styling props are:
 - this package only renders layout boxes; text rendering is provided separately by `machinalayout/text/vue`
 - portals/reparenting
 - router/state abstraction layers
+
+## DeusMachina composable
+
+`machinalayout/vue` exports `useDeusMachine(machine, initialBoard)`. The composable returns `snapshot` and `lastTrace` refs, computed `board` and `state`, plus `dispatch` and `reset`. It wraps `createDeusSnapshot` and `stepDeusMachine`; board mutations are visible through `debug.board.value` because dispatch assigns a new snapshot object. Keep the machine input stable.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "machinalayout",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit",

package/dist/{chunk-ZVDE7PX4.js → chunk-MSTBFD7H.js}

@@ -1,9 +1,9 @@
-import {
-  getMachinaDebugOverlayBehavior
-} from "./chunk-2ZQ2RFFI.js";
 import {
   toResolvedTree
 } from "./chunk-SVWYWI7I.js";
+import {
+  getMachinaDebugOverlayBehavior
+} from "./chunk-2ZQ2RFFI.js";
 
 // src/react/MachinaReactView.tsx
 import React from "react";