canvu-react 0.4.6 → 0.4.7

package/dist/native.cjs

@@ -899,6 +899,25 @@ 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) {
@@ -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,6 +3509,7 @@ 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;
@@ -3147,6 +3517,7 @@ 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