canvu-react 0.4.35 → 0.4.37

package/dist/native.js

@@ -1,10 +1,8 @@
 import getStroke from 'perfect-freehand';
-import { Group, Canvas, Rect, Circle, Path, RoundedRect, Oval, DashPathEffect, Line, vec, matchFont, Text, Image } from '@shopify/react-native-skia';
+import { Group, Canvas, Rect, Circle, Path, RoundedRect, Oval, DashPathEffect, Line, vec, matchFont, Text as Text$1, Image } from '@shopify/react-native-skia';
 import { memo, forwardRef, useState, useRef, useCallback, useEffect, useMemo, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { StyleSheet, PanResponder, View, Pressable, Text as Text$1, ScrollView } from 'react-native';
-
-// src/scene/shape-builders.ts
+import { StyleSheet, PanResponder, View, Modal, Text, TextInput, Pressable, ScrollView } from 'react-native';
 
 // src/math/rect.ts
 function rectsIntersect(a, b) {
@@ -22,12 +20,36 @@ function normalizeRect(r) {
 }
 
 // src/scene/custom-shape.ts
+function expandCustomShapeTemplate(template, width, height) {
+  return template.replace(/\{\{w\}\}/g, String(width)).replace(/\{\{h\}\}/g, String(height)).replace(/\{\{width\}\}/g, String(width)).replace(/\{\{height\}\}/g, String(height));
+}
+function resolveCustomInner(content, size) {
+  if ("render" in content) {
+    return content.render(size);
+  }
+  return expandCustomShapeTemplate(content.svg, size.width, size.height);
+}
 function buildCustomShapeChildrenSvg(inner, intrinsic, bounds) {
   const b = normalizeRect(bounds);
   const sx = b.width / intrinsic.width;
   const sy = b.height / intrinsic.height;
   return `<g transform="scale(${sx},${sy})">${inner}</g>`;
 }
+function createCustomShapeItem(id, bounds, content) {
+  const r = normalizeRect(bounds);
+  const intrinsic = { width: r.width, height: r.height };
+  const inner = resolveCustomInner(content, intrinsic);
+  return {
+    id,
+    x: r.x,
+    y: r.y,
+    bounds: { ...r },
+    toolKind: "custom",
+    customIntrinsicSize: intrinsic,
+    customInnerSvg: inner,
+    childrenSvg: buildCustomShapeChildrenSvg(inner, intrinsic, r)
+  };
+}
 
 // src/scene/link-item.ts
 var LINK_PLUGIN_KEY = "canvuLink";
@@ -140,6 +162,9 @@ function getLinkData(item) {
   const entry = item.pluginData?.[LINK_PLUGIN_KEY];
   return isCanvuLinkData(entry) ? entry : null;
 }
+function isLinkItem(item) {
+  return getLinkData(item) != null;
+}
 function rebuildLinkItemSvg(item) {
   const link = getLinkData(item);
   if (!link) return item;
@@ -173,6 +198,26 @@ function rebuildLinkItemSvg(item) {
     childrenSvg: buildLinkCardSvg(width, height, link)
   };
 }
+function createLinkItem(id, bounds, link) {
+  const width = bounds.width || DEFAULT_LINK_CARD_WIDTH;
+  const height = bounds.height || DEFAULT_LINK_CARD_HEIGHT;
+  const item = createCustomShapeItem(
+    id,
+    { ...bounds, width, height },
+    { render: (size) => buildLinkCardSvg(size.width, size.height, link) }
+  );
+  return rebuildLinkItemSvg({
+    ...item,
+    pluginData: {
+      ...item.pluginData ?? {},
+      [LINK_PLUGIN_KEY]: link
+    }
+  });
+}
+var DEFAULT_LINK_CARD_SIZE = {
+  width: DEFAULT_LINK_CARD_WIDTH,
+  height: DEFAULT_LINK_CARD_HEIGHT
+};
 
 // src/scene/text-svg.ts
 function escapeSvgTextContent(s) {
@@ -1398,6 +1443,50 @@ function smoothFreehandPointsToPathD(points) {
   d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
   return d;
 }
+
+// src/native/native-link-card.ts
+function linkHostname(href) {
+  try {
+    return new URL(href).hostname.replace(/^www\./, "");
+  } catch {
+    return href;
+  }
+}
+function linkProtocol(href) {
+  try {
+    return new URL(href).protocol;
+  } catch {
+    return "";
+  }
+}
+function linkInitial(value) {
+  const first = value.trim().charAt(0).toUpperCase();
+  return first || "L";
+}
+function normalizeNativeLinkHref(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed)) return trimmed;
+  return `https://${trimmed}`;
+}
+function buildNativeLinkCardDisplay(link) {
+  const hostname = linkHostname(link.href);
+  const title = link.title?.trim() || hostname || "Link";
+  return {
+    title,
+    subtitle: hostname || link.href,
+    initial: linkInitial(hostname || title),
+    secure: linkProtocol(link.href) === "https:"
+  };
+}
+function createNativeLinkCardBoundsAtPoint(point) {
+  return {
+    x: point.x - DEFAULT_LINK_CARD_SIZE.width / 2,
+    y: point.y - DEFAULT_LINK_CARD_SIZE.height / 2,
+    width: DEFAULT_LINK_CARD_SIZE.width,
+    height: DEFAULT_LINK_CARD_SIZE.height
+  };
+}
 var DEFAULT_NATIVE_IMAGE_CACHE_MAX_ENTRIES = 96;
 function disposeCachedImage(image) {
   try {
@@ -1757,7 +1846,7 @@ function SvgNodeItem({ node }) {
       const fs = node.fontSize != null ? toNum(node.fontSize) : 16;
       const font = matchFont({ fontSize: fs });
       return /* @__PURE__ */ jsx(Fragment, { children: node.children.map((tspan, i) => /* @__PURE__ */ jsx(
-        Text,
+        Text$1,
         {
           x: tspan.x != null ? toNum(tspan.x) : node.x != null ? toNum(node.x) : 0,
           y: tspan.dy != null ? (node.y != null ? toNum(node.y) : fs) + toNum(tspan.dy) : (node.y != null ? toNum(node.y) : fs) + i * fs * 1.2,
@@ -2087,7 +2176,119 @@ function localBounds(bounds) {
   const b = normalizeRect(bounds);
   return { w: Math.max(0, b.width), h: Math.max(0, b.height) };
 }
+function truncateText(value, maxChars) {
+  if (value.length <= maxChars) return value;
+  return `${value.slice(0, Math.max(0, maxChars - 3)).trimEnd()}...`;
+}
+function NativeLinkCardRenderer({
+  item,
+  link
+}) {
+  const bounds = normalizeRect(item.bounds);
+  const scaleX = Math.max(0.01, bounds.width / DEFAULT_LINK_CARD_SIZE.width);
+  const scaleY = Math.max(0.01, bounds.height / DEFAULT_LINK_CARD_SIZE.height);
+  const display = buildNativeLinkCardDisplay(link);
+  const titleFont = matchFont({ fontSize: 14.5, fontWeight: "700" });
+  const subtitleFont = matchFont({ fontSize: 12.5 });
+  const initialFont = matchFont({ fontSize: 17, fontWeight: "700" });
+  const title = truncateText(display.title, 28);
+  const subtitle = truncateText(display.subtitle, display.secure ? 28 : 31);
+  const subtitleX = display.secure ? 82 : 69;
+  const subtitleWidth = display.secure ? 188 : 201;
+  return /* @__PURE__ */ jsxs(Group, { transform: [{ scaleX }, { scaleY }], children: [
+    /* @__PURE__ */ jsx(
+      RoundedRect,
+      {
+        x: 0,
+        y: 0,
+        width: DEFAULT_LINK_CARD_SIZE.width,
+        height: DEFAULT_LINK_CARD_SIZE.height,
+        r: 16,
+        color: "#ffffff",
+        style: "fill",
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RoundedRect,
+      {
+        x: 0.5,
+        y: 0.5,
+        width: DEFAULT_LINK_CARD_SIZE.width - 1,
+        height: DEFAULT_LINK_CARD_SIZE.height - 1,
+        r: 15.5,
+        color: "#dfe4ea",
+        style: "stroke",
+        strokeWidth: 1,
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RoundedRect,
+      {
+        x: 14,
+        y: 14,
+        width: 42,
+        height: 42,
+        r: 11,
+        color: "#315bd6",
+        style: "fill",
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text$1,
+      {
+        x: 29.5,
+        y: 41,
+        text: display.initial,
+        color: "#ffffff",
+        font: initialFont
+      }
+    ),
+    /* @__PURE__ */ jsx(Group, { clip: { x: 69, y: 13, width: 215, height: 24 }, children: /* @__PURE__ */ jsx(Text$1, { x: 69, y: 32, text: title, color: "#1f2937", font: titleFont }) }),
+    display.secure ? /* @__PURE__ */ jsxs(Group, { transform: [{ translateX: 69 }, { translateY: 41 }], children: [
+      /* @__PURE__ */ jsx(
+        Rect,
+        {
+          x: 1.5,
+          y: 4.5,
+          width: 7,
+          height: 6,
+          color: "#6b7280",
+          style: "stroke",
+          strokeWidth: 1.3
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Path,
+        {
+          path: "M3 4.5 V3 a2 2 0 0 1 4 0 v1.5",
+          color: "#6b7280",
+          style: "stroke",
+          strokeWidth: 1.3,
+          strokeCap: "round",
+          strokeJoin: "round"
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx(Group, { clip: { x: subtitleX, y: 34, width: subtitleWidth, height: 22 }, children: /* @__PURE__ */ jsx(
+      Text$1,
+      {
+        x: subtitleX,
+        y: 51,
+        text: subtitle,
+        color: "#6b7280",
+        font: subtitleFont
+      }
+    ) })
+  ] });
+}
 function NativeShapeRenderer({ item }) {
+  const link = getLinkData(item);
+  if (link) {
+    return /* @__PURE__ */ jsx(NativeLinkCardRenderer, { item, link });
+  }
   const style = resolveStrokeStyle(item);
   const k = item.toolKind;
   if (k === "rect") {
@@ -2220,7 +2421,7 @@ function NativeShapeRenderer({ item }) {
     const lines = item.text.split("\n");
     const font = matchFont({ fontSize: fs });
     return /* @__PURE__ */ jsx(Fragment, { children: lines.map((line, i) => /* @__PURE__ */ jsx(
-      Text,
+      Text$1,
       {
         x: 0,
         y: fs + i * fs * 1.2,
@@ -2966,7 +3167,7 @@ function NativeInteractionOverlay({
           }
         ),
         peer.displayName ? /* @__PURE__ */ jsx(
-          Text,
+          Text$1,
           {
             x: cursor.x + labelOffsetX,
             y: cursor.y + labelOffsetY,
@@ -3240,7 +3441,7 @@ function RangeControl({
         ]
       }
     ),
-    valueLabel ? /* @__PURE__ */ jsx(Text$1, { style: styles.rangeValue, children: valueLabel }) : null
+    valueLabel ? /* @__PURE__ */ jsx(Text, { style: styles.rangeValue, children: valueLabel }) : null
   ] });
 }
 function InspectorSection({
@@ -3248,7 +3449,7 @@ function InspectorSection({
   children
 }) {
   return /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
-    /* @__PURE__ */ jsx(Text$1, { style: styles.sectionLabel, children: label }),
+    /* @__PURE__ */ jsx(Text, { style: styles.sectionLabel, children: label }),
     children
   ] });
 }
@@ -3270,7 +3471,7 @@ function SegmentControl({
         children: [
           segment.preview,
           /* @__PURE__ */ jsx(
-            Text$1,
+            Text,
             {
               style: [
                 styles.segmentLabel,
@@ -3510,9 +3711,14 @@ var DEFAULT_NATIVE_OVERFLOW_TOOL_IDS = [
   "line",
   "marker",
   "laser",
-  "image"
+  "image",
+  "link"
 ];
 var CLOUD_TOOL_ICON_PATH = "M17.5 19H8.5a6.5 6.5 0 1 1 6.17-8.55A4.75 4.75 0 0 1 17.5 9.5a4.75 4.75 0 0 1 0 9.5Z";
+var LINK_TOOL_ICON_PATHS = [
+  "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+  "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+];
 function NativeCloudToolIcon({
   color,
   size = 19,
@@ -3531,6 +3737,25 @@ function NativeCloudToolIcon({
     }
   ) }) });
 }
+function NativeLinkToolIcon({
+  color,
+  size = 20,
+  strokeWidth = 2.4
+}) {
+  const scale = size / 24;
+  return /* @__PURE__ */ jsx(Canvas, { style: { width: size, height: size }, children: /* @__PURE__ */ jsx(Group, { transform: [{ scale }], children: LINK_TOOL_ICON_PATHS.map((path) => /* @__PURE__ */ jsx(
+    Path,
+    {
+      path,
+      color,
+      style: "stroke",
+      strokeWidth,
+      strokeCap: "round",
+      strokeJoin: "round"
+    },
+    path
+  )) }) });
+}
 var DEFAULT_NATIVE_VECTOR_TOOLS = [
   { id: "hand", label: "Hand", shortcutHint: "H", shortLabel: "H" },
   { id: "select", label: "Select", shortcutHint: "V", shortLabel: "V" },
@@ -3568,7 +3793,8 @@ var DEFAULT_NATIVE_VECTOR_TOOLS = [
     shortLabel: "E"
   },
   { id: "text", label: "Text", shortcutHint: "T", shortLabel: "T" },
-  { id: "image", label: "File", shortcutHint: "I", shortLabel: "I" }
+  { id: "image", label: "File", shortcutHint: "I", shortLabel: "I" },
+  { id: "link", label: "Link", shortcutHint: "N", shortLabel: "L" }
 ];
 function splitToolbarTools(tools, overflowToolIds) {
   const overflowIds = new Set(overflowToolIds);
@@ -3691,7 +3917,7 @@ function NativeVectorToolbar({
                       disabled: toolLockDisabled,
                       foregroundColor: "#18181b",
                       onToggle: toggleToolLock
-                    }) ?? /* @__PURE__ */ jsx(Text$1, { style: styles2.lockGlyph, children: toolLocked ? "L" : "U" })
+                    }) ?? /* @__PURE__ */ jsx(Text, { style: styles2.lockGlyph, children: toolLocked ? "L" : "U" })
                   }
                 ),
                 /* @__PURE__ */ jsx(View, { style: styles2.toolLockDivider })
@@ -3738,8 +3964,8 @@ function NativeVectorToolbar({
                       disabled,
                       foregroundColor: "#18181b",
                       onSelect: () => onChange(activeOverflowTool.id)
-                    }) ?? renderNativeToolFallback(activeOverflowTool, "#18181b") : renderOverflowIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsx(Text$1, { style: styles2.shapesGlyph, children: "S" }) }),
-                    renderOverflowChevronIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsx(Text$1, { style: styles2.chevronGlyph, children: overflowOpen ? "^" : "v" })
+                    }) ?? renderNativeToolFallback(activeOverflowTool, "#18181b") : renderOverflowIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsx(Text, { style: styles2.shapesGlyph, children: "S" }) }),
+                    renderOverflowChevronIcon?.(overflowRenderInput) ?? /* @__PURE__ */ jsx(Text, { style: styles2.chevronGlyph, children: overflowOpen ? "^" : "v" })
                   ]
                 }
               ) : null
@@ -3809,7 +4035,7 @@ function renderNativeToolButton(input) {
       children: [
         /* @__PURE__ */ jsx(View, { style: styles2.iconSlot, children: icon }),
         input.density === "comfortable" ? /* @__PURE__ */ jsx(
-          Text$1,
+          Text,
           {
             numberOfLines: 1,
             style: [
@@ -3830,7 +4056,10 @@ function renderNativeToolFallback(tool, foregroundColor, toolLabelStyle) {
   if (tool.id === "architectural-cloud") {
     return /* @__PURE__ */ jsx(NativeCloudToolIcon, { color: foregroundColor });
   }
-  return /* @__PURE__ */ jsx(Text$1, { style: [styles2.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
+  if (tool.id === "link") {
+    return /* @__PURE__ */ jsx(NativeLinkToolIcon, { color: foregroundColor });
+  }
+  return /* @__PURE__ */ jsx(Text, { style: [styles2.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
 }
 var styles2 = StyleSheet.create({
   shell: {
@@ -4428,6 +4657,13 @@ function resizeItemByHandle(item, start, handle, currentWorld) {
   }
   return { ...item, x: nb.x, y: nb.y, bounds: nb };
 }
+var DEFAULT_NATIVE_LINK_TOOL_DIALOG_LABELS = {
+  title: "Add link",
+  description: "Paste the link you want to add to the board.",
+  inputPlaceholder: "https://example.com",
+  cancelLabel: "Cancel",
+  addLabel: "Add"
+};
 var MIN_PLACE_SIZE = 8;
 var MIN_ARROW_DRAG_PX = 8;
 var TAP_PX = 20;
@@ -4510,6 +4746,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onSelectionChange,
   onItemsChange,
   onToolChangeRequest,
+  onLinkToolRequest,
+  linkToolDialogLabels,
   onWorldPointerDown,
   onWorldPointerMove,
   onWorldPointerLeave,
@@ -4529,6 +4767,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   toolLockedRef.current = toolLocked;
   const onToolChangeRequestRef = useRef(onToolChangeRequest);
   onToolChangeRequestRef.current = onToolChangeRequest;
+  const onLinkToolRequestRef = useRef(onLinkToolRequest);
+  onLinkToolRequestRef.current = onLinkToolRequest;
   const onWorldPointerDownRef = useRef(onWorldPointerDown);
   onWorldPointerDownRef.current = onWorldPointerDown;
   const onWorldPointerMoveRef = useRef(onWorldPointerMove);
@@ -4562,6 +4802,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   );
   const [eraserTrail, setEraserTrail] = useState([]);
   const [laserTrail, setLaserTrail] = useState([]);
+  const [pendingNativeLinkRequest, setPendingNativeLinkRequest] = useState(null);
+  const [nativeLinkInputValue, setNativeLinkInputValue] = useState("");
   const laserClearTimerRef = useRef(null);
   const strokeStyleRef = useRef({ ...DEFAULT_STROKE_STYLE });
   const markerStrokeStyleRef = useRef({ ...MARKER_TOOL_STYLE });
@@ -4639,6 +4881,21 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       onToolChangeRequestRef.current?.("select");
     }
   }, []);
+  const requestSelectToolAfterNativeLinkUse = useCallback(() => {
+    onToolChangeRequestRef.current?.("select");
+  }, []);
+  const closeNativeLinkDialog = useCallback(() => {
+    setPendingNativeLinkRequest(null);
+    setNativeLinkInputValue("");
+  }, []);
+  const submitNativeLinkDialog = useCallback(() => {
+    const href = normalizeNativeLinkHref(nativeLinkInputValue);
+    if (!href || !pendingNativeLinkRequest) return;
+    const inserted = pendingNativeLinkRequest.insertLink({ href });
+    if (inserted) {
+      closeNativeLinkDialog();
+    }
+  }, [closeNativeLinkDialog, nativeLinkInputValue, pendingNativeLinkRequest]);
   if (!cameraRef.current) {
     cameraRef.current = new Camera2D({ minZoom: 0.05, maxZoom: 32 });
   }
@@ -4871,7 +5128,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         });
         return;
       }
-      if (tool === "note" || tool === "text") {
+      if (tool === "link" || tool === "note" || tool === "text") {
         dragStateRef.current = {
           kind: "tap",
           tool,
@@ -5207,6 +5464,43 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         const screenDy = point.y - st.startScreen.y;
         if (Math.hypot(screenDx, screenDy) > TAP_PX) return;
         const change = onItemsChangeRef.current;
+        if (st.tool === "link") {
+          const suggestedBounds = createNativeLinkCardBoundsAtPoint(st.startWorld);
+          const insertLink = (link, options = {}) => {
+            const currentChange = onItemsChangeRef.current;
+            if (!currentChange) return null;
+            const id = options.id ?? createShapeId();
+            const item = createLinkItem(id, options.bounds ?? suggestedBounds, link);
+            currentChange([...itemsRef.current, item]);
+            onSelectionChangeRef.current?.([id]);
+            requestSelectToolAfterNativeLinkUse();
+            return item;
+          };
+          const requestLink = onLinkToolRequestRef.current;
+          if (requestLink) {
+            requestLink({
+              toolId: "link",
+              worldX: st.startWorld.x,
+              worldY: st.startWorld.y,
+              screenX: st.startScreen.x,
+              screenY: st.startScreen.y,
+              suggestedBounds,
+              insertLink
+            });
+            return;
+          }
+          setNativeLinkInputValue("");
+          setPendingNativeLinkRequest({
+            toolId: "link",
+            worldX: st.startWorld.x,
+            worldY: st.startWorld.y,
+            screenX: st.startScreen.x,
+            screenY: st.startScreen.y,
+            suggestedBounds,
+            insertLink
+          });
+          return;
+        }
         if (!change) return;
         if (st.tool === "text") {
           const id = createShapeId();
@@ -5254,6 +5548,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       dragStateRef.current = { kind: "idle" };
     },
     [
+      requestSelectToolAfterNativeLinkUse,
       requestSelectToolAfterUse,
       screenToWorld,
       setRealtimePlacementPreview,
@@ -5385,7 +5680,13 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     [requestRender, size]
   );
   const activeStyleToolId = toolId === "draw" || toolId === "marker" ? toolId : null;
-  return /* @__PURE__ */ jsx(
+  const nativeLinkDialogLabels = {
+    ...DEFAULT_NATIVE_LINK_TOOL_DIALOG_LABELS,
+    ...linkToolDialogLabels ?? {}
+  };
+  const normalizedNativeLinkHref = normalizeNativeLinkHref(nativeLinkInputValue);
+  const nativeLinkCanSubmit = pendingNativeLinkRequest !== null && normalizedNativeLinkHref !== null && onItemsChange != null;
+  return /* @__PURE__ */ jsxs(
     View,
     {
       style: { flex: 1, overflow: "hidden" },
@@ -5399,81 +5700,226 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         notifyWorldPointerLeave();
       },
       ...panResponder.panHandlers,
-      children: size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: [
+        size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            NativeSceneRenderer,
+            {
+              items: sceneItems,
+              camera,
+              width: size.width,
+              height: size.height
+            }
+          ),
+          interactive && /* @__PURE__ */ jsx(
+            NativeInteractionOverlay,
+            {
+              camera,
+              width: size.width,
+              height: size.height,
+              selectedItems,
+              showResizeHandles,
+              placementPreview,
+              laserTrail,
+              eraserTrail,
+              eraserPreviewItems: items.filter(
+                (it) => eraserPreviewIds.includes(it.id)
+              ),
+              previewStrokeStyle: strokeStyleState,
+              remotePresence
+            }
+          ),
+          interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(
+            View,
+            {
+              pointerEvents: "box-none",
+              style: styleInspectorPlacement === "top-left" ? {
+                position: "absolute",
+                left: 16,
+                top: 104,
+                alignItems: "flex-start"
+              } : {
+                position: "absolute",
+                left: 16,
+                right: 16,
+                bottom: 84,
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ jsx(
+                NativeVectorStyleInspector,
+                {
+                  toolId: activeStyleToolId,
+                  value: strokeStyleState,
+                  onChange: patchCurrentStrokeStyle
+                }
+              )
+            }
+          ) : null,
+          toolbar && /* @__PURE__ */ jsx(
+            View,
+            {
+              style: {
+                position: "absolute",
+                bottom: 16,
+                left: 16,
+                right: 16,
+                flexDirection: "row",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              pointerEvents: "box-none",
+              children: toolbar
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
-          NativeSceneRenderer,
-          {
-            items: sceneItems,
-            camera,
-            width: size.width,
-            height: size.height
-          }
-        ),
-        interactive && /* @__PURE__ */ jsx(
-          NativeInteractionOverlay,
-          {
-            camera,
-            width: size.width,
-            height: size.height,
-            selectedItems,
-            showResizeHandles,
-            placementPreview,
-            laserTrail,
-            eraserTrail,
-            eraserPreviewItems: items.filter(
-              (it) => eraserPreviewIds.includes(it.id)
-            ),
-            previewStrokeStyle: strokeStyleState,
-            remotePresence
-          }
-        ),
-        interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(
-          View,
+          Modal,
           {
-            pointerEvents: "box-none",
-            style: styleInspectorPlacement === "top-left" ? {
-              position: "absolute",
-              left: 16,
-              top: 104,
-              alignItems: "flex-start"
-            } : {
-              position: "absolute",
-              left: 16,
-              right: 16,
-              bottom: 84,
-              alignItems: "center"
-            },
-            children: /* @__PURE__ */ jsx(
-              NativeVectorStyleInspector,
-              {
-                toolId: activeStyleToolId,
-                value: strokeStyleState,
-                onChange: patchCurrentStrokeStyle
-              }
-            )
-          }
-        ) : null,
-        toolbar && /* @__PURE__ */ jsx(
-          View,
-          {
-            style: {
-              position: "absolute",
-              bottom: 16,
-              left: 16,
-              right: 16,
-              flexDirection: "row",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            pointerEvents: "box-none",
-            children: toolbar
+            animationType: "fade",
+            transparent: true,
+            visible: pendingNativeLinkRequest !== null,
+            onRequestClose: closeNativeLinkDialog,
+            children: /* @__PURE__ */ jsx(View, { style: styles3.nativeLinkDialogBackdrop, children: /* @__PURE__ */ jsxs(View, { style: styles3.nativeLinkDialogCard, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogTitle, children: nativeLinkDialogLabels.title }),
+              /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogDescription, children: nativeLinkDialogLabels.description }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  accessibilityLabel: nativeLinkDialogLabels.title,
+                  autoCapitalize: "none",
+                  autoCorrect: false,
+                  keyboardType: "url",
+                  onChangeText: setNativeLinkInputValue,
+                  onSubmitEditing: submitNativeLinkDialog,
+                  placeholder: nativeLinkDialogLabels.inputPlaceholder,
+                  returnKeyType: "done",
+                  style: styles3.nativeLinkDialogInput,
+                  value: nativeLinkInputValue
+                }
+              ),
+              /* @__PURE__ */ jsxs(View, { style: styles3.nativeLinkDialogActions, children: [
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    onPress: closeNativeLinkDialog,
+                    style: ({ pressed }) => [
+                      styles3.nativeLinkDialogButton,
+                      pressed ? styles3.nativeLinkDialogButtonPressed : void 0
+                    ],
+                    children: /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogButtonText, children: nativeLinkDialogLabels.cancelLabel })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityState: { disabled: !nativeLinkCanSubmit },
+                    disabled: !nativeLinkCanSubmit,
+                    onPress: submitNativeLinkDialog,
+                    style: ({ pressed }) => [
+                      styles3.nativeLinkDialogButton,
+                      styles3.nativeLinkDialogPrimaryButton,
+                      pressed && nativeLinkCanSubmit ? styles3.nativeLinkDialogPrimaryButtonPressed : void 0,
+                      !nativeLinkCanSubmit ? styles3.nativeLinkDialogDisabledButton : void 0
+                    ],
+                    children: /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogPrimaryButtonText, children: nativeLinkDialogLabels.addLabel })
+                  }
+                )
+              ] })
+            ] }) })
           }
         )
-      ] })
+      ]
     }
   );
 });
+var styles3 = StyleSheet.create({
+  nativeLinkDialogBackdrop: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 24,
+    backgroundColor: "rgba(0, 0, 0, 0.45)"
+  },
+  nativeLinkDialogCard: {
+    width: "100%",
+    maxWidth: 480,
+    padding: 24,
+    borderRadius: 16,
+    backgroundColor: "#ffffff",
+    shadowColor: "#000000",
+    shadowOpacity: 0.18,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 12
+  },
+  nativeLinkDialogTitle: {
+    color: "#111827",
+    fontSize: 24,
+    fontWeight: "700",
+    lineHeight: 30
+  },
+  nativeLinkDialogDescription: {
+    marginTop: 12,
+    color: "#6b7280",
+    fontSize: 16,
+    lineHeight: 22
+  },
+  nativeLinkDialogInput: {
+    marginTop: 24,
+    height: 52,
+    paddingHorizontal: 14,
+    borderRadius: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#d1d5db",
+    color: "#111827",
+    fontSize: 18,
+    backgroundColor: "#ffffff"
+  },
+  nativeLinkDialogActions: {
+    marginTop: 24,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 12
+  },
+  nativeLinkDialogButton: {
+    minWidth: 92,
+    height: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#d1d5db",
+    backgroundColor: "#ffffff",
+    paddingHorizontal: 18
+  },
+  nativeLinkDialogButtonPressed: {
+    backgroundColor: "#f3f4f6"
+  },
+  nativeLinkDialogButtonText: {
+    color: "#111827",
+    fontSize: 17,
+    fontWeight: "600"
+  },
+  nativeLinkDialogPrimaryButton: {
+    borderColor: "#18181b",
+    backgroundColor: "#18181b"
+  },
+  nativeLinkDialogPrimaryButtonPressed: {
+    backgroundColor: "#27272a"
+  },
+  nativeLinkDialogDisabledButton: {
+    borderColor: "#9ca3af",
+    backgroundColor: "#9ca3af"
+  },
+  nativeLinkDialogPrimaryButtonText: {
+    color: "#ffffff",
+    fontSize: 17,
+    fontWeight: "700"
+  }
+});
 
-export { DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorStyleInspector, NativeVectorToolbar, NativeVectorViewport, createFreehandStrokeItem, createImageItem, createShapeId, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { DEFAULT_LINK_CARD_SIZE, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorStyleInspector, NativeVectorToolbar, NativeVectorViewport, createFreehandStrokeItem, createImageItem, createLinkItem, createShapeId, getLinkData, isLinkItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
 //# sourceMappingURL=native.js.map
 //# sourceMappingURL=native.js.map