canvu-react 0.3.37 → 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

@@ -414,6 +414,78 @@ async function loadImageFileAsRasterSceneSource(file, maxDimensionOrOptions) {
   }
 }
 
+// src/input/pan-momentum.ts
+var VELOCITY_SAMPLE_WINDOW = 80;
+var FRICTION = 0.94;
+var MIN_VELOCITY = 0.3;
+function createPanMomentumController(camera, onUpdate, sensitivity) {
+  const samples = [];
+  let animationFrameId = null;
+  const cancel = () => {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
+    }
+  };
+  const reset = () => {
+    cancel();
+    samples.length = 0;
+  };
+  const recordMove = (dx, dy) => {
+    const now = performance.now();
+    samples.push({ dx, dy, time: now });
+    const cutoff = now - VELOCITY_SAMPLE_WINDOW;
+    let oldestSample = samples[0];
+    while (oldestSample && oldestSample.time < cutoff) {
+      samples.shift();
+      oldestSample = samples[0];
+    }
+  };
+  const computeReleaseVelocity = () => {
+    if (samples.length < 2) return { vx: 0, vy: 0 };
+    const first = samples[0];
+    const last = samples[samples.length - 1];
+    if (!first || !last) return { vx: 0, vy: 0 };
+    const elapsed = last.time - first.time;
+    if (elapsed < 4) return { vx: 0, vy: 0 };
+    let totalDx = 0;
+    let totalDy = 0;
+    for (const sample of samples) {
+      totalDx += sample.dx;
+      totalDy += sample.dy;
+    }
+    const msPerFrame = 1e3 / 60;
+    return {
+      vx: totalDx / elapsed * msPerFrame * sensitivity,
+      vy: totalDy / elapsed * msPerFrame * sensitivity
+    };
+  };
+  const startMomentum = () => {
+    cancel();
+    const { vx, vy } = computeReleaseVelocity();
+    samples.length = 0;
+    if (Math.abs(vx) < MIN_VELOCITY && Math.abs(vy) < MIN_VELOCITY) {
+      return;
+    }
+    let currentVx = vx;
+    let currentVy = vy;
+    const animate = () => {
+      currentVx *= FRICTION;
+      currentVy *= FRICTION;
+      if (Math.abs(currentVx) < MIN_VELOCITY && Math.abs(currentVy) < MIN_VELOCITY) {
+        animationFrameId = null;
+        return;
+      }
+      camera.x += currentVx;
+      camera.y += currentVy;
+      onUpdate();
+      animationFrameId = requestAnimationFrame(animate);
+    };
+    animationFrameId = requestAnimationFrame(animate);
+  };
+  return { recordMove, startMomentum, cancel, reset };
+}
+
 // src/input/apple-pencil-navigation.ts
 var DRAWING_LIKE_TOOLS = /* @__PURE__ */ new Set([
   "draw",
@@ -444,6 +516,7 @@ function attachApplePencilNavigation(options) {
   let pinchStartDist = 0;
   let pinchStartZoom = 1;
   let panLast = null;
+  let touchMomentum = null;
   const shouldIntercept = (e) => {
     if (e.pointerType !== "touch") return false;
     const tool = getCurrentToolId();
@@ -462,6 +535,10 @@ function attachApplePencilNavigation(options) {
       pointers.clear();
       mode = "idle";
       panLast = null;
+      if (touchMomentum) {
+        touchMomentum.cancel();
+        touchMomentum = null;
+      }
       return;
     }
     if (e.pointerType === "touch" && activePenPointerIds.size > 0) {
@@ -471,10 +548,18 @@ function attachApplePencilNavigation(options) {
       return;
     }
     if (!shouldIntercept(e)) return;
+    if (touchMomentum) {
+      touchMomentum.cancel();
+    }
     pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
     if (pointers.size === 1) {
       mode = "pan";
       panLast = { x: e.clientX, y: e.clientY };
+      touchMomentum = createPanMomentumController(
+        camera,
+        onUpdate,
+        touchPanSensitivity
+      );
     } else if (pointers.size === 2) {
       const vals = Array.from(pointers.values());
       const a = vals[0];
@@ -502,6 +587,7 @@ function attachApplePencilNavigation(options) {
       panLast = { x: e.clientX, y: e.clientY };
       camera.x += dx * touchPanSensitivity;
       camera.y += dy * touchPanSensitivity;
+      touchMomentum?.recordMove(dx, dy);
       onUpdate();
       e.preventDefault();
       e.stopImmediatePropagation();
@@ -548,12 +634,20 @@ function attachApplePencilNavigation(options) {
     if (!pointers.has(e.pointerId)) return;
     pointers.delete(e.pointerId);
     if (pointers.size === 0) {
+      const wasPanning = mode === "pan";
       mode = "idle";
       panLast = null;
+      if (wasPanning && touchMomentum) {
+        touchMomentum.startMomentum();
+        touchMomentum = null;
+      }
     } else if (pointers.size === 1 && mode === "pinch") {
       mode = "pan";
       const r = Array.from(pointers.values())[0];
       panLast = r ?? null;
+      if (touchMomentum) {
+        touchMomentum.reset();
+      }
     }
     e.preventDefault();
     e.stopImmediatePropagation();
@@ -563,6 +657,10 @@ function attachApplePencilNavigation(options) {
   element.addEventListener("pointerup", onPointerUp, { capture: true });
   element.addEventListener("pointercancel", onPointerUp, { capture: true });
   return () => {
+    if (touchMomentum) {
+      touchMomentum.cancel();
+      touchMomentum = null;
+    }
     element.removeEventListener("pointerdown", onPointerDown, { capture: true });
     element.removeEventListener("pointermove", onPointerMove, { capture: true });
     element.removeEventListener("pointerup", onPointerUp, { capture: true });
@@ -615,6 +713,7 @@ function attachViewportInput(options) {
   let pinchStartZoom = 1;
   let panLast = null;
   let mousePanButton = null;
+  let touchMomentum = null;
   const onWheel = (e) => {
     if (e.ctrlKey || e.metaKey) {
       e.preventDefault();
@@ -641,6 +740,9 @@ function attachViewportInput(options) {
     if (touchHandledElsewhere && e.pointerType === "touch") {
       return;
     }
+    if (touchMomentum) {
+      touchMomentum.cancel();
+    }
     const panOk = allowPrimaryPointerPan();
     if (e.pointerType === "mouse" && e.button === 0) {
       if (!panOk) {
@@ -666,6 +768,11 @@ function attachViewportInput(options) {
       if (panOk) {
         mode = "pan";
         panLast = { x: e.clientX, y: e.clientY };
+        touchMomentum = createPanMomentumController(
+          camera,
+          onUpdate,
+          touchPanSensitivity
+        );
         e.preventDefault();
       }
     } else if (pointers.size === 2) {
@@ -702,6 +809,7 @@ function attachViewportInput(options) {
       panLast = { x: e.clientX, y: e.clientY };
       camera.x += dx * touchPanSensitivity;
       camera.y += dy * touchPanSensitivity;
+      touchMomentum?.recordMove(dx, dy);
       onUpdate();
       e.preventDefault();
       return;
@@ -753,15 +861,27 @@ function attachViewportInput(options) {
     }
     pointers.delete(e.pointerId);
     if (pointers.size === 0) {
+      const wasPanning = mode === "pan";
       mode = "idle";
       panLast = null;
+      if (wasPanning && touchMomentum) {
+        touchMomentum.startMomentum();
+        touchMomentum = null;
+      }
     } else if (pointers.size === 1 && mode === "pinch") {
       mode = "pan";
       const remaining = Array.from(pointers.values())[0];
       panLast = remaining ?? null;
+      if (touchMomentum) {
+        touchMomentum.reset();
+      }
     }
   };
   const onPointerCancel = (e) => {
+    if (touchMomentum) {
+      touchMomentum.cancel();
+      touchMomentum = null;
+    }
     onPointerUp(e);
   };
   wheelTarget.addEventListener("wheel", onWheel, { passive: false });
@@ -770,6 +890,10 @@ function attachViewportInput(options) {
   element.addEventListener("pointerup", onPointerUp);
   element.addEventListener("pointercancel", onPointerCancel);
   return () => {
+    if (touchMomentum) {
+      touchMomentum.cancel();
+      touchMomentum = null;
+    }
     wheelTarget.removeEventListener("wheel", onWheel);
     element.removeEventListener("pointerdown", onPointerDown);
     element.removeEventListener("pointermove", onPointerMove);
@@ -2482,6 +2606,7 @@ var SvgVectorRenderer = class {
   svg;
   rootG;
   itemNodeCache = /* @__PURE__ */ new Map();
+  liveOverlay = null;
   resizeObserver;
   constructor(options) {
     this.container = options.container;
@@ -2516,6 +2641,50 @@ var SvgVectorRenderer = class {
     const items = cullItemsByViewport(this.scene.getItems(), visible);
     this.syncVisibleItems(items);
     this.rootG.setAttribute("transform", formatCameraTransform(this.camera));
+    this.keepLiveOverlayOnTop();
+  }
+  /**
+   * Updates only the in-progress (live) stroke node without re-culling or
+   * re-syncing the committed scene items. Drawing tools call this on every
+   * pointer move, so it must stay O(1) regardless of how many items the
+   * board already contains.
+   *
+   * Pass `null` to remove the live overlay (e.g. when the stroke is committed).
+   */
+  renderLiveItem(item) {
+    if (!item) {
+      if (this.liveOverlay) {
+        this.liveOverlay.g.remove();
+        this.liveOverlay = null;
+      }
+      return;
+    }
+    if (!this.liveOverlay) {
+      const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      g.setAttribute("data-live-overlay", "true");
+      this.liveOverlay = {
+        g,
+        lastChildrenSvg: "",
+        lastTransform: ""
+      };
+      this.rootG.appendChild(g);
+    }
+    const cached = this.liveOverlay;
+    const t = formatItemPlacementTransform(item);
+    if (cached.lastTransform !== t) {
+      cached.g.setAttribute("transform", t);
+      cached.lastTransform = t;
+    }
+    if (cached.lastChildrenSvg !== item.childrenSvg) {
+      cached.g.innerHTML = item.childrenSvg;
+      cached.lastChildrenSvg = item.childrenSvg;
+    }
+    this.keepLiveOverlayOnTop();
+  }
+  keepLiveOverlayOnTop() {
+    if (this.liveOverlay && this.rootG.lastChild !== this.liveOverlay.g) {
+      this.rootG.appendChild(this.liveOverlay.g);
+    }
   }
   syncVisibleItems(items) {
     const visibleIds = /* @__PURE__ */ new Set();
@@ -2560,6 +2729,7 @@ var SvgVectorRenderer = class {
   destroy() {
     this.resizeObserver.disconnect();
     this.itemNodeCache.clear();
+    this.liveOverlay = null;
     this.svg.remove();
   }
   /** Toggle whether the scene SVG receives pointer events (vs overlay handling them). */
@@ -2591,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;
@@ -2695,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;
@@ -2714,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;
@@ -2729,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;
@@ -2738,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;