canvu-react 0.4.31 → 0.4.32

package/dist/tldraw.js

@@ -46,10 +46,16 @@ 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 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_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;
@@ -65,49 +71,131 @@ var getLinkHostname = (href) => {
   }
 };
 var buildLinkTextBand = (band) => {
-  const lineHeight = band.fontSize * 1.3;
+  const lineHeight = band.height;
   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>`;
+  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>`;
 };
-function buildLinkCardSvg(width, height, link) {
+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 cardHeight = Math.max(1, height);
+  const scale = cardWidth / DEFAULT_LINK_CARD_WIDTH;
+  const contentWidth = DEFAULT_LINK_CARD_WIDTH;
+  const contentHeight = DEFAULT_LINK_CARD_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 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 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>`;
+  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 `
-		<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 })}
+		<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) {
@@ -811,6 +899,9 @@ function rebuildItemSvg(item) {
       )
     };
   }
+  if (getLinkData(item)) {
+    return rebuildLinkItemSvg(item);
+  }
   if (k === "custom" && item.customIntrinsicSize && item.customInnerSvg) {
     const b = normalizeRect(item.bounds);
     return {