canvu-react 0.4.5 → 0.4.7

package/dist/native.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
+var getStroke = require('perfect-freehand');
 var reactNativeSkia = require('@shopify/react-native-skia');
 var react = require('react');
-var getStroke = require('perfect-freehand');
 var jsxRuntime = require('react/jsx-runtime');
 var reactNative = require('react-native');
 
@@ -10,7 +10,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var getStroke__default = /*#__PURE__*/_interopDefault(getStroke);
 
-// src/native/NativeInteractionOverlay.tsx
+// src/scene/shape-builders.ts
 
 // src/math/rect.ts
 function rectsIntersect(a, b) {
@@ -27,148 +27,6 @@ function normalizeRect(r) {
   };
 }
 
-// src/math/item-transform.ts
-function getItemRotationRad(item) {
-  return item.rotation ?? 0;
-}
-function itemLocalToWorld(lx, ly, itemX, itemY, w, h, rotationRad) {
-  const c = { x: w / 2, y: h / 2 };
-  const dlx = lx - c.x;
-  const dly = ly - c.y;
-  const cos = Math.cos(rotationRad);
-  const sin = Math.sin(rotationRad);
-  return {
-    x: itemX + c.x + cos * dlx - sin * dly,
-    y: itemY + c.y + sin * dlx + cos * dly
-  };
-}
-function worldToItemLocal(wx, wy, itemX, itemY, w, h, rotationRad) {
-  const c = { x: w / 2, y: h / 2 };
-  const vx = wx - itemX;
-  const vy = wy - itemY;
-  const dx = vx - c.x;
-  const dy = vy - c.y;
-  const cos = Math.cos(-rotationRad);
-  const sin = Math.sin(-rotationRad);
-  const lx = cos * dx - sin * dy;
-  const ly = sin * dx + cos * dy;
-  return { x: c.x + lx, y: c.y + ly };
-}
-function boundsAabbForRotatedItem(item) {
-  const rot = getItemRotationRad(item);
-  if (Math.abs(rot) < 1e-12 && item.bounds.width >= 0 && item.bounds.height >= 0) {
-    return item.bounds;
-  }
-  const r = normalizeRect(item.bounds);
-  if (Math.abs(rot) < 1e-12) {
-    return r;
-  }
-  const corners = [
-    [0, 0],
-    [r.width, 0],
-    [r.width, r.height],
-    [0, r.height]
-  ];
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const [lx, ly] of corners) {
-    const p = itemLocalToWorld(lx, ly, item.x, item.y, r.width, r.height, rot);
-    minX = Math.min(minX, p.x);
-    minY = Math.min(minY, p.y);
-    maxX = Math.max(maxX, p.x);
-    maxY = Math.max(maxY, p.y);
-  }
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-
-// src/interaction/resize-handles.ts
-function getHandleWorldPosition(bounds, id) {
-  const r = normalizeRect(bounds);
-  const cx = r.x + r.width / 2;
-  const cy = r.y + r.height / 2;
-  switch (id) {
-    case "nw":
-      return { x: r.x, y: r.y };
-    case "n":
-      return { x: cx, y: r.y };
-    case "ne":
-      return { x: r.x + r.width, y: r.y };
-    case "e":
-      return { x: r.x + r.width, y: cy };
-    case "se":
-      return { x: r.x + r.width, y: r.y + r.height };
-    case "s":
-      return { x: cx, y: r.y + r.height };
-    case "sw":
-      return { x: r.x, y: r.y + r.height };
-    case "w":
-      return { x: r.x, y: cy };
-  }
-}
-function getHandleWorldPositionRotated(bounds, handle, rotationRad) {
-  const r = normalizeRect(bounds);
-  const p = getHandleWorldPosition(
-    { x: 0, y: 0, width: r.width, height: r.height },
-    handle
-  );
-  return itemLocalToWorld(p.x, p.y, r.x, r.y, r.width, r.height, rotationRad);
-}
-function getRotationHandleWorldPosition(bounds, rotationRad, handleOffsetWorld) {
-  const r = normalizeRect(bounds);
-  return itemLocalToWorld(
-    r.width / 2,
-    -handleOffsetWorld,
-    r.x,
-    r.y,
-    r.width,
-    r.height,
-    rotationRad
-  );
-}
-function rectFromCorners(a, b) {
-  const minX = Math.min(a.x, b.x);
-  const maxX = Math.max(a.x, b.x);
-  const minY = Math.min(a.y, b.y);
-  const maxY = Math.max(a.y, b.y);
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-
-// src/scene/freehand-path.ts
-function smoothFreehandPointsToPathD(points) {
-  const n = points.length;
-  if (n === 0) return "";
-  if (n === 1) {
-    const p = points[0];
-    if (!p) return "";
-    return `M ${p.x} ${p.y}`;
-  }
-  if (n === 2) {
-    const a = points[0];
-    const b = points[1];
-    if (!a || !b) return "";
-    return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
-  }
-  const p0 = points[0];
-  if (!p0) return "";
-  let d = `M ${p0.x} ${p0.y}`;
-  let i = 1;
-  for (; i < n - 2; i++) {
-    const pi = points[i];
-    const pi1 = points[i + 1];
-    if (!pi || !pi1) continue;
-    const xc = (pi.x + pi1.x) / 2;
-    const yc = (pi.y + pi1.y) / 2;
-    d += ` Q ${pi.x} ${pi.y} ${xc} ${yc}`;
-  }
-  const pLast = points[i];
-  const pEnd = points[i + 1];
-  if (!pLast || !pEnd) return d;
-  d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
-  return d;
-}
-
 // src/scene/custom-shape.ts
 function buildCustomShapeChildrenSvg(inner, intrinsic, bounds) {
   const b = normalizeRect(bounds);
@@ -1041,6 +899,167 @@ function buildRasterImageChildrenSvg(dataUrl, intrinsic, bounds) {
   const ty = (r.height - ih * s) / 2;
   return `<g transform="translate(${tx}, ${ty}) scale(${s})"><image href="${href}" x="0" y="0" width="${iw}" height="${ih}" /></g>`;
 }
+function createImageItem(id, bounds, imageRasterHref, imageIntrinsicSize) {
+  const r = normalizeRect(bounds);
+  const iw = Math.max(1e-6, imageIntrinsicSize.width);
+  const ih = Math.max(1e-6, imageIntrinsicSize.height);
+  return {
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "image",
+    imageRasterHref,
+    imageIntrinsicSize: { width: iw, height: ih },
+    childrenSvg: buildRasterImageChildrenSvg(
+      imageRasterHref,
+      { width: iw, height: ih },
+      r
+    )
+  };
+}
+
+// src/math/item-transform.ts
+function getItemRotationRad(item) {
+  return item.rotation ?? 0;
+}
+function itemLocalToWorld(lx, ly, itemX, itemY, w, h, rotationRad) {
+  const c = { x: w / 2, y: h / 2 };
+  const dlx = lx - c.x;
+  const dly = ly - c.y;
+  const cos = Math.cos(rotationRad);
+  const sin = Math.sin(rotationRad);
+  return {
+    x: itemX + c.x + cos * dlx - sin * dly,
+    y: itemY + c.y + sin * dlx + cos * dly
+  };
+}
+function worldToItemLocal(wx, wy, itemX, itemY, w, h, rotationRad) {
+  const c = { x: w / 2, y: h / 2 };
+  const vx = wx - itemX;
+  const vy = wy - itemY;
+  const dx = vx - c.x;
+  const dy = vy - c.y;
+  const cos = Math.cos(-rotationRad);
+  const sin = Math.sin(-rotationRad);
+  const lx = cos * dx - sin * dy;
+  const ly = sin * dx + cos * dy;
+  return { x: c.x + lx, y: c.y + ly };
+}
+function boundsAabbForRotatedItem(item) {
+  const rot = getItemRotationRad(item);
+  if (Math.abs(rot) < 1e-12 && item.bounds.width >= 0 && item.bounds.height >= 0) {
+    return item.bounds;
+  }
+  const r = normalizeRect(item.bounds);
+  if (Math.abs(rot) < 1e-12) {
+    return r;
+  }
+  const corners = [
+    [0, 0],
+    [r.width, 0],
+    [r.width, r.height],
+    [0, r.height]
+  ];
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [lx, ly] of corners) {
+    const p = itemLocalToWorld(lx, ly, item.x, item.y, r.width, r.height, rot);
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x);
+    maxY = Math.max(maxY, p.y);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+// src/interaction/resize-handles.ts
+function getHandleWorldPosition(bounds, id) {
+  const r = normalizeRect(bounds);
+  const cx = r.x + r.width / 2;
+  const cy = r.y + r.height / 2;
+  switch (id) {
+    case "nw":
+      return { x: r.x, y: r.y };
+    case "n":
+      return { x: cx, y: r.y };
+    case "ne":
+      return { x: r.x + r.width, y: r.y };
+    case "e":
+      return { x: r.x + r.width, y: cy };
+    case "se":
+      return { x: r.x + r.width, y: r.y + r.height };
+    case "s":
+      return { x: cx, y: r.y + r.height };
+    case "sw":
+      return { x: r.x, y: r.y + r.height };
+    case "w":
+      return { x: r.x, y: cy };
+  }
+}
+function getHandleWorldPositionRotated(bounds, handle, rotationRad) {
+  const r = normalizeRect(bounds);
+  const p = getHandleWorldPosition(
+    { x: 0, y: 0, width: r.width, height: r.height },
+    handle
+  );
+  return itemLocalToWorld(p.x, p.y, r.x, r.y, r.width, r.height, rotationRad);
+}
+function getRotationHandleWorldPosition(bounds, rotationRad, handleOffsetWorld) {
+  const r = normalizeRect(bounds);
+  return itemLocalToWorld(
+    r.width / 2,
+    -handleOffsetWorld,
+    r.x,
+    r.y,
+    r.width,
+    r.height,
+    rotationRad
+  );
+}
+function rectFromCorners(a, b) {
+  const minX = Math.min(a.x, b.x);
+  const maxX = Math.max(a.x, b.x);
+  const minY = Math.min(a.y, b.y);
+  const maxY = Math.max(a.y, b.y);
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+// src/scene/freehand-path.ts
+function smoothFreehandPointsToPathD(points) {
+  const n = points.length;
+  if (n === 0) return "";
+  if (n === 1) {
+    const p = points[0];
+    if (!p) return "";
+    return `M ${p.x} ${p.y}`;
+  }
+  if (n === 2) {
+    const a = points[0];
+    const b = points[1];
+    if (!a || !b) return "";
+    return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
+  }
+  const p0 = points[0];
+  if (!p0) return "";
+  let d = `M ${p0.x} ${p0.y}`;
+  let i = 1;
+  for (; i < n - 2; i++) {
+    const pi = points[i];
+    const pi1 = points[i + 1];
+    if (!pi || !pi1) continue;
+    const xc = (pi.x + pi1.x) / 2;
+    const yc = (pi.y + pi1.y) / 2;
+    d += ` Q ${pi.x} ${pi.y} ${xc} ${yc}`;
+  }
+  const pLast = points[i];
+  const pEnd = points[i + 1];
+  if (!pLast || !pEnd) return d;
+  d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
+  return d;
+}
 
 // src/native/skia-transform.ts
 function parseNum(s) {
@@ -1287,6 +1306,9 @@ function SvgNodeItem({ node }) {
         }
       );
     }
+    case "image": {
+      return /* @__PURE__ */ jsxRuntime.jsx(SvgImageNodeItem, { node });
+    }
     case "g": {
       const transform = node.transform ? parseSvgTransform(node.transform) : void 0;
       return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform, children: node.children.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(SvgNodeItem, { node: child }, i)) });
@@ -1298,6 +1320,23 @@ function SvgNodeItem({ node }) {
       return null;
   }
 }
+function SvgImageNodeItem({
+  node
+}) {
+  const image = reactNativeSkia.useImage(node.href);
+  if (!image) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNativeSkia.Image,
+    {
+      image,
+      x: toNum(node.x),
+      y: toNum(node.y),
+      width: toNum(node.width),
+      height: toNum(node.height),
+      fit: "contain"
+    }
+  );
+}
 function polygonPointsToPath(points) {
   const nums = points.split(/[\s,]+/).filter(Boolean).map(Number);
   if (nums.length < 4) return "";
@@ -2200,146 +2239,353 @@ function NativeSceneRenderer({
   if (width <= 0 || height <= 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Canvas, { style: { width, height }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: cameraTransform, children: visible.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MemoShape, { item }, item.id)) }) });
 }
+var DEFAULT_NATIVE_OVERFLOW_TOOL_IDS = [
+  "rect",
+  "ellipse",
+  "architectural-cloud",
+  "line",
+  "marker",
+  "laser",
+  "image"
+];
 var DEFAULT_NATIVE_VECTOR_TOOLS = [
-  { id: "hand", label: "Hand", shortLabel: "H" },
-  { id: "select", label: "Select", shortLabel: "V" },
-  { id: "draw", label: "Draw", shortLabel: "D" },
-  { id: "marker", label: "Marker", shortLabel: "M" },
-  { id: "eraser", label: "Eraser", shortLabel: "E" },
-  { id: "text", label: "Text", shortLabel: "T" },
-  { id: "note", label: "Note", shortLabel: "N" },
-  { id: "rect", label: "Rectangle", shortLabel: "R" },
-  { id: "ellipse", label: "Ellipse", shortLabel: "O" },
-  { id: "architectural-cloud", label: "Cloud", shortLabel: "C" },
-  { id: "line", label: "Line", shortLabel: "L" },
-  { id: "arrow", label: "Arrow", shortLabel: "A" }
+  { id: "hand", label: "Hand", shortcutHint: "H", shortLabel: "H" },
+  { id: "select", label: "Select", shortcutHint: "V", shortLabel: "V" },
+  { id: "rect", label: "Rectangle", shortcutHint: "R", shortLabel: "R" },
+  { id: "ellipse", label: "Ellipse", shortcutHint: "O", shortLabel: "O" },
+  {
+    id: "architectural-cloud",
+    label: "Nuvem arquitetural",
+    tooltipLabel: "Architectural cloud",
+    shortcutHint: "C",
+    shortLabel: "C"
+  },
+  { id: "line", label: "Line", shortcutHint: "L", shortLabel: "L" },
+  { id: "arrow", label: "Arrow", shortcutHint: "A", shortLabel: "A" },
+  {
+    id: "draw",
+    label: "Desenhar",
+    tooltipLabel: "Draw",
+    shortcutHint: "D",
+    shortLabel: "D"
+  },
+  {
+    id: "marker",
+    label: "Realce",
+    tooltipLabel: "Highlighter",
+    shortcutHint: "M",
+    shortLabel: "M"
+  },
+  { id: "laser", label: "Laser", shortcutHint: "K", shortLabel: "K" },
+  {
+    id: "eraser",
+    label: "Borracha",
+    tooltipLabel: "Eraser",
+    shortcutHint: "E",
+    shortLabel: "E"
+  },
+  { id: "text", label: "Text", shortcutHint: "T", shortLabel: "T" },
+  { id: "image", label: "File", shortcutHint: "I", shortLabel: "I" }
 ];
+function splitToolbarTools(tools, overflowToolIds) {
+  const overflowIds = new Set(overflowToolIds);
+  if (overflowIds.size === 0) return { primary: tools, overflow: [] };
+  return {
+    primary: tools.filter((tool) => !overflowIds.has(tool.id)),
+    overflow: tools.filter((tool) => overflowIds.has(tool.id))
+  };
+}
+function getPromotedOverflowTool(input) {
+  const selectedOverflowTool = input.overflowTools.find((tool) => tool.id === input.selectedId) ?? null;
+  const fallbackTool = input.overflowTools.find((tool) => tool.id === input.initialPromotedId) ?? input.overflowTools[0] ?? null;
+  const promotedTool = selectedOverflowTool ?? fallbackTool;
+  if (!promotedTool) {
+    return { promotedTool: null, remainingOverflowTools: input.overflowTools };
+  }
+  return {
+    promotedTool,
+    remainingOverflowTools: input.overflowTools.filter(
+      (tool) => tool.id !== promotedTool.id
+    )
+  };
+}
+function tooltipTextForTool(tool) {
+  const name = tool.tooltipLabel ?? tool.label;
+  return tool.shortcutHint ? `${name} - ${tool.shortcutHint}` : name;
+}
 function NativeVectorToolbar({
   value,
   onChange,
   tools = DEFAULT_NATIVE_VECTOR_TOOLS,
+  overflowToolIds = DEFAULT_NATIVE_OVERFLOW_TOOL_IDS,
+  overflowMenuAccessibilityLabel = "More tools",
   disabled = false,
   disabledToolIds = [],
+  showToolLockToggle = true,
+  toolLocked = false,
+  onToolLockedChange,
+  density = "compact",
   accessibilityLabel = "Canvas tools",
   style,
   contentContainerStyle,
+  overflowPanelStyle,
   toolButtonStyle,
   activeToolButtonStyle,
   toolLabelStyle,
   activeToolLabelStyle,
   renderToolIcon,
+  renderToolLockIcon,
+  renderOverflowIcon,
+  renderOverflowChevronIcon,
   renderToolButton
 }) {
+  const [overflowOpen, setOverflowOpen] = react.useState(false);
   const disabledIds = react.useMemo(() => new Set(disabledToolIds), [disabledToolIds]);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityLabel, style: [styles.shell, style], children: /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.ScrollView,
+  const { primary: primaryTools, overflow: overflowTools } = react.useMemo(
+    () => splitToolbarTools(tools, overflowToolIds),
+    [tools, overflowToolIds]
+  );
+  const { promotedTool, remainingOverflowTools } = react.useMemo(
+    () => getPromotedOverflowTool({
+      overflowTools,
+      selectedId: value,
+      initialPromotedId: overflowToolIds[0] ?? null
+    }),
+    [overflowTools, overflowToolIds, value]
+  );
+  const activeOverflowTool = overflowTools.find((tool) => tool.id === value) ?? null;
+  const toolbarTools = promotedTool !== null ? [...primaryTools, promotedTool] : primaryTools;
+  const showOverflowMenu = remainingOverflowTools.length > 0;
+  const toolLockDisabled = disabled || !onToolLockedChange;
+  const toggleToolLock = () => onToolLockedChange?.(!toolLocked);
+  const toggleOverflow = () => setOverflowOpen((open) => !open);
+  const overflowRenderInput = {
+    open: overflowOpen,
+    activeTool: activeOverflowTool,
+    disabled,
+    foregroundColor: "#18181b",
+    onToggle: toggleOverflow
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
     {
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      contentContainerStyle: [styles.content, contentContainerStyle],
-      children: tools.map((tool) => {
-        const selected = tool.id === value;
-        const toolDisabled = disabled || tool.disabled || disabledIds.has(tool.id);
-        const foregroundColor = selected ? "#fafaf9" : "#18181b";
-        const onSelect = () => {
-          if (!toolDisabled) {
-            onChange(tool.id);
-          }
-        };
-        const input = {
-          tool,
-          selected,
-          disabled: toolDisabled,
-          foregroundColor,
-          onSelect
-        };
-        if (renderToolButton) {
-          return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: renderToolButton(input) }, tool.id);
-        }
-        const icon = renderToolIcon?.(input) ?? /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.Text,
+      accessibilityLabel,
+      style: [styles.shell, style],
+      pointerEvents: "box-none",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.ScrollView,
           {
-            style: [
-              styles.shortLabel,
-              { color: foregroundColor },
-              toolLabelStyle,
-              selected ? activeToolLabelStyle : void 0
-            ],
-            children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase()
-          }
-        );
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          reactNative.Pressable,
-          {
-            accessibilityLabel: tool.accessibilityLabel ?? tool.label,
-            accessibilityRole: "button",
-            accessibilityState: { selected, disabled: toolDisabled },
-            disabled: toolDisabled,
-            onPress: onSelect,
-            style: ({ pressed }) => [
-              styles.toolButton,
-              toolButtonStyle,
-              selected ? styles.activeToolButton : void 0,
-              selected ? activeToolButtonStyle : void 0,
-              pressed && !toolDisabled ? styles.pressedToolButton : void 0,
-              toolDisabled ? styles.disabledToolButton : void 0
+            horizontal: true,
+            showsHorizontalScrollIndicator: false,
+            contentContainerStyle: [
+              styles.content,
+              density === "comfortable" ? styles.comfortableContent : void 0,
+              contentContainerStyle
             ],
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.iconSlot, children: icon }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                reactNative.Text,
+              showToolLockToggle ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Pressable,
+                  {
+                    accessibilityLabel: toolLocked ? "Unlock tool" : "Lock tool",
+                    accessibilityRole: "button",
+                    accessibilityState: {
+                      checked: toolLocked,
+                      disabled: toolLockDisabled
+                    },
+                    disabled: toolLockDisabled,
+                    onPress: toggleToolLock,
+                    style: ({ pressed }) => [
+                      styles.toolButton,
+                      density === "comfortable" ? styles.comfortableToolButton : void 0,
+                      toolLocked ? styles.activeToolButton : void 0,
+                      pressed && !toolLockDisabled ? styles.pressedToolButton : void 0,
+                      toolLockDisabled ? styles.disabledToolButton : void 0
+                    ],
+                    children: renderToolLockIcon?.({
+                      locked: toolLocked,
+                      disabled: toolLockDisabled,
+                      foregroundColor: "#18181b",
+                      onToggle: toggleToolLock
+                    }) ?? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.lockGlyph, children: toolLocked ? "L" : "U" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.toolLockDivider })
+              ] }) : null,
+              toolbarTools.map(
+                (tool) => renderNativeToolButton({
+                  tool,
+                  value,
+                  onChange,
+                  disabled,
+                  disabledIds,
+                  density,
+                  toolButtonStyle,
+                  activeToolButtonStyle,
+                  toolLabelStyle,
+                  activeToolLabelStyle,
+                  renderToolIcon,
+                  renderToolButton
+                })
+              ),
+              showOverflowMenu ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.overflowSpacer }) : null,
+              showOverflowMenu ? /* @__PURE__ */ jsxRuntime.jsxs(
+                reactNative.Pressable,
                 {
-                  numberOfLines: 1,
-                  style: [
-                    styles.toolLabel,
-                    { color: foregroundColor },
-                    toolLabelStyle,
-                    selected ? activeToolLabelStyle : void 0
+                  accessibilityLabel: activeOverflowTool ? `${overflowMenuAccessibilityLabel}: ${activeOverflowTool.accessibilityLabel ?? activeOverflowTool.label}` : overflowMenuAccessibilityLabel,
+                  accessibilityRole: "button",
+                  accessibilityState: {
+                    expanded: overflowOpen,
+                    selected: overflowOpen || activeOverflowTool !== null,
+                    disabled
+                  },
+                  disabled,
+                  onPress: toggleOverflow,
+                  style: ({ pressed }) => [
+                    styles.overflowTrigger,
+                    overflowOpen || activeOverflowTool ? styles.activeToolButton : void 0,
+                    pressed && !disabled ? styles.pressedToolButton : void 0,
+                    disabled ? styles.disabledToolButton : void 0
                   ],
-                  children: tool.label
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.iconSlot, children: activeOverflowTool ? renderToolIcon?.({
+                      tool: activeOverflowTool,
+                      selected: true,
+                      disabled,
+                      foregroundColor: "#18181b",
+                      onSelect: () => onChange(activeOverflowTool.id)
+                    }) ?? renderNativeToolFallback(activeOverflowTool, "#18181b") : renderOverflowIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.shapesGlyph, children: "S" }) }),
+                    renderOverflowChevronIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.chevronGlyph, children: overflowOpen ? "^" : "v" })
+                  ]
                 }
-              )
+              ) : null
             ]
-          },
-          tool.id
-        );
-      })
+          }
+        ),
+        overflowOpen && showOverflowMenu ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.overflowPanel, overflowPanelStyle], children: remainingOverflowTools.map(
+          (tool) => renderNativeToolButton({
+            tool,
+            value,
+            onChange: (toolId) => {
+              setOverflowOpen(false);
+              onChange(toolId);
+            },
+            disabled,
+            disabledIds,
+            density: "compact",
+            toolButtonStyle: styles.overflowToolButton,
+            activeToolButtonStyle,
+            toolLabelStyle,
+            activeToolLabelStyle,
+            renderToolIcon,
+            renderToolButton
+          })
+        ) }) : null
+      ]
     }
-  ) });
+  );
+}
+function renderNativeToolButton(input) {
+  const selected = input.tool.id === input.value;
+  const toolDisabled = input.disabled || input.tool.disabled || input.disabledIds.has(input.tool.id);
+  const foregroundColor = "#18181b";
+  const onSelect = () => {
+    if (!toolDisabled) {
+      input.onChange(input.tool.id);
+    }
+  };
+  const renderInput = {
+    tool: input.tool,
+    selected,
+    disabled: toolDisabled,
+    foregroundColor,
+    onSelect
+  };
+  if (input.renderToolButton) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: input.renderToolButton(renderInput) }, input.tool.id);
+  }
+  const icon = input.renderToolIcon?.(renderInput) ?? renderNativeToolFallback(input.tool, foregroundColor, input.toolLabelStyle);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      accessibilityLabel: input.tool.accessibilityLabel ?? tooltipTextForTool(input.tool),
+      accessibilityRole: "button",
+      accessibilityState: { selected, disabled: toolDisabled },
+      disabled: toolDisabled,
+      onPress: onSelect,
+      style: ({ pressed }) => [
+        styles.toolButton,
+        input.density === "comfortable" ? styles.comfortableToolButton : void 0,
+        input.toolButtonStyle,
+        selected ? styles.activeToolButton : void 0,
+        selected ? input.activeToolButtonStyle : void 0,
+        pressed && !toolDisabled ? styles.pressedToolButton : void 0,
+        toolDisabled ? styles.disabledToolButton : void 0
+      ],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.iconSlot, children: icon }),
+        input.density === "comfortable" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            numberOfLines: 1,
+            style: [
+              styles.toolLabel,
+              { color: foregroundColor },
+              input.toolLabelStyle,
+              selected ? input.activeToolLabelStyle : void 0
+            ],
+            children: input.tool.label
+          }
+        ) : null
+      ]
+    },
+    input.tool.id
+  );
+}
+function renderNativeToolFallback(tool, foregroundColor, toolLabelStyle) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
 }
 var styles = reactNative.StyleSheet.create({
   shell: {
-    borderRadius: 10,
+    borderRadius: 8,
     borderWidth: reactNative.StyleSheet.hairlineWidth,
-    borderColor: "rgba(24, 24, 27, 0.14)",
-    backgroundColor: "rgba(255, 255, 255, 0.96)",
+    borderColor: "rgba(0, 0, 0, 0.12)",
+    backgroundColor: "rgba(255, 255, 255, 0.95)",
     shadowColor: "#18181b",
-    shadowOpacity: 0.12,
-    shadowRadius: 16,
-    shadowOffset: { width: 0, height: 8 },
-    elevation: 6
+    shadowOpacity: 0.08,
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 1 },
+    elevation: 3
   },
   content: {
     alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 6,
+    gap: 4,
+    paddingHorizontal: 8,
     paddingVertical: 6
   },
+  comfortableContent: {
+    gap: 6
+  },
   toolButton: {
-    minWidth: 58,
-    height: 52,
+    minWidth: 40,
+    height: 40,
     alignItems: "center",
     justifyContent: "center",
-    gap: 3,
-    borderRadius: 8,
+    gap: 2,
+    borderRadius: 6,
     paddingHorizontal: 8,
     borderWidth: reactNative.StyleSheet.hairlineWidth,
     borderColor: "transparent",
     backgroundColor: "transparent"
   },
+  comfortableToolButton: {
+    minWidth: 56,
+    height: 48
+  },
   activeToolButton: {
-    borderColor: "rgba(24, 24, 27, 0.24)",
-    backgroundColor: "#18181b"
+    borderColor: "rgba(24, 24, 27, 0.28)",
+    backgroundColor: "rgba(24, 24, 27, 0.1)"
   },
   pressedToolButton: {
     backgroundColor: "rgba(24, 24, 27, 0.08)"
@@ -2363,6 +2609,76 @@ var styles = reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     lineHeight: 12
+  },
+  toolLockDivider: {
+    width: reactNative.StyleSheet.hairlineWidth,
+    alignSelf: "stretch",
+    backgroundColor: "rgba(24, 24, 27, 0.14)",
+    marginHorizontal: 6,
+    marginVertical: 4
+  },
+  lockGlyph: {
+    color: "#18181b",
+    fontSize: 13,
+    fontWeight: "700",
+    lineHeight: 16
+  },
+  overflowSpacer: {
+    minWidth: 8,
+    flexGrow: 1
+  },
+  overflowTrigger: {
+    minWidth: 48,
+    height: 40,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "transparent",
+    backgroundColor: "transparent"
+  },
+  overflowPanel: {
+    position: "absolute",
+    right: 8,
+    bottom: 52,
+    width: 148,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    padding: 10,
+    borderRadius: 10,
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(0, 0, 0, 0.1)",
+    backgroundColor: "rgba(255, 255, 255, 0.98)",
+    shadowColor: "#18181b",
+    shadowOpacity: 0.12,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: -4 },
+    elevation: 8
+  },
+  overflowToolButton: {
+    width: 40,
+    minWidth: 40,
+    height: 40,
+    paddingHorizontal: 0,
+    borderRadius: 8,
+    backgroundColor: "rgba(24, 24, 27, 0.05)"
+  },
+  shapesGlyph: {
+    color: "#18181b",
+    fontSize: 17,
+    fontWeight: "700",
+    lineHeight: 20
+  },
+  chevronGlyph: {
+    color: "#18181b",
+    fontSize: 13,
+    fontWeight: "700",
+    lineHeight: 16,
+    opacity: 0.75
   }
 });
 
@@ -2614,9 +2930,11 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   items,
   selectedIds = [],
   toolId = "hand",
+  toolLocked = false,
   interactive = false,
   onSelectionChange,
   onItemsChange,
+  onToolChangeRequest,
   onCameraChange,
   toolbar
 }, ref) {
@@ -2624,6 +2942,10 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   const cameraRef = react.useRef(null);
   const toolIdRef = react.useRef(toolId);
   toolIdRef.current = toolId;
+  const toolLockedRef = react.useRef(toolLocked);
+  toolLockedRef.current = toolLocked;
+  const onToolChangeRequestRef = react.useRef(onToolChangeRequest);
+  onToolChangeRequestRef.current = onToolChangeRequest;
   const onCameraChangeRef = react.useRef(onCameraChange);
   onCameraChangeRef.current = onCameraChange;
   const onItemsChangeRef = react.useRef(onItemsChange);
@@ -2639,8 +2961,23 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     null
   );
   const [eraserTrail, setEraserTrail] = react.useState([]);
+  const [laserTrail, setLaserTrail] = react.useState([]);
+  const laserClearTimerRef = react.useRef(null);
+  react.useEffect(
+    () => () => {
+      if (laserClearTimerRef.current) {
+        clearTimeout(laserClearTimerRef.current);
+      }
+    },
+    []
+  );
   const [eraserPreviewIds, setEraserPreviewIds] = react.useState([]);
   const eraserPreviewIdSetRef = react.useRef(/* @__PURE__ */ new Set());
+  const requestSelectToolAfterUse = react.useCallback(() => {
+    if (!toolLockedRef.current) {
+      onToolChangeRequestRef.current?.("select");
+    }
+  }, []);
   if (!cameraRef.current) {
     cameraRef.current = new Camera2D({ minZoom: 0.05, maxZoom: 32 });
   }
@@ -2735,12 +3072,19 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           }
           return;
         }
-        if (tool === "draw" || tool === "marker") {
+        if (tool === "draw" || tool === "marker" || tool === "laser") {
           dragStateRef.current = {
             kind: "draw",
             tool,
             points: [{ x: worldX, y: worldY }]
           };
+          if (tool === "laser") {
+            if (laserClearTimerRef.current) {
+              clearTimeout(laserClearTimerRef.current);
+              laserClearTimerRef.current = null;
+            }
+            setLaserTrail([{ x: worldX, y: worldY }]);
+          }
           return;
         }
         if (tool === "eraser") {
@@ -2841,11 +3185,15 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           if (Math.hypot(dx, dy) > 0.5 / cam.zoom) {
             pts.push({ x: worldX, y: worldY });
           }
-          setPlacementPreview({
-            kind: "stroke",
-            tool: st.tool,
-            points: [...pts]
-          });
+          if (st.tool === "laser") {
+            setLaserTrail([...pts]);
+          } else {
+            setPlacementPreview({
+              kind: "stroke",
+              tool: st.tool,
+              points: [...pts]
+            });
+          }
           return;
         }
         if (st.kind === "move") {
@@ -2913,6 +3261,17 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         if (st.kind === "draw") {
           dragStateRef.current = { kind: "idle" };
           setPlacementPreview(null);
+          if (st.tool === "laser") {
+            if (laserClearTimerRef.current) {
+              clearTimeout(laserClearTimerRef.current);
+            }
+            laserClearTimerRef.current = setTimeout(() => {
+              setLaserTrail([]);
+              laserClearTimerRef.current = null;
+            }, 650);
+            requestSelectToolAfterUse();
+            return;
+          }
           if (st.points.length < 1) return;
           const change = onItemsChangeRef.current;
           if (!change) return;
@@ -2921,6 +3280,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           if (item) {
             change([...itemsRef.current, item]);
           }
+          requestSelectToolAfterUse();
           return;
         }
         if (st.kind === "move") {
@@ -2958,6 +3318,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           setEraserPreviewIds([]);
           setEraserTrail([]);
           dragStateRef.current = { kind: "idle" };
+          requestSelectToolAfterUse();
           return;
         }
         if (st.kind === "place") {
@@ -2995,21 +3356,25 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           if (st.tool === "rect") {
             change([...itemsRef.current, createRectangleItem(id, raw)]);
             onSelectionChangeRef.current?.([id]);
+            requestSelectToolAfterUse();
             return;
           }
           if (st.tool === "ellipse") {
             change([...itemsRef.current, createEllipseItem(id, raw)]);
             onSelectionChangeRef.current?.([id]);
+            requestSelectToolAfterUse();
             return;
           }
           if (st.tool === "architectural-cloud") {
             change([...itemsRef.current, createArchitecturalCloudItem(id, raw)]);
             onSelectionChangeRef.current?.([id]);
+            requestSelectToolAfterUse();
             return;
           }
           const line = lineEndpointsToLocal(br, lineStart, lineEnd);
           change([...itemsRef.current, createLineItem(id, br, line, st.tool)]);
           onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
           return;
         }
         if (st.kind === "tap") {
@@ -3035,6 +3400,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
             );
             change([...itemsRef.current, item]);
             onSelectionChangeRef.current?.([id]);
+            requestSelectToolAfterUse();
           }
           if (st.tool === "note") {
             const id = createShapeId();
@@ -3053,6 +3419,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
             };
             change([...itemsRef.current, note]);
             onSelectionChangeRef.current?.([id]);
+            requestSelectToolAfterUse();
           }
           return;
         }
@@ -3063,9 +3430,10 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         lastPanPoint.current = null;
         dragStateRef.current = { kind: "idle" };
         setPlacementPreview(null);
+        setLaserTrail([]);
       }
     }),
-    [screenToWorld, requestRender, interactive]
+    [screenToWorld, requestRender, requestSelectToolAfterUse, interactive]
   );
   react.useImperativeHandle(
     ref,
@@ -3113,6 +3481,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
             selectedItems,
             showResizeHandles,
             placementPreview,
+            laserTrail,
             eraserTrail,
             eraserPreviewItems: items.filter(
               (it) => eraserPreviewIds.includes(it.id)
@@ -3140,12 +3509,16 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   );
 });
 
+exports.DEFAULT_NATIVE_OVERFLOW_TOOL_IDS = DEFAULT_NATIVE_OVERFLOW_TOOL_IDS;
 exports.DEFAULT_NATIVE_VECTOR_TOOLS = DEFAULT_NATIVE_VECTOR_TOOLS;
 exports.NativeInteractionOverlay = NativeInteractionOverlay;
 exports.NativeSceneRenderer = NativeSceneRenderer;
 exports.NativeShapeRenderer = NativeShapeRenderer;
 exports.NativeVectorToolbar = NativeVectorToolbar;
 exports.NativeVectorViewport = NativeVectorViewport;
+exports.createFreehandStrokeItem = createFreehandStrokeItem;
+exports.createImageItem = createImageItem;
+exports.createShapeId = createShapeId;
 exports.parseSvgFragment = parseSvgFragment;
 //# sourceMappingURL=native.cjs.map
 //# sourceMappingURL=native.cjs.map