canvu-react 0.4.30 → 0.4.32

package/dist/native.js

@@ -29,11 +29,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;
@@ -148,9 +302,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>`;
 }
 
@@ -748,6 +902,9 @@ function rebuildItemSvg(item) {
       )
     };
   }
+  if (getLinkData(item)) {
+    return rebuildLinkItemSvg(item);
+  }
   if (k === "custom" && item.customIntrinsicSize && item.customInnerSvg) {
     const b = normalizeRect(item.bounds);
     return {
@@ -3710,8 +3867,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;