canvu-react 0.4.41 → 0.4.43

package/dist/native.cjs

@@ -3,8 +3,8 @@
 var getStroke = require('perfect-freehand');
 var reactNativeSkia = require('@shopify/react-native-skia');
 var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
 var reactNative = require('react-native');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -1175,6 +1175,422 @@ function boundsAabbForRotatedItem(item) {
   return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
 
+// src/scene/clone-item.ts
+function cloneVectorSceneItemWithNewId(item) {
+  const id = createShapeId();
+  const copy = JSON.parse(JSON.stringify(item));
+  let next = { ...copy, id };
+  if (next.toolKind === "arrow" && next.line) {
+    next = {
+      ...next,
+      childrenSvg: buildArrowSvg(id, next.line, resolveStrokeStyle(next))
+    };
+  }
+  if (next.toolKind === "text" && next.text !== void 0) {
+    return rebuildItemSvg(next);
+  }
+  if (next.toolKind === "custom" && next.customInnerSvg && next.customIntrinsicSize) {
+    return rebuildItemSvg(next);
+  }
+  return next;
+}
+
+// src/scene/managed-images.ts
+var MANAGED_KEY = "managed";
+var STACK_GAP_WORLD = 16;
+function isManagedImage(item) {
+  const data = item.pluginData;
+  return data != null && data[MANAGED_KEY] === true;
+}
+function markImageAsManaged(item) {
+  return {
+    ...item,
+    locked: true,
+    pluginData: { ...item.pluginData ?? {}, [MANAGED_KEY]: true }
+  };
+}
+function restackManagedImages(items) {
+  let anchorAabbY = Infinity;
+  let anchorCenterX = 0;
+  for (const item of items) {
+    if (!isManagedImage(item)) continue;
+    const aabb = boundsAabbForRotatedItem(item);
+    if (aabb.y < anchorAabbY) {
+      anchorAabbY = aabb.y;
+      anchorCenterX = aabb.x + aabb.width / 2;
+    }
+  }
+  if (!Number.isFinite(anchorAabbY)) return [...items];
+  let cursorY = anchorAabbY;
+  return items.map((item) => {
+    if (!isManagedImage(item)) return item;
+    const aabb = boundsAabbForRotatedItem(item);
+    const centerY = cursorY + aabb.height / 2;
+    const newX = anchorCenterX - item.bounds.width / 2;
+    const newY = centerY - item.bounds.height / 2;
+    cursorY += aabb.height + STACK_GAP_WORLD;
+    if (item.bounds.x === newX && item.bounds.y === newY) return item;
+    return {
+      ...item,
+      x: newX,
+      y: newY,
+      bounds: { ...item.bounds, x: newX, y: newY }
+    };
+  });
+}
+function copyManagedImage(items, id) {
+  const idx = items.findIndex((i) => i.id === id);
+  if (idx < 0) return [...items];
+  const source = items[idx];
+  if (!source) return [...items];
+  const clone = markImageAsManaged(cloneVectorSceneItemWithNewId(source));
+  const inserted = [...items.slice(0, idx + 1), clone, ...items.slice(idx + 1)];
+  return restackManagedImages(inserted);
+}
+function rotateManagedImage(items, id) {
+  return restackManagedImages(
+    items.map(
+      (i) => i.id === id ? { ...i, rotation: ((i.rotation ?? 0) + Math.PI / 2) % (Math.PI * 2) } : i
+    )
+  );
+}
+function deleteManagedImage(items, id) {
+  return restackManagedImages(items.filter((i) => i.id !== id));
+}
+var defaultLabels = {
+  title: "Images",
+  focus: "Focus on canvas",
+  duplicate: "Duplicate",
+  rotate: "Rotate",
+  delete: "Delete",
+  collapse: "Collapse images menu",
+  expand: "Open images menu"
+};
+var iconPaths = {
+  images: ["M4 5h16v14H4z", "M4 15l4-4 3 3 5-6 4 5"],
+  chevronRight: ["M9 18l6-6-6-6"],
+  copy: ["M8 8h10v10H8z", "M6 16H4V4h12v2", "M13 11v4", "M11 13h4"],
+  rotate: ["M21 12a9 9 0 1 1-2.64-6.36", "M21 3v6h-6"],
+  trash: ["M3 6h18", "M8 6V4h8v2", "M6 6l1 15h10l1-15", "M10 11v6", "M14 11v6"],
+  grip: ["M8 7h8", "M8 12h8", "M8 17h8"]
+};
+function NativeImagesMenuIcon({
+  name,
+  color = "#0f172a",
+  size = 18
+}) {
+  const scale = size / 24;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Canvas, { style: { width: size, height: size }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: [{ scale }], children: iconPaths[name].map((path) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactNativeSkia.Path,
+    {
+      path,
+      color,
+      style: "stroke",
+      strokeWidth: 2,
+      strokeCap: "round",
+      strokeJoin: "round"
+    },
+    path
+  )) }) });
+}
+function resolveLabels(labels) {
+  return {
+    ...defaultLabels,
+    ...labels,
+    duplicate: labels?.duplicate ?? labels?.copy ?? defaultLabels.duplicate
+  };
+}
+function getDefaultImageUri(item) {
+  return item.imageThumbnailHref ?? item.imageRasterHref ?? null;
+}
+function NativeImagesMenuAction({
+  label,
+  danger = false,
+  children,
+  onPress,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      onPress,
+      style: ({ pressed }) => [
+        styles.actionButton,
+        pressed && styles.actionButtonPressed,
+        danger && styles.dangerActionButton,
+        style
+      ],
+      children
+    }
+  );
+}
+function NativeImagesMenuRow({
+  item,
+  items,
+  labels,
+  onItemsChange,
+  onFocusItem,
+  getImageUri,
+  renderThumbnail,
+  rowStyle,
+  actionButtonStyle
+}) {
+  const imageUri = getImageUri(item);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.row, rowStyle], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.handle, children: /* @__PURE__ */ jsxRuntime.jsx(NativeImagesMenuIcon, { name: "grip", color: "#94a3b8" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.focus,
+        disabled: !onFocusItem,
+        onPress: () => onFocusItem?.(item),
+        style: styles.thumbnailButton,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.thumbnailBox, children: [
+          renderThumbnail ? renderThumbnail(item) : null,
+          !renderThumbnail && imageUri ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Image, { source: { uri: imageUri }, style: styles.thumbnailImage }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.actionsColumn, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NativeImagesMenuAction,
+        {
+          label: labels.duplicate,
+          onPress: () => onItemsChange(copyManagedImage(items, item.id)),
+          style: actionButtonStyle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(NativeImagesMenuIcon, { name: "copy" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NativeImagesMenuAction,
+        {
+          label: labels.rotate,
+          onPress: () => onItemsChange(rotateManagedImage(items, item.id)),
+          style: actionButtonStyle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(NativeImagesMenuIcon, { name: "rotate" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NativeImagesMenuAction,
+        {
+          label: labels.delete,
+          danger: true,
+          onPress: () => onItemsChange(deleteManagedImage(items, item.id)),
+          style: actionButtonStyle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(NativeImagesMenuIcon, { name: "trash", color: "#b91c1c" })
+        }
+      )
+    ] })
+  ] });
+}
+function NativeImagesMenu({
+  items,
+  onItemsChange,
+  onFocusItem,
+  labels,
+  defaultOpen = false,
+  style,
+  panelStyle,
+  collapsedButtonStyle,
+  rowStyle,
+  actionButtonStyle,
+  getImageUri = getDefaultImageUri,
+  renderThumbnail
+}) {
+  const managed = react.useMemo(() => items.filter(isManagedImage), [items]);
+  const [collapsed, setCollapsed] = react.useState(!defaultOpen);
+  if (managed.length === 0) return null;
+  const resolvedLabels = resolveLabels(labels);
+  if (collapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: resolvedLabels.expand,
+        onPress: () => setCollapsed(false),
+        style: ({ pressed }) => [
+          styles.collapsedButton,
+          pressed && styles.collapsedButtonPressed,
+          collapsedButtonStyle,
+          style
+        ],
+        children: /* @__PURE__ */ jsxRuntime.jsx(NativeImagesMenuIcon, { name: "images", size: 20 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles.panel, panelStyle, style], children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.headerTitleRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.headerTitle, children: resolvedLabels.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.count, children: managed.length })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: resolvedLabels.collapse,
+          onPress: () => setCollapsed(true),
+          style: ({ pressed }) => [
+            styles.collapseButton,
+            pressed && styles.actionButtonPressed
+          ],
+          children: /* @__PURE__ */ jsxRuntime.jsx(NativeImagesMenuIcon, { name: "chevronRight", size: 20 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.ScrollView,
+      {
+        style: styles.listScroll,
+        contentContainerStyle: styles.listContent,
+        showsVerticalScrollIndicator: false,
+        children: managed.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          NativeImagesMenuRow,
+          {
+            item,
+            items,
+            labels: resolvedLabels,
+            onItemsChange,
+            onFocusItem,
+            getImageUri,
+            renderThumbnail,
+            rowStyle,
+            actionButtonStyle
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+var styles = reactNative.StyleSheet.create({
+  actionButton: {
+    alignItems: "center",
+    borderRadius: 6,
+    height: 32,
+    justifyContent: "center",
+    width: 32
+  },
+  actionButtonPressed: {
+    backgroundColor: "#f1f5f9"
+  },
+  actionsColumn: {
+    alignItems: "center",
+    gap: 4,
+    justifyContent: "center"
+  },
+  collapseButton: {
+    alignItems: "center",
+    borderRadius: 8,
+    height: 32,
+    justifyContent: "center",
+    width: 32
+  },
+  collapsedButton: {
+    alignItems: "center",
+    backgroundColor: "#ffffff",
+    borderColor: "#e2e8f0",
+    borderRadius: 10,
+    borderWidth: 1,
+    height: 44,
+    justifyContent: "center",
+    shadowColor: "#0f172a",
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.12,
+    shadowRadius: 24,
+    width: 44
+  },
+  collapsedButtonPressed: {
+    backgroundColor: "#f8fafc"
+  },
+  count: {
+    color: "#64748b",
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  dangerActionButton: {
+    backgroundColor: "#fef2f2"
+  },
+  handle: {
+    alignItems: "center",
+    height: 128,
+    justifyContent: "center",
+    width: 28
+  },
+  header: {
+    alignItems: "center",
+    borderBottomColor: "#e2e8f0",
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    gap: 8,
+    justifyContent: "space-between",
+    paddingBottom: 8,
+    paddingLeft: 14,
+    paddingRight: 8,
+    paddingTop: 8
+  },
+  headerTitle: {
+    color: "#0f172a",
+    fontSize: 14,
+    fontWeight: "600",
+    letterSpacing: 0.28
+  },
+  headerTitleRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8
+  },
+  listContent: {
+    gap: 6,
+    padding: 8
+  },
+  listScroll: {
+    maxHeight: 640
+  },
+  panel: {
+    backgroundColor: "#ffffff",
+    borderColor: "#e2e8f0",
+    borderRadius: 10,
+    borderWidth: 1,
+    maxHeight: 820,
+    overflow: "hidden",
+    shadowColor: "#0f172a",
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.12,
+    shadowRadius: 40
+  },
+  row: {
+    alignItems: "center",
+    borderRadius: 10,
+    flexDirection: "row",
+    gap: 12,
+    paddingBottom: 10,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 10
+  },
+  thumbnailBox: {
+    alignItems: "center",
+    backgroundColor: "#e2e8f0",
+    borderRadius: 8,
+    height: 128,
+    justifyContent: "center",
+    overflow: "hidden",
+    width: 128
+  },
+  thumbnailButton: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  thumbnailImage: {
+    height: "100%",
+    width: "100%"
+  }
+});
+
 // src/interaction/resize-handles.ts
 var HANDLE_IDS = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 function getHandleWorldPosition(bounds, id) {
@@ -3385,12 +3801,12 @@ function DashPreview({
   dashed = false
 }) {
   const strokeHeight = Math.max(3, Math.min(6, width));
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.dashPreviewTrack, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.dashPreviewTrack, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
         style: [
-          styles.dashPreviewStroke,
+          styles2.dashPreviewStroke,
           {
             width: dashed ? 11 : 26,
             height: strokeHeight,
@@ -3404,7 +3820,7 @@ function DashPreview({
       reactNative.View,
       {
         style: [
-          styles.dashPreviewStroke,
+          styles2.dashPreviewStroke,
           {
             width: 11,
             height: strokeHeight,
@@ -3448,29 +3864,29 @@ function RangeControl({
     }),
     [updateFromX]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.rangeRow, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.rangeRow, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
       {
-        style: styles.rangeTrack,
+        style: styles2.rangeTrack,
         onLayout: (event) => setTrackWidth(event.nativeEvent.layout.width),
         ...panResponder.panHandlers,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.rangeBase }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.rangeFill, { width: `${normalized * 100}%` }] }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.rangeThumb, { left: `${normalized * 100}%` }] })
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.rangeBase }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.rangeFill, { width: `${normalized * 100}%` }] }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.rangeThumb, { left: `${normalized * 100}%` }] })
         ]
       }
     ),
-    valueLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.rangeValue, children: valueLabel }) : null
+    valueLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.rangeValue, children: valueLabel }) : null
   ] });
 }
 function InspectorSection({
   label,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles.section, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.sectionLabel, children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.section, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.sectionLabel, children: label }),
     children
   ] });
 }
@@ -3479,7 +3895,7 @@ function SegmentControl({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.segmentGroup, children: segments.map((segment) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.segmentGroup, children: segments.map((segment) => {
     const selected = segment.value === value;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.Pressable,
@@ -3488,15 +3904,15 @@ function SegmentControl({
         accessibilityState: { selected },
         accessibilityLabel: segment.label,
         onPress: () => onChange(segment.value),
-        style: [styles.segment, selected ? styles.segmentSelected : null],
+        style: [styles2.segment, selected ? styles2.segmentSelected : null],
         children: [
           segment.preview,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Text,
             {
               style: [
-                styles.segmentLabel,
-                selected ? styles.segmentLabelSelected : null
+                styles2.segmentLabel,
+                selected ? styles2.segmentLabelSelected : null
               ],
               children: segment.label
             }
@@ -3532,11 +3948,11 @@ function NativeVectorStyleInspector({
     reactNative.View,
     {
       pointerEvents: "auto",
-      style: [styles.shell, style],
+      style: [styles2.shell, style],
       accessibilityRole: "summary",
       accessibilityLabel: toolId === "marker" ? "Configura\xE7\xF5es do marcador" : "Configura\xE7\xF5es da caneta",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InspectorSection, { label: "Cor", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.palette, children: NATIVE_STYLE_PALETTE.map((color) => {
+        /* @__PURE__ */ jsxRuntime.jsx(InspectorSection, { label: "Cor", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.palette, children: NATIVE_STYLE_PALETTE.map((color) => {
           const selected = hexesEqual(color.hex, hex);
           return /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Pressable,
@@ -3546,7 +3962,7 @@ function NativeVectorStyleInspector({
               accessibilityLabel: color.name,
               onPress: () => onChange({ stroke: color.hex }),
               style: [
-                styles.swatch,
+                styles2.swatch,
                 {
                   backgroundColor: color.hex,
                   borderWidth: selected ? 2 : 1,
@@ -3588,7 +4004,7 @@ function NativeVectorStyleInspector({
     }
   );
 }
-var styles = reactNative.StyleSheet.create({
+var styles2 = reactNative.StyleSheet.create({
   shell: {
     minWidth: 240,
     paddingHorizontal: 14,
@@ -3900,7 +4316,7 @@ function NativeVectorToolbar({
     reactNative.View,
     {
       accessibilityLabel,
-      style: [styles2.shell, style],
+      style: [styles3.shell, style],
       pointerEvents: "box-none",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3909,8 +4325,8 @@ function NativeVectorToolbar({
             horizontal: true,
             showsHorizontalScrollIndicator: false,
             contentContainerStyle: [
-              styles2.content,
-              density === "comfortable" ? styles2.comfortableContent : void 0,
+              styles3.content,
+              density === "comfortable" ? styles3.comfortableContent : void 0,
               contentContainerStyle
             ],
             children: [
@@ -3927,21 +4343,21 @@ function NativeVectorToolbar({
                     disabled: toolLockDisabled,
                     onPress: toggleToolLock,
                     style: ({ pressed }) => [
-                      styles2.toolButton,
-                      density === "comfortable" ? styles2.comfortableToolButton : void 0,
-                      toolLocked ? styles2.activeToolButton : void 0,
-                      pressed && !toolLockDisabled ? styles2.pressedToolButton : void 0,
-                      toolLockDisabled ? styles2.disabledToolButton : void 0
+                      styles3.toolButton,
+                      density === "comfortable" ? styles3.comfortableToolButton : void 0,
+                      toolLocked ? styles3.activeToolButton : void 0,
+                      pressed && !toolLockDisabled ? styles3.pressedToolButton : void 0,
+                      toolLockDisabled ? styles3.disabledToolButton : void 0
                     ],
                     children: renderToolLockIcon?.({
                       locked: toolLocked,
                       disabled: toolLockDisabled,
                       foregroundColor: "#18181b",
                       onToggle: toggleToolLock
-                    }) ?? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.lockGlyph, children: toolLocked ? "L" : "U" })
+                    }) ?? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.lockGlyph, children: toolLocked ? "L" : "U" })
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.toolLockDivider })
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.toolLockDivider })
               ] }) : null,
               toolbarTools.map(
                 (tool) => renderNativeToolButton({
@@ -3959,7 +4375,7 @@ function NativeVectorToolbar({
                   renderToolButton
                 })
               ),
-              showOverflowMenu ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.overflowSpacer }) : null,
+              showOverflowMenu ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.overflowSpacer }) : null,
               showOverflowMenu ? /* @__PURE__ */ jsxRuntime.jsxs(
                 reactNative.Pressable,
                 {
@@ -3973,27 +4389,27 @@ function NativeVectorToolbar({
                   disabled,
                   onPress: toggleOverflow,
                   style: ({ pressed }) => [
-                    styles2.overflowTrigger,
-                    overflowOpen || activeOverflowTool ? styles2.activeToolButton : void 0,
-                    pressed && !disabled ? styles2.pressedToolButton : void 0,
-                    disabled ? styles2.disabledToolButton : void 0
+                    styles3.overflowTrigger,
+                    overflowOpen || activeOverflowTool ? styles3.activeToolButton : void 0,
+                    pressed && !disabled ? styles3.pressedToolButton : void 0,
+                    disabled ? styles3.disabledToolButton : void 0
                   ],
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconSlot, children: activeOverflowTool ? renderToolIcon?.({
+                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.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: styles2.shapesGlyph, children: "S" }) }),
-                    renderOverflowChevronIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.chevronGlyph, children: overflowOpen ? "^" : "v" })
+                    }) ?? renderNativeToolFallback(activeOverflowTool, "#18181b") : renderOverflowIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.shapesGlyph, children: "S" }) }),
+                    renderOverflowChevronIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.chevronGlyph, children: overflowOpen ? "^" : "v" })
                   ]
                 }
               ) : null
             ]
           }
         ),
-        overflowOpen && showOverflowMenu ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.overflowPanel, overflowPanelStyle], children: remainingOverflowTools.map(
+        overflowOpen && showOverflowMenu ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.overflowPanel, overflowPanelStyle], children: remainingOverflowTools.map(
           (tool) => renderNativeToolButton({
             tool,
             value,
@@ -4004,7 +4420,7 @@ function NativeVectorToolbar({
             disabled,
             disabledIds,
             density: "compact",
-            toolButtonStyle: styles2.overflowToolButton,
+            toolButtonStyle: styles3.overflowToolButton,
             activeToolButtonStyle,
             toolLabelStyle,
             activeToolLabelStyle,
@@ -4045,22 +4461,22 @@ function renderNativeToolButton(input) {
       disabled: toolDisabled,
       onPress: onSelect,
       style: ({ pressed }) => [
-        styles2.toolButton,
-        input.density === "comfortable" ? styles2.comfortableToolButton : void 0,
+        styles3.toolButton,
+        input.density === "comfortable" ? styles3.comfortableToolButton : void 0,
         input.toolButtonStyle,
-        selected ? styles2.activeToolButton : void 0,
+        selected ? styles3.activeToolButton : void 0,
         selected ? input.activeToolButtonStyle : void 0,
-        pressed && !toolDisabled ? styles2.pressedToolButton : void 0,
-        toolDisabled ? styles2.disabledToolButton : void 0
+        pressed && !toolDisabled ? styles3.pressedToolButton : void 0,
+        toolDisabled ? styles3.disabledToolButton : void 0
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconSlot, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.iconSlot, children: icon }),
         input.density === "comfortable" ? /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Text,
           {
             numberOfLines: 1,
             style: [
-              styles2.toolLabel,
+              styles3.toolLabel,
               { color: foregroundColor },
               input.toolLabelStyle,
               selected ? input.activeToolLabelStyle : void 0
@@ -4080,9 +4496,9 @@ function renderNativeToolFallback(tool, foregroundColor, toolLabelStyle) {
   if (tool.id === "link") {
     return /* @__PURE__ */ jsxRuntime.jsx(NativeLinkToolIcon, { color: foregroundColor });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
 }
-var styles2 = reactNative.StyleSheet.create({
+var styles3 = reactNative.StyleSheet.create({
   shell: {
     borderRadius: 8,
     borderWidth: reactNative.StyleSheet.hairlineWidth,
@@ -4678,6 +5094,84 @@ function resizeItemByHandle(item, start, handle, currentWorld) {
   }
   return { ...item, x: nb.x, y: nb.y, bounds: nb };
 }
+
+// src/native/native-remote-presence-hit-test.ts
+var REMOTE_CURSOR_SCREEN_PX2 = 22;
+var REMOTE_LABEL_SCREEN_PX2 = 12;
+var REMOTE_LABEL_OFFSET_X = 14;
+var REMOTE_LABEL_BASELINE_OFFSET_Y = 18;
+var REMOTE_LABEL_AVERAGE_CHAR_PX = 7;
+var REMOTE_LABEL_MAX_WIDTH_PX = 180;
+var REMOTE_LABEL_MIN_HIT_WIDTH_PX = 44;
+var REMOTE_LABEL_HIT_PADDING_X = 10;
+var REMOTE_LABEL_HIT_PADDING_Y = 10;
+var REMOTE_CURSOR_MIN_HIT_SIZE_PX = 36;
+function pointInScreenRect(point, rect) {
+  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+}
+function displayLabelForPeer(peer) {
+  const displayName = peer.displayName?.trim();
+  if (displayName) return displayName;
+  return null;
+}
+function followIdForPeer(peer) {
+  return peer.clientId ?? peer.peerId ?? peer.id;
+}
+function estimateLabelWidth(label) {
+  return Math.max(
+    REMOTE_LABEL_MIN_HIT_WIDTH_PX,
+    Math.min(REMOTE_LABEL_MAX_WIDTH_PX, label.length * REMOTE_LABEL_AVERAGE_CHAR_PX)
+  );
+}
+function buildHit(peer, camera, point, target) {
+  const world = camera.screenToWorld(point.x, point.y);
+  return {
+    peer,
+    followId: followIdForPeer(peer),
+    target,
+    screenX: point.x,
+    screenY: point.y,
+    worldX: world.worldX,
+    worldY: world.worldY,
+    ...peer.clientId ? { clientId: peer.clientId } : {},
+    ...peer.peerId ? { peerId: peer.peerId } : {}
+  };
+}
+function hitTestNativeRemotePresence(peers, camera, point) {
+  for (let index = peers.length - 1; index >= 0; index -= 1) {
+    const peer = peers[index];
+    if (!peer || peer.isSelf || !peer.cursor) continue;
+    const cursorScreen = camera.worldToScreen(peer.cursor.x, peer.cursor.y);
+    const label = displayLabelForPeer(peer);
+    if (label) {
+      const labelX = cursorScreen.screenX + REMOTE_LABEL_OFFSET_X;
+      const labelBaselineY = cursorScreen.screenY + REMOTE_LABEL_BASELINE_OFFSET_Y;
+      const labelRect = {
+        x: labelX - REMOTE_LABEL_HIT_PADDING_X,
+        y: labelBaselineY - REMOTE_LABEL_SCREEN_PX2 - REMOTE_LABEL_HIT_PADDING_Y,
+        width: estimateLabelWidth(label) + REMOTE_LABEL_HIT_PADDING_X * 2,
+        height: REMOTE_LABEL_SCREEN_PX2 + REMOTE_LABEL_HIT_PADDING_Y * 2
+      };
+      if (pointInScreenRect(point, labelRect)) {
+        return buildHit(peer, camera, point, "label");
+      }
+    }
+    const cursorHitSize = Math.max(
+      REMOTE_CURSOR_MIN_HIT_SIZE_PX,
+      REMOTE_CURSOR_SCREEN_PX2
+    );
+    const cursorRect = {
+      x: cursorScreen.screenX - (cursorHitSize - REMOTE_CURSOR_SCREEN_PX2) / 2,
+      y: cursorScreen.screenY - (cursorHitSize - REMOTE_CURSOR_SCREEN_PX2) / 2,
+      width: cursorHitSize,
+      height: cursorHitSize
+    };
+    if (pointInScreenRect(point, cursorRect)) {
+      return buildHit(peer, camera, point, "cursor");
+    }
+  }
+  return null;
+}
 var DEFAULT_NATIVE_LINK_TOOL_DIALOG_LABELS = {
   title: "Add link",
   description: "Paste the link you want to add to the board.",
@@ -4774,6 +5268,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onLinkToolRequest,
   linkToolDialogLabels,
   onWorldPointerDown,
+  onRemotePresencePress,
   onWorldPointerMove,
   onWorldPointerLeave,
   onPlacementPreviewChange,
@@ -4797,6 +5292,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onLinkToolRequestRef.current = onLinkToolRequest;
   const onWorldPointerDownRef = react.useRef(onWorldPointerDown);
   onWorldPointerDownRef.current = onWorldPointerDown;
+  const onRemotePresencePressRef = react.useRef(onRemotePresencePress);
+  onRemotePresencePressRef.current = onRemotePresencePress;
   const onWorldPointerMoveRef = react.useRef(onWorldPointerMove);
   onWorldPointerMoveRef.current = onWorldPointerMove;
   const onWorldPointerLeaveRef = react.useRef(onWorldPointerLeave);
@@ -4817,6 +5314,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   itemsRef.current = items;
   const selectedIdsRef = react.useRef(selectedIds);
   selectedIdsRef.current = selectedIds;
+  const remotePresenceRef = react.useRef(remotePresence);
+  remotePresenceRef.current = remotePresence;
   const dragStateRef = react.useRef({ kind: "idle" });
   const [placementPreview, setPlacementPreviewState] = react.useState(null);
   const setRealtimePlacementPreview = react.useCallback(
@@ -4976,13 +5475,19 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       const sx = point.x;
       const sy = point.y;
       updateToolCursorPoint(point);
+      const cam = cameraRef.current;
+      if (!cam) return;
+      const remotePresenceHit = interactive && onRemotePresencePressRef.current ? hitTestNativeRemotePresence(remotePresenceRef.current, cam, point) : null;
+      if (remotePresenceHit) {
+        dragStateRef.current = { kind: "idle" };
+        onRemotePresencePressRef.current?.(remotePresenceHit);
+        return;
+      }
       if (!interactive) {
         dragStateRef.current = { kind: "pan" };
         return;
       }
       const tool = toolIdRef.current;
-      const cam = cameraRef.current;
-      if (!cam) return;
       const { worldX, worldY } = screenToWorld(sx, sy);
       onWorldPointerMoveRef.current?.({ x: worldX, y: worldY });
       if (tool === "hand") {
@@ -5828,9 +6333,9 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         transparent: true,
         visible: pendingNativeLinkRequest !== null,
         onRequestClose: closeNativeLinkDialog,
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.nativeLinkDialogBackdrop, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.nativeLinkDialogCard, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.nativeLinkDialogTitle, children: nativeLinkDialogLabels.title }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.nativeLinkDialogDescription, children: nativeLinkDialogLabels.description }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.nativeLinkDialogBackdrop, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.nativeLinkDialogCard, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.nativeLinkDialogTitle, children: nativeLinkDialogLabels.title }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.nativeLinkDialogDescription, children: nativeLinkDialogLabels.description }),
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TextInput,
             {
@@ -5842,21 +6347,21 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
               onSubmitEditing: submitNativeLinkDialog,
               placeholder: nativeLinkDialogLabels.inputPlaceholder,
               returnKeyType: "done",
-              style: styles3.nativeLinkDialogInput,
+              style: styles4.nativeLinkDialogInput,
               value: nativeLinkInputValue
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.nativeLinkDialogActions, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.nativeLinkDialogActions, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               reactNative.Pressable,
               {
                 accessibilityRole: "button",
                 onPress: closeNativeLinkDialog,
                 style: ({ pressed }) => [
-                  styles3.nativeLinkDialogButton,
-                  pressed ? styles3.nativeLinkDialogButtonPressed : void 0
+                  styles4.nativeLinkDialogButton,
+                  pressed ? styles4.nativeLinkDialogButtonPressed : void 0
                 ],
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.nativeLinkDialogButtonText, children: nativeLinkDialogLabels.cancelLabel })
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.nativeLinkDialogButtonText, children: nativeLinkDialogLabels.cancelLabel })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -5867,12 +6372,12 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
                 disabled: !nativeLinkCanSubmit,
                 onPress: submitNativeLinkDialog,
                 style: ({ pressed }) => [
-                  styles3.nativeLinkDialogButton,
-                  styles3.nativeLinkDialogPrimaryButton,
-                  pressed && nativeLinkCanSubmit ? styles3.nativeLinkDialogPrimaryButtonPressed : void 0,
-                  !nativeLinkCanSubmit ? styles3.nativeLinkDialogDisabledButton : void 0
+                  styles4.nativeLinkDialogButton,
+                  styles4.nativeLinkDialogPrimaryButton,
+                  pressed && nativeLinkCanSubmit ? styles4.nativeLinkDialogPrimaryButtonPressed : void 0,
+                  !nativeLinkCanSubmit ? styles4.nativeLinkDialogDisabledButton : void 0
                 ],
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.nativeLinkDialogPrimaryButtonText, children: nativeLinkDialogLabels.addLabel })
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.nativeLinkDialogPrimaryButtonText, children: nativeLinkDialogLabels.addLabel })
               }
             )
           ] })
@@ -5881,7 +6386,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     )
   ] });
 });
-var styles3 = reactNative.StyleSheet.create({
+var styles4 = reactNative.StyleSheet.create({
   nativeLinkDialogBackdrop: {
     flex: 1,
     alignItems: "center",
@@ -5971,6 +6476,7 @@ exports.DEFAULT_LINK_CARD_SIZE = DEFAULT_LINK_CARD_SIZE;
 exports.DEFAULT_NATIVE_OVERFLOW_TOOL_IDS = DEFAULT_NATIVE_OVERFLOW_TOOL_IDS;
 exports.DEFAULT_NATIVE_VECTOR_TOOLS = DEFAULT_NATIVE_VECTOR_TOOLS;
 exports.NATIVE_STYLE_PALETTE = NATIVE_STYLE_PALETTE;
+exports.NativeImagesMenu = NativeImagesMenu;
 exports.NativeInteractionOverlay = NativeInteractionOverlay;
 exports.NativeSceneRenderer = NativeSceneRenderer;
 exports.NativeShapeRenderer = NativeShapeRenderer;