canvu-react 0.4.4 → 0.4.6

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,141 +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
-  );
-}
-
-// 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);
@@ -786,6 +651,15 @@ function createShapeId() {
   const uid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : String(Date.now());
   return `user-shape-${uid}`;
 }
+function lineEndpointsToLocal(bounds, worldEndA, worldEndB) {
+  const b = normalizeRect(bounds);
+  return {
+    x1: worldEndA.x - b.x,
+    y1: worldEndA.y - b.y,
+    x2: worldEndB.x - b.x,
+    y2: worldEndB.y - b.y
+  };
+}
 function rebuildItemSvg(item) {
   const style = resolveStrokeStyle(item);
   const k = item.toolKind;
@@ -889,6 +763,85 @@ function rebuildItemSvg(item) {
   }
   return item;
 }
+function createRectangleItem(id, bounds, style) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "rect",
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
+function createEllipseItem(id, bounds, style) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "ellipse",
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
+function createArchitecturalCloudItem(id, bounds, style) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "architectural-cloud",
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    childrenSvg: ""
+  });
+}
+function createLineItem(id, bounds, line, toolKind, style, arrowBind) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind,
+    line: { ...line },
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    ...{},
+    childrenSvg: ""
+  });
+}
+function createTextItem(id, bounds, text = "", style, textFontSize) {
+  const r = normalizeRect(bounds);
+  const s = { ...DEFAULT_STROKE_STYLE, ...style };
+  return rebuildItemSvg({
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "text",
+    text,
+    stroke: s.stroke,
+    strokeWidth: s.strokeWidth,
+    ...s.strokeOpacity != null ? { strokeOpacity: s.strokeOpacity } : {},
+    ...{ textFontSize } ,
+    childrenSvg: ""
+  });
+}
 function createFreehandStrokeItem(id, pointsWorld, toolKind, style) {
   if (pointsWorld.length === 0) return null;
   const merged = {
@@ -947,6 +900,148 @@ function buildRasterImageChildrenSvg(dataUrl, intrinsic, bounds) {
   return `<g transform="translate(${tx}, ${ty}) scale(${s})"><image href="${href}" x="0" y="0" width="${iw}" height="${ih}" /></g>`;
 }
 
+// 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) {
   return Number(s);
@@ -1771,9 +1866,9 @@ function NativeInteractionOverlay({
   const previewElements = react.useMemo(() => {
     if (!placementPreview) return null;
     const p = placementPreview;
-    if (p.kind === "rect" || p.kind === "ellipse") {
+    if (p.kind === "rect" || p.kind === "ellipse" || p.kind === "architectural-cloud") {
       const r = normalizeRect(p.rect);
-      return p.kind === "rect" ? /* @__PURE__ */ jsxRuntime.jsx(
+      return p.kind === "rect" || p.kind === "architectural-cloud" ? /* @__PURE__ */ jsxRuntime.jsx(
         reactNativeSkia.Rect,
         {
           x: r.x,
@@ -2105,6 +2200,171 @@ 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_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" }
+];
+function NativeVectorToolbar({
+  value,
+  onChange,
+  tools = DEFAULT_NATIVE_VECTOR_TOOLS,
+  disabled = false,
+  disabledToolIds = [],
+  accessibilityLabel = "Canvas tools",
+  style,
+  contentContainerStyle,
+  toolButtonStyle,
+  activeToolButtonStyle,
+  toolLabelStyle,
+  activeToolLabelStyle,
+  renderToolIcon,
+  renderToolButton
+}) {
+  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,
+    {
+      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,
+          {
+            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
+            ],
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.iconSlot, children: icon }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Text,
+                {
+                  numberOfLines: 1,
+                  style: [
+                    styles.toolLabel,
+                    { color: foregroundColor },
+                    toolLabelStyle,
+                    selected ? activeToolLabelStyle : void 0
+                  ],
+                  children: tool.label
+                }
+              )
+            ]
+          },
+          tool.id
+        );
+      })
+    }
+  ) });
+}
+var styles = reactNative.StyleSheet.create({
+  shell: {
+    borderRadius: 10,
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "rgba(24, 24, 27, 0.14)",
+    backgroundColor: "rgba(255, 255, 255, 0.96)",
+    shadowColor: "#18181b",
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 6
+  },
+  content: {
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 6
+  },
+  toolButton: {
+    minWidth: 58,
+    height: 52,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    borderWidth: reactNative.StyleSheet.hairlineWidth,
+    borderColor: "transparent",
+    backgroundColor: "transparent"
+  },
+  activeToolButton: {
+    borderColor: "rgba(24, 24, 27, 0.24)",
+    backgroundColor: "#18181b"
+  },
+  pressedToolButton: {
+    backgroundColor: "rgba(24, 24, 27, 0.08)"
+  },
+  disabledToolButton: {
+    opacity: 0.42
+  },
+  iconSlot: {
+    height: 22,
+    minWidth: 22,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  shortLabel: {
+    fontSize: 16,
+    fontWeight: "700",
+    lineHeight: 20
+  },
+  toolLabel: {
+    maxWidth: 68,
+    fontSize: 10,
+    fontWeight: "600",
+    lineHeight: 12
+  }
+});
 
 // src/camera/camera.ts
 var Camera2D = class {
@@ -2292,6 +2552,37 @@ function collectEraserTargetsAtWorldPoint(items, worldX, worldY, options) {
   }
   return ids;
 }
+var MIN_PLACE_SIZE = 8;
+var MIN_ARROW_DRAG_PX = 8;
+var TAP_PX = 20;
+function isPlacementTool(toolId) {
+  return toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud" || toolId === "line" || toolId === "arrow";
+}
+function placementPreviewForTool(toolId, start, end) {
+  if (toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud") {
+    return { kind: toolId, rect: rectFromCorners(start, end) };
+  }
+  return { kind: toolId, start, end };
+}
+function defaultPlacementWorld(toolId, center) {
+  const cx = center.x;
+  const cy = center.y;
+  if (toolId === "rect") {
+    return { raw: { x: cx - 60, y: cy - 40, width: 120, height: 80 } };
+  }
+  if (toolId === "ellipse") {
+    return { raw: { x: cx - 70, y: cy - 45, width: 140, height: 90 } };
+  }
+  if (toolId === "architectural-cloud") {
+    return { raw: { x: cx - 90, y: cy - 50, width: 180, height: 100 } };
+  }
+  const start = { x: cx - 50, y: cy };
+  const end = { x: cx + 50, y: cy };
+  return {
+    raw: rectFromCorners(start, end),
+    lineWorld: [start, end]
+  };
+}
 function collectIdsInRect(items, marquee) {
   const m = normalizeRect(marquee);
   const out = [];
@@ -2469,10 +2760,31 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
           return;
         }
+        if (isPlacementTool(tool)) {
+          dragStateRef.current = {
+            kind: "place",
+            tool,
+            startWorld: { x: worldX, y: worldY },
+            startScreen: { x: sx, y: sy }
+          };
+          setPlacementPreview(
+            placementPreviewForTool(
+              tool,
+              { x: worldX, y: worldY },
+              {
+                x: worldX,
+                y: worldY
+              }
+            )
+          );
+          return;
+        }
         if (tool === "note" || tool === "text") {
           dragStateRef.current = {
             kind: "tap",
-            startWorld: { x: worldX, y: worldY }
+            tool,
+            startWorld: { x: worldX, y: worldY },
+            startScreen: { x: sx, y: sy }
           };
           return;
         }
@@ -2584,6 +2896,15 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
           return;
         }
+        if (st.kind === "place") {
+          setPlacementPreview(
+            placementPreviewForTool(st.tool, st.startWorld, {
+              x: worldX,
+              y: worldY
+            })
+          );
+          return;
+        }
       },
       onPanResponderRelease: (evt) => {
         lastPinchDist.current = null;
@@ -2639,12 +2960,83 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           dragStateRef.current = { kind: "idle" };
           return;
         }
+        if (st.kind === "place") {
+          dragStateRef.current = { kind: "idle" };
+          setPlacementPreview(null);
+          const change = onItemsChangeRef.current;
+          if (!change) return;
+          const { worldX, worldY } = screenToWorld(
+            evt.nativeEvent.locationX,
+            evt.nativeEvent.locationY
+          );
+          const a = st.startWorld;
+          const b = { x: worldX, y: worldY };
+          const screenDx = evt.nativeEvent.locationX - st.startScreen.x;
+          const screenDy = evt.nativeEvent.locationY - st.startScreen.y;
+          if (st.tool === "arrow" && Math.hypot(screenDx, screenDy) < MIN_ARROW_DRAG_PX) {
+            return;
+          }
+          let raw = rectFromCorners(a, b);
+          let br = normalizeRect(raw);
+          let lineStart = a;
+          let lineEnd = b;
+          if (br.width < MIN_PLACE_SIZE || br.height < MIN_PLACE_SIZE) {
+            const center = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+            const defaults = defaultPlacementWorld(st.tool, center);
+            raw = defaults.raw;
+            br = normalizeRect(raw);
+            if (defaults.lineWorld) {
+              const [defaultStart, defaultEnd] = defaults.lineWorld;
+              lineStart = defaultStart;
+              lineEnd = defaultEnd;
+            }
+          }
+          const id = createShapeId();
+          if (st.tool === "rect") {
+            change([...itemsRef.current, createRectangleItem(id, raw)]);
+            onSelectionChangeRef.current?.([id]);
+            return;
+          }
+          if (st.tool === "ellipse") {
+            change([...itemsRef.current, createEllipseItem(id, raw)]);
+            onSelectionChangeRef.current?.([id]);
+            return;
+          }
+          if (st.tool === "architectural-cloud") {
+            change([...itemsRef.current, createArchitecturalCloudItem(id, raw)]);
+            onSelectionChangeRef.current?.([id]);
+            return;
+          }
+          const line = lineEndpointsToLocal(br, lineStart, lineEnd);
+          change([...itemsRef.current, createLineItem(id, br, line, st.tool)]);
+          onSelectionChangeRef.current?.([id]);
+          return;
+        }
         if (st.kind === "tap") {
           dragStateRef.current = { kind: "idle" };
+          const screenDx = evt.nativeEvent.locationX - st.startScreen.x;
+          const screenDy = evt.nativeEvent.locationY - st.startScreen.y;
+          if (Math.hypot(screenDx, screenDy) > TAP_PX) return;
           const change = onItemsChangeRef.current;
           if (!change) return;
-          const tool = toolIdRef.current;
-          if (tool === "note") {
+          if (st.tool === "text") {
+            const id = createShapeId();
+            const item = createTextItem(
+              id,
+              {
+                x: st.startWorld.x - 4,
+                y: st.startWorld.y - 18,
+                width: 160,
+                height: 26
+              },
+              "Text",
+              void 0,
+              18
+            );
+            change([...itemsRef.current, item]);
+            onSelectionChangeRef.current?.([id]);
+          }
+          if (st.tool === "note") {
             const id = createShapeId();
             const note = {
               id,
@@ -2660,6 +3052,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
               toolKind: "custom"
             };
             change([...itemsRef.current, note]);
+            onSelectionChangeRef.current?.([id]);
           }
           return;
         }
@@ -2747,10 +3140,14 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   );
 });
 
+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.createShapeId = createShapeId;
 exports.parseSvgFragment = parseSvgFragment;
 //# sourceMappingURL=native.cjs.map
 //# sourceMappingURL=native.cjs.map