canvu-react 0.4.30 → 0.4.32

package/dist/{link-item-D870_X6P.d.cts → link-item-Dncuz2d_.d.cts}

@@ -132,7 +132,7 @@ type CanvuLinkData = {
  * 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;
+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). */
@@ -144,8 +144,8 @@ declare function isLinkItem(item: VectorSceneItem): boolean;
 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;
+    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 };

package/dist/{link-item-Bg5vj0RI.d.ts → link-item-voRU0Up9.d.ts}

@@ -132,7 +132,7 @@ type CanvuLinkData = {
  * 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;
+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). */
@@ -144,8 +144,8 @@ declare function isLinkItem(item: VectorSceneItem): boolean;
 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;
+    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 };

package/dist/native.cjs

@@ -35,11 +35,165 @@ function buildCustomShapeChildrenSvg(inner, intrinsic, bounds) {
   return `<g transform="scale(${sx},${sy})">${inner}</g>`;
 }
 
+// src/scene/link-item.ts
+var LINK_PLUGIN_KEY = "canvuLink";
+var DEFAULT_LINK_CARD_WIDTH = 320;
+var DEFAULT_LINK_CARD_HEIGHT = 70;
+var LINK_CARD_MIN_SCALE = 0.6;
+var LINK_CARD_MAX_SCALE = 2.5;
+var LINK_CARD_ASPECT = DEFAULT_LINK_CARD_WIDTH / DEFAULT_LINK_CARD_HEIGHT;
+var LINK_CARD_BORDER = "oklch(0.918 0.008 255)";
+var LINK_CARD_BORDER_STRONG = "oklch(0.86 0.012 255)";
+var LINK_CARD_ACCENT = "oklch(0.55 0.19 264)";
+var LINK_CARD_ACCENT_DEEP = "oklch(0.46 0.18 264)";
+var LINK_CARD_TITLE_COLOR = "oklch(0.26 0.022 265)";
+var LINK_CARD_TEXT_COLOR = "oklch(0.55 0.022 265)";
+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.height;
+  const weight = band.fontWeight != null ? `font-weight:${band.fontWeight};` : "";
+  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;letter-spacing:-0.01em;color:${band.color};overflow:hidden;white-space:nowrap;text-overflow:ellipsis;${weight}">${escapeHtmlText(band.text)}</div></foreignObject>`;
+};
+var getLinkProtocol = (href) => {
+  try {
+    return new URL(href).protocol;
+  } catch {
+    return "";
+  }
+};
+var getLinkInitial = (hostname) => {
+  const first = hostname.trim().charAt(0).toUpperCase();
+  return first || "L";
+};
+var buildGoogleFaviconUrl = (hostname) => hostname ? `https://www.google.com/s2/favicons?domain=${encodeURIComponent(hostname)}&sz=64` : null;
+var getStableLinkIdSuffix = (value) => {
+  let hash = 0;
+  for (const char of value) {
+    hash = hash * 31 + char.charCodeAt(0) >>> 0;
+  }
+  return hash.toString(36);
+};
+function buildLinkCardSvg(width, _height, link) {
+  const cardWidth = Math.max(1, width);
+  const scale = cardWidth / DEFAULT_LINK_CARD_WIDTH;
+  const contentWidth = DEFAULT_LINK_CARD_WIDTH;
+  const contentHeight = DEFAULT_LINK_CARD_HEIGHT;
+  const padding = 14;
+  const badgeSize = 42;
+  const gap = 13;
+  const buttonSize = 34;
+  const textX = padding + badgeSize + gap;
+  const textWidth = Math.max(1, contentWidth - textX - buttonSize - gap - padding);
+  const hostname = getLinkHostname(link.href);
+  const title = link.title?.trim() || hostname || "Link";
+  const protocol = getLinkProtocol(link.href);
+  const subtitle = hostname || link.href;
+  const favicon = link.favicon?.trim() || buildGoogleFaviconUrl(hostname);
+  const idSuffix = getStableLinkIdSuffix(`${hostname}:${link.href}`);
+  const clipId = `canvu-link-favicon-${idSuffix}`;
+  const gradientId = `canvu-link-favicon-gradient-${idSuffix}`;
+  const buttonX = contentWidth - padding - buttonSize;
+  const buttonY = (contentHeight - buttonSize) / 2;
+  const isSecure = protocol === "https:";
+  const subtitleX = isSecure ? textX + 13 : textX;
+  const subtitleWidth = isSecure ? textWidth - 13 : textWidth;
+  const faviconImage = favicon ? `<image class="canvu-link-favicon-img" href="${escapeXmlAttribute(favicon)}" x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" preserveAspectRatio="xMidYMid slice" clip-path="url(#${clipId})" />` : "";
+  return `
+		<style>
+			.canvu-link-card-root .canvu-link-card { transition: transform .18s ease, filter .18s ease, stroke .18s ease; }
+			.canvu-link-card-root .canvu-link-open { opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
+			.canvu-link-card-root:hover .canvu-link-card { transform: translateY(-2px); filter: drop-shadow(0 4px 14px oklch(0.4 0.05 265 / .08)) drop-shadow(0 1px 3px oklch(0.4 0.05 265 / .06)); stroke: ${LINK_CARD_BORDER_STRONG}; }
+			.canvu-link-card-root:hover .canvu-link-open { opacity: 1; transform: translateX(0); }
+		</style>
+		<g class="canvu-link-card-root" transform="scale(${formatNumber(scale)})">
+			<rect class="canvu-link-card" width="${formatNumber(contentWidth)}" height="${formatNumber(contentHeight)}" rx="16" fill="#ffffff" stroke="${LINK_CARD_BORDER}" stroke-width="1" filter="drop-shadow(0 1px 2px oklch(0.4 0.03 265 / .05)) drop-shadow(0 1px 1px oklch(0.4 0.03 265 / .04))" />
+			<defs>
+				<linearGradient id="${gradientId}" x1="8" y1="48" x2="48" y2="8" gradientUnits="userSpaceOnUse">
+					<stop stop-color="${LINK_CARD_ACCENT}" />
+					<stop offset="1" stop-color="${LINK_CARD_ACCENT_DEEP}" />
+				</linearGradient>
+				<clipPath id="${clipId}">
+					<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="11" />
+				</clipPath>
+			</defs>
+			<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="11" fill="url(#${gradientId})" />
+			<text x="${formatNumber(padding + badgeSize / 2)}" y="${formatNumber(padding + badgeSize / 2 + 5)}" text-anchor="middle" font-family="system-ui,sans-serif" font-size="17" font-weight="700" fill="#ffffff">${escapeHtmlText(getLinkInitial(hostname))}</text>
+			${faviconImage}
+			${buildLinkTextBand({ x: textX, y: 16, width: textWidth, height: 19, text: title, fontSize: 14.5, color: LINK_CARD_TITLE_COLOR, fontWeight: 700 })}
+			${isSecure ? `<g transform="translate(${formatNumber(textX)},40)" stroke="${LINK_CARD_TEXT_COLOR}" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" fill="none"><rect x="1.5" y="4.5" width="7" height="6" rx="1" /><path d="M3 4.5 V3 a2 2 0 0 1 4 0 v1.5" /></g>` : ""}
+			${buildLinkTextBand({ x: subtitleX, y: 36, width: subtitleWidth, height: 17, text: subtitle, fontSize: 12.5, color: LINK_CARD_TEXT_COLOR })}
+			<g class="canvu-link-open" transform="translate(${formatNumber(buttonX)},${formatNumber(buttonY)})">
+				<rect width="${formatNumber(buttonSize)}" height="${formatNumber(buttonSize)}" rx="10" fill="#ffffff" stroke="${LINK_CARD_BORDER}" stroke-width="1" />
+				<g transform="translate(10,10)" stroke="${LINK_CARD_TEXT_COLOR}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none">
+					<path d="M8 2 H14 V8" />
+					<path d="M14 2 L7 9" />
+					<path d="M12 10 V13 a1 1 0 0 1 -1 1 H3 a1 1 0 0 1 -1 -1 V5 a1 1 0 0 1 1 -1 H6" />
+				</g>
+			</g>
+		</g>
+	`;
+}
+var isCanvuLinkData = (value) => {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value;
+  return typeof candidate.href === "string" && candidate.href.length > 0;
+};
+function getLinkData(item) {
+  const entry = item.pluginData?.[LINK_PLUGIN_KEY];
+  return isCanvuLinkData(entry) ? entry : null;
+}
+function rebuildLinkItemSvg(item) {
+  const link = getLinkData(item);
+  if (!link) return item;
+  const scale = clamp(
+    item.bounds.width / DEFAULT_LINK_CARD_WIDTH,
+    LINK_CARD_MIN_SCALE,
+    LINK_CARD_MAX_SCALE
+  );
+  const width = DEFAULT_LINK_CARD_WIDTH * scale;
+  const height = DEFAULT_LINK_CARD_HEIGHT * scale;
+  const bounds = {
+    ...item.bounds,
+    width,
+    height
+  };
+  const customInnerSvg = buildLinkCardSvg(
+    DEFAULT_LINK_CARD_WIDTH,
+    DEFAULT_LINK_CARD_HEIGHT,
+    link
+  );
+  return {
+    ...item,
+    x: bounds.x,
+    y: bounds.y,
+    bounds,
+    customIntrinsicSize: {
+      width: DEFAULT_LINK_CARD_WIDTH,
+      height: DEFAULT_LINK_CARD_HEIGHT
+    },
+    customInnerSvg,
+    childrenSvg: buildLinkCardSvg(width, height, link)
+  };
+}
+
 // 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;
@@ -154,9 +308,9 @@ function buildTextFixedBoundsSvg(content, width, height, fillColor = "#1d1d1d",
   const trimmed = content.trim();
   const padTop = EDIT_TOP_PAD_RATIO * fontSize;
   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:${padTop}px 4px 0 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:${TEXT_FONT_FAMILY};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:${padTop}px 4px 0 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:${TEXT_FONT_FAMILY};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:${padTop}px 4px 0 4px;font-size:${fontSize}px;line-height:${lh}px;font-family:${TEXT_FONT_FAMILY};white-space:pre-wrap;word-wrap:break-word;overflow:hidden;color:${fillColor}">${body}</div></foreignObject>`;
 }
 
@@ -754,6 +908,9 @@ function rebuildItemSvg(item) {
       )
     };
   }
+  if (getLinkData(item)) {
+    return rebuildLinkItemSvg(item);
+  }
   if (k === "custom" && item.customIntrinsicSize && item.customInnerSvg) {
     const b = normalizeRect(item.bounds);
     return {
@@ -3716,8 +3873,77 @@ function collectEraserTargetsAtWorldPoint(items, worldX, worldY, options) {
 }
 
 // src/interaction/mutations.ts
+var LINK_CORNER_HANDLES = /* @__PURE__ */ new Set(["nw", "ne", "se", "sw"]);
+var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
+var clampLinkResizeBounds = (startBounds, nextBounds, handle, intrinsicWidth) => {
+  const next = normalizeRect(nextBounds);
+  const scale = clamp2(
+    next.width / Math.max(1e-9, intrinsicWidth),
+    LINK_CARD_MIN_SCALE,
+    LINK_CARD_MAX_SCALE
+  );
+  const width = intrinsicWidth * scale;
+  const height = width / LINK_CARD_ASPECT;
+  const start = normalizeRect(startBounds);
+  const x0 = start.x;
+  const y0 = start.y;
+  const x1 = start.x + start.width;
+  const y1 = start.y + start.height;
+  switch (handle) {
+    case "nw":
+      return { x: x1 - width, y: y1 - height, width, height };
+    case "ne":
+      return { x: x0, y: y1 - height, width, height };
+    case "sw":
+      return { x: x1 - width, y: y0, width, height };
+    default:
+      return { x: x0, y: y0, width, height };
+  }
+};
 function computeNewBoundsForResize(item, sb, handle, currentWorld) {
   const rot = getItemRotationRad(item);
+  const link = getLinkData(item);
+  if (link && item.customIntrinsicSize) {
+    if (!LINK_CORNER_HANDLES.has(handle)) return sb;
+    const intrinsicWidth = Math.max(1e-9, item.customIntrinsicSize.width);
+    if (Math.abs(rot) < 1e-12) {
+      const next = computeResizeBoundsFixedAspect(
+        sb,
+        handle,
+        currentWorld,
+        LINK_CARD_ASPECT
+      );
+      return clampLinkResizeBounds(sb, next, handle, intrinsicWidth);
+    }
+    const local2 = worldToItemLocal(
+      currentWorld.x,
+      currentWorld.y,
+      sb.x,
+      sb.y,
+      sb.width,
+      sb.height,
+      rot
+    );
+    const localBounds3 = { x: 0, y: 0, width: sb.width, height: sb.height };
+    const nextLocal = computeResizeBoundsFixedAspect(
+      localBounds3,
+      handle,
+      local2,
+      LINK_CARD_ASPECT
+    );
+    const clamped = clampLinkResizeBounds(
+      localBounds3,
+      nextLocal,
+      handle,
+      intrinsicWidth
+    );
+    return {
+      x: sb.x + clamped.x,
+      y: sb.y + clamped.y,
+      width: clamped.width,
+      height: clamped.height
+    };
+  }
   if (Math.abs(rot) < 1e-12) {
     if (item.toolKind === "image") {
       let aspect;