canvu-react 0.4.30 → 0.4.32

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

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

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

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

package/dist/chatbot.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-Bw1SdC9v.cjs';
+import { C as CanvasPlugin } from './types-BS-YG8Hx.cjs';
 import 'react';
 import './types-BCCvY6ie.cjs';
 import './shape-builders-CKEMjivV.cjs';
-import './link-item-D870_X6P.cjs';
+import './link-item-Dncuz2d_.cjs';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/chatbot.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-DeXFfs7Y.js';
+import { C as CanvasPlugin } from './types-UZYYwK-v.js';
 import 'react';
 import './types-BCCvY6ie.js';
 import './shape-builders-Cyh8zvDG.js';
-import './link-item-Bg5vj0RI.js';
+import './link-item-voRU0Up9.js';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/index.cjs

@@ -990,11 +990,187 @@ function createCustomShapeItem(id, bounds, content) {
   };
 }
 
+// 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_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 isLinkItem(item) {
+  return getLinkData(item) != 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)
+  };
+}
+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) {
   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;
@@ -1102,9 +1278,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>`;
 }
 
@@ -1702,6 +1878,9 @@ function rebuildItemSvg(item) {
       )
     };
   }
+  if (getLinkData(item)) {
+    return rebuildLinkItemSvg(item);
+  }
   if (k === "custom" && item.customIntrinsicSize && item.customInnerSvg) {
     const b = normalizeRect(item.bounds);
     return {
@@ -2805,105 +2984,6 @@ function cloneVectorSceneItemsWithNewIds(items) {
   return items.map(cloneVectorSceneItemWithNewId);
 }
 
-// src/scene/link-item.ts
-var LINK_PLUGIN_KEY = "canvuLink";
-var DEFAULT_LINK_CARD_WIDTH = 360;
-var DEFAULT_LINK_CARD_HEIGHT = 132;
-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 escapeHtmlText2 = (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}">${escapeHtmlText2(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 })}
-	`;
-}
-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 isLinkItem(item) {
-  return getLinkData(item) != null;
-}
-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 {
-    ...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/managed-images.ts
 var MANAGED_KEY = "managed";
 var STACK_GAP_WORLD = 16;