@pixerate/editor-react 0.79.0 → 0.81.0

package/dist/canvas/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,336 +17,347 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/canvas/index.ts
 var canvas_exports = {};
 __export(canvas_exports, {
-  ANIMATABLE_PROPERTIES: () => import_canvas32.ANIMATABLE_PROPERTIES,
-  ANIMATION_DATA_KEY: () => import_canvas32.ANIMATION_DATA_KEY,
-  ANIMATION_EASING_LABELS: () => import_canvas32.ANIMATION_EASING_LABELS,
-  ANIMATION_EASING_PRESETS: () => import_canvas32.ANIMATION_EASING_PRESETS,
-  ANIMATION_TIME_EPSILON: () => import_canvas32.ANIMATION_TIME_EPSILON,
-  AUTO_LAYOUT_DATA_KEY: () => import_canvas30.AUTO_LAYOUT_DATA_KEY,
+  ANIMATABLE_PROPERTIES: () => import_canvas33.ANIMATABLE_PROPERTIES,
+  ANIMATION_DATA_KEY: () => import_canvas33.ANIMATION_DATA_KEY,
+  ANIMATION_EASING_LABELS: () => import_canvas33.ANIMATION_EASING_LABELS,
+  ANIMATION_EASING_PRESETS: () => import_canvas33.ANIMATION_EASING_PRESETS,
+  ANIMATION_TIME_EPSILON: () => import_canvas33.ANIMATION_TIME_EPSILON,
+  AUTO_LAYOUT_DATA_KEY: () => import_canvas31.AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer: () => AgentPresenceLayer,
-  AnimationEditError: () => import_canvas32.AnimationEditError,
-  AnimationPlayer: () => import_canvas32.AnimationPlayer,
+  AnimationEditError: () => import_canvas33.AnimationEditError,
+  AnimationPlayer: () => import_canvas33.AnimationPlayer,
   AnimationTimeline: () => AnimationTimeline,
-  CANVAS_COMPONENT_DRAG_TYPE: () => import_canvas33.CANVAS_COMPONENT_DRAG_TYPE,
-  CANVAS_GRADIENT_PRESETS: () => import_canvas33.CANVAS_GRADIENT_PRESETS,
-  CANVAS_TOKEN_PROPERTIES: () => import_canvas31.CANVAS_TOKEN_PROPERTIES,
-  CHILD_LAYOUT_DATA_KEY: () => import_canvas30.CHILD_LAYOUT_DATA_KEY,
-  CONNECTION_LINE_TYPES: () => import_canvas26.CONNECTION_LINE_TYPES,
-  CSS_ANIMATION_PROPERTIES: () => import_canvas32.CSS_ANIMATION_PROPERTIES,
-  CUBIC_BEZIER_PRESETS: () => import_canvas32.CUBIC_BEZIER_PRESETS,
+  CANVAS_COMPONENT_DRAG_TYPE: () => import_canvas34.CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_GRADIENT_PRESETS: () => import_canvas34.CANVAS_GRADIENT_PRESETS,
+  CANVAS_TOKEN_PROPERTIES: () => import_canvas32.CANVAS_TOKEN_PROPERTIES,
+  CHILD_LAYOUT_DATA_KEY: () => import_canvas31.CHILD_LAYOUT_DATA_KEY,
+  CONNECTION_LINE_TYPES: () => import_canvas27.CONNECTION_LINE_TYPES,
+  CSS_ANIMATION_PROPERTIES: () => import_canvas33.CSS_ANIMATION_PROPERTIES,
+  CUBIC_BEZIER_PRESETS: () => import_canvas33.CUBIC_BEZIER_PRESETS,
   CanvasComponentsPanel: () => CanvasComponentsPanel,
   CanvasDrawLayer: () => CanvasDrawLayer,
+  CanvasEffectsPanel: () => CanvasEffectsPanel,
+  CanvasEffectsProvider: () => CanvasEffectsProvider,
   CanvasGuidesLayer: () => CanvasGuidesLayer,
   CanvasInstanceInspector: () => CanvasInstanceInspector,
-  CanvasScenesStore: () => import_canvas26.CanvasScenesStore,
-  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas26.DEFAULT_ARRANGE_SHORTCUTS,
+  CanvasNodeEffectLayer: () => CanvasNodeEffectLayer,
+  CanvasScenesStore: () => import_canvas27.CanvasScenesStore,
+  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas27.DEFAULT_ARRANGE_SHORTCUTS,
   DiagramPresenceLayer: () => DiagramPresenceLayer,
-  MAX_KEYFRAME_REFS: () => import_canvas32.MAX_KEYFRAME_REFS,
-  ManualClock: () => import_canvas29.ManualClock,
+  MAX_KEYFRAME_REFS: () => import_canvas33.MAX_KEYFRAME_REFS,
+  ManualClock: () => import_canvas30.ManualClock,
   MermaidDiagramGroup: () => MermaidDiagramGroup,
   MermaidDiagramNode: () => MermaidDiagramNode,
   MermaidFamilyScene: () => MermaidFamilyScene,
   MermaidThumbnail: () => MermaidThumbnail,
-  RESIZE_HANDLES: () => import_canvas25.RESIZE_HANDLES,
-  SHAPE_DATA_KEY: () => import_canvas27.SHAPE_DATA_KEY,
-  SHAPE_KINDS: () => import_canvas27.SHAPE_KINDS,
-  SHAPE_NODE_TYPE: () => import_canvas27.SHAPE_NODE_TYPE,
-  SHAPE_OPERATIONS: () => import_canvas27.SHAPE_OPERATIONS,
+  RESIZE_HANDLES: () => import_canvas26.RESIZE_HANDLES,
+  SHAPE_DATA_KEY: () => import_canvas28.SHAPE_DATA_KEY,
+  SHAPE_KINDS: () => import_canvas28.SHAPE_KINDS,
+  SHAPE_NODE_TYPE: () => import_canvas28.SHAPE_NODE_TYPE,
+  SHAPE_OPERATIONS: () => import_canvas28.SHAPE_OPERATIONS,
   ShapeNode: () => ShapeNode,
   ShapeNodeZoomContext: () => ShapeNodeZoomContext,
   ShapeNodeZoomProvider: () => ShapeNodeZoomProvider,
-  TOKEN_BINDINGS_DATA_KEY: () => import_canvas31.TOKEN_BINDINGS_DATA_KEY,
-  TOKEN_MODES_DATA_KEY: () => import_canvas31.TOKEN_MODES_DATA_KEY,
+  TOKEN_BINDINGS_DATA_KEY: () => import_canvas32.TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY: () => import_canvas32.TOKEN_MODES_DATA_KEY,
   TokenBindingPicker: () => TokenBindingPicker,
   TokenModeSwitcher: () => TokenModeSwitcher,
-  addCanvasVariant: () => import_canvas33.addCanvasVariant,
-  addKeyframesAtTime: () => import_canvas32.addKeyframesAtTime,
-  alignNodes: () => import_canvas26.alignNodes,
-  angleToSvgLinearCoords: () => import_canvas33.angleToSvgLinearCoords,
-  animateNode: () => import_canvas32.animateNode,
-  applyAnimation: () => import_canvas32.applyAnimation,
-  applyAnimationOverrides: () => import_canvas32.applyAnimationOverrides,
-  applyConstraints: () => import_canvas30.applyConstraints,
-  applyNodeUpdates: () => import_canvas26.applyNodeUpdates,
-  applyShapeCombination: () => import_canvas27.applyShapeCombination,
-  applyShapeReplacement: () => import_canvas28.applyShapeReplacement,
-  bezierPathArea: () => import_canvas28.bezierPathArea,
-  bezierPathBounds: () => import_canvas28.bezierPathBounds,
-  bezierPathLength: () => import_canvas28.bezierPathLength,
-  bezierPathPointAtLength: () => import_canvas28.bezierPathPointAtLength,
-  bezierPathSignedArea: () => import_canvas28.bezierPathSignedArea,
-  bezierPathToSvg: () => import_canvas28.bezierPathToSvg,
-  bindCanvasComponentProperty: () => import_canvas33.bindCanvasComponentProperty,
-  bindCanvasToken: () => import_canvas31.bindCanvasToken,
-  blendLayout: () => import_canvas29.blendLayout,
-  boundsOf: () => import_canvas29.boundsOf,
-  brushstrokeScaleBucket: () => import_canvas33.brushstrokeScaleBucket,
-  calculateDagreReflowDisplacement: () => import_canvas29.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas29.calculateDirectionalDisplacement,
-  canCombineShapeNodes: () => import_canvas27.canCombineShapeNodes,
-  canOffsetShapeNodes: () => import_canvas28.canOffsetShapeNodes,
-  canOutlineShapeNodeStrokes: () => import_canvas28.canOutlineShapeNodeStrokes,
-  canvasHeight: () => import_canvas29.canvasHeight,
-  centerNodes: () => import_canvas29.centerNodes,
-  centre: () => import_canvas29.centre,
-  clampAnimationValue: () => import_canvas32.clampAnimationValue,
-  clampLayoutSize: () => import_canvas30.clampLayoutSize,
-  combineCanvasComponentsAsVariants: () => import_canvas33.combineCanvasComponentsAsVariants,
-  combineShapeNodes: () => import_canvas27.combineShapeNodes,
-  computeNodesBoundingBox: () => import_canvas29.computeNodesBoundingBox,
-  computeSnapGuides: () => import_canvas26.computeSnapGuides,
-  connectedOnly: () => import_canvas29.connectedOnly,
-  copyKeyframes: () => import_canvas32.copyKeyframes,
-  countPathSegments: () => import_canvas28.countPathSegments,
-  createAnimationPlayer: () => import_canvas32.createAnimationPlayer,
-  createBezierTrajectory: () => import_canvas29.createBezierTrajectory,
-  createCanvasAnimationController: () => import_canvas32.createCanvasAnimationController,
-  createCanvasAutoLayoutController: () => import_canvas30.createCanvasAutoLayoutController,
-  createCanvasComponent: () => import_canvas33.createCanvasComponent,
-  createCanvasComponentsController: () => import_canvas33.createCanvasComponentsController,
-  createCanvasDrawController: () => import_canvas33.createCanvasDrawController,
-  createCanvasInstance: () => import_canvas33.createCanvasInstance,
-  createCanvasScenesStore: () => import_canvas26.createCanvasScenesStore,
-  createDefaultStrokeStyle: () => import_canvas33.createDefaultStrokeStyle,
-  createFanOutTrajectory: () => import_canvas29.createFanOutTrajectory,
-  createGuideIndex: () => import_canvas26.createGuideIndex,
-  createNodeGuideIndex: () => import_canvas26.createNodeGuideIndex,
-  cubicBezierAt: () => import_canvas32.cubicBezierAt,
-  cubicPointAt: () => import_canvas25.cubicPointAt,
-  cubicsToPathData: () => import_canvas25.cubicsToPathData,
-  dashContours: () => import_canvas28.dashContours,
-  defaultEasing: () => import_canvas29.defaultEasing,
-  deleteKeyframes: () => import_canvas32.deleteKeyframes,
-  detachCanvasInstance: () => import_canvas33.detachCanvasInstance,
-  detachTokenBindings: () => import_canvas31.detachTokenBindings,
-  distanceToBezierPath: () => import_canvas28.distanceToBezierPath,
-  distributeNodes: () => import_canvas26.distributeNodes,
-  dividePaths: () => import_canvas28.dividePaths,
-  dividePolygons: () => import_canvas27.dividePolygons,
-  easingFromInfluence: () => import_canvas32.easingFromInfluence,
-  easingLabel: () => import_canvas32.easingLabel,
-  easingToCss: () => import_canvas32.easingToCss,
-  ensureLayout: () => import_canvas29.ensureLayout,
-  estimateCanvasHeight: () => import_canvas29.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas29.estimateNodeSize,
-  evaluateAnimation: () => import_canvas32.evaluateAnimation,
-  evaluateEasing: () => import_canvas32.evaluateEasing,
-  evaluateTrack: () => import_canvas32.evaluateTrack,
-  excludePaths: () => import_canvas28.excludePaths,
-  exportCssAnimation: () => import_canvas32.exportCssAnimation,
-  findConnectorSnap: () => import_canvas26.findConnectorSnap,
-  findStrokesAtPoint: () => import_canvas33.findStrokesAtPoint,
-  fitCubicRun: () => import_canvas25.fitCubicRun,
-  fitCubics: () => import_canvas25.fitCubics,
-  fitFreehandPath: () => import_canvas25.fitFreehandPath,
-  fitPathData: () => import_canvas25.fitPathData,
-  fitViewportToNodes: () => import_canvas26.fitViewportToNodes,
-  fitViewportToRect: () => import_canvas26.fitViewportToRect,
-  flattenSvgPath: () => import_canvas27.flattenSvgPath,
-  flowSide: () => import_canvas29.flowSide,
-  formatAnimationTime: () => import_canvas32.formatAnimationTime,
-  formatOklab: () => import_canvas32.formatOklab,
-  freehandBrushstroke: () => import_canvas33.freehandBrushstroke,
-  getAbsolutePosition: () => import_canvas26.getAbsolutePosition,
-  getAnimatableProperty: () => import_canvas32.getAnimatableProperty,
-  getAnimatedProperties: () => import_canvas32.getAnimatedProperties,
-  getAnimatedValue: () => import_canvas32.getAnimatedValue,
-  getAnimationDuration: () => import_canvas32.getAnimationDuration,
-  getAnimationTrack: () => import_canvas32.getAnimationTrack,
-  getAutoLayout: () => import_canvas30.getAutoLayout,
-  getAutoLayoutGrid: () => import_canvas30.getAutoLayoutGrid,
-  getAutoLayoutInsertTarget: () => import_canvas30.getAutoLayoutInsertTarget,
-  getBindableTokenProperties: () => import_canvas31.getBindableTokenProperties,
-  getBrushedShapeSvg: () => import_canvas33.getBrushedShapeSvg,
-  getCanvasComponentDragId: () => import_canvas33.getCanvasComponentDragId,
-  getCanvasTokenProperty: () => import_canvas31.getCanvasTokenProperty,
-  getCenteredNodePosition: () => import_canvas29.getCenteredNodePosition,
-  getChildLayout: () => import_canvas30.getChildLayout,
-  getComponentSourceId: () => import_canvas33.getComponentSourceId,
-  getCssPropertyAnimations: () => import_canvas32.getCssPropertyAnimations,
-  getEffectiveTokenModes: () => import_canvas31.getEffectiveTokenModes,
-  getFlowChildren: () => import_canvas30.getFlowChildren,
-  getInstanceData: () => import_canvas33.getInstanceData,
-  getInstanceStatus: () => import_canvas33.getInstanceStatus,
-  getKeyframeTimes: () => import_canvas32.getKeyframeTimes,
-  getLayoutParent: () => import_canvas30.getLayoutParent,
-  getLayoutSizing: () => import_canvas30.getLayoutSizing,
-  getLayoutedNodes: () => import_canvas29.getLayoutedNodes,
-  getNextVariantValues: () => import_canvas33.getNextVariantValues,
-  getNodeAnimation: () => import_canvas32.getNodeAnimation,
-  getNodeOverrides: () => import_canvas33.getNodeOverrides,
-  getNodeRect: () => import_canvas26.getNodeRect,
-  getNodeShape: () => import_canvas27.getNodeShape,
-  getNodeSize: () => import_canvas26.getNodeSize,
-  getNodeTokenBindings: () => import_canvas31.getNodeTokenBindings,
-  getNodeTokenModes: () => import_canvas31.getNodeTokenModes,
-  getResizingNodeRect: () => import_canvas25.getResizingNodeRect,
-  getShapeRenderData: () => import_canvas27.getShapeRenderData,
-  getShapeSvg: () => import_canvas27.getShapeSvg,
-  getTimelineRows: () => import_canvas32.getTimelineRows,
-  getTimelineTicks: () => import_canvas32.getTimelineTicks,
-  getTokenPropertyScope: () => import_canvas31.getTokenPropertyScope,
-  getTokensForProperty: () => import_canvas31.getTokensForProperty,
-  gradientToSvgDef: () => import_canvas33.gradientToSvgDef,
-  handlePoint: () => import_canvas26.handlePoint,
-  hasVisibleStroke: () => import_canvas28.hasVisibleStroke,
-  inferResizeHandle: () => import_canvas25.inferResizeHandle,
-  inspectCanvasInstance: () => import_canvas33.inspectCanvasInstance,
-  inspectNodeTokens: () => import_canvas31.inspectNodeTokens,
-  interpolateAnimationValue: () => import_canvas32.interpolateAnimationValue,
-  intersectPaths: () => import_canvas28.intersectPaths,
-  intersectPolygons: () => import_canvas27.intersectPolygons,
-  invertNodeUpdates: () => import_canvas26.invertNodeUpdates,
-  isAnimationEasing: () => import_canvas32.isAnimationEasing,
-  isAnimationKeyframe: () => import_canvas32.isAnimationKeyframe,
-  isAutoLayoutFrame: () => import_canvas30.isAutoLayoutFrame,
-  isBrushedShape: () => import_canvas33.isBrushedShape,
-  isCanvasComponent: () => import_canvas33.isCanvasComponent,
-  isCanvasComponentSet: () => import_canvas33.isCanvasComponentSet,
-  isCanvasGradient: () => import_canvas33.isCanvasGradient,
-  isCanvasInstance: () => import_canvas33.isCanvasInstance,
-  isCssExportExact: () => import_canvas32.isCssExportExact,
-  isEventFromTextInput: () => import_canvas29.isEventFromTextInput,
-  isKeyframeSelected: () => import_canvas32.isKeyframeSelected,
-  isLocked: () => import_canvas26.isLocked,
-  isMeasureModifierHeld: () => import_canvas25.isMeasureModifierHeld,
-  isNodeAnimated: () => import_canvas32.isNodeAnimated,
-  isShapeDescription: () => import_canvas27.isShapeDescription,
-  isShapeNode: () => import_canvas27.isShapeNode,
-  isStraightCubic: () => import_canvas25.isStraightCubic,
-  isValidCanvasNode: () => import_canvas29.isValidCanvasNode,
-  isValidUrl: () => import_canvas29.isValidUrl,
-  layoutAll: () => import_canvas30.layoutAll,
-  layoutBounds: () => import_canvas29.layoutBounds,
-  layoutFrame: () => import_canvas30.layoutFrame,
-  layoutUp: () => import_canvas30.layoutUp,
-  layoutUpMany: () => import_canvas30.layoutUpMany,
-  linearPositionTrajectory: () => import_canvas29.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas29.linearTrajectory,
-  listCanvasBrushes: () => import_canvas33.listCanvasBrushes,
-  listCanvasComponents: () => import_canvas33.listCanvasComponents,
-  loadCanvasBrushstrokeRenderer: () => import_canvas33.loadCanvasBrushstrokeRenderer,
-  lockNodes: () => import_canvas26.lockNodes,
-  makeSizingCoherent: () => import_canvas30.makeSizingCoherent,
-  matchArrangeShortcut: () => import_canvas26.matchArrangeShortcut,
-  matchSize: () => import_canvas26.matchSize,
-  measureBetween: () => import_canvas25.measureBetween,
-  measureLabel: () => import_canvas25.measureLabel,
-  measureSelection: () => import_canvas25.measureSelection,
-  measureToLine: () => import_canvas25.measureToLine,
-  mergeNodeUpdates: () => import_canvas30.mergeNodeUpdates,
+  addCanvasVariant: () => import_canvas34.addCanvasVariant,
+  addKeyframesAtTime: () => import_canvas33.addKeyframesAtTime,
+  alignNodes: () => import_canvas27.alignNodes,
+  angleToSvgLinearCoords: () => import_canvas34.angleToSvgLinearCoords,
+  animateNode: () => import_canvas33.animateNode,
+  applyAnimation: () => import_canvas33.applyAnimation,
+  applyAnimationOverrides: () => import_canvas33.applyAnimationOverrides,
+  applyConstraints: () => import_canvas31.applyConstraints,
+  applyNodeUpdates: () => import_canvas27.applyNodeUpdates,
+  applyShapeCombination: () => import_canvas28.applyShapeCombination,
+  applyShapeReplacement: () => import_canvas29.applyShapeReplacement,
+  bezierPathArea: () => import_canvas29.bezierPathArea,
+  bezierPathBounds: () => import_canvas29.bezierPathBounds,
+  bezierPathLength: () => import_canvas29.bezierPathLength,
+  bezierPathPointAtLength: () => import_canvas29.bezierPathPointAtLength,
+  bezierPathSignedArea: () => import_canvas29.bezierPathSignedArea,
+  bezierPathToSvg: () => import_canvas29.bezierPathToSvg,
+  bindCanvasComponentProperty: () => import_canvas34.bindCanvasComponentProperty,
+  bindCanvasToken: () => import_canvas32.bindCanvasToken,
+  blendLayout: () => import_canvas30.blendLayout,
+  boundsOf: () => import_canvas30.boundsOf,
+  brushstrokeScaleBucket: () => import_canvas34.brushstrokeScaleBucket,
+  calculateDagreReflowDisplacement: () => import_canvas30.calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement: () => import_canvas30.calculateDirectionalDisplacement,
+  canCombineShapeNodes: () => import_canvas28.canCombineShapeNodes,
+  canOffsetShapeNodes: () => import_canvas29.canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes: () => import_canvas29.canOutlineShapeNodeStrokes,
+  canvasHeight: () => import_canvas30.canvasHeight,
+  centerNodes: () => import_canvas30.centerNodes,
+  centre: () => import_canvas30.centre,
+  clampAnimationValue: () => import_canvas33.clampAnimationValue,
+  clampLayoutSize: () => import_canvas31.clampLayoutSize,
+  combineCanvasComponentsAsVariants: () => import_canvas34.combineCanvasComponentsAsVariants,
+  combineShapeNodes: () => import_canvas28.combineShapeNodes,
+  computeNodesBoundingBox: () => import_canvas30.computeNodesBoundingBox,
+  computeSnapGuides: () => import_canvas27.computeSnapGuides,
+  connectedOnly: () => import_canvas30.connectedOnly,
+  copyKeyframes: () => import_canvas33.copyKeyframes,
+  countPathSegments: () => import_canvas29.countPathSegments,
+  createAnimationPlayer: () => import_canvas33.createAnimationPlayer,
+  createBezierTrajectory: () => import_canvas30.createBezierTrajectory,
+  createCanvasAnimationController: () => import_canvas33.createCanvasAnimationController,
+  createCanvasAutoLayoutController: () => import_canvas31.createCanvasAutoLayoutController,
+  createCanvasComponent: () => import_canvas34.createCanvasComponent,
+  createCanvasComponentsController: () => import_canvas34.createCanvasComponentsController,
+  createCanvasDrawController: () => import_canvas34.createCanvasDrawController,
+  createCanvasInstance: () => import_canvas34.createCanvasInstance,
+  createCanvasScenesStore: () => import_canvas27.createCanvasScenesStore,
+  createDefaultStrokeStyle: () => import_canvas34.createDefaultStrokeStyle,
+  createFanOutTrajectory: () => import_canvas30.createFanOutTrajectory,
+  createGuideIndex: () => import_canvas27.createGuideIndex,
+  createNodeGuideIndex: () => import_canvas27.createNodeGuideIndex,
+  cubicBezierAt: () => import_canvas33.cubicBezierAt,
+  cubicPointAt: () => import_canvas26.cubicPointAt,
+  cubicsToPathData: () => import_canvas26.cubicsToPathData,
+  dashContours: () => import_canvas29.dashContours,
+  defaultEasing: () => import_canvas30.defaultEasing,
+  deleteKeyframes: () => import_canvas33.deleteKeyframes,
+  detachCanvasInstance: () => import_canvas34.detachCanvasInstance,
+  detachTokenBindings: () => import_canvas32.detachTokenBindings,
+  distanceToBezierPath: () => import_canvas29.distanceToBezierPath,
+  distributeNodes: () => import_canvas27.distributeNodes,
+  dividePaths: () => import_canvas29.dividePaths,
+  dividePolygons: () => import_canvas28.dividePolygons,
+  easingFromInfluence: () => import_canvas33.easingFromInfluence,
+  easingLabel: () => import_canvas33.easingLabel,
+  easingToCss: () => import_canvas33.easingToCss,
+  ensureLayout: () => import_canvas30.ensureLayout,
+  estimateCanvasHeight: () => import_canvas30.estimateCanvasHeight,
+  estimateNodeSize: () => import_canvas30.estimateNodeSize,
+  evaluateAnimation: () => import_canvas33.evaluateAnimation,
+  evaluateEasing: () => import_canvas33.evaluateEasing,
+  evaluateTrack: () => import_canvas33.evaluateTrack,
+  excludePaths: () => import_canvas29.excludePaths,
+  exportCssAnimation: () => import_canvas33.exportCssAnimation,
+  findConnectorSnap: () => import_canvas27.findConnectorSnap,
+  findStrokesAtPoint: () => import_canvas34.findStrokesAtPoint,
+  fitCubicRun: () => import_canvas26.fitCubicRun,
+  fitCubics: () => import_canvas26.fitCubics,
+  fitFreehandPath: () => import_canvas26.fitFreehandPath,
+  fitPathData: () => import_canvas26.fitPathData,
+  fitViewportToNodes: () => import_canvas27.fitViewportToNodes,
+  fitViewportToRect: () => import_canvas27.fitViewportToRect,
+  flattenSvgPath: () => import_canvas28.flattenSvgPath,
+  flowSide: () => import_canvas30.flowSide,
+  formatAnimationTime: () => import_canvas33.formatAnimationTime,
+  formatOklab: () => import_canvas33.formatOklab,
+  freehandBrushstroke: () => import_canvas34.freehandBrushstroke,
+  getAbsolutePosition: () => import_canvas27.getAbsolutePosition,
+  getAnimatableProperty: () => import_canvas33.getAnimatableProperty,
+  getAnimatedProperties: () => import_canvas33.getAnimatedProperties,
+  getAnimatedValue: () => import_canvas33.getAnimatedValue,
+  getAnimationDuration: () => import_canvas33.getAnimationDuration,
+  getAnimationTrack: () => import_canvas33.getAnimationTrack,
+  getAutoLayout: () => import_canvas31.getAutoLayout,
+  getAutoLayoutGrid: () => import_canvas31.getAutoLayoutGrid,
+  getAutoLayoutInsertTarget: () => import_canvas31.getAutoLayoutInsertTarget,
+  getBindableTokenProperties: () => import_canvas32.getBindableTokenProperties,
+  getBrushedShapeSvg: () => import_canvas34.getBrushedShapeSvg,
+  getCanvasComponentDragId: () => import_canvas34.getCanvasComponentDragId,
+  getCanvasTokenProperty: () => import_canvas32.getCanvasTokenProperty,
+  getCenteredNodePosition: () => import_canvas30.getCenteredNodePosition,
+  getChildLayout: () => import_canvas31.getChildLayout,
+  getComponentSourceId: () => import_canvas34.getComponentSourceId,
+  getCssPropertyAnimations: () => import_canvas33.getCssPropertyAnimations,
+  getEffectiveTokenModes: () => import_canvas32.getEffectiveTokenModes,
+  getFlowChildren: () => import_canvas31.getFlowChildren,
+  getInstanceData: () => import_canvas34.getInstanceData,
+  getInstanceStatus: () => import_canvas34.getInstanceStatus,
+  getKeyframeTimes: () => import_canvas33.getKeyframeTimes,
+  getLayoutParent: () => import_canvas31.getLayoutParent,
+  getLayoutSizing: () => import_canvas31.getLayoutSizing,
+  getLayoutedNodes: () => import_canvas30.getLayoutedNodes,
+  getNextVariantValues: () => import_canvas34.getNextVariantValues,
+  getNodeAnimation: () => import_canvas33.getNodeAnimation,
+  getNodeOverrides: () => import_canvas34.getNodeOverrides,
+  getNodeRect: () => import_canvas27.getNodeRect,
+  getNodeShape: () => import_canvas28.getNodeShape,
+  getNodeSize: () => import_canvas27.getNodeSize,
+  getNodeTokenBindings: () => import_canvas32.getNodeTokenBindings,
+  getNodeTokenModes: () => import_canvas32.getNodeTokenModes,
+  getResizingNodeRect: () => import_canvas26.getResizingNodeRect,
+  getShapeRenderData: () => import_canvas28.getShapeRenderData,
+  getShapeSvg: () => import_canvas28.getShapeSvg,
+  getTimelineRows: () => import_canvas33.getTimelineRows,
+  getTimelineTicks: () => import_canvas33.getTimelineTicks,
+  getTokenPropertyScope: () => import_canvas32.getTokenPropertyScope,
+  getTokensForProperty: () => import_canvas32.getTokensForProperty,
+  gradientToSvgDef: () => import_canvas34.gradientToSvgDef,
+  handlePoint: () => import_canvas27.handlePoint,
+  hasVisibleStroke: () => import_canvas29.hasVisibleStroke,
+  inferResizeHandle: () => import_canvas26.inferResizeHandle,
+  inspectCanvasInstance: () => import_canvas34.inspectCanvasInstance,
+  inspectNodeTokens: () => import_canvas32.inspectNodeTokens,
+  interpolateAnimationValue: () => import_canvas33.interpolateAnimationValue,
+  intersectPaths: () => import_canvas29.intersectPaths,
+  intersectPolygons: () => import_canvas28.intersectPolygons,
+  invertNodeUpdates: () => import_canvas27.invertNodeUpdates,
+  isAnimationEasing: () => import_canvas33.isAnimationEasing,
+  isAnimationKeyframe: () => import_canvas33.isAnimationKeyframe,
+  isAutoLayoutFrame: () => import_canvas31.isAutoLayoutFrame,
+  isBrushedShape: () => import_canvas34.isBrushedShape,
+  isCanvasComponent: () => import_canvas34.isCanvasComponent,
+  isCanvasComponentSet: () => import_canvas34.isCanvasComponentSet,
+  isCanvasGradient: () => import_canvas34.isCanvasGradient,
+  isCanvasInstance: () => import_canvas34.isCanvasInstance,
+  isCssExportExact: () => import_canvas33.isCssExportExact,
+  isEventFromTextInput: () => import_canvas30.isEventFromTextInput,
+  isKeyframeSelected: () => import_canvas33.isKeyframeSelected,
+  isLocked: () => import_canvas27.isLocked,
+  isMeasureModifierHeld: () => import_canvas26.isMeasureModifierHeld,
+  isNodeAnimated: () => import_canvas33.isNodeAnimated,
+  isShapeDescription: () => import_canvas28.isShapeDescription,
+  isShapeNode: () => import_canvas28.isShapeNode,
+  isStraightCubic: () => import_canvas26.isStraightCubic,
+  isValidCanvasNode: () => import_canvas30.isValidCanvasNode,
+  isValidUrl: () => import_canvas30.isValidUrl,
+  layoutAll: () => import_canvas31.layoutAll,
+  layoutBounds: () => import_canvas30.layoutBounds,
+  layoutFrame: () => import_canvas31.layoutFrame,
+  layoutUp: () => import_canvas31.layoutUp,
+  layoutUpMany: () => import_canvas31.layoutUpMany,
+  linearPositionTrajectory: () => import_canvas30.linearPositionTrajectory,
+  linearTrajectory: () => import_canvas30.linearTrajectory,
+  listCanvasBrushes: () => import_canvas34.listCanvasBrushes,
+  listCanvasComponents: () => import_canvas34.listCanvasComponents,
+  loadCanvasBrushstrokeRenderer: () => import_canvas34.loadCanvasBrushstrokeRenderer,
+  lockNodes: () => import_canvas27.lockNodes,
+  makeSizingCoherent: () => import_canvas31.makeSizingCoherent,
+  matchArrangeShortcut: () => import_canvas27.matchArrangeShortcut,
+  matchSize: () => import_canvas27.matchSize,
+  measureBetween: () => import_canvas26.measureBetween,
+  measureLabel: () => import_canvas26.measureLabel,
+  measureSelection: () => import_canvas26.measureSelection,
+  measureToLine: () => import_canvas26.measureToLine,
+  mergeNodeUpdates: () => import_canvas31.mergeNodeUpdates,
   mermaidNodeStyle: () => mermaidNodeStyle,
-  mixColorsOklab: () => import_canvas32.mixColorsOklab,
-  moveKeyframes: () => import_canvas32.moveKeyframes,
-  moveLayoutChild: () => import_canvas30.moveLayoutChild,
-  multiPolygonArea: () => import_canvas27.multiPolygonArea,
-  multiPolygonBounds: () => import_canvas27.multiPolygonBounds,
-  nearestHandlePositions: () => import_canvas26.nearestHandlePositions,
-  normalizeBezierPath: () => import_canvas28.normalizeBezierPath,
-  normalizeKeyframes: () => import_canvas32.normalizeKeyframes,
-  offsetPath: () => import_canvas28.offsetPath,
-  offsetShapeNodes: () => import_canvas28.offsetShapeNodes,
-  oklabToRgb: () => import_canvas32.oklabToRgb,
-  oppositePosition: () => import_canvas26.oppositePosition,
-  outlineShapeNodeStrokes: () => import_canvas28.outlineShapeNodeStrokes,
-  outlineStroke: () => import_canvas28.outlineStroke,
-  overlaps: () => import_canvas29.overlaps,
-  parseCanvasClipboardData: () => import_canvas29.parseCanvasClipboardData,
-  parseCanvasScenes: () => import_canvas26.parseCanvasScenes,
-  parseCssEasing: () => import_canvas32.parseCssEasing,
-  parseCssGradient: () => import_canvas33.parseCssGradient,
-  parseKeyframeClipboard: () => import_canvas32.parseKeyframeClipboard,
-  parseOklab: () => import_canvas32.parseOklab,
-  parseSvgPath: () => import_canvas27.parseSvgPath,
-  pasteKeyframes: () => import_canvas32.pasteKeyframes,
-  pathBoolean: () => import_canvas28.pathBoolean,
-  pathDataToPolyline: () => import_canvas33.pathDataToPolyline,
-  placeBeside: () => import_canvas29.placeBeside,
-  playWebAnimations: () => import_canvas32.playWebAnimations,
-  pointInBezierPath: () => import_canvas28.pointInBezierPath,
-  pointInMultiPolygon: () => import_canvas27.pointInMultiPolygon,
-  pointInRings: () => import_canvas27.pointInRings,
-  pointerPenSample: () => import_canvas33.pointerPenSample,
-  polygonArea: () => import_canvas27.polygonArea,
-  polygonBoolean: () => import_canvas27.polygonBoolean,
-  polygonToSvgPath: () => import_canvas27.polygonToSvgPath,
-  positionToSide: () => import_canvas26.positionToSide,
-  profileAlongPolyline: () => import_canvas33.profileAlongPolyline,
-  pruneCanvasTokenModes: () => import_canvas31.pruneCanvasTokenModes,
-  pushCanvasInstanceOverrides: () => import_canvas33.pushCanvasInstanceOverrides,
-  readAnimatableValue: () => import_canvas32.readAnimatableValue,
-  readNodeStyleProperty: () => import_canvas31.readNodeStyleProperty,
-  readStyleSize: () => import_canvas26.readStyleSize,
-  realClock: () => import_canvas29.realClock,
-  recordAnimationChanges: () => import_canvas32.recordAnimationChanges,
-  relayoutUpdates: () => import_canvas30.relayoutUpdates,
-  remapPastedNodes: () => import_canvas29.remapPastedNodes,
-  removeCanvasVariant: () => import_canvas33.removeCanvasVariant,
-  removeTrack: () => import_canvas32.removeTrack,
-  renameCanvasVariantProperty: () => import_canvas33.renameCanvasVariantProperty,
-  renameCanvasVariantValue: () => import_canvas33.renameCanvasVariantValue,
-  renderShapeBrushstroke: () => import_canvas33.renderShapeBrushstroke,
-  reorderNodes: () => import_canvas26.reorderNodes,
-  repositionNodesTo: () => import_canvas29.repositionNodesTo,
-  resetCanvasInstanceOverrides: () => import_canvas33.resetCanvasInstanceOverrides,
-  resizeHandleAxes: () => import_canvas25.resizeHandleAxes,
-  resolveCanvasGradient: () => import_canvas33.resolveCanvasGradient,
-  resolveCanvasTokens: () => import_canvas31.resolveCanvasTokens,
-  resolveEasing: () => import_canvas32.resolveEasing,
-  resolvePadding: () => import_canvas30.resolvePadding,
-  restoreCanvasMainComponent: () => import_canvas33.restoreCanvasMainComponent,
-  revertShapeCombination: () => import_canvas27.revertShapeCombination,
-  rgbToOklab: () => import_canvas32.rgbToOklab,
-  ringSignedArea: () => import_canvas27.ringSignedArea,
-  runMultiNodeTransition: () => import_canvas29.runMultiNodeTransition,
-  sampleAnimationFrames: () => import_canvas32.sampleAnimationFrames,
-  scaleKeyframes: () => import_canvas32.scaleKeyframes,
-  serializeCanvasNodes: () => import_canvas29.serializeCanvasNodes,
-  setCanvasComponentProperty: () => import_canvas33.setCanvasComponentProperty,
-  setCanvasInstanceProperties: () => import_canvas33.setCanvasInstanceProperties,
-  setCanvasTokenMode: () => import_canvas31.setCanvasTokenMode,
-  setCanvasVariantProperties: () => import_canvas33.setCanvasVariantProperties,
-  setKeyframe: () => import_canvas32.setKeyframe,
-  setKeyframeEasing: () => import_canvas32.setKeyframeEasing,
-  setMotionPath: () => import_canvas32.setMotionPath,
-  setTrackEnabled: () => import_canvas32.setTrackEnabled,
-  shapeNodeToBezierPath: () => import_canvas28.shapeNodeToBezierPath,
-  shapeNodeToPolygon: () => import_canvas27.shapeNodeToPolygon,
-  shapeToBezierPath: () => import_canvas28.shapeToBezierPath,
-  shapeToPolygon: () => import_canvas27.shapeToPolygon,
-  sideToPosition: () => import_canvas26.sideToPosition,
-  simplifyRing: () => import_canvas27.simplifyRing,
-  snapKeyframeDelta: () => import_canvas32.snapKeyframeDelta,
-  snapNodeDrag: () => import_canvas26.snapNodeDrag,
-  snapNodeResize: () => import_canvas25.snapNodeResize,
-  snapResize: () => import_canvas25.snapResize,
-  snapTimeToFrame: () => import_canvas32.snapTimeToFrame,
-  snapToGrid: () => import_canvas25.snapToGrid,
-  springAt: () => import_canvas32.springAt,
-  streamlinePoints: () => import_canvas33.streamlinePoints,
-  strokeOutlineRings: () => import_canvas28.strokeOutlineRings,
-  strokePointsToPathData: () => import_canvas33.strokePointsToPathData,
-  strokeToShapeNode: () => import_canvas33.strokeToShapeNode,
-  subtractPaths: () => import_canvas28.subtractPaths,
-  subtractPolygons: () => import_canvas27.subtractPolygons,
-  swapCanvasInstance: () => import_canvas33.swapCanvasInstance,
-  syncAllCanvasInstances: () => import_canvas33.syncAllCanvasInstances,
-  syncCanvasComponents: () => import_canvas33.syncCanvasComponents,
-  syncCanvasInstance: () => import_canvas33.syncCanvasInstance,
-  timeToX: () => import_canvas32.timeToX,
-  toBezierPath: () => import_canvas28.toBezierPath,
-  toWebAnimations: () => import_canvas32.toWebAnimations,
-  toggleLockNodes: () => import_canvas26.toggleLockNodes,
-  transformBezierPath: () => import_canvas28.transformBezierPath,
-  unionPolygons: () => import_canvas27.unionPolygons,
-  unitePaths: () => import_canvas28.unitePaths,
-  unlockNodes: () => import_canvas26.unlockNodes,
-  updateKeyframe: () => import_canvas32.updateKeyframe,
+  mixColorsOklab: () => import_canvas33.mixColorsOklab,
+  moveKeyframes: () => import_canvas33.moveKeyframes,
+  moveLayoutChild: () => import_canvas31.moveLayoutChild,
+  multiPolygonArea: () => import_canvas28.multiPolygonArea,
+  multiPolygonBounds: () => import_canvas28.multiPolygonBounds,
+  nearestHandlePositions: () => import_canvas27.nearestHandlePositions,
+  normalizeBezierPath: () => import_canvas29.normalizeBezierPath,
+  normalizeKeyframes: () => import_canvas33.normalizeKeyframes,
+  offsetPath: () => import_canvas29.offsetPath,
+  offsetShapeNodes: () => import_canvas29.offsetShapeNodes,
+  oklabToRgb: () => import_canvas33.oklabToRgb,
+  oppositePosition: () => import_canvas27.oppositePosition,
+  outlineShapeNodeStrokes: () => import_canvas29.outlineShapeNodeStrokes,
+  outlineStroke: () => import_canvas29.outlineStroke,
+  overlaps: () => import_canvas30.overlaps,
+  parseCanvasClipboardData: () => import_canvas30.parseCanvasClipboardData,
+  parseCanvasScenes: () => import_canvas27.parseCanvasScenes,
+  parseCssEasing: () => import_canvas33.parseCssEasing,
+  parseCssGradient: () => import_canvas34.parseCssGradient,
+  parseKeyframeClipboard: () => import_canvas33.parseKeyframeClipboard,
+  parseOklab: () => import_canvas33.parseOklab,
+  parseSvgPath: () => import_canvas28.parseSvgPath,
+  pasteKeyframes: () => import_canvas33.pasteKeyframes,
+  pathBoolean: () => import_canvas29.pathBoolean,
+  pathDataToPolyline: () => import_canvas34.pathDataToPolyline,
+  placeBeside: () => import_canvas30.placeBeside,
+  playWebAnimations: () => import_canvas33.playWebAnimations,
+  pointInBezierPath: () => import_canvas29.pointInBezierPath,
+  pointInMultiPolygon: () => import_canvas28.pointInMultiPolygon,
+  pointInRings: () => import_canvas28.pointInRings,
+  pointerPenSample: () => import_canvas34.pointerPenSample,
+  polygonArea: () => import_canvas28.polygonArea,
+  polygonBoolean: () => import_canvas28.polygonBoolean,
+  polygonToSvgPath: () => import_canvas28.polygonToSvgPath,
+  positionToSide: () => import_canvas27.positionToSide,
+  profileAlongPolyline: () => import_canvas34.profileAlongPolyline,
+  pruneCanvasTokenModes: () => import_canvas32.pruneCanvasTokenModes,
+  pushCanvasInstanceOverrides: () => import_canvas34.pushCanvasInstanceOverrides,
+  readAnimatableValue: () => import_canvas33.readAnimatableValue,
+  readNodeStyleProperty: () => import_canvas32.readNodeStyleProperty,
+  readStyleSize: () => import_canvas27.readStyleSize,
+  realClock: () => import_canvas30.realClock,
+  recordAnimationChanges: () => import_canvas33.recordAnimationChanges,
+  relayoutUpdates: () => import_canvas31.relayoutUpdates,
+  remapPastedNodes: () => import_canvas30.remapPastedNodes,
+  removeCanvasVariant: () => import_canvas34.removeCanvasVariant,
+  removeTrack: () => import_canvas33.removeTrack,
+  renameCanvasVariantProperty: () => import_canvas34.renameCanvasVariantProperty,
+  renameCanvasVariantValue: () => import_canvas34.renameCanvasVariantValue,
+  renderShapeBrushstroke: () => import_canvas34.renderShapeBrushstroke,
+  reorderNodes: () => import_canvas27.reorderNodes,
+  repositionNodesTo: () => import_canvas30.repositionNodesTo,
+  resetCanvasInstanceOverrides: () => import_canvas34.resetCanvasInstanceOverrides,
+  resizeHandleAxes: () => import_canvas26.resizeHandleAxes,
+  resolveCanvasGradient: () => import_canvas34.resolveCanvasGradient,
+  resolveCanvasTokens: () => import_canvas32.resolveCanvasTokens,
+  resolveEasing: () => import_canvas33.resolveEasing,
+  resolvePadding: () => import_canvas31.resolvePadding,
+  restoreCanvasMainComponent: () => import_canvas34.restoreCanvasMainComponent,
+  revertShapeCombination: () => import_canvas28.revertShapeCombination,
+  rgbToOklab: () => import_canvas33.rgbToOklab,
+  ringSignedArea: () => import_canvas28.ringSignedArea,
+  runMultiNodeTransition: () => import_canvas30.runMultiNodeTransition,
+  sampleAnimationFrames: () => import_canvas33.sampleAnimationFrames,
+  scaleKeyframes: () => import_canvas33.scaleKeyframes,
+  serializeCanvasNodes: () => import_canvas30.serializeCanvasNodes,
+  setCanvasComponentProperty: () => import_canvas34.setCanvasComponentProperty,
+  setCanvasInstanceProperties: () => import_canvas34.setCanvasInstanceProperties,
+  setCanvasTokenMode: () => import_canvas32.setCanvasTokenMode,
+  setCanvasVariantProperties: () => import_canvas34.setCanvasVariantProperties,
+  setKeyframe: () => import_canvas33.setKeyframe,
+  setKeyframeEasing: () => import_canvas33.setKeyframeEasing,
+  setMotionPath: () => import_canvas33.setMotionPath,
+  setTrackEnabled: () => import_canvas33.setTrackEnabled,
+  shapeNodeToBezierPath: () => import_canvas29.shapeNodeToBezierPath,
+  shapeNodeToPolygon: () => import_canvas28.shapeNodeToPolygon,
+  shapeToBezierPath: () => import_canvas29.shapeToBezierPath,
+  shapeToPolygon: () => import_canvas28.shapeToPolygon,
+  sideToPosition: () => import_canvas27.sideToPosition,
+  simplifyRing: () => import_canvas28.simplifyRing,
+  snapKeyframeDelta: () => import_canvas33.snapKeyframeDelta,
+  snapNodeDrag: () => import_canvas27.snapNodeDrag,
+  snapNodeResize: () => import_canvas26.snapNodeResize,
+  snapResize: () => import_canvas26.snapResize,
+  snapTimeToFrame: () => import_canvas33.snapTimeToFrame,
+  snapToGrid: () => import_canvas26.snapToGrid,
+  springAt: () => import_canvas33.springAt,
+  streamlinePoints: () => import_canvas34.streamlinePoints,
+  strokeOutlineRings: () => import_canvas29.strokeOutlineRings,
+  strokePointsToPathData: () => import_canvas34.strokePointsToPathData,
+  strokeToShapeNode: () => import_canvas34.strokeToShapeNode,
+  subtractPaths: () => import_canvas29.subtractPaths,
+  subtractPolygons: () => import_canvas28.subtractPolygons,
+  swapCanvasInstance: () => import_canvas34.swapCanvasInstance,
+  syncAllCanvasInstances: () => import_canvas34.syncAllCanvasInstances,
+  syncCanvasComponents: () => import_canvas34.syncCanvasComponents,
+  syncCanvasInstance: () => import_canvas34.syncCanvasInstance,
+  timeToX: () => import_canvas33.timeToX,
+  toBezierPath: () => import_canvas29.toBezierPath,
+  toWebAnimations: () => import_canvas33.toWebAnimations,
+  toggleLockNodes: () => import_canvas27.toggleLockNodes,
+  transformBezierPath: () => import_canvas29.transformBezierPath,
+  unionPolygons: () => import_canvas28.unionPolygons,
+  unitePaths: () => import_canvas29.unitePaths,
+  unlockNodes: () => import_canvas27.unlockNodes,
+  updateKeyframe: () => import_canvas33.updateKeyframe,
   useCanvasAnimation: () => useCanvasAnimation,
   useCanvasArrange: () => useCanvasArrange,
   useCanvasArrangeShortcuts: () => useCanvasArrangeShortcuts,
@@ -355,6 +368,9 @@ __export(canvas_exports, {
   useCanvasComponents: () => useCanvasComponents,
   useCanvasDocking: () => useCanvasDocking,
   useCanvasDraw: () => useCanvasDraw,
+  useCanvasEffects: () => useCanvasEffects,
+  useCanvasEffectsProviderContext: () => useCanvasEffectsProviderContext,
+  useCanvasEffectsTools: () => useCanvasEffectsTools,
   useCanvasExplosion: () => useCanvasExplosion,
   useCanvasGraph: () => useCanvasGraph,
   useCanvasLayout: () => useCanvasLayout,
@@ -369,14 +385,14 @@ __export(canvas_exports, {
   usePresenceState: () => usePresenceState,
   useShapeBrushstroke: () => useShapeBrushstroke,
   useStreamingCanvas: () => useStreamingCanvas,
-  validateCanvasBrush: () => import_canvas33.validateCanvasBrush,
-  withNodeAnimation: () => import_canvas32.withNodeAnimation,
-  withStyleSize: () => import_canvas26.withStyleSize,
-  wouldCreateComponentCycle: () => import_canvas33.wouldCreateComponentCycle,
-  wrapAnimationTime: () => import_canvas32.wrapAnimationTime,
-  writeNodeStyleProperty: () => import_canvas31.writeNodeStyleProperty,
-  xToTime: () => import_canvas32.xToTime,
-  xorPolygons: () => import_canvas27.xorPolygons
+  validateCanvasBrush: () => import_canvas34.validateCanvasBrush,
+  withNodeAnimation: () => import_canvas33.withNodeAnimation,
+  withStyleSize: () => import_canvas27.withStyleSize,
+  wouldCreateComponentCycle: () => import_canvas34.wouldCreateComponentCycle,
+  wrapAnimationTime: () => import_canvas33.wrapAnimationTime,
+  writeNodeStyleProperty: () => import_canvas32.writeNodeStyleProperty,
+  xToTime: () => import_canvas33.xToTime,
+  xorPolygons: () => import_canvas28.xorPolygons
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -1204,9 +1220,13 @@ function useCanvasScenes(options = {}) {
   );
   const actions = (0, import_react9.useMemo)(() => {
     const show = (scene) => {
-      if (scene) {
-        optionsRef.current.setViewport?.(scene.viewport, { duration: optionsRef.current.duration ?? 300 });
-      }
+      if (!scene) return scene;
+      const o = optionsRef.current;
+      const provider = o.transitions?.provider;
+      const element = o.transitions?.element();
+      if (scene.transition && provider && element) {
+        void (0, import_canvas7.transitionCanvasView)({ provider, transition: scene.transition, element, jump: () => o.setViewport?.(scene.viewport, { duration: 0 }) });
+      } else o.setViewport?.(scene.viewport, { duration: o.duration ?? 300 });
       return scene;
     };
     return {
@@ -1624,11 +1644,11 @@ function useCanvasMeasure(options) {
 }
 
 // src/canvas/index.ts
-var import_canvas25 = require("@pixerate/editor/canvas");
 var import_canvas26 = require("@pixerate/editor/canvas");
+var import_canvas27 = require("@pixerate/editor/canvas");
 
 // src/canvas/ShapeNode.tsx
-var import_canvas13 = require("@pixerate/editor/canvas");
+var import_canvas14 = require("@pixerate/editor/canvas");
 
 // src/canvas/useShapeBrushstroke.tsx
 var import_react14 = require("react");
@@ -1682,14 +1702,708 @@ function useCanvasBrushes() {
   return (0, import_react14.useMemo)(() => state, [state]);
 }
 
-// src/canvas/ShapeNode.tsx
+// src/canvas/CanvasEffects.tsx
+var import_react20 = require("react");
+var import_canvas13 = require("@pixerate/editor/canvas");
+
+// src/effects/useEffects.ts
+var import_react15 = require("react");
+function useEffectDescription(provider, effect) {
+  const [state, setState] = (0, import_react15.useState)({ key: "", description: null, error: null });
+  const key = provider && effect ? `${provider.id}:${effect}` : "";
+  (0, import_react15.useEffect)(() => {
+    if (!provider || !effect) return;
+    let live = true;
+    Promise.resolve().then(() => provider.describe(effect)).then(
+      (description) => live && setState({ key, description, error: null }),
+      (e) => live && setState({ key, description: null, error: e instanceof Error ? e.message : String(e) })
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider, effect, key]);
+  return state.key === key ? { description: state.description, error: state.error } : { description: null, error: null };
+}
+
+// src/effects/EffectThumbnail.tsx
+var import_react16 = require("react");
+var import_effects = require("@pixerate/editor/effects");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function EffectThumbnail({ provider, effect, width = 96, height = 54, className = "" }) {
+  const ref = (0, import_react16.useRef)(null);
+  const [failed, setFailed] = (0, import_react16.useState)(effect.kind === "motion");
+  (0, import_react16.useEffect)(() => {
+    if (effect.kind === "motion") return;
+    let live = true;
+    (0, import_effects.renderEffectThumbnail)(provider, effect, { width, height }).then(
+      (pixels) => {
+        const ctx = live ? ref.current?.getContext("2d") : null;
+        if (!ctx || typeof ImageData === "undefined") return;
+        ctx.putImageData(new ImageData(new Uint8ClampedArray(pixels.data), pixels.width, pixels.height), 0, 0);
+      },
+      () => live && setFailed(true)
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider, effect, width, height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: `relative overflow-hidden rounded border border-border bg-[repeating-conic-gradient(#8884_0_25%,transparent_0_50%)] bg-[length:12px_12px] ${className}`,
+      style: { aspectRatio: `${width} / ${height}` },
+      "data-effect-thumbnail": effect.id,
+      children: failed ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "absolute inset-0 flex items-center justify-center text-[10px] text-muted-foreground", children: effect.kind === "motion" ? "Motion" : "No preview" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("canvas", { ref, width, height, className: "h-full w-full", "aria-hidden": "true" })
+    }
+  );
+}
+
+// src/effects/EffectsBrowser.tsx
+var import_react17 = require("react");
+var import_effects2 = require("@pixerate/editor/effects");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function EffectsBrowser({ provider, uses, kinds, onPick, thumbnails = true, title = "Effects", className = "" }) {
+  const [all, setAll] = (0, import_react17.useState)([]);
+  const [query, setQuery] = (0, import_react17.useState)("");
+  const [category, setCategory] = (0, import_react17.useState)("");
+  const [use, setUse] = (0, import_react17.useState)("");
+  const [error, setError] = (0, import_react17.useState)(null);
+  (0, import_react17.useEffect)(() => {
+    if (!provider) return setAll([]);
+    let live = true;
+    Promise.resolve().then(() => provider.list()).then(
+      (list) => live && (setAll(list), setError(null)),
+      (e) => live && setError(e instanceof Error ? e.message : String(e))
+    );
+    return () => {
+      live = false;
+    };
+  }, [provider]);
+  const [found, setFound] = (0, import_react17.useState)([]);
+  (0, import_react17.useEffect)(() => {
+    if (!provider) return setFound([]);
+    let live = true;
+    Promise.resolve().then(() => provider.search(query, { ...category ? { category } : {}, ...use ? { use } : {} })).then((list) => live && setFound(list), () => live && setFound([]));
+    return () => {
+      live = false;
+    };
+  }, [provider, query, category, use]);
+  const allowed = (e) => (!kinds || kinds.includes(e.kind)) && (uses ? e.kind !== "motion" || uses.includes("motion") : e.kind !== "motion") && (!uses || e.uses.some((u) => uses.includes(u)));
+  const categories = (0, import_react17.useMemo)(() => [...new Set(all.filter(allowed).map((e) => e.category))], [all, uses, kinds]);
+  const shown = found.filter(allowed);
+  if (!provider)
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `rounded-md border border-dashed border-border p-3 text-xs text-muted-foreground ${className}`, "data-effects-browser": "", "data-effects-unavailable": "", children: "No effects provider is registered, so effects cannot be added. Effects already in the document are kept." });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: `flex flex-col gap-2 ${className}`, "data-effects-browser": "", "aria-label": "Effects browser", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "text-xs font-semibold", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          type: "search",
+          className: "min-w-0 flex-1 rounded border border-border bg-transparent px-1.5 py-0.5 text-xs",
+          placeholder: "Search effects",
+          "aria-label": "Search effects",
+          value: query,
+          onChange: (e) => setQuery(e.currentTarget.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Category", value: category, onChange: (e) => setCategory(e.currentTarget.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: "All categories" }),
+        categories.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: c, children: c }, c))
+      ] }),
+      uses && uses.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("select", { className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs", "aria-label": "Use", value: use, onChange: (e) => setUse(e.currentTarget.value), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: "Any use" }),
+        uses.map((u) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: u, children: import_effects2.EFFECT_USE_LABELS[u] }, u))
+      ] })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "grid max-h-96 grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] gap-1.5 overflow-y-auto", role: "list", children: shown.map((e) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full flex-col gap-1 rounded border border-transparent p-1 text-left hover:border-border focus-visible:border-border",
+        title: e.description ?? e.name,
+        "data-effect-id": e.id,
+        onClick: () => onPick(e),
+        children: [
+          thumbnails && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EffectThumbnail, { provider, effect: e }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate text-[11px] font-medium", children: e.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate text-[10px] text-muted-foreground", children: e.uses.map((u) => import_effects2.EFFECT_USE_LABELS[u]).join(" \xB7 ") })
+        ]
+      }
+    ) }, e.id)) }),
+    !shown.length && !error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects match." })
+  ] });
+}
+
+// src/effects/EffectParameters.tsx
+var import_react19 = __toESM(require("react"), 1);
+var import_effects3 = require("@pixerate/editor/effects");
+var import_parameters2 = require("@pixerate/editor/parameters");
+
+// src/parameters/fields.tsx
+var import_react18 = require("react");
+var import_parameters = require("@pixerate/editor/parameters");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var parameterInputClass = "h-7 w-full min-w-0 rounded-md border border-input bg-background px-2 text-xs text-foreground tabular-nums focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50";
+var parameterButtonClass = "inline-flex h-7 items-center justify-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
+var rangeClass = "h-4 w-full min-w-0 flex-1 cursor-pointer accent-primary disabled:cursor-not-allowed disabled:opacity-50";
+function ParameterCommitInput({ value, onCommit, multiline, className, onKeyDown, ...rest }) {
+  const commit = (el) => {
+    if (el.value !== value) onCommit(el.value, el);
+  };
+  const keyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Enter" && (!multiline || e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      commit(e.currentTarget);
+    }
+    if (e.key === "Escape") e.currentTarget.value = value;
+  };
+  const props = {
+    defaultValue: value,
+    className: className ?? parameterInputClass,
+    onBlur: (e) => commit(e.currentTarget),
+    onKeyDown: keyDown,
+    ...rest
+  };
+  return multiline ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("textarea", { ...props, className: `${props.className} h-auto min-h-[3.5rem] py-1` }, value) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "text", ...props }, value);
+}
+var plainNumber = (field, value) => (0, import_parameters.formatParameterNumber)({ ...field, unit: void 0 }, value);
+function ParameterNumberInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  id,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ParameterCommitInput,
+      {
+        id,
+        inputMode: "decimal",
+        "aria-label": ariaLabel ?? (0, import_parameters.parameterLabel)(field),
+        value: plainNumber(field, value),
+        disabled: disabled || field.readOnly,
+        className: `${parameterInputClass} ${field.unit ? "pr-6" : ""}`,
+        onCommit: (text, input) => {
+          const n = (0, import_parameters.parseParameterNumberInput)(field, text);
+          if (n === null || n === value) input.value = plainNumber(field, value);
+          else onChange(n);
+        },
+        onKeyDown: (e) => {
+          if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+          e.preventDefault();
+          const step = (0, import_parameters.parameterStep)(field) * (e.shiftKey ? 10 : 1);
+          onChange((0, import_parameters.clampParameterNumber)(field, value + (e.key === "ArrowUp" ? step : -step)));
+        }
+      }
+    ),
+    field.unit && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground", children: field.unit })
+  ] });
+}
+function ParameterSlider(props) {
+  const { field, value, onChange, onGestureStart, onGestureEnd, disabled } = props;
+  const dragging = (0, import_react18.useRef)(false);
+  const end = () => {
+    if (!dragging.current) return;
+    dragging.current = false;
+    onGestureEnd?.();
+  };
+  if (!(0, import_parameters.isSliderField)(field)) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ParameterNumberInput, { ...props });
+  const step = (0, import_parameters.parameterStep)(field);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        type: "range",
+        "aria-label": (0, import_parameters.parameterLabel)(field),
+        "aria-valuetext": (0, import_parameters.formatParameterNumber)(field, value),
+        min: field.min,
+        max: field.max,
+        step,
+        value,
+        disabled: disabled || field.readOnly,
+        className: rangeClass,
+        onPointerDown: () => {
+          if (dragging.current) return;
+          dragging.current = true;
+          onGestureStart?.();
+        },
+        onPointerUp: end,
+        onPointerCancel: end,
+        onBlur: end,
+        onChange: (e) => onChange((0, import_parameters.clampParameterNumber)(field, Number(e.target.value)))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-20 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ParameterNumberInput, { ...props, id: props.id, "aria-label": `${(0, import_parameters.parameterLabel)(field)} value` }) })
+  ] });
+}
+function ParameterToggle({ field, value, onChange, disabled, id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      id,
+      "aria-checked": value,
+      "aria-label": (0, import_parameters.parameterLabel)(field),
+      disabled: disabled || field.readOnly,
+      onClick: () => onChange(!value),
+      className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:opacity-50 ${value ? "bg-primary" : "bg-muted"}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "span",
+        {
+          className: `pointer-events-none block h-4 w-4 rounded-full bg-background shadow transition-transform ${value ? "translate-x-4" : "translate-x-0.5"}`
+        }
+      )
+    }
+  );
+}
+function ParameterSelect({ field, value, onChange, disabled, id }) {
+  const options = (0, import_parameters.getChoiceOptions)(field);
+  const off = disabled || field.readOnly;
+  if (field.control === "segmented") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { role: "radiogroup", "aria-label": (0, import_parameters.parameterLabel)(field), className: "inline-flex flex-wrap rounded-md border border-input bg-muted p-0.5", children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": o.value === value,
+        title: o.description,
+        disabled: off,
+        onClick: () => onChange(o.value),
+        className: `rounded px-2 py-0.5 text-xs disabled:opacity-50 ${o.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+        children: (0, import_parameters.choiceOptionLabel)(o)
+      },
+      String(o.value)
+    )) });
+  }
+  const index = options.findIndex((o) => o.value === value);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "select",
+    {
+      id,
+      "aria-label": (0, import_parameters.parameterLabel)(field),
+      value: String(index),
+      disabled: off,
+      onChange: (e) => {
+        const option = options[Number(e.target.value)];
+        if (option) onChange(option.value);
+      },
+      className: parameterInputClass,
+      children: options.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: String(i), title: o.description, children: (0, import_parameters.choiceOptionLabel)(o) }, String(o.value)))
+    }
+  );
+}
+function ParameterColor({ field, value, onChange, onGestureStart, onGestureEnd, disabled, id }) {
+  const picking = (0, import_react18.useRef)(false);
+  const alpha = !!field.alpha;
+  const hex = (0, import_parameters.normalizeHexColor)(value, true) ?? "#000000ff";
+  const rgb = hex.slice(0, 7);
+  const a = hex.slice(7);
+  const off = disabled || field.readOnly;
+  const start = () => {
+    if (picking.current) return;
+    picking.current = true;
+    onGestureStart?.();
+  };
+  const end = () => {
+    if (!picking.current) return;
+    picking.current = false;
+    onGestureEnd?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative h-7 w-9 shrink-0 overflow-hidden rounded-md border border-input bg-[repeating-conic-gradient(#d4d4d8_0_25%,#fff_0_50%)] bg-[length:8px_8px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute inset-0", style: { background: alpha ? hex : rgb } }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            type: "color",
+            "aria-label": (0, import_parameters.parameterLabel)(field),
+            value: rgb,
+            disabled: off,
+            className: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+            onChange: (e) => {
+              start();
+              onChange(alpha ? `${e.target.value}${a}` : e.target.value);
+            },
+            onBlur: end
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ParameterCommitInput,
+        {
+          id,
+          "aria-label": `${(0, import_parameters.parameterLabel)(field)} hex`,
+          value: alpha ? hex : rgb,
+          disabled: off,
+          spellCheck: false,
+          className: `${parameterInputClass} font-mono`,
+          onCommit: (text) => {
+            const next = (0, import_parameters.normalizeHexColor)(text, alpha);
+            if (next) onChange(next);
+          }
+        }
+      )
+    ] }),
+    alpha && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        type: "range",
+        "aria-label": `${(0, import_parameters.parameterLabel)(field)} opacity`,
+        min: 0,
+        max: 255,
+        step: 1,
+        value: parseInt(a, 16),
+        disabled: off,
+        className: rangeClass,
+        onPointerDown: start,
+        onPointerUp: end,
+        onPointerCancel: end,
+        onBlur: end,
+        onChange: (e) => onChange(`${rgb}${Number(e.target.value).toString(16).padStart(2, "0")}`)
+      }
+    ),
+    field.swatches && field.swatches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-1", children: field.swatches.map((s) => {
+      const swatch = (0, import_parameters.normalizeHexColor)(s, alpha);
+      if (!swatch) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          title: swatch,
+          "aria-label": `${(0, import_parameters.parameterLabel)(field)} ${swatch}`,
+          "aria-pressed": swatch === (alpha ? hex : rgb),
+          disabled: off,
+          onClick: () => onChange(swatch),
+          className: "h-5 w-5 rounded border border-input aria-pressed:ring-1 aria-pressed:ring-primary",
+          style: { background: swatch }
+        },
+        s
+      );
+    }) })
+  ] });
+}
+function ParameterVector({ field, value, onChange, disabled, id }) {
+  const size = (0, import_parameters.vectorSize)(field);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid gap-1.5", style: { gridTemplateColumns: `repeat(${size}, minmax(0, 1fr))` }, children: Array.from({ length: size }, (_, i) => {
+    const component = (0, import_parameters.vectorComponentField)(field, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex min-w-0 items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-3 shrink-0 text-[10px] uppercase text-muted-foreground", children: component.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ParameterNumberInput,
+        {
+          field: component,
+          value: value[i] ?? 0,
+          id: i === 0 ? id : void 0,
+          "aria-label": `${(0, import_parameters.parameterLabel)(field)} ${component.label}`,
+          disabled: disabled || field.readOnly,
+          onChange: (n) => onChange(Array.from({ length: size }, (_2, j) => j === i ? n : value[j] ?? 0))
+        }
+      )
+    ] }, i);
+  }) });
+}
+function ParameterImage({ field, value, onChange, disabled, id, resolveFile }) {
+  const off = disabled || field.readOnly;
+  const name = (0, import_parameters.parameterLabel)(field);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input bg-muted", children: value ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: value, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "None" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ParameterCommitInput,
+          {
+            id,
+            "aria-label": `${name} URL`,
+            placeholder: "Image URL",
+            value: value.startsWith("data:") ? "" : value,
+            disabled: off,
+            onCommit: (text) => onChange(text.trim())
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-1", children: [
+          resolveFile && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: `${parameterButtonClass} cursor-pointer ${off ? "pointer-events-none opacity-50" : ""}`, children: [
+            "Choose file\u2026",
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "input",
+              {
+                type: "file",
+                className: "sr-only",
+                accept: field.accept ?? "image/*",
+                disabled: off,
+                "aria-label": `${name} file`,
+                onChange: async (e) => {
+                  const file = e.target.files?.[0];
+                  e.target.value = "";
+                  if (file) onChange(await resolveFile(file));
+                }
+              }
+            )
+          ] }),
+          value && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: parameterButtonClass, disabled: off, onClick: () => onChange(""), "aria-label": `Clear ${name}`, children: "Clear" })
+        ] })
+      ] })
+    ] }),
+    field.options && field.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-1", children: field.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        title: o.label ?? o.url,
+        "aria-label": o.label ?? o.url,
+        "aria-pressed": o.url === value,
+        disabled: off,
+        onClick: () => onChange(o.url),
+        className: "h-9 w-12 overflow-hidden rounded border border-input aria-pressed:ring-2 aria-pressed:ring-primary",
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: o.url, alt: "", className: "h-full w-full object-cover" })
+      },
+      o.url
+    )) })
+  ] });
+}
+function ParameterText({ field, value, onChange, disabled, id }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ParameterCommitInput,
+    {
+      id,
+      "aria-label": (0, import_parameters.parameterLabel)(field),
+      multiline: field.multiline,
+      placeholder: field.placeholder,
+      maxLength: field.maxLength,
+      value,
+      disabled: disabled || field.readOnly,
+      onCommit: onChange
+    }
+  );
+}
+function ParameterFieldControl({ field, value, onChange, resolveFile, ...rest }) {
+  const set = onChange;
+  switch (field.type) {
+    case "number":
+    case "int":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ParameterSlider, { field, value, onChange: set, ...rest });
+    case "boolean":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ParameterToggle, { field, value, onChange: set, ...rest });
+    case "choice":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ParameterSelect, { field, value, onChange: set, ...rest });
+    case "color":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ParameterColor, { field, value, onChange: set, ...rest });
+    case "vector":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ParameterVector, { field, value, onChange: set, ...rest });
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ParameterImage, { field, value, onChange: set, resolveFile, ...rest });
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ParameterText, { field, value, onChange: set, ...rest });
+  }
+}
+
+// src/effects/EffectParameters.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function EffectParameters({ description, values, onChange, onReset, keyframed, onPreset, disabled = false, className = "" }) {
+  const fields = (0, import_react19.useMemo)(() => (0, import_effects3.effectParameterFields)(description), [description]);
+  const idBase = (0, import_react19.useId)();
+  const gesture = import_react19.default.useRef(null);
+  const count = import_react19.default.useRef(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `space-y-2 ${className}`, "data-effect-parameters": description.id, children: [
+    onPreset && description.presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "select",
+      {
+        className: "w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs",
+        "aria-label": `${description.name} presets`,
+        value: "",
+        disabled,
+        onChange: (e) => {
+          const preset = description.presets.find((p) => p.name === e.currentTarget.value);
+          if (preset) onPreset({ ...description.defaults, ...preset.values });
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: "Presets\u2026" }),
+          description.presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: p.name, children: p.name }, p.name))
+        ]
+      }
+    ),
+    fields.map((field) => {
+      const label = (0, import_parameters2.parameterLabel)(field);
+      const inputId = `${idBase}-${field.id}`;
+      const keyed = keyframed?.has(field.id) ?? false;
+      const value = (0, import_effects3.effectFieldValue)(field, values[field.id]);
+      const changed = !keyed && !(0, import_parameters2.parameterValuesEqual)(value, field.default);
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-1", "data-effect-control": field.id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: inputId, className: "min-w-0 flex-1 truncate text-xs font-medium", title: field.description, children: label }),
+          keyed && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[10px] text-muted-foreground", children: "keyframed" }),
+          onReset && changed && !disabled && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "rounded px-1 text-[11px] text-muted-foreground hover:text-foreground", "aria-label": `Reset ${label}`, onClick: () => onReset(field.id), children: "\u21BA" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ParameterFieldControl,
+          {
+            field,
+            value,
+            id: inputId,
+            disabled: disabled || keyed,
+            onChange: (v) => onChange(field.id, v, gesture.current),
+            onGestureStart: () => gesture.current = `${idBase}:${field.id}:${++count.current}`,
+            onGestureEnd: () => gesture.current = null
+          }
+        )
+      ] }, field.id);
+    }),
+    !fields.length && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No controls." })
+  ] });
+}
+
+// src/canvas/CanvasEffects.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ProviderContext = (0, import_react20.createContext)(null);
+function CanvasEffectsProvider({ provider, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ProviderContext.Provider, { value: provider ?? null, children });
+}
+var useCanvasEffectsProviderContext = () => (0, import_react20.useContext)(ProviderContext);
+function CanvasNodeEffectLayer({ effect, width, height, clipPath, clipTransform }) {
+  const provider = useCanvasEffectsProviderContext();
+  const ref = (0, import_react20.useRef)(null);
+  const [failed, setFailed] = (0, import_react20.useState)(false);
+  const dpr = typeof window !== "undefined" ? Math.min(2, window.devicePixelRatio || 1) : 1;
+  const pw = Math.max(1, Math.round(width * dpr));
+  const ph = Math.max(1, Math.round(height * dpr));
+  const key = JSON.stringify(effect);
+  (0, import_react20.useEffect)(() => {
+    const canvas2 = ref.current;
+    if (!provider || !canvas2) return;
+    setFailed(false);
+    const run = (0, import_canvas13.runCanvasNodeEffect)({ provider, effect, target: canvas2, onError: () => setFailed(true) });
+    return () => run.stop();
+  }, [provider, key, pw, ph]);
+  const clipId = (0, import_react20.useMemo)(() => `pixerate-effect-clip-${Math.random().toString(36).slice(2)}`, []);
+  if (!provider || failed || !(width > 0 && height > 0)) return null;
+  const style = { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", opacity: effect.opacity ?? 1 };
+  const canvas = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("canvas", { ref, width: pw, height: ph, style: { width: "100%", height: "100%", display: "block" }, "data-canvas-effect": effect.effect });
+  if (effect.mode === "overlay" || !clipPath) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style, children: canvas });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { style, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: clipPath, transform: clipTransform }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("foreignObject", { x: 0, y: 0, width, height, clipPath: `url(#${clipId})`, children: canvas })
+  ] });
+}
+function useCanvasEffects(options) {
+  const opts = (0, import_react20.useRef)(options);
+  opts.current = options;
+  const controller = (0, import_react20.useMemo)(
+    () => (0, import_canvas13.createCanvasEffectsController)({
+      getNodes: () => opts.current.getNodes(),
+      setNodes: (n) => opts.current.setNodes(n),
+      history: { execute: (c) => opts.current.history ? opts.current.history.execute(c) : c.execute() },
+      get scenes() {
+        return opts.current.scenes;
+      }
+    }),
+    []
+  );
+  (0, import_react20.useEffect)(() => {
+    if (!options.effects) return;
+    return controller.useEffects(options.effects);
+  }, [controller, options.effects]);
+  return controller;
+}
+function useCanvasEffectsTools(registry, controller, options = {}) {
+  const { id, namespace, readOnly, subscribe } = options;
+  (0, import_react20.useEffect)(() => {
+    if (!registry) return;
+    return registry.register((0, import_canvas13.createCanvasEffectsToolProvider)(controller, { id, namespace, readOnly, subscribe }));
+  }, [registry, controller, id, namespace, readOnly, subscribe]);
+}
+var btn = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
+function Controls({ controller, nodeId, effect }) {
+  const { description, error } = useEffectDescription(controller.effectsProvider, effect.effect);
+  const [message, setMessage] = (0, import_react20.useState)(null);
+  const run = (work) => void work.then(() => setMessage(null), (e) => setMessage(e instanceof Error ? e.message : String(e)));
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-[11px] text-amber-500", children: error });
+  if (!description) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "Loading\u2026" });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      EffectParameters,
+      {
+        description,
+        values: effect.values,
+        onChange: (k, v) => run(controller.updateNodeEffect(nodeId, { values: { [k]: v } })),
+        onReset: (k) => run(controller.updateNodeEffect(nodeId, { values: { [k]: null } })),
+        onPreset: (v) => run(controller.updateNodeEffect(nodeId, { values: v }))
+      }
+    ),
+    message && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+  ] });
+}
+function CanvasEffectsPanel({ controller, nodeId, shape, sceneId, className = "" }) {
+  const [, setTick] = (0, import_react20.useState)(0);
+  (0, import_react20.useEffect)(() => controller.effects.subscribe(() => setTick((n) => n + 1)), [controller]);
+  const provider = controller.effectsProvider;
+  const [browse, setBrowse] = (0, import_react20.useState)(null);
+  const [message, setMessage] = (0, import_react20.useState)(null);
+  const run = (work) => {
+    setMessage(null);
+    Promise.resolve().then(work).then(() => setTick((n) => n + 1), (e) => setMessage(e instanceof Error ? e.message : String(e)));
+  };
+  const effect = (0, import_canvas13.isShapeDescription)(shape) ? shape.effect : void 0;
+  const transition = sceneId ? controller.sceneTransition(sceneId) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: `flex flex-col gap-2 text-xs ${className}`, "aria-label": "Canvas effects", "data-canvas-effects": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex-1 font-semibold", children: "Effects" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: btn, disabled: !provider || !nodeId || !shape, "aria-pressed": browse === "fill", onClick: () => setBrowse(browse === "fill" ? null : "fill"), children: "Fill\u2026" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: btn, disabled: !provider || !nodeId || !shape, "aria-pressed": browse === "overlay", onClick: () => setBrowse(browse === "overlay" ? null : "overlay"), children: "Overlay\u2026" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: btn, disabled: !provider || !sceneId, "aria-pressed": browse === "transition", onClick: () => setBrowse(browse === "transition" ? null : "transition"), children: "Scene transition\u2026" })
+    ] }),
+    !provider && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-[11px] text-muted-foreground", children: "No effects provider is registered. Effects on the canvas are kept." }),
+    browse === "fill" && nodeId && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EffectsBrowser, { provider, uses: ["generator", "interactive"], title: "Fills", onPick: (e) => (setBrowse(null), run(() => controller.applyNodeEffect(nodeId, e.id, { mode: "fill" }))) }),
+    browse === "overlay" && nodeId && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EffectsBrowser, { provider, uses: ["overlay", "title", "interactive", "generator"], title: "Overlays", onPick: (e) => (setBrowse(null), run(() => controller.applyNodeEffect(nodeId, e.id, { mode: "overlay" }))) }),
+    browse === "transition" && sceneId && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EffectsBrowser, { provider, uses: ["transition"], title: "Transitions", onPick: (e) => (setBrowse(null), run(() => controller.setSceneTransition(sceneId, e.id))) }),
+    effect && nodeId && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-1 rounded border border-border p-1", "data-canvas-node-effect": nodeId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "min-w-0 flex-1 truncate font-medium", children: [
+          effect.name ?? effect.effect,
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-muted-foreground", children: [
+            "\xB7 ",
+            effect.mode
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { type: "checkbox", checked: effect.playing !== false, "aria-label": "Play", onChange: (e) => {
+            const playing = e.currentTarget.checked;
+            run(() => controller.updateNodeEffect(nodeId, { playing }));
+          } }),
+          " Play"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: btn, "aria-label": "Remove effect", onClick: () => run(() => controller.removeNodeEffect(nodeId)), children: "\u2715" })
+      ] }),
+      provider && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Controls, { controller, nodeId, effect })
+    ] }),
+    sceneId && transition && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", "data-canvas-scene-transition": sceneId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
+        "Into scene: ",
+        transition.name ?? transition.effect,
+        " (",
+        transition.duration ?? 600,
+        " ms)"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: btn, "aria-label": "Remove transition", onClick: () => run(() => controller.setSceneTransition(sceneId, null)), children: "\u2715" })
+    ] }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { role: "alert", className: "text-[11px] text-destructive", children: message })
+  ] });
+}
+
+// src/canvas/ShapeNode.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ShapeNode({ id, data, width, height, selected, className = "", children }) {
   const shape = data?.shape;
-  const brushImage = useShapeBrushstroke((0, import_canvas13.isShapeDescription)(shape) ? shape : null, width, height);
-  if (!(0, import_canvas13.isShapeDescription)(shape)) return null;
-  const render = (0, import_canvas13.getShapeRenderData)(shape, { width, height }, { id: id || data?.id });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  const brushImage = useShapeBrushstroke((0, import_canvas14.isShapeDescription)(shape) ? shape : null, width, height);
+  if (!(0, import_canvas14.isShapeDescription)(shape)) return null;
+  const render = (0, import_canvas14.getShapeRenderData)(shape, { width, height }, { id: id || data?.id });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: `pixerate-shape-node ${className}`.trim(),
@@ -1697,7 +2411,7 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
       "data-selected": selected ? "true" : void 0,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "svg",
           {
             viewBox: render.viewBox,
@@ -1707,13 +2421,13 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
             style: { display: "block", overflow: "visible" },
             "aria-hidden": "true",
             children: [
-              (render.fillGradient || render.strokeGradient) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("defs", { children: [
-                render.fillGradient && render.fillGradient.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("linearGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
-                render.fillGradient && render.fillGradient.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("radialGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
-                render.strokeGradient && render.strokeGradient.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("linearGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
-                render.strokeGradient && render.strokeGradient.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("radialGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) })
+              (render.fillGradient || render.strokeGradient) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("defs", { children: [
+                render.fillGradient && render.fillGradient.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("linearGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.fillGradient && render.fillGradient.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("radialGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.strokeGradient && render.strokeGradient.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("linearGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.strokeGradient && render.strokeGradient.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("radialGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) })
               ] }),
-              brushImage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { transform: render.transform, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              brushImage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: render.transform, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "image",
                 {
                   className: "pixerate-shape-brushstroke",
@@ -1725,7 +2439,7 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
                   preserveAspectRatio: "none",
                   opacity: render.opacity
                 }
-              ) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "path",
                 {
                   d: render.d,
@@ -1743,6 +2457,7 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
             ]
           }
         ),
+        shape.effect && width && height ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CanvasNodeEffectLayer, { effect: shape.effect, width, height, clipPath: render.d, clipTransform: render.transform }) : null,
         children
       ]
     }
@@ -1750,22 +2465,22 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
 }
 
 // src/canvas/index.ts
-var import_canvas27 = require("@pixerate/editor/canvas");
 var import_canvas28 = require("@pixerate/editor/canvas");
 var import_canvas29 = require("@pixerate/editor/canvas");
 var import_canvas30 = require("@pixerate/editor/canvas");
+var import_canvas31 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasAutoLayout.ts
-var import_react15 = require("react");
-var import_canvas14 = require("@pixerate/editor/canvas");
+var import_react21 = require("react");
+var import_canvas15 = require("@pixerate/editor/canvas");
 function useCanvasAutoLayout(options) {
-  const [guides, setGuides] = (0, import_react15.useState)([]);
-  const nodesRef = (0, import_react15.useRef)(options.nodes);
+  const [guides, setGuides] = (0, import_react21.useState)([]);
+  const nodesRef = (0, import_react21.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react15.useRef)(options);
+  const optionsRef = (0, import_react21.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react15.useMemo)(
-    () => (0, import_canvas14.createCanvasAutoLayoutController)({
+  const controller = (0, import_react21.useMemo)(
+    () => (0, import_canvas15.createCanvasAutoLayoutController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -1790,10 +2505,10 @@ function useCanvasAutoLayout(options) {
     }),
     []
   );
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     if (controller.hasPending) controller.flush();
   }, [options.nodes, controller]);
-  return (0, import_react15.useMemo)(
+  return (0, import_react21.useMemo)(
     () => ({
       ...controller,
       /** Drop marker of the active reorder drag (flow coordinates). */
@@ -1807,47 +2522,47 @@ function useCanvasAutoLayout(options) {
 }
 
 // src/canvas/useCanvasTokens.ts
-var import_react16 = require("react");
-var import_canvas15 = require("@pixerate/editor/canvas");
+var import_react22 = require("react");
+var import_canvas16 = require("@pixerate/editor/canvas");
 function useCanvasTokens(options) {
   const { store, nodes, setNodes, modes, properties } = options;
-  const state = (0, import_react16.useSyncExternalStore)(store.subscribe, store.getState, store.getState);
-  const latest = (0, import_react16.useRef)({ nodes, setNodes, modes, properties });
+  const state = (0, import_react22.useSyncExternalStore)(store.subscribe, store.getState, store.getState);
+  const latest = (0, import_react22.useRef)({ nodes, setNodes, modes, properties });
   latest.current = { nodes, setNodes, modes, properties };
   const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
-  (0, import_react16.useEffect)(
+  (0, import_react22.useEffect)(
     () => store.subscribe((event) => {
       if (event.deletedVariableIds.length === 0) return;
-      latest.current.setNodes((prev) => (0, import_canvas15.detachTokenBindings)(prev, event.previous, event.deletedVariableIds, opts()));
+      latest.current.setNodes((prev) => (0, import_canvas16.detachTokenBindings)(prev, event.previous, event.deletedVariableIds, opts()));
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
   );
   const modesKey = JSON.stringify(modes ?? {});
-  (0, import_react16.useEffect)(() => {
-    const next = (0, import_canvas15.resolveCanvasTokens)(nodes, state, opts());
+  (0, import_react22.useEffect)(() => {
+    const next = (0, import_canvas16.resolveCanvasTokens)(nodes, state, opts());
     if (next !== nodes) setNodes(next);
   }, [nodes, state, modesKey, properties]);
-  const bind = (0, import_react16.useCallback)(
+  const bind = (0, import_react22.useCallback)(
     (ids, propertyKey, variableId) => {
-      const next = (0, import_canvas15.bindCanvasToken)(latest.current.nodes, ids, propertyKey, variableId, store.getState(), opts());
+      const next = (0, import_canvas16.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_react16.useCallback)(
+  const setMode = (0, import_react22.useCallback)(
     (ids, collectionId, modeId) => {
-      const next = (0, import_canvas15.setCanvasTokenMode)(latest.current.nodes, ids, collectionId, modeId, store.getState(), opts());
+      const next = (0, import_canvas16.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_react16.useCallback)(
+  const modesOf = (0, import_react22.useCallback)(
     (nodeId) => {
       const node = latest.current.nodes.find((n) => n.id === nodeId);
-      return node ? (0, import_canvas15.getEffectiveTokenModes)(node, latest.current.nodes, store.getState(), opts()) : {};
+      return node ? (0, import_canvas16.getEffectiveTokenModes)(node, latest.current.nodes, store.getState(), opts()) : {};
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
@@ -1856,9 +2571,9 @@ function useCanvasTokens(options) {
 }
 
 // src/canvas/TokenBindingPicker.tsx
-var import_canvas16 = require("@pixerate/editor/canvas");
+var import_canvas17 = require("@pixerate/editor/canvas");
 var import_tokens = require("@pixerate/editor/tokens");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function TokenBindingPicker({
   state,
   nodes,
@@ -1872,18 +2587,18 @@ function TokenBindingPicker({
   const selected = nodes.filter((n) => selectedIds.includes(n.id));
   const first = selected[0];
   if (!first) return null;
-  let rows = (0, import_canvas16.getBindableTokenProperties)(first, options);
+  let rows = (0, import_canvas17.getBindableTokenProperties)(first, options);
   if (properties) rows = properties.map((key) => rows.find((p) => p.key === key)).filter((p) => !!p);
-  const modes = (0, import_canvas16.getEffectiveTokenModes)(first, nodes, state, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-token-binding-picker": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+  const modes = (0, import_canvas17.getEffectiveTokenModes)(first, nodes, state, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.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_canvas16.getNodeTokenBindings)(n)[property.key] ?? ""));
+      const ids = new Set(selected.map((n) => (0, import_canvas17.getNodeTokenBindings)(n)[property.key] ?? ""));
       const value = ids.size === 1 ? [...ids][0] : "__mixed";
-      const candidates = (0, import_canvas16.getTokensForProperty)(state, property, first);
+      const candidates = (0, import_canvas17.getTokensForProperty)(state, property, first);
       const resolved = value && value !== "__mixed" ? (0, import_tokens.resolveToken)(state, value, modes) : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "select",
           {
             "aria-label": `${property.label} variable`,
@@ -1892,17 +2607,17 @@ function TokenBindingPicker({
             onChange: (e) => {
               const id = e.currentTarget.value || null;
               try {
-                onChange((0, import_canvas16.bindCanvasToken)(nodes, selectedIds, property.key, id, state, options));
+                onChange((0, import_canvas17.bindCanvasToken)(nodes, selectedIds, property.key, id, state, options));
               } catch (error) {
                 onError?.(error);
               }
             },
             children: [
-              value === "__mixed" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "__mixed", children: "Mixed" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: "None" }),
+              value === "__mixed" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "__mixed", children: "Mixed" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "", children: "None" }),
               candidates.map((v) => {
                 const collection = state.collections.find((c) => c.id === v.collectionId);
-                return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: v.id, children: [
+                return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("option", { value: v.id, children: [
                   v.name,
                   collection && state.collections.length > 1 ? ` (${collection.name})` : ""
                 ] }, v.id);
@@ -1910,17 +2625,17 @@ function TokenBindingPicker({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.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_runtime6.jsx)("span", { title: resolved.message, children: "\u26A0" }) : null })
+        ) : String(resolved.value) : resolved ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { title: resolved.message, children: "\u26A0" }) : null })
       ] }, property.key);
     }),
-    state.collections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
+    state.collections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
   ] });
 }
 function TokenModeSwitcher({
@@ -1934,29 +2649,29 @@ function TokenModeSwitcher({
 }) {
   const first = nodes.find((n) => nodeIds.includes(n.id));
   if (!first) return null;
-  const own = (0, import_canvas16.getNodeTokenModes)(first);
+  const own = (0, import_canvas17.getNodeTokenModes)(first);
   const parent = first.parentId ? nodes.find((n) => n.id === first.parentId) : void 0;
-  const inherited = parent ? (0, import_canvas16.getEffectiveTokenModes)(parent, nodes, state, options) : { ...options.modes };
+  const inherited = parent ? (0, import_canvas17.getEffectiveTokenModes)(parent, nodes, state, options) : { ...options.modes };
   const collections = state.collections.filter((c) => showSingleMode || c.modes.length > 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-token-mode-switcher": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: collections.map((collection) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime6.jsxs)("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.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_canvas16.setCanvasTokenMode)(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
+          onChange: (e) => onChange((0, import_canvas17.setCanvasTokenMode)(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: "", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("option", { value: "", children: [
               "Auto (",
               auto.name,
               ")"
             ] }),
-            collection.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: m.id, children: m.name }, m.id))
+            collection.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: m.id, children: m.name }, m.id))
           ]
         }
       )
@@ -1965,18 +2680,18 @@ function TokenModeSwitcher({
 }
 
 // src/canvas/index.ts
-var import_canvas31 = require("@pixerate/editor/canvas");
+var import_canvas32 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasAnimation.ts
-var import_react17 = require("react");
-var import_canvas17 = require("@pixerate/editor/canvas");
+var import_react23 = require("react");
+var import_canvas18 = require("@pixerate/editor/canvas");
 function useCanvasAnimation(options) {
-  const nodesRef = (0, import_react17.useRef)(options.nodes);
+  const nodesRef = (0, import_react23.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react17.useRef)(options);
+  const optionsRef = (0, import_react23.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react17.useMemo)(
-    () => (0, import_canvas17.createCanvasAnimationController)({
+  const controller = (0, import_react23.useMemo)(
+    () => (0, import_canvas18.createCanvasAnimationController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -2002,26 +2717,26 @@ function useCanvasAnimation(options) {
     }),
     []
   );
-  (0, import_react17.useEffect)(() => () => controller.destroy(), [controller]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react23.useEffect)(() => () => controller.destroy(), [controller]);
+  (0, import_react23.useEffect)(() => {
     if (options.loop !== void 0) controller.setLoop(options.loop);
   }, [controller, options.loop]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (options.playbackRate !== void 0) controller.setPlaybackRate(options.playbackRate);
   }, [controller, options.playbackRate]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (options.recording !== void 0) controller.setRecording(options.recording);
   }, [controller, options.recording]);
-  const state = (0, import_react17.useSyncExternalStore)(
+  const state = (0, import_react23.useSyncExternalStore)(
     (listener) => controller.subscribe(listener),
     () => controller.getState(),
     () => controller.getState()
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     controller.refresh();
   }, [controller, options.nodes]);
-  const displayNodes = (0, import_react17.useMemo)(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
-  return (0, import_react17.useMemo)(
+  const displayNodes = (0, import_react23.useMemo)(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
+  return (0, import_react23.useMemo)(
     () => ({
       ...controller,
       state,
@@ -2042,24 +2757,24 @@ function useCanvasAnimation(options) {
 }
 
 // src/canvas/AnimationTimeline.tsx
-var import_react18 = require("react");
-var import_canvas18 = require("@pixerate/editor/canvas");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_canvas19 = require("@pixerate/editor/canvas");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var LOOP_LABELS = { none: "Once", loop: "Loop", "ping-pong": "Ping-pong" };
 var easingValue = (easing) => typeof easing === "string" ? easing : easing ? "custom" : "linear";
 function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8, labelOf, className = "" }) {
   const { state } = animation;
   const duration = state.duration;
   const rows = animation.timelineRows(nodeIds ?? void 0, labelOf ? { labelOf } : {});
-  const ticks = (0, import_canvas18.getTimelineTicks)(duration, width);
+  const ticks = (0, import_canvas19.getTimelineTicks)(duration, width);
   const selectedEasing = (() => {
     const first = state.selection[0];
     if (!first) return "";
     for (const row of rows) for (const k of row.keyframes) if (k.selected && k.ref.property === first.property && k.ref.nodeId === first.nodeId) return easingValue(k.easing);
     return "";
   })();
-  const dragRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const dragRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
     const onKey = (event) => {
       if (event.key === "Escape" && dragRef.current) {
         dragRef.current = null;
@@ -2072,8 +2787,8 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
   const onRulerDown = (event) => {
     const lane = event.currentTarget;
     const left = lane.getBoundingClientRect().left;
-    animation.scrub((0, import_canvas18.xToTime)(event.clientX - left, duration, width));
-    const move = (e) => animation.scrub((0, import_canvas18.xToTime)(e.clientX - left, duration, width));
+    animation.scrub((0, import_canvas19.xToTime)(event.clientX - left, duration, width));
+    const move = (e) => animation.scrub((0, import_canvas19.xToTime)(e.clientX - left, duration, width));
     const up = () => {
       window.removeEventListener("pointermove", move);
       window.removeEventListener("pointerup", up);
@@ -2112,17 +2827,17 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
       animation.deleteKeyframes();
     }
   };
-  const btn = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-50";
-  const playheadX = (0, import_canvas18.timeToX)(state.time, duration, width);
+  const btn2 = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-50";
+  const playheadX = (0, import_canvas19.timeToX)(state.time, duration, width);
   const labelWidth = 120;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-animation-timeline": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, tabIndex: 0, onKeyDown: onTimelineKey, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-2", role: "toolbar", "aria-label": "Animation", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: btn, "data-action": "toggle-play", "aria-label": state.playing ? "Pause" : "Play", onClick: () => animation.toggle(), children: state.playing ? "\u275A\u275A" : "\u25B6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { "data-animation-timeline": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, tabIndex: 0, onKeyDown: onTimelineKey, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-wrap items-center gap-2", role: "toolbar", "aria-label": "Animation", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: btn2, "data-action": "toggle-play", "aria-label": state.playing ? "Pause" : "Play", onClick: () => animation.toggle(), children: state.playing ? "\u275A\u275A" : "\u25B6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           type: "button",
-          className: `${btn} ${state.recording ? "text-red-500" : ""}`,
+          className: `${btn2} ${state.recording ? "text-red-500" : ""}`,
           "data-action": "record",
           "aria-pressed": state.recording,
           "aria-label": "Record keyframes",
@@ -2130,13 +2845,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           children: "\u25CF Rec"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: btn, "data-action": "add-keyframe", onClick: () => animation.addKeyframe(), children: "\u25C6 Key" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-time": "", className: "tabular-nums text-muted-foreground", children: [
-        (0, import_canvas18.formatAnimationTime)(state.time),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: btn2, "data-action": "add-keyframe", onClick: () => animation.addKeyframe(), children: "\u25C6 Key" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { "data-time": "", className: "tabular-nums text-muted-foreground", children: [
+        (0, import_canvas19.formatAnimationTime)(state.time),
         " / ",
-        (0, import_canvas18.formatAnimationTime)(duration)
+        (0, import_canvas19.formatAnimationTime)(duration)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "select",
         {
           "aria-label": "Easing",
@@ -2146,13 +2861,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           disabled: state.selection.length === 0,
           onChange: (e) => e.target.value && e.target.value !== "custom" && animation.setEasing(e.target.value),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: "Easing\u2026" }),
-            import_canvas18.ANIMATION_EASING_PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: preset, children: import_canvas18.ANIMATION_EASING_LABELS[preset] }, preset)),
-            selectedEasing === "custom" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "custom", children: "Custom" }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "", children: "Easing\u2026" }),
+            import_canvas19.ANIMATION_EASING_PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: preset, children: import_canvas19.ANIMATION_EASING_LABELS[preset] }, preset)),
+            selectedEasing === "custom" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "custom", children: "Custom" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "select",
         {
           "aria-label": "Loop",
@@ -2160,13 +2875,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           className: "rounded border border-border bg-background px-1 py-0.5",
           value: state.loop,
           onChange: (e) => animation.setLoop(e.target.value),
-          children: Object.keys(LOOP_LABELS).map((mode) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
+          children: Object.keys(LOOP_LABELS).map((mode) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: labelWidth }, className: "shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { width: labelWidth }, className: "shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "div",
         {
           "data-timeline-ruler": "",
@@ -2174,15 +2889,15 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           style: { width },
           onPointerDown: onRulerDown,
           children: [
-            ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground", style: { left: tick.x }, children: tick.label }, tick.time)),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-playhead": "", className: "absolute top-0 h-5 w-px bg-red-500", style: { left: playheadX } })
+            ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground", style: { left: tick.x }, children: tick.label }, tick.time)),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { "data-playhead": "", className: "absolute top-0 h-5 w-px bg-red-500", style: { left: playheadX } })
           ]
         }
       )
     ] }),
-    rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-muted-foreground", "data-timeline-empty": "", children: "Select an animated node, or press \u25C6 Key to add a keyframe." }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center", "data-track": row.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex shrink-0 items-center gap-1 truncate pr-2", style: { width: labelWidth }, title: `${row.nodeLabel} \xB7 ${row.label}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-muted-foreground", "data-timeline-empty": "", children: "Select an animated node, or press \u25C6 Key to add a keyframe." }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center", "data-track": row.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { className: "flex shrink-0 items-center gap-1 truncate pr-2", style: { width: labelWidth }, title: `${row.nodeLabel} \xB7 ${row.label}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "input",
           {
             type: "checkbox",
@@ -2191,24 +2906,24 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
             onChange: (e) => animation.setTrackEnabled(row.nodeId, row.property, e.target.checked)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "truncate", children: [
           rows.filter((r) => r.nodeId === row.nodeId).length < rows.length ? `${row.nodeLabel} \xB7 ` : "",
           row.label
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-lane": "", className: `relative h-5 rounded bg-muted/40 ${row.enabled ? "" : "opacity-50"}`, style: { width }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pointer-events-none absolute top-0 h-5 w-px bg-red-500/60", style: { left: playheadX } }),
-        state.drag?.target != null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-snap-target": "", className: "pointer-events-none absolute top-0 h-5 w-px bg-sky-400", style: { left: (0, import_canvas18.timeToX)(state.drag.target, duration, width) } }) : null,
-        row.keyframes.map((k) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { "data-lane": "", className: `relative h-5 rounded bg-muted/40 ${row.enabled ? "" : "opacity-50"}`, style: { width }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pointer-events-none absolute top-0 h-5 w-px bg-red-500/60", style: { left: playheadX } }),
+        state.drag?.target != null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { "data-snap-target": "", className: "pointer-events-none absolute top-0 h-5 w-px bg-sky-400", style: { left: (0, import_canvas19.timeToX)(state.drag.target, duration, width) } }) : null,
+        row.keyframes.map((k) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
             type: "button",
             "data-keyframe": k.ref.time,
             "aria-pressed": k.selected,
-            "aria-label": `${row.label} keyframe at ${(0, import_canvas18.formatAnimationTime)(k.ref.time)}`,
-            title: `${(0, import_canvas18.formatAnimationTime)(k.time)} \xB7 ${String(k.value)}`,
+            "aria-label": `${row.label} keyframe at ${(0, import_canvas19.formatAnimationTime)(k.ref.time)}`,
+            title: `${(0, import_canvas19.formatAnimationTime)(k.time)} \xB7 ${String(k.value)}`,
             className: `absolute top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rotate-45 border ${k.selected ? "border-sky-300 bg-sky-500" : "border-foreground/60 bg-background"} ${k.easing === "hold" ? "rounded-none" : "rounded-[1px]"}`,
-            style: { left: (0, import_canvas18.timeToX)(k.time, duration, width) },
+            style: { left: (0, import_canvas19.timeToX)(k.time, duration, width) },
             onPointerDown: onKeyDown(k.ref)
           },
           k.ref.time
@@ -2219,18 +2934,18 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
 }
 
 // src/canvas/index.ts
-var import_canvas32 = require("@pixerate/editor/canvas");
+var import_canvas33 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasComponents.ts
-var import_react19 = require("react");
-var import_canvas19 = require("@pixerate/editor/canvas");
+var import_react25 = require("react");
+var import_canvas20 = require("@pixerate/editor/canvas");
 function useCanvasComponents(options) {
-  const nodesRef = (0, import_react19.useRef)(options.nodes);
+  const nodesRef = (0, import_react25.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react19.useRef)(options);
+  const optionsRef = (0, import_react25.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react19.useMemo)(
-    () => (0, import_canvas19.createCanvasComponentsController)({
+  const controller = (0, import_react25.useMemo)(
+    () => (0, import_canvas20.createCanvasComponentsController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -2258,18 +2973,18 @@ function useCanvasComponents(options) {
     }),
     []
   );
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     if (optionsRef.current.autoSync !== false) controller.sync();
   }, [options.nodes, controller]);
   return controller;
 }
 
 // src/canvas/CanvasComponentsPanel.tsx
-var import_react20 = require("react");
-var import_canvas20 = require("@pixerate/editor/canvas");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_canvas21 = require("@pixerate/editor/canvas");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function InlineField({ value, label, onCommit }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "input",
     {
       type: "text",
@@ -2300,11 +3015,11 @@ function CanvasComponentsPanel({
   search = true,
   className = ""
 }) {
-  const [query, setQuery] = (0, import_react20.useState)("");
-  const [propsOpen, setPropsOpen] = (0, import_react20.useState)(null);
-  const [menuFor, setMenuFor] = (0, import_react20.useState)(null);
-  const [editing, setEditing] = (0, import_react20.useState)(null);
-  const { components: all, sets } = (0, import_canvas20.listCanvasComponents)(nodes);
+  const [query, setQuery] = (0, import_react26.useState)("");
+  const [propsOpen, setPropsOpen] = (0, import_react26.useState)(null);
+  const [menuFor, setMenuFor] = (0, import_react26.useState)(null);
+  const [editing, setEditing] = (0, import_react26.useState)(null);
+  const { components: all, sets } = (0, import_canvas21.listCanvasComponents)(nodes);
   const q = query.trim().toLowerCase();
   const match = (name) => !q || name.toLowerCase().includes(q);
   const lone = all.filter((c) => !c.setId && match(c.name));
@@ -2315,7 +3030,7 @@ function CanvasComponentsPanel({
   };
   const small = "shrink-0 rounded px-1 text-[10px] text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40";
   const menuItem = "rounded px-2 py-0.5 text-left hover:bg-muted disabled:opacity-40";
-  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "button",
     {
       type: "button",
@@ -2327,22 +3042,22 @@ function CanvasComponentsPanel({
       onClick: () => onInsert(id),
       onContextMenu,
       onDragStart: (e) => {
-        e.dataTransfer.setData(import_canvas20.CANVAS_COMPONENT_DRAG_TYPE, id);
+        e.dataTransfer.setData(import_canvas21.CANVAS_COMPONENT_DRAG_TYPE, id);
         e.dataTransfer.setData("text/plain", name);
         e.dataTransfer.effectAllowed = "copy";
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "truncate", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "truncate", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
           name
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[10px] text-muted-foreground", "data-instance-count": "", children: count })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[10px] text-muted-foreground", "data-instance-count": "", children: count })
       ]
     },
     id
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-components-panel": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
-    search ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { "data-components-panel": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+    search ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "input",
       {
         type: "search",
@@ -2352,11 +3067,11 @@ function CanvasComponentsPanel({
         onInput: (e) => setQuery(e.target.value)
       }
     ) : null,
-    shownSets.map((set) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-component-set": set.id, className: "flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+    shownSets.map((set) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { "data-component-set": set.id, className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1", children: [
         item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), { "data-kind": "set" }),
-        components ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        components ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -2368,7 +3083,7 @@ function CanvasComponentsPanel({
               children: "+\xA0Variant"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -2383,8 +3098,8 @@ function CanvasComponentsPanel({
           )
         ] }) : null
       ] }),
-      components && propsOpen === set.id ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-variant-properties": set.id, className: "ml-3 flex flex-col gap-1 border-l border-border py-1 pl-2", children: set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      components && propsOpen === set.id ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "data-variant-properties": set.id, className: "ml-3 flex flex-col gap-1 border-l border-border py-1 pl-2", children: set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           InlineField,
           {
             value: option.name,
@@ -2392,7 +3107,7 @@ function CanvasComponentsPanel({
             onCommit: (next) => report(components.renameVariantProperty(option.name, next, set.id))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           InlineField,
           {
             value,
@@ -2402,8 +3117,8 @@ function CanvasComponentsPanel({
           value
         )) })
       ] }, option.name)) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1", children: [
           item(
             v.id,
             v.name,
@@ -2414,7 +3129,7 @@ function CanvasComponentsPanel({
               setMenuFor(v.id);
             } : void 0
           ),
-          components ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          components ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -2428,8 +3143,8 @@ function CanvasComponentsPanel({
             }
           ) : null
         ] }),
-        components && menuFor === v.id ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { role: "menu", "data-variant-menu": v.id, className: "ml-2 flex flex-col rounded border border-border bg-background p-1 shadow", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        components && menuFor === v.id ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { role: "menu", "data-variant-menu": v.id, className: "ml-2 flex flex-col rounded border border-border bg-background p-1 shadow", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -2443,7 +3158,7 @@ function CanvasComponentsPanel({
               children: "Edit values\u2026"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -2457,7 +3172,7 @@ function CanvasComponentsPanel({
               children: "Duplicate"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -2474,7 +3189,7 @@ function CanvasComponentsPanel({
             }
           )
         ] }) : null,
-        components && editing === v.id ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        components && editing === v.id ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "form",
           {
             "data-variant-editor": v.id,
@@ -2488,9 +3203,9 @@ function CanvasComponentsPanel({
               if (report(components.setVariantProperties(values, v.id))) setEditing(null);
             },
             children: [
-              set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "input",
                   {
                     type: "text",
@@ -2501,9 +3216,9 @@ function CanvasComponentsPanel({
                   }
                 )
               ] }, option.name)),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
               ] })
             ]
           }
@@ -2511,7 +3226,7 @@ function CanvasComponentsPanel({
       ] }, v.id)) })
     ] }, set.id)),
     lone.map((c) => item(c.id, c.name, c.instanceCount, { "data-kind": "component" })),
-    all.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
+    all.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
   ] });
 }
 function CanvasInstanceInspector({
@@ -2521,36 +3236,36 @@ function CanvasInstanceInspector({
   onError,
   className = ""
 }) {
-  const info = nodeId ? (0, import_canvas20.inspectCanvasInstance)(nodes, nodeId) : void 0;
+  const info = nodeId ? (0, import_canvas21.inspectCanvasInstance)(nodes, nodeId) : void 0;
   if (!info) return null;
   const report = (result) => {
     if (result && !result.ok && result.reason) onError?.(result.reason);
   };
   const setProp = (name, value) => report(components.setInstanceProperties({ [name]: value }, [info.id]));
-  const allComponents = (0, import_canvas20.listCanvasComponents)(nodes).components;
+  const allComponents = (0, import_canvas21.listCanvasComponents)(nodes).components;
   const linked = info.status === "linked";
-  const btn = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-40";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-instance-inspector": "", "data-instance-id": info.id, className: `flex flex-col gap-2 text-xs text-foreground ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "truncate font-medium", "data-instance-main": "", children: linked ? info.componentName : "Main component missing" }),
-      info.nested ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-muted-foreground", children: "Nested" }) : null
+  const btn2 = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-40";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { "data-instance-inspector": "", "data-instance-id": info.id, className: `flex flex-col gap-2 text-xs text-foreground ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate font-medium", "data-instance-main": "", children: linked ? info.componentName : "Main component missing" }),
+      info.nested ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-muted-foreground", children: "Nested" }) : null
     ] }),
-    info.variantOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2", "data-variant-property": option.name, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    info.variantOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2", "data-variant-property": option.name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "select",
         {
           "aria-label": `${option.name} variant`,
           className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
           value: info.variant[option.name] ?? "",
           onChange: (e) => setProp(option.name, e.currentTarget.value),
-          children: option.values.map((v) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: v, children: v }, v))
+          children: option.values.map((v) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: v, children: v }, v))
         }
       )
     ] }, option.name)),
-    info.properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2", "data-component-property": p.name, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: p.name }),
-      p.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", "aria-label": p.name, checked: p.value === true, onChange: (e) => setProp(p.name, e.currentTarget.checked) }) : p.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    info.properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2", "data-component-property": p.name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: p.name }),
+      p.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "checkbox", "aria-label": p.name, checked: p.value === true, onChange: (e) => setProp(p.name, e.currentTarget.checked) }) : p.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "input",
         {
           type: "text",
@@ -2565,22 +3280,22 @@ function CanvasInstanceInspector({
           }
         },
         String(p.value)
-      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "select",
         {
           "aria-label": p.name,
           className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
           value: String(p.value),
           onChange: (e) => setProp(p.name, e.currentTarget.value),
-          children: allComponents.filter((c) => !p.preferred?.length || p.preferred.includes(c.id) || c.id === p.value).map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: c.id, children: c.name }, c.id))
+          children: allComponents.filter((c) => !p.preferred?.length || p.preferred.includes(c.id) || c.id === p.value).map((c) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: c.id, children: c.name }, c.id))
         }
       )
     ] }, p.name)),
-    info.overrides.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1", "data-instance-overrides": "", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-muted-foreground", children: "Overrides" }),
-      info.overrides.map((o) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-override-layer": o.id, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "mr-1 truncate", children: o.name }),
-        o.groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    info.overrides.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-1", "data-instance-overrides": "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-muted-foreground", children: "Overrides" }),
+      info.overrides.map((o) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-override-layer": o.id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "mr-1 truncate", children: o.name }),
+        o.groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "button",
           {
             type: "button",
@@ -2597,27 +3312,27 @@ function CanvasInstanceInspector({
         ))
       ] }, o.id))
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-      linked ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: btn, "data-action": "reset", onClick: () => report(components.resetOverrides(info.id)), children: "Reset all" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: btn, "data-action": "go-to-main", onClick: () => components.goToMainComponent(info.id), children: "Go to main" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      linked ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: btn2, "data-action": "reset", onClick: () => report(components.resetOverrides(info.id)), children: "Reset all" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: btn2, "data-action": "go-to-main", onClick: () => components.goToMainComponent(info.id), children: "Go to main" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             type: "button",
-            className: btn,
+            className: btn2,
             "data-action": "push",
             disabled: info.overrides.length === 0,
             onClick: () => report(components.pushOverrides(info.rootId)),
             children: "Push changes"
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: btn, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: btn2, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
-          className: btn,
+          className: btn2,
           "data-action": "detach",
           disabled: info.nested,
           title: info.nested ? "Detach the outer instance first" : void 0,
@@ -2630,12 +3345,12 @@ function CanvasInstanceInspector({
 }
 
 // src/canvas/index.ts
-var import_canvas33 = require("@pixerate/editor/canvas");
+var import_canvas34 = require("@pixerate/editor/canvas");
 
 // src/canvas/MermaidFamilyScene.tsx
-var import_react21 = require("react");
-var import_canvas21 = require("@pixerate/editor/canvas");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_canvas22 = require("@pixerate/editor/canvas");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function MermaidFamilyScene({
   scene,
   padding = 16,
@@ -2648,7 +3363,7 @@ function MermaidFamilyScene({
   style,
   title
 }) {
-  const uid = (0, import_react21.useId)().replace(/:/g, "");
+  const uid = (0, import_react27.useId)().replace(/:/g, "");
   const marker = (kind) => kind ? `url(#${uid}-${kind})` : void 0;
   const x = scene.x - padding;
   const y = scene.y - padding;
@@ -2666,7 +3381,7 @@ function MermaidFamilyScene({
     cursor: "pointer"
   } : { pointerEvents: "none" };
   const stroke = (mark) => mark.selected ? { stroke: selectionColor, strokeWidth: Math.max(2, mark.strokeWidth ?? 0) } : { stroke: mark.stroke, strokeWidth: mark.strokeWidth };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "svg",
     {
       className: `pixerate-diagram-scene ${className}`.trim(),
@@ -2679,15 +3394,15 @@ function MermaidFamilyScene({
       style: { display: "block", maxWidth: "100%", height: "auto", overflow: "visible", ...style },
       onClick: interactive ? (event) => onSelect?.(null, event) : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("defs", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("marker", { id: `${uid}-arrowclosed`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M0,0 L10,5 L0,10 Z", style: { fill: markerColor } }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("marker", { id: `${uid}-arrow`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M0,0 L10,5 L0,10", style: { fill: "none", stroke: markerColor, strokeWidth: 1.5 } }) })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("marker", { id: `${uid}-arrowclosed`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M0,0 L10,5 L0,10 Z", style: { fill: markerColor } }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("marker", { id: `${uid}-arrow`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M0,0 L10,5 L0,10", style: { fill: "none", stroke: markerColor, strokeWidth: 1.5 } }) })
         ] }),
         scene.marks.map((mark) => {
           const common = { "data-role": mark.role, "data-target": mark.target, "data-selected": mark.selected ? "" : void 0, opacity: mark.opacity, ...handlers(mark) };
           switch (mark.kind) {
             case "rect":
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 "rect",
                 {
                   ...common,
@@ -2702,9 +3417,9 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "circle":
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, ...stroke(mark) } }, mark.key);
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, ...stroke(mark) } }, mark.key);
             case "line":
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 "line",
                 {
                   ...common,
@@ -2720,7 +3435,7 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "path":
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 "path",
                 {
                   ...common,
@@ -2734,14 +3449,14 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "text":
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 "text",
                 {
                   ...common,
                   x: mark.x,
                   y: mark.y,
                   textAnchor: mark.anchor,
-                  dominantBaseline: (0, import_canvas21.diagramTextBaseline)(mark.baseline),
+                  dominantBaseline: (0, import_canvas22.diagramTextBaseline)(mark.baseline),
                   transform: mark.rotate ? `rotate(${mark.rotate} ${mark.x} ${mark.y})` : void 0,
                   style: {
                     fill: mark.selected ? selectionColor : mark.fill,
@@ -2762,14 +3477,14 @@ function MermaidFamilyScene({
 }
 
 // src/canvas/useMermaidDiagram.ts
-var import_react22 = require("react");
+var import_react28 = require("react");
 var import_diagram = require("@pixerate/editor/diagram");
-var import_canvas22 = require("@pixerate/editor/canvas");
+var import_canvas23 = require("@pixerate/editor/canvas");
 function useDiagramState(controller) {
-  return (0, import_react22.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  return (0, import_react28.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
 }
 function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
-  const own = (0, import_react22.useRef)(null);
+  const own = (0, import_react28.useRef)(null);
   let controller;
   if (controllerOrOptions instanceof import_diagram.DiagramController) controller = controllerOrOptions;
   else {
@@ -2779,24 +3494,24 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
   const layoutOptions = (controllerOrOptions instanceof import_diagram.DiagramController ? void 0 : controllerOrOptions.layoutOptions) ?? view.layoutOptions;
   const sceneTheme = (controllerOrOptions instanceof import_diagram.DiagramController ? void 0 : controllerOrOptions.sceneTheme) ?? view.sceneTheme;
   const state = useDiagramState(controller);
-  const canvas = (0, import_react22.useMemo)(
-    () => (0, import_canvas22.mermaidToCanvas)(state.document, { ...layoutOptions, editable: state.editable }),
+  const canvas = (0, import_react28.useMemo)(
+    () => (0, import_canvas23.mermaidToCanvas)(state.document, { ...layoutOptions, editable: state.editable }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, state.editable]
   );
-  const scene = (0, import_react22.useMemo)(
-    () => state.document.tier === "editable" ? (0, import_canvas22.familySceneFromLayout)(state.document.family, state.document.graph, canvas.layout, { theme: { ...import_canvas22.CSS_VARIABLE_DIAGRAM_SCENE_THEME, ...sceneTheme }, selection: state.selection }) : null,
+  const scene = (0, import_react28.useMemo)(
+    () => state.document.tier === "editable" ? (0, import_canvas23.familySceneFromLayout)(state.document.family, state.document.graph, canvas.layout, { theme: { ...import_canvas23.CSS_VARIABLE_DIAGRAM_SCENE_THEME, ...sceneTheme }, selection: state.selection }) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, canvas.layout, state.selection]
   );
-  const layoutRef = (0, import_react22.useRef)(canvas.layout);
+  const layoutRef = (0, import_react28.useRef)(canvas.layout);
   layoutRef.current = canvas.layout;
-  const actions = (0, import_react22.useMemo)(
+  const actions = (0, import_react28.useMemo)(
     () => ({
       apply: (ops, label) => controller.apply(ops, label),
       load: (source, options) => controller.load(source, options),
       moveNodes: (moved, all = moved) => {
-        const op = (0, import_canvas22.mermaidMovesFromCanvas)(layoutRef.current, moved, all, { stored: controller.getDocument().meta.layout ?? {} });
+        const op = (0, import_canvas23.mermaidMovesFromCanvas)(layoutRef.current, moved, all, { stored: controller.getDocument().meta.layout ?? {} });
         return op ? controller.apply(op, "Move") : null;
       },
       connect: (source, target, label) => controller.apply({ type: "addEdge", edge: { source, target, ...label ? { label } : {} } }, "Connect"),
@@ -2815,7 +3530,7 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
         "Rename"
       ),
       renameTarget: (target, label) => {
-        const op = (0, import_canvas22.diagramRenameOp)(controller.getDocument(), target, label);
+        const op = (0, import_canvas23.diagramRenameOp)(controller.getDocument(), target, label);
         return op ? controller.apply(op, "Rename") : null;
       },
       select: (ids) => controller.select(ids),
@@ -2828,13 +3543,13 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
 }
 function useMermaidStream(source, options = {}) {
   const { complete = false, duration = 300, ...layoutOptions } = options;
-  const stream = (0, import_react22.useRef)(null);
-  if (!stream.current) stream.current = new import_canvas22.DiagramStream(layoutOptions);
-  const result = (0, import_react22.useMemo)(() => stream.current.update(source, complete), [source, complete]);
-  const [shown, setShown] = (0, import_react22.useState)({ layout: result.layout, settled: true });
-  const shownRef = (0, import_react22.useRef)(shown.layout);
+  const stream = (0, import_react28.useRef)(null);
+  if (!stream.current) stream.current = new import_canvas23.DiagramStream(layoutOptions);
+  const result = (0, import_react28.useMemo)(() => stream.current.update(source, complete), [source, complete]);
+  const [shown, setShown] = (0, import_react28.useState)({ layout: result.layout, settled: true });
+  const shownRef = (0, import_react28.useRef)(shown.layout);
   shownRef.current = shown.layout;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const target = result.layout;
     if (!target) return setShown({ layout: null, settled: true });
     const from = shownRef.current;
@@ -2844,14 +3559,14 @@ function useMermaidStream(source, options = {}) {
     const start = performance.now();
     const step = () => {
       const t = Math.min(1, (performance.now() - start) / duration);
-      setShown({ layout: (0, import_canvas22.blendDiagramLayout)(from, target, (0, import_canvas22.easeDiagramTween)(t)), settled: t >= 1 });
+      setShown({ layout: (0, import_canvas23.blendDiagramLayout)(from, target, (0, import_canvas23.easeDiagramTween)(t)), settled: t >= 1 });
       if (t < 1) frame = requestAnimationFrame(step);
     };
     frame = requestAnimationFrame(step);
     return () => cancelAnimationFrame(frame);
   }, [result.layout, duration]);
   const doc = result.document.tier === "editable" ? result.document : null;
-  const canvas = (0, import_react22.useMemo)(() => {
+  const canvas = (0, import_react28.useMemo)(() => {
     if (!doc || !shown.layout) return { nodes: [], edges: [] };
     const placed = new Set(Object.keys(shown.layout.positions));
     const graph = {
@@ -2860,24 +3575,24 @@ function useMermaidStream(source, options = {}) {
       groups: doc.graph.groups.filter((g) => placed.has(g.id)),
       edges: doc.graph.edges.filter((e) => placed.has(e.source) && placed.has(e.target))
     };
-    return (0, import_canvas22.mermaidToCanvas)({ ...doc, graph }, { layout: shown.layout });
+    return (0, import_canvas23.mermaidToCanvas)({ ...doc, graph }, { layout: shown.layout });
   }, [doc, shown.layout]);
   return { document: doc, ...canvas, layout: shown.layout, settled: shown.settled };
 }
 
 // src/canvas/MermaidDiagramNode.tsx
-var import_canvas23 = require("@pixerate/editor/canvas");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_canvas24 = require("@pixerate/editor/canvas");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function mermaidNodeStyle(styles = {}, selected = false) {
-  const paint = (0, import_canvas23.mermaidNodePaint)(styles, selected);
+  const paint = (0, import_canvas24.mermaidNodePaint)(styles, selected);
   const { color, "stroke-width": strokeWidth, "stroke-dasharray": strokeDasharray, ...vars } = paint;
   return { ...vars, color, strokeWidth, strokeDasharray };
 }
 function MermaidDiagramNode({ data, width = 160, height = 56, selected, className = "", children }) {
   const node = data.node;
   if (!node) return null;
-  const members = (0, import_canvas23.mermaidNodeMembers)(node.data);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  const members = (0, import_canvas24.mermaidNodeMembers)(node.data);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: `pixerate-diagram-node ${className}`.trim(),
@@ -2885,14 +3600,14 @@ function MermaidDiagramNode({ data, width = 160, height = 56, selected, classNam
       "data-selected": selected ? "true" : void 0,
       style: { position: "relative", width: "100%", height: "100%", ...mermaidNodeStyle(data.resolvedStyles, selected) },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-hidden": "true", children: (0, import_canvas23.mermaidShapePaths)(node.shape, width, height).map((path, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: path.d, style: { ...import_canvas23.MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-hidden": "true", children: (0, import_canvas24.mermaidShapePaths)(node.shape, width, height).map((path, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: path.d, style: { ...import_canvas24.MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "div",
           {
             style: { position: "relative", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: members.length ? "flex-start" : "center", height: "100%", padding: "6px 10px", boxSizing: "border-box", fontSize: 13, lineHeight: 1.3, textAlign: "center", pointerEvents: "none" },
             children: [
-              (0, import_canvas23.mermaidLabelLines)(node.label).map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
-              members.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { alignSelf: "stretch", marginTop: 4, paddingTop: 4, borderTop: "1px solid var(--pixerate-diagram-node-border)", textAlign: "left", fontSize: 12 }, children: members.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: m }, i)) })
+              (0, import_canvas24.mermaidLabelLines)(node.label).map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
+              members.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { alignSelf: "stretch", marginTop: 4, paddingTop: 4, borderTop: "1px solid var(--pixerate-diagram-node-border)", textAlign: "left", fontSize: 12 }, children: members.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: m }, i)) })
             ]
           }
         ),
@@ -2904,7 +3619,7 @@ function MermaidDiagramNode({ data, width = 160, height = 56, selected, classNam
 function MermaidDiagramGroup({ data, selected, className = "", children }) {
   const group = data.group;
   if (!group) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: `pixerate-diagram-group ${className}`.trim(),
@@ -2919,7 +3634,7 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
         color: data.resolvedStyles?.color ?? "var(--muted-foreground, #475569)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: (0, import_canvas23.mermaidLabelLines)(group.label).join(" ") }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: (0, import_canvas24.mermaidLabelLines)(group.label).join(" ") }),
         children
       ]
     }
@@ -2927,29 +3642,29 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
 }
 
 // src/canvas/MermaidThumbnail.tsx
-var import_react23 = require("react");
+var import_react29 = require("react");
 var import_diagram2 = require("@pixerate/editor/diagram");
-var import_canvas24 = require("@pixerate/editor/canvas");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_canvas25 = require("@pixerate/editor/canvas");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function MermaidThumbnail({ source, className = "", fallback = null, ...options }) {
-  const doc = (0, import_react23.useMemo)(() => typeof source === "string" ? (0, import_diagram2.parseMermaid)(source) : source, [source]);
+  const doc = (0, import_react29.useMemo)(() => typeof source === "string" ? (0, import_diagram2.parseMermaid)(source) : source, [source]);
   const key = JSON.stringify(options);
-  const drawn = (0, import_react23.useMemo)(
-    () => doc.tier === "editable" && doc.graph.nodes.length ? (0, import_canvas24.mermaidThumbnailSvg)(doc, options) : null,
+  const drawn = (0, import_react29.useMemo)(
+    () => doc.tier === "editable" && doc.graph.nodes.length ? (0, import_canvas25.mermaidThumbnailSvg)(doc, options) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [doc, key]
   );
-  if (!drawn) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: fallback });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
+  if (!drawn) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: fallback });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
 }
 
 // src/canvas/useDiagramDirector.ts
-var import_react24 = require("react");
+var import_react30 = require("react");
 var import_diagram3 = require("@pixerate/editor/diagram");
 function useDiagramDirector(controller, options) {
-  const placement = (0, import_react24.useRef)(options.placement);
+  const placement = (0, import_react30.useRef)(options.placement);
   placement.current = options.placement;
-  const ref = (0, import_react24.useRef)(null);
+  const ref = (0, import_react30.useRef)(null);
   if (!ref.current) {
     const presence = new import_diagram3.PresenceStore();
     ref.current = {
@@ -2960,17 +3675,17 @@ function useDiagramDirector(controller, options) {
   return ref.current;
 }
 function usePresenceState(presence) {
-  return (0, import_react24.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
+  return (0, import_react30.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
 }
 
 // src/canvas/DiagramPresenceLayer.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   const { actors } = usePresenceState(presence);
   if (!actors.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `pixerate-diagram-presence ${className}`.trim(), "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 50 }, children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { "data-actor": a.id, style: { position: "absolute", left: 0, top: 0, transform: `translate(${a.x * viewport.zoom + viewport.x}px, ${a.y * viewport.zoom + viewport.y}px)` }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "18", height: "20", viewBox: "0 0 12 18", style: { display: "block", transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { position: "absolute", left: 14, top: 16, whiteSpace: "nowrap", borderRadius: 4, padding: "1px 6px", fontSize: 11, fontWeight: 600, color: "#ffffff", background: a.color }, children: a.message ?? a.name })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `pixerate-diagram-presence ${className}`.trim(), "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 50 }, children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { "data-actor": a.id, style: { position: "absolute", left: 0, top: 0, transform: `translate(${a.x * viewport.zoom + viewport.x}px, ${a.y * viewport.zoom + viewport.y}px)` }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "18", height: "20", viewBox: "0 0 12 18", style: { display: "block", transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { position: "absolute", left: 14, top: 16, whiteSpace: "nowrap", borderRadius: 4, padding: "1px 6px", fontSize: 11, fontWeight: 600, color: "#ffffff", background: a.color }, children: a.message ?? a.name })
   ] }, a.id)) });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -2994,8 +3709,11 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   CUBIC_BEZIER_PRESETS,
   CanvasComponentsPanel,
   CanvasDrawLayer,
+  CanvasEffectsPanel,
+  CanvasEffectsProvider,
   CanvasGuidesLayer,
   CanvasInstanceInspector,
+  CanvasNodeEffectLayer,
   CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
   DiagramPresenceLayer,
@@ -3310,6 +4028,9 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   useCanvasComponents,
   useCanvasDocking,
   useCanvasDraw,
+  useCanvasEffects,
+  useCanvasEffectsProviderContext,
+  useCanvasEffectsTools,
   useCanvasExplosion,
   useCanvasGraph,
   useCanvasLayout,