canvu-react 0.3.37 → 0.3.39

package/dist/{shape-builders-CsSXKCcs.d.ts → shape-builders-C7bxJBGR.d.ts}

@@ -1,4 +1,4 @@
-import { V as VectorSceneItem, L as LineEndpointsLocal, b as VectorPathPoint, R as Rect, a as ArrowBindings } from './types-Bnq2HtHQ.js';
+import { V as VectorSceneItem, R as Rect, L as LineEndpointsLocal, b as VectorPathPoint, a as ArrowBindings } from './types-Bnq2HtHQ.js';
 
 /**
  * Kind of binary selected through the built-in canvu asset ingestion flow.
@@ -110,6 +110,44 @@ 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: 360;
+    readonly height: 132;
+};
+
 /** Resolved stroke for SVG generation. */
 type StrokeStyle = {
     stroke: string;
@@ -241,4 +279,4 @@ declare function createImageFromVectorTrace(id: string, bounds: Rect, imageVecto
     height: number;
 }): VectorSceneItem;
 
-export { type VectorViewportAssetResolveResult as A, type VectorViewportAssetUploadRequest as B, type VectorViewportAssetUploadResult as C, DEFAULT_STROKE_STYLE as D, type FreehandSvgPayload as F, type StrokeStyle as S, type VectorViewportAssetKind as V, applyStrokeToItem as a, buildArchitecturalCloudPathD as b, buildArchitecturalCloudSvg as c, buildArrowSvg as d, buildDrawDotSvg as e, buildEllipseSvg as f, buildFreehandPathSvg as g, buildLineSvg as h, buildRectSvg as i, computeFreehandSvgPayload as j, createArchitecturalCloudItem as k, createDrawDotItem as l, createEllipseItem as m, createFreehandStrokeItem as n, createImageFromVectorTrace as o, createImageItem as p, createLineItem as q, createRectangleItem as r, createShapeId as s, createTextItem as t, lineEndpointsToLocal as u, rebuildItemSvg as v, resolveStrokeStyle as w, type VectorViewportAssetStore as x, type VectorViewportAssetHydrationRequest as y, type VectorViewportAssetResolveRequest as z };
+export { rebuildItemSvg as A, resolveStrokeStyle as B, type CanvuLinkData as C, DEFAULT_LINK_CARD_SIZE as D, type VectorViewportAssetStore as E, type FreehandSvgPayload as F, type VectorViewportAssetHydrationRequest as G, type VectorViewportAssetResolveRequest as H, type VectorViewportAssetResolveResult as I, type VectorViewportAssetUploadRequest as J, type VectorViewportAssetUploadResult as K, LINK_PLUGIN_KEY as L, type StrokeStyle as S, type VectorViewportAssetKind as V, DEFAULT_STROKE_STYLE as a, applyStrokeToItem as b, buildArchitecturalCloudPathD as c, buildArchitecturalCloudSvg as d, buildArrowSvg as e, buildDrawDotSvg as f, buildEllipseSvg as g, buildFreehandPathSvg as h, buildLineSvg as i, buildLinkCardSvg as j, buildRectSvg as k, computeFreehandSvgPayload as l, createArchitecturalCloudItem as m, createDrawDotItem as n, createEllipseItem as o, createFreehandStrokeItem as p, createImageFromVectorTrace as q, createImageItem as r, createLineItem as s, createLinkItem as t, createRectangleItem as u, createShapeId as v, createTextItem as w, getLinkData as x, isLinkItem as y, lineEndpointsToLocal as z };

package/dist/{shape-builders-CsbSRZnQ.d.cts → shape-builders-Dedcl6tw.d.cts}

@@ -1,4 +1,4 @@
-import { V as VectorSceneItem, L as LineEndpointsLocal, b as VectorPathPoint, R as Rect, a as ArrowBindings } from './types-Bnq2HtHQ.cjs';
+import { V as VectorSceneItem, R as Rect, L as LineEndpointsLocal, b as VectorPathPoint, a as ArrowBindings } from './types-Bnq2HtHQ.cjs';
 
 /**
  * Kind of binary selected through the built-in canvu asset ingestion flow.
@@ -110,6 +110,44 @@ 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: 360;
+    readonly height: 132;
+};
+
 /** Resolved stroke for SVG generation. */
 type StrokeStyle = {
     stroke: string;
@@ -241,4 +279,4 @@ declare function createImageFromVectorTrace(id: string, bounds: Rect, imageVecto
     height: number;
 }): VectorSceneItem;
 
-export { type VectorViewportAssetResolveResult as A, type VectorViewportAssetUploadRequest as B, type VectorViewportAssetUploadResult as C, DEFAULT_STROKE_STYLE as D, type FreehandSvgPayload as F, type StrokeStyle as S, type VectorViewportAssetKind as V, applyStrokeToItem as a, buildArchitecturalCloudPathD as b, buildArchitecturalCloudSvg as c, buildArrowSvg as d, buildDrawDotSvg as e, buildEllipseSvg as f, buildFreehandPathSvg as g, buildLineSvg as h, buildRectSvg as i, computeFreehandSvgPayload as j, createArchitecturalCloudItem as k, createDrawDotItem as l, createEllipseItem as m, createFreehandStrokeItem as n, createImageFromVectorTrace as o, createImageItem as p, createLineItem as q, createRectangleItem as r, createShapeId as s, createTextItem as t, lineEndpointsToLocal as u, rebuildItemSvg as v, resolveStrokeStyle as w, type VectorViewportAssetStore as x, type VectorViewportAssetHydrationRequest as y, type VectorViewportAssetResolveRequest as z };
+export { rebuildItemSvg as A, resolveStrokeStyle as B, type CanvuLinkData as C, DEFAULT_LINK_CARD_SIZE as D, type VectorViewportAssetStore as E, type FreehandSvgPayload as F, type VectorViewportAssetHydrationRequest as G, type VectorViewportAssetResolveRequest as H, type VectorViewportAssetResolveResult as I, type VectorViewportAssetUploadRequest as J, type VectorViewportAssetUploadResult as K, LINK_PLUGIN_KEY as L, type StrokeStyle as S, type VectorViewportAssetKind as V, DEFAULT_STROKE_STYLE as a, applyStrokeToItem as b, buildArchitecturalCloudPathD as c, buildArchitecturalCloudSvg as d, buildArrowSvg as e, buildDrawDotSvg as f, buildEllipseSvg as g, buildFreehandPathSvg as h, buildLineSvg as i, buildLinkCardSvg as j, buildRectSvg as k, computeFreehandSvgPayload as l, createArchitecturalCloudItem as m, createDrawDotItem as n, createEllipseItem as o, createFreehandStrokeItem as p, createImageFromVectorTrace as q, createImageItem as r, createLineItem as s, createLinkItem as t, createRectangleItem as u, createShapeId as v, createTextItem as w, getLinkData as x, isLinkItem as y, lineEndpointsToLocal as z };

package/dist/tldraw.cjs

@@ -50,11 +50,76 @@ function createCustomShapeItem(id, bounds, content) {
   };
 }
 
+// src/scene/link-item.ts
+var LINK_PLUGIN_KEY = "canvuLink";
+var LINK_CARD_BORDER = "#e2e8f0";
+var LINK_CARD_ACCENT = "#2563eb";
+var LINK_CARD_TITLE_COLOR = "#0f172a";
+var LINK_CARD_TEXT_COLOR = "#475569";
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+var formatNumber = (value) => {
+  const rounded = Math.round(value * 100) / 100;
+  return Object.is(rounded, -0) ? "0" : String(rounded);
+};
+var escapeXmlAttribute = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+var escapeHtmlText = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+var getLinkHostname = (href) => {
+  try {
+    return new URL(href).hostname.replace(/^www\./, "");
+  } catch {
+    return href;
+  }
+};
+var buildLinkTextBand = (band) => {
+  const lineHeight = band.fontSize * 1.3;
+  const weight = band.fontWeight != null ? `font-weight:${band.fontWeight};` : "";
+  const lineClampStyle = band.clampLines ? `display:-webkit-box;-webkit-line-clamp:${band.clampLines};-webkit-box-orient:vertical;` : "";
+  return `<foreignObject x="${formatNumber(band.x)}" y="${formatNumber(band.y)}" width="${formatNumber(Math.max(1, band.width))}" height="${formatNumber(Math.max(1, band.height))}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;font-family:system-ui,sans-serif;font-size:${formatNumber(band.fontSize)}px;line-height:${formatNumber(lineHeight)}px;color:${band.color};overflow:hidden;word-break:break-word;${lineClampStyle}${weight}">${escapeHtmlText(band.text)}</div></foreignObject>`;
+};
+function buildLinkCardSvg(width, height, link) {
+  const cardWidth = Math.max(1, width);
+  const cardHeight = Math.max(1, height);
+  const padding = 14;
+  const badgeSize = clamp(Math.min(72, cardHeight - padding * 2), 28, 96);
+  const textX = padding + badgeSize + 14;
+  const textWidth = Math.max(1, cardWidth - textX - padding);
+  const hostname = getLinkHostname(link.href);
+  const title = link.title?.trim() || hostname || "Link";
+  const description = link.description?.trim() || link.href;
+  const titleY = padding;
+  const titleHeight = clamp(cardHeight * 0.22, 18, 28);
+  const hostY = titleY + titleHeight + 2;
+  const hostHeight = 16;
+  const descY = hostY + hostHeight + 4;
+  const descHeight = Math.max(1, cardHeight - descY - padding);
+  const badge = link.favicon ? `<clipPath id="canvu-link-badge"><rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="12" /></clipPath>
+		<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="12" fill="#f8fafc" stroke="${LINK_CARD_BORDER}" stroke-width="1" />
+		<image href="${escapeXmlAttribute(link.favicon)}" x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" preserveAspectRatio="xMidYMid slice" clip-path="url(#canvu-link-badge)" />` : `<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="12" fill="${LINK_CARD_ACCENT}" fill-opacity="0.1" stroke="${LINK_CARD_ACCENT}" stroke-opacity="0.3" stroke-width="1" />
+		<g transform="translate(${formatNumber(padding + badgeSize / 2)},${formatNumber(padding + badgeSize / 2)})" stroke="${LINK_CARD_ACCENT}" stroke-width="2.4" stroke-linecap="round" fill="none">
+			<path d="M-9 3 a6 6 0 0 1 0 -8 l4 -4 a6 6 0 0 1 8 8 l-2 2" />
+			<path d="M9 -3 a6 6 0 0 1 0 8 l-4 4 a6 6 0 0 1 -8 -8 l2 -2" />
+		</g>`;
+  const externalIconX = cardWidth - padding - 16;
+  const externalIcon = `<g transform="translate(${formatNumber(externalIconX)},${formatNumber(padding)})" stroke="${LINK_CARD_TEXT_COLOR}" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" fill="none">
+		<path d="M6 1 H11 V6" />
+		<path d="M11 1 L4.5 7.5" />
+		<path d="M9 7 V10 a1 1 0 0 1 -1 1 H2 a1 1 0 0 1 -1 -1 V4 a1 1 0 0 1 1 -1 H5" />
+	</g>`;
+  return `
+		<rect width="${formatNumber(cardWidth)}" height="${formatNumber(cardHeight)}" rx="16" fill="#ffffff" stroke="${LINK_CARD_BORDER}" stroke-width="1.5" />
+		${badge}
+		${externalIcon}
+		${buildLinkTextBand({ x: textX, y: titleY, width: textWidth - 18, height: titleHeight, text: title, fontSize: 15, color: LINK_CARD_TITLE_COLOR, fontWeight: 700, clampLines: 1 })}
+		${buildLinkTextBand({ x: textX, y: hostY, width: textWidth, height: hostHeight, text: hostname, fontSize: 12, color: LINK_CARD_ACCENT, clampLines: 1 })}
+		${buildLinkTextBand({ x: textX, y: descY, width: textWidth, height: descHeight, text: description, fontSize: 12, color: LINK_CARD_TEXT_COLOR, clampLines: 2 })}
+	`;
+}
+
 // src/scene/text-svg.ts
 function escapeSvgTextContent(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function escapeHtmlText(s) {
+function escapeHtmlText2(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 var DEFAULT_TEXT_FONT_SIZE = 18;
@@ -158,9 +223,9 @@ function buildTextFixedBoundsSvg(content, width, height, fillColor = "#2563eb",
   const lh = lineHeightFor(fontSize);
   const trimmed = content.trim();
   if (trimmed.length === 0) {
-    return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:#94a3b8;font-style:italic">${escapeHtmlText(PLACEHOLDER)}</div></foreignObject>`;
+    return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:#94a3b8;font-style:italic">${escapeHtmlText2(PLACEHOLDER)}</div></foreignObject>`;
   }
-  const body = escapeHtmlText(content);
+  const body = escapeHtmlText2(content);
   return `<foreignObject width="${w}" height="${h}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:2px 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:system-ui,sans-serif;white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:${fillColor}">${body}</div></foreignObject>`;
 }
 
@@ -837,10 +902,10 @@ function resolveColor(value) {
 function escapeXml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function escapeHtmlText2(value) {
+function escapeHtmlText3(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function formatNumber(value) {
+function formatNumber2(value) {
   if (!Number.isFinite(value)) return "0";
   const rounded = Math.round(value * 100) / 100;
   return Number.isInteger(rounded) ? String(rounded) : String(rounded);
@@ -892,13 +957,13 @@ function sizeToFontPx(size) {
 function dashArrayForStyle(dash, strokeWidth) {
   if (!dash || dash === "solid") return void 0;
   if (dash === "dotted") {
-    return `${formatNumber(Math.max(1.25, strokeWidth))} ${formatNumber(Math.max(2.5, strokeWidth * 2.2))}`;
+    return `${formatNumber2(Math.max(1.25, strokeWidth))} ${formatNumber2(Math.max(2.5, strokeWidth * 2.2))}`;
   }
   if (dash === "dashed") {
-    return `${formatNumber(Math.max(5, strokeWidth * 4))} ${formatNumber(Math.max(3, strokeWidth * 2.2))}`;
+    return `${formatNumber2(Math.max(5, strokeWidth * 4))} ${formatNumber2(Math.max(3, strokeWidth * 2.2))}`;
   }
   if (dash === "draw") {
-    return `${formatNumber(Math.max(3, strokeWidth * 2.4))} ${formatNumber(Math.max(2.4, strokeWidth * 1.6))}`;
+    return `${formatNumber2(Math.max(3, strokeWidth * 2.4))} ${formatNumber2(Math.max(2.4, strokeWidth * 1.6))}`;
   }
   return dash;
 }
@@ -914,11 +979,11 @@ function strokeAttrs(style) {
   const dashAttr = dashArray ? ` stroke-dasharray="${dashArray}"` : "";
   const lineCap = style.lineCap ? ` stroke-linecap="${style.lineCap}"` : "";
   const lineJoin = style.lineJoin ? ` stroke-linejoin="${style.lineJoin}"` : "";
-  return `stroke="${style.stroke}" stroke-width="${formatNumber(style.strokeWidth)}"${dashAttr}${lineCap}${lineJoin}`;
+  return `stroke="${style.stroke}" stroke-width="${formatNumber2(style.strokeWidth)}"${dashAttr}${lineCap}${lineJoin}`;
 }
 function wrapOpacity(svg, opacity) {
   if (opacity >= 0.999) return svg;
-  return `<g opacity="${formatNumber(opacity)}">${svg}</g>`;
+  return `<g opacity="${formatNumber2(opacity)}">${svg}</g>`;
 }
 function buildForeignObjectTextSvg(options) {
   const x = options.x ?? 0;
@@ -933,8 +998,8 @@ function buildForeignObjectTextSvg(options) {
   const weight = options.fontWeight != null ? `font-weight:${options.fontWeight};` : "";
   const fontStyle = options.italic ? "font-style:italic;" : "";
   const background = options.background ? `background:${options.background};` : "";
-  const radius = options.borderRadius != null ? `border-radius:${formatNumber(options.borderRadius)}px;` : "";
-  return `<foreignObject x="${formatNumber(x)}" y="${formatNumber(y)}" width="${formatNumber(w)}" height="${formatNumber(h)}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:${formatNumber(padding)}px;display:flex;align-items:${vertical};justify-content:${justify};text-align:${align};white-space:pre-wrap;word-break:break-word;overflow:hidden;color:${options.color};font-size:${formatNumber(options.fontSize)}px;line-height:${formatNumber(lineHeight)}px;font-family:system-ui,sans-serif;${weight}${fontStyle}${background}${radius}">${escapeHtmlText2(options.text)}</div></foreignObject>`;
+  const radius = options.borderRadius != null ? `border-radius:${formatNumber2(options.borderRadius)}px;` : "";
+  return `<foreignObject x="${formatNumber2(x)}" y="${formatNumber2(y)}" width="${formatNumber2(w)}" height="${formatNumber2(h)}"><div xmlns="http://www.w3.org/1999/xhtml" style="box-sizing:border-box;width:100%;height:100%;margin:0;padding:${formatNumber2(padding)}px;display:flex;align-items:${vertical};justify-content:${justify};text-align:${align};white-space:pre-wrap;word-break:break-word;overflow:hidden;color:${options.color};font-size:${formatNumber2(options.fontSize)}px;line-height:${formatNumber2(lineHeight)}px;font-family:system-ui,sans-serif;${weight}${fontStyle}${background}${radius}">${escapeHtmlText3(options.text)}</div></foreignObject>`;
 }
 function richTextToPlainText(value) {
   const parts = [];
@@ -1462,17 +1527,17 @@ function createCustomImportedItem(snapshot, shape, localBounds, innerSvg, style)
 }
 function polygonPath(points) {
   if (points.length === 0) return "";
-  let path = `M${formatNumber(points[0]?.x ?? 0)} ${formatNumber(points[0]?.y ?? 0)}`;
+  let path = `M${formatNumber2(points[0]?.x ?? 0)} ${formatNumber2(points[0]?.y ?? 0)}`;
   for (let index = 1; index < points.length; index++) {
     const point = points[index];
     if (!point) continue;
-    path += ` L${formatNumber(point.x)} ${formatNumber(point.y)}`;
+    path += ` L${formatNumber2(point.x)} ${formatNumber2(point.y)}`;
   }
   return `${path} Z`;
 }
 function cloudPath(width, height) {
   const r = Math.min(width, height) * 0.15;
-  return `M${formatNumber(r)} ${formatNumber(height * 0.3)} Q0 ${formatNumber(height * 0.1)} ${formatNumber(width * 0.15)} ${formatNumber(height * 0.05)} Q${formatNumber(width * 0.3)} 0 ${formatNumber(width * 0.45)} ${formatNumber(height * 0.1)} Q${formatNumber(width * 0.7)} 0 ${formatNumber(width * 0.8)} ${formatNumber(height * 0.15)} Q${formatNumber(width)} ${formatNumber(height * 0.2)} ${formatNumber(width * 0.9)} ${formatNumber(height * 0.5)} Q${formatNumber(width)} ${formatNumber(height * 0.7)} ${formatNumber(width * 0.85)} ${formatNumber(height * 0.8)} Q${formatNumber(width * 0.7)} ${formatNumber(height)} ${formatNumber(width * 0.5)} ${formatNumber(height * 0.9)} Q${formatNumber(width * 0.3)} ${formatNumber(height)} ${formatNumber(width * 0.15)} ${formatNumber(height * 0.85)} Q0 ${formatNumber(height * 0.8)} ${formatNumber(r * 0.5)} ${formatNumber(height * 0.6)} Q0 ${formatNumber(height * 0.5)} ${formatNumber(r)} ${formatNumber(height * 0.3)} Z`;
+  return `M${formatNumber2(r)} ${formatNumber2(height * 0.3)} Q0 ${formatNumber2(height * 0.1)} ${formatNumber2(width * 0.15)} ${formatNumber2(height * 0.05)} Q${formatNumber2(width * 0.3)} 0 ${formatNumber2(width * 0.45)} ${formatNumber2(height * 0.1)} Q${formatNumber2(width * 0.7)} 0 ${formatNumber2(width * 0.8)} ${formatNumber2(height * 0.15)} Q${formatNumber2(width)} ${formatNumber2(height * 0.2)} ${formatNumber2(width * 0.9)} ${formatNumber2(height * 0.5)} Q${formatNumber2(width)} ${formatNumber2(height * 0.7)} ${formatNumber2(width * 0.85)} ${formatNumber2(height * 0.8)} Q${formatNumber2(width * 0.7)} ${formatNumber2(height)} ${formatNumber2(width * 0.5)} ${formatNumber2(height * 0.9)} Q${formatNumber2(width * 0.3)} ${formatNumber2(height)} ${formatNumber2(width * 0.15)} ${formatNumber2(height * 0.85)} Q0 ${formatNumber2(height * 0.8)} ${formatNumber2(r * 0.5)} ${formatNumber2(height * 0.6)} Q0 ${formatNumber2(height * 0.5)} ${formatNumber2(r)} ${formatNumber2(height * 0.3)} Z`;
 }
 function geoPath(geo, width, height) {
   if (geo === "diamond" || geo === "rhombus") {
@@ -1551,10 +1616,10 @@ function geoPath(geo, width, height) {
     ]);
   }
   if (geo === "check-box") {
-    return `M0 0 H${formatNumber(width)} V${formatNumber(height)} H0 Z M${formatNumber(width * 0.2)} ${formatNumber(height * 0.56)} L${formatNumber(width * 0.42)} ${formatNumber(height * 0.78)} L${formatNumber(width * 0.82)} ${formatNumber(height * 0.24)}`;
+    return `M0 0 H${formatNumber2(width)} V${formatNumber2(height)} H0 Z M${formatNumber2(width * 0.2)} ${formatNumber2(height * 0.56)} L${formatNumber2(width * 0.42)} ${formatNumber2(height * 0.78)} L${formatNumber2(width * 0.82)} ${formatNumber2(height * 0.24)}`;
   }
   if (geo === "x-box") {
-    return `M0 0 H${formatNumber(width)} V${formatNumber(height)} H0 Z M${formatNumber(width * 0.22)} ${formatNumber(height * 0.22)} L${formatNumber(width * 0.78)} ${formatNumber(height * 0.78)} M${formatNumber(width * 0.78)} ${formatNumber(height * 0.22)} L${formatNumber(width * 0.22)} ${formatNumber(height * 0.78)}`;
+    return `M0 0 H${formatNumber2(width)} V${formatNumber2(height)} H0 Z M${formatNumber2(width * 0.22)} ${formatNumber2(height * 0.22)} L${formatNumber2(width * 0.78)} ${formatNumber2(height * 0.78)} M${formatNumber2(width * 0.78)} ${formatNumber2(height * 0.22)} L${formatNumber2(width * 0.22)} ${formatNumber2(height * 0.78)}`;
   }
   return null;
 }
@@ -1570,7 +1635,7 @@ function renderGeoShape(snapshot, shape) {
   const text = extractPlainText(props);
   const fontSize = getNumber(props.fontSize) ?? sizeToFontPx(getString(props.size));
   const customPath = geoPath(geo, width, height);
-  const shapeMarkup = geo === "ellipse" || geo === "oval" ? `<ellipse cx="${formatNumber(width / 2)}" cy="${formatNumber(height / 2)}" rx="${formatNumber(width / 2)}" ry="${formatNumber(height / 2)}" ${fillAttrs(getString(props.fill), stroke)} ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />` : customPath ? `<path d="${customPath}" ${fillAttrs(getString(props.fill), stroke)} ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />` : `<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="8" ${fillAttrs(getString(props.fill), stroke)} ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />`;
+  const shapeMarkup = geo === "ellipse" || geo === "oval" ? `<ellipse cx="${formatNumber2(width / 2)}" cy="${formatNumber2(height / 2)}" rx="${formatNumber2(width / 2)}" ry="${formatNumber2(height / 2)}" ${fillAttrs(getString(props.fill), stroke)} ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />` : customPath ? `<path d="${customPath}" ${fillAttrs(getString(props.fill), stroke)} ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />` : `<rect width="${formatNumber2(width)}" height="${formatNumber2(height)}" rx="8" ${fillAttrs(getString(props.fill), stroke)} ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />`;
   const textMarkup = text ? buildForeignObjectTextSvg({
     width,
     height,
@@ -1655,11 +1720,11 @@ function renderStrokeShape(snapshot, shape) {
 }
 function polylinePath(points) {
   if (points.length === 0) return "";
-  let path = `M${formatNumber(points[0]?.x ?? 0)} ${formatNumber(points[0]?.y ?? 0)}`;
+  let path = `M${formatNumber2(points[0]?.x ?? 0)} ${formatNumber2(points[0]?.y ?? 0)}`;
   for (let index = 1; index < points.length; index++) {
     const point = points[index];
     if (!point) continue;
-    path += ` L${formatNumber(point.x)} ${formatNumber(point.y)}`;
+    path += ` L${formatNumber2(point.x)} ${formatNumber2(point.y)}`;
   }
   return path;
 }
@@ -1681,22 +1746,22 @@ function buildArrowHeadSvg(options) {
   const left = { x: bx + px * (headWidth / 2), y: by + py * (headWidth / 2) };
   const right = { x: bx - px * (headWidth / 2), y: by - py * (headWidth / 2) };
   if (type === "triangle") {
-    return `<polygon points="${formatNumber(options.tip.x)},${formatNumber(options.tip.y)} ${formatNumber(left.x)},${formatNumber(left.y)} ${formatNumber(right.x)},${formatNumber(right.y)}" fill="${options.stroke}" />`;
+    return `<polygon points="${formatNumber2(options.tip.x)},${formatNumber2(options.tip.y)} ${formatNumber2(left.x)},${formatNumber2(left.y)} ${formatNumber2(right.x)},${formatNumber2(right.y)}" fill="${options.stroke}" />`;
   }
   if (type === "dot") {
-    return `<circle cx="${formatNumber(options.tip.x)}" cy="${formatNumber(options.tip.y)}" r="${formatNumber(Math.max(3, options.strokeWidth * 1.5))}" fill="${options.stroke}" />`;
+    return `<circle cx="${formatNumber2(options.tip.x)}" cy="${formatNumber2(options.tip.y)}" r="${formatNumber2(Math.max(3, options.strokeWidth * 1.5))}" fill="${options.stroke}" />`;
   }
   if (type === "diamond") {
     const mid = {
       x: options.tip.x - ux * (headLength / 2),
       y: options.tip.y - uy * (headLength / 2)
     };
-    return `<polygon points="${formatNumber(options.tip.x)},${formatNumber(options.tip.y)} ${formatNumber(left.x)},${formatNumber(left.y)} ${formatNumber(mid.x - ux * (headLength / 2))},${formatNumber(mid.y - uy * (headLength / 2))} ${formatNumber(right.x)},${formatNumber(right.y)}" fill="none" stroke="${options.stroke}" stroke-width="${formatNumber(options.strokeWidth)}" stroke-linejoin="round" />`;
+    return `<polygon points="${formatNumber2(options.tip.x)},${formatNumber2(options.tip.y)} ${formatNumber2(left.x)},${formatNumber2(left.y)} ${formatNumber2(mid.x - ux * (headLength / 2))},${formatNumber2(mid.y - uy * (headLength / 2))} ${formatNumber2(right.x)},${formatNumber2(right.y)}" fill="none" stroke="${options.stroke}" stroke-width="${formatNumber2(options.strokeWidth)}" stroke-linejoin="round" />`;
   }
   if (type === "bar") {
-    return `<line x1="${formatNumber(left.x)}" y1="${formatNumber(left.y)}" x2="${formatNumber(right.x)}" y2="${formatNumber(right.y)}" stroke="${options.stroke}" stroke-width="${formatNumber(options.strokeWidth)}" stroke-linecap="round" />`;
+    return `<line x1="${formatNumber2(left.x)}" y1="${formatNumber2(left.y)}" x2="${formatNumber2(right.x)}" y2="${formatNumber2(right.y)}" stroke="${options.stroke}" stroke-width="${formatNumber2(options.strokeWidth)}" stroke-linecap="round" />`;
   }
-  return `<path d="M ${formatNumber(left.x)} ${formatNumber(left.y)} L ${formatNumber(options.tip.x)} ${formatNumber(options.tip.y)} L ${formatNumber(right.x)} ${formatNumber(right.y)}" fill="none" stroke="${options.stroke}" stroke-width="${formatNumber(options.strokeWidth)}" stroke-linecap="round" stroke-linejoin="round" />`;
+  return `<path d="M ${formatNumber2(left.x)} ${formatNumber2(left.y)} L ${formatNumber2(options.tip.x)} ${formatNumber2(options.tip.y)} L ${formatNumber2(right.x)} ${formatNumber2(right.y)}" fill="none" stroke="${options.stroke}" stroke-width="${formatNumber2(options.strokeWidth)}" stroke-linecap="round" stroke-linejoin="round" />`;
 }
 function renderLineShape(snapshot, shape) {
   const props = asRecord(shape.props) ?? {};
@@ -1765,7 +1830,7 @@ function renderArrowShape(snapshot, shape) {
   const translatedPoints = route.points.map(translate);
   const translatedStartRef = translate(route.startRef);
   const translatedEndRef = translate(route.endRef);
-  const shaft = route.kind === "quadratic" && route.control ? `<path d="M${formatNumber(translatedPoints[0]?.x ?? 0)} ${formatNumber(translatedPoints[0]?.y ?? 0)} Q${formatNumber(route.control.x - localBounds.x)} ${formatNumber(route.control.y - localBounds.y)} ${formatNumber(translatedPoints[1]?.x ?? 0)} ${formatNumber(translatedPoints[1]?.y ?? 0)}" fill="none" ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />` : `<path d="${polylinePath(translatedPoints)}" fill="none" ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />`;
+  const shaft = route.kind === "quadratic" && route.control ? `<path d="M${formatNumber2(translatedPoints[0]?.x ?? 0)} ${formatNumber2(translatedPoints[0]?.y ?? 0)} Q${formatNumber2(route.control.x - localBounds.x)} ${formatNumber2(route.control.y - localBounds.y)} ${formatNumber2(translatedPoints[1]?.x ?? 0)} ${formatNumber2(translatedPoints[1]?.y ?? 0)}" fill="none" ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />` : `<path d="${polylinePath(translatedPoints)}" fill="none" ${strokeAttrs({ stroke, strokeWidth, dash, lineCap: "round", lineJoin: "round" })} />`;
   const startPoint = translatedPoints[0];
   const endPoint = translatedPoints[translatedPoints.length - 1];
   if (!startPoint || !endPoint) return null;
@@ -1797,9 +1862,9 @@ function renderMissingAssetPlaceholder(snapshot, shape, kind, detail) {
   const width = localBounds.width;
   const height = localBounds.height;
   const inner = `
-		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="12" fill="#f4f4f5" stroke="#a1a1aa" stroke-width="1.5" stroke-dasharray="6 6" />
-		<path d="M${formatNumber(width * 0.18)} ${formatNumber(height * 0.7)} L${formatNumber(width * 0.38)} ${formatNumber(height * 0.48)} L${formatNumber(width * 0.56)} ${formatNumber(height * 0.62)} L${formatNumber(width * 0.76)} ${formatNumber(height * 0.32)} L${formatNumber(width * 0.84)} ${formatNumber(height * 0.4)} L${formatNumber(width * 0.84)} ${formatNumber(height * 0.82)} L${formatNumber(width * 0.18)} ${formatNumber(height * 0.82)} Z" fill="#d4d4d8" stroke="#a1a1aa" stroke-width="1" />
-		<circle cx="${formatNumber(width * 0.34)}" cy="${formatNumber(height * 0.34)}" r="${formatNumber(Math.max(6, Math.min(width, height) * 0.05))}" fill="#a1a1aa" />
+		<rect width="${formatNumber2(width)}" height="${formatNumber2(height)}" rx="12" fill="#f4f4f5" stroke="#a1a1aa" stroke-width="1.5" stroke-dasharray="6 6" />
+		<path d="M${formatNumber2(width * 0.18)} ${formatNumber2(height * 0.7)} L${formatNumber2(width * 0.38)} ${formatNumber2(height * 0.48)} L${formatNumber2(width * 0.56)} ${formatNumber2(height * 0.62)} L${formatNumber2(width * 0.76)} ${formatNumber2(height * 0.32)} L${formatNumber2(width * 0.84)} ${formatNumber2(height * 0.4)} L${formatNumber2(width * 0.84)} ${formatNumber2(height * 0.82)} L${formatNumber2(width * 0.18)} ${formatNumber2(height * 0.82)} Z" fill="#d4d4d8" stroke="#a1a1aa" stroke-width="1" />
+		<circle cx="${formatNumber2(width * 0.34)}" cy="${formatNumber2(height * 0.34)}" r="${formatNumber2(Math.max(6, Math.min(width, height) * 0.05))}" fill="#a1a1aa" />
 		${buildForeignObjectTextSvg({ x: 10, y: height * 0.04, width: width - 20, height: height * 0.28, text: kind, fontSize: 15, color: "#18181b", fontWeight: 700, align: "center", verticalAlign: "middle" })}
 		${buildForeignObjectTextSvg({ x: 14, y: height * 0.78, width: width - 28, height: height * 0.16, text: detail, fontSize: 12, color: "#52525b", align: "center", verticalAlign: "middle" })}
 	`;
@@ -1853,10 +1918,10 @@ function renderVideoShape(snapshot, shape) {
   const label = getString(asRecord(asset?.props)?.name) ?? "Video";
   const subtitle = src ?? getString(props.assetId) ?? "Playback not supported in this importer";
   const inner = `
-		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="14" fill="#18181b" stroke="#3f3f46" stroke-width="1.5" />
-		<rect x="${formatNumber(width * 0.04)}" y="${formatNumber(height * 0.08)}" width="${formatNumber(width * 0.92)}" height="${formatNumber(height * 0.66)}" rx="10" fill="#27272a" />
-		<circle cx="${formatNumber(width * 0.5)}" cy="${formatNumber(height * 0.41)}" r="${formatNumber(Math.min(width, height) * 0.12)}" fill="#fafafa" fill-opacity="0.92" />
-		<polygon points="${formatNumber(width * 0.48)},${formatNumber(height * 0.35)} ${formatNumber(width * 0.48)},${formatNumber(height * 0.47)} ${formatNumber(width * 0.57)},${formatNumber(height * 0.41)}" fill="#18181b" />
+		<rect width="${formatNumber2(width)}" height="${formatNumber2(height)}" rx="14" fill="#18181b" stroke="#3f3f46" stroke-width="1.5" />
+		<rect x="${formatNumber2(width * 0.04)}" y="${formatNumber2(height * 0.08)}" width="${formatNumber2(width * 0.92)}" height="${formatNumber2(height * 0.66)}" rx="10" fill="#27272a" />
+		<circle cx="${formatNumber2(width * 0.5)}" cy="${formatNumber2(height * 0.41)}" r="${formatNumber2(Math.min(width, height) * 0.12)}" fill="#fafafa" fill-opacity="0.92" />
+		<polygon points="${formatNumber2(width * 0.48)},${formatNumber2(height * 0.35)} ${formatNumber2(width * 0.48)},${formatNumber2(height * 0.47)} ${formatNumber2(width * 0.57)},${formatNumber2(height * 0.41)}" fill="#18181b" />
 		${buildForeignObjectTextSvg({ x: 16, y: height * 0.76, width: width - 32, height: height * 0.12, text: label, fontSize: 15, color: "#fafafa", fontWeight: 700 })}
 		${buildForeignObjectTextSvg({ x: 16, y: height * 0.88, width: width - 32, height: height * 0.08, text: subtitle, fontSize: 11, color: "#d4d4d8" })}
 	`;
@@ -1882,8 +1947,8 @@ function renderNoteShape(snapshot, shape) {
   const fold = Math.min(width, height) * 0.14;
   const fontSize = sizeToFontPx(getString(props.size)) + numberOr(props.fontSizeAdjustment, 0);
   const inner = `
-		<path d="M0 0 H${formatNumber(width - fold)} L${formatNumber(width)} ${formatNumber(fold)} V${formatNumber(height)} H0 Z" fill="${noteColor}" fill-opacity="0.22" stroke="${noteColor}" stroke-width="1.5" />
-		<path d="M${formatNumber(width - fold)} 0 V${formatNumber(fold)} H${formatNumber(width)}" fill="${noteColor}" fill-opacity="0.3" stroke="${noteColor}" stroke-width="1.5" />
+		<path d="M0 0 H${formatNumber2(width - fold)} L${formatNumber2(width)} ${formatNumber2(fold)} V${formatNumber2(height)} H0 Z" fill="${noteColor}" fill-opacity="0.22" stroke="${noteColor}" stroke-width="1.5" />
+		<path d="M${formatNumber2(width - fold)} 0 V${formatNumber2(fold)} H${formatNumber2(width)}" fill="${noteColor}" fill-opacity="0.3" stroke="${noteColor}" stroke-width="1.5" />
 		${buildForeignObjectTextSvg({ x: 12, y: 12, width: width - 24, height: height - 24, text, fontSize, color: labelColor, padding: 4, align: getString(props.align), verticalAlign: getString(props.verticalAlign) })}
 	`;
   return createCustomImportedItem(
@@ -1899,31 +1964,35 @@ function renderNoteShape(snapshot, shape) {
 }
 function renderBookmarkShape(snapshot, shape) {
   const props = asRecord(shape.props) ?? {};
+  const asset = resolveAsset(snapshot, shape);
+  const assetProps = asRecord(asset?.props) ?? {};
   const localBounds = resolveShapeLocalBounds(snapshot, shape.id);
-  const width = localBounds.width;
-  const height = localBounds.height;
-  const title = getString(props.title) ?? getString(props.label) ?? "Bookmark";
-  const url = getString(props.url) ?? "URL unavailable";
-  const description = getString(props.description) ?? getString(props.hostname) ?? "Imported from tldraw";
-  const stroke = shapeStrokeColor(shape);
-  const inner = `
-		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="16" fill="#ffffff" stroke="${stroke}" stroke-width="1.5" />
-		<rect x="16" y="16" width="${formatNumber(Math.max(56, width * 0.22))}" height="${formatNumber(Math.max(56, height * 0.32))}" rx="12" fill="${stroke}" fill-opacity="0.12" />
-		<path d="M${formatNumber(width * 0.11)} ${formatNumber(height * 0.25)} H${formatNumber(width * 0.18)}" stroke="${stroke}" stroke-width="3" stroke-linecap="round" />
-		${buildForeignObjectTextSvg({ x: width * 0.28, y: 16, width: width * 0.64, height: height * 0.22, text: title, fontSize: 17, color: "#111827", fontWeight: 700 })}
-		${buildForeignObjectTextSvg({ x: width * 0.28, y: height * 0.24, width: width * 0.64, height: height * 0.14, text: url, fontSize: 12, color: stroke })}
-		${buildForeignObjectTextSvg({ x: 16, y: height * 0.46, width: width - 32, height: height * 0.42, text: description, fontSize: 13, color: "#4b5563" })}
-	`;
-  return createCustomImportedItem(
+  const href = getString(props.url) ?? getString(assetProps.src) ?? getString(props.src) ?? "";
+  const title = getString(assetProps.title) ?? getString(props.title) ?? getString(props.label) ?? void 0;
+  const description = getString(assetProps.description) ?? getString(props.description) ?? void 0;
+  const image = getString(assetProps.image) ?? getString(props.image) ?? void 0;
+  const favicon = getString(assetProps.favicon) ?? getString(props.favicon) ?? void 0;
+  const link = {
+    href: href || "URL unavailable",
+    ...title ? { title } : {},
+    ...description ? { description } : {},
+    ...image ? { image } : {},
+    ...favicon ? { favicon } : {}
+  };
+  const inner = buildLinkCardSvg(localBounds.width, localBounds.height, link);
+  const item = createCustomImportedItem(
     snapshot,
     shape,
     localBounds,
-    wrapOpacity(inner, shapeOpacity(shape)),
-    {
-      stroke,
-      strokeWidth: 1.5
-    }
+    wrapOpacity(inner, shapeOpacity(shape))
   );
+  return {
+    ...item,
+    pluginData: {
+      ...item.pluginData ?? {},
+      [LINK_PLUGIN_KEY]: link
+    }
+  };
 }
 function renderEmbedShape(snapshot, shape) {
   const props = asRecord(shape.props) ?? {};
@@ -1934,11 +2003,11 @@ function renderEmbedShape(snapshot, shape) {
   const title = getString(props.title) ?? getString(props.embedTitle) ?? "Embed";
   const url = getString(props.url) ?? getString(props.src) ?? "Embedded content";
   const inner = `
-		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="16" fill="#0f172a" stroke="${stroke}" stroke-width="1.5" />
-		<rect x="16" y="16" width="${formatNumber(width - 32)}" height="${formatNumber(height * 0.62)}" rx="12" fill="#111827" stroke="#334155" stroke-width="1" />
-		<circle cx="${formatNumber(width * 0.14)}" cy="${formatNumber(height * 0.14)}" r="5" fill="#ef4444" />
-		<circle cx="${formatNumber(width * 0.18)}" cy="${formatNumber(height * 0.14)}" r="5" fill="#f59e0b" />
-		<circle cx="${formatNumber(width * 0.22)}" cy="${formatNumber(height * 0.14)}" r="5" fill="#22c55e" />
+		<rect width="${formatNumber2(width)}" height="${formatNumber2(height)}" rx="16" fill="#0f172a" stroke="${stroke}" stroke-width="1.5" />
+		<rect x="16" y="16" width="${formatNumber2(width - 32)}" height="${formatNumber2(height * 0.62)}" rx="12" fill="#111827" stroke="#334155" stroke-width="1" />
+		<circle cx="${formatNumber2(width * 0.14)}" cy="${formatNumber2(height * 0.14)}" r="5" fill="#ef4444" />
+		<circle cx="${formatNumber2(width * 0.18)}" cy="${formatNumber2(height * 0.14)}" r="5" fill="#f59e0b" />
+		<circle cx="${formatNumber2(width * 0.22)}" cy="${formatNumber2(height * 0.14)}" r="5" fill="#22c55e" />
 		${buildForeignObjectTextSvg({ x: 18, y: height * 0.72, width: width - 36, height: height * 0.11, text: title, fontSize: 16, color: "#f8fafc", fontWeight: 700 })}
 		${buildForeignObjectTextSvg({ x: 18, y: height * 0.84, width: width - 36, height: height * 0.08, text: url, fontSize: 11, color: "#cbd5e1" })}
 	`;
@@ -1961,8 +2030,8 @@ function renderFrameShape(snapshot, shape) {
   const stroke = shapeStrokeColor(shape);
   const title = (getString(props.name) ?? getString(props.title) ?? extractPlainText(props)) || "Frame";
   const inner = `
-		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="14" fill="none" stroke="${stroke}" stroke-width="2" stroke-dasharray="10 6" />
-		<rect x="12" y="10" width="${formatNumber(Math.min(width - 24, Math.max(88, width * 0.34)))}" height="28" rx="8" fill="#ffffff" stroke="${stroke}" stroke-width="1.5" />
+		<rect width="${formatNumber2(width)}" height="${formatNumber2(height)}" rx="14" fill="none" stroke="${stroke}" stroke-width="2" stroke-dasharray="10 6" />
+		<rect x="12" y="10" width="${formatNumber2(Math.min(width - 24, Math.max(88, width * 0.34)))}" height="28" rx="8" fill="#ffffff" stroke="${stroke}" stroke-width="1.5" />
 		${buildForeignObjectTextSvg({ x: 16, y: 12, width: Math.min(width - 32, Math.max(80, width * 0.3)), height: 24, text: title, fontSize: 13, color: "#111827", fontWeight: 700, verticalAlign: "middle" })}
 	`;
   return createCustomImportedItem(
@@ -1985,8 +2054,8 @@ function renderAnnotationShape(snapshot, shape) {
   const fill = shape.type === "annotationBubble" ? "#3b82f6" : resolveColor(getString(props.color) ?? "#ef4444");
   const text = shape.type === "label" ? extractPlainText(props) : String(getNumber(props.number) ?? "");
   const inner = `
-		<circle cx="${formatNumber(width / 2)}" cy="${formatNumber(height / 2)}" r="${formatNumber(radius)}" fill="${fill}" stroke="#ffffff" stroke-width="2" />
-		<text x="${formatNumber(width / 2)}" y="${formatNumber(height / 2 + 4)}" fill="#ffffff" font-size="10" font-weight="700" text-anchor="middle" dominant-baseline="central">${escapeXml(text)}</text>
+		<circle cx="${formatNumber2(width / 2)}" cy="${formatNumber2(height / 2)}" r="${formatNumber2(radius)}" fill="${fill}" stroke="#ffffff" stroke-width="2" />
+		<text x="${formatNumber2(width / 2)}" y="${formatNumber2(height / 2 + 4)}" fill="#ffffff" font-size="10" font-weight="700" text-anchor="middle" dominant-baseline="central">${escapeXml(text)}</text>
 	`;
   return createCustomImportedItem(
     snapshot,
@@ -2006,7 +2075,7 @@ function renderUnsupportedShape(snapshot, shape, reason) {
   const width = localBounds.width;
   const height = localBounds.height;
   const inner = `
-		<rect width="${formatNumber(width)}" height="${formatNumber(height)}" rx="12" fill="#fafafa" stroke="#a1a1aa" stroke-width="1.5" stroke-dasharray="6 6" />
+		<rect width="${formatNumber2(width)}" height="${formatNumber2(height)}" rx="12" fill="#fafafa" stroke="#a1a1aa" stroke-width="1.5" stroke-dasharray="6 6" />
 		${buildForeignObjectTextSvg({ x: 12, y: 14, width: width - 24, height: 28, text: shape.type, fontSize: 14, color: "#111827", fontWeight: 700, verticalAlign: "middle" })}
 		${buildForeignObjectTextSvg({ x: 12, y: 50, width: width - 24, height: Math.max(20, height - 62), text: reason, fontSize: 12, color: "#52525b" })}
 	`;