canvu-react 0.4.46 → 0.4.48

package/dist/index.d.cts

@@ -1,10 +1,10 @@
-import { C as Camera2D } from './shape-builders-CKEMjivV.cjs';
-export { a as Camera2DOptions, D as DEFAULT_STROKE_STYLE, F as FreehandSvgPayload, S as StrokeStyle, b as applyStrokeToItem, c as buildArchitecturalCloudPathD, d as buildArchitecturalCloudSvg, e as buildArrowSvg, f as buildDrawDotSvg, g as buildEllipseSvg, h as buildFreehandPathSvg, i as buildLineSvg, j as buildRectSvg, k as computeFreehandSvgPayload, l as createArchitecturalCloudItem, m as createDrawDotItem, n as createEllipseItem, o as createFreehandStrokeItem, p as createImageFromVectorTrace, q as createImageItem, r as createLineItem, s as createRectangleItem, t as createShapeId, u as createTextItem, v as lineEndpointsToLocal, w as rebuildItemSvg, x as resolveStrokeStyle } from './shape-builders-CKEMjivV.cjs';
-import { V as VectorSceneItem, A as ArrowEndpointBinding, R as Rect } from './types-BCCvY6ie.cjs';
-export { a as ArrowBindings, b as VectorPathPoint, n as normalizeRect, r as rectsIntersect } from './types-BCCvY6ie.cjs';
-export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-Cy_2FyV5.cjs';
-export { C as CanvuLinkData, D as DEFAULT_LINK_CARD_SIZE, L as LINK_PLUGIN_KEY, b as buildLinkCardSvg, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-DwzXOwU5.cjs';
-import './asset-store-TzOPvlgn.cjs';
+import { C as Camera2D } from './shape-builders-BmLS8CNh.cjs';
+export { a as Camera2DOptions, D as DEFAULT_STROKE_STYLE, F as FreehandSvgPayload, S as StrokeStyle, b as applyStrokeToItem, c as buildArchitecturalCloudPathD, d as buildArchitecturalCloudSvg, e as buildArrowSvg, f as buildDrawDotSvg, g as buildEllipseSvg, h as buildFreehandPathSvg, i as buildLineSvg, j as buildRectSvg, k as computeFreehandSvgPayload, l as createArchitecturalCloudItem, m as createDrawDotItem, n as createEllipseItem, o as createFreehandStrokeItem, p as createImageFromVectorTrace, q as createImageItem, r as createLineItem, s as createRectangleItem, t as createShapeId, u as createTextItem, v as lineEndpointsToLocal, w as rebuildItemSvg, x as resolveStrokeStyle } from './shape-builders-BmLS8CNh.cjs';
+import { V as VectorSceneItem, A as ArrowEndpointBinding, C as CustomShapeResizeHandles, R as Rect } from './types-fJNwEnHf.cjs';
+export { a as ArrowBindings, b as ResizeHandleId, c as VectorPathPoint, n as normalizeRect, r as rectsIntersect } from './types-fJNwEnHf.cjs';
+export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-F6aM5C7x.cjs';
+export { C as CanvuLinkData, D as DEFAULT_LINK_CARD_SIZE, L as LINK_PLUGIN_KEY, b as buildLinkCardSvg, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-BMV3VUCr.cjs';
+import './asset-store-35ysK28r.cjs';
 
 type EncodeCanvasToBlobOptions = {
     mimeType?: string;
@@ -181,6 +181,10 @@ type SvgVectorRendererOptions = {
      */
     pointerEventsNone?: boolean;
 };
+type SvgVectorRendererInteractionState = {
+    selectedIds?: readonly string[];
+    hoveredItemId?: string | null;
+};
 /**
  * Renders vector scene items into a single SVG: camera as an outer `<g>` transform,
  * so geometry stays sharp at any zoom (no fixed-resolution raster).
@@ -196,9 +200,19 @@ declare class SvgVectorRenderer {
     private readonly svg;
     private readonly rootG;
     private readonly itemNodeCache;
+    private selectedIds;
+    private hoveredItemId;
     private liveOverlay;
     private readonly resizeObserver;
     constructor(options: SvgVectorRendererOptions);
+    /**
+     * 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: SvgVectorRendererInteractionState): void;
     /**
      * Reads container size, culls items, and updates the SVG (incrementally when possible).
      */
@@ -214,6 +228,7 @@ declare class SvgVectorRenderer {
     renderLiveItem(item: VectorSceneItem | null): void;
     private keepLiveOverlayOnTop;
     private syncVisibleItems;
+    private applyInteractionAttributes;
     destroy(): void;
     /** Toggle whether the scene SVG receives pointer events (vs overlay handling them). */
     setPointerEventsNone(value: boolean): void;
@@ -240,6 +255,27 @@ type CreateCustomShapeContent = {
     /** Returns inner SVG for the given box size (same coordinate range as `bounds`). */
     render: (size: CustomShapeSize) => string;
 };
+/**
+ * Optional behavior and styling hooks for {@link createCustomShapeItem}.
+ */
+type CreateCustomShapeOptions = {
+    /**
+     * Controls which resize handles are visible and active for the custom shape.
+     *
+     * Defaults to `"all"`. Use `"corners"` for corner-only resize, explicit handle ids such
+     * as `["se"]` for constrained tools, or an empty array to hide resize dots while keeping
+     * selection and rotation available.
+     */
+    resizeHandles?: CustomShapeResizeHandles;
+    /**
+     * CSS class applied to the outer rendered SVG `<g>`.
+     *
+     * Useful for custom animations and styling. In interactive canvases, prefer
+     * `[data-canvu-hovered="true"]` over `:hover` because the scene SVG often has
+     * `pointer-events: none` while Canvu owns hit-testing in a separate layer.
+     */
+    svgClassName?: string;
+};
 /**
  * Replaces `{{w}}`, `{{h}}`, `{{width}}`, and `{{height}}` in a string with the given dimensions.
  * Use this if you build SVG strings yourself and want the same rules as {@link createCustomShapeItem}.
@@ -268,8 +304,16 @@ declare function buildCustomShapeChildrenSvg(inner: string, intrinsic: CustomSha
  *   svg: `<rect width="{{w}}" height="{{h}}" rx="8" fill="#e0e7ff" stroke="#6366f1" />`,
  * });
  * ```
+ *
+ * @example One resize handle and a CSS animation hook
+ * ```ts
+ * createCustomShapeItem(id, rect, { svg }, {
+ *   resizeHandles: ["se"],
+ *   svgClassName: "sticky-note",
+ * });
+ * ```
  */
-declare function createCustomShapeItem(id: string, bounds: Rect, content: CreateCustomShapeContent): VectorSceneItem;
+declare function createCustomShapeItem(id: string, bounds: Rect, content: CreateCustomShapeContent, options?: CreateCustomShapeOptions): VectorSceneItem;
 
 /**
  * Deep-clones an item with a new id. Rebuilds SVG where the id is embedded (arrow, text, custom).
@@ -329,4 +373,4 @@ declare const DEFAULT_TEXT_FONT_SIZE = 18;
  */
 declare function buildTextSvg(content: string, _width: number, _height: number, fillColor?: string, fontSize?: number): string;
 
-export { ARROW_BIND_SNAP_PX, type ApplePencilNavOptions, ArrowEndpointBinding, Camera2D, type CreateCustomShapeContent, type CustomShapeSize, DEFAULT_TEXT_FONT_SIZE, type EncodeCanvasToBlobOptions, type LoadRasterImageFileOptions, MANAGED_KEY, MAX_RASTER_EMBED_DIMENSION, type RasterEmbedMode, type RasterSceneSource, Rect, SvgVectorRenderer, type SvgVectorRendererOptions, VectorScene, VectorSceneItem, type ViewportInputOptions, addManagedImage, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildCustomShapeChildrenSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, copyManagedImage, createCustomShapeItem, cullItemsByViewport, deleteManagedImage, encodeCanvasToBlob, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, isArrowBindTarget, isManagedImage, itemHitTestWorldPoint, loadImageFileAsRasterSceneSource, markImageAsManaged, reorderManagedImages, resolveArrowBindingsInScene, restackManagedImages, rotateManagedImage, snapArrowEndpointToShape };
+export { ARROW_BIND_SNAP_PX, type ApplePencilNavOptions, ArrowEndpointBinding, Camera2D, type CreateCustomShapeContent, type CreateCustomShapeOptions, CustomShapeResizeHandles, type CustomShapeSize, DEFAULT_TEXT_FONT_SIZE, type EncodeCanvasToBlobOptions, type LoadRasterImageFileOptions, MANAGED_KEY, MAX_RASTER_EMBED_DIMENSION, type RasterEmbedMode, type RasterSceneSource, Rect, SvgVectorRenderer, type SvgVectorRendererOptions, VectorScene, VectorSceneItem, type ViewportInputOptions, addManagedImage, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildCustomShapeChildrenSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, copyManagedImage, createCustomShapeItem, cullItemsByViewport, deleteManagedImage, encodeCanvasToBlob, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, isArrowBindTarget, isManagedImage, itemHitTestWorldPoint, loadImageFileAsRasterSceneSource, markImageAsManaged, reorderManagedImages, resolveArrowBindingsInScene, restackManagedImages, rotateManagedImage, snapArrowEndpointToShape };

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-import { C as Camera2D } from './shape-builders-Cyh8zvDG.js';
-export { a as Camera2DOptions, D as DEFAULT_STROKE_STYLE, F as FreehandSvgPayload, S as StrokeStyle, b as applyStrokeToItem, c as buildArchitecturalCloudPathD, d as buildArchitecturalCloudSvg, e as buildArrowSvg, f as buildDrawDotSvg, g as buildEllipseSvg, h as buildFreehandPathSvg, i as buildLineSvg, j as buildRectSvg, k as computeFreehandSvgPayload, l as createArchitecturalCloudItem, m as createDrawDotItem, n as createEllipseItem, o as createFreehandStrokeItem, p as createImageFromVectorTrace, q as createImageItem, r as createLineItem, s as createRectangleItem, t as createShapeId, u as createTextItem, v as lineEndpointsToLocal, w as rebuildItemSvg, x as resolveStrokeStyle } from './shape-builders-Cyh8zvDG.js';
-import { V as VectorSceneItem, A as ArrowEndpointBinding, R as Rect } from './types-BCCvY6ie.js';
-export { a as ArrowBindings, b as VectorPathPoint, n as normalizeRect, r as rectsIntersect } from './types-BCCvY6ie.js';
-export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-Dc7fsnTG.js';
-export { C as CanvuLinkData, D as DEFAULT_LINK_CARD_SIZE, L as LINK_PLUGIN_KEY, b as buildLinkCardSvg, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-IW4GTnxl.js';
-import './asset-store-DQPRZEcy.js';
+import { C as Camera2D } from './shape-builders-BCOAG0pS.js';
+export { a as Camera2DOptions, D as DEFAULT_STROKE_STYLE, F as FreehandSvgPayload, S as StrokeStyle, b as applyStrokeToItem, c as buildArchitecturalCloudPathD, d as buildArchitecturalCloudSvg, e as buildArrowSvg, f as buildDrawDotSvg, g as buildEllipseSvg, h as buildFreehandPathSvg, i as buildLineSvg, j as buildRectSvg, k as computeFreehandSvgPayload, l as createArchitecturalCloudItem, m as createDrawDotItem, n as createEllipseItem, o as createFreehandStrokeItem, p as createImageFromVectorTrace, q as createImageItem, r as createLineItem, s as createRectangleItem, t as createShapeId, u as createTextItem, v as lineEndpointsToLocal, w as rebuildItemSvg, x as resolveStrokeStyle } from './shape-builders-BCOAG0pS.js';
+import { V as VectorSceneItem, A as ArrowEndpointBinding, C as CustomShapeResizeHandles, R as Rect } from './types-fJNwEnHf.js';
+export { a as ArrowBindings, b as ResizeHandleId, c as VectorPathPoint, n as normalizeRect, r as rectsIntersect } from './types-fJNwEnHf.js';
+export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-BSjiek7Q.js';
+export { C as CanvuLinkData, D as DEFAULT_LINK_CARD_SIZE, L as LINK_PLUGIN_KEY, b as buildLinkCardSvg, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-COoNNvCu.js';
+import './asset-store-D_FjW_CN.js';
 
 type EncodeCanvasToBlobOptions = {
     mimeType?: string;
@@ -181,6 +181,10 @@ type SvgVectorRendererOptions = {
      */
     pointerEventsNone?: boolean;
 };
+type SvgVectorRendererInteractionState = {
+    selectedIds?: readonly string[];
+    hoveredItemId?: string | null;
+};
 /**
  * Renders vector scene items into a single SVG: camera as an outer `<g>` transform,
  * so geometry stays sharp at any zoom (no fixed-resolution raster).
@@ -196,9 +200,19 @@ declare class SvgVectorRenderer {
     private readonly svg;
     private readonly rootG;
     private readonly itemNodeCache;
+    private selectedIds;
+    private hoveredItemId;
     private liveOverlay;
     private readonly resizeObserver;
     constructor(options: SvgVectorRendererOptions);
+    /**
+     * 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: SvgVectorRendererInteractionState): void;
     /**
      * Reads container size, culls items, and updates the SVG (incrementally when possible).
      */
@@ -214,6 +228,7 @@ declare class SvgVectorRenderer {
     renderLiveItem(item: VectorSceneItem | null): void;
     private keepLiveOverlayOnTop;
     private syncVisibleItems;
+    private applyInteractionAttributes;
     destroy(): void;
     /** Toggle whether the scene SVG receives pointer events (vs overlay handling them). */
     setPointerEventsNone(value: boolean): void;
@@ -240,6 +255,27 @@ type CreateCustomShapeContent = {
     /** Returns inner SVG for the given box size (same coordinate range as `bounds`). */
     render: (size: CustomShapeSize) => string;
 };
+/**
+ * Optional behavior and styling hooks for {@link createCustomShapeItem}.
+ */
+type CreateCustomShapeOptions = {
+    /**
+     * Controls which resize handles are visible and active for the custom shape.
+     *
+     * Defaults to `"all"`. Use `"corners"` for corner-only resize, explicit handle ids such
+     * as `["se"]` for constrained tools, or an empty array to hide resize dots while keeping
+     * selection and rotation available.
+     */
+    resizeHandles?: CustomShapeResizeHandles;
+    /**
+     * CSS class applied to the outer rendered SVG `<g>`.
+     *
+     * Useful for custom animations and styling. In interactive canvases, prefer
+     * `[data-canvu-hovered="true"]` over `:hover` because the scene SVG often has
+     * `pointer-events: none` while Canvu owns hit-testing in a separate layer.
+     */
+    svgClassName?: string;
+};
 /**
  * Replaces `{{w}}`, `{{h}}`, `{{width}}`, and `{{height}}` in a string with the given dimensions.
  * Use this if you build SVG strings yourself and want the same rules as {@link createCustomShapeItem}.
@@ -268,8 +304,16 @@ declare function buildCustomShapeChildrenSvg(inner: string, intrinsic: CustomSha
  *   svg: `<rect width="{{w}}" height="{{h}}" rx="8" fill="#e0e7ff" stroke="#6366f1" />`,
  * });
  * ```
+ *
+ * @example One resize handle and a CSS animation hook
+ * ```ts
+ * createCustomShapeItem(id, rect, { svg }, {
+ *   resizeHandles: ["se"],
+ *   svgClassName: "sticky-note",
+ * });
+ * ```
  */
-declare function createCustomShapeItem(id: string, bounds: Rect, content: CreateCustomShapeContent): VectorSceneItem;
+declare function createCustomShapeItem(id: string, bounds: Rect, content: CreateCustomShapeContent, options?: CreateCustomShapeOptions): VectorSceneItem;
 
 /**
  * Deep-clones an item with a new id. Rebuilds SVG where the id is embedded (arrow, text, custom).
@@ -329,4 +373,4 @@ declare const DEFAULT_TEXT_FONT_SIZE = 18;
  */
 declare function buildTextSvg(content: string, _width: number, _height: number, fillColor?: string, fontSize?: number): string;
 
-export { ARROW_BIND_SNAP_PX, type ApplePencilNavOptions, ArrowEndpointBinding, Camera2D, type CreateCustomShapeContent, type CustomShapeSize, DEFAULT_TEXT_FONT_SIZE, type EncodeCanvasToBlobOptions, type LoadRasterImageFileOptions, MANAGED_KEY, MAX_RASTER_EMBED_DIMENSION, type RasterEmbedMode, type RasterSceneSource, Rect, SvgVectorRenderer, type SvgVectorRendererOptions, VectorScene, VectorSceneItem, type ViewportInputOptions, addManagedImage, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildCustomShapeChildrenSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, copyManagedImage, createCustomShapeItem, cullItemsByViewport, deleteManagedImage, encodeCanvasToBlob, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, isArrowBindTarget, isManagedImage, itemHitTestWorldPoint, loadImageFileAsRasterSceneSource, markImageAsManaged, reorderManagedImages, resolveArrowBindingsInScene, restackManagedImages, rotateManagedImage, snapArrowEndpointToShape };
+export { ARROW_BIND_SNAP_PX, type ApplePencilNavOptions, ArrowEndpointBinding, Camera2D, type CreateCustomShapeContent, type CreateCustomShapeOptions, CustomShapeResizeHandles, type CustomShapeSize, DEFAULT_TEXT_FONT_SIZE, type EncodeCanvasToBlobOptions, type LoadRasterImageFileOptions, MANAGED_KEY, MAX_RASTER_EMBED_DIMENSION, type RasterEmbedMode, type RasterSceneSource, Rect, SvgVectorRenderer, type SvgVectorRendererOptions, VectorScene, VectorSceneItem, type ViewportInputOptions, addManagedImage, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildCustomShapeChildrenSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, copyManagedImage, createCustomShapeItem, cullItemsByViewport, deleteManagedImage, encodeCanvasToBlob, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, isArrowBindTarget, isManagedImage, itemHitTestWorldPoint, loadImageFileAsRasterSceneSource, markImageAsManaged, reorderManagedImages, resolveArrowBindingsInScene, restackManagedImages, rotateManagedImage, snapArrowEndpointToShape };

package/dist/index.js

@@ -967,7 +967,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);
@@ -979,6 +979,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)
   };
 }
@@ -2806,6 +2808,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;
@@ -2813,6 +2823,8 @@ var SvgVectorRenderer = class {
   svg;
   rootG;
   itemNodeCache = /* @__PURE__ */ new Map();
+  selectedIds = /* @__PURE__ */ new Set();
+  hoveredItemId = null;
   liveOverlay = null;
   resizeObserver;
   constructor(options) {
@@ -2833,6 +2845,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).
    */
@@ -2869,6 +2895,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: "",
@@ -2878,6 +2905,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;
@@ -2908,6 +2940,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,
@@ -2917,6 +2950,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);
@@ -2933,6 +2971,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();