canvu-react 0.3.16 → 0.3.19

package/dist/react.cjs

@@ -2,6 +2,9 @@
 
 var getStroke = require('perfect-freehand');
 var react = require('react');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
@@ -1510,6 +1513,517 @@ function useCanvuChromeContext() {
   return react.useContext(CanvuChromeContext);
 }
 
+// src/scene/clone-item.ts
+init_shape_builders();
+function cloneVectorSceneItemWithNewId(item) {
+  const id = createShapeId();
+  const copy = JSON.parse(JSON.stringify(item));
+  let next = { ...copy, id };
+  if (next.toolKind === "arrow" && next.line) {
+    next = {
+      ...next,
+      childrenSvg: buildArrowSvg(id, next.line, resolveStrokeStyle(next))
+    };
+  }
+  if (next.toolKind === "text" && next.text !== void 0) {
+    return rebuildItemSvg(next);
+  }
+  if (next.toolKind === "custom" && next.customInnerSvg && next.customIntrinsicSize) {
+    return rebuildItemSvg(next);
+  }
+  return next;
+}
+function cloneVectorSceneItemsWithNewIds(items) {
+  return items.map(cloneVectorSceneItemWithNewId);
+}
+
+// src/scene/managed-images.ts
+var MANAGED_KEY = "managed";
+var STACK_GAP_WORLD = 16;
+function isManagedImage(item) {
+  const data = item.pluginData;
+  return data != null && data[MANAGED_KEY] === true;
+}
+function markImageAsManaged(item) {
+  return {
+    ...item,
+    locked: true,
+    pluginData: { ...item.pluginData ?? {}, [MANAGED_KEY]: true }
+  };
+}
+function restackManagedImages(items) {
+  let anchor;
+  for (const item of items) {
+    if (!isManagedImage(item)) continue;
+    if (!anchor || item.bounds.y < anchor.bounds.y) anchor = item;
+  }
+  if (!anchor) return [...items];
+  const anchorCenterX = anchor.bounds.x + anchor.bounds.width / 2;
+  const anchorTopY = anchor.bounds.y;
+  let cursorY = anchorTopY;
+  return items.map((item) => {
+    if (!isManagedImage(item)) return item;
+    const newX = anchorCenterX - item.bounds.width / 2;
+    const newY = cursorY;
+    cursorY = newY + item.bounds.height + STACK_GAP_WORLD;
+    if (item.bounds.x === newX && item.bounds.y === newY) return item;
+    return {
+      ...item,
+      x: newX,
+      y: newY,
+      bounds: { ...item.bounds, x: newX, y: newY }
+    };
+  });
+}
+function copyManagedImage(items, id) {
+  const idx = items.findIndex((i) => i.id === id);
+  if (idx < 0) return [...items];
+  const source = items[idx];
+  if (!source) return [...items];
+  const clone = markImageAsManaged(cloneVectorSceneItemWithNewId(source));
+  const inserted = [...items.slice(0, idx + 1), clone, ...items.slice(idx + 1)];
+  return restackManagedImages(inserted);
+}
+function rotateManagedImage(items, id) {
+  return items.map(
+    (i) => i.id === id ? { ...i, rotation: ((i.rotation ?? 0) + Math.PI / 2) % (Math.PI * 2) } : i
+  );
+}
+function deleteManagedImage(items, id) {
+  return restackManagedImages(items.filter((i) => i.id !== id));
+}
+function reorderManagedImages(items, orderedManagedIds) {
+  const managedSlots = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item && isManagedImage(item)) managedSlots.push(i);
+  }
+  if (managedSlots.length !== orderedManagedIds.length) {
+    return [...items];
+  }
+  const byId = new Map(items.map((i) => [i.id, i]));
+  const next = [...items];
+  managedSlots.forEach((slot, k) => {
+    const orderedId = orderedManagedIds[k];
+    if (orderedId === void 0) return;
+    const replacement = byId.get(orderedId);
+    if (replacement) next[slot] = replacement;
+  });
+  return restackManagedImages(next);
+}
+var panelStyle = {
+  width: "fit-content",
+  maxHeight: "min(85dvh, 820px)",
+  overflow: "auto",
+  backgroundColor: "#ffffff",
+  border: "1px solid #e2e8f0",
+  borderRadius: 10,
+  boxShadow: "0 10px 40px rgba(15, 23, 42, 0.12)",
+  fontFamily: "system-ui, sans-serif",
+  fontSize: 14,
+  color: "#0f172a"
+};
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 8,
+  padding: "8px 8px 8px 14px",
+  borderBottom: "1px solid #e2e8f0",
+  fontWeight: 600,
+  letterSpacing: "0.02em"
+};
+var headerTitleStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 8
+};
+var countStyle = {
+  color: "#64748b",
+  fontWeight: 500
+};
+var listStyle = {
+  display: "flex",
+  flexDirection: "column",
+  padding: 8,
+  gap: 6
+};
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  padding: "10px 12px",
+  borderRadius: 10
+};
+var handleStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 28,
+  height: 128,
+  border: "none",
+  background: "transparent",
+  color: "#94a3b8",
+  cursor: "grab",
+  touchAction: "none",
+  padding: 0
+};
+var thumbBoxStyle = {
+  width: 128,
+  height: 128,
+  flex: "0 0 auto",
+  overflow: "hidden",
+  borderRadius: 8,
+  backgroundColor: "#e2e8f0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var thumbImgStyle = {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  display: "block"
+};
+var actionsColumnStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 4
+};
+var actionButtonStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 32,
+  height: 32,
+  border: "none",
+  borderRadius: 6,
+  background: "transparent",
+  color: "#0f172a",
+  cursor: "pointer",
+  padding: 0
+};
+var tooltipWrapperStyle = {
+  position: "relative",
+  display: "inline-flex"
+};
+var tooltipBubbleStyle = {
+  position: "absolute",
+  right: "calc(100% + 8px)",
+  top: "50%",
+  transform: "translateY(-50%)",
+  padding: "4px 8px",
+  backgroundColor: "#0f172a",
+  color: "#ffffff",
+  fontSize: 11,
+  fontWeight: 500,
+  borderRadius: 4,
+  whiteSpace: "nowrap",
+  pointerEvents: "none",
+  zIndex: 100,
+  boxShadow: "0 2px 8px rgba(15, 23, 42, 0.25)"
+};
+var dangerColor = "#b91c1c";
+var collapseButtonStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 32,
+  height: 32,
+  border: "none",
+  borderRadius: 8,
+  background: "transparent",
+  color: "#0f172a",
+  cursor: "pointer",
+  padding: 0
+};
+var collapsedButtonStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 6,
+  height: 44,
+  minWidth: 44,
+  padding: "0 12px",
+  border: "1px solid #e2e8f0",
+  borderRadius: 22,
+  background: "#ffffff",
+  color: "#0f172a",
+  cursor: "pointer",
+  fontFamily: "system-ui, sans-serif",
+  fontSize: 13,
+  fontWeight: 600,
+  boxShadow: "0 8px 24px rgba(15, 23, 42, 0.12)"
+};
+var collapsedCountStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minWidth: 20,
+  height: 20,
+  padding: "0 6px",
+  borderRadius: 10,
+  backgroundColor: "#0f172a",
+  color: "#ffffff",
+  fontSize: 11,
+  fontWeight: 600
+};
+var defaultLabels = {
+  title: "Images",
+  dragHandle: "Drag to reorder",
+  focus: "Focus on canvas",
+  copy: "Copy",
+  rotate: "Rotate",
+  delete: "Delete",
+  collapse: "Collapse images menu",
+  expand: "Open images menu"
+};
+function ImagesMenu({
+  items,
+  onItemsChange,
+  onFocusItem,
+  labels
+}) {
+  const managed = react.useMemo(() => items.filter(isManagedImage), [items]);
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, {
+      activationConstraint: { distance: 4 }
+    })
+  );
+  const [collapsed, setCollapsed] = react.useState(false);
+  if (managed.length === 0) {
+    return null;
+  }
+  const resolvedLabels = { ...defaultLabels, ...labels };
+  if (collapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "images-menu-collapsed",
+        style: collapsedButtonStyle,
+        "aria-label": resolvedLabels.expand,
+        title: resolvedLabels.expand,
+        onClick: () => setCollapsed(false),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Images, { size: 20 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: collapsedCountStyle, children: managed.length })
+        ]
+      }
+    );
+  }
+  const onDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = managed.findIndex((i) => i.id === active.id);
+    const newIndex = managed.findIndex((i) => i.id === over.id);
+    if (oldIndex < 0 || newIndex < 0) return;
+    const reorderedManaged = sortable.arrayMove(managed, oldIndex, newIndex);
+    const orderedIds = reorderedManaged.map((i) => i.id);
+    onItemsChange(reorderManagedImages(items, orderedIds));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "data-slot": "images-menu",
+      style: panelStyle,
+      "aria-label": resolvedLabels.title,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: headerTitleStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: resolvedLabels.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: countStyle, children: managed.length })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              style: collapseButtonStyle,
+              "aria-label": resolvedLabels.collapse,
+              title: resolvedLabels.collapse,
+              onClick: () => setCollapsed(true),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 20 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.DndContext, { sensors, onDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(
+          sortable.SortableContext,
+          {
+            items: managed.map((i) => i.id),
+            strategy: sortable.verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: listStyle, children: managed.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              ImagesMenuRow,
+              {
+                item,
+                labels: resolvedLabels,
+                onFocus: onFocusItem ? () => onFocusItem(item) : void 0,
+                onCopy: () => onItemsChange(copyManagedImage(items, item.id)),
+                onRotate: () => onItemsChange(rotateManagedImage(items, item.id)),
+                onDelete: () => onItemsChange(deleteManagedImage(items, item.id))
+              },
+              item.id
+            )) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ImagesMenuRow({
+  item,
+  labels,
+  onFocus,
+  onCopy,
+  onRotate,
+  onDelete
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({ id: item.id });
+  const wrapperStyle = {
+    ...rowStyle,
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    background: isDragging ? "#eef2f7" : "transparent",
+    opacity: isDragging ? 0.85 : 1
+  };
+  const src = item.imageThumbnailHref ?? item.imageRasterHref ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setNodeRef, style: wrapperStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        style: handleStyle,
+        "aria-label": labels.dragHandle,
+        title: labels.dragHandle,
+        ...attributes,
+        ...listeners,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { size: 18 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(FocusTarget, { label: labels.focus, onFocus, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: thumbBoxStyle, children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", style: thumbImgStyle, draggable: false }) : null }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: actionsColumnStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ImagesMenuAction, { label: labels.copy, onClick: onCopy, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { size: 18 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ImagesMenuAction, { label: labels.rotate, onClick: onRotate, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCw, { size: 18 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ImagesMenuAction, { label: labels.delete, onClick: onDelete, danger: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 18 }) })
+    ] })
+  ] });
+}
+var focusTargetBaseStyle = {
+  display: "flex",
+  alignItems: "center",
+  flex: "0 0 auto",
+  padding: 0,
+  border: "none",
+  background: "transparent",
+  textAlign: "left",
+  color: "inherit",
+  font: "inherit"
+};
+function FocusTarget({ label, onFocus, children }) {
+  if (!onFocus) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...focusTargetBaseStyle, cursor: "default" }, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      style: { ...focusTargetBaseStyle, cursor: "pointer" },
+      "aria-label": label,
+      title: label,
+      onClick: onFocus,
+      children
+    }
+  );
+}
+function ImagesMenuAction({
+  label,
+  onClick,
+  danger,
+  children
+}) {
+  const [open, setOpen] = react.useState(false);
+  const style = {
+    ...actionButtonStyle,
+    color: danger ? dangerColor : actionButtonStyle.color
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { style: tooltipWrapperStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        style,
+        "aria-label": label,
+        onClick,
+        onMouseEnter: () => setOpen(true),
+        onMouseLeave: () => setOpen(false),
+        onFocus: () => setOpen(true),
+        onBlur: () => setOpen(false),
+        children
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.jsx("span", { role: "tooltip", style: tooltipBubbleStyle, children: label }) : null
+  ] });
+}
+
+// src/react/board-position.ts
+function getBoardPositionStyle(position, inset = 12, zIndex = 40) {
+  const base2 = { position: "absolute", zIndex };
+  switch (position) {
+    case "fill":
+      return { ...base2, inset };
+    case "top-left":
+    case "left-top":
+      return { ...base2, top: inset, left: inset };
+    case "top-center":
+      return {
+        ...base2,
+        top: inset,
+        left: "50%",
+        transform: "translateX(-50%)"
+      };
+    case "top-right":
+    case "right-top":
+      return { ...base2, top: inset, right: inset };
+    case "bottom-left":
+    case "left-bottom":
+      return { ...base2, bottom: inset, left: inset };
+    case "bottom-center":
+      return {
+        ...base2,
+        bottom: inset,
+        left: "50%",
+        transform: "translateX(-50%)"
+      };
+    case "bottom-right":
+    case "right-bottom":
+      return { ...base2, bottom: inset, right: inset };
+    case "left-center":
+      return {
+        ...base2,
+        left: inset,
+        top: "50%",
+        transform: "translateY(-50%)"
+      };
+    case "right-center":
+      return {
+        ...base2,
+        right: inset,
+        top: "50%",
+        transform: "translateY(-50%)"
+      };
+    case "center":
+      return {
+        ...base2,
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      };
+    default:
+      return base2;
+  }
+}
+
 // src/math/item-transform.ts
 init_rect();
 function getItemRotationRad(item) {
@@ -1571,1452 +2085,1498 @@ function boundsAabbForRotatedItem(item) {
   return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
 
-// src/react/NavMenu.tsx
+// src/react/navmenu/minimap.tsx
 init_rect();
-var shellLook = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 8,
-  minWidth: 160,
-  padding: "10px 12px",
-  borderRadius: 8,
-  border: "1px solid rgba(0,0,0,0.12)",
-  background: "rgba(255,255,255,0.96)",
-  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
-  pointerEvents: "auto"
+var NavMenuMinimapSlotContext = react.createContext(null);
+function noop() {
+}
+function preventMouseDefault(e) {
+  if (e.pointerType === "mouse") {
+    e.preventDefault();
+  }
+}
+var BG = "#ffffff";
+var BORDER_COLOR = "rgba(0,0,0,0.12)";
+var BORDER_RADIUS = 8;
+var btnStyle = {
+  pointerEvents: "auto",
+  width: 36,
+  height: 36,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  fontSize: 18,
+  lineHeight: 1,
+  color: "#18181b",
+  padding: 0,
+  border: "none",
+  outline: "none",
+  background: "none",
+  WebkitTapHighlightColor: "transparent"
+};
+var chevronBtnStyle = {
+  pointerEvents: "auto",
+  width: 24,
+  height: 36,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  fontSize: 12,
+  lineHeight: 1,
+  color: "#52525b",
+  padding: 0,
+  border: "none",
+  outline: "none",
+  background: "none",
+  WebkitTapHighlightColor: "transparent"
+};
+var undoBtnStyle = {
+  ...chevronBtnStyle,
+  width: 30,
+  opacity: 1,
+  color: "#18181b"
 };
 var labelStyle = {
+  fontSize: 10,
+  fontWeight: 600,
+  color: "#52525b",
+  textAlign: "center",
+  userSelect: "none",
+  padding: "2px 0"
+};
+var panelLayoutStyle = {
   display: "flex",
   flexDirection: "column",
+  alignItems: "flex-start",
   gap: 4,
-  fontSize: 11,
-  fontWeight: 600,
-  color: "#52525b"
+  touchAction: "none",
+  pointerEvents: "none",
+  userSelect: "none"
 };
-function normalizeHex(stroke) {
-  if (/^#[0-9A-Fa-f]{6}$/.test(stroke)) return stroke;
-  return "#2563eb";
-}
-function isStylableKind(tk) {
-  return tk === "rect" || tk === "ellipse" || tk === "line" || tk === "arrow" || tk === "draw" || tk === "pencil" || tk === "brush" || tk === "marker" || tk === "text";
-}
-function VectorSelectionInspector({
-  items: itemsProp,
-  activeToolStyle: activeToolStyleProp,
-  onChange: onChangeProp,
-  position = "top-left",
-  inset = 12,
-  zIndex = 24,
+var innerStyle = {
+  pointerEvents: "auto",
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 4,
+  background: BG,
+  borderRadius: BORDER_RADIUS,
+  border: `1px solid ${BORDER_COLOR}`,
+  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+  padding: 4
+};
+var minimapSlotStyle = {
+  display: "contents"
+};
+var MINIMAP_W = 180;
+var MINIMAP_H = 120;
+var PADDING = 12;
+var ITEM_FILL = "rgba(0,0,0,0.08)";
+var ITEM_STROKE = "rgba(0,0,0,0.15)";
+var VIEWPORT_FILL = "rgba(59,130,246,0.08)";
+var VIEWPORT_STROKE = "#3b82f6";
+function NavMenuMinimap({
   className,
-  style
-}) {
+  defaultExpanded = false,
+  camera: cameraProp,
+  viewportWidth: viewportWidthProp,
+  viewportHeight: viewportHeightProp,
+  items: itemsProp,
+  onRequestRender: onRequestRenderProp
+} = {}) {
   const ctx = useCanvuChromeContext();
-  const items = itemsProp ?? ctx?.selectedItems ?? [];
-  const activeToolStyle = activeToolStyleProp === void 0 ? ctx?.activeToolStyle ?? null : activeToolStyleProp;
-  const onChange = onChangeProp ?? ctx?.onSelectionStyleChange ?? null;
-  if (!onChange) return null;
-  const shell = {
-    ...getBoardPositionStyle(position, inset, zIndex),
-    ...shellLook,
-    ...style
+  const camera = cameraProp ?? ctx?.camera ?? null;
+  const viewportWidth = viewportWidthProp ?? ctx?.viewportWidth ?? 0;
+  const viewportHeight = viewportHeightProp ?? ctx?.viewportHeight ?? 0;
+  const items = itemsProp ?? ctx?.items ?? [];
+  const onRequestRender = onRequestRenderProp ?? ctx?.onRequestRender ?? noop;
+  const slotEl = react.useContext(NavMenuMinimapSlotContext);
+  const [expanded, setExpanded] = react.useState(defaultExpanded);
+  const svgRef = react.useRef(null);
+  const [dragging, setDragging] = react.useState(false);
+  const [mouseDown, setMouseDown] = react.useState(false);
+  const worldBounds = computeWorldBounds(items);
+  const isEmpty = worldBounds.width <= 0 || worldBounds.height <= 0;
+  const scale = Math.min(
+    (MINIMAP_W - PADDING * 2) / Math.max(worldBounds.width, 1),
+    (MINIMAP_H - PADDING * 2) / Math.max(worldBounds.height, 1)
+  );
+  const originX = worldBounds.x;
+  const originY = worldBounds.y;
+  const toMinimapX = (wx) => (wx - originX) * scale + PADDING;
+  const toMinimapY = (wy) => (wy - originY) * scale + PADDING;
+  const toMinimapW = (ww) => ww * scale;
+  const toMinimapH = (wh) => wh * scale;
+  const viewportWorld = camera ? camera.getVisibleWorldRect(viewportWidth, viewportHeight) : { x: 0, y: 0, width: 0, height: 0 };
+  const vpMinimap = {
+    x: toMinimapX(viewportWorld.x),
+    y: toMinimapY(viewportWorld.y),
+    width: toMinimapW(viewportWorld.width),
+    height: toMinimapH(viewportWorld.height)
   };
-  if (activeToolStyle) {
-    const stroke2 = activeToolStyle.stroke;
-    const strokeWidth2 = activeToolStyle.strokeWidth;
-    const hex2 = normalizeHex(stroke2);
-    const showMarkerOpacity2 = activeToolStyle.toolKind === "marker";
-    const opacityPct2 = Math.round((activeToolStyle.strokeOpacity ?? 1) * 100);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "section",
+  const worldFromMinimap = react.useCallback(
+    (mx, my) => ({
+      worldX: (mx - PADDING) / scale + originX,
+      worldY: (my - PADDING) / scale + originY
+    }),
+    [scale, originX, originY]
+  );
+  const panTo = react.useCallback(
+    (mx, my) => {
+      if (!camera) return;
+      const { worldX, worldY } = worldFromMinimap(mx, my);
+      camera.x = viewportWidth / 2 - worldX * camera.zoom;
+      camera.y = viewportHeight / 2 - worldY * camera.zoom;
+      onRequestRender();
+    },
+    [worldFromMinimap, camera, viewportWidth, viewportHeight, onRequestRender]
+  );
+  const handlePointerDown = react.useCallback(
+    (e) => {
+      if (isEmpty) return;
+      setDragging(true);
+      setMouseDown(true);
+      const rect = svgRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      panTo(e.clientX - rect.left, e.clientY - rect.top);
+      svgRef.current?.setPointerCapture(e.pointerId);
+    },
+    [isEmpty, panTo]
+  );
+  const handlePointerMove = react.useCallback(
+    (e) => {
+      if (!mouseDown || isEmpty) return;
+      const rect = svgRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      panTo(e.clientX - rect.left, e.clientY - rect.top);
+    },
+    [mouseDown, isEmpty, panTo]
+  );
+  const handlePointerUp = react.useCallback(() => {
+    setDragging(false);
+    setMouseDown(false);
+  }, []);
+  const toggleExpanded = react.useCallback(() => {
+    setExpanded((v) => !v);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
-        "data-slot": "vector-selection-inspector",
-        "data-position": position,
+        type: "button",
         className,
-        "aria-label": activeToolStyle.label ?? "Estilo da ferramenta",
-        style: shell,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-            "Cor",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+        style: chevronBtnStyle,
+        "aria-label": expanded ? "Hide minimap" : "Show minimap",
+        title: expanded ? "Hide minimap" : "Show minimap",
+        "aria-expanded": expanded,
+        onPointerDown: preventMouseDefault,
+        onClick: toggleExpanded,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: "12",
+            height: "12",
+            viewBox: "0 0 12 12",
+            style: {
+              transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+              transition: "transform 0.15s ease"
+            },
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
               {
-                type: "color",
-                value: hex2,
-                onChange: (e) => onChange({
-                  stroke: e.target.value,
-                  strokeWidth: strokeWidth2,
-                  ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
-                }),
-                style: {
-                  width: "100%",
-                  height: 32,
-                  padding: 0,
-                  border: "none",
-                  cursor: "pointer",
-                  background: "transparent"
-                }
+                d: "M2 4 L6 8 L10 4",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-            "Grossura",
+          }
+        )
+      }
+    ),
+    expanded && slotEl ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Minimap", style: { pointerEvents: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          ref: svgRef,
+          style: {
+            width: MINIMAP_W,
+            height: MINIMAP_H,
+            borderRadius: BORDER_RADIUS,
+            border: `1px solid ${BORDER_COLOR}`,
+            background: BG,
+            boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+            cursor: isEmpty ? "default" : dragging ? "grabbing" : "grab",
+            display: "block",
+            pointerEvents: "auto"
+          },
+          onPointerDown: handlePointerDown,
+          onPointerMove: handlePointerMove,
+          onPointerUp: handlePointerUp,
+          onPointerCancel: handlePointerUp,
+          children: isEmpty ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            items.map((it) => {
+              const b = normalizeRect(boundsAabbForRotatedItem(it));
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: toMinimapX(b.x),
+                  y: toMinimapY(b.y),
+                  width: toMinimapW(b.width),
+                  height: toMinimapH(b.height),
+                  fill: ITEM_FILL,
+                  stroke: ITEM_STROKE,
+                  strokeWidth: 0.5,
+                  rx: 1
+                },
+                it.id
+              );
+            }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+              "rect",
               {
-                type: "range",
-                min: 1,
-                max: 48,
-                value: strokeWidth2,
-                onChange: (e) => onChange({
-                  stroke: hex2,
-                  strokeWidth: Number(e.target.value),
-                  ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
-                })
+                x: vpMinimap.x,
+                y: vpMinimap.y,
+                width: vpMinimap.width,
+                height: vpMinimap.height,
+                fill: VIEWPORT_FILL,
+                stroke: VIEWPORT_STROKE,
+                strokeWidth: 1.5,
+                rx: 2
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-              strokeWidth2,
-              "px"
-            ] })
-          ] }),
-          showMarkerOpacity2 && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-            "Opacidade (marcador)",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "range",
-                min: 10,
-                max: 100,
-                value: opacityPct2,
-                onChange: (e) => {
-                  const v = Number(e.target.value) / 100;
-                  onChange({
-                    stroke: hex2,
-                    strokeWidth: strokeWidth2,
-                    strokeOpacity: v
-                  });
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-              opacityPct2,
-              "%"
-            ] })
+            )
           ] })
-        ]
-      }
-    );
+        }
+      ) }),
+      slotEl
+    ) : null
+  ] });
+}
+function computeWorldBounds(items) {
+  if (items.length === 0) {
+    return { x: 0, y: 0, width: 0, height: 0 };
   }
-  const stylable = items.filter(
-    (it) => !it.locked && it.toolKind && isStylableKind(it.toolKind)
-  );
-  if (stylable.length === 0) return null;
-  const first = stylable[0];
-  if (!first) return null;
-  const allSameStroke = stylable.every(
-    (it) => (it.stroke ?? "#2563eb") === (first.stroke ?? "#2563eb")
-  );
-  const allSameWidth = stylable.every(
-    (it) => (it.strokeWidth ?? 2) === (first.strokeWidth ?? 2)
-  );
-  const stroke = first.stroke ?? "#2563eb";
-  const strokeWidth = first.strokeWidth ?? 2;
-  const hex = normalizeHex(stroke);
-  const markers = stylable.filter((it) => it.toolKind === "marker");
-  const showMarkerOpacity = markers.length > 0;
-  const firstMarker = markers[0];
-  const allSameMarkerOpacity = markers.length > 0 && markers.every(
-    (it) => (it.strokeOpacity ?? 1) === (firstMarker?.strokeOpacity ?? 1)
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const it of items) {
+    const b = boundsAabbForRotatedItem(it);
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.width);
+    maxY = Math.max(maxY, b.y + b.height);
+  }
+  const pad = Math.max((maxX - minX) * 0.1, (maxY - minY) * 0.1, 40);
+  return {
+    x: minX - pad,
+    y: minY - pad,
+    width: maxX - minX + pad * 2,
+    height: maxY - minY + pad * 2
+  };
+}
+function NavMenuUndoRedo({
+  className,
+  style,
+  onUndo: onUndoProp,
+  onRedo: onRedoProp,
+  canUndo: canUndoProp,
+  canRedo: canRedoProp
+} = {}) {
+  const ctx = useCanvuChromeContext();
+  const onUndo = onUndoProp ?? ctx?.onUndo ?? noop;
+  const onRedo = onRedoProp ?? ctx?.onRedo ?? noop;
+  const canUndo = canUndoProp ?? ctx?.canUndo ?? false;
+  const canRedo = canRedoProp ?? ctx?.canRedo ?? false;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className,
+      style: { display: "inline-flex", alignItems: "center", ...style },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            style: undoBtnStyle,
+            "aria-label": "Undo",
+            title: "Undo",
+            disabled: !canUndo,
+            onPointerDown: preventMouseDefault,
+            onClick: onUndo,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            style: undoBtnStyle,
+            "aria-label": "Redo",
+            title: "Redo",
+            disabled: !canRedo,
+            onPointerDown: preventMouseDefault,
+            onClick: onRedo,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { size: 16 })
+          }
+        )
+      ]
+    }
   );
-  const opacityPct = firstMarker ? Math.round((firstMarker.strokeOpacity ?? 1) * 100) : 100;
+}
+function NavMenuZoomControls({
+  className,
+  style,
+  zoomPercent: zoomPercentProp,
+  onZoomIn: onZoomInProp,
+  onZoomOut: onZoomOutProp
+} = {}) {
+  const ctx = useCanvuChromeContext();
+  const zoomPercent = zoomPercentProp ?? ctx?.zoomPercent ?? 100;
+  const onZoomIn = onZoomInProp ?? ctx?.onZoomIn ?? noop;
+  const onZoomOut = onZoomOutProp ?? ctx?.onZoomOut ?? noop;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
+    "span",
     {
-      "data-slot": "vector-selection-inspector",
-      "data-position": position,
       className,
-      "aria-label": "Estilo da sele\xE7\xE3o",
-      style: shell,
+      style: { display: "inline-flex", alignItems: "center", ...style },
       children: [
-        stylable.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, fontSize: 11, color: "#71717a" }, children: [
-          stylable.length,
-          " objetos selecionados"
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            style: btnStyle,
+            "aria-label": "Zoom out",
+            title: "Zoom out",
+            onPointerDown: preventMouseDefault,
+            onClick: onZoomOut,
+            children: "\u2212"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: labelStyle, "aria-hidden": true, children: [
+          zoomPercent,
+          "%"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-          "Cor",
-          !allSameStroke && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: [
-            " ",
-            "(valores misturados \u2014 novo valor aplica a todos)"
-          ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            style: btnStyle,
+            "aria-label": "Zoom in",
+            title: "Zoom in",
+            onPointerDown: preventMouseDefault,
+            onClick: onZoomIn,
+            children: "+"
+          }
+        )
+      ]
+    }
+  );
+}
+function NavMenuComponent({
+  camera: cameraProp,
+  viewportWidth: viewportWidthProp,
+  viewportHeight: viewportHeightProp,
+  items: itemsProp,
+  zoomPercent: zoomPercentProp,
+  onZoomIn: onZoomInProp,
+  onZoomOut: onZoomOutProp,
+  onUndo: onUndoProp,
+  onRedo: onRedoProp,
+  canUndo: canUndoProp,
+  canRedo: canRedoProp,
+  onRequestRender: onRequestRenderProp,
+  position = "bottom-left",
+  inset = 12,
+  zIndex = 23,
+  className,
+  style,
+  children
+}) {
+  const [slotEl, setSlotEl] = react.useState(null);
+  const anchorStyle = getBoardPositionStyle(position, inset, zIndex);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "fieldset",
+    {
+      "data-slot": "canvu-nav-menu",
+      "data-position": position,
+      className,
+      style: {
+        ...anchorStyle,
+        ...panelLayoutStyle,
+        border: "none",
+        margin: 0,
+        padding: 0,
+        minWidth: 0,
+        ...style
+      },
+      "aria-label": "Zoom and minimap controls",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(NavMenuMinimapSlotContext.Provider, { value: slotEl, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: innerStyle, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+            NavMenuZoomControls,
             {
-              type: "color",
-              value: hex,
-              onChange: (e) => onChange({
-                stroke: e.target.value,
-                strokeWidth
-              }),
-              style: {
-                width: "100%",
-                height: 32,
-                padding: 0,
-                border: "none",
-                cursor: "pointer",
-                background: "transparent"
-              }
+              zoomPercent: zoomPercentProp,
+              onZoomIn: onZoomInProp,
+              onZoomOut: onZoomOutProp
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-          "Grossura",
-          !allSameWidth && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: " (misturado)" }),
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+            NavMenuUndoRedo,
             {
-              type: "range",
-              min: 1,
-              max: 48,
-              value: strokeWidth,
-              onChange: (e) => onChange({
-                stroke: hex,
-                strokeWidth: Number(e.target.value)
-              })
+              onUndo: onUndoProp,
+              onRedo: onRedoProp,
+              canUndo: canUndoProp,
+              canRedo: canRedoProp
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-            strokeWidth,
-            "px"
-          ] })
-        ] }),
-        showMarkerOpacity && firstMarker && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-          "Opacidade (marcador)",
-          !allSameMarkerOpacity && markers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: " (misturado)" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
+            NavMenuMinimap,
             {
-              type: "range",
-              min: 10,
-              max: 100,
-              value: opacityPct,
-              onChange: (e) => {
-                const v = Number(e.target.value) / 100;
-                onChange({
-                  stroke: hex,
-                  strokeWidth,
-                  strokeOpacity: v
-                });
-              }
+              camera: cameraProp,
+              viewportWidth: viewportWidthProp,
+              viewportHeight: viewportHeightProp,
+              items: itemsProp,
+              onRequestRender: onRequestRenderProp
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-            opacityPct,
-            "%"
-          ] })
-        ] })
-      ]
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setSlotEl, style: minimapSlotStyle })
+      ] })
     }
   );
 }
-function getBoardPositionStyle(position, inset = 12, zIndex = 40) {
-  const base2 = { position: "absolute", zIndex };
-  switch (position) {
-    case "fill":
-      return { ...base2, inset };
-    case "top-left":
-    case "left-top":
-      return { ...base2, top: inset, left: inset };
-    case "top-center":
-      return {
-        ...base2,
-        top: inset,
-        left: "50%",
-        transform: "translateX(-50%)"
-      };
-    case "top-right":
-    case "right-top":
-      return { ...base2, top: inset, right: inset };
-    case "bottom-left":
-    case "left-bottom":
-      return { ...base2, bottom: inset, left: inset };
-    case "bottom-center":
-      return {
-        ...base2,
-        bottom: inset,
-        left: "50%",
-        transform: "translateX(-50%)"
-      };
-    case "bottom-right":
-    case "right-bottom":
-      return { ...base2, bottom: inset, right: inset };
-    case "left-center":
-      return {
-        ...base2,
-        left: inset,
-        top: "50%",
-        transform: "translateY(-50%)"
-      };
-    case "right-center":
-      return {
-        ...base2,
-        right: inset,
-        top: "50%",
-        transform: "translateY(-50%)"
-      };
-    case "center":
-      return {
-        ...base2,
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)"
-      };
-    default:
-      return base2;
-  }
-}
-var rootStyle = {
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  minHeight: 0,
-  width: "100%"
-};
-var headerStyle = {
-  flexShrink: 0,
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "0.75rem",
-  padding: "0.75rem 1rem",
-  borderBottom: "1px solid #e4e4e7",
-  background: "#fff",
-  fontSize: "0.875rem"
-};
-var bodyStyle = {
-  flex: 1,
-  minHeight: 0,
-  display: "flex",
-  flexDirection: "column"
-};
-var mainStyle = {
-  flex: 1,
-  minHeight: 0,
-  position: "relative",
-  display: "flex",
-  flexDirection: "column"
-};
-var viewportSurfaceStyle = {
-  flex: 1,
-  minHeight: 0,
-  position: "relative",
-  width: "100%",
-  alignSelf: "stretch",
-  background: "#fff",
-  touchAction: "none"
-};
-function mergeStyle(base2, style) {
-  return style ? { ...base2, ...style } : base2;
+NavMenuComponent.displayName = "NavMenu";
+var NavMenu = Object.assign(NavMenuComponent, {
+  ZoomControls: NavMenuZoomControls,
+  UndoRedo: NavMenuUndoRedo,
+  Minimap: NavMenuMinimap
+});
+
+// src/react/persistence/indexed-db-adapter.ts
+init_shape_builders();
+var DOCUMENT_STORE = "document";
+var DOCUMENT_KEY = "main";
+function openDocumentDb(dbName) {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(dbName, 1);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(DOCUMENT_STORE)) {
+        db.createObjectStore(DOCUMENT_STORE);
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
 }
-function vectorCanvasSpaceStyle(position, inset, zIndex) {
+function createIndexedDbPersistenceAdapter(options = {}) {
+  const dbName = options.dbName ?? "canvu-document";
+  const imageStore = new IndexedDbImageStore();
+  let documentDbPromise = null;
+  function getDocDb() {
+    if (!documentDbPromise) {
+      documentDbPromise = openDocumentDb(dbName);
+    }
+    return documentDbPromise;
+  }
+  async function getFromDocDb(key) {
+    const db = await getDocDb();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(DOCUMENT_STORE, "readonly");
+      const req = tx.objectStore(DOCUMENT_STORE).get(key);
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+  async function putInDocDb(key, value) {
+    const db = await getDocDb();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(DOCUMENT_STORE, "readwrite");
+      const req = tx.objectStore(DOCUMENT_STORE).put(value, key);
+      req.onsuccess = () => resolve();
+      req.onerror = () => reject(req.error);
+    });
+  }
+  const liveHrefs = /* @__PURE__ */ new Set();
+  function stripBlobsForPersist(item) {
+    const out = { ...item };
+    delete out.imageRasterHref;
+    delete out.imageThumbnailHref;
+    if (item.toolKind === "image") {
+      out.childrenSvg = "";
+    }
+    return out;
+  }
+  function collectLiveHrefs(items) {
+    const set = /* @__PURE__ */ new Set();
+    for (const item of items) {
+      if (item.imageRasterHref?.startsWith("blob:")) {
+        set.add(item.imageRasterHref);
+      }
+      if (item.imageThumbnailHref?.startsWith("blob:")) {
+        set.add(item.imageThumbnailHref);
+      }
+    }
+    return set;
+  }
   return {
-    ...getBoardPositionStyle(position, inset, zIndex),
-    pointerEvents: "none"
+    async load() {
+      const raw = await getFromDocDb(DOCUMENT_KEY);
+      if (!raw?.items) return null;
+      const resolved = [];
+      for (const item of raw.items) {
+        if (item.toolKind === "image" && item.imageBlobId) {
+          const itemWithBlob = { ...item };
+          if (item.imageThumbnailBlobId) {
+            const thumbUrl = await createThumbnailBlobUrlFromStore(
+              imageStore,
+              item.imageThumbnailBlobId
+            );
+            if (thumbUrl) {
+              itemWithBlob.imageThumbnailHref = thumbUrl;
+            }
+          }
+          const fullUrl = await createBlobUrlFromStore(imageStore, item.imageBlobId);
+          if (fullUrl) {
+            itemWithBlob.imageRasterHref = fullUrl;
+          }
+          const rebuilt = rebuildItemSvg(itemWithBlob);
+          resolved.push(rebuilt);
+        } else {
+          resolved.push(item);
+        }
+      }
+      return { items: resolved, version: raw.version ?? 1 };
+    },
+    async save(snapshot) {
+      const nextLive = collectLiveHrefs(snapshot.items);
+      for (const href of liveHrefs) {
+        if (!nextLive.has(href)) {
+          URL.revokeObjectURL(href);
+        }
+      }
+      liveHrefs.clear();
+      for (const href of nextLive) liveHrefs.add(href);
+      const cleanItems = snapshot.items.map(stripBlobsForPersist);
+      await putInDocDb(DOCUMENT_KEY, {
+        items: cleanItems,
+        version: snapshot.version ?? 1
+      });
+    }
   };
 }
-function VectorCanvasRoot({
-  children,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "vector-canvas-root",
-      className,
-      style: mergeStyle(rootStyle, style),
-      children
+
+// src/react/persistence/local-storage-adapter.ts
+var DEFAULT_VECTOR_CANVAS_STORAGE_KEY = "trazo.vector-canvas.v1";
+var SNAPSHOT_VERSION = 1;
+function createLocalStoragePersistenceAdapter(options = {}) {
+  const key = options.key ?? DEFAULT_VECTOR_CANVAS_STORAGE_KEY;
+  const storage = options.storage ?? (typeof globalThis !== "undefined" && "localStorage" in globalThis && globalThis.localStorage ? globalThis.localStorage : null);
+  return {
+    load() {
+      if (!storage) return Promise.resolve(null);
+      try {
+        const raw = storage.getItem(key);
+        if (!raw) return Promise.resolve(null);
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== "object" || !("items" in parsed) || !Array.isArray(parsed.items)) {
+          return Promise.resolve(null);
+        }
+        return Promise.resolve(parsed);
+      } catch {
+        return Promise.resolve(null);
+      }
+    },
+    save(snapshot) {
+      if (!storage) return Promise.resolve();
+      try {
+        storage.setItem(
+          key,
+          JSON.stringify({
+            ...snapshot,
+            version: snapshot.version ?? SNAPSHOT_VERSION
+          })
+        );
+      } catch {
+      }
+      return Promise.resolve();
     }
-  );
+  };
 }
-function VectorCanvasHeader({
-  children,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "header",
-    {
-      "data-slot": "vector-canvas-header",
-      className,
-      style: mergeStyle(headerStyle, style),
-      children
-    }
-  );
+function createNoopPersistenceAdapter() {
+  return {
+    load: () => Promise.resolve(null),
+    save: () => Promise.resolve()
+  };
 }
-function VectorCanvasBody({
-  children,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "vector-canvas-body",
-      className,
-      style: mergeStyle(bodyStyle, style),
-      children
-    }
+function useVectorCanvasDocument(options = {}) {
+  const {
+    persistenceKey = DEFAULT_VECTOR_CANVAS_STORAGE_KEY,
+    persistence,
+    debounceMs = 400,
+    remote
+  } = options;
+  const adapter = react.useMemo(() => {
+    if (persistence === false) return createNoopPersistenceAdapter();
+    if (persistence) return persistence;
+    return createLocalStoragePersistenceAdapter({ key: persistenceKey });
+  }, [persistence, persistenceKey]);
+  const [items, setItems] = react.useState([]);
+  const [isHydrated, setIsHydrated] = react.useState(false);
+  const saveTimerRef = react.useRef(null);
+  const adapterRef = react.useRef(adapter);
+  adapterRef.current = adapter;
+  react.useEffect(() => {
+    let cancelled = false;
+    adapter.load().then((snap) => {
+      if (cancelled) return;
+      if (snap?.items && snap.items.length > 0) {
+        setItems(snap.items);
+      }
+      setIsHydrated(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [adapter]);
+  const persist = react.useCallback((next) => {
+    void adapterRef.current.save({ items: next, version: 1 });
+  }, []);
+  const onItemsChange = react.useCallback(
+    (next) => {
+      setItems(next);
+      remote?.send?.(next);
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = setTimeout(() => {
+        persist(next);
+        saveTimerRef.current = null;
+      }, debounceMs);
+    },
+    [debounceMs, persist, remote]
   );
-}
-function VectorCanvasMain({
-  children,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "vector-canvas-main",
-      className,
-      style: mergeStyle(mainStyle, style),
-      children
-    }
+  react.useEffect(() => {
+    if (!remote || !isHydrated) return;
+    return remote.subscribe((serverItems) => {
+      setItems(serverItems);
+      persist(serverItems);
+    });
+  }, [remote, isHydrated, persist]);
+  react.useEffect(
+    () => () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    },
+    []
   );
+  const clearPersistedDocument = react.useCallback(() => {
+    setItems([]);
+    void adapterRef.current.save({ items: [], version: 1 });
+  }, []);
+  return {
+    items,
+    onItemsChange,
+    setItems: onItemsChange,
+    isHydrated,
+    clearPersistedDocument
+  };
 }
-function VectorCanvasViewportSurface({
-  children,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "vector-canvas-viewport-surface",
-      className,
-      style: mergeStyle(viewportSurfaceStyle, style),
-      children
-    }
-  );
+var CanvuPluginContext = react.createContext(
+  null
+);
+function createCanvuPlugin(plugin) {
+  return plugin;
 }
-function VectorCanvasToolbar({
-  children,
-  className,
-  style,
-  position = "bottom-center",
-  inset = 12,
-  zIndex = 30
-}) {
-  const base2 = {
-    ...getBoardPositionStyle(position, inset, zIndex),
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    maxWidth: "calc(100% - 24px)",
-    pointerEvents: "none"
+function useCanvuPluginContext() {
+  const ctx = react.useContext(CanvuPluginContext);
+  if (!ctx) {
+    throw new Error(
+      "useCanvuPluginContext must be used inside a VectorViewport plugin runtime."
+    );
+  }
+  return ctx;
+}
+function useCanvuViewportContext() {
+  const { viewportRef, viewport } = useCanvuPluginContext();
+  return { viewportRef, viewport };
+}
+function useCanvuDocumentContext() {
+  const { viewport } = useCanvuPluginContext();
+  return {
+    items: viewport.items,
+    onItemsChange: viewport.onItemsChange
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "vector-canvas-toolbar",
-      "data-position": position,
-      className,
-      style: mergeStyle(base2, style),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: "auto" }, children })
-    }
-  );
 }
-function VectorCanvasSpace({
-  children,
-  className,
-  style,
-  position = "top-right",
-  inset = 12,
-  zIndex = 40,
-  contentPointerEvents = "auto"
+function useCanvuResolvedTools() {
+  return useCanvuPluginContext().resolvedTools;
+}
+function useCanvuPluginContribution(pluginId, contribution) {
+  const { registerContribution, unregisterContribution } = useCanvuPluginContext();
+  react.useLayoutEffect(() => {
+    registerContribution(pluginId, contribution);
+    return () => unregisterContribution(pluginId);
+  }, [contribution, pluginId, registerContribution, unregisterContribution]);
+}
+function ToolPluginComponent({
+  pluginId,
+  tool,
+  toolTransform,
+  createItem
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": `vector-canvas-space-${position}`,
-      className,
-      style: mergeStyle(vectorCanvasSpaceStyle(position, inset, zIndex), style),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: contentPointerEvents }, children })
-    }
+  const contribution = react.useMemo(
+    () => ({
+      tools: [tool],
+      toolTransform,
+      customPlacements: createItem ? [
+        {
+          toolId: tool.id,
+          createItem
+        }
+      ] : void 0
+    }),
+    [createItem, tool, toolTransform]
   );
+  useCanvuPluginContribution(pluginId, contribution);
+  return null;
 }
-var VectorCanvas = {
-  Root: VectorCanvasRoot,
-  Header: VectorCanvasHeader,
-  Body: VectorCanvasBody,
-  Main: VectorCanvasMain,
-  ViewportSurface: VectorCanvasViewportSurface,
-  Toolbar: VectorCanvasToolbar,
-  Space: VectorCanvasSpace,
-  NavMenu,
-  SelectionInspector: VectorSelectionInspector
+function createToolPlugin(options) {
+  const { createItem, toolTransform, ...tool } = options;
+  const pluginId = `canvu.plugin.tool:${tool.id}`;
+  return createCanvuPlugin({
+    id: pluginId,
+    Component() {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ToolPluginComponent,
+        {
+          pluginId,
+          tool,
+          toolTransform,
+          createItem
+        }
+      );
+    }
+  });
+}
+var menuStyle = {
+  position: "fixed",
+  zIndex: 1e4,
+  minWidth: 200,
+  padding: 4,
+  backgroundColor: "#ffffff",
+  border: "1px solid #e2e8f0",
+  borderRadius: 8,
+  boxShadow: "0 10px 40px rgba(15, 23, 42, 0.12)",
+  fontSize: 13,
+  fontFamily: "system-ui, sans-serif",
+  color: "#0f172a"
 };
-var MINIMAP_W = 180;
-var MINIMAP_H = 120;
-var PADDING = 12;
-var BORDER_RADIUS = 8;
-var BG = "#ffffff";
-var BORDER_COLOR = "rgba(0,0,0,0.12)";
-var ITEM_FILL = "rgba(0,0,0,0.08)";
-var ITEM_STROKE = "rgba(0,0,0,0.15)";
-var VIEWPORT_FILL = "rgba(59,130,246,0.08)";
-var VIEWPORT_STROKE = "#3b82f6";
-var btnStyle = {
-  pointerEvents: "auto",
-  width: 36,
-  height: 36,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  fontSize: 18,
-  lineHeight: 1,
-  color: "#18181b",
-  padding: 0,
-  border: "none",
-  outline: "none",
-  background: "none",
-  WebkitTapHighlightColor: "transparent"
-};
-var chevronBtnStyle = {
-  pointerEvents: "auto",
-  width: 24,
-  height: 36,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  fontSize: 12,
-  lineHeight: 1,
-  color: "#52525b",
-  padding: 0,
+var itemStyle = {
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  padding: "8px 12px",
+  margin: 0,
   border: "none",
-  outline: "none",
-  background: "none",
-  WebkitTapHighlightColor: "transparent"
-};
-var undoBtnStyle = {
-  ...chevronBtnStyle,
-  width: 30,
-  opacity: 1,
-  color: "#18181b"
-};
-var labelStyle2 = {
-  fontSize: 10,
-  fontWeight: 600,
-  color: "#52525b",
-  textAlign: "center",
-  userSelect: "none",
-  padding: "2px 0"
-};
-var panelLayoutStyle = {
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "flex-start",
-  gap: 4,
-  touchAction: "none",
-  pointerEvents: "none",
-  userSelect: "none"
+  borderRadius: 4,
+  background: "transparent",
+  cursor: "pointer"
 };
-var innerStyle = {
-  pointerEvents: "auto",
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  gap: 4,
-  background: BG,
-  borderRadius: BORDER_RADIUS,
-  border: `1px solid ${BORDER_COLOR}`,
-  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
-  padding: 4
+var dividerStyle = {
+  height: 1,
+  margin: "4px 8px",
+  background: "#e2e8f0"
 };
-function NavMenu({
-  camera: cameraProp,
-  viewportWidth: viewportWidthProp,
-  viewportHeight: viewportHeightProp,
-  items: itemsProp,
-  zoomPercent: zoomPercentProp,
-  onZoomIn: onZoomInProp,
-  onZoomOut: onZoomOutProp,
-  onUndo: onUndoProp,
-  onRedo: onRedoProp,
-  canUndo: canUndoProp,
-  canRedo: canRedoProp,
-  onRequestRender: onRequestRenderProp,
-  position = "bottom-left",
-  inset = 12,
-  zIndex = 23,
-  className,
-  style
+function ShapeContextMenu({
+  x,
+  y,
+  allSelectedLocked,
+  onClose,
+  onToggleLock,
+  onCut,
+  onCopy,
+  onBringToFront,
+  onBringForward,
+  onSendBackward,
+  onSendToBack,
+  onDuplicate,
+  onDelete
 }) {
-  const ctx = useCanvuChromeContext();
-  const camera = cameraProp ?? ctx?.camera ?? null;
-  const viewportWidth = viewportWidthProp ?? ctx?.viewportWidth ?? 0;
-  const viewportHeight = viewportHeightProp ?? ctx?.viewportHeight ?? 0;
-  const items = itemsProp ?? ctx?.items ?? [];
-  const zoomPercent = zoomPercentProp ?? ctx?.zoomPercent ?? 100;
-  const onZoomIn = onZoomInProp ?? ctx?.onZoomIn ?? noop;
-  const onZoomOut = onZoomOutProp ?? ctx?.onZoomOut ?? noop;
-  const onUndo = onUndoProp ?? ctx?.onUndo ?? noop;
-  const onRedo = onRedoProp ?? ctx?.onRedo ?? noop;
-  const canUndo = canUndoProp ?? ctx?.canUndo ?? false;
-  const canRedo = canRedoProp ?? ctx?.canRedo ?? false;
-  const onRequestRender = onRequestRenderProp ?? ctx?.onRequestRender ?? noop;
-  const [expanded, setExpanded] = react.useState(false);
-  const svgRef = react.useRef(null);
-  const [dragging, setDragging] = react.useState(false);
-  const [mouseDown, setMouseDown] = react.useState(false);
-  const worldBounds = computeWorldBounds(items);
-  const isEmpty = worldBounds.width <= 0 || worldBounds.height <= 0;
-  const scale = Math.min(
-    (MINIMAP_W - PADDING * 2) / Math.max(worldBounds.width, 1),
-    (MINIMAP_H - PADDING * 2) / Math.max(worldBounds.height, 1)
-  );
-  const originX = worldBounds.x;
-  const originY = worldBounds.y;
-  const toMinimapX = (wx) => (wx - originX) * scale + PADDING;
-  const toMinimapY = (wy) => (wy - originY) * scale + PADDING;
-  const toMinimapW = (ww) => ww * scale;
-  const toMinimapH = (wh) => wh * scale;
-  const viewportWorld = camera ? camera.getVisibleWorldRect(viewportWidth, viewportHeight) : { x: 0, y: 0, width: 0, height: 0 };
-  const vpMinimap = {
-    x: toMinimapX(viewportWorld.x),
-    y: toMinimapY(viewportWorld.y),
-    width: toMinimapW(viewportWorld.width),
-    height: toMinimapH(viewportWorld.height)
+  const rootRef = react.useRef(null);
+  react.useLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const pad = 8;
+    const w = el.offsetWidth || 200;
+    const h = el.offsetHeight || 160;
+    let left = x;
+    let top = y;
+    if (left + w + pad > window.innerWidth) {
+      left = Math.max(pad, window.innerWidth - w - pad);
+    }
+    if (top + h + pad > window.innerHeight) {
+      top = Math.max(pad, window.innerHeight - h - pad);
+    }
+    el.style.left = `${left}px`;
+    el.style.top = `${top}px`;
+  }, [x, y]);
+  react.useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    const onPointerDown = (e) => {
+      const t = e.target;
+      if (t && rootRef.current?.contains(t)) {
+        return;
+      }
+      onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+    };
+  }, [onClose]);
+  const run = (fn) => () => {
+    fn();
+    onClose();
   };
-  const worldFromMinimap = react.useCallback(
-    (mx, my) => ({
-      worldX: (mx - PADDING) / scale + originX,
-      worldY: (my - PADDING) / scale + originY
-    }),
-    [scale, originX, originY]
-  );
-  const panTo = react.useCallback(
-    (mx, my) => {
-      if (!camera) return;
-      const { worldX, worldY } = worldFromMinimap(mx, my);
-      camera.x = viewportWidth / 2 - worldX * camera.zoom;
-      camera.y = viewportHeight / 2 - worldY * camera.zoom;
-      onRequestRender();
-    },
-    [worldFromMinimap, camera, viewportWidth, viewportHeight, onRequestRender]
-  );
-  const handlePointerDown = react.useCallback(
-    (e) => {
-      if (isEmpty) return;
-      setDragging(true);
-      setMouseDown(true);
-      const rect = svgRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      panTo(e.clientX - rect.left, e.clientY - rect.top);
-      svgRef.current?.setPointerCapture(e.pointerId);
-    },
-    [isEmpty, panTo]
-  );
-  const handlePointerMove = react.useCallback(
-    (e) => {
-      if (!mouseDown || isEmpty) return;
-      const rect = svgRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      panTo(e.clientX - rect.left, e.clientY - rect.top);
-    },
-    [mouseDown, isEmpty, panTo]
-  );
-  const handlePointerUp = react.useCallback(() => {
-    setDragging(false);
-    setMouseDown(false);
-  }, []);
-  const toggleExpanded = react.useCallback(() => {
-    setExpanded((v) => !v);
-  }, []);
-  const anchorStyle = getBoardPositionStyle(position, inset, zIndex);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "fieldset",
+  const renderAction = (label, onClick, options) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
     {
-      "data-slot": "canvu-nav-menu",
-      "data-position": position,
-      className,
+      type: "button",
+      role: "menuitem",
       style: {
-        ...anchorStyle,
-        ...panelLayoutStyle,
-        border: "none",
-        margin: 0,
-        padding: 0,
-        minWidth: 0,
-        ...style
+        ...itemStyle,
+        ...options?.danger ? { color: "#b91c1c" } : {}
       },
-      "aria-label": "Zoom and minimap controls",
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = options?.danger ? "#fef2f2" : "#f1f5f9";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+      },
+      onClick: run(onClick),
+      children: label
+    }
+  );
+  const menu = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "shape-context-menu",
+      style: { ...menuStyle, left: x, top: y },
+      role: "menu",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: innerStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              style: btnStyle,
-              "aria-label": "Zoom out",
-              title: "Zoom out",
-              onPointerDown: (e) => {
-                if (e.pointerType === "mouse") e.preventDefault();
-              },
-              onClick: onZoomOut,
-              children: "\u2212"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: labelStyle2, "aria-hidden": true, children: [
-            zoomPercent,
-            "%"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              style: btnStyle,
-              "aria-label": "Zoom in",
-              title: "Zoom in",
-              onPointerDown: (e) => {
-                if (e.pointerType === "mouse") e.preventDefault();
-              },
-              onClick: onZoomIn,
-              children: "+"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              style: undoBtnStyle,
-              "aria-label": "Undo",
-              title: "Undo",
-              disabled: !canUndo,
-              onPointerDown: (e) => {
-                if (e.pointerType === "mouse") e.preventDefault();
-              },
-              onClick: onUndo,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { size: 16 })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              style: undoBtnStyle,
-              "aria-label": "Redo",
-              title: "Redo",
-              disabled: !canRedo,
-              onPointerDown: (e) => {
-                if (e.pointerType === "mouse") e.preventDefault();
-              },
-              onClick: onRedo,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { size: 16 })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              style: chevronBtnStyle,
-              "aria-label": expanded ? "Hide minimap" : "Show minimap",
-              title: expanded ? "Hide minimap" : "Show minimap",
-              onPointerDown: (e) => {
-                if (e.pointerType === "mouse") e.preventDefault();
-              },
-              onClick: toggleExpanded,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  width: "12",
-                  height: "12",
-                  viewBox: "0 0 12 12",
-                  style: {
-                    transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                    transition: "transform 0.15s ease"
-                  },
-                  "aria-hidden": true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      d: "M2 4 L6 8 L10 4",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round"
-                    }
-                  )
-                }
-              )
-            }
-          )
-        ] }),
-        expanded && /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Minimap", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            ref: svgRef,
-            style: {
-              width: MINIMAP_W,
-              height: MINIMAP_H,
-              borderRadius: BORDER_RADIUS,
-              border: `1px solid ${BORDER_COLOR}`,
-              background: BG,
-              boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
-              cursor: isEmpty ? "default" : dragging ? "grabbing" : "grab",
-              display: "block",
-              pointerEvents: "auto"
-            },
-            onPointerDown: handlePointerDown,
-            onPointerMove: handlePointerMove,
-            onPointerUp: handlePointerUp,
-            onPointerCancel: handlePointerUp,
-            children: isEmpty ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              items.map((it) => {
-                const b = normalizeRect(boundsAabbForRotatedItem(it));
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "rect",
-                  {
-                    x: toMinimapX(b.x),
-                    y: toMinimapY(b.y),
-                    width: toMinimapW(b.width),
-                    height: toMinimapH(b.height),
-                    fill: ITEM_FILL,
-                    stroke: ITEM_STROKE,
-                    strokeWidth: 0.5,
-                    rx: 1
-                  },
-                  it.id
-                );
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x: vpMinimap.x,
-                  y: vpMinimap.y,
-                  width: vpMinimap.width,
-                  height: vpMinimap.height,
-                  fill: VIEWPORT_FILL,
-                  stroke: VIEWPORT_STROKE,
-                  strokeWidth: 1.5,
-                  rx: 2
-                }
-              )
-            ] })
-          }
-        ) })
+        renderAction("Recortar", onCut),
+        renderAction("Copiar", onCopy),
+        renderAction("Duplicar", onDuplicate),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: dividerStyle }),
+        renderAction("Trazer para frente", onBringToFront),
+        renderAction("Avancar uma camada", onBringForward),
+        renderAction("Recuar uma camada", onSendBackward),
+        renderAction("Enviar para tras", onSendToBack),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: dividerStyle }),
+        renderAction(allSelectedLocked ? "Desbloquear" : "Bloquear", onToggleLock),
+        renderAction("Apagar", onDelete, { danger: true })
       ]
     }
   );
+  if (typeof document === "undefined") {
+    return null;
+  }
+  return reactDom.createPortal(menu, document.body);
 }
-function noop() {
+var base = {
+  width: 20,
+  height: 20,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function IconHand(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8a2 2 0 1 1 4 0v5a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" })
+  ] });
 }
-function computeWorldBounds(items) {
-  if (items.length === 0) {
-    return { x: 0, y: 0, width: 0, height: 0 };
-  }
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const it of items) {
-    const b = boundsAabbForRotatedItem(it);
-    minX = Math.min(minX, b.x);
-    minY = Math.min(minY, b.y);
-    maxX = Math.max(maxX, b.x + b.width);
-    maxY = Math.max(maxY, b.y + b.height);
-  }
-  const pad = Math.max((maxX - minX) * 0.1, (maxY - minY) * 0.1, 40);
-  return {
-    x: minX - pad,
-    y: minY - pad,
-    width: maxX - minX + pad * 2,
-    height: maxY - minY + pad * 2
-  };
+function IconSelect(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 13l6 6" })
+  ] });
 }
-
-// src/react/persistence/indexed-db-adapter.ts
-init_shape_builders();
-var DOCUMENT_STORE = "document";
-var DOCUMENT_KEY = "main";
-function openDocumentDb(dbName) {
-  return new Promise((resolve, reject) => {
-    const req = indexedDB.open(dbName, 1);
-    req.onupgradeneeded = () => {
-      const db = req.result;
-      if (!db.objectStoreNames.contains(DOCUMENT_STORE)) {
-        db.createObjectStore(DOCUMENT_STORE);
-      }
-    };
-    req.onsuccess = () => resolve(req.result);
-    req.onerror = () => reject(req.error);
-  });
+function IconRect(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }) });
 }
-function createIndexedDbPersistenceAdapter(options = {}) {
-  const dbName = options.dbName ?? "canvu-document";
-  const imageStore = new IndexedDbImageStore();
-  let documentDbPromise = null;
-  function getDocDb() {
-    if (!documentDbPromise) {
-      documentDbPromise = openDocumentDb(dbName);
-    }
-    return documentDbPromise;
-  }
-  async function getFromDocDb(key) {
-    const db = await getDocDb();
-    return new Promise((resolve, reject) => {
-      const tx = db.transaction(DOCUMENT_STORE, "readonly");
-      const req = tx.objectStore(DOCUMENT_STORE).get(key);
-      req.onsuccess = () => resolve(req.result);
-      req.onerror = () => reject(req.error);
-    });
-  }
-  async function putInDocDb(key, value) {
-    const db = await getDocDb();
-    return new Promise((resolve, reject) => {
-      const tx = db.transaction(DOCUMENT_STORE, "readwrite");
-      const req = tx.objectStore(DOCUMENT_STORE).put(value, key);
-      req.onsuccess = () => resolve();
-      req.onerror = () => reject(req.error);
-    });
-  }
-  const revokedHrefs = /* @__PURE__ */ new Set();
-  function revokeItemBlob(item) {
-    if (item.imageRasterHref?.startsWith("blob:")) {
-      revokedHrefs.add(item.imageRasterHref);
-    }
-    if (item.imageThumbnailHref?.startsWith("blob:")) {
-      revokedHrefs.add(item.imageThumbnailHref);
-    }
-    const out = { ...item };
-    delete out.imageRasterHref;
-    delete out.imageThumbnailHref;
-    if (item.toolKind === "image") {
-      out.childrenSvg = "";
-    }
-    return out;
-  }
-  return {
-    async load() {
-      const raw = await getFromDocDb(DOCUMENT_KEY);
-      if (!raw?.items) return null;
-      const resolved = [];
-      for (const item of raw.items) {
-        if (item.toolKind === "image" && item.imageBlobId) {
-          const itemWithBlob = { ...item };
-          if (item.imageThumbnailBlobId) {
-            const thumbUrl = await createThumbnailBlobUrlFromStore(
-              imageStore,
-              item.imageThumbnailBlobId
-            );
-            if (thumbUrl) {
-              itemWithBlob.imageThumbnailHref = thumbUrl;
-            }
-          }
-          const fullUrl = await createBlobUrlFromStore(imageStore, item.imageBlobId);
-          if (fullUrl) {
-            itemWithBlob.imageRasterHref = fullUrl;
-          }
-          const rebuilt = rebuildItemSvg(itemWithBlob);
-          resolved.push(rebuilt);
-        } else {
-          resolved.push(item);
-        }
-      }
-      return { items: resolved, version: raw.version ?? 1 };
-    },
-    async save(snapshot) {
-      for (const href of revokedHrefs) {
-        URL.revokeObjectURL(href);
-      }
-      revokedHrefs.clear();
-      const cleanItems = snapshot.items.map(revokeItemBlob);
-      await putInDocDb(DOCUMENT_KEY, {
-        items: cleanItems,
-        version: snapshot.version ?? 1
-      });
-    }
-  };
+function IconEllipse(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6" }) });
 }
-
-// src/react/persistence/local-storage-adapter.ts
-var DEFAULT_VECTOR_CANVAS_STORAGE_KEY = "trazo.vector-canvas.v1";
-var SNAPSHOT_VERSION = 1;
-function createLocalStoragePersistenceAdapter(options = {}) {
-  const key = options.key ?? DEFAULT_VECTOR_CANVAS_STORAGE_KEY;
-  const storage = options.storage ?? (typeof globalThis !== "undefined" && "localStorage" in globalThis && globalThis.localStorage ? globalThis.localStorage : null);
-  return {
-    load() {
-      if (!storage) return Promise.resolve(null);
-      try {
-        const raw = storage.getItem(key);
-        if (!raw) return Promise.resolve(null);
-        const parsed = JSON.parse(raw);
-        if (!parsed || typeof parsed !== "object" || !("items" in parsed) || !Array.isArray(parsed.items)) {
-          return Promise.resolve(null);
-        }
-        return Promise.resolve(parsed);
-      } catch {
-        return Promise.resolve(null);
-      }
-    },
-    save(snapshot) {
-      if (!storage) return Promise.resolve();
-      try {
-        storage.setItem(
-          key,
-          JSON.stringify({
-            ...snapshot,
-            version: snapshot.version ?? SNAPSHOT_VERSION
-          })
-        );
-      } catch {
-      }
-      return Promise.resolve();
-    }
-  };
+function IconLine(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5" }) });
 }
-function createNoopPersistenceAdapter() {
-  return {
-    load: () => Promise.resolve(null),
-    save: () => Promise.resolve()
-  };
-}
-function useVectorCanvasDocument(options = {}) {
-  const {
-    persistenceKey = DEFAULT_VECTOR_CANVAS_STORAGE_KEY,
-    persistence,
-    debounceMs = 400,
-    remote
-  } = options;
-  const adapter = react.useMemo(() => {
-    if (persistence === false) return createNoopPersistenceAdapter();
-    if (persistence) return persistence;
-    return createLocalStoragePersistenceAdapter({ key: persistenceKey });
-  }, [persistence, persistenceKey]);
-  const [items, setItems] = react.useState([]);
-  const [isHydrated, setIsHydrated] = react.useState(false);
-  const saveTimerRef = react.useRef(null);
-  const adapterRef = react.useRef(adapter);
-  adapterRef.current = adapter;
-  react.useEffect(() => {
-    let cancelled = false;
-    adapter.load().then((snap) => {
-      if (cancelled) return;
-      if (snap?.items && snap.items.length > 0) {
-        setItems(snap.items);
-      }
-      setIsHydrated(true);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [adapter]);
-  const persist = react.useCallback((next) => {
-    void adapterRef.current.save({ items: next, version: 1 });
-  }, []);
-  const onItemsChange = react.useCallback(
-    (next) => {
-      setItems(next);
-      remote?.send?.(next);
-      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-      saveTimerRef.current = setTimeout(() => {
-        persist(next);
-        saveTimerRef.current = null;
-      }, debounceMs);
-    },
-    [debounceMs, persist, remote]
-  );
-  react.useEffect(() => {
-    if (!remote || !isHydrated) return;
-    return remote.subscribe((serverItems) => {
-      setItems(serverItems);
-      persist(serverItems);
-    });
-  }, [remote, isHydrated, persist]);
-  react.useEffect(
-    () => () => {
-      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-    },
-    []
-  );
-  const clearPersistedDocument = react.useCallback(() => {
-    setItems([]);
-    void adapterRef.current.save({ items: [], version: 1 });
-  }, []);
-  return {
-    items,
-    onItemsChange,
-    setItems: onItemsChange,
-    isHydrated,
-    clearPersistedDocument
-  };
+function IconArrow(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 5 19 5 19 12" })
+  ] });
 }
-var CanvuPluginContext = react.createContext(
-  null
-);
-function createCanvuPlugin(plugin) {
-  return plugin;
+function IconDraw(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 19l7-7 3 3-7 7-3-3z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2l7.586 7.586" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "2" })
+  ] });
 }
-function useCanvuPluginContext() {
-  const ctx = react.useContext(CanvuPluginContext);
-  if (!ctx) {
-    throw new Error(
-      "useCanvuPluginContext must be used inside a VectorViewport plugin runtime."
-    );
-  }
-  return ctx;
+function IconText(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21h6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v18" })
+  ] });
 }
-function useCanvuViewportContext() {
-  const { viewportRef, viewport } = useCanvuPluginContext();
-  return { viewportRef, viewport };
+function IconImage(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
+  ] });
 }
-function useCanvuDocumentContext() {
-  const { viewport } = useCanvuPluginContext();
-  return {
-    items: viewport.items,
-    onItemsChange: viewport.onItemsChange
-  };
+function IconLaser(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4v4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 12h4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 12h4" })
+  ] });
 }
-function useCanvuResolvedTools() {
-  return useCanvuPluginContext().resolvedTools;
+var ic = { size: 20, strokeWidth: 2 };
+var DEFAULT_OVERFLOW_TOOL_IDS = [
+  "rect",
+  "ellipse",
+  "line",
+  "marker",
+  "laser",
+  "image"
+];
+var DEFAULT_VECTOR_TOOLS = [
+  {
+    id: "hand",
+    label: "Hand",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hand, { ...ic, "aria-hidden": true }),
+    shortcutHint: "H"
+  },
+  {
+    id: "select",
+    label: "Select",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointer2, { ...ic, "aria-hidden": true }),
+    shortcutHint: "V"
+  },
+  {
+    id: "rect",
+    label: "Rectangle",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, { ...ic, "aria-hidden": true }),
+    shortcutHint: "R"
+  },
+  {
+    id: "ellipse",
+    label: "Ellipse",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { ...ic, "aria-hidden": true }),
+    shortcutHint: "O"
+  },
+  {
+    id: "line",
+    label: "Line",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { ...ic, "aria-hidden": true }),
+    shortcutHint: "L"
+  },
+  {
+    id: "arrow",
+    label: "Arrow",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { ...ic, "aria-hidden": true }),
+    shortcutHint: "A"
+  },
+  {
+    id: "draw",
+    label: "Desenhar",
+    tooltipLabel: "Draw",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PenLine, { ...ic, "aria-hidden": true }),
+    shortcutHint: "D"
+  },
+  {
+    id: "marker",
+    label: "Realce",
+    tooltipLabel: "Highlighter",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Highlighter, { ...ic, "aria-hidden": true }),
+    shortcutHint: "M"
+  },
+  {
+    id: "laser",
+    label: "Laser",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(IconLaser, { "aria-hidden": true }),
+    shortcutHint: "K"
+  },
+  {
+    id: "eraser",
+    label: "Borracha",
+    tooltipLabel: "Eraser",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eraser, { ...ic, "aria-hidden": true }),
+    shortcutHint: "E"
+  },
+  {
+    id: "text",
+    label: "Text",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { ...ic, "aria-hidden": true }),
+    shortcutHint: "T"
+  },
+  {
+    id: "image",
+    label: "File",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { ...ic, "aria-hidden": true }),
+    shortcutHint: "I"
+  }
+];
+var shellLook = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  minWidth: 160,
+  padding: "10px 12px",
+  borderRadius: 8,
+  border: "1px solid rgba(0,0,0,0.12)",
+  background: "rgba(255,255,255,0.96)",
+  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+  pointerEvents: "auto"
+};
+var labelStyle2 = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+  fontSize: 11,
+  fontWeight: 600,
+  color: "#52525b"
+};
+function normalizeHex(stroke) {
+  if (/^#[0-9A-Fa-f]{6}$/.test(stroke)) return stroke;
+  return "#2563eb";
 }
-function useCanvuPluginContribution(pluginId, contribution) {
-  const { registerContribution, unregisterContribution } = useCanvuPluginContext();
-  react.useLayoutEffect(() => {
-    registerContribution(pluginId, contribution);
-    return () => unregisterContribution(pluginId);
-  }, [contribution, pluginId, registerContribution, unregisterContribution]);
+function isStylableKind(tk) {
+  return tk === "rect" || tk === "ellipse" || tk === "line" || tk === "arrow" || tk === "draw" || tk === "pencil" || tk === "brush" || tk === "marker" || tk === "text";
 }
-function ToolPluginComponent({
-  pluginId,
-  tool,
-  toolTransform,
-  createItem
-}) {
-  const contribution = react.useMemo(
-    () => ({
-      tools: [tool],
-      toolTransform,
-      customPlacements: createItem ? [
-        {
-          toolId: tool.id,
-          createItem
-        }
-      ] : void 0
-    }),
-    [createItem, tool, toolTransform]
-  );
-  useCanvuPluginContribution(pluginId, contribution);
-  return null;
-}
-function createToolPlugin(options) {
-  const { createItem, toolTransform, ...tool } = options;
-  const pluginId = `canvu.plugin.tool:${tool.id}`;
-  return createCanvuPlugin({
-    id: pluginId,
-    Component() {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ToolPluginComponent,
-        {
-          pluginId,
-          tool,
-          toolTransform,
-          createItem
-        }
-      );
-    }
-  });
-}
-var menuStyle = {
-  position: "fixed",
-  zIndex: 1e4,
-  minWidth: 200,
-  padding: 4,
-  backgroundColor: "#ffffff",
-  border: "1px solid #e2e8f0",
-  borderRadius: 8,
-  boxShadow: "0 10px 40px rgba(15, 23, 42, 0.12)",
-  fontSize: 13,
-  fontFamily: "system-ui, sans-serif",
-  color: "#0f172a"
-};
-var itemStyle = {
-  display: "block",
-  width: "100%",
-  textAlign: "left",
-  padding: "8px 12px",
-  margin: 0,
-  border: "none",
-  borderRadius: 4,
-  background: "transparent",
-  cursor: "pointer"
-};
-var dividerStyle = {
-  height: 1,
-  margin: "4px 8px",
-  background: "#e2e8f0"
-};
-function ShapeContextMenu({
-  x,
-  y,
-  allSelectedLocked,
-  onClose,
-  onToggleLock,
-  onCut,
-  onCopy,
-  onBringToFront,
-  onBringForward,
-  onSendBackward,
-  onSendToBack,
-  onDuplicate,
-  onDelete
+function VectorSelectionInspector({
+  items: itemsProp,
+  activeToolStyle: activeToolStyleProp,
+  onChange: onChangeProp,
+  position = "top-left",
+  inset = 12,
+  zIndex = 24,
+  className,
+  style
 }) {
-  const rootRef = react.useRef(null);
-  react.useLayoutEffect(() => {
-    const el = rootRef.current;
-    if (!el) return;
-    const pad = 8;
-    const w = el.offsetWidth || 200;
-    const h = el.offsetHeight || 160;
-    let left = x;
-    let top = y;
-    if (left + w + pad > window.innerWidth) {
-      left = Math.max(pad, window.innerWidth - w - pad);
-    }
-    if (top + h + pad > window.innerHeight) {
-      top = Math.max(pad, window.innerHeight - h - pad);
-    }
-    el.style.left = `${left}px`;
-    el.style.top = `${top}px`;
-  }, [x, y]);
-  react.useEffect(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-    const onPointerDown = (e) => {
-      const t = e.target;
-      if (t && rootRef.current?.contains(t)) {
-        return;
-      }
-      onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.removeEventListener("pointerdown", onPointerDown, true);
-    };
-  }, [onClose]);
-  const run = (fn) => () => {
-    fn();
-    onClose();
+  const ctx = useCanvuChromeContext();
+  const items = itemsProp ?? ctx?.selectedItems ?? [];
+  const activeToolStyle = activeToolStyleProp === void 0 ? ctx?.activeToolStyle ?? null : activeToolStyleProp;
+  const onChange = onChangeProp ?? ctx?.onSelectionStyleChange ?? null;
+  if (!onChange) return null;
+  const shell = {
+    ...getBoardPositionStyle(position, inset, zIndex),
+    ...shellLook,
+    ...style
   };
-  const renderAction = (label, onClick, options) => /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      role: "menuitem",
-      style: {
-        ...itemStyle,
-        ...options?.danger ? { color: "#b91c1c" } : {}
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.background = options?.danger ? "#fef2f2" : "#f1f5f9";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.background = "transparent";
-      },
-      onClick: run(onClick),
-      children: label
-    }
+  if (activeToolStyle) {
+    const stroke2 = activeToolStyle.stroke;
+    const strokeWidth2 = activeToolStyle.strokeWidth;
+    const hex2 = normalizeHex(stroke2);
+    const showMarkerOpacity2 = activeToolStyle.toolKind === "marker";
+    const opacityPct2 = Math.round((activeToolStyle.strokeOpacity ?? 1) * 100);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        "data-slot": "vector-selection-inspector",
+        "data-position": position,
+        className,
+        "aria-label": activeToolStyle.label ?? "Estilo da ferramenta",
+        style: shell,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
+            "Cor",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "color",
+                value: hex2,
+                onChange: (e) => onChange({
+                  stroke: e.target.value,
+                  strokeWidth: strokeWidth2,
+                  ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
+                }),
+                style: {
+                  width: "100%",
+                  height: 32,
+                  padding: 0,
+                  border: "none",
+                  cursor: "pointer",
+                  background: "transparent"
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
+            "Grossura",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 48,
+                value: strokeWidth2,
+                onChange: (e) => onChange({
+                  stroke: hex2,
+                  strokeWidth: Number(e.target.value),
+                  ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
+                })
+              }
+            )
+          ] }),
+          showMarkerOpacity2 && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
+            "Opacidade (marcador)",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "range",
+                min: 10,
+                max: 100,
+                value: opacityPct2,
+                onChange: (e) => {
+                  const v = Number(e.target.value) / 100;
+                  onChange({
+                    stroke: hex2,
+                    strokeWidth: strokeWidth2,
+                    strokeOpacity: v
+                  });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
+              opacityPct2,
+              "%"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  const stylable = items.filter(
+    (it) => !it.locked && it.toolKind && isStylableKind(it.toolKind)
   );
-  const menu = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  if (stylable.length === 0) return null;
+  const first = stylable[0];
+  if (!first) return null;
+  const allSameStroke = stylable.every(
+    (it) => (it.stroke ?? "#2563eb") === (first.stroke ?? "#2563eb")
+  );
+  const allSameWidth = stylable.every(
+    (it) => (it.strokeWidth ?? 2) === (first.strokeWidth ?? 2)
+  );
+  const stroke = first.stroke ?? "#2563eb";
+  const strokeWidth = first.strokeWidth ?? 2;
+  const hex = normalizeHex(stroke);
+  const markers = stylable.filter((it) => it.toolKind === "marker");
+  const showMarkerOpacity = markers.length > 0;
+  const firstMarker = markers[0];
+  const allSameMarkerOpacity = markers.length > 0 && markers.every(
+    (it) => (it.strokeOpacity ?? 1) === (firstMarker?.strokeOpacity ?? 1)
+  );
+  const opacityPct = firstMarker ? Math.round((firstMarker.strokeOpacity ?? 1) * 100) : 100;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
     {
-      ref: rootRef,
-      "data-slot": "shape-context-menu",
-      style: { ...menuStyle, left: x, top: y },
-      role: "menu",
+      "data-slot": "vector-selection-inspector",
+      "data-position": position,
+      className,
+      "aria-label": "Estilo da sele\xE7\xE3o",
+      style: shell,
       children: [
-        renderAction("Recortar", onCut),
-        renderAction("Copiar", onCopy),
-        renderAction("Duplicar", onDuplicate),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: dividerStyle }),
-        renderAction("Trazer para frente", onBringToFront),
-        renderAction("Avancar uma camada", onBringForward),
-        renderAction("Recuar uma camada", onSendBackward),
-        renderAction("Enviar para tras", onSendToBack),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: dividerStyle }),
-        renderAction(allSelectedLocked ? "Desbloquear" : "Bloquear", onToggleLock),
-        renderAction("Apagar", onDelete, { danger: true })
+        stylable.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, fontSize: 11, color: "#71717a" }, children: [
+          stylable.length,
+          " objetos selecionados"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
+          "Cor",
+          !allSameStroke && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: [
+            " ",
+            "(valores misturados \u2014 novo valor aplica a todos)"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "color",
+              value: hex,
+              onChange: (e) => onChange({
+                stroke: e.target.value,
+                strokeWidth
+              }),
+              style: {
+                width: "100%",
+                height: 32,
+                padding: 0,
+                border: "none",
+                cursor: "pointer",
+                background: "transparent"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
+          "Grossura",
+          !allSameWidth && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: " (misturado)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              min: 1,
+              max: 48,
+              value: strokeWidth,
+              onChange: (e) => onChange({
+                stroke: hex,
+                strokeWidth: Number(e.target.value)
+              })
+            }
+          )
+        ] }),
+        showMarkerOpacity && firstMarker && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle2, children: [
+          "Opacidade (marcador)",
+          !allSameMarkerOpacity && markers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: " (misturado)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              min: 10,
+              max: 100,
+              value: opacityPct,
+              onChange: (e) => {
+                const v = Number(e.target.value) / 100;
+                onChange({
+                  stroke: hex,
+                  strokeWidth,
+                  strokeOpacity: v
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
+            opacityPct,
+            "%"
+          ] })
+        ] })
       ]
     }
   );
-  if (typeof document === "undefined") {
-    return null;
-  }
-  return reactDom.createPortal(menu, document.body);
 }
-var base = {
-  width: 20,
-  height: 20,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
+var rootStyle = {
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  minHeight: 0,
+  width: "100%"
 };
-function IconHand(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8a2 2 0 1 1 4 0v5a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" })
-  ] });
-}
-function IconSelect(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 13l6 6" })
-  ] });
-}
-function IconRect(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }) });
-}
-function IconEllipse(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6" }) });
-}
-function IconLine(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...base, ...props, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5" }) });
-}
-function IconArrow(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5" }),
-    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 5 19 5 19 12" })
-  ] });
-}
-function IconDraw(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 19l7-7 3 3-7 7-3-3z" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2l7.586 7.586" }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "2" })
-  ] });
+var headerStyle2 = {
+  flexShrink: 0,
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "0.75rem",
+  padding: "0.75rem 1rem",
+  borderBottom: "1px solid #e4e4e7",
+  background: "#fff",
+  fontSize: "0.875rem"
+};
+var bodyStyle = {
+  flex: 1,
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column"
+};
+var mainStyle = {
+  flex: 1,
+  minHeight: 0,
+  position: "relative",
+  display: "flex",
+  flexDirection: "column"
+};
+var viewportSurfaceStyle = {
+  flex: 1,
+  minHeight: 0,
+  position: "relative",
+  width: "100%",
+  alignSelf: "stretch",
+  background: "#fff",
+  touchAction: "none"
+};
+function mergeStyle(base2, style) {
+  return style ? { ...base2, ...style } : base2;
 }
-function IconText(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21h6" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v18" })
-  ] });
+function vectorCanvasSpaceStyle(position, inset, zIndex) {
+  return {
+    ...getBoardPositionStyle(position, inset, zIndex),
+    pointerEvents: "none"
+  };
 }
-function IconImage(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
-  ] });
+function VectorCanvasRoot({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "vector-canvas-root",
+      className,
+      style: mergeStyle(rootStyle, style),
+      children
+    }
+  );
 }
-function IconLaser(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, ...props, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2.5" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4v4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16v4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 12h4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 12h4" })
-  ] });
+function VectorCanvasHeader({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      "data-slot": "vector-canvas-header",
+      className,
+      style: mergeStyle(headerStyle2, style),
+      children
+    }
+  );
 }
-var ic = { size: 20, strokeWidth: 2 };
-var DEFAULT_OVERFLOW_TOOL_IDS = [
-  "rect",
-  "ellipse",
-  "line",
-  "marker",
-  "laser",
-  "image"
-];
-var DEFAULT_VECTOR_TOOLS = [
-  {
-    id: "hand",
-    label: "Hand",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Hand, { ...ic, "aria-hidden": true }),
-    shortcutHint: "H"
-  },
-  {
-    id: "select",
-    label: "Select",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointer2, { ...ic, "aria-hidden": true }),
-    shortcutHint: "V"
-  },
-  {
-    id: "rect",
-    label: "Rectangle",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, { ...ic, "aria-hidden": true }),
-    shortcutHint: "R"
-  },
-  {
-    id: "ellipse",
-    label: "Ellipse",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { ...ic, "aria-hidden": true }),
-    shortcutHint: "O"
-  },
-  {
-    id: "line",
-    label: "Line",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { ...ic, "aria-hidden": true }),
-    shortcutHint: "L"
-  },
-  {
-    id: "arrow",
-    label: "Arrow",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { ...ic, "aria-hidden": true }),
-    shortcutHint: "A"
-  },
-  {
-    id: "draw",
-    label: "Desenhar",
-    tooltipLabel: "Draw",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PenLine, { ...ic, "aria-hidden": true }),
-    shortcutHint: "D"
-  },
-  {
-    id: "marker",
-    label: "Realce",
-    tooltipLabel: "Highlighter",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Highlighter, { ...ic, "aria-hidden": true }),
-    shortcutHint: "M"
-  },
-  {
-    id: "laser",
-    label: "Laser",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(IconLaser, { "aria-hidden": true }),
-    shortcutHint: "K"
-  },
-  {
-    id: "eraser",
-    label: "Borracha",
-    tooltipLabel: "Eraser",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eraser, { ...ic, "aria-hidden": true }),
-    shortcutHint: "E"
-  },
-  {
-    id: "text",
-    label: "Text",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { ...ic, "aria-hidden": true }),
-    shortcutHint: "T"
-  },
-  {
-    id: "image",
-    label: "File",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { ...ic, "aria-hidden": true }),
-    shortcutHint: "I"
+function VectorCanvasBody({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "vector-canvas-body",
+      className,
+      style: mergeStyle(bodyStyle, style),
+      children
+    }
+  );
+}
+function VectorCanvasMain({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "vector-canvas-main",
+      className,
+      style: mergeStyle(mainStyle, style),
+      children
+    }
+  );
+}
+function VectorCanvasViewportSurface({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "vector-canvas-viewport-surface",
+      className,
+      style: mergeStyle(viewportSurfaceStyle, style),
+      children
+    }
+  );
+}
+function VectorCanvasToolbar({
+  children,
+  className,
+  style,
+  position = "bottom-center",
+  inset = 12,
+  zIndex = 30
+}) {
+  const base2 = {
+    ...getBoardPositionStyle(position, inset, zIndex),
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    maxWidth: "calc(100% - 24px)",
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "vector-canvas-toolbar",
+      "data-position": position,
+      className,
+      style: mergeStyle(base2, style),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: "auto" }, children })
+    }
+  );
+}
+function VectorCanvasSpace({
+  children,
+  className,
+  style,
+  position = "top-right",
+  inset = 12,
+  zIndex = 40,
+  contentPointerEvents = "auto"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": `vector-canvas-space-${position}`,
+      className,
+      style: mergeStyle(vectorCanvasSpaceStyle(position, inset, zIndex), style),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: contentPointerEvents }, children })
+    }
+  );
+}
+var VectorCanvas = {
+  Root: VectorCanvasRoot,
+  Header: VectorCanvasHeader,
+  Body: VectorCanvasBody,
+  Main: VectorCanvasMain,
+  ViewportSurface: VectorCanvasViewportSurface,
+  Toolbar: VectorCanvasToolbar,
+  Space: VectorCanvasSpace,
+  NavMenu,
+  SelectionInspector: VectorSelectionInspector
+};
+var VectorToolbarItemContext = react.createContext(
+  null
+);
+function useVectorToolbarItemContext(componentName) {
+  const ctx = react.useContext(VectorToolbarItemContext);
+  if (!ctx) {
+    throw new Error(`${componentName} must be used inside <VectorToolbar>`);
   }
-];
+  return ctx;
+}
 var toolbarStyles = {
   display: "flex",
   gap: "4px",
@@ -3265,6 +3825,20 @@ var overflowGridCellButtonStyle = {
   outline: "none",
   WebkitTapHighlightColor: "transparent"
 };
+var activeToggleStyle = {
+  background: "rgba(24,24,27,0.1)",
+  borderColor: "rgba(24,24,27,0.28)",
+  boxShadow: "inset 0 0 0 1px rgba(24,24,27,0.08)"
+};
+var inactiveToggleStyle = {
+  borderColor: "transparent",
+  boxShadow: "none"
+};
+function preventMouseDefault2(e) {
+  if (e.pointerType === "mouse") {
+    e.preventDefault();
+  }
+}
 function ToolLockGlyph({ locked }) {
   const Icon = locked ? lucideReact.Lock : lucideReact.LockOpen;
   return /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 18, strokeWidth: 2, "aria-hidden": true });
@@ -3278,7 +3852,406 @@ function splitToolbarTools(tools, overflowIds) {
   const overflow = overflowIds.map((id) => tools.find((t) => t.id === id)).filter((t) => Boolean(t));
   return { primary, overflow };
 }
-var icOverflow = { size: 18, strokeWidth: 2 };
+var icOverflow = { size: 18, strokeWidth: 2 };
+function useOverflowDropdown() {
+  const [open, setOpen] = react.useState(false);
+  const wrapRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const menuId = react.useId();
+  const close = react.useCallback(() => {
+    setOpen(false);
+  }, []);
+  const prevOpenRef = react.useRef(open);
+  react.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDocPointerDown = (e) => {
+      if (wrapRef.current?.contains(e.target)) {
+        return;
+      }
+      close();
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close();
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("pointerdown", onDocPointerDown, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", onDocPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, close]);
+  react.useEffect(() => {
+    if (prevOpenRef.current && !open) {
+      triggerRef.current?.focus({ preventScroll: true });
+    }
+    prevOpenRef.current = open;
+  }, [open]);
+  return { open, setOpen, close, wrapRef, triggerRef, menuId };
+}
+function renderInlineToolButton(tool, ctx) {
+  const {
+    selectedId,
+    selectTool,
+    density,
+    buttonClassName,
+    activeButtonClassName,
+    renderToolButton
+  } = ctx;
+  const selected = tool.id === selectedId;
+  const label = tool.ariaLabel ?? tool.label;
+  if (renderToolButton) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderToolButton({
+      tool,
+      selected,
+      onSelect: () => selectTool(tool.id)
+    }) }, tool.id);
+  }
+  const tooltipName = tool.tooltipLabel ?? tool.label;
+  const tooltipText = tool.shortcutHint !== void 0 ? `${tooltipName} \xB7 ${tool.shortcutHint}` : tooltipName;
+  const labelOnly = tool.icon == null;
+  const labelTextStyle = labelOnly ? {
+    fontSize: "12px",
+    fontWeight: 600,
+    letterSpacing: "0.02em",
+    lineHeight: 1.2,
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale",
+    textRendering: "geometricPrecision"
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "vector-toolbar-tool-wrap", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": selected,
+        "aria-label": label,
+        ...tool.shortcutHint !== void 0 ? { "aria-keyshortcuts": tool.shortcutHint } : {},
+        className: `${buttonClassName} ${selected ? activeButtonClassName : ""}`.trim(),
+        style: {
+          ...defaultButtonStyle,
+          ...density === "compact" ? {
+            minHeight: "40px",
+            minWidth: labelOnly ? "52px" : "40px",
+            padding: "6px 8px"
+          } : {},
+          ...selected ? activeToggleStyle : inactiveToggleStyle
+        },
+        onPointerDown: preventMouseDefault2,
+        onClick: () => selectTool(tool.id),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: tool.icon ?? /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelTextStyle, children: tool.label })
+            }
+          ),
+          density === "comfortable" && tool.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                lineHeight: 1,
+                maxWidth: "56px",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              },
+              children: tool.label
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vector-toolbar-tip", "aria-hidden": "true", children: tooltipText })
+  ] }, tool.id);
+}
+function renderOverflowToolButton(tool, ctx) {
+  const { selectedId, selectTool, closeMenu, renderToolButton, tabIndex } = ctx;
+  const selected = tool.id === selectedId;
+  const label = tool.ariaLabel ?? tool.label;
+  const tooltipName = tool.tooltipLabel ?? tool.label;
+  if (renderToolButton) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "vector-toolbar-overflow-cell",
+        role: "presentation",
+        children: renderToolButton({
+          tool,
+          selected,
+          onSelect: () => {
+            selectTool(tool.id);
+            closeMenu();
+          }
+        })
+      },
+      tool.id
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vector-toolbar-overflow-cell", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitemradio",
+      "aria-checked": selected,
+      tabIndex: tabIndex ?? -1,
+      "aria-label": label,
+      ...tool.shortcutHint !== void 0 ? { "aria-keyshortcuts": tool.shortcutHint } : {},
+      style: overflowGridCellButtonStyle,
+      onPointerDown: preventMouseDefault2,
+      onClick: () => {
+        selectTool(tool.id);
+        closeMenu();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              lineHeight: 0
+            },
+            children: tool.icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "11px",
+                  fontWeight: 700,
+                  lineHeight: 1.1,
+                  textAlign: "center",
+                  maxWidth: "34px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: tool.label.slice(0, 3)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "vector-toolbar-overflow-tip", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: tooltipName }),
+          tool.shortcutHint !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vector-toolbar-overflow-tip-shortcut", children: tool.shortcutHint }) : null
+        ] })
+      ]
+    }
+  ) }, tool.id);
+}
+function hasToolIdProp(value) {
+  return typeof value === "function" && "toolId" in value && typeof value.toolId === "string";
+}
+function findActiveOverflowChild(children, selectedId) {
+  let result = null;
+  react.Children.forEach(children, (child) => {
+    if (result || !react.isValidElement(child)) {
+      return;
+    }
+    const childType = child.type;
+    let toolId;
+    let label = "";
+    let icon = null;
+    const childProps = child.props ?? {};
+    if (hasToolIdProp(childType)) {
+      toolId = childType.toolId;
+      const def = DEFAULT_VECTOR_TOOLS.find((t) => t.id === toolId);
+      if (def) {
+        label = def.label;
+        icon = def.icon ?? null;
+      }
+    } else {
+      toolId = childProps.id;
+      label = childProps.label ?? "";
+      icon = childProps.icon ?? null;
+    }
+    if (childProps.icon !== void 0) {
+      icon = childProps.icon;
+    }
+    if (childProps.label !== void 0 && childProps.label !== "") {
+      label = childProps.label;
+    }
+    if (toolId !== void 0 && toolId === selectedId) {
+      result = { id: toolId, label, icon };
+    }
+  });
+  return result;
+}
+function VectorToolbarTool(props) {
+  const ctx = useVectorToolbarItemContext("VectorToolbar.Tool");
+  const tool = {
+    id: props.id,
+    label: props.label,
+    tooltipLabel: props.tooltipLabel,
+    icon: props.icon,
+    shortcutHint: props.shortcutHint,
+    ariaLabel: props.ariaLabel
+  };
+  if (ctx.insideOverflow) {
+    return renderOverflowToolButton(tool, {
+      selectedId: ctx.selectedId,
+      selectTool: ctx.selectTool,
+      closeMenu: ctx.closeOverflow,
+      renderToolButton: ctx.renderToolButton
+    });
+  }
+  return renderInlineToolButton(tool, {
+    selectedId: ctx.selectedId,
+    selectTool: ctx.selectTool,
+    density: ctx.density,
+    buttonClassName: ctx.buttonClassName,
+    activeButtonClassName: ctx.activeButtonClassName,
+    renderToolButton: ctx.renderToolButton
+  });
+}
+function VectorToolbarToolLock({
+  className,
+  divider = true
+} = {}) {
+  const ctx = useVectorToolbarItemContext("VectorToolbar.ToolLock");
+  const {
+    toolLocked,
+    setToolLocked,
+    buttonClassName,
+    activeButtonClassName,
+    density
+  } = ctx;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "vector-toolbar-tool-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": toolLocked,
+          "aria-label": toolLocked ? "Unlock tool" : "Lock tool",
+          className: `${buttonClassName} ${toolLocked ? activeButtonClassName : ""} ${className ?? ""}`.trim(),
+          style: {
+            ...defaultButtonStyle,
+            ...density === "compact" ? {
+              minHeight: "40px",
+              minWidth: "40px",
+              padding: "6px 8px"
+            } : {},
+            ...toolLocked ? activeToggleStyle : inactiveToggleStyle
+          },
+          onPointerDown: preventMouseDefault2,
+          onClick: () => setToolLocked(!toolLocked),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ToolLockGlyph, { locked: toolLocked })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vector-toolbar-tip", "aria-hidden": "true", children: toolLocked ? "Tool lock on" : "Tool lock off" })
+    ] }),
+    divider ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, style: toolLockDividerStyle }) : null
+  ] });
+}
+function VectorToolbarOverflow({
+  children,
+  ariaLabel = "More tools"
+}) {
+  const ctx = useVectorToolbarItemContext("VectorToolbar.Overflow");
+  const { open, setOpen, close, wrapRef, triggerRef, menuId } = useOverflowDropdown();
+  if (ctx.insideOverflow) {
+    throw new Error("VectorToolbar.Overflow cannot be nested.");
+  }
+  const activeChild = findActiveOverflowChild(children, ctx.selectedId);
+  const triggerHighlighted = open || activeChild !== null;
+  const customRenderer = Boolean(ctx.renderToolButton);
+  const nestedCtx = {
+    ...ctx,
+    insideOverflow: true,
+    closeOverflow: close
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapRef, className: "vector-toolbar-overflow-anchor", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "vector-toolbar-tool-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          id: `${menuId}-trigger`,
+          "aria-haspopup": customRenderer ? "true" : "menu",
+          "aria-expanded": open,
+          "aria-controls": open ? `${menuId}-menu` : void 0,
+          "aria-label": activeChild ? `${ariaLabel}: ${activeChild.label}` : ariaLabel,
+          className: `vector-toolbar-overflow-trigger ${ctx.buttonClassName} ${triggerHighlighted ? ctx.activeButtonClassName : ""}`.trim(),
+          style: {
+            ...defaultButtonStyle,
+            flexDirection: "row",
+            minWidth: "48px",
+            minHeight: ctx.density === "compact" ? "40px" : "44px",
+            padding: "6px 8px",
+            gap: "4px",
+            ...triggerHighlighted ? activeToggleStyle : inactiveToggleStyle
+          },
+          onPointerDown: preventMouseDefault2,
+          onClick: () => setOpen((o) => !o),
+          onKeyDown: (e) => {
+            if (e.key === "ArrowDown" && !open) {
+              e.preventDefault();
+              setOpen(true);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flex: 1,
+                  minWidth: 0
+                },
+                children: activeChild?.icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shapes, { ...icOverflow, "aria-hidden": true, strokeWidth: 2 })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronDown,
+              {
+                size: 14,
+                strokeWidth: 2,
+                "aria-hidden": true,
+                style: {
+                  opacity: 0.75,
+                  flexShrink: 0,
+                  transform: open ? "rotate(180deg)" : void 0,
+                  transition: "transform 0.15s ease"
+                }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vector-toolbar-tip", "aria-hidden": "true", children: ariaLabel })
+    ] }),
+    open ? customRenderer ? /* @__PURE__ */ jsxRuntime.jsx(
+      "section",
+      {
+        id: `${menuId}-menu`,
+        "aria-label": ariaLabel,
+        className: "vector-toolbar-overflow-panel",
+        children: /* @__PURE__ */ jsxRuntime.jsx(VectorToolbarItemContext.Provider, { value: nestedCtx, children })
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: `${menuId}-menu`,
+        role: "menu",
+        "aria-label": ariaLabel,
+        className: "vector-toolbar-overflow-panel",
+        children: /* @__PURE__ */ jsxRuntime.jsx(VectorToolbarItemContext.Provider, { value: nestedCtx, children })
+      }
+    ) : null
+  ] });
+}
 function ToolbarOverflowMenu({
   tools,
   selectedId,
@@ -3289,46 +4262,9 @@ function ToolbarOverflowMenu({
   renderToolButton,
   menuAriaLabel
 }) {
-  const [open, setOpen] = react.useState(false);
-  const wrapRef = react.useRef(null);
-  const triggerRef = react.useRef(null);
-  const menuId = react.useId();
+  const { open, setOpen, close, wrapRef, triggerRef, menuId } = useOverflowDropdown();
   const activeInOverflow = tools.some((t) => t.id === selectedId);
   const activeTool = tools.find((t) => t.id === selectedId);
-  const close = react.useCallback(() => {
-    setOpen(false);
-  }, []);
-  const prevOpenRef = react.useRef(open);
-  react.useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const onDocPointerDown = (e) => {
-      if (wrapRef.current?.contains(e.target)) {
-        return;
-      }
-      close();
-    };
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        close();
-        triggerRef.current?.focus();
-      }
-    };
-    document.addEventListener("pointerdown", onDocPointerDown, true);
-    document.addEventListener("keydown", onKeyDown, true);
-    return () => {
-      document.removeEventListener("pointerdown", onDocPointerDown, true);
-      document.removeEventListener("keydown", onKeyDown, true);
-    };
-  }, [open, close]);
-  react.useEffect(() => {
-    if (prevOpenRef.current && !open) {
-      triggerRef.current?.focus({ preventScroll: true });
-    }
-    prevOpenRef.current = open;
-  }, [open]);
   const triggerHighlighted = open || activeInOverflow;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapRef, className: "vector-toolbar-overflow-anchor", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "vector-toolbar-tool-wrap", children: [
@@ -3350,20 +4286,9 @@ function ToolbarOverflowMenu({
             minHeight: density === "compact" ? "40px" : "44px",
             padding: "6px 8px",
             gap: "4px",
-            ...triggerHighlighted ? {
-              background: "rgba(24,24,27,0.1)",
-              borderColor: "rgba(24,24,27,0.28)",
-              boxShadow: "inset 0 0 0 1px rgba(24,24,27,0.08)"
-            } : {
-              borderColor: "transparent",
-              boxShadow: "none"
-            }
-          },
-          onPointerDown: (ev) => {
-            if (ev.pointerType === "mouse") {
-              ev.preventDefault();
-            }
+            ...triggerHighlighted ? activeToggleStyle : inactiveToggleStyle
           },
+          onPointerDown: preventMouseDefault2,
           onClick: () => setOpen((o) => !o),
           onKeyDown: (e) => {
             if (e.key === "ArrowDown" && !open) {
@@ -3410,25 +4335,14 @@ function ToolbarOverflowMenu({
         id: `${menuId}-menu`,
         "aria-label": menuAriaLabel,
         className: "vector-toolbar-overflow-panel",
-        children: tools.map((tool) => {
-          const selected = tool.id === selectedId;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "vector-toolbar-overflow-cell",
-              role: "presentation",
-              children: renderToolButton({
-                tool,
-                selected,
-                onSelect: () => {
-                  onSelect(tool.id);
-                  close();
-                }
-              })
-            },
-            tool.id
-          );
-        })
+        children: tools.map(
+          (tool) => renderOverflowToolButton(tool, {
+            selectedId,
+            selectTool: onSelect,
+            closeMenu: close,
+            renderToolButton
+          })
+        )
       }
     ) : null,
     open && !renderToolButton ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3438,69 +4352,19 @@ function ToolbarOverflowMenu({
         role: "menu",
         "aria-label": menuAriaLabel,
         className: "vector-toolbar-overflow-panel",
-        children: tools.map((tool, index) => {
-          const selected = tool.id === selectedId;
-          const label = tool.ariaLabel ?? tool.label;
-          const tooltipName = tool.tooltipLabel ?? tool.label;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vector-toolbar-overflow-cell", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                role: "menuitemradio",
-                "aria-checked": selected,
-                tabIndex: index === 0 ? 0 : -1,
-                "aria-label": label,
-                ...tool.shortcutHint !== void 0 ? { "aria-keyshortcuts": tool.shortcutHint } : {},
-                style: overflowGridCellButtonStyle,
-                onPointerDown: (ev) => {
-                  if (ev.pointerType === "mouse") {
-                    ev.preventDefault();
-                  }
-                },
-                onClick: () => {
-                  onSelect(tool.id);
-                  close();
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      lineHeight: 0
-                    },
-                    children: tool.icon ?? /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "11px",
-                          fontWeight: 700,
-                          lineHeight: 1.1,
-                          textAlign: "center",
-                          maxWidth: "34px",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis"
-                        },
-                        children: tool.label.slice(0, 3)
-                      }
-                    )
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "vector-toolbar-overflow-tip", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: tooltipName }),
-              tool.shortcutHint !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vector-toolbar-overflow-tip-shortcut", children: tool.shortcutHint }) : null
-            ] })
-          ] }, tool.id);
-        })
+        children: tools.map(
+          (tool, index) => renderOverflowToolButton(tool, {
+            selectedId,
+            selectTool: onSelect,
+            closeMenu: close,
+            tabIndex: index === 0 ? 0 : -1
+          })
+        )
       }
     ) : null
   ] });
 }
-function VectorToolbar({
+function VectorToolbarComponent({
   value,
   onChange,
   tools,
@@ -3522,23 +4386,63 @@ function VectorToolbar({
   const pluginContext = react.useContext(CanvuPluginContext);
   const runtimeTools = pluginContext?.resolvedTools;
   const resolvedTools = tools ?? runtimeTools ?? DEFAULT_VECTOR_TOOLS;
-  const ctx = {
-    tools: resolvedTools,
-    selectedId: value,
-    selectTool: onChange,
-    toolLocked,
-    setToolLocked: (locked) => onToolLockedChange?.(locked)
-  };
-  if (children) {
+  if (typeof children === "function") {
+    const ctx = {
+      tools: resolvedTools,
+      selectedId: value,
+      selectTool: onChange,
+      toolLocked,
+      setToolLocked: (locked) => onToolLockedChange?.(locked)
+    };
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: children(ctx) });
   }
+  const flexDir = orientation === "vertical" ? "column" : "row";
+  const toolbarClass = className.trim() === "" ? "vector-toolbar" : `vector-toolbar ${className.trim()}`;
+  if (children !== void 0 && children !== null) {
+    const itemCtx = {
+      selectedId: value,
+      selectTool: onChange,
+      toolLocked,
+      setToolLocked: (locked) => onToolLockedChange?.(locked),
+      density,
+      buttonClassName,
+      activeButtonClassName,
+      renderToolButton,
+      insideOverflow: false,
+      closeOverflow: noop2,
+      orientation
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: TOOLBAR_TOOLTIP_CSS }),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: OVERFLOW_MENU_CSS }),
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: TOOLBAR_MOBILE_CSS }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "toolbar",
+          "data-orientation": orientation,
+          "aria-label": ariaLabel,
+          "aria-orientation": orientation === "vertical" ? "vertical" : "horizontal",
+          className: toolbarClass,
+          style: { ...toolbarStyles, flexDirection: flexDir, ...style },
+          children: /* @__PURE__ */ jsxRuntime.jsx(VectorToolbarItemContext.Provider, { value: itemCtx, children })
+        }
+      )
+    ] });
+  }
   const { primary: primaryTools, overflow: overflowTools } = splitToolbarTools(
     resolvedTools,
     overflowToolIds
   );
-  const flexDir = orientation === "vertical" ? "column" : "row";
   const showOverflowMenu = overflowTools.length > 0;
-  const toolbarClass = className.trim() === "" ? "vector-toolbar" : `vector-toolbar ${className.trim()}`;
+  const inlineCtx = {
+    selectedId: value,
+    selectTool: onChange,
+    density,
+    buttonClassName,
+    activeButtonClassName,
+    renderToolButton
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: TOOLBAR_TOOLTIP_CSS }),
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: OVERFLOW_MENU_CSS }),
@@ -3569,20 +4473,9 @@ function VectorToolbar({
                       minWidth: "40px",
                       padding: "6px 8px"
                     } : {},
-                    ...toolLocked ? {
-                      background: "rgba(24,24,27,0.1)",
-                      borderColor: "rgba(24,24,27,0.28)",
-                      boxShadow: "inset 0 0 0 1px rgba(24,24,27,0.08)"
-                    } : {
-                      borderColor: "transparent",
-                      boxShadow: "none"
-                    }
-                  },
-                  onPointerDown: (ev) => {
-                    if (ev.pointerType === "mouse") {
-                      ev.preventDefault();
-                    }
+                    ...toolLocked ? activeToggleStyle : inactiveToggleStyle
                   },
+                  onPointerDown: preventMouseDefault2,
                   onClick: () => onToolLockedChange?.(!toolLocked),
                   children: /* @__PURE__ */ jsxRuntime.jsx(ToolLockGlyph, { locked: toolLocked })
                 }
@@ -3591,89 +4484,7 @@ function VectorToolbar({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, style: toolLockDividerStyle })
           ] }) : null,
-          primaryTools.map((tool) => {
-            const selected = tool.id === value;
-            const label = tool.ariaLabel ?? tool.label;
-            if (renderToolButton) {
-              return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderToolButton({
-                tool,
-                selected,
-                onSelect: () => onChange(tool.id)
-              }) }, tool.id);
-            }
-            const tooltipName = tool.tooltipLabel ?? tool.label;
-            const tooltipText = tool.shortcutHint !== void 0 ? `${tooltipName} \xB7 ${tool.shortcutHint}` : tooltipName;
-            const labelOnly = tool.icon == null;
-            const labelTextStyle = labelOnly ? {
-              fontSize: "12px",
-              fontWeight: 600,
-              letterSpacing: "0.02em",
-              lineHeight: 1.2,
-              WebkitFontSmoothing: "antialiased",
-              MozOsxFontSmoothing: "grayscale",
-              textRendering: "geometricPrecision"
-            } : {};
-            return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "vector-toolbar-tool-wrap", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  "aria-pressed": selected,
-                  "aria-label": label,
-                  ...tool.shortcutHint !== void 0 ? { "aria-keyshortcuts": tool.shortcutHint } : {},
-                  className: `${buttonClassName} ${selected ? activeButtonClassName : ""}`.trim(),
-                  style: {
-                    ...defaultButtonStyle,
-                    ...density === "compact" ? {
-                      minHeight: "40px",
-                      minWidth: labelOnly ? "52px" : "40px",
-                      padding: "6px 8px"
-                    } : {},
-                    ...selected ? {
-                      background: "rgba(24,24,27,0.1)",
-                      borderColor: "rgba(24,24,27,0.28)",
-                      boxShadow: "inset 0 0 0 1px rgba(24,24,27,0.08)"
-                    } : {
-                      borderColor: "transparent",
-                      boxShadow: "none"
-                    }
-                  },
-                  onPointerDown: (ev) => {
-                    if (ev.pointerType === "mouse") {
-                      ev.preventDefault();
-                    }
-                  },
-                  onClick: () => onChange(tool.id),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center"
-                        },
-                        children: tool.icon ?? /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelTextStyle, children: tool.label })
-                      }
-                    ),
-                    density === "comfortable" && tool.icon ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        style: {
-                          lineHeight: 1,
-                          maxWidth: "56px",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis"
-                        },
-                        children: tool.label
-                      }
-                    ) : null
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vector-toolbar-tip", "aria-hidden": "true", children: tooltipText })
-            ] }, tool.id);
-          }),
+          primaryTools.map((tool) => renderInlineToolButton(tool, inlineCtx)),
           showOverflowMenu && orientation === "horizontal" ? /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
@@ -3700,6 +4511,51 @@ function VectorToolbar({
     )
   ] });
 }
+function noop2() {
+}
+function makeToolBinding(id) {
+  const def = DEFAULT_VECTOR_TOOLS.find((t) => t.id === id);
+  if (!def) {
+    throw new Error(`No default tool with id "${id}"`);
+  }
+  const Component = ((props) => /* @__PURE__ */ jsxRuntime.jsx(VectorToolbarTool, { ...def, className: props?.className }));
+  Component.toolId = id;
+  Component.displayName = `VectorToolbar.${def.label}`;
+  return Component;
+}
+var HandBinding = makeToolBinding("hand");
+var SelectBinding = makeToolBinding("select");
+var RectBinding = makeToolBinding("rect");
+var EllipseBinding = makeToolBinding("ellipse");
+var LineBinding = makeToolBinding("line");
+var ArrowBinding = makeToolBinding("arrow");
+var DrawBinding = makeToolBinding("draw");
+var MarkerBinding = makeToolBinding("marker");
+var LaserBinding = makeToolBinding("laser");
+var EraserBinding = makeToolBinding("eraser");
+var TextBinding = makeToolBinding("text");
+var ImageBinding = makeToolBinding("image");
+VectorToolbarComponent.displayName = "VectorToolbar";
+var VectorToolbar = Object.assign(
+  VectorToolbarComponent,
+  {
+    Tool: VectorToolbarTool,
+    ToolLock: VectorToolbarToolLock,
+    Overflow: VectorToolbarOverflow,
+    Hand: HandBinding,
+    Select: SelectBinding,
+    Rect: RectBinding,
+    Ellipse: EllipseBinding,
+    Line: LineBinding,
+    Arrow: ArrowBinding,
+    Draw: DrawBinding,
+    Marker: MarkerBinding,
+    Laser: LaserBinding,
+    Eraser: EraserBinding,
+    Text: TextBinding,
+    Image: ImageBinding
+  }
+);
 
 // src/camera/camera.ts
 init_rect();
@@ -5069,30 +5925,6 @@ var SvgVectorRenderer = class {
   }
 };
 
-// src/scene/clone-item.ts
-init_shape_builders();
-function cloneVectorSceneItemWithNewId(item) {
-  const id = createShapeId();
-  const copy = JSON.parse(JSON.stringify(item));
-  let next = { ...copy, id };
-  if (next.toolKind === "arrow" && next.line) {
-    next = {
-      ...next,
-      childrenSvg: buildArrowSvg(id, next.line, resolveStrokeStyle(next))
-    };
-  }
-  if (next.toolKind === "text" && next.text !== void 0) {
-    return rebuildItemSvg(next);
-  }
-  if (next.toolKind === "custom" && next.customInnerSvg && next.customIntrinsicSize) {
-    return rebuildItemSvg(next);
-  }
-  return next;
-}
-function cloneVectorSceneItemsWithNewIds(items) {
-  return items.map(cloneVectorSceneItemWithNewId);
-}
-
 // src/scene/scene.ts
 var VectorScene = class {
   items = [];
@@ -7688,10 +8520,8 @@ var VectorViewport = react.forwardRef(
             return;
           }
           if (!e.shiftKey && cur.length > 0) {
-            const selectedArrowOrLine = cur.map((id) => resolved.find((it) => it.id === id)).filter(
-              (it) => it != null && !it.locked && (it.toolKind === "line" || it.toolKind === "arrow")
-            );
-            if (selectedArrowOrLine.some(
+            const selectedUnlockedItems = cur.map((id) => resolved.find((it) => it.id === id)).filter((it) => it != null && !it.locked);
+            if (selectedUnlockedItems.some(
               (it) => pointInSelectedItemBounds(it, worldX, worldY)
             )) {
               const snapshots = {};
@@ -8772,109 +9602,6 @@ var VectorViewport = react.forwardRef(
   }
 );
 VectorViewport.displayName = "VectorViewport";
-var DEFAULT_SHELL_STYLE = {
-  position: "absolute",
-  left: 12,
-  bottom: 140,
-  zIndex: 22
-};
-var layoutStyle = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 4,
-  /* Let clicks pass through the flex gaps; buttons opt in below. */
-  pointerEvents: "none"
-};
-var btnStyle2 = {
-  pointerEvents: "auto",
-  width: 36,
-  height: 36,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: 8,
-  border: "1px solid rgba(0,0,0,0.12)",
-  background: "rgba(255,255,255,0.96)",
-  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
-  cursor: "pointer",
-  fontSize: 18,
-  lineHeight: 1,
-  fontWeight: 600,
-  color: "#18181b",
-  padding: 0,
-  outline: "none",
-  WebkitTapHighlightColor: "transparent"
-};
-var labelStyle3 = {
-  pointerEvents: "none",
-  fontSize: 10,
-  fontWeight: 600,
-  color: "#52525b",
-  textAlign: "center",
-  userSelect: "none",
-  padding: "2px 0"
-};
-var fieldsetReset = {
-  border: "none",
-  margin: 0,
-  padding: 0,
-  minWidth: 0
-};
-function ViewportZoomControls({
-  zoomPercent,
-  onZoomIn,
-  onZoomOut,
-  className = "",
-  position,
-  inset = 12,
-  zIndex = 22,
-  style
-}) {
-  const anchorStyle = position !== void 0 ? getBoardPositionStyle(position, inset, zIndex) : DEFAULT_SHELL_STYLE;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "fieldset",
-    {
-      className,
-      "data-position": position ?? "default",
-      "aria-label": "Zoom controls",
-      style: { ...anchorStyle, ...layoutStyle, ...fieldsetReset, ...style },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            style: btnStyle2,
-            "aria-label": "Zoom in",
-            title: "Zoom in",
-            onPointerDown: (e) => {
-              if (e.pointerType === "mouse") e.preventDefault();
-            },
-            onClick: onZoomIn,
-            children: "+"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            style: btnStyle2,
-            "aria-label": "Zoom out",
-            title: "Zoom out",
-            onPointerDown: (e) => {
-              if (e.pointerType === "mouse") e.preventDefault();
-            },
-            onClick: onZoomOut,
-            children: "\u2212"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: labelStyle3, "aria-hidden": true, children: [
-          zoomPercent,
-          "%"
-        ] })
-      ]
-    }
-  );
-}
 
 exports.CanvuChromeContext = CanvuChromeContext;
 exports.CanvuPluginContext = CanvuPluginContext;
@@ -8891,6 +9618,7 @@ exports.IconLine = IconLine;
 exports.IconRect = IconRect;
 exports.IconSelect = IconSelect;
 exports.IconText = IconText;
+exports.ImagesMenu = ImagesMenu;
 exports.NavMenu = NavMenu;
 exports.ShapeContextMenu = ShapeContextMenu;
 exports.VectorCanvas = VectorCanvas;
@@ -8903,7 +9631,6 @@ exports.VectorCanvasViewportSurface = VectorCanvasViewportSurface;
 exports.VectorSelectionInspector = VectorSelectionInspector;
 exports.VectorToolbar = VectorToolbar;
 exports.VectorViewport = VectorViewport;
-exports.ViewportZoomControls = ViewportZoomControls;
 exports.createCanvuPlugin = createCanvuPlugin;
 exports.createIndexedDbPersistenceAdapter = createIndexedDbPersistenceAdapter;
 exports.createLocalStoragePersistenceAdapter = createLocalStoragePersistenceAdapter;