canvu-react 0.4.36 → 0.4.37

package/dist/native.cjs

@@ -1469,6 +1469,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";
@@ -4657,6 +4663,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;
@@ -4740,6 +4753,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onItemsChange,
   onToolChangeRequest,
   onLinkToolRequest,
+  linkToolDialogLabels,
   onWorldPointerDown,
   onWorldPointerMove,
   onWorldPointerLeave,
@@ -4794,6 +4808,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   );
   const [eraserTrail, setEraserTrail] = react.useState([]);
   const [laserTrail, setLaserTrail] = react.useState([]);
+  const [pendingNativeLinkRequest, setPendingNativeLinkRequest] = react.useState(null);
+  const [nativeLinkInputValue, setNativeLinkInputValue] = react.useState("");
   const laserClearTimerRef = react.useRef(null);
   const strokeStyleRef = react.useRef({ ...DEFAULT_STROKE_STYLE });
   const markerStrokeStyleRef = react.useRef({ ...MARKER_TOOL_STYLE });
@@ -4871,6 +4887,21 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       onToolChangeRequestRef.current?.("select");
     }
   }, []);
+  const requestSelectToolAfterNativeLinkUse = react.useCallback(() => {
+    onToolChangeRequestRef.current?.("select");
+  }, []);
+  const closeNativeLinkDialog = react.useCallback(() => {
+    setPendingNativeLinkRequest(null);
+    setNativeLinkInputValue("");
+  }, []);
+  const submitNativeLinkDialog = react.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 });
   }
@@ -5448,7 +5479,7 @@ var NativeVectorViewport = react.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;
@@ -5464,17 +5495,16 @@ var NativeVectorViewport = react.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;
@@ -5524,6 +5554,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       dragStateRef.current = { kind: "idle" };
     },
     [
+      requestSelectToolAfterNativeLinkUse,
       requestSelectToolAfterUse,
       screenToWorld,
       setRealtimePlacementPreview,
@@ -5655,7 +5686,13 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     [requestRender, size]
   );
   const activeStyleToolId = toolId === "draw" || toolId === "marker" ? toolId : null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const nativeLinkDialogLabels = {
+    ...DEFAULT_NATIVE_LINK_TOOL_DIALOG_LABELS,
+    ...linkToolDialogLabels ?? {}
+  };
+  const normalizedNativeLinkHref = normalizeNativeLinkHref(nativeLinkInputValue);
+  const nativeLinkCanSubmit = pendingNativeLinkRequest !== null && normalizedNativeLinkHref !== null && onItemsChange != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
       style: { flex: 1, overflow: "hidden" },
@@ -5669,80 +5706,225 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         notifyWorldPointerLeave();
       },
       ...panResponder.panHandlers,
-      children: size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children: [
+        size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NativeSceneRenderer,
+            {
+              items: sceneItems,
+              camera,
+              width: size.width,
+              height: size.height
+            }
+          ),
+          interactive && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            reactNative.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__ */ jsxRuntime.jsx(
+                NativeVectorStyleInspector,
+                {
+                  toolId: activeStyleToolId,
+                  value: strokeStyleState,
+                  onChange: patchCurrentStrokeStyle
+                }
+              )
+            }
+          ) : null,
+          toolbar && /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: {
+                position: "absolute",
+                bottom: 16,
+                left: 16,
+                right: 16,
+                flexDirection: "row",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              pointerEvents: "box-none",
+              children: toolbar
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          NativeSceneRenderer,
+          reactNative.Modal,
           {
-            items: sceneItems,
-            camera,
-            width: size.width,
-            height: size.height
-          }
-        ),
-        interactive && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          reactNative.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__ */ jsxRuntime.jsx(
-              NativeVectorStyleInspector,
-              {
-                toolId: activeStyleToolId,
-                value: strokeStyleState,
-                onChange: patchCurrentStrokeStyle
-              }
-            )
-          }
-        ) : null,
-        toolbar && /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.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__ */ 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 }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.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__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.nativeLinkDialogActions, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Pressable,
+                  {
+                    accessibilityRole: "button",
+                    onPress: closeNativeLinkDialog,
+                    style: ({ pressed }) => [
+                      styles3.nativeLinkDialogButton,
+                      pressed ? styles3.nativeLinkDialogButtonPressed : void 0
+                    ],
+                    children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.nativeLinkDialogButtonText, children: nativeLinkDialogLabels.cancelLabel })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.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__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.nativeLinkDialogPrimaryButtonText, children: nativeLinkDialogLabels.addLabel })
+                  }
+                )
+              ] })
+            ] }) })
           }
         )
-      ] })
+      ]
     }
   );
 });
+var styles3 = reactNative.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: reactNative.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: reactNative.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"
+  }
+});
 
 exports.DEFAULT_LINK_CARD_SIZE = DEFAULT_LINK_CARD_SIZE;
 exports.DEFAULT_NATIVE_OVERFLOW_TOOL_IDS = DEFAULT_NATIVE_OVERFLOW_TOOL_IDS;