@pixerate/editor-react 0.13.0 → 0.15.0

package/README.md

@@ -68,14 +68,14 @@ import { CommentsPanel, ReviewToolbar, CommentButton, BubbleMenu } from "@pixera
 
 const editor = useEditor({ extensions: [Comments.configure({ author: me }), TrackChanges.configure({ author: me })] });
 
-<ReviewToolbar editor={editor} />        {/* toggle tracking, prev/next, accept/reject (all) */}
+<ReviewToolbar editor={editor} />        {/* toggle tracking, prev/next, accept/reject (all), current change description */}
 <BubbleMenu editor={editor}><CommentButton editor={editor} /></BubbleMenu>
 <CommentsPanel editor={editor} />        {/* threads: reply, resolve, delete, click to select */}
 ```
 
-`useComments(editorOrStore)` and `useTrackChanges(editor)` expose the same state for custom UIs.
+`ReviewToolbar` steps through insertions, deletions, formatting and block changes and shows the current one's author and description (e.g. "Ada: Changed Paragraph to Heading 2"); hide it with `showDescription={false}` or restyle it with `descriptionClassName`. `useComments(editorOrStore)` and `useTrackChanges(editor)` expose the same state for custom UIs (each change has `type` and `description`).
 
-`useEditor({ fileImport: true, richClipboard: true })` imports dropped/pasted `.md`, `.html`, `.txt` and `.rtf` files at the drop position and copies lossless slices between editors. `useFileImport(editor)` returns `{ openFilePicker, importFiles, accept, isImporting, error }` for an import button. `usePromptEditor({ fileImport: true })` imports dropped files as plain text.
+`useEditor({ fileImport: true, richClipboard: true })` imports dropped/pasted `.md`, `.html`, `.txt`, `.rtf` and `.docx` files (plus any adapter you register, e.g. PDF or zipped exports) at the drop position and copies lossless slices between editors. `useFileImport(editor)` returns `{ openFilePicker, importFiles, accept, isImporting, error }` for an import button. `usePromptEditor({ fileImport: true })` imports dropped files as plain text.
 
 `useAgentToolProvider(registry, provider)` registers an agent tool provider (see `ToolRegistry` in `@pixerate/editor/agent`) while the component is mounted. Memoize the provider:
 
@@ -88,9 +88,10 @@ useAgentToolProvider(registry, provider);
 
 | Import | Exports |
 | :--- | :--- |
-| `@pixerate/editor-react` | `usePromptEditor`, `useEditor`, `EditorContent`, `BubbleMenu`, `TemplateRenderer`, `useHistory`, `useHistoryShortcuts`, `useNavigationGuard`, `useDismissGuard`, `EditorSlotsProvider` / `useEditorSlots`, `SpreadsheetEditor` / `useSpreadsheetEditor`, `FormulaHints`, `DirtyTracker` |
+| `@pixerate/editor-react` | `usePromptEditor`, `useEditor`, `EditorContent`, `BubbleMenu`, `TemplateRenderer`, `useHistory`, `useHistoryDirty`, `useHistoryShortcuts`, `useNavigationGuard`, `useDismissGuard`, `EditorSlotsProvider` / `useEditorSlots`, `SpreadsheetEditor` / `useSpreadsheetEditor`, `FormulaHints`, `DirtyTracker` |
 | `@pixerate/editor-react/spreadsheet` | `SpreadsheetEditor`, `useSpreadsheetEditor`, `useSpreadsheetTableInteractions`, `FormulaHints`, `SpreadsheetContextMenu`, `SpreadsheetGroupRow` (also re-exported from the root entry) |
 | `@pixerate/editor-react/image-editor` | `ImageEditor`, `useImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, and `onInpaint` / `onRemoveBackground` AI hooks |
+| `@pixerate/editor-react/commands` | `CommandPalette`, `useCommandPalette` (`hotkey: "Mod+K"`), `useCommandShortcuts`, `useRegisterCommands` over a `CommandRegistry` from `@pixerate/editor/commands` (also re-exported from the root entry) |
 | `@pixerate/editor-react/canvas` | `useCanvasGraph`, `useCanvasLayout`, `useCanvasClipboard`, `useCanvasDocking`, `useCanvasShortcuts`, `useCanvasExplosion`, `useStreamingCanvas`, `AgentPresenceLayer`, plus the pure layout helpers from `@pixerate/editor/canvas` |
 
 ## Styling (Tailwind CSS required)

package/dist/canvas/index.cjs

@@ -21,72 +21,122 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var canvas_exports = {};
 __export(canvas_exports, {
   AgentPresenceLayer: () => AgentPresenceLayer,
-  CONNECTION_LINE_TYPES: () => import_canvas8.CONNECTION_LINE_TYPES,
+  CONNECTION_LINE_TYPES: () => import_canvas11.CONNECTION_LINE_TYPES,
   CanvasGuidesLayer: () => CanvasGuidesLayer,
-  CanvasScenesStore: () => import_canvas8.CanvasScenesStore,
-  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas8.DEFAULT_ARRANGE_SHORTCUTS,
-  ManualClock: () => import_canvas9.ManualClock,
-  alignNodes: () => import_canvas8.alignNodes,
-  applyNodeUpdates: () => import_canvas8.applyNodeUpdates,
-  blendLayout: () => import_canvas9.blendLayout,
-  boundsOf: () => import_canvas9.boundsOf,
-  calculateDagreReflowDisplacement: () => import_canvas9.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas9.calculateDirectionalDisplacement,
-  canvasHeight: () => import_canvas9.canvasHeight,
-  centerNodes: () => import_canvas9.centerNodes,
-  centre: () => import_canvas9.centre,
-  computeNodesBoundingBox: () => import_canvas9.computeNodesBoundingBox,
-  computeSnapGuides: () => import_canvas8.computeSnapGuides,
-  connectedOnly: () => import_canvas9.connectedOnly,
-  createBezierTrajectory: () => import_canvas9.createBezierTrajectory,
-  createCanvasScenesStore: () => import_canvas8.createCanvasScenesStore,
-  createFanOutTrajectory: () => import_canvas9.createFanOutTrajectory,
-  createGuideIndex: () => import_canvas8.createGuideIndex,
-  createNodeGuideIndex: () => import_canvas8.createNodeGuideIndex,
-  defaultEasing: () => import_canvas9.defaultEasing,
-  distributeNodes: () => import_canvas8.distributeNodes,
-  ensureLayout: () => import_canvas9.ensureLayout,
-  estimateCanvasHeight: () => import_canvas9.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas9.estimateNodeSize,
-  findConnectorSnap: () => import_canvas8.findConnectorSnap,
-  fitViewportToNodes: () => import_canvas8.fitViewportToNodes,
-  fitViewportToRect: () => import_canvas8.fitViewportToRect,
-  flowSide: () => import_canvas9.flowSide,
-  getAbsolutePosition: () => import_canvas8.getAbsolutePosition,
-  getCenteredNodePosition: () => import_canvas9.getCenteredNodePosition,
-  getLayoutedNodes: () => import_canvas9.getLayoutedNodes,
-  getNodeRect: () => import_canvas8.getNodeRect,
-  getNodeSize: () => import_canvas8.getNodeSize,
-  handlePoint: () => import_canvas8.handlePoint,
-  invertNodeUpdates: () => import_canvas8.invertNodeUpdates,
-  isEventFromTextInput: () => import_canvas9.isEventFromTextInput,
-  isLocked: () => import_canvas8.isLocked,
-  isValidCanvasNode: () => import_canvas9.isValidCanvasNode,
-  isValidUrl: () => import_canvas9.isValidUrl,
-  layoutBounds: () => import_canvas9.layoutBounds,
-  linearPositionTrajectory: () => import_canvas9.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas9.linearTrajectory,
-  lockNodes: () => import_canvas8.lockNodes,
-  matchArrangeShortcut: () => import_canvas8.matchArrangeShortcut,
-  matchSize: () => import_canvas8.matchSize,
-  nearestHandlePositions: () => import_canvas8.nearestHandlePositions,
-  oppositePosition: () => import_canvas8.oppositePosition,
-  overlaps: () => import_canvas9.overlaps,
-  parseCanvasClipboardData: () => import_canvas9.parseCanvasClipboardData,
-  parseCanvasScenes: () => import_canvas8.parseCanvasScenes,
-  placeBeside: () => import_canvas9.placeBeside,
-  positionToSide: () => import_canvas8.positionToSide,
-  readStyleSize: () => import_canvas8.readStyleSize,
-  realClock: () => import_canvas9.realClock,
-  remapPastedNodes: () => import_canvas9.remapPastedNodes,
-  reorderNodes: () => import_canvas8.reorderNodes,
-  repositionNodesTo: () => import_canvas9.repositionNodesTo,
-  runMultiNodeTransition: () => import_canvas9.runMultiNodeTransition,
-  serializeCanvasNodes: () => import_canvas9.serializeCanvasNodes,
-  sideToPosition: () => import_canvas8.sideToPosition,
-  snapNodeDrag: () => import_canvas8.snapNodeDrag,
-  toggleLockNodes: () => import_canvas8.toggleLockNodes,
-  unlockNodes: () => import_canvas8.unlockNodes,
+  CanvasScenesStore: () => import_canvas11.CanvasScenesStore,
+  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas11.DEFAULT_ARRANGE_SHORTCUTS,
+  ManualClock: () => import_canvas13.ManualClock,
+  RESIZE_HANDLES: () => import_canvas10.RESIZE_HANDLES,
+  SHAPE_DATA_KEY: () => import_canvas12.SHAPE_DATA_KEY,
+  SHAPE_KINDS: () => import_canvas12.SHAPE_KINDS,
+  SHAPE_NODE_TYPE: () => import_canvas12.SHAPE_NODE_TYPE,
+  SHAPE_OPERATIONS: () => import_canvas12.SHAPE_OPERATIONS,
+  ShapeNode: () => ShapeNode,
+  alignNodes: () => import_canvas11.alignNodes,
+  applyNodeUpdates: () => import_canvas11.applyNodeUpdates,
+  applyShapeCombination: () => import_canvas12.applyShapeCombination,
+  blendLayout: () => import_canvas13.blendLayout,
+  boundsOf: () => import_canvas13.boundsOf,
+  calculateDagreReflowDisplacement: () => import_canvas13.calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement: () => import_canvas13.calculateDirectionalDisplacement,
+  canCombineShapeNodes: () => import_canvas12.canCombineShapeNodes,
+  canvasHeight: () => import_canvas13.canvasHeight,
+  centerNodes: () => import_canvas13.centerNodes,
+  centre: () => import_canvas13.centre,
+  combineShapeNodes: () => import_canvas12.combineShapeNodes,
+  computeNodesBoundingBox: () => import_canvas13.computeNodesBoundingBox,
+  computeSnapGuides: () => import_canvas11.computeSnapGuides,
+  connectedOnly: () => import_canvas13.connectedOnly,
+  createBezierTrajectory: () => import_canvas13.createBezierTrajectory,
+  createCanvasScenesStore: () => import_canvas11.createCanvasScenesStore,
+  createFanOutTrajectory: () => import_canvas13.createFanOutTrajectory,
+  createGuideIndex: () => import_canvas11.createGuideIndex,
+  createNodeGuideIndex: () => import_canvas11.createNodeGuideIndex,
+  cubicPointAt: () => import_canvas10.cubicPointAt,
+  cubicsToPathData: () => import_canvas10.cubicsToPathData,
+  defaultEasing: () => import_canvas13.defaultEasing,
+  distributeNodes: () => import_canvas11.distributeNodes,
+  dividePolygons: () => import_canvas12.dividePolygons,
+  ensureLayout: () => import_canvas13.ensureLayout,
+  estimateCanvasHeight: () => import_canvas13.estimateCanvasHeight,
+  estimateNodeSize: () => import_canvas13.estimateNodeSize,
+  findConnectorSnap: () => import_canvas11.findConnectorSnap,
+  fitCubicRun: () => import_canvas10.fitCubicRun,
+  fitCubics: () => import_canvas10.fitCubics,
+  fitFreehandPath: () => import_canvas10.fitFreehandPath,
+  fitPathData: () => import_canvas10.fitPathData,
+  fitViewportToNodes: () => import_canvas11.fitViewportToNodes,
+  fitViewportToRect: () => import_canvas11.fitViewportToRect,
+  flattenSvgPath: () => import_canvas12.flattenSvgPath,
+  flowSide: () => import_canvas13.flowSide,
+  getAbsolutePosition: () => import_canvas11.getAbsolutePosition,
+  getCenteredNodePosition: () => import_canvas13.getCenteredNodePosition,
+  getLayoutedNodes: () => import_canvas13.getLayoutedNodes,
+  getNodeRect: () => import_canvas11.getNodeRect,
+  getNodeShape: () => import_canvas12.getNodeShape,
+  getNodeSize: () => import_canvas11.getNodeSize,
+  getResizingNodeRect: () => import_canvas10.getResizingNodeRect,
+  getShapeRenderData: () => import_canvas12.getShapeRenderData,
+  getShapeSvg: () => import_canvas12.getShapeSvg,
+  handlePoint: () => import_canvas11.handlePoint,
+  inferResizeHandle: () => import_canvas10.inferResizeHandle,
+  intersectPolygons: () => import_canvas12.intersectPolygons,
+  invertNodeUpdates: () => import_canvas11.invertNodeUpdates,
+  isEventFromTextInput: () => import_canvas13.isEventFromTextInput,
+  isLocked: () => import_canvas11.isLocked,
+  isMeasureModifierHeld: () => import_canvas10.isMeasureModifierHeld,
+  isShapeDescription: () => import_canvas12.isShapeDescription,
+  isShapeNode: () => import_canvas12.isShapeNode,
+  isStraightCubic: () => import_canvas10.isStraightCubic,
+  isValidCanvasNode: () => import_canvas13.isValidCanvasNode,
+  isValidUrl: () => import_canvas13.isValidUrl,
+  layoutBounds: () => import_canvas13.layoutBounds,
+  linearPositionTrajectory: () => import_canvas13.linearPositionTrajectory,
+  linearTrajectory: () => import_canvas13.linearTrajectory,
+  lockNodes: () => import_canvas11.lockNodes,
+  matchArrangeShortcut: () => import_canvas11.matchArrangeShortcut,
+  matchSize: () => import_canvas11.matchSize,
+  measureBetween: () => import_canvas10.measureBetween,
+  measureLabel: () => import_canvas10.measureLabel,
+  measureSelection: () => import_canvas10.measureSelection,
+  measureToLine: () => import_canvas10.measureToLine,
+  multiPolygonArea: () => import_canvas12.multiPolygonArea,
+  multiPolygonBounds: () => import_canvas12.multiPolygonBounds,
+  nearestHandlePositions: () => import_canvas11.nearestHandlePositions,
+  oppositePosition: () => import_canvas11.oppositePosition,
+  overlaps: () => import_canvas13.overlaps,
+  parseCanvasClipboardData: () => import_canvas13.parseCanvasClipboardData,
+  parseCanvasScenes: () => import_canvas11.parseCanvasScenes,
+  parseSvgPath: () => import_canvas12.parseSvgPath,
+  placeBeside: () => import_canvas13.placeBeside,
+  pointInMultiPolygon: () => import_canvas12.pointInMultiPolygon,
+  pointInRings: () => import_canvas12.pointInRings,
+  polygonArea: () => import_canvas12.polygonArea,
+  polygonBoolean: () => import_canvas12.polygonBoolean,
+  polygonToSvgPath: () => import_canvas12.polygonToSvgPath,
+  positionToSide: () => import_canvas11.positionToSide,
+  readStyleSize: () => import_canvas11.readStyleSize,
+  realClock: () => import_canvas13.realClock,
+  remapPastedNodes: () => import_canvas13.remapPastedNodes,
+  reorderNodes: () => import_canvas11.reorderNodes,
+  repositionNodesTo: () => import_canvas13.repositionNodesTo,
+  resizeHandleAxes: () => import_canvas10.resizeHandleAxes,
+  revertShapeCombination: () => import_canvas12.revertShapeCombination,
+  ringSignedArea: () => import_canvas12.ringSignedArea,
+  runMultiNodeTransition: () => import_canvas13.runMultiNodeTransition,
+  serializeCanvasNodes: () => import_canvas13.serializeCanvasNodes,
+  shapeNodeToPolygon: () => import_canvas12.shapeNodeToPolygon,
+  shapeToPolygon: () => import_canvas12.shapeToPolygon,
+  sideToPosition: () => import_canvas11.sideToPosition,
+  simplifyRing: () => import_canvas12.simplifyRing,
+  snapNodeDrag: () => import_canvas11.snapNodeDrag,
+  snapNodeResize: () => import_canvas10.snapNodeResize,
+  snapResize: () => import_canvas10.snapResize,
+  snapToGrid: () => import_canvas10.snapToGrid,
+  subtractPolygons: () => import_canvas12.subtractPolygons,
+  toggleLockNodes: () => import_canvas11.toggleLockNodes,
+  unionPolygons: () => import_canvas12.unionPolygons,
+  unlockNodes: () => import_canvas11.unlockNodes,
   useCanvasArrange: () => useCanvasArrange,
   useCanvasArrangeShortcuts: () => useCanvasArrangeShortcuts,
   useCanvasClipboard: () => useCanvasClipboard,
@@ -94,10 +144,12 @@ __export(canvas_exports, {
   useCanvasExplosion: () => useCanvasExplosion,
   useCanvasGraph: () => useCanvasGraph,
   useCanvasLayout: () => useCanvasLayout,
+  useCanvasMeasure: () => useCanvasMeasure,
   useCanvasScenes: () => useCanvasScenes,
   useCanvasShortcuts: () => useCanvasShortcuts,
   useStreamingCanvas: () => useStreamingCanvas,
-  withStyleSize: () => import_canvas8.withStyleSize
+  withStyleSize: () => import_canvas11.withStyleSize,
+  xorPolygons: () => import_canvas12.xorPolygons
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -976,12 +1028,13 @@ function CanvasGuidesLayer({
   viewport = DEFAULT_VIEWPORT,
   color = "#f59e0b",
   spacingColor = "#ec4899",
+  measureColor = "#ef4444",
   className = ""
 }) {
   if (!guides || guides.length === 0) return null;
   const sx = (x) => x * viewport.zoom + viewport.x;
   const sy = (y) => y * viewport.zoom + viewport.y;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "svg",
     {
       className: `pixerate-canvas-guides ${className}`,
@@ -995,28 +1048,168 @@ function CanvasGuidesLayer({
         zIndex: 10
       },
       "aria-hidden": "true",
-      children: guides.map((guide, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "line",
-        {
-          "data-kind": guide.kind,
-          x1: sx(guide.x1),
-          y1: sy(guide.y1),
-          x2: sx(guide.x2),
-          y2: sy(guide.y2),
-          stroke: guide.kind === "spacing" ? spacingColor : color,
-          strokeWidth: 1,
-          strokeDasharray: guide.kind === "centre" ? "4 3" : void 0,
-          shapeRendering: "crispEdges"
-        },
-        i
-      ))
+      children: [
+        guides.map((guide, i) => {
+          const measuring = guide.kind === "measure" || guide.kind === "extension";
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "line",
+            {
+              "data-kind": guide.kind,
+              x1: sx(guide.x1),
+              y1: sy(guide.y1),
+              x2: sx(guide.x2),
+              y2: sy(guide.y2),
+              stroke: measuring ? measureColor : guide.kind === "spacing" ? spacingColor : color,
+              strokeWidth: 1,
+              strokeDasharray: guide.kind === "centre" ? "4 3" : guide.kind === "extension" ? "3 3" : void 0,
+              shapeRendering: "crispEdges"
+            },
+            i
+          );
+        }),
+        guides.map((guide, i) => {
+          if (!guide.label) return null;
+          const x = sx((guide.x1 + guide.x2) / 2);
+          const y = sy((guide.y1 + guide.y2) / 2);
+          const vertical = guide.orientation === "vertical";
+          const width = guide.label.length * 6.5 + 8;
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "g",
+            {
+              className: "pixerate-canvas-guides__label",
+              "data-label": guide.label,
+              transform: `translate(${vertical ? x + 4 : x - width / 2} ${vertical ? y - 8 : y + 4})`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width, height: 16, rx: 3, fill: measureColor }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "text",
+                  {
+                    x: width / 2,
+                    y: 11.5,
+                    textAnchor: "middle",
+                    fontSize: 11,
+                    fontFamily: "system-ui, sans-serif",
+                    fill: "#fff",
+                    children: guide.label
+                  }
+                )
+              ]
+            },
+            `label-${i}`
+          );
+        })
+      ]
     }
   );
 }
 
-// src/canvas/index.ts
+// src/canvas/useCanvasMeasure.ts
+var import_react10 = require("react");
 var import_canvas8 = require("@pixerate/editor/canvas");
+var EMPTY = { guides: [], target: null, selection: null };
+function useCanvasMeasure(options) {
+  const { nodes, enabled = true, requireModifier = true, targetElement, rectOptions } = options;
+  const [hoveredId, setHoveredId] = (0, import_react10.useState)(null);
+  const [modifier, setModifier] = (0, import_react10.useState)(false);
+  const optionsRef = (0, import_react10.useRef)(options);
+  optionsRef.current = options;
+  (0, import_react10.useEffect)(() => {
+    if (!enabled) return;
+    const target = targetElement ?? (typeof window !== "undefined" ? window : null);
+    if (!target) return;
+    const onKey = (event) => setModifier((0, import_canvas8.isMeasureModifierHeld)(event));
+    const onBlur = () => setModifier(false);
+    target.addEventListener("keydown", onKey);
+    target.addEventListener("keyup", onKey);
+    const win = typeof window !== "undefined" ? window : null;
+    win?.addEventListener("blur", onBlur);
+    return () => {
+      target.removeEventListener("keydown", onKey);
+      target.removeEventListener("keyup", onKey);
+      win?.removeEventListener("blur", onBlur);
+    };
+  }, [enabled, targetElement]);
+  const active = enabled && (!requireModifier || modifier);
+  const result = (0, import_react10.useMemo)(() => {
+    if (!active) return EMPTY;
+    const ids = optionsRef.current.getSelectedIds?.() ?? nodes.filter((n) => n.selected).map((n) => n.id);
+    return (0, import_canvas8.measureSelection)(nodes, ids, hoveredId, rectOptions);
+  }, [active, nodes, hoveredId, rectOptions]);
+  const onNodeMouseEnter = (0, import_react10.useCallback)((event, node) => {
+    setHoveredId(node.id);
+    if (event && typeof event.altKey === "boolean") setModifier(event.altKey);
+  }, []);
+  const onNodeMouseLeave = (0, import_react10.useCallback)((_event, node) => {
+    setHoveredId((current) => current === node.id ? null : current);
+  }, []);
+  return {
+    /** Measuring lines (flow coordinates) to pass to `<CanvasGuidesLayer>`. */
+    guides: result.guides,
+    /** The box measured to (outline it), or `null`. */
+    target: result.target,
+    /** Whether measuring is showing (enabled and Alt held, unless `requireModifier: false`). */
+    active,
+    hoveredId,
+    setHoveredId,
+    /** Sets the modifier state by hand (e.g. from a toolbar toggle). */
+    setModifier,
+    onNodeMouseEnter,
+    onNodeMouseLeave
+  };
+}
+
+// src/canvas/index.ts
+var import_canvas10 = require("@pixerate/editor/canvas");
+var import_canvas11 = require("@pixerate/editor/canvas");
+
+// src/canvas/ShapeNode.tsx
 var import_canvas9 = require("@pixerate/editor/canvas");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ShapeNode({ data, width, height, selected, className = "", children }) {
+  const shape = data?.shape;
+  if (!(0, import_canvas9.isShapeDescription)(shape)) return null;
+  const render = (0, import_canvas9.getShapeRenderData)(shape, { width, height });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `pixerate-shape-node ${className}`.trim(),
+      "data-shape-kind": shape.kind,
+      "data-selected": selected ? "true" : void 0,
+      style: { position: "relative", width: "100%", height: "100%" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "svg",
+          {
+            viewBox: render.viewBox,
+            preserveAspectRatio: "none",
+            width: "100%",
+            height: "100%",
+            style: { display: "block", overflow: "visible" },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                d: render.d,
+                transform: render.transform,
+                fill: render.fill,
+                fillRule: render.fillRule,
+                stroke: render.stroke,
+                strokeWidth: render.strokeWidth,
+                opacity: render.opacity,
+                vectorEffect: "non-scaling-stroke"
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/canvas/index.ts
+var import_canvas12 = require("@pixerate/editor/canvas");
+var import_canvas13 = require("@pixerate/editor/canvas");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AgentPresenceLayer,
@@ -1025,15 +1218,24 @@ var import_canvas9 = require("@pixerate/editor/canvas");
   CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
   ManualClock,
+  RESIZE_HANDLES,
+  SHAPE_DATA_KEY,
+  SHAPE_KINDS,
+  SHAPE_NODE_TYPE,
+  SHAPE_OPERATIONS,
+  ShapeNode,
   alignNodes,
   applyNodeUpdates,
+  applyShapeCombination,
   blendLayout,
   boundsOf,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement,
+  canCombineShapeNodes,
   canvasHeight,
   centerNodes,
   centre,
+  combineShapeNodes,
   computeNodesBoundingBox,
   computeSnapGuides,
   connectedOnly,
@@ -1042,24 +1244,42 @@ var import_canvas9 = require("@pixerate/editor/canvas");
   createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
+  cubicPointAt,
+  cubicsToPathData,
   defaultEasing,
   distributeNodes,
+  dividePolygons,
   ensureLayout,
   estimateCanvasHeight,
   estimateNodeSize,
   findConnectorSnap,
+  fitCubicRun,
+  fitCubics,
+  fitFreehandPath,
+  fitPathData,
   fitViewportToNodes,
   fitViewportToRect,
+  flattenSvgPath,
   flowSide,
   getAbsolutePosition,
   getCenteredNodePosition,
   getLayoutedNodes,
   getNodeRect,
+  getNodeShape,
   getNodeSize,
+  getResizingNodeRect,
+  getShapeRenderData,
+  getShapeSvg,
   handlePoint,
+  inferResizeHandle,
+  intersectPolygons,
   invertNodeUpdates,
   isEventFromTextInput,
   isLocked,
+  isMeasureModifierHeld,
+  isShapeDescription,
+  isShapeNode,
+  isStraightCubic,
   isValidCanvasNode,
   isValidUrl,
   layoutBounds,
@@ -1068,23 +1288,46 @@ var import_canvas9 = require("@pixerate/editor/canvas");
   lockNodes,
   matchArrangeShortcut,
   matchSize,
+  measureBetween,
+  measureLabel,
+  measureSelection,
+  measureToLine,
+  multiPolygonArea,
+  multiPolygonBounds,
   nearestHandlePositions,
   oppositePosition,
   overlaps,
   parseCanvasClipboardData,
   parseCanvasScenes,
+  parseSvgPath,
   placeBeside,
+  pointInMultiPolygon,
+  pointInRings,
+  polygonArea,
+  polygonBoolean,
+  polygonToSvgPath,
   positionToSide,
   readStyleSize,
   realClock,
   remapPastedNodes,
   reorderNodes,
   repositionNodesTo,
+  resizeHandleAxes,
+  revertShapeCombination,
+  ringSignedArea,
   runMultiNodeTransition,
   serializeCanvasNodes,
+  shapeNodeToPolygon,
+  shapeToPolygon,
   sideToPosition,
+  simplifyRing,
   snapNodeDrag,
+  snapNodeResize,
+  snapResize,
+  snapToGrid,
+  subtractPolygons,
   toggleLockNodes,
+  unionPolygons,
   unlockNodes,
   useCanvasArrange,
   useCanvasArrangeShortcuts,
@@ -1093,9 +1336,11 @@ var import_canvas9 = require("@pixerate/editor/canvas");
   useCanvasExplosion,
   useCanvasGraph,
   useCanvasLayout,
+  useCanvasMeasure,
   useCanvasScenes,
   useCanvasShortcuts,
   useStreamingCanvas,
-  withStyleSize
+  withStyleSize,
+  xorPolygons
 });
 //# sourceMappingURL=index.cjs.map