@pixerate/editor-react 0.15.0 → 0.17.0

package/dist/canvas/index.cjs

@@ -20,125 +20,197 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/canvas/index.ts
 var canvas_exports = {};
 __export(canvas_exports, {
+  AUTO_LAYOUT_DATA_KEY: () => import_canvas18.AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer: () => AgentPresenceLayer,
-  CONNECTION_LINE_TYPES: () => import_canvas11.CONNECTION_LINE_TYPES,
+  CANVAS_TOKEN_PROPERTIES: () => import_canvas19.CANVAS_TOKEN_PROPERTIES,
+  CHILD_LAYOUT_DATA_KEY: () => import_canvas18.CHILD_LAYOUT_DATA_KEY,
+  CONNECTION_LINE_TYPES: () => import_canvas14.CONNECTION_LINE_TYPES,
   CanvasGuidesLayer: () => CanvasGuidesLayer,
-  CanvasScenesStore: () => import_canvas11.CanvasScenesStore,
-  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas11.DEFAULT_ARRANGE_SHORTCUTS,
-  ManualClock: () => import_canvas13.ManualClock,
-  RESIZE_HANDLES: () => import_canvas10.RESIZE_HANDLES,
-  SHAPE_DATA_KEY: () => import_canvas12.SHAPE_DATA_KEY,
-  SHAPE_KINDS: () => import_canvas12.SHAPE_KINDS,
-  SHAPE_NODE_TYPE: () => import_canvas12.SHAPE_NODE_TYPE,
-  SHAPE_OPERATIONS: () => import_canvas12.SHAPE_OPERATIONS,
+  CanvasScenesStore: () => import_canvas14.CanvasScenesStore,
+  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas14.DEFAULT_ARRANGE_SHORTCUTS,
+  ManualClock: () => import_canvas17.ManualClock,
+  RESIZE_HANDLES: () => import_canvas13.RESIZE_HANDLES,
+  SHAPE_DATA_KEY: () => import_canvas15.SHAPE_DATA_KEY,
+  SHAPE_KINDS: () => import_canvas15.SHAPE_KINDS,
+  SHAPE_NODE_TYPE: () => import_canvas15.SHAPE_NODE_TYPE,
+  SHAPE_OPERATIONS: () => import_canvas15.SHAPE_OPERATIONS,
   ShapeNode: () => ShapeNode,
-  alignNodes: () => import_canvas11.alignNodes,
-  applyNodeUpdates: () => import_canvas11.applyNodeUpdates,
-  applyShapeCombination: () => import_canvas12.applyShapeCombination,
-  blendLayout: () => import_canvas13.blendLayout,
-  boundsOf: () => import_canvas13.boundsOf,
-  calculateDagreReflowDisplacement: () => import_canvas13.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas13.calculateDirectionalDisplacement,
-  canCombineShapeNodes: () => import_canvas12.canCombineShapeNodes,
-  canvasHeight: () => import_canvas13.canvasHeight,
-  centerNodes: () => import_canvas13.centerNodes,
-  centre: () => import_canvas13.centre,
-  combineShapeNodes: () => import_canvas12.combineShapeNodes,
-  computeNodesBoundingBox: () => import_canvas13.computeNodesBoundingBox,
-  computeSnapGuides: () => import_canvas11.computeSnapGuides,
-  connectedOnly: () => import_canvas13.connectedOnly,
-  createBezierTrajectory: () => import_canvas13.createBezierTrajectory,
-  createCanvasScenesStore: () => import_canvas11.createCanvasScenesStore,
-  createFanOutTrajectory: () => import_canvas13.createFanOutTrajectory,
-  createGuideIndex: () => import_canvas11.createGuideIndex,
-  createNodeGuideIndex: () => import_canvas11.createNodeGuideIndex,
-  cubicPointAt: () => import_canvas10.cubicPointAt,
-  cubicsToPathData: () => import_canvas10.cubicsToPathData,
-  defaultEasing: () => import_canvas13.defaultEasing,
-  distributeNodes: () => import_canvas11.distributeNodes,
-  dividePolygons: () => import_canvas12.dividePolygons,
-  ensureLayout: () => import_canvas13.ensureLayout,
-  estimateCanvasHeight: () => import_canvas13.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas13.estimateNodeSize,
-  findConnectorSnap: () => import_canvas11.findConnectorSnap,
-  fitCubicRun: () => import_canvas10.fitCubicRun,
-  fitCubics: () => import_canvas10.fitCubics,
-  fitFreehandPath: () => import_canvas10.fitFreehandPath,
-  fitPathData: () => import_canvas10.fitPathData,
-  fitViewportToNodes: () => import_canvas11.fitViewportToNodes,
-  fitViewportToRect: () => import_canvas11.fitViewportToRect,
-  flattenSvgPath: () => import_canvas12.flattenSvgPath,
-  flowSide: () => import_canvas13.flowSide,
-  getAbsolutePosition: () => import_canvas11.getAbsolutePosition,
-  getCenteredNodePosition: () => import_canvas13.getCenteredNodePosition,
-  getLayoutedNodes: () => import_canvas13.getLayoutedNodes,
-  getNodeRect: () => import_canvas11.getNodeRect,
-  getNodeShape: () => import_canvas12.getNodeShape,
-  getNodeSize: () => import_canvas11.getNodeSize,
-  getResizingNodeRect: () => import_canvas10.getResizingNodeRect,
-  getShapeRenderData: () => import_canvas12.getShapeRenderData,
-  getShapeSvg: () => import_canvas12.getShapeSvg,
-  handlePoint: () => import_canvas11.handlePoint,
-  inferResizeHandle: () => import_canvas10.inferResizeHandle,
-  intersectPolygons: () => import_canvas12.intersectPolygons,
-  invertNodeUpdates: () => import_canvas11.invertNodeUpdates,
-  isEventFromTextInput: () => import_canvas13.isEventFromTextInput,
-  isLocked: () => import_canvas11.isLocked,
-  isMeasureModifierHeld: () => import_canvas10.isMeasureModifierHeld,
-  isShapeDescription: () => import_canvas12.isShapeDescription,
-  isShapeNode: () => import_canvas12.isShapeNode,
-  isStraightCubic: () => import_canvas10.isStraightCubic,
-  isValidCanvasNode: () => import_canvas13.isValidCanvasNode,
-  isValidUrl: () => import_canvas13.isValidUrl,
-  layoutBounds: () => import_canvas13.layoutBounds,
-  linearPositionTrajectory: () => import_canvas13.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas13.linearTrajectory,
-  lockNodes: () => import_canvas11.lockNodes,
-  matchArrangeShortcut: () => import_canvas11.matchArrangeShortcut,
-  matchSize: () => import_canvas11.matchSize,
-  measureBetween: () => import_canvas10.measureBetween,
-  measureLabel: () => import_canvas10.measureLabel,
-  measureSelection: () => import_canvas10.measureSelection,
-  measureToLine: () => import_canvas10.measureToLine,
-  multiPolygonArea: () => import_canvas12.multiPolygonArea,
-  multiPolygonBounds: () => import_canvas12.multiPolygonBounds,
-  nearestHandlePositions: () => import_canvas11.nearestHandlePositions,
-  oppositePosition: () => import_canvas11.oppositePosition,
-  overlaps: () => import_canvas13.overlaps,
-  parseCanvasClipboardData: () => import_canvas13.parseCanvasClipboardData,
-  parseCanvasScenes: () => import_canvas11.parseCanvasScenes,
-  parseSvgPath: () => import_canvas12.parseSvgPath,
-  placeBeside: () => import_canvas13.placeBeside,
-  pointInMultiPolygon: () => import_canvas12.pointInMultiPolygon,
-  pointInRings: () => import_canvas12.pointInRings,
-  polygonArea: () => import_canvas12.polygonArea,
-  polygonBoolean: () => import_canvas12.polygonBoolean,
-  polygonToSvgPath: () => import_canvas12.polygonToSvgPath,
-  positionToSide: () => import_canvas11.positionToSide,
-  readStyleSize: () => import_canvas11.readStyleSize,
-  realClock: () => import_canvas13.realClock,
-  remapPastedNodes: () => import_canvas13.remapPastedNodes,
-  reorderNodes: () => import_canvas11.reorderNodes,
-  repositionNodesTo: () => import_canvas13.repositionNodesTo,
-  resizeHandleAxes: () => import_canvas10.resizeHandleAxes,
-  revertShapeCombination: () => import_canvas12.revertShapeCombination,
-  ringSignedArea: () => import_canvas12.ringSignedArea,
-  runMultiNodeTransition: () => import_canvas13.runMultiNodeTransition,
-  serializeCanvasNodes: () => import_canvas13.serializeCanvasNodes,
-  shapeNodeToPolygon: () => import_canvas12.shapeNodeToPolygon,
-  shapeToPolygon: () => import_canvas12.shapeToPolygon,
-  sideToPosition: () => import_canvas11.sideToPosition,
-  simplifyRing: () => import_canvas12.simplifyRing,
-  snapNodeDrag: () => import_canvas11.snapNodeDrag,
-  snapNodeResize: () => import_canvas10.snapNodeResize,
-  snapResize: () => import_canvas10.snapResize,
-  snapToGrid: () => import_canvas10.snapToGrid,
-  subtractPolygons: () => import_canvas12.subtractPolygons,
-  toggleLockNodes: () => import_canvas11.toggleLockNodes,
-  unionPolygons: () => import_canvas12.unionPolygons,
-  unlockNodes: () => import_canvas11.unlockNodes,
+  TOKEN_BINDINGS_DATA_KEY: () => import_canvas19.TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY: () => import_canvas19.TOKEN_MODES_DATA_KEY,
+  TokenBindingPicker: () => TokenBindingPicker,
+  TokenModeSwitcher: () => TokenModeSwitcher,
+  alignNodes: () => import_canvas14.alignNodes,
+  applyConstraints: () => import_canvas18.applyConstraints,
+  applyNodeUpdates: () => import_canvas14.applyNodeUpdates,
+  applyShapeCombination: () => import_canvas15.applyShapeCombination,
+  applyShapeReplacement: () => import_canvas16.applyShapeReplacement,
+  bezierPathArea: () => import_canvas16.bezierPathArea,
+  bezierPathBounds: () => import_canvas16.bezierPathBounds,
+  bezierPathLength: () => import_canvas16.bezierPathLength,
+  bezierPathPointAtLength: () => import_canvas16.bezierPathPointAtLength,
+  bezierPathSignedArea: () => import_canvas16.bezierPathSignedArea,
+  bezierPathToSvg: () => import_canvas16.bezierPathToSvg,
+  bindCanvasToken: () => import_canvas19.bindCanvasToken,
+  blendLayout: () => import_canvas17.blendLayout,
+  boundsOf: () => import_canvas17.boundsOf,
+  calculateDagreReflowDisplacement: () => import_canvas17.calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement: () => import_canvas17.calculateDirectionalDisplacement,
+  canCombineShapeNodes: () => import_canvas15.canCombineShapeNodes,
+  canOffsetShapeNodes: () => import_canvas16.canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes: () => import_canvas16.canOutlineShapeNodeStrokes,
+  canvasHeight: () => import_canvas17.canvasHeight,
+  centerNodes: () => import_canvas17.centerNodes,
+  centre: () => import_canvas17.centre,
+  clampLayoutSize: () => import_canvas18.clampLayoutSize,
+  combineShapeNodes: () => import_canvas15.combineShapeNodes,
+  computeNodesBoundingBox: () => import_canvas17.computeNodesBoundingBox,
+  computeSnapGuides: () => import_canvas14.computeSnapGuides,
+  connectedOnly: () => import_canvas17.connectedOnly,
+  countPathSegments: () => import_canvas16.countPathSegments,
+  createBezierTrajectory: () => import_canvas17.createBezierTrajectory,
+  createCanvasAutoLayoutController: () => import_canvas18.createCanvasAutoLayoutController,
+  createCanvasScenesStore: () => import_canvas14.createCanvasScenesStore,
+  createFanOutTrajectory: () => import_canvas17.createFanOutTrajectory,
+  createGuideIndex: () => import_canvas14.createGuideIndex,
+  createNodeGuideIndex: () => import_canvas14.createNodeGuideIndex,
+  cubicPointAt: () => import_canvas13.cubicPointAt,
+  cubicsToPathData: () => import_canvas13.cubicsToPathData,
+  dashContours: () => import_canvas16.dashContours,
+  defaultEasing: () => import_canvas17.defaultEasing,
+  detachTokenBindings: () => import_canvas19.detachTokenBindings,
+  distanceToBezierPath: () => import_canvas16.distanceToBezierPath,
+  distributeNodes: () => import_canvas14.distributeNodes,
+  dividePaths: () => import_canvas16.dividePaths,
+  dividePolygons: () => import_canvas15.dividePolygons,
+  ensureLayout: () => import_canvas17.ensureLayout,
+  estimateCanvasHeight: () => import_canvas17.estimateCanvasHeight,
+  estimateNodeSize: () => import_canvas17.estimateNodeSize,
+  excludePaths: () => import_canvas16.excludePaths,
+  findConnectorSnap: () => import_canvas14.findConnectorSnap,
+  fitCubicRun: () => import_canvas13.fitCubicRun,
+  fitCubics: () => import_canvas13.fitCubics,
+  fitFreehandPath: () => import_canvas13.fitFreehandPath,
+  fitPathData: () => import_canvas13.fitPathData,
+  fitViewportToNodes: () => import_canvas14.fitViewportToNodes,
+  fitViewportToRect: () => import_canvas14.fitViewportToRect,
+  flattenSvgPath: () => import_canvas15.flattenSvgPath,
+  flowSide: () => import_canvas17.flowSide,
+  getAbsolutePosition: () => import_canvas14.getAbsolutePosition,
+  getAutoLayout: () => import_canvas18.getAutoLayout,
+  getAutoLayoutGrid: () => import_canvas18.getAutoLayoutGrid,
+  getAutoLayoutInsertTarget: () => import_canvas18.getAutoLayoutInsertTarget,
+  getBindableTokenProperties: () => import_canvas19.getBindableTokenProperties,
+  getCanvasTokenProperty: () => import_canvas19.getCanvasTokenProperty,
+  getCenteredNodePosition: () => import_canvas17.getCenteredNodePosition,
+  getChildLayout: () => import_canvas18.getChildLayout,
+  getEffectiveTokenModes: () => import_canvas19.getEffectiveTokenModes,
+  getFlowChildren: () => import_canvas18.getFlowChildren,
+  getLayoutParent: () => import_canvas18.getLayoutParent,
+  getLayoutSizing: () => import_canvas18.getLayoutSizing,
+  getLayoutedNodes: () => import_canvas17.getLayoutedNodes,
+  getNodeRect: () => import_canvas14.getNodeRect,
+  getNodeShape: () => import_canvas15.getNodeShape,
+  getNodeSize: () => import_canvas14.getNodeSize,
+  getNodeTokenBindings: () => import_canvas19.getNodeTokenBindings,
+  getNodeTokenModes: () => import_canvas19.getNodeTokenModes,
+  getResizingNodeRect: () => import_canvas13.getResizingNodeRect,
+  getShapeRenderData: () => import_canvas15.getShapeRenderData,
+  getShapeSvg: () => import_canvas15.getShapeSvg,
+  getTokenPropertyScope: () => import_canvas19.getTokenPropertyScope,
+  getTokensForProperty: () => import_canvas19.getTokensForProperty,
+  handlePoint: () => import_canvas14.handlePoint,
+  hasVisibleStroke: () => import_canvas16.hasVisibleStroke,
+  inferResizeHandle: () => import_canvas13.inferResizeHandle,
+  inspectNodeTokens: () => import_canvas19.inspectNodeTokens,
+  intersectPaths: () => import_canvas16.intersectPaths,
+  intersectPolygons: () => import_canvas15.intersectPolygons,
+  invertNodeUpdates: () => import_canvas14.invertNodeUpdates,
+  isAutoLayoutFrame: () => import_canvas18.isAutoLayoutFrame,
+  isEventFromTextInput: () => import_canvas17.isEventFromTextInput,
+  isLocked: () => import_canvas14.isLocked,
+  isMeasureModifierHeld: () => import_canvas13.isMeasureModifierHeld,
+  isShapeDescription: () => import_canvas15.isShapeDescription,
+  isShapeNode: () => import_canvas15.isShapeNode,
+  isStraightCubic: () => import_canvas13.isStraightCubic,
+  isValidCanvasNode: () => import_canvas17.isValidCanvasNode,
+  isValidUrl: () => import_canvas17.isValidUrl,
+  layoutAll: () => import_canvas18.layoutAll,
+  layoutBounds: () => import_canvas17.layoutBounds,
+  layoutFrame: () => import_canvas18.layoutFrame,
+  layoutUp: () => import_canvas18.layoutUp,
+  layoutUpMany: () => import_canvas18.layoutUpMany,
+  linearPositionTrajectory: () => import_canvas17.linearPositionTrajectory,
+  linearTrajectory: () => import_canvas17.linearTrajectory,
+  lockNodes: () => import_canvas14.lockNodes,
+  makeSizingCoherent: () => import_canvas18.makeSizingCoherent,
+  matchArrangeShortcut: () => import_canvas14.matchArrangeShortcut,
+  matchSize: () => import_canvas14.matchSize,
+  measureBetween: () => import_canvas13.measureBetween,
+  measureLabel: () => import_canvas13.measureLabel,
+  measureSelection: () => import_canvas13.measureSelection,
+  measureToLine: () => import_canvas13.measureToLine,
+  mergeNodeUpdates: () => import_canvas18.mergeNodeUpdates,
+  moveLayoutChild: () => import_canvas18.moveLayoutChild,
+  multiPolygonArea: () => import_canvas15.multiPolygonArea,
+  multiPolygonBounds: () => import_canvas15.multiPolygonBounds,
+  nearestHandlePositions: () => import_canvas14.nearestHandlePositions,
+  normalizeBezierPath: () => import_canvas16.normalizeBezierPath,
+  offsetPath: () => import_canvas16.offsetPath,
+  offsetShapeNodes: () => import_canvas16.offsetShapeNodes,
+  oppositePosition: () => import_canvas14.oppositePosition,
+  outlineShapeNodeStrokes: () => import_canvas16.outlineShapeNodeStrokes,
+  outlineStroke: () => import_canvas16.outlineStroke,
+  overlaps: () => import_canvas17.overlaps,
+  parseCanvasClipboardData: () => import_canvas17.parseCanvasClipboardData,
+  parseCanvasScenes: () => import_canvas14.parseCanvasScenes,
+  parseSvgPath: () => import_canvas15.parseSvgPath,
+  pathBoolean: () => import_canvas16.pathBoolean,
+  placeBeside: () => import_canvas17.placeBeside,
+  pointInBezierPath: () => import_canvas16.pointInBezierPath,
+  pointInMultiPolygon: () => import_canvas15.pointInMultiPolygon,
+  pointInRings: () => import_canvas15.pointInRings,
+  polygonArea: () => import_canvas15.polygonArea,
+  polygonBoolean: () => import_canvas15.polygonBoolean,
+  polygonToSvgPath: () => import_canvas15.polygonToSvgPath,
+  positionToSide: () => import_canvas14.positionToSide,
+  pruneCanvasTokenModes: () => import_canvas19.pruneCanvasTokenModes,
+  readNodeStyleProperty: () => import_canvas19.readNodeStyleProperty,
+  readStyleSize: () => import_canvas14.readStyleSize,
+  realClock: () => import_canvas17.realClock,
+  relayoutUpdates: () => import_canvas18.relayoutUpdates,
+  remapPastedNodes: () => import_canvas17.remapPastedNodes,
+  reorderNodes: () => import_canvas14.reorderNodes,
+  repositionNodesTo: () => import_canvas17.repositionNodesTo,
+  resizeHandleAxes: () => import_canvas13.resizeHandleAxes,
+  resolveCanvasTokens: () => import_canvas19.resolveCanvasTokens,
+  resolvePadding: () => import_canvas18.resolvePadding,
+  revertShapeCombination: () => import_canvas15.revertShapeCombination,
+  ringSignedArea: () => import_canvas15.ringSignedArea,
+  runMultiNodeTransition: () => import_canvas17.runMultiNodeTransition,
+  serializeCanvasNodes: () => import_canvas17.serializeCanvasNodes,
+  setCanvasTokenMode: () => import_canvas19.setCanvasTokenMode,
+  shapeNodeToBezierPath: () => import_canvas16.shapeNodeToBezierPath,
+  shapeNodeToPolygon: () => import_canvas15.shapeNodeToPolygon,
+  shapeToBezierPath: () => import_canvas16.shapeToBezierPath,
+  shapeToPolygon: () => import_canvas15.shapeToPolygon,
+  sideToPosition: () => import_canvas14.sideToPosition,
+  simplifyRing: () => import_canvas15.simplifyRing,
+  snapNodeDrag: () => import_canvas14.snapNodeDrag,
+  snapNodeResize: () => import_canvas13.snapNodeResize,
+  snapResize: () => import_canvas13.snapResize,
+  snapToGrid: () => import_canvas13.snapToGrid,
+  strokeOutlineRings: () => import_canvas16.strokeOutlineRings,
+  subtractPaths: () => import_canvas16.subtractPaths,
+  subtractPolygons: () => import_canvas15.subtractPolygons,
+  toBezierPath: () => import_canvas16.toBezierPath,
+  toggleLockNodes: () => import_canvas14.toggleLockNodes,
+  transformBezierPath: () => import_canvas16.transformBezierPath,
+  unionPolygons: () => import_canvas15.unionPolygons,
+  unitePaths: () => import_canvas16.unitePaths,
+  unlockNodes: () => import_canvas14.unlockNodes,
   useCanvasArrange: () => useCanvasArrange,
   useCanvasArrangeShortcuts: () => useCanvasArrangeShortcuts,
+  useCanvasAutoLayout: () => useCanvasAutoLayout,
   useCanvasClipboard: () => useCanvasClipboard,
   useCanvasDocking: () => useCanvasDocking,
   useCanvasExplosion: () => useCanvasExplosion,
@@ -147,9 +219,11 @@ __export(canvas_exports, {
   useCanvasMeasure: () => useCanvasMeasure,
   useCanvasScenes: () => useCanvasScenes,
   useCanvasShortcuts: () => useCanvasShortcuts,
+  useCanvasTokens: () => useCanvasTokens,
   useStreamingCanvas: () => useStreamingCanvas,
-  withStyleSize: () => import_canvas11.withStyleSize,
-  xorPolygons: () => import_canvas12.xorPolygons
+  withStyleSize: () => import_canvas14.withStyleSize,
+  writeNodeStyleProperty: () => import_canvas19.writeNodeStyleProperty,
+  xorPolygons: () => import_canvas15.xorPolygons
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -924,6 +998,9 @@ function useCanvasArrange(options) {
       get rectOptions() {
         return optionsRef.current.rectOptions;
       },
+      get autoLayout() {
+        return optionsRef.current.autoLayout;
+      },
       onGuidesChange: setGuides
     }),
     []
@@ -1159,8 +1236,8 @@ function useCanvasMeasure(options) {
 }
 
 // src/canvas/index.ts
-var import_canvas10 = require("@pixerate/editor/canvas");
-var import_canvas11 = require("@pixerate/editor/canvas");
+var import_canvas13 = require("@pixerate/editor/canvas");
+var import_canvas14 = require("@pixerate/editor/canvas");
 
 // src/canvas/ShapeNode.tsx
 var import_canvas9 = require("@pixerate/editor/canvas");
@@ -1208,11 +1285,228 @@ function ShapeNode({ data, width, height, selected, className = "", children })
 }
 
 // src/canvas/index.ts
+var import_canvas15 = require("@pixerate/editor/canvas");
+var import_canvas16 = require("@pixerate/editor/canvas");
+var import_canvas17 = require("@pixerate/editor/canvas");
+var import_canvas18 = require("@pixerate/editor/canvas");
+
+// src/canvas/useCanvasAutoLayout.ts
+var import_react11 = require("react");
+var import_canvas10 = require("@pixerate/editor/canvas");
+function useCanvasAutoLayout(options) {
+  const [guides, setGuides] = (0, import_react11.useState)([]);
+  const nodesRef = (0, import_react11.useRef)(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = (0, import_react11.useRef)(options);
+  optionsRef.current = options;
+  const controller = (0, import_react11.useMemo)(
+    () => (0, import_canvas10.createCanvasAutoLayoutController)({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      get history() {
+        return optionsRef.current.history;
+      },
+      get enabled() {
+        return optionsRef.current.enabled;
+      },
+      get dragReorder() {
+        return optionsRef.current.dragReorder;
+      },
+      get measure() {
+        return optionsRef.current.measure;
+      },
+      get rectOptions() {
+        return optionsRef.current.rectOptions;
+      },
+      onGuidesChange: setGuides
+    }),
+    []
+  );
+  (0, import_react11.useLayoutEffect)(() => {
+    if (controller.hasPending) controller.flush();
+  }, [options.nodes, controller]);
+  return (0, import_react11.useMemo)(
+    () => ({
+      ...controller,
+      /** Drop marker of the active reorder drag (flow coordinates). */
+      guides,
+      get hasPending() {
+        return controller.hasPending;
+      }
+    }),
+    [controller, guides]
+  );
+}
+
+// src/canvas/useCanvasTokens.ts
+var import_react12 = require("react");
+var import_canvas11 = require("@pixerate/editor/canvas");
+function useCanvasTokens(options) {
+  const { store, nodes, setNodes, modes, properties } = options;
+  const state = (0, import_react12.useSyncExternalStore)(store.subscribe, store.getState, store.getState);
+  const latest = (0, import_react12.useRef)({ nodes, setNodes, modes, properties });
+  latest.current = { nodes, setNodes, modes, properties };
+  const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
+  (0, import_react12.useEffect)(
+    () => store.subscribe((event) => {
+      if (event.deletedVariableIds.length === 0) return;
+      latest.current.setNodes((prev) => (0, import_canvas11.detachTokenBindings)(prev, event.previous, event.deletedVariableIds, opts()));
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  const modesKey = JSON.stringify(modes ?? {});
+  (0, import_react12.useEffect)(() => {
+    const next = (0, import_canvas11.resolveCanvasTokens)(nodes, state, opts());
+    if (next !== nodes) setNodes(next);
+  }, [nodes, state, modesKey, properties]);
+  const bind = (0, import_react12.useCallback)(
+    (ids, propertyKey, variableId) => {
+      const next = (0, import_canvas11.bindCanvasToken)(latest.current.nodes, ids, propertyKey, variableId, store.getState(), opts());
+      if (next !== latest.current.nodes) latest.current.setNodes(next);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  const setMode = (0, import_react12.useCallback)(
+    (ids, collectionId, modeId) => {
+      const next = (0, import_canvas11.setCanvasTokenMode)(latest.current.nodes, ids, collectionId, modeId, store.getState(), opts());
+      if (next !== latest.current.nodes) latest.current.setNodes(next);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  const modesOf = (0, import_react12.useCallback)(
+    (nodeId) => {
+      const node = latest.current.nodes.find((n) => n.id === nodeId);
+      return node ? (0, import_canvas11.getEffectiveTokenModes)(node, latest.current.nodes, store.getState(), opts()) : {};
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  return { state, bind, setMode, modesOf };
+}
+
+// src/canvas/TokenBindingPicker.tsx
 var import_canvas12 = require("@pixerate/editor/canvas");
-var import_canvas13 = require("@pixerate/editor/canvas");
+var import_tokens = require("@pixerate/editor/tokens");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function TokenBindingPicker({
+  state,
+  nodes,
+  selectedIds,
+  onChange,
+  options = {},
+  properties,
+  onError,
+  className = ""
+}) {
+  const selected = nodes.filter((n) => selectedIds.includes(n.id));
+  const first = selected[0];
+  if (!first) return null;
+  let rows = (0, import_canvas12.getBindableTokenProperties)(first, options);
+  if (properties) rows = properties.map((key) => rows.find((p) => p.key === key)).filter((p) => !!p);
+  const modes = (0, import_canvas12.getEffectiveTokenModes)(first, nodes, state, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-token-binding-picker": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+    rows.map((property) => {
+      const ids = new Set(selected.map((n) => (0, import_canvas12.getNodeTokenBindings)(n)[property.key] ?? ""));
+      const value = ids.size === 1 ? [...ids][0] : "__mixed";
+      const candidates = (0, import_canvas12.getTokensForProperty)(state, property, first);
+      const resolved = value && value !== "__mixed" ? (0, import_tokens.resolveToken)(state, value, modes) : null;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "select",
+          {
+            "aria-label": `${property.label} variable`,
+            className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+            value,
+            onChange: (e) => {
+              const id = e.currentTarget.value || null;
+              try {
+                onChange((0, import_canvas12.bindCanvasToken)(nodes, selectedIds, property.key, id, state, options));
+              } catch (error) {
+                onError?.(error);
+              }
+            },
+            children: [
+              value === "__mixed" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "__mixed", children: "Mixed" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "None" }),
+              candidates.map((v) => {
+                const collection = state.collections.find((c) => c.id === v.collectionId);
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: v.id, children: [
+                  v.name,
+                  collection && state.collections.length > 1 ? ` (${collection.name})` : ""
+                ] }, v.id);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            className: "inline-block h-3 w-3 rounded border border-border align-middle",
+            style: { background: String(resolved.value) },
+            title: String(resolved.value)
+          }
+        ) : String(resolved.value) : resolved ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { title: resolved.message, children: "\u26A0" }) : null })
+      ] }, property.key);
+    }),
+    state.collections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
+  ] });
+}
+function TokenModeSwitcher({
+  state,
+  nodes,
+  nodeIds,
+  onChange,
+  options = {},
+  showSingleMode = false,
+  className = ""
+}) {
+  const first = nodes.find((n) => nodeIds.includes(n.id));
+  if (!first) return null;
+  const own = (0, import_canvas12.getNodeTokenModes)(first);
+  const parent = first.parentId ? nodes.find((n) => n.id === first.parentId) : void 0;
+  const inherited = parent ? (0, import_canvas12.getEffectiveTokenModes)(parent, nodes, state, options) : { ...options.modes };
+  const collections = state.collections.filter((c) => showSingleMode || c.modes.length > 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-token-mode-switcher": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: collections.map((collection) => {
+    const auto = (0, import_tokens.getCurrentMode)(collection, inherited);
+    const explicit = collection.modes.some((m) => m.id === own[collection.id]) ? own[collection.id] : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "select",
+        {
+          "aria-label": `${collection.name} mode`,
+          className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+          value: explicit,
+          onChange: (e) => onChange((0, import_canvas12.setCanvasTokenMode)(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: "", children: [
+              "Auto (",
+              auto.name,
+              ")"
+            ] }),
+            collection.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: m.id, children: m.name }, m.id))
+          ]
+        }
+      )
+    ] }, collection.id);
+  }) });
+}
+
+// src/canvas/index.ts
+var import_canvas19 = require("@pixerate/editor/canvas");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer,
+  CANVAS_TOKEN_PROPERTIES,
+  CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
   CanvasGuidesLayer,
   CanvasScenesStore,
@@ -1224,34 +1518,57 @@ var import_canvas13 = require("@pixerate/editor/canvas");
   SHAPE_NODE_TYPE,
   SHAPE_OPERATIONS,
   ShapeNode,
+  TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY,
+  TokenBindingPicker,
+  TokenModeSwitcher,
   alignNodes,
+  applyConstraints,
   applyNodeUpdates,
   applyShapeCombination,
+  applyShapeReplacement,
+  bezierPathArea,
+  bezierPathBounds,
+  bezierPathLength,
+  bezierPathPointAtLength,
+  bezierPathSignedArea,
+  bezierPathToSvg,
+  bindCanvasToken,
   blendLayout,
   boundsOf,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement,
   canCombineShapeNodes,
+  canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes,
   canvasHeight,
   centerNodes,
   centre,
+  clampLayoutSize,
   combineShapeNodes,
   computeNodesBoundingBox,
   computeSnapGuides,
   connectedOnly,
+  countPathSegments,
   createBezierTrajectory,
+  createCanvasAutoLayoutController,
   createCanvasScenesStore,
   createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
   cubicPointAt,
   cubicsToPathData,
+  dashContours,
   defaultEasing,
+  detachTokenBindings,
+  distanceToBezierPath,
   distributeNodes,
+  dividePaths,
   dividePolygons,
   ensureLayout,
   estimateCanvasHeight,
   estimateNodeSize,
+  excludePaths,
   findConnectorSnap,
   fitCubicRun,
   fitCubics,
@@ -1262,18 +1579,36 @@ var import_canvas13 = require("@pixerate/editor/canvas");
   flattenSvgPath,
   flowSide,
   getAbsolutePosition,
+  getAutoLayout,
+  getAutoLayoutGrid,
+  getAutoLayoutInsertTarget,
+  getBindableTokenProperties,
+  getCanvasTokenProperty,
   getCenteredNodePosition,
+  getChildLayout,
+  getEffectiveTokenModes,
+  getFlowChildren,
+  getLayoutParent,
+  getLayoutSizing,
   getLayoutedNodes,
   getNodeRect,
   getNodeShape,
   getNodeSize,
+  getNodeTokenBindings,
+  getNodeTokenModes,
   getResizingNodeRect,
   getShapeRenderData,
   getShapeSvg,
+  getTokenPropertyScope,
+  getTokensForProperty,
   handlePoint,
+  hasVisibleStroke,
   inferResizeHandle,
+  inspectNodeTokens,
+  intersectPaths,
   intersectPolygons,
   invertNodeUpdates,
+  isAutoLayoutFrame,
   isEventFromTextInput,
   isLocked,
   isMeasureModifierHeld,
@@ -1282,42 +1617,64 @@ var import_canvas13 = require("@pixerate/editor/canvas");
   isStraightCubic,
   isValidCanvasNode,
   isValidUrl,
+  layoutAll,
   layoutBounds,
+  layoutFrame,
+  layoutUp,
+  layoutUpMany,
   linearPositionTrajectory,
   linearTrajectory,
   lockNodes,
+  makeSizingCoherent,
   matchArrangeShortcut,
   matchSize,
   measureBetween,
   measureLabel,
   measureSelection,
   measureToLine,
+  mergeNodeUpdates,
+  moveLayoutChild,
   multiPolygonArea,
   multiPolygonBounds,
   nearestHandlePositions,
+  normalizeBezierPath,
+  offsetPath,
+  offsetShapeNodes,
   oppositePosition,
+  outlineShapeNodeStrokes,
+  outlineStroke,
   overlaps,
   parseCanvasClipboardData,
   parseCanvasScenes,
   parseSvgPath,
+  pathBoolean,
   placeBeside,
+  pointInBezierPath,
   pointInMultiPolygon,
   pointInRings,
   polygonArea,
   polygonBoolean,
   polygonToSvgPath,
   positionToSide,
+  pruneCanvasTokenModes,
+  readNodeStyleProperty,
   readStyleSize,
   realClock,
+  relayoutUpdates,
   remapPastedNodes,
   reorderNodes,
   repositionNodesTo,
   resizeHandleAxes,
+  resolveCanvasTokens,
+  resolvePadding,
   revertShapeCombination,
   ringSignedArea,
   runMultiNodeTransition,
   serializeCanvasNodes,
+  setCanvasTokenMode,
+  shapeNodeToBezierPath,
   shapeNodeToPolygon,
+  shapeToBezierPath,
   shapeToPolygon,
   sideToPosition,
   simplifyRing,
@@ -1325,12 +1682,18 @@ var import_canvas13 = require("@pixerate/editor/canvas");
   snapNodeResize,
   snapResize,
   snapToGrid,
+  strokeOutlineRings,
+  subtractPaths,
   subtractPolygons,
+  toBezierPath,
   toggleLockNodes,
+  transformBezierPath,
   unionPolygons,
+  unitePaths,
   unlockNodes,
   useCanvasArrange,
   useCanvasArrangeShortcuts,
+  useCanvasAutoLayout,
   useCanvasClipboard,
   useCanvasDocking,
   useCanvasExplosion,
@@ -1339,8 +1702,10 @@ var import_canvas13 = require("@pixerate/editor/canvas");
   useCanvasMeasure,
   useCanvasScenes,
   useCanvasShortcuts,
+  useCanvasTokens,
   useStreamingCanvas,
   withStyleSize,
+  writeNodeStyleProperty,
   xorPolygons
 });
 //# sourceMappingURL=index.cjs.map