canvu-react 0.3.38 → 0.3.39

package/dist/{asset-hydration-DrTOgDdd.d.ts → asset-hydration-DdFLdlqX.d.ts}

@@ -1,5 +1,5 @@
 import { V as VectorSceneItem } from './types-Bnq2HtHQ.js';
-import { x as VectorViewportAssetStore } from './shape-builders-CsSXKCcs.js';
+import { E as VectorViewportAssetStore } from './shape-builders-C7bxJBGR.js';
 
 declare class IndexedDbImageStore {
     private dbPromise;

package/dist/{asset-hydration-EtEuBwb7.d.cts → asset-hydration-DowNdaOJ.d.cts}

@@ -1,5 +1,5 @@
 import { V as VectorSceneItem } from './types-Bnq2HtHQ.cjs';
-import { x as VectorViewportAssetStore } from './shape-builders-CsbSRZnQ.cjs';
+import { E as VectorViewportAssetStore } from './shape-builders-Dedcl6tw.cjs';
 
 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-DWGk2_GZ.cjs';
+import { C as CanvasPlugin } from './types-DUW61Tjy.cjs';
 import 'react';
 import './types-Bnq2HtHQ.cjs';
 import './camera-Di5R_Rwl.cjs';
-import './shape-builders-CsbSRZnQ.cjs';
+import './shape-builders-Dedcl6tw.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-B6PAYKzx.js';
+import { C as CanvasPlugin } from './types-BBb8KoyW.js';
 import 'react';
 import './types-Bnq2HtHQ.js';
 import './camera-AoTwBSoE.js';
-import './shape-builders-CsSXKCcs.js';
+import './shape-builders-C7bxJBGR.js';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/index.cjs

@@ -2761,6 +2761,105 @@ 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;
@@ -2865,8 +2964,10 @@ var VectorScene = class {
 
 exports.ARROW_BIND_SNAP_PX = ARROW_BIND_SNAP_PX;
 exports.Camera2D = Camera2D;
+exports.DEFAULT_LINK_CARD_SIZE = DEFAULT_LINK_CARD_SIZE;
 exports.DEFAULT_STROKE_STYLE = DEFAULT_STROKE_STYLE;
 exports.DEFAULT_TEXT_FONT_SIZE = DEFAULT_TEXT_FONT_SIZE;
+exports.LINK_PLUGIN_KEY = LINK_PLUGIN_KEY;
 exports.MANAGED_KEY = MANAGED_KEY;
 exports.MAX_RASTER_EMBED_DIMENSION = MAX_RASTER_EMBED_DIMENSION;
 exports.SvgVectorRenderer = SvgVectorRenderer;
@@ -2884,6 +2985,7 @@ exports.buildDrawDotSvg = buildDrawDotSvg;
 exports.buildEllipseSvg = buildEllipseSvg;
 exports.buildFreehandPathSvg = buildFreehandPathSvg;
 exports.buildLineSvg = buildLineSvg;
+exports.buildLinkCardSvg = buildLinkCardSvg;
 exports.buildRectSvg = buildRectSvg;
 exports.buildTextSvg = buildTextSvg;
 exports.cloneVectorSceneItemWithNewId = cloneVectorSceneItemWithNewId;
@@ -2899,6 +3001,7 @@ exports.createFreehandStrokeItem = createFreehandStrokeItem;
 exports.createImageFromVectorTrace = createImageFromVectorTrace;
 exports.createImageItem = createImageItem;
 exports.createLineItem = createLineItem;
+exports.createLinkItem = createLinkItem;
 exports.createRectangleItem = createRectangleItem;
 exports.createShapeId = createShapeId;
 exports.createTextItem = createTextItem;
@@ -2908,9 +3011,11 @@ exports.encodeCanvasToBlob = encodeCanvasToBlob;
 exports.expandCustomShapeTemplate = expandCustomShapeTemplate;
 exports.formatCameraTransform = formatCameraTransform;
 exports.formatItemPlacementTransform = formatItemPlacementTransform;
+exports.getLinkData = getLinkData;
 exports.hitTestWorldPoint = hitTestWorldPoint;
 exports.hydrateSceneItemsWithAssets = hydrateSceneItemsWithAssets;
 exports.isArrowBindTarget = isArrowBindTarget;
+exports.isLinkItem = isLinkItem;
 exports.isManagedImage = isManagedImage;
 exports.itemHitTestWorldPoint = itemHitTestWorldPoint;
 exports.lineEndpointsToLocal = lineEndpointsToLocal;