canvu-react 0.4.34 → 0.4.36

package/dist/native.d.cts

@@ -1,3 +1,5 @@
+import { C as CanvuLinkData } from './link-item-DwzXOwU5.cjs';
+export { D as DEFAULT_LINK_CARD_SIZE, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-DwzXOwU5.cjs';
 import { C as Camera2D, S as StrokeStyle } from './shape-builders-CKEMjivV.cjs';
 export { o as createFreehandStrokeItem, q as createImageItem, t as createShapeId } from './shape-builders-CKEMjivV.cjs';
 import { V as VectorSceneItem, R as Rect } from './types-BCCvY6ie.cjs';
@@ -162,7 +164,7 @@ type NativeVectorToolbarProps = {
     readonly renderOverflowChevronIcon?: (input: NativeVectorToolbarRenderOverflowInput) => ReactNode;
     readonly renderToolButton?: (input: NativeVectorToolbarRenderToolInput) => ReactNode;
 };
-declare const DEFAULT_NATIVE_OVERFLOW_TOOL_IDS: readonly ["rect", "ellipse", "architectural-cloud", "line", "marker", "laser", "image"];
+declare const DEFAULT_NATIVE_OVERFLOW_TOOL_IDS: readonly ["rect", "ellipse", "architectural-cloud", "line", "marker", "laser", "image", "link"];
 /**
  * Default mobile-friendly tool list for {@link NativeVectorToolbar}.
  *
@@ -213,6 +215,46 @@ type NativeWorldPointerDownDetail = {
     readonly screenX: number;
     readonly screenY: number;
 };
+/**
+ * Optional override for a link item inserted from the native link tool.
+ *
+ * Use this when your app has already reserved an item id or wants to place the
+ * link card at a custom box. Most apps can omit it and use the default card
+ * centered on the tapped world point.
+ */
+type NativeLinkToolInsertOptions = {
+    readonly id?: string;
+    readonly bounds?: Rect;
+};
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <NativeVectorViewport
+ *   toolId={toolId}
+ *   onLinkToolRequest={(detail) => {
+ *     openLinkDialog({
+ *       onSubmit: (href) => detail.insertLink({ href }),
+ *     });
+ *   }}
+ * />
+ * ```
+ */
+type NativeLinkToolRequestDetail = {
+    readonly toolId: "link";
+    readonly worldX: number;
+    readonly worldY: number;
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly suggestedBounds: Rect;
+    readonly insertLink: (link: CanvuLinkData, options?: NativeLinkToolInsertOptions) => VectorSceneItem | null;
+};
 type NativeVectorViewportProps = {
     readonly items: readonly VectorSceneItem[];
     readonly selectedIds?: readonly string[];
@@ -223,6 +265,14 @@ type NativeVectorViewportProps = {
     readonly onSelectionChange?: (ids: string[]) => void;
     readonly onItemsChange?: (items: VectorSceneItem[]) => void;
     readonly onToolChangeRequest?: (toolId: string) => void;
+    /**
+     * Called after the built-in native `"link"` tool is tapped on the canvas.
+     *
+     * 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.
+     */
+    readonly onLinkToolRequest?: (detail: NativeLinkToolRequestDetail) => void;
     readonly onWorldPointerDown?: (detail: NativeWorldPointerDownDetail) => void;
     readonly onWorldPointerMove?: (world: {
         readonly x: number;
@@ -369,4 +419,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeInteractionOverlay, type NativeInteractionOverlayProps, 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 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

@@ -1,3 +1,5 @@
+import { C as CanvuLinkData } from './link-item-IW4GTnxl.js';
+export { D as DEFAULT_LINK_CARD_SIZE, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-IW4GTnxl.js';
 import { C as Camera2D, S as StrokeStyle } from './shape-builders-Cyh8zvDG.js';
 export { o as createFreehandStrokeItem, q as createImageItem, t as createShapeId } from './shape-builders-Cyh8zvDG.js';
 import { V as VectorSceneItem, R as Rect } from './types-BCCvY6ie.js';
@@ -162,7 +164,7 @@ type NativeVectorToolbarProps = {
     readonly renderOverflowChevronIcon?: (input: NativeVectorToolbarRenderOverflowInput) => ReactNode;
     readonly renderToolButton?: (input: NativeVectorToolbarRenderToolInput) => ReactNode;
 };
-declare const DEFAULT_NATIVE_OVERFLOW_TOOL_IDS: readonly ["rect", "ellipse", "architectural-cloud", "line", "marker", "laser", "image"];
+declare const DEFAULT_NATIVE_OVERFLOW_TOOL_IDS: readonly ["rect", "ellipse", "architectural-cloud", "line", "marker", "laser", "image", "link"];
 /**
  * Default mobile-friendly tool list for {@link NativeVectorToolbar}.
  *
@@ -213,6 +215,46 @@ type NativeWorldPointerDownDetail = {
     readonly screenX: number;
     readonly screenY: number;
 };
+/**
+ * Optional override for a link item inserted from the native link tool.
+ *
+ * Use this when your app has already reserved an item id or wants to place the
+ * link card at a custom box. Most apps can omit it and use the default card
+ * centered on the tapped world point.
+ */
+type NativeLinkToolInsertOptions = {
+    readonly id?: string;
+    readonly bounds?: Rect;
+};
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <NativeVectorViewport
+ *   toolId={toolId}
+ *   onLinkToolRequest={(detail) => {
+ *     openLinkDialog({
+ *       onSubmit: (href) => detail.insertLink({ href }),
+ *     });
+ *   }}
+ * />
+ * ```
+ */
+type NativeLinkToolRequestDetail = {
+    readonly toolId: "link";
+    readonly worldX: number;
+    readonly worldY: number;
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly suggestedBounds: Rect;
+    readonly insertLink: (link: CanvuLinkData, options?: NativeLinkToolInsertOptions) => VectorSceneItem | null;
+};
 type NativeVectorViewportProps = {
     readonly items: readonly VectorSceneItem[];
     readonly selectedIds?: readonly string[];
@@ -223,6 +265,14 @@ type NativeVectorViewportProps = {
     readonly onSelectionChange?: (ids: string[]) => void;
     readonly onItemsChange?: (items: VectorSceneItem[]) => void;
     readonly onToolChangeRequest?: (toolId: string) => void;
+    /**
+     * Called after the built-in native `"link"` tool is tapped on the canvas.
+     *
+     * 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.
+     */
+    readonly onLinkToolRequest?: (detail: NativeLinkToolRequestDetail) => void;
     readonly onWorldPointerDown?: (detail: NativeWorldPointerDownDetail) => void;
     readonly onWorldPointerMove?: (world: {
         readonly x: number;
@@ -369,4 +419,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeInteractionOverlay, type NativeInteractionOverlayProps, 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 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,11 +1,9 @@
 import getStroke from 'perfect-freehand';
-import { Group, Canvas, Rect, Circle, Path, RoundedRect, Oval, DashPathEffect, Line, vec, matchFont, Text, useImage, Image } from '@shopify/react-native-skia';
+import { Group, Canvas, Rect, Circle, Path, RoundedRect, Oval, DashPathEffect, Line, vec, matchFont, Text, 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
-
 // src/math/rect.ts
 function rectsIntersect(a, b) {
   return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
@@ -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) {
@@ -1399,6 +1444,179 @@ function smoothFreehandPointsToPathD(points) {
   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 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 {
+    image.dispose?.();
+  } catch {
+  }
+}
+function createNativeImageCache({
+  loadImage,
+  maxEntries = DEFAULT_NATIVE_IMAGE_CACHE_MAX_ENTRIES
+}) {
+  const safeMaxEntries = Math.max(1, Math.round(maxEntries));
+  const entries = /* @__PURE__ */ new Map();
+  let clock = 0;
+  const touchEntry = (entry) => {
+    clock += 1;
+    entry.lastUsed = clock;
+  };
+  const createEntry = () => {
+    clock += 1;
+    return {
+      lastUsed: clock,
+      retainCount: 0
+    };
+  };
+  const prune = () => {
+    const cachedEntries = [...entries.entries()].filter(
+      (entry) => entry[1].image != null && entry[1].retainCount === 0
+    );
+    if (cachedEntries.length <= safeMaxEntries) return;
+    const evictedEntries = cachedEntries.sort(
+      (leftEntry, rightEntry) => leftEntry[1].lastUsed - rightEntry[1].lastUsed
+    ).slice(0, cachedEntries.length - safeMaxEntries);
+    for (const [href, entry] of evictedEntries) {
+      entries.delete(href);
+      disposeCachedImage(entry.image);
+    }
+  };
+  const getCached = (href) => {
+    const entry = entries.get(href);
+    if (!entry?.image) return null;
+    touchEntry(entry);
+    return entry.image;
+  };
+  const load = async (href) => {
+    const cachedImage = getCached(href);
+    if (cachedImage) return cachedImage;
+    const existingEntry = entries.get(href);
+    if (existingEntry?.promise) return await existingEntry.promise;
+    const entry = existingEntry ?? createEntry();
+    const promise = loadImage(href).then((image) => {
+      if (!image) {
+        if (entry.retainCount === 0) entries.delete(href);
+        return null;
+      }
+      entry.image = image;
+      entry.promise = void 0;
+      touchEntry(entry);
+      prune();
+      return image;
+    }).catch((error) => {
+      entries.delete(href);
+      throw error;
+    });
+    entry.promise = promise;
+    entries.set(href, entry);
+    return await promise;
+  };
+  const retain = (href) => {
+    const entry = entries.get(href) ?? createEntry();
+    entry.retainCount += 1;
+    touchEntry(entry);
+    entries.set(href, entry);
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      entry.retainCount = Math.max(0, entry.retainCount - 1);
+      if (!entry.image && !entry.promise && entry.retainCount === 0) {
+        entries.delete(href);
+        return;
+      }
+      prune();
+    };
+  };
+  const clear = () => {
+    for (const entry of entries.values()) {
+      if (entry.image) disposeCachedImage(entry.image);
+    }
+    entries.clear();
+  };
+  const size = () => [...entries.values()].filter((entry) => entry.image != null).length;
+  return { getCached, load, retain, clear, size };
+}
+async function loadSkiaImageFromHref(href) {
+  const { Skia } = await import('@shopify/react-native-skia');
+  const data = await Skia.Data.fromURI(href);
+  return Skia.Image.MakeImageFromEncoded(data);
+}
+var nativeSkiaImageCache = createNativeImageCache({
+  loadImage: loadSkiaImageFromHref
+});
+function useCachedSkiaImage(href) {
+  const [loadedImage, setLoadedImage] = useState(
+    () => href ? { href, image: nativeSkiaImageCache.getCached(href) } : null
+  );
+  useEffect(() => {
+    if (!href) {
+      setLoadedImage(null);
+      return;
+    }
+    const releaseImage = nativeSkiaImageCache.retain(href);
+    const cachedImage = nativeSkiaImageCache.getCached(href);
+    if (cachedImage) {
+      setLoadedImage({ href, image: cachedImage });
+      return releaseImage;
+    }
+    let active = true;
+    setLoadedImage({ href, image: null });
+    void nativeSkiaImageCache.load(href).then(
+      (loadedImage2) => {
+        if (active) setLoadedImage({ href, image: loadedImage2 });
+      },
+      () => {
+        if (active) setLoadedImage({ href, image: null });
+      }
+    );
+    return () => {
+      active = false;
+      releaseImage();
+    };
+  }, [href]);
+  if (!href || loadedImage?.href !== href) return null;
+  return loadedImage.image;
+}
+
 // src/native/skia-transform.ts
 function parseNum(s) {
   return Number(s);
@@ -1662,7 +1880,7 @@ function SvgNodeItem({ node }) {
 function SvgImageNodeItem({
   node
 }) {
-  const image = useImage(node.href);
+  const image = useCachedSkiaImage(node.href);
   if (!image) return null;
   return /* @__PURE__ */ jsx(
     Image,
@@ -1952,7 +2170,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,
+      {
+        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, { 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,
+      {
+        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") {
@@ -3375,9 +3705,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,
@@ -3396,6 +3731,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" },
@@ -3433,7 +3787,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);
@@ -3695,6 +4050,9 @@ function renderNativeToolFallback(tool, foregroundColor, toolLabelStyle) {
   if (tool.id === "architectural-cloud") {
     return /* @__PURE__ */ jsx(NativeCloudToolIcon, { color: foregroundColor });
   }
+  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() });
 }
 var styles2 = StyleSheet.create({
@@ -4375,6 +4733,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onSelectionChange,
   onItemsChange,
   onToolChangeRequest,
+  onLinkToolRequest,
   onWorldPointerDown,
   onWorldPointerMove,
   onWorldPointerLeave,
@@ -4394,6 +4753,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);
@@ -4736,7 +5097,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         });
         return;
       }
-      if (tool === "note" || tool === "text") {
+      if (tool === "link" || tool === "note" || tool === "text") {
         dragStateRef.current = {
           kind: "tap",
           tool,
@@ -5072,6 +5433,44 @@ 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]);
+            requestSelectToolAfterUse();
+            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;
+          }
+          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();
+          }
+          return;
+        }
         if (!change) return;
         if (st.tool === "text") {
           const id = createShapeId();
@@ -5339,6 +5738,6 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   );
 });
 
-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