@pixerate/editor-react 0.16.0 → 0.17.0

package/dist/canvas/index.d.ts

@@ -2,8 +2,9 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import { AgentPresence } from '@pixerate/editor/agent';
 import * as _pixerate_editor_canvas from '@pixerate/editor/canvas';
-import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, ShapeDescription, AutoLayoutMeasure } from '@pixerate/editor/canvas';
-export { AUTO_LAYOUT_DATA_KEY, AlignEdge, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeTransition, PathCommand, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, StarShape, TrajectoryFunction, TrajectoryPoint, XYPosition, ZOrderOperation, alignNodes, applyConstraints, applyNodeUpdates, applyShapeCombination, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canvasHeight, centerNodes, centre, clampLayoutSize, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, createBezierTrajectory, createCanvasAutoLayoutController, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, defaultEasing, distributeNodes, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getCenteredNodePosition, getChildLayout, getFlowChildren, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getResizingNodeRect, getShapeRenderData, getShapeSvg, handlePoint, inferResizeHandle, intersectPolygons, invertNodeUpdates, isAutoLayoutFrame, isEventFromTextInput, isLocked, isMeasureModifierHeld, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, oppositePosition, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, placeBeside, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, readStyleSize, realClock, relayoutUpdates, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, resolvePadding, revertShapeCombination, ringSignedArea, runMultiNodeTransition, serializeCanvasNodes, shapeNodeToPolygon, shapeToPolygon, sideToPosition, simplifyRing, snapNodeDrag, snapNodeResize, snapResize, snapToGrid, subtractPolygons, toggleLockNodes, unionPolygons, unlockNodes, withStyleSize, xorPolygons } from '@pixerate/editor/canvas';
+import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions } from '@pixerate/editor/canvas';
+export { AUTO_LAYOUT_DATA_KEY, AlignEdge, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, StarShape, StrokeCap, StrokeJoin, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TrajectoryFunction, TrajectoryPoint, XYPosition, ZOrderOperation, 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, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, 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, isShapeDescription, isShapeNode, 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, snapNodeDrag, snapNodeResize, snapResize, snapToGrid, strokeOutlineRings, subtractPaths, subtractPolygons, toBezierPath, toggleLockNodes, transformBezierPath, unionPolygons, unitePaths, unlockNodes, withStyleSize, writeNodeStyleProperty, xorPolygons } from '@pixerate/editor/canvas';
+import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
 
 interface AgentPresenceLayerProps {
     presences: AgentPresence[];
@@ -197,6 +198,10 @@ declare function useCanvasArrange<TNode extends CanvasNode = CanvasNode>(options
     exclude: (ids?: Iterable<string>, o?: _pixerate_editor_canvas.CombineShapeNodesOptions) => _pixerate_editor_canvas.CombineShapeNodesResult<TNode>;
     divide: (ids?: Iterable<string>, o?: _pixerate_editor_canvas.CombineShapeNodesOptions) => _pixerate_editor_canvas.CombineShapeNodesResult<TNode>;
     canCombineShapes: (ids?: Iterable<string>) => boolean;
+    offsetShapes(distance: number, ids?: Iterable<string>, offsetOptions?: _pixerate_editor_canvas.OffsetShapeNodesOptions): _pixerate_editor_canvas.ShapePathEditResult<TNode>;
+    canOffsetShapes: (ids?: Iterable<string>) => boolean;
+    outlineStroke(ids?: Iterable<string>, outlineOptions?: _pixerate_editor_canvas.OutlineShapeStrokesOptions): _pixerate_editor_canvas.ShapePathEditResult<TNode>;
+    canOutlineStroke: (ids?: Iterable<string>) => boolean;
     runAction(action: CanvasArrangeAction): boolean;
     beginDrag(ids?: Iterable<string>): void;
     drag(ids?: Iterable<string>): _pixerate_editor_canvas.SnapNodeDragResult | null;
@@ -415,4 +420,62 @@ declare function useCanvasAutoLayout<TNode extends CanvasNode = CanvasNode>(opti
 };
 type CanvasAutoLayout = ReturnType<typeof useCanvasAutoLayout>;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasAutoLayout, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, ShapeNode, type ShapeNodeProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useStreamingCanvas };
+interface UseCanvasTokensOptions<TNode extends CanvasNode> extends Omit<CanvasTokenOptions, 'modes'> {
+    store: TokenStore;
+    nodes: TNode[];
+    setNodes: (update: TNode[] | ((nodes: TNode[]) => TNode[])) => void;
+    /** Modes for nodes without an explicit mode up their tree (e.g. the page's). */
+    modes?: TokenModeContext;
+}
+interface CanvasTokens {
+    state: TokenState;
+    /** Binds (or with `null` unbinds) a property of the nodes; throws `TokenError` when refused. */
+    bind: (ids: Iterable<string>, propertyKey: string, variableId: string | null) => void;
+    /** Sets (or with `null` clears) an explicit mode on frames / groups; descendants follow. */
+    setMode: (ids: Iterable<string>, collectionId: string, modeId: string | null) => void;
+    /** The modes a node is in (its own, inherited, then the root `modes`). */
+    modesOf: (nodeId: string) => Record<string, string>;
+}
+/**
+ * Keeps token-bound node properties resolved: whenever the token store, the nodes or the root
+ * modes change, bound values are written into the nodes (only when something changed, so it
+ * does not loop). Deleting a variable detaches the nodes bound to it, keeping their values.
+ */
+declare function useCanvasTokens<TNode extends CanvasNode>(options: UseCanvasTokensOptions<TNode>): CanvasTokens;
+
+interface TokenBindingPickerProps<TNode extends CanvasNode = CanvasNode> {
+    state: TokenState;
+    nodes: TNode[];
+    /** Nodes to bind (the first one decides which properties are listed). */
+    selectedIds: readonly string[];
+    /** Receives the nodes with the binding applied and resolved. */
+    onChange: (nodes: TNode[]) => void;
+    options?: CanvasTokenOptions;
+    /** Limit to these property keys (in this order). */
+    properties?: readonly string[];
+    onError?: (error: Error) => void;
+    className?: string;
+}
+/**
+ * Inspector rows that bind node properties (fill, stroke, opacity, radius, gap, padding, text
+ * colour / size, …) to variables of the right type and scope, showing each resolved value.
+ */
+declare function TokenBindingPicker<TNode extends CanvasNode = CanvasNode>({ state, nodes, selectedIds, onChange, options, properties, onError, className, }: TokenBindingPickerProps<TNode>): React__default.JSX.Element | null;
+interface TokenModeSwitcherProps<TNode extends CanvasNode = CanvasNode> {
+    state: TokenState;
+    nodes: TNode[];
+    /** Frames / groups whose explicit mode is set (the first one's choice is shown). */
+    nodeIds: readonly string[];
+    onChange: (nodes: TNode[]) => void;
+    options?: CanvasTokenOptions;
+    /** Show collections with a single mode too (default `false`). */
+    showSingleMode?: boolean;
+    className?: string;
+}
+/**
+ * Per-collection mode pickers for the selected frames: "Auto" (inherit from the parent, then
+ * the root modes, then the default mode) or an explicit mode that descendants inherit.
+ */
+declare function TokenModeSwitcher<TNode extends CanvasNode = CanvasNode>({ state, nodes, nodeIds, onChange, options, showSingleMode, className, }: TokenModeSwitcherProps<TNode>): React__default.JSX.Element | null;
+
+export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasAutoLayout, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useStreamingCanvas };

package/dist/canvas/index.js

@@ -1171,6 +1171,38 @@ import {
   pointInRings,
   pointInMultiPolygon
 } from "@pixerate/editor/canvas";
+import {
+  offsetShapeNodes,
+  outlineShapeNodeStrokes,
+  canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes,
+  applyShapeReplacement,
+  hasVisibleStroke,
+  shapeToBezierPath,
+  shapeNodeToBezierPath,
+  pathBoolean,
+  unitePaths,
+  intersectPaths,
+  subtractPaths,
+  excludePaths,
+  dividePaths,
+  normalizeBezierPath,
+  bezierPathArea,
+  offsetPath,
+  outlineStroke,
+  strokeOutlineRings,
+  dashContours,
+  toBezierPath,
+  bezierPathToSvg,
+  transformBezierPath,
+  bezierPathBounds,
+  bezierPathSignedArea,
+  bezierPathLength,
+  bezierPathPointAtLength,
+  pointInBezierPath,
+  distanceToBezierPath,
+  countPathSegments
+} from "@pixerate/editor/canvas";
 import {
   getLayoutedNodes as getLayoutedNodes2,
   ensureLayout as ensureLayout2,
@@ -1283,9 +1315,204 @@ function useCanvasAutoLayout(options) {
     [controller, guides]
   );
 }
+
+// src/canvas/useCanvasTokens.ts
+import { useCallback as useCallback8, useEffect as useEffect5, useRef as useRef9, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  bindCanvasToken,
+  detachTokenBindings,
+  getEffectiveTokenModes,
+  resolveCanvasTokens,
+  setCanvasTokenMode
+} from "@pixerate/editor/canvas";
+function useCanvasTokens(options) {
+  const { store, nodes, setNodes, modes, properties } = options;
+  const state = useSyncExternalStore2(store.subscribe, store.getState, store.getState);
+  const latest = useRef9({ nodes, setNodes, modes, properties });
+  latest.current = { nodes, setNodes, modes, properties };
+  const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
+  useEffect5(
+    () => store.subscribe((event) => {
+      if (event.deletedVariableIds.length === 0) return;
+      latest.current.setNodes((prev) => detachTokenBindings(prev, event.previous, event.deletedVariableIds, opts()));
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  const modesKey = JSON.stringify(modes ?? {});
+  useEffect5(() => {
+    const next = resolveCanvasTokens(nodes, state, opts());
+    if (next !== nodes) setNodes(next);
+  }, [nodes, state, modesKey, properties]);
+  const bind = useCallback8(
+    (ids, propertyKey, variableId) => {
+      const next = 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 = useCallback8(
+    (ids, collectionId, modeId) => {
+      const next = 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 = useCallback8(
+    (nodeId) => {
+      const node = latest.current.nodes.find((n) => n.id === nodeId);
+      return node ? 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
+import {
+  bindCanvasToken as bindCanvasToken2,
+  getBindableTokenProperties,
+  getEffectiveTokenModes as getEffectiveTokenModes2,
+  getNodeTokenBindings,
+  getNodeTokenModes,
+  setCanvasTokenMode as setCanvasTokenMode2,
+  getTokensForProperty
+} from "@pixerate/editor/canvas";
+import { getCurrentMode, resolveToken } from "@pixerate/editor/tokens";
+import { jsx as jsx4, jsxs as jsxs4 } from "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 = getBindableTokenProperties(first, options);
+  if (properties) rows = properties.map((key) => rows.find((p) => p.key === key)).filter((p) => !!p);
+  const modes = getEffectiveTokenModes2(first, nodes, state, options);
+  return /* @__PURE__ */ jsxs4("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) => getNodeTokenBindings(n)[property.key] ?? ""));
+      const value = ids.size === 1 ? [...ids][0] : "__mixed";
+      const candidates = getTokensForProperty(state, property, first);
+      const resolved = value && value !== "__mixed" ? resolveToken(state, value, modes) : null;
+      return /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
+        /* @__PURE__ */ jsx4("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
+        /* @__PURE__ */ jsxs4(
+          "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(bindCanvasToken2(nodes, selectedIds, property.key, id, state, options));
+              } catch (error) {
+                onError?.(error);
+              }
+            },
+            children: [
+              value === "__mixed" ? /* @__PURE__ */ jsx4("option", { value: "__mixed", children: "Mixed" }) : null,
+              /* @__PURE__ */ jsx4("option", { value: "", children: "None" }),
+              candidates.map((v) => {
+                const collection = state.collections.find((c) => c.id === v.collectionId);
+                return /* @__PURE__ */ jsxs4("option", { value: v.id, children: [
+                  v.name,
+                  collection && state.collections.length > 1 ? ` (${collection.name})` : ""
+                ] }, v.id);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ jsx4(
+          "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__ */ jsx4("span", { title: resolved.message, children: "\u26A0" }) : null })
+      ] }, property.key);
+    }),
+    state.collections.length === 0 ? /* @__PURE__ */ jsx4("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 = getNodeTokenModes(first);
+  const parent = first.parentId ? nodes.find((n) => n.id === first.parentId) : void 0;
+  const inherited = parent ? getEffectiveTokenModes2(parent, nodes, state, options) : { ...options.modes };
+  const collections = state.collections.filter((c) => showSingleMode || c.modes.length > 1);
+  return /* @__PURE__ */ jsx4("div", { "data-token-mode-switcher": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: collections.map((collection) => {
+    const auto = getCurrentMode(collection, inherited);
+    const explicit = collection.modes.some((m) => m.id === own[collection.id]) ? own[collection.id] : "";
+    return /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
+      /* @__PURE__ */ jsxs4(
+        "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(setCanvasTokenMode2(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
+          children: [
+            /* @__PURE__ */ jsxs4("option", { value: "", children: [
+              "Auto (",
+              auto.name,
+              ")"
+            ] }),
+            collection.modes.map((m) => /* @__PURE__ */ jsx4("option", { value: m.id, children: m.name }, m.id))
+          ]
+        }
+      )
+    ] }, collection.id);
+  }) });
+}
+
+// src/canvas/index.ts
+import {
+  bindCanvasToken as bindCanvasToken3,
+  setCanvasTokenMode as setCanvasTokenMode3,
+  resolveCanvasTokens as resolveCanvasTokens2,
+  detachTokenBindings as detachTokenBindings2,
+  pruneCanvasTokenModes,
+  inspectNodeTokens,
+  getNodeTokenBindings as getNodeTokenBindings2,
+  getNodeTokenModes as getNodeTokenModes2,
+  getEffectiveTokenModes as getEffectiveTokenModes3,
+  getBindableTokenProperties as getBindableTokenProperties2,
+  getCanvasTokenProperty,
+  getTokenPropertyScope,
+  getTokensForProperty as getTokensForProperty2,
+  readNodeStyleProperty,
+  writeNodeStyleProperty,
+  CANVAS_TOKEN_PROPERTIES,
+  TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY
+} from "@pixerate/editor/canvas";
 export {
   AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer,
+  CANVAS_TOKEN_PROPERTIES,
   CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
   CanvasGuidesLayer,
@@ -1298,15 +1525,29 @@ export {
   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,
+  bindCanvasToken3 as bindCanvasToken,
   blendLayout,
   boundsOf,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement2 as calculateDirectionalDisplacement,
   canCombineShapeNodes,
+  canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes,
   canvasHeight,
   centerNodes2 as centerNodes,
   centre,
@@ -1315,6 +1556,7 @@ export {
   computeNodesBoundingBox,
   computeSnapGuides,
   connectedOnly,
+  countPathSegments,
   createBezierTrajectory,
   createCanvasAutoLayoutController2 as createCanvasAutoLayoutController,
   createCanvasScenesStore,
@@ -1323,12 +1565,17 @@ export {
   createNodeGuideIndex,
   cubicPointAt,
   cubicsToPathData,
+  dashContours,
   defaultEasing,
+  detachTokenBindings2 as detachTokenBindings,
+  distanceToBezierPath,
   distributeNodes,
+  dividePaths,
   dividePolygons,
   ensureLayout2 as ensureLayout,
   estimateCanvasHeight,
   estimateNodeSize,
+  excludePaths,
   findConnectorSnap,
   fitCubicRun,
   fitCubics,
@@ -1342,8 +1589,11 @@ export {
   getAutoLayout,
   getAutoLayoutGrid,
   getAutoLayoutInsertTarget,
+  getBindableTokenProperties2 as getBindableTokenProperties,
+  getCanvasTokenProperty,
   getCenteredNodePosition2 as getCenteredNodePosition,
   getChildLayout,
+  getEffectiveTokenModes3 as getEffectiveTokenModes,
   getFlowChildren,
   getLayoutParent,
   getLayoutSizing,
@@ -1351,11 +1601,18 @@ export {
   getNodeRect,
   getNodeShape,
   getNodeSize,
+  getNodeTokenBindings2 as getNodeTokenBindings,
+  getNodeTokenModes2 as getNodeTokenModes,
   getResizingNodeRect,
   getShapeRenderData2 as getShapeRenderData,
   getShapeSvg,
+  getTokenPropertyScope,
+  getTokensForProperty2 as getTokensForProperty,
   handlePoint,
+  hasVisibleStroke,
   inferResizeHandle,
+  inspectNodeTokens,
+  intersectPaths,
   intersectPolygons,
   invertNodeUpdates,
   isAutoLayoutFrame,
@@ -1387,18 +1644,27 @@ export {
   multiPolygonArea,
   multiPolygonBounds,
   nearestHandlePositions,
+  normalizeBezierPath,
+  offsetPath,
+  offsetShapeNodes,
   oppositePosition,
+  outlineShapeNodeStrokes,
+  outlineStroke,
   overlaps,
   parseCanvasClipboardData2 as parseCanvasClipboardData,
   parseCanvasScenes,
   parseSvgPath,
+  pathBoolean,
   placeBeside2 as placeBeside,
+  pointInBezierPath,
   pointInMultiPolygon,
   pointInRings,
   polygonArea,
   polygonBoolean,
   polygonToSvgPath,
   positionToSide,
+  pruneCanvasTokenModes,
+  readNodeStyleProperty,
   readStyleSize,
   realClock,
   relayoutUpdates,
@@ -1406,12 +1672,16 @@ export {
   reorderNodes,
   repositionNodesTo,
   resizeHandleAxes,
+  resolveCanvasTokens2 as resolveCanvasTokens,
   resolvePadding,
   revertShapeCombination,
   ringSignedArea,
   runMultiNodeTransition2 as runMultiNodeTransition,
   serializeCanvasNodes2 as serializeCanvasNodes,
+  setCanvasTokenMode3 as setCanvasTokenMode,
+  shapeNodeToBezierPath,
   shapeNodeToPolygon,
+  shapeToBezierPath,
   shapeToPolygon,
   sideToPosition,
   simplifyRing,
@@ -1419,9 +1689,14 @@ export {
   snapNodeResize,
   snapResize,
   snapToGrid,
+  strokeOutlineRings,
+  subtractPaths,
   subtractPolygons,
+  toBezierPath,
   toggleLockNodes,
+  transformBezierPath,
   unionPolygons,
+  unitePaths,
   unlockNodes,
   useCanvasArrange,
   useCanvasArrangeShortcuts,
@@ -1434,8 +1709,10 @@ export {
   useCanvasMeasure,
   useCanvasScenes,
   useCanvasShortcuts,
+  useCanvasTokens,
   useStreamingCanvas,
   withStyleSize,
+  writeNodeStyleProperty,
   xorPolygons
 };
 //# sourceMappingURL=index.js.map