canvu-react 0.4.36 → 0.4.37

package/dist/native.d.cts

@@ -226,13 +226,25 @@ type NativeLinkToolInsertOptions = {
     readonly id?: string;
     readonly bounds?: Rect;
 };
+/**
+ * Copy used by the built-in native link dialog.
+ *
+ * Pass this only when you need localized or product-specific text. Omit it for
+ * the default plug-and-play `"link"` tool flow.
+ */
+type NativeLinkToolDialogLabels = {
+    readonly title?: string;
+    readonly description?: string;
+    readonly inputPlaceholder?: string;
+    readonly cancelLabel?: string;
+    readonly addLabel?: string;
+};
 /**
  * Detail passed when the built-in native `"link"` tool receives a tap.
  *
- * This is the high-level native integration point: show an app-native URL
- * dialog, then call {@link NativeLinkToolRequestDetail.insertLink} with the
- * submitted link metadata. Use `onWorldPointerDown` only for fully custom tools
- * or when you do not want canvu to insert the card.
+ * The default flow shows canvu's built-in URL dialog and inserts the card after
+ * submit. Use this detail only when overriding that dialog through
+ * `onLinkToolRequest`.
  *
  * @example
  * ```tsx
@@ -266,13 +278,14 @@ type NativeVectorViewportProps = {
     readonly onItemsChange?: (items: VectorSceneItem[]) => void;
     readonly onToolChangeRequest?: (toolId: string) => void;
     /**
-     * Called after the built-in native `"link"` tool is tapped on the canvas.
+     * Optional override for the built-in native link dialog.
      *
-     * Use this to open your app's native modal or sheet for URL entry. Call
-     * `detail.insertLink(...)` after the user confirms to append and select the
-     * link card at the tapped world point.
+     * Omit this for the plug-and-play first-party link tool. When supplied,
+     * canvu will not show its default dialog; your app is responsible for
+     * calling `detail.insertLink(...)`.
      */
     readonly onLinkToolRequest?: (detail: NativeLinkToolRequestDetail) => void;
+    readonly linkToolDialogLabels?: NativeLinkToolDialogLabels;
     readonly onWorldPointerDown?: (detail: NativeWorldPointerDownDetail) => void;
     readonly onWorldPointerMove?: (world: {
         readonly x: number;
@@ -419,4 +432,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };

package/dist/native.d.ts

@@ -226,13 +226,25 @@ type NativeLinkToolInsertOptions = {
     readonly id?: string;
     readonly bounds?: Rect;
 };
+/**
+ * Copy used by the built-in native link dialog.
+ *
+ * Pass this only when you need localized or product-specific text. Omit it for
+ * the default plug-and-play `"link"` tool flow.
+ */
+type NativeLinkToolDialogLabels = {
+    readonly title?: string;
+    readonly description?: string;
+    readonly inputPlaceholder?: string;
+    readonly cancelLabel?: string;
+    readonly addLabel?: string;
+};
 /**
  * Detail passed when the built-in native `"link"` tool receives a tap.
  *
- * This is the high-level native integration point: show an app-native URL
- * dialog, then call {@link NativeLinkToolRequestDetail.insertLink} with the
- * submitted link metadata. Use `onWorldPointerDown` only for fully custom tools
- * or when you do not want canvu to insert the card.
+ * The default flow shows canvu's built-in URL dialog and inserts the card after
+ * submit. Use this detail only when overriding that dialog through
+ * `onLinkToolRequest`.
  *
  * @example
  * ```tsx
@@ -266,13 +278,14 @@ type NativeVectorViewportProps = {
     readonly onItemsChange?: (items: VectorSceneItem[]) => void;
     readonly onToolChangeRequest?: (toolId: string) => void;
     /**
-     * Called after the built-in native `"link"` tool is tapped on the canvas.
+     * Optional override for the built-in native link dialog.
      *
-     * Use this to open your app's native modal or sheet for URL entry. Call
-     * `detail.insertLink(...)` after the user confirms to append and select the
-     * link card at the tapped world point.
+     * Omit this for the plug-and-play first-party link tool. When supplied,
+     * canvu will not show its default dialog; your app is responsible for
+     * calling `detail.insertLink(...)`.
      */
     readonly onLinkToolRequest?: (detail: NativeLinkToolRequestDetail) => void;
+    readonly linkToolDialogLabels?: NativeLinkToolDialogLabels;
     readonly onWorldPointerDown?: (detail: NativeWorldPointerDownDetail) => void;
     readonly onWorldPointerMove?: (world: {
         readonly x: number;
@@ -419,4 +432,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };

package/dist/native.js

@@ -1,8 +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';
+import { StyleSheet, PanResponder, View, Modal, Text, TextInput, Pressable, ScrollView } from 'react-native';
 
 // src/math/rect.ts
 function rectsIntersect(a, b) {
@@ -1463,6 +1463,12 @@ 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";
@@ -1840,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,
@@ -2231,7 +2237,7 @@ function NativeLinkCardRenderer({
       }
     ),
     /* @__PURE__ */ jsx(
-      Text,
+      Text$1,
       {
         x: 29.5,
         y: 41,
@@ -2240,7 +2246,7 @@ function NativeLinkCardRenderer({
         font: initialFont
       }
     ),
-    /* @__PURE__ */ jsx(Group, { clip: { x: 69, y: 13, width: 215, height: 24 }, children: /* @__PURE__ */ jsx(Text, { x: 69, y: 32, text: title, color: "#1f2937", font: titleFont }) }),
+    /* @__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,
@@ -2267,7 +2273,7 @@ function NativeLinkCardRenderer({
       )
     ] }) : null,
     /* @__PURE__ */ jsx(Group, { clip: { x: subtitleX, y: 34, width: subtitleWidth, height: 22 }, children: /* @__PURE__ */ jsx(
-      Text,
+      Text$1,
       {
         x: subtitleX,
         y: 51,
@@ -2415,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,
@@ -3161,7 +3167,7 @@ function NativeInteractionOverlay({
           }
         ),
         peer.displayName ? /* @__PURE__ */ jsx(
-          Text,
+          Text$1,
           {
             x: cursor.x + labelOffsetX,
             y: cursor.y + labelOffsetY,
@@ -3435,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({
@@ -3443,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
   ] });
 }
@@ -3465,7 +3471,7 @@ function SegmentControl({
         children: [
           segment.preview,
           /* @__PURE__ */ jsx(
-            Text$1,
+            Text,
             {
               style: [
                 styles.segmentLabel,
@@ -3911,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 })
@@ -3958,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
@@ -4029,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: [
@@ -4053,7 +4059,7 @@ function renderNativeToolFallback(tool, foregroundColor, toolLabelStyle) {
   if (tool.id === "link") {
     return /* @__PURE__ */ jsx(NativeLinkToolIcon, { color: foregroundColor });
   }
-  return /* @__PURE__ */ jsx(Text$1, { style: [styles2.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
+  return /* @__PURE__ */ jsx(Text, { style: [styles2.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
 }
 var styles2 = StyleSheet.create({
   shell: {
@@ -4651,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;
@@ -4734,6 +4747,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onItemsChange,
   onToolChangeRequest,
   onLinkToolRequest,
+  linkToolDialogLabels,
   onWorldPointerDown,
   onWorldPointerMove,
   onWorldPointerLeave,
@@ -4788,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 });
@@ -4865,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 });
   }
@@ -5442,7 +5473,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
             const item = createLinkItem(id, options.bounds ?? suggestedBounds, link);
             currentChange([...itemsRef.current, item]);
             onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
+            requestSelectToolAfterNativeLinkUse();
             return item;
           };
           const requestLink = onLinkToolRequestRef.current;
@@ -5458,17 +5489,16 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
             });
             return;
           }
-          const handleWorldPointerDown = onWorldPointerDownRef.current;
-          if (handleWorldPointerDown) {
-            handleWorldPointerDown({
-              toolId: "link",
-              worldX: st.startWorld.x,
-              worldY: st.startWorld.y,
-              screenX: st.startScreen.x,
-              screenY: st.startScreen.y
-            });
-            requestSelectToolAfterUse();
-          }
+          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;
@@ -5518,6 +5548,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       dragStateRef.current = { kind: "idle" };
     },
     [
+      requestSelectToolAfterNativeLinkUse,
       requestSelectToolAfterUse,
       screenToWorld,
       setRealtimePlacementPreview,
@@ -5649,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" },
@@ -5663,80 +5700,225 @@ 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_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