canvu-react 0.4.3 → 0.4.5

package/dist/native.d.cts

@@ -2,9 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { C as Camera2D } from './camera-CVVG7z56.cjs';
 import { V as VectorSceneItem, R as Rect } from './types-BCCvY6ie.cjs';
 import * as react from 'react';
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 type PlacementPreview = {
-    readonly kind: "rect" | "ellipse";
+    readonly kind: "rect" | "ellipse" | "architectural-cloud";
     readonly rect: {
         readonly x: number;
         readonly y: number;
@@ -69,6 +71,81 @@ type NativeShapeRendererProps = {
 };
 declare function NativeShapeRenderer({ item }: NativeShapeRendererProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Describes a single tool button rendered by {@link NativeVectorToolbar}.
+ *
+ * Use the built-in ids from {@link DEFAULT_NATIVE_VECTOR_TOOLS} when pairing
+ * the toolbar with {@link NativeVectorViewport}. Custom ids are useful only
+ * when the app also implements matching viewport behavior.
+ */
+type NativeVectorToolDefinition = {
+    readonly id: string;
+    readonly label: string;
+    readonly shortLabel?: string;
+    readonly accessibilityLabel?: string;
+    readonly disabled?: boolean;
+};
+/**
+ * Render input for custom tool icons or complete custom tool buttons.
+ *
+ * Prefer `renderToolIcon` for app-specific icon packs. Use
+ * `renderToolButton` only when you need to replace the full touch target while
+ * keeping the toolbar's horizontal scrolling and tool list behavior.
+ */
+type NativeVectorToolbarRenderToolInput = {
+    readonly tool: NativeVectorToolDefinition;
+    readonly selected: boolean;
+    readonly disabled: boolean;
+    readonly foregroundColor: string;
+    readonly onSelect: () => void;
+};
+/**
+ * Props for {@link NativeVectorToolbar}.
+ *
+ * The component is controlled: pass the same `value` to `NativeVectorViewport`
+ * as `toolId`, and update it from `onChange`. It is intentionally lightweight
+ * and native-only, with no dependency on the web toolbar implementation.
+ */
+type NativeVectorToolbarProps = {
+    readonly value: string;
+    readonly onChange: (toolId: string) => void;
+    readonly tools?: readonly NativeVectorToolDefinition[];
+    readonly disabled?: boolean;
+    readonly disabledToolIds?: readonly string[];
+    readonly accessibilityLabel?: string;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly contentContainerStyle?: StyleProp<ViewStyle>;
+    readonly toolButtonStyle?: StyleProp<ViewStyle>;
+    readonly activeToolButtonStyle?: StyleProp<ViewStyle>;
+    readonly toolLabelStyle?: StyleProp<TextStyle>;
+    readonly activeToolLabelStyle?: StyleProp<TextStyle>;
+    readonly renderToolIcon?: (input: NativeVectorToolbarRenderToolInput) => ReactNode;
+    readonly renderToolButton?: (input: NativeVectorToolbarRenderToolInput) => ReactNode;
+};
+/**
+ * Default mobile-friendly tool list for {@link NativeVectorToolbar}.
+ *
+ * The ids match the native viewport's built-in tool handling. Apps can pass a
+ * filtered or reordered list when permissions or product scope require it.
+ */
+declare const DEFAULT_NATIVE_VECTOR_TOOLS: readonly NativeVectorToolDefinition[];
+/**
+ * Horizontal, touch-sized toolbar for `canvu/native`.
+ *
+ * Use it with {@link NativeVectorViewport} by controlling the same `toolId`
+ * state. It intentionally uses React Native primitives only, so it works in
+ * Expo and bare React Native apps without a WebView.
+ *
+ * @example
+ * ```tsx
+ * const [toolId, setToolId] = useState("select");
+ *
+ * <NativeVectorViewport toolId={toolId} ... />
+ * <NativeVectorToolbar value={toolId} onChange={setToolId} />
+ * ```
+ */
+declare function NativeVectorToolbar({ value, onChange, tools, disabled, disabledToolIds, accessibilityLabel, style, contentContainerStyle, toolButtonStyle, activeToolButtonStyle, toolLabelStyle, activeToolLabelStyle, renderToolIcon, renderToolButton, }: NativeVectorToolbarProps): react_jsx_runtime.JSX.Element;
+
 type NativeVectorViewportHandle = {
     getCamera: () => Camera2D | null;
     requestRender: () => void;
@@ -214,4 +291,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { NativeInteractionOverlay, type NativeInteractionOverlayProps, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type PlacementPreview, type SvgNode, parseSvgFragment };
+export { DEFAULT_NATIVE_VECTOR_TOOLS, NativeInteractionOverlay, type NativeInteractionOverlayProps, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarProps, type NativeVectorToolbarRenderToolInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type PlacementPreview, type SvgNode, parseSvgFragment };

package/dist/native.d.ts

@@ -2,9 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { C as Camera2D } from './camera-CoRYN_IV.js';
 import { V as VectorSceneItem, R as Rect } from './types-BCCvY6ie.js';
 import * as react from 'react';
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 type PlacementPreview = {
-    readonly kind: "rect" | "ellipse";
+    readonly kind: "rect" | "ellipse" | "architectural-cloud";
     readonly rect: {
         readonly x: number;
         readonly y: number;
@@ -69,6 +71,81 @@ type NativeShapeRendererProps = {
 };
 declare function NativeShapeRenderer({ item }: NativeShapeRendererProps): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Describes a single tool button rendered by {@link NativeVectorToolbar}.
+ *
+ * Use the built-in ids from {@link DEFAULT_NATIVE_VECTOR_TOOLS} when pairing
+ * the toolbar with {@link NativeVectorViewport}. Custom ids are useful only
+ * when the app also implements matching viewport behavior.
+ */
+type NativeVectorToolDefinition = {
+    readonly id: string;
+    readonly label: string;
+    readonly shortLabel?: string;
+    readonly accessibilityLabel?: string;
+    readonly disabled?: boolean;
+};
+/**
+ * Render input for custom tool icons or complete custom tool buttons.
+ *
+ * Prefer `renderToolIcon` for app-specific icon packs. Use
+ * `renderToolButton` only when you need to replace the full touch target while
+ * keeping the toolbar's horizontal scrolling and tool list behavior.
+ */
+type NativeVectorToolbarRenderToolInput = {
+    readonly tool: NativeVectorToolDefinition;
+    readonly selected: boolean;
+    readonly disabled: boolean;
+    readonly foregroundColor: string;
+    readonly onSelect: () => void;
+};
+/**
+ * Props for {@link NativeVectorToolbar}.
+ *
+ * The component is controlled: pass the same `value` to `NativeVectorViewport`
+ * as `toolId`, and update it from `onChange`. It is intentionally lightweight
+ * and native-only, with no dependency on the web toolbar implementation.
+ */
+type NativeVectorToolbarProps = {
+    readonly value: string;
+    readonly onChange: (toolId: string) => void;
+    readonly tools?: readonly NativeVectorToolDefinition[];
+    readonly disabled?: boolean;
+    readonly disabledToolIds?: readonly string[];
+    readonly accessibilityLabel?: string;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly contentContainerStyle?: StyleProp<ViewStyle>;
+    readonly toolButtonStyle?: StyleProp<ViewStyle>;
+    readonly activeToolButtonStyle?: StyleProp<ViewStyle>;
+    readonly toolLabelStyle?: StyleProp<TextStyle>;
+    readonly activeToolLabelStyle?: StyleProp<TextStyle>;
+    readonly renderToolIcon?: (input: NativeVectorToolbarRenderToolInput) => ReactNode;
+    readonly renderToolButton?: (input: NativeVectorToolbarRenderToolInput) => ReactNode;
+};
+/**
+ * Default mobile-friendly tool list for {@link NativeVectorToolbar}.
+ *
+ * The ids match the native viewport's built-in tool handling. Apps can pass a
+ * filtered or reordered list when permissions or product scope require it.
+ */
+declare const DEFAULT_NATIVE_VECTOR_TOOLS: readonly NativeVectorToolDefinition[];
+/**
+ * Horizontal, touch-sized toolbar for `canvu/native`.
+ *
+ * Use it with {@link NativeVectorViewport} by controlling the same `toolId`
+ * state. It intentionally uses React Native primitives only, so it works in
+ * Expo and bare React Native apps without a WebView.
+ *
+ * @example
+ * ```tsx
+ * const [toolId, setToolId] = useState("select");
+ *
+ * <NativeVectorViewport toolId={toolId} ... />
+ * <NativeVectorToolbar value={toolId} onChange={setToolId} />
+ * ```
+ */
+declare function NativeVectorToolbar({ value, onChange, tools, disabled, disabledToolIds, accessibilityLabel, style, contentContainerStyle, toolButtonStyle, activeToolButtonStyle, toolLabelStyle, activeToolLabelStyle, renderToolIcon, renderToolButton, }: NativeVectorToolbarProps): react_jsx_runtime.JSX.Element;
+
 type NativeVectorViewportHandle = {
     getCamera: () => Camera2D | null;
     requestRender: () => void;
@@ -214,4 +291,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { NativeInteractionOverlay, type NativeInteractionOverlayProps, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type PlacementPreview, type SvgNode, parseSvgFragment };
+export { DEFAULT_NATIVE_VECTOR_TOOLS, NativeInteractionOverlay, type NativeInteractionOverlayProps, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarProps, type NativeVectorToolbarRenderToolInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type PlacementPreview, type SvgNode, parseSvgFragment };

package/dist/native.js

@@ -2,7 +2,7 @@ import { Group, RoundedRect, Circle, Line, vec, Path, matchFont, Text, Canvas, R
 import { memo, forwardRef, useState, useRef, useCallback, useMemo, useImperativeHandle } from 'react';
 import getStroke from 'perfect-freehand';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { PanResponder, View } from 'react-native';
+import { StyleSheet, PanResponder, View, ScrollView, Text as Text$1, Pressable } from 'react-native';
 
 // src/native/NativeInteractionOverlay.tsx
 
@@ -121,6 +121,13 @@ function getRotationHandleWorldPosition(bounds, rotationRad, handleOffsetWorld)
     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) {
@@ -780,6 +787,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;
@@ -883,6 +899,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 = {
@@ -1765,9 +1860,9 @@ function NativeInteractionOverlay({
   const previewElements = 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__ */ jsx(
+      return p.kind === "rect" || p.kind === "architectural-cloud" ? /* @__PURE__ */ jsx(
         Rect,
         {
           x: r.x,
@@ -2099,6 +2194,171 @@ function NativeSceneRenderer({
   if (width <= 0 || height <= 0) return null;
   return /* @__PURE__ */ jsx(Canvas, { style: { width, height }, children: /* @__PURE__ */ jsx(Group, { transform: cameraTransform, children: visible.map((item) => /* @__PURE__ */ 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 = useMemo(() => new Set(disabledToolIds), [disabledToolIds]);
+  return /* @__PURE__ */ jsx(View, { accessibilityLabel, style: [styles.shell, style], children: /* @__PURE__ */ jsx(
+    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__ */ jsx(View, { children: renderToolButton(input) }, tool.id);
+        }
+        const icon = renderToolIcon?.(input) ?? /* @__PURE__ */ jsx(
+          Text$1,
+          {
+            style: [
+              styles.shortLabel,
+              { color: foregroundColor },
+              toolLabelStyle,
+              selected ? activeToolLabelStyle : void 0
+            ],
+            children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase()
+          }
+        );
+        return /* @__PURE__ */ jsxs(
+          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__ */ jsx(View, { style: styles.iconSlot, children: icon }),
+              /* @__PURE__ */ jsx(
+                Text$1,
+                {
+                  numberOfLines: 1,
+                  style: [
+                    styles.toolLabel,
+                    { color: foregroundColor },
+                    toolLabelStyle,
+                    selected ? activeToolLabelStyle : void 0
+                  ],
+                  children: tool.label
+                }
+              )
+            ]
+          },
+          tool.id
+        );
+      })
+    }
+  ) });
+}
+var styles = StyleSheet.create({
+  shell: {
+    borderRadius: 10,
+    borderWidth: 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: 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 {
@@ -2286,6 +2546,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 = [];
@@ -2463,10 +2754,31 @@ var NativeVectorViewport = 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;
         }
@@ -2578,6 +2890,15 @@ var NativeVectorViewport = 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;
@@ -2633,12 +2954,83 @@ var NativeVectorViewport = 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,
@@ -2654,6 +3046,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
               toolKind: "custom"
             };
             change([...itemsRef.current, note]);
+            onSelectionChangeRef.current?.([id]);
           }
           return;
         }
@@ -2741,6 +3134,6 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   );
 });
 
-export { NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorViewport, parseSvgFragment };
+export { DEFAULT_NATIVE_VECTOR_TOOLS, NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorToolbar, NativeVectorViewport, parseSvgFragment };
 //# sourceMappingURL=native.js.map
 //# sourceMappingURL=native.js.map