canvu-react 0.4.31 → 0.4.32

package/dist/react.cjs

@@ -56,11 +56,170 @@ var init_custom_shape = __esm({
   }
 });
 
+// src/scene/link-item.ts
+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>
+	`;
+}
+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)
+  };
+}
+var LINK_PLUGIN_KEY, DEFAULT_LINK_CARD_WIDTH, DEFAULT_LINK_CARD_HEIGHT, LINK_CARD_MIN_SCALE, LINK_CARD_MAX_SCALE, LINK_CARD_ASPECT, LINK_CARD_BORDER, LINK_CARD_BORDER_STRONG, LINK_CARD_ACCENT, LINK_CARD_ACCENT_DEEP, LINK_CARD_TITLE_COLOR, LINK_CARD_TEXT_COLOR, clamp, formatNumber, escapeXmlAttribute, escapeHtmlText, getLinkHostname, buildLinkTextBand, getLinkProtocol, getLinkInitial, buildGoogleFaviconUrl, getStableLinkIdSuffix, isCanvuLinkData;
+var init_link_item = __esm({
+  "src/scene/link-item.ts"() {
+    LINK_PLUGIN_KEY = "canvuLink";
+    DEFAULT_LINK_CARD_WIDTH = 320;
+    DEFAULT_LINK_CARD_HEIGHT = 70;
+    LINK_CARD_MIN_SCALE = 0.6;
+    LINK_CARD_MAX_SCALE = 2.5;
+    LINK_CARD_ASPECT = DEFAULT_LINK_CARD_WIDTH / DEFAULT_LINK_CARD_HEIGHT;
+    LINK_CARD_BORDER = "oklch(0.918 0.008 255)";
+    LINK_CARD_BORDER_STRONG = "oklch(0.86 0.012 255)";
+    LINK_CARD_ACCENT = "oklch(0.55 0.19 264)";
+    LINK_CARD_ACCENT_DEEP = "oklch(0.46 0.18 264)";
+    LINK_CARD_TITLE_COLOR = "oklch(0.26 0.022 265)";
+    LINK_CARD_TEXT_COLOR = "oklch(0.55 0.022 265)";
+    clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+    formatNumber = (value) => {
+      const rounded = Math.round(value * 100) / 100;
+      return Object.is(rounded, -0) ? "0" : String(rounded);
+    };
+    escapeXmlAttribute = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+    escapeHtmlText = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+    getLinkHostname = (href) => {
+      try {
+        return new URL(href).hostname.replace(/^www\./, "");
+      } catch {
+        return href;
+      }
+    };
+    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>`;
+    };
+    getLinkProtocol = (href) => {
+      try {
+        return new URL(href).protocol;
+      } catch {
+        return "";
+      }
+    };
+    getLinkInitial = (hostname) => {
+      const first = hostname.trim().charAt(0).toUpperCase();
+      return first || "L";
+    };
+    buildGoogleFaviconUrl = (hostname) => hostname ? `https://www.google.com/s2/favicons?domain=${encodeURIComponent(hostname)}&sz=64` : null;
+    getStableLinkIdSuffix = (value) => {
+      let hash = 0;
+      for (const char of value) {
+        hash = hash * 31 + char.charCodeAt(0) >>> 0;
+      }
+      return hash.toString(36);
+    };
+    isCanvuLinkData = (value) => {
+      if (!value || typeof value !== "object") return false;
+      const candidate = value;
+      return typeof candidate.href === "string" && candidate.href.length > 0;
+    };
+  }
+});
+
 // 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;");
 }
 function getSharedMeasureContext() {
@@ -161,9 +320,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>`;
 }
 var DEFAULT_TEXT_FONT_SIZE, DEFAULT_TEXT_TOOL_FONT_SIZE, TEXT_FONT_FAMILY, LINE_HEIGHT_RATIO, FIRST_LINE_BASELINE_RATIO, EDIT_TOP_PAD_RATIO, BOTTOM_PAD_RATIO, PLACEHOLDER, MIN_TEXT_BOX_W, MIN_TEXT_BOX_H, TEXT_PAD_X, MAX_TEXT_MEASURE_CACHE_ENTRIES, sharedMeasureContext, textMeasureCache;
@@ -820,6 +979,9 @@ function rebuildItemSvg(item) {
       )
     };
   }
+  if (getLinkData(item)) {
+    return rebuildLinkItemSvg(item);
+  }
   if (k === "custom" && item.customIntrinsicSize && item.customInnerSvg) {
     const b = normalizeRect(item.bounds);
     return {
@@ -1045,6 +1207,7 @@ var init_shape_builders = __esm({
   "src/scene/shape-builders.ts"() {
     init_rect();
     init_custom_shape();
+    init_link_item();
     init_text_svg();
     DEFAULT_STROKE_STYLE = {
       stroke: "#1d1d1d",
@@ -6362,10 +6525,80 @@ function collectEraserTargetsAtWorldPoint(items, worldX, worldY, options) {
 
 // src/interaction/mutations.ts
 init_rect();
+init_link_item();
 init_shape_builders();
 init_text_svg();
+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 localBounds2 = { x: 0, y: 0, width: sb.width, height: sb.height };
+    const nextLocal = computeResizeBoundsFixedAspect(
+      localBounds2,
+      handle,
+      local2,
+      LINK_CARD_ASPECT
+    );
+    const clamped = clampLinkResizeBounds(
+      localBounds2,
+      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;
@@ -6838,17 +7071,8 @@ var SvgVectorRenderer = class {
   }
 };
 
-// src/scene/link-item.ts
-var LINK_PLUGIN_KEY = "canvuLink";
-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;
-}
+// src/react/VectorViewport.tsx
+init_link_item();
 
 // src/scene/scene.ts
 var VectorScene = class {
@@ -6942,8 +7166,10 @@ function smoothFreehandPointsToPathD(points) {
 }
 
 // src/react/InteractionOverlay.tsx
+init_link_item();
 init_shape_builders();
 var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+var LINK_HANDLE_ORDER = ["nw", "ne", "se", "sw"];
 var ERASER_TINT = "#cbd5e1";
 var ERASER_TINT_OPACITY = 0.95;
 var ERASER_PREVIEW_OPACITY = 0.3;
@@ -6996,7 +7222,7 @@ function InteractionOverlay({
         ) }, it.id);
       }),
       showResizeHandles && bSingle && single && rotHandlePos && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        HANDLE_ORDER.map((hid) => {
+        (getLinkData(single) ? LINK_HANDLE_ORDER : HANDLE_ORDER).map((hid) => {
           const p = getHandleWorldPositionRotated(bSingle, hid, rotSingle);
           return /* @__PURE__ */ jsxRuntime.jsx(
             "circle",
@@ -7810,6 +8036,7 @@ function defaultPlacementWorld(tool, center) {
     lineWorld: [a, b]
   };
 }
+var LINK_CORNER_HANDLES2 = /* @__PURE__ */ new Set(["nw", "ne", "se", "sw"]);
 function pointInSelectedItemBounds(item, worldX, worldY) {
   const bounds = normalizeRect(item.bounds);
   const local = worldToItemLocal(
@@ -8287,7 +8514,11 @@ var VectorViewport = react.forwardRef(
     setEffectiveSelectedIdsRef.current = setEffectiveSelectedIds;
     toolIdRef.current = toolId;
     interactiveRef.current = interactive;
-    itemsRef.current = items;
+    const normalizedItems = react.useMemo(
+      () => items.map((item) => getLinkData(item) ? rebuildLinkItemSvg(item) : item),
+      [items]
+    );
+    itemsRef.current = normalizedItems;
     onWorldPointerDownRef.current = onWorldPointerDown;
     const originalOnItemsChangeRef = react.useRef(onItemsChange);
     originalOnItemsChangeRef.current = onItemsChange;
@@ -8308,7 +8539,10 @@ var VectorViewport = react.forwardRef(
     autoResetToolToRef.current = autoResetToolTo;
     const onToolChangeRequestRef = react.useRef(onToolChangeRequest);
     onToolChangeRequestRef.current = onToolChangeRequest;
-    const resolvedItems = react.useMemo(() => resolveArrowBindingsInScene(items), [items]);
+    const resolvedItems = react.useMemo(
+      () => resolveArrowBindingsInScene(normalizedItems),
+      [normalizedItems]
+    );
     const resolvedItemsRef = react.useRef(resolvedItems);
     resolvedItemsRef.current = resolvedItems;
     const liveId = react.useId();
@@ -9729,7 +9963,8 @@ var VectorViewport = react.forwardRef(
               handleRadiusWorld,
               rot
             );
-            if (hb) {
+            const isLinkResizeHandle = hb && getLinkData(selected) ? LINK_CORNER_HANDLES2.has(hb) : Boolean(hb);
+            if (hb && isLinkResizeHandle) {
               const snapRs = bakedSnapshot(selected.id);
               if (!snapRs) return;
               dragStateRef.current = {