canvu-react 0.4.35 → 0.4.36

package/dist/{asset-hydration-BFGZ3igr.d.cts → asset-hydration-Cy_2FyV5.d.cts}

@@ -1,5 +1,5 @@
 import { V as VectorSceneItem } from './types-BCCvY6ie.cjs';
-import { a as VectorViewportAssetStore } from './link-item-Dncuz2d_.cjs';
+import { a as VectorViewportAssetStore } from './asset-store-TzOPvlgn.cjs';
 
 declare class IndexedDbImageStore {
     private dbPromise;

package/dist/{asset-hydration-D6Q3TJL1.d.ts → asset-hydration-Dc7fsnTG.d.ts}

@@ -1,5 +1,5 @@
 import { V as VectorSceneItem } from './types-BCCvY6ie.js';
-import { a as VectorViewportAssetStore } from './link-item-voRU0Up9.js';
+import { a as VectorViewportAssetStore } from './asset-store-DQPRZEcy.js';
 
 declare class IndexedDbImageStore {
     private dbPromise;

package/dist/{link-item-voRU0Up9.d.ts → asset-store-DQPRZEcy.d.ts}

@@ -1,4 +1,4 @@
-import { V as VectorSceneItem, R as Rect } from './types-BCCvY6ie.js';
+import { V as VectorSceneItem } from './types-BCCvY6ie.js';
 
 /**
  * Kind of binary selected through the built-in canvu asset ingestion flow.
@@ -110,42 +110,4 @@ type VectorViewportAssetStore = {
     getHydrationRequest?: (item: VectorSceneItem) => VectorViewportAssetHydrationRequest | null;
 };
 
-/** Plugin key under which link metadata is stored on a link item's `pluginData`. */
-declare const LINK_PLUGIN_KEY = "canvuLink";
-/**
- * Metadata describing a clickable link/bookmark item.
- * `href` is required; the rest enrich the rendered card (unfurl result).
- */
-type CanvuLinkData = {
-    /** Absolute URL the card points to. */
-    href: string;
-    /** Human readable title (falls back to the hostname). */
-    title?: string;
-    /** Short description shown under the title. */
-    description?: string;
-    /** Preview image URL (og:image). */
-    image?: string;
-    /** Favicon URL shown in the leading badge. */
-    favicon?: string;
-};
-/**
- * Builds the inner SVG (no outer `<svg>`) for a link/bookmark card at the given box size.
- * Uses fixed pixel bands so text never overlaps regardless of the card's aspect ratio.
- */
-declare function buildLinkCardSvg(width: number, _height: number, link: CanvuLinkData): string;
-/** Reads the link metadata from an item, or `null` when the item is not a link. */
-declare function getLinkData(item: VectorSceneItem): CanvuLinkData | null;
-/** True when the item carries link metadata (clickable card). */
-declare function isLinkItem(item: VectorSceneItem): boolean;
-/**
- * Creates a clickable link/bookmark card item ready to append to the scene.
- * The card resizes by scaling its authored SVG, like other custom shapes.
- */
-declare function createLinkItem(id: string, bounds: Rect, link: CanvuLinkData): VectorSceneItem;
-/** Default card size used when placing a new link without explicit bounds. */
-declare const DEFAULT_LINK_CARD_SIZE: {
-    readonly width: 320;
-    readonly height: 70;
-};
-
-export { type CanvuLinkData as C, DEFAULT_LINK_CARD_SIZE as D, LINK_PLUGIN_KEY as L, type VectorViewportAssetKind as V, type VectorViewportAssetStore as a, buildLinkCardSvg as b, createLinkItem as c, type VectorViewportAssetHydrationRequest as d, type VectorViewportAssetResolveRequest as e, type VectorViewportAssetResolveResult as f, getLinkData as g, type VectorViewportAssetUploadRequest as h, isLinkItem as i, type VectorViewportAssetUploadResult as j };
+export type { VectorViewportAssetKind as V, VectorViewportAssetStore as a, VectorViewportAssetHydrationRequest as b, VectorViewportAssetResolveRequest as c, VectorViewportAssetResolveResult as d, VectorViewportAssetUploadRequest as e, VectorViewportAssetUploadResult as f };

package/dist/{link-item-Dncuz2d_.d.cts → asset-store-TzOPvlgn.d.cts}

@@ -1,4 +1,4 @@
-import { V as VectorSceneItem, R as Rect } from './types-BCCvY6ie.cjs';
+import { V as VectorSceneItem } from './types-BCCvY6ie.cjs';
 
 /**
  * Kind of binary selected through the built-in canvu asset ingestion flow.
@@ -110,42 +110,4 @@ type VectorViewportAssetStore = {
     getHydrationRequest?: (item: VectorSceneItem) => VectorViewportAssetHydrationRequest | null;
 };
 
-/** Plugin key under which link metadata is stored on a link item's `pluginData`. */
-declare const LINK_PLUGIN_KEY = "canvuLink";
-/**
- * Metadata describing a clickable link/bookmark item.
- * `href` is required; the rest enrich the rendered card (unfurl result).
- */
-type CanvuLinkData = {
-    /** Absolute URL the card points to. */
-    href: string;
-    /** Human readable title (falls back to the hostname). */
-    title?: string;
-    /** Short description shown under the title. */
-    description?: string;
-    /** Preview image URL (og:image). */
-    image?: string;
-    /** Favicon URL shown in the leading badge. */
-    favicon?: string;
-};
-/**
- * Builds the inner SVG (no outer `<svg>`) for a link/bookmark card at the given box size.
- * Uses fixed pixel bands so text never overlaps regardless of the card's aspect ratio.
- */
-declare function buildLinkCardSvg(width: number, _height: number, link: CanvuLinkData): string;
-/** Reads the link metadata from an item, or `null` when the item is not a link. */
-declare function getLinkData(item: VectorSceneItem): CanvuLinkData | null;
-/** True when the item carries link metadata (clickable card). */
-declare function isLinkItem(item: VectorSceneItem): boolean;
-/**
- * Creates a clickable link/bookmark card item ready to append to the scene.
- * The card resizes by scaling its authored SVG, like other custom shapes.
- */
-declare function createLinkItem(id: string, bounds: Rect, link: CanvuLinkData): VectorSceneItem;
-/** Default card size used when placing a new link without explicit bounds. */
-declare const DEFAULT_LINK_CARD_SIZE: {
-    readonly width: 320;
-    readonly height: 70;
-};
-
-export { type CanvuLinkData as C, DEFAULT_LINK_CARD_SIZE as D, LINK_PLUGIN_KEY as L, type VectorViewportAssetKind as V, type VectorViewportAssetStore as a, buildLinkCardSvg as b, createLinkItem as c, type VectorViewportAssetHydrationRequest as d, type VectorViewportAssetResolveRequest as e, type VectorViewportAssetResolveResult as f, getLinkData as g, type VectorViewportAssetUploadRequest as h, isLinkItem as i, type VectorViewportAssetUploadResult as j };
+export type { VectorViewportAssetKind as V, VectorViewportAssetStore as a, VectorViewportAssetHydrationRequest as b, VectorViewportAssetResolveRequest as c, VectorViewportAssetResolveResult as d, VectorViewportAssetUploadRequest as e, VectorViewportAssetUploadResult as f };

package/dist/chatbot.d.cts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-NBYvslB-.cjs';
+import { C as CanvasPlugin } from './types-C4wI3Jyc.cjs';
 import 'react';
 import './types-BCCvY6ie.cjs';
 import './shape-builders-CKEMjivV.cjs';
-import './link-item-Dncuz2d_.cjs';
+import './link-item-DwzXOwU5.cjs';
+import './asset-store-TzOPvlgn.cjs';
 import './types-BQUbxMgz.cjs';
 
 type ChatbotPluginPanelProps = {

package/dist/chatbot.d.ts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-DeDm865m.js';
+import { C as CanvasPlugin } from './types-B7xZAKVJ.js';
 import 'react';
 import './types-BCCvY6ie.js';
 import './shape-builders-Cyh8zvDG.js';
-import './link-item-voRU0Up9.js';
+import './link-item-IW4GTnxl.js';
+import './asset-store-DQPRZEcy.js';
 import './types-B82WiQQh.js';
 
 type ChatbotPluginPanelProps = {

package/dist/index.d.cts

@@ -2,8 +2,9 @@ import { C as Camera2D } from './shape-builders-CKEMjivV.cjs';
 export { a as Camera2DOptions, D as DEFAULT_STROKE_STYLE, F as FreehandSvgPayload, S as StrokeStyle, b as applyStrokeToItem, c as buildArchitecturalCloudPathD, d as buildArchitecturalCloudSvg, e as buildArrowSvg, f as buildDrawDotSvg, g as buildEllipseSvg, h as buildFreehandPathSvg, i as buildLineSvg, j as buildRectSvg, k as computeFreehandSvgPayload, l as createArchitecturalCloudItem, m as createDrawDotItem, n as createEllipseItem, o as createFreehandStrokeItem, p as createImageFromVectorTrace, q as createImageItem, r as createLineItem, s as createRectangleItem, t as createShapeId, u as createTextItem, v as lineEndpointsToLocal, w as rebuildItemSvg, x as resolveStrokeStyle } from './shape-builders-CKEMjivV.cjs';
 import { V as VectorSceneItem, A as ArrowEndpointBinding, R as Rect } from './types-BCCvY6ie.cjs';
 export { a as ArrowBindings, b as VectorPathPoint, n as normalizeRect, r as rectsIntersect } from './types-BCCvY6ie.cjs';
-export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-BFGZ3igr.cjs';
-export { C as CanvuLinkData, D as DEFAULT_LINK_CARD_SIZE, L as LINK_PLUGIN_KEY, b as buildLinkCardSvg, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-Dncuz2d_.cjs';
+export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-Cy_2FyV5.cjs';
+export { C as CanvuLinkData, D as DEFAULT_LINK_CARD_SIZE, L as LINK_PLUGIN_KEY, b as buildLinkCardSvg, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-DwzXOwU5.cjs';
+import './asset-store-TzOPvlgn.cjs';
 
 type EncodeCanvasToBlobOptions = {
     mimeType?: string;

package/dist/index.d.ts

@@ -2,8 +2,9 @@ import { C as Camera2D } from './shape-builders-Cyh8zvDG.js';
 export { a as Camera2DOptions, D as DEFAULT_STROKE_STYLE, F as FreehandSvgPayload, S as StrokeStyle, b as applyStrokeToItem, c as buildArchitecturalCloudPathD, d as buildArchitecturalCloudSvg, e as buildArrowSvg, f as buildDrawDotSvg, g as buildEllipseSvg, h as buildFreehandPathSvg, i as buildLineSvg, j as buildRectSvg, k as computeFreehandSvgPayload, l as createArchitecturalCloudItem, m as createDrawDotItem, n as createEllipseItem, o as createFreehandStrokeItem, p as createImageFromVectorTrace, q as createImageItem, r as createLineItem, s as createRectangleItem, t as createShapeId, u as createTextItem, v as lineEndpointsToLocal, w as rebuildItemSvg, x as resolveStrokeStyle } from './shape-builders-Cyh8zvDG.js';
 import { V as VectorSceneItem, A as ArrowEndpointBinding, R as Rect } from './types-BCCvY6ie.js';
 export { a as ArrowBindings, b as VectorPathPoint, n as normalizeRect, r as rectsIntersect } from './types-BCCvY6ie.js';
-export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-D6Q3TJL1.js';
-export { C as CanvuLinkData, D as DEFAULT_LINK_CARD_SIZE, L as LINK_PLUGIN_KEY, b as buildLinkCardSvg, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-voRU0Up9.js';
+export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-Dc7fsnTG.js';
+export { C as CanvuLinkData, D as DEFAULT_LINK_CARD_SIZE, L as LINK_PLUGIN_KEY, b as buildLinkCardSvg, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-IW4GTnxl.js';
+import './asset-store-DQPRZEcy.js';
 
 type EncodeCanvasToBlobOptions = {
     mimeType?: string;

package/dist/link-item-DwzXOwU5.d.cts

@@ -0,0 +1,41 @@
+import { R as Rect, V as VectorSceneItem } from './types-BCCvY6ie.cjs';
+
+/** Plugin key under which link metadata is stored on a link item's `pluginData`. */
+declare const LINK_PLUGIN_KEY = "canvuLink";
+/**
+ * Metadata describing a clickable link/bookmark item.
+ * `href` is required; the rest enrich the rendered card (unfurl result).
+ */
+type CanvuLinkData = {
+    /** Absolute URL the card points to. */
+    href: string;
+    /** Human readable title (falls back to the hostname). */
+    title?: string;
+    /** Short description shown under the title. */
+    description?: string;
+    /** Preview image URL (og:image). */
+    image?: string;
+    /** Favicon URL shown in the leading badge. */
+    favicon?: string;
+};
+/**
+ * Builds the inner SVG (no outer `<svg>`) for a link/bookmark card at the given box size.
+ * Uses fixed pixel bands so text never overlaps regardless of the card's aspect ratio.
+ */
+declare function buildLinkCardSvg(width: number, _height: number, link: CanvuLinkData): string;
+/** Reads the link metadata from an item, or `null` when the item is not a link. */
+declare function getLinkData(item: VectorSceneItem): CanvuLinkData | null;
+/** True when the item carries link metadata (clickable card). */
+declare function isLinkItem(item: VectorSceneItem): boolean;
+/**
+ * Creates a clickable link/bookmark card item ready to append to the scene.
+ * The card resizes by scaling its authored SVG, like other custom shapes.
+ */
+declare function createLinkItem(id: string, bounds: Rect, link: CanvuLinkData): VectorSceneItem;
+/** Default card size used when placing a new link without explicit bounds. */
+declare const DEFAULT_LINK_CARD_SIZE: {
+    readonly width: 320;
+    readonly height: 70;
+};
+
+export { type CanvuLinkData as C, DEFAULT_LINK_CARD_SIZE as D, LINK_PLUGIN_KEY as L, buildLinkCardSvg as b, createLinkItem as c, getLinkData as g, isLinkItem as i };

package/dist/link-item-IW4GTnxl.d.ts

@@ -0,0 +1,41 @@
+import { R as Rect, V as VectorSceneItem } from './types-BCCvY6ie.js';
+
+/** Plugin key under which link metadata is stored on a link item's `pluginData`. */
+declare const LINK_PLUGIN_KEY = "canvuLink";
+/**
+ * Metadata describing a clickable link/bookmark item.
+ * `href` is required; the rest enrich the rendered card (unfurl result).
+ */
+type CanvuLinkData = {
+    /** Absolute URL the card points to. */
+    href: string;
+    /** Human readable title (falls back to the hostname). */
+    title?: string;
+    /** Short description shown under the title. */
+    description?: string;
+    /** Preview image URL (og:image). */
+    image?: string;
+    /** Favicon URL shown in the leading badge. */
+    favicon?: string;
+};
+/**
+ * Builds the inner SVG (no outer `<svg>`) for a link/bookmark card at the given box size.
+ * Uses fixed pixel bands so text never overlaps regardless of the card's aspect ratio.
+ */
+declare function buildLinkCardSvg(width: number, _height: number, link: CanvuLinkData): string;
+/** Reads the link metadata from an item, or `null` when the item is not a link. */
+declare function getLinkData(item: VectorSceneItem): CanvuLinkData | null;
+/** True when the item carries link metadata (clickable card). */
+declare function isLinkItem(item: VectorSceneItem): boolean;
+/**
+ * Creates a clickable link/bookmark card item ready to append to the scene.
+ * The card resizes by scaling its authored SVG, like other custom shapes.
+ */
+declare function createLinkItem(id: string, bounds: Rect, link: CanvuLinkData): VectorSceneItem;
+/** Default card size used when placing a new link without explicit bounds. */
+declare const DEFAULT_LINK_CARD_SIZE: {
+    readonly width: 320;
+    readonly height: 70;
+};
+
+export { type CanvuLinkData as C, DEFAULT_LINK_CARD_SIZE as D, LINK_PLUGIN_KEY as L, buildLinkCardSvg as b, createLinkItem as c, getLinkData as g, isLinkItem as i };

package/dist/native.cjs

@@ -10,8 +10,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var getStroke__default = /*#__PURE__*/_interopDefault(getStroke);
 
-// 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;
@@ -28,12 +26,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";
@@ -146,6 +168,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;
@@ -179,6 +204,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) {
@@ -1404,6 +1449,44 @@ 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 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 {
@@ -2093,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 = reactNativeSkia.matchFont({ fontSize: 14.5, fontWeight: "700" });
+  const subtitleFont = reactNativeSkia.matchFont({ fontSize: 12.5 });
+  const initialFont = reactNativeSkia.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__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: [{ scaleX }, { scaleY }], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.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__ */ jsxRuntime.jsx(
+      reactNativeSkia.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__ */ jsxRuntime.jsx(
+      reactNativeSkia.RoundedRect,
+      {
+        x: 14,
+        y: 14,
+        width: 42,
+        height: 42,
+        r: 11,
+        color: "#315bd6",
+        style: "fill",
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.Text,
+      {
+        x: 29.5,
+        y: 41,
+        text: display.initial,
+        color: "#ffffff",
+        font: initialFont
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { clip: { x: 69, y: 13, width: 215, height: 24 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Text, { x: 69, y: 32, text: title, color: "#1f2937", font: titleFont }) }),
+    display.secure ? /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: [{ translateX: 69 }, { translateY: 41 }], children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.Rect,
+        {
+          x: 1.5,
+          y: 4.5,
+          width: 7,
+          height: 6,
+          color: "#6b7280",
+          style: "stroke",
+          strokeWidth: 1.3
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.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__ */ jsxRuntime.jsx(reactNativeSkia.Group, { clip: { x: subtitleX, y: 34, width: subtitleWidth, height: 22 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactNativeSkia.Text,
+      {
+        x: subtitleX,
+        y: 51,
+        text: subtitle,
+        color: "#6b7280",
+        font: subtitleFont
+      }
+    ) })
+  ] });
+}
 function NativeShapeRenderer({ item }) {
+  const link = getLinkData(item);
+  if (link) {
+    return /* @__PURE__ */ jsxRuntime.jsx(NativeLinkCardRenderer, { item, link });
+  }
   const style = resolveStrokeStyle(item);
   const k = item.toolKind;
   if (k === "rect") {
@@ -3516,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,
@@ -3537,6 +3737,25 @@ function NativeCloudToolIcon({
     }
   ) }) });
 }
+function NativeLinkToolIcon({
+  color,
+  size = 20,
+  strokeWidth = 2.4
+}) {
+  const scale = size / 24;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Canvas, { style: { width: size, height: size }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: [{ scale }], children: LINK_TOOL_ICON_PATHS.map((path) => /* @__PURE__ */ jsxRuntime.jsx(
+    reactNativeSkia.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" },
@@ -3574,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);
@@ -3836,6 +4056,9 @@ function renderNativeToolFallback(tool, foregroundColor, toolLabelStyle) {
   if (tool.id === "architectural-cloud") {
     return /* @__PURE__ */ jsxRuntime.jsx(NativeCloudToolIcon, { color: foregroundColor });
   }
+  if (tool.id === "link") {
+    return /* @__PURE__ */ jsxRuntime.jsx(NativeLinkToolIcon, { color: foregroundColor });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.shortLabel, { color: foregroundColor }, toolLabelStyle], children: tool.shortLabel ?? tool.label.slice(0, 1).toUpperCase() });
 }
 var styles2 = reactNative.StyleSheet.create({
@@ -4516,6 +4739,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onSelectionChange,
   onItemsChange,
   onToolChangeRequest,
+  onLinkToolRequest,
   onWorldPointerDown,
   onWorldPointerMove,
   onWorldPointerLeave,
@@ -4535,6 +4759,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   toolLockedRef.current = toolLocked;
   const onToolChangeRequestRef = react.useRef(onToolChangeRequest);
   onToolChangeRequestRef.current = onToolChangeRequest;
+  const onLinkToolRequestRef = react.useRef(onLinkToolRequest);
+  onLinkToolRequestRef.current = onLinkToolRequest;
   const onWorldPointerDownRef = react.useRef(onWorldPointerDown);
   onWorldPointerDownRef.current = onWorldPointerDown;
   const onWorldPointerMoveRef = react.useRef(onWorldPointerMove);
@@ -4877,7 +5103,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         });
         return;
       }
-      if (tool === "note" || tool === "text") {
+      if (tool === "link" || tool === "note" || tool === "text") {
         dragStateRef.current = {
           kind: "tap",
           tool,
@@ -5213,6 +5439,44 @@ var NativeVectorViewport = react.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();
@@ -5480,6 +5744,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   );
 });
 
+exports.DEFAULT_LINK_CARD_SIZE = DEFAULT_LINK_CARD_SIZE;
 exports.DEFAULT_NATIVE_OVERFLOW_TOOL_IDS = DEFAULT_NATIVE_OVERFLOW_TOOL_IDS;
 exports.DEFAULT_NATIVE_VECTOR_TOOLS = DEFAULT_NATIVE_VECTOR_TOOLS;
 exports.NATIVE_STYLE_PALETTE = NATIVE_STYLE_PALETTE;
@@ -5491,7 +5756,10 @@ exports.NativeVectorToolbar = NativeVectorToolbar;
 exports.NativeVectorViewport = NativeVectorViewport;
 exports.createFreehandStrokeItem = createFreehandStrokeItem;
 exports.createImageItem = createImageItem;
+exports.createLinkItem = createLinkItem;
 exports.createShapeId = createShapeId;
+exports.getLinkData = getLinkData;
+exports.isLinkItem = isLinkItem;
 exports.nativeStyleColorWithOpacity = nativeStyleColorWithOpacity;
 exports.normalizeNativeStyleHex = normalizeNativeStyleHex;
 exports.parseSvgFragment = parseSvgFragment;