@pixerate/editor-react 0.16.0 → 0.17.0

package/dist/canvas/index.cjs

@@ -20,145 +20,194 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/canvas/index.ts
 var canvas_exports = {};
 __export(canvas_exports, {
-  AUTO_LAYOUT_DATA_KEY: () => import_canvas15.AUTO_LAYOUT_DATA_KEY,
+  AUTO_LAYOUT_DATA_KEY: () => import_canvas18.AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer: () => AgentPresenceLayer,
-  CHILD_LAYOUT_DATA_KEY: () => import_canvas15.CHILD_LAYOUT_DATA_KEY,
-  CONNECTION_LINE_TYPES: () => import_canvas12.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_canvas12.CanvasScenesStore,
-  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas12.DEFAULT_ARRANGE_SHORTCUTS,
-  ManualClock: () => import_canvas14.ManualClock,
-  RESIZE_HANDLES: () => import_canvas11.RESIZE_HANDLES,
-  SHAPE_DATA_KEY: () => import_canvas13.SHAPE_DATA_KEY,
-  SHAPE_KINDS: () => import_canvas13.SHAPE_KINDS,
-  SHAPE_NODE_TYPE: () => import_canvas13.SHAPE_NODE_TYPE,
-  SHAPE_OPERATIONS: () => import_canvas13.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_canvas12.alignNodes,
-  applyConstraints: () => import_canvas15.applyConstraints,
-  applyNodeUpdates: () => import_canvas12.applyNodeUpdates,
-  applyShapeCombination: () => import_canvas13.applyShapeCombination,
-  blendLayout: () => import_canvas14.blendLayout,
-  boundsOf: () => import_canvas14.boundsOf,
-  calculateDagreReflowDisplacement: () => import_canvas14.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas14.calculateDirectionalDisplacement,
-  canCombineShapeNodes: () => import_canvas13.canCombineShapeNodes,
-  canvasHeight: () => import_canvas14.canvasHeight,
-  centerNodes: () => import_canvas14.centerNodes,
-  centre: () => import_canvas14.centre,
-  clampLayoutSize: () => import_canvas15.clampLayoutSize,
-  combineShapeNodes: () => import_canvas13.combineShapeNodes,
-  computeNodesBoundingBox: () => import_canvas14.computeNodesBoundingBox,
-  computeSnapGuides: () => import_canvas12.computeSnapGuides,
-  connectedOnly: () => import_canvas14.connectedOnly,
-  createBezierTrajectory: () => import_canvas14.createBezierTrajectory,
-  createCanvasAutoLayoutController: () => import_canvas15.createCanvasAutoLayoutController,
-  createCanvasScenesStore: () => import_canvas12.createCanvasScenesStore,
-  createFanOutTrajectory: () => import_canvas14.createFanOutTrajectory,
-  createGuideIndex: () => import_canvas12.createGuideIndex,
-  createNodeGuideIndex: () => import_canvas12.createNodeGuideIndex,
-  cubicPointAt: () => import_canvas11.cubicPointAt,
-  cubicsToPathData: () => import_canvas11.cubicsToPathData,
-  defaultEasing: () => import_canvas14.defaultEasing,
-  distributeNodes: () => import_canvas12.distributeNodes,
-  dividePolygons: () => import_canvas13.dividePolygons,
-  ensureLayout: () => import_canvas14.ensureLayout,
-  estimateCanvasHeight: () => import_canvas14.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas14.estimateNodeSize,
-  findConnectorSnap: () => import_canvas12.findConnectorSnap,
-  fitCubicRun: () => import_canvas11.fitCubicRun,
-  fitCubics: () => import_canvas11.fitCubics,
-  fitFreehandPath: () => import_canvas11.fitFreehandPath,
-  fitPathData: () => import_canvas11.fitPathData,
-  fitViewportToNodes: () => import_canvas12.fitViewportToNodes,
-  fitViewportToRect: () => import_canvas12.fitViewportToRect,
-  flattenSvgPath: () => import_canvas13.flattenSvgPath,
-  flowSide: () => import_canvas14.flowSide,
-  getAbsolutePosition: () => import_canvas12.getAbsolutePosition,
-  getAutoLayout: () => import_canvas15.getAutoLayout,
-  getAutoLayoutGrid: () => import_canvas15.getAutoLayoutGrid,
-  getAutoLayoutInsertTarget: () => import_canvas15.getAutoLayoutInsertTarget,
-  getCenteredNodePosition: () => import_canvas14.getCenteredNodePosition,
-  getChildLayout: () => import_canvas15.getChildLayout,
-  getFlowChildren: () => import_canvas15.getFlowChildren,
-  getLayoutParent: () => import_canvas15.getLayoutParent,
-  getLayoutSizing: () => import_canvas15.getLayoutSizing,
-  getLayoutedNodes: () => import_canvas14.getLayoutedNodes,
-  getNodeRect: () => import_canvas12.getNodeRect,
-  getNodeShape: () => import_canvas13.getNodeShape,
-  getNodeSize: () => import_canvas12.getNodeSize,
-  getResizingNodeRect: () => import_canvas11.getResizingNodeRect,
-  getShapeRenderData: () => import_canvas13.getShapeRenderData,
-  getShapeSvg: () => import_canvas13.getShapeSvg,
-  handlePoint: () => import_canvas12.handlePoint,
-  inferResizeHandle: () => import_canvas11.inferResizeHandle,
-  intersectPolygons: () => import_canvas13.intersectPolygons,
-  invertNodeUpdates: () => import_canvas12.invertNodeUpdates,
-  isAutoLayoutFrame: () => import_canvas15.isAutoLayoutFrame,
-  isEventFromTextInput: () => import_canvas14.isEventFromTextInput,
-  isLocked: () => import_canvas12.isLocked,
-  isMeasureModifierHeld: () => import_canvas11.isMeasureModifierHeld,
-  isShapeDescription: () => import_canvas13.isShapeDescription,
-  isShapeNode: () => import_canvas13.isShapeNode,
-  isStraightCubic: () => import_canvas11.isStraightCubic,
-  isValidCanvasNode: () => import_canvas14.isValidCanvasNode,
-  isValidUrl: () => import_canvas14.isValidUrl,
-  layoutAll: () => import_canvas15.layoutAll,
-  layoutBounds: () => import_canvas14.layoutBounds,
-  layoutFrame: () => import_canvas15.layoutFrame,
-  layoutUp: () => import_canvas15.layoutUp,
-  layoutUpMany: () => import_canvas15.layoutUpMany,
-  linearPositionTrajectory: () => import_canvas14.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas14.linearTrajectory,
-  lockNodes: () => import_canvas12.lockNodes,
-  makeSizingCoherent: () => import_canvas15.makeSizingCoherent,
-  matchArrangeShortcut: () => import_canvas12.matchArrangeShortcut,
-  matchSize: () => import_canvas12.matchSize,
-  measureBetween: () => import_canvas11.measureBetween,
-  measureLabel: () => import_canvas11.measureLabel,
-  measureSelection: () => import_canvas11.measureSelection,
-  measureToLine: () => import_canvas11.measureToLine,
-  mergeNodeUpdates: () => import_canvas15.mergeNodeUpdates,
-  moveLayoutChild: () => import_canvas15.moveLayoutChild,
-  multiPolygonArea: () => import_canvas13.multiPolygonArea,
-  multiPolygonBounds: () => import_canvas13.multiPolygonBounds,
-  nearestHandlePositions: () => import_canvas12.nearestHandlePositions,
-  oppositePosition: () => import_canvas12.oppositePosition,
-  overlaps: () => import_canvas14.overlaps,
-  parseCanvasClipboardData: () => import_canvas14.parseCanvasClipboardData,
-  parseCanvasScenes: () => import_canvas12.parseCanvasScenes,
-  parseSvgPath: () => import_canvas13.parseSvgPath,
-  placeBeside: () => import_canvas14.placeBeside,
-  pointInMultiPolygon: () => import_canvas13.pointInMultiPolygon,
-  pointInRings: () => import_canvas13.pointInRings,
-  polygonArea: () => import_canvas13.polygonArea,
-  polygonBoolean: () => import_canvas13.polygonBoolean,
-  polygonToSvgPath: () => import_canvas13.polygonToSvgPath,
-  positionToSide: () => import_canvas12.positionToSide,
-  readStyleSize: () => import_canvas12.readStyleSize,
-  realClock: () => import_canvas14.realClock,
-  relayoutUpdates: () => import_canvas15.relayoutUpdates,
-  remapPastedNodes: () => import_canvas14.remapPastedNodes,
-  reorderNodes: () => import_canvas12.reorderNodes,
-  repositionNodesTo: () => import_canvas14.repositionNodesTo,
-  resizeHandleAxes: () => import_canvas11.resizeHandleAxes,
-  resolvePadding: () => import_canvas15.resolvePadding,
-  revertShapeCombination: () => import_canvas13.revertShapeCombination,
-  ringSignedArea: () => import_canvas13.ringSignedArea,
-  runMultiNodeTransition: () => import_canvas14.runMultiNodeTransition,
-  serializeCanvasNodes: () => import_canvas14.serializeCanvasNodes,
-  shapeNodeToPolygon: () => import_canvas13.shapeNodeToPolygon,
-  shapeToPolygon: () => import_canvas13.shapeToPolygon,
-  sideToPosition: () => import_canvas12.sideToPosition,
-  simplifyRing: () => import_canvas13.simplifyRing,
-  snapNodeDrag: () => import_canvas12.snapNodeDrag,
-  snapNodeResize: () => import_canvas11.snapNodeResize,
-  snapResize: () => import_canvas11.snapResize,
-  snapToGrid: () => import_canvas11.snapToGrid,
-  subtractPolygons: () => import_canvas13.subtractPolygons,
-  toggleLockNodes: () => import_canvas12.toggleLockNodes,
-  unionPolygons: () => import_canvas13.unionPolygons,
-  unlockNodes: () => import_canvas12.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,
@@ -170,9 +219,11 @@ __export(canvas_exports, {
   useCanvasMeasure: () => useCanvasMeasure,
   useCanvasScenes: () => useCanvasScenes,
   useCanvasShortcuts: () => useCanvasShortcuts,
+  useCanvasTokens: () => useCanvasTokens,
   useStreamingCanvas: () => useStreamingCanvas,
-  withStyleSize: () => import_canvas12.withStyleSize,
-  xorPolygons: () => import_canvas13.xorPolygons
+  withStyleSize: () => import_canvas14.withStyleSize,
+  writeNodeStyleProperty: () => import_canvas19.writeNodeStyleProperty,
+  xorPolygons: () => import_canvas15.xorPolygons
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -1185,8 +1236,8 @@ function useCanvasMeasure(options) {
 }
 
 // src/canvas/index.ts
-var import_canvas11 = require("@pixerate/editor/canvas");
-var import_canvas12 = 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");
@@ -1234,9 +1285,10 @@ function ShapeNode({ data, width, height, selected, className = "", children })
 }
 
 // src/canvas/index.ts
-var import_canvas13 = require("@pixerate/editor/canvas");
-var import_canvas14 = require("@pixerate/editor/canvas");
 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");
@@ -1288,10 +1340,172 @@ function useCanvasAutoLayout(options) {
     [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_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,
@@ -1304,15 +1518,29 @@ function useCanvasAutoLayout(options) {
   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,
@@ -1321,6 +1549,7 @@ function useCanvasAutoLayout(options) {
   computeNodesBoundingBox,
   computeSnapGuides,
   connectedOnly,
+  countPathSegments,
   createBezierTrajectory,
   createCanvasAutoLayoutController,
   createCanvasScenesStore,
@@ -1329,12 +1558,17 @@ function useCanvasAutoLayout(options) {
   createNodeGuideIndex,
   cubicPointAt,
   cubicsToPathData,
+  dashContours,
   defaultEasing,
+  detachTokenBindings,
+  distanceToBezierPath,
   distributeNodes,
+  dividePaths,
   dividePolygons,
   ensureLayout,
   estimateCanvasHeight,
   estimateNodeSize,
+  excludePaths,
   findConnectorSnap,
   fitCubicRun,
   fitCubics,
@@ -1348,8 +1582,11 @@ function useCanvasAutoLayout(options) {
   getAutoLayout,
   getAutoLayoutGrid,
   getAutoLayoutInsertTarget,
+  getBindableTokenProperties,
+  getCanvasTokenProperty,
   getCenteredNodePosition,
   getChildLayout,
+  getEffectiveTokenModes,
   getFlowChildren,
   getLayoutParent,
   getLayoutSizing,
@@ -1357,11 +1594,18 @@ function useCanvasAutoLayout(options) {
   getNodeRect,
   getNodeShape,
   getNodeSize,
+  getNodeTokenBindings,
+  getNodeTokenModes,
   getResizingNodeRect,
   getShapeRenderData,
   getShapeSvg,
+  getTokenPropertyScope,
+  getTokensForProperty,
   handlePoint,
+  hasVisibleStroke,
   inferResizeHandle,
+  inspectNodeTokens,
+  intersectPaths,
   intersectPolygons,
   invertNodeUpdates,
   isAutoLayoutFrame,
@@ -1393,18 +1637,27 @@ function useCanvasAutoLayout(options) {
   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,
@@ -1412,12 +1665,16 @@ function useCanvasAutoLayout(options) {
   reorderNodes,
   repositionNodesTo,
   resizeHandleAxes,
+  resolveCanvasTokens,
   resolvePadding,
   revertShapeCombination,
   ringSignedArea,
   runMultiNodeTransition,
   serializeCanvasNodes,
+  setCanvasTokenMode,
+  shapeNodeToBezierPath,
   shapeNodeToPolygon,
+  shapeToBezierPath,
   shapeToPolygon,
   sideToPosition,
   simplifyRing,
@@ -1425,9 +1682,14 @@ function useCanvasAutoLayout(options) {
   snapNodeResize,
   snapResize,
   snapToGrid,
+  strokeOutlineRings,
+  subtractPaths,
   subtractPolygons,
+  toBezierPath,
   toggleLockNodes,
+  transformBezierPath,
   unionPolygons,
+  unitePaths,
   unlockNodes,
   useCanvasArrange,
   useCanvasArrangeShortcuts,
@@ -1440,8 +1702,10 @@ function useCanvasAutoLayout(options) {
   useCanvasMeasure,
   useCanvasScenes,
   useCanvasShortcuts,
+  useCanvasTokens,
   useStreamingCanvas,
   withStyleSize,
+  writeNodeStyleProperty,
   xorPolygons
 });
 //# sourceMappingURL=index.cjs.map