canvu-react 0.4.47 → 0.4.48

package/dist/{asset-hydration-Dc7fsnTG.d.ts → asset-hydration-BSjiek7Q.d.ts}

@@ -1,5 +1,5 @@
-import { V as VectorSceneItem } from './types-BCCvY6ie.js';
-import { a as VectorViewportAssetStore } from './asset-store-DQPRZEcy.js';
+import { V as VectorSceneItem } from './types-fJNwEnHf.js';
+import { a as VectorViewportAssetStore } from './asset-store-D_FjW_CN.js';
 
 declare class IndexedDbImageStore {
     private dbPromise;

package/dist/{asset-hydration-Cy_2FyV5.d.cts → asset-hydration-F6aM5C7x.d.cts}

@@ -1,5 +1,5 @@
-import { V as VectorSceneItem } from './types-BCCvY6ie.cjs';
-import { a as VectorViewportAssetStore } from './asset-store-TzOPvlgn.cjs';
+import { V as VectorSceneItem } from './types-fJNwEnHf.cjs';
+import { a as VectorViewportAssetStore } from './asset-store-35ysK28r.cjs';
 
 declare class IndexedDbImageStore {
     private dbPromise;

package/dist/{asset-store-TzOPvlgn.d.cts → asset-store-35ysK28r.d.cts}

@@ -1,4 +1,4 @@
-import { V as VectorSceneItem } from './types-BCCvY6ie.cjs';
+import { V as VectorSceneItem } from './types-fJNwEnHf.cjs';
 
 /**
  * Kind of binary selected through the built-in canvu asset ingestion flow.

package/dist/{asset-store-DQPRZEcy.d.ts → asset-store-D_FjW_CN.d.ts}

@@ -1,4 +1,4 @@
-import { V as VectorSceneItem } from './types-BCCvY6ie.js';
+import { V as VectorSceneItem } from './types-fJNwEnHf.js';
 
 /**
  * Kind of binary selected through the built-in canvu asset ingestion flow.

package/dist/chatbot.d.cts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-C4wI3Jyc.cjs';
+import { a as CanvasPlugin } from './types-uzeExFkd.cjs';
 import 'react';
-import './types-BCCvY6ie.cjs';
-import './shape-builders-CKEMjivV.cjs';
-import './link-item-DwzXOwU5.cjs';
-import './asset-store-TzOPvlgn.cjs';
-import './types-BQUbxMgz.cjs';
+import './types-fJNwEnHf.cjs';
+import './shape-builders-BmLS8CNh.cjs';
+import './link-item-BMV3VUCr.cjs';
+import './asset-store-35ysK28r.cjs';
+import './types-BOQLWyCw.cjs';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/chatbot.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-B7xZAKVJ.js';
+import { a as CanvasPlugin } from './types-BAEHaIYO.js';
 import 'react';
-import './types-BCCvY6ie.js';
-import './shape-builders-Cyh8zvDG.js';
-import './link-item-IW4GTnxl.js';
-import './asset-store-DQPRZEcy.js';
-import './types-B82WiQQh.js';
+import './types-fJNwEnHf.js';
+import './shape-builders-BCOAG0pS.js';
+import './link-item-COoNNvCu.js';
+import './asset-store-D_FjW_CN.js';
+import './types-BMMPUak7.js';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/index.cjs

@@ -974,7 +974,7 @@ function buildCustomShapeChildrenSvg(inner, intrinsic, bounds) {
   const sy = b.height / intrinsic.height;
   return `<g transform="scale(${sx},${sy})">${inner}</g>`;
 }
-function createCustomShapeItem(id, bounds, content) {
+function createCustomShapeItem(id, bounds, content, options = {}) {
   const r = normalizeRect(bounds);
   const intrinsic = { width: r.width, height: r.height };
   const inner = resolveCustomInner(content, intrinsic);
@@ -986,6 +986,8 @@ function createCustomShapeItem(id, bounds, content) {
     toolKind: "custom",
     customIntrinsicSize: intrinsic,
     customInnerSvg: inner,
+    ...options.resizeHandles !== void 0 ? { customResizeHandles: options.resizeHandles } : {},
+    ...options.svgClassName ? { svgClassName: options.svgClassName } : {},
     childrenSvg: buildCustomShapeChildrenSvg(inner, intrinsic, r)
   };
 }
@@ -2813,6 +2815,14 @@ function formatItemPlacementTransform(item) {
   const cy = r.height / 2;
   return `translate(${item.x}, ${item.y}) translate(${cx}, ${cy}) rotate(${deg}) translate(${-cx}, ${-cy})`;
 }
+function itemClassName(item) {
+  const kind = item.toolKind ?? "unknown";
+  const classes = [`canvu-item`, `canvu-item--${kind}`];
+  if (item.svgClassName) {
+    classes.push(item.svgClassName);
+  }
+  return classes.join(" ");
+}
 var SvgVectorRenderer = class {
   container;
   scene;
@@ -2820,6 +2830,8 @@ var SvgVectorRenderer = class {
   svg;
   rootG;
   itemNodeCache = /* @__PURE__ */ new Map();
+  selectedIds = /* @__PURE__ */ new Set();
+  hoveredItemId = null;
   liveOverlay = null;
   resizeObserver;
   constructor(options) {
@@ -2840,6 +2852,20 @@ var SvgVectorRenderer = class {
     this.resizeObserver = new ResizeObserver(() => this.render());
     this.resizeObserver.observe(this.container);
   }
+  /**
+   * Updates interaction attributes on item groups for CSS hooks.
+   *
+   * Use `[data-canvu-selected="true"]` and `[data-canvu-hovered="true"]`
+   * for animations in interactive canvases where the scene SVG may ignore
+   * pointer events.
+   */
+  setInteractionState(state) {
+    this.selectedIds = new Set(state.selectedIds ?? []);
+    this.hoveredItemId = state.hoveredItemId ?? null;
+    for (const [id, cached] of this.itemNodeCache) {
+      this.applyInteractionAttributes(cached.g, id);
+    }
+  }
   /**
    * Reads container size, culls items, and updates the SVG (incrementally when possible).
    */
@@ -2876,6 +2902,7 @@ var SvgVectorRenderer = class {
     if (!this.liveOverlay) {
       const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
       g.setAttribute("data-live-overlay", "true");
+      g.setAttribute("data-canvu-item", "true");
       this.liveOverlay = {
         g,
         lastChildrenSvg: "",
@@ -2885,6 +2912,11 @@ var SvgVectorRenderer = class {
     }
     const cached = this.liveOverlay;
     const t = formatItemPlacementTransform(item);
+    cached.g.setAttribute("class", itemClassName(item));
+    cached.g.setAttribute("data-item-id", item.id);
+    cached.g.setAttribute("data-tool-kind", item.toolKind ?? "");
+    cached.g.setAttribute("data-canvu-selected", "false");
+    cached.g.setAttribute("data-canvu-hovered", "false");
     if (cached.lastTransform !== t) {
       cached.g.setAttribute("transform", t);
       cached.lastTransform = t;
@@ -2915,6 +2947,7 @@ var SvgVectorRenderer = class {
       let cached = this.itemNodeCache.get(item.id);
       if (!cached) {
         const g2 = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        g2.setAttribute("data-canvu-item", "true");
         g2.setAttribute("data-item-id", item.id);
         cached = {
           g: g2,
@@ -2924,6 +2957,11 @@ var SvgVectorRenderer = class {
         this.itemNodeCache.set(item.id, cached);
       }
       const { g } = cached;
+      g.setAttribute("class", itemClassName(item));
+      g.setAttribute("data-canvu-item", "true");
+      g.setAttribute("data-item-id", item.id);
+      g.setAttribute("data-tool-kind", item.toolKind ?? "");
+      this.applyInteractionAttributes(g, item.id);
       const t = formatItemPlacementTransform(item);
       if (cached.lastTransform !== t) {
         g.setAttribute("transform", t);
@@ -2940,6 +2978,16 @@ var SvgVectorRenderer = class {
       previousNode = g;
     }
   }
+  applyInteractionAttributes(g, itemId) {
+    g.setAttribute(
+      "data-canvu-selected",
+      this.selectedIds.has(itemId) ? "true" : "false"
+    );
+    g.setAttribute(
+      "data-canvu-hovered",
+      this.hoveredItemId === itemId ? "true" : "false"
+    );
+  }
   destroy() {
     this.resizeObserver.disconnect();
     this.itemNodeCache.clear();