orio-ui 1.20.0 → 1.23.3

package/dist/runtime/components/Canvas/index.vue.d.ts

@@ -0,0 +1,80 @@
+import type { CanvasNode, CanvasTool, CanvasToolApi } from "./types.js";
+import { type ExportOptions, type ExportResult } from "./tools/exportTool.js";
+export interface CanvasProps {
+    /**
+     * Unique name for this canvas instance. Required so detached toolbars and
+     * other UI can bind to this canvas via the `canvas` prop, e.g.
+     * `<orio-canvas-toolbar canvas="editor" />` rendered anywhere in the app.
+     */
+    name: string;
+    /** Tools available to the canvas. Empty by default — specify all tools explicitly. */
+    tools?: CanvasTool[];
+    /** Drawing surface width in CSS pixels. */
+    width?: number;
+    /** Drawing surface height in CSS pixels. */
+    height?: number;
+    /** Initial active tool id. Defaults to the first tool. */
+    defaultTool?: string;
+    /** CSS background applied to the stage wrapper. */
+    background?: string;
+    /** Maximum undo history depth. */
+    maxHistory?: number;
+    /**
+     * Called once on mount with the full tool API. Use it to seed the canvas
+     * with initial nodes (images, text, shapes). Nodes added here can be
+     * `frozen: true` to lock them from user interaction.
+     *
+     * The toolbar controls what the *user* can do — setup can add any node
+     * type regardless of which tools are registered.
+     */
+    setup?: (api: CanvasToolApi) => void | Promise<void>;
+}
+type __VLS_Props = CanvasProps;
+declare function getToolOptions<T extends Record<string, unknown>>(id: string): T;
+declare function setActiveTool(id: string | null): void;
+declare function exportCanvas(overrides?: ExportOptions): Promise<ExportResult>;
+type __VLS_ModelProps = {
+    "nodes"?: CanvasNode[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    activeTool: import("vue").ComputedRef<any>;
+    setActiveTool: typeof setActiveTool;
+    addNode: (node: Omit<CanvasNode, "id"> & {
+        id?: string;
+    }) => CanvasNode;
+    updateNode: (id: string, patch: Partial<Omit<CanvasNode, "id">>) => void;
+    removeNode: (id: string) => void;
+    clear: () => void;
+    nodes: import("vue").ModelRef<CanvasNode<unknown>[], string, CanvasNode<unknown>[], CanvasNode<unknown>[]>;
+    getToolOptions: typeof getToolOptions;
+    undo: () => void;
+    redo: () => void;
+    canUndo: import("vue").ComputedRef<boolean>;
+    canRedo: import("vue").ComputedRef<boolean>;
+    exportCanvas: typeof exportCanvas;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:nodes": (value: CanvasNode<unknown>[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:nodes"?: ((value: CanvasNode<unknown>[]) => any) | undefined;
+}>, {
+    setup: (api: CanvasToolApi) => void | Promise<void>;
+    width: number;
+    height: number;
+    tools: CanvasTool[];
+    defaultTool: string;
+    background: string;
+    maxHistory: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Canvas/registry.d.ts

@@ -0,0 +1 @@
+export declare const canvasRegistry: any;

package/dist/runtime/components/Canvas/registry.js

@@ -0,0 +1,2 @@
+import { shallowReactive } from "vue";
+export const canvasRegistry = shallowReactive(/* @__PURE__ */ new Map());

package/dist/runtime/components/Canvas/tools/ColorPickerWidget.d.vue.ts

@@ -0,0 +1,7 @@
+import type { CanvasTool } from "../types.js";
+interface Props {
+    tool: CanvasTool;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/ColorPickerWidget.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { useCanvasContext } from "../context";
+const props = defineProps({
+  tool: { type: Object, required: true }
+});
+const ctx = useCanvasContext();
+const options = ctx.getToolOptions(props.tool.id);
+function onChange(e) {
+  const color = e.target.value;
+  options.color = color;
+  for (const targetId of options.targets ?? []) {
+    const targetOpts = ctx.getToolOptions(targetId);
+    if (targetOpts) targetOpts.color = color;
+  }
+}
+</script>
+
+<template>
+  <orio-control-element>
+    <input
+      type="color"
+      :value="options.color"
+      :title="tool.label ?? 'Color'"
+      class="canvas-color-picker"
+      @input="onChange"
+    />
+  </orio-control-element>
+</template>
+
+<style scoped>
+.canvas-color-picker{background:none;border:1px solid var(--color-border,#ddd);border-radius:4px;cursor:pointer;height:1.75rem;padding:0;width:2rem}
+</style>

package/dist/runtime/components/Canvas/tools/ColorPickerWidget.vue.d.ts

@@ -0,0 +1,7 @@
+import type { CanvasTool } from "../types.js";
+interface Props {
+    tool: CanvasTool;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/clearTool.d.ts

@@ -0,0 +1 @@
+export declare function clearTool(): import("../types.js").CanvasTool<unknown, Record<string, unknown>>;

package/dist/runtime/components/Canvas/tools/clearTool.js

@@ -0,0 +1,16 @@
+import { defineCanvasTool } from "../types.js";
+import ClearTooltip from "./tooltips/Clear.vue";
+export function clearTool() {
+  return defineCanvasTool({
+    id: "clear",
+    label: "Clear",
+    kind: "action",
+    tooltip: ClearTooltip,
+    action(api) {
+      api.clear();
+    },
+    disabled(api) {
+      return api.nodes.value.every((n) => n.frozen);
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/colorPickerTool.d.ts

@@ -0,0 +1,6 @@
+export interface ColorPickerToolOptions extends Record<string, unknown> {
+    color: string;
+    /** Tool ids whose `color` option should be synced. */
+    targets: string[];
+}
+export declare function colorPickerTool(options?: Partial<ColorPickerToolOptions>): import("../types.js").CanvasTool<never, ColorPickerToolOptions>;

package/dist/runtime/components/Canvas/tools/colorPickerTool.js

@@ -0,0 +1,15 @@
+import { defineCanvasTool } from "../types.js";
+import ColorPickerWidget from "./ColorPickerWidget.vue";
+export function colorPickerTool(options = {}) {
+  return defineCanvasTool({
+    id: "color-picker",
+    label: "Color",
+    kind: "widget",
+    toolbar: ColorPickerWidget,
+    defaultOptions: {
+      color: "#111111",
+      targets: [],
+      ...options
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/drawTool.d.ts

@@ -0,0 +1,16 @@
+import type { CanvasPoint } from "../types.js";
+export interface DrawToolOptions extends Record<string, unknown> {
+    color: string;
+    size: number;
+    opacity: number;
+    /** Reserved for future brushes (eraser, marker, airbrush...). */
+    brush: "pen" | "marker";
+}
+export interface DrawNodeData {
+    points: CanvasPoint[];
+    color: string;
+    size: number;
+    opacity: number;
+    brush: DrawToolOptions["brush"];
+}
+export declare function drawTool(options?: Partial<DrawToolOptions>): import("../types.js").CanvasTool<DrawNodeData, DrawToolOptions>;

package/dist/runtime/components/Canvas/tools/drawTool.js

@@ -0,0 +1,92 @@
+import { defineCanvasTool } from "../types.js";
+import DrawTooltip from "./tooltips/Draw.vue";
+export function drawTool(options = {}) {
+  let activeStrokeId = null;
+  return defineCanvasTool({
+    id: "draw",
+    label: "Draw",
+    icon: "pencil",
+    cursor: "crosshair",
+    tooltip: DrawTooltip,
+    defaultOptions: {
+      color: "#111111",
+      size: 4,
+      opacity: 1,
+      brush: "pen",
+      ...options
+    },
+    onPointerDown(e, api) {
+      const node = api.addNode({
+        type: "draw",
+        x: 0,
+        y: 0,
+        data: {
+          points: [{ x: e.x, y: e.y }],
+          color: api.options.color,
+          size: api.options.size,
+          opacity: api.options.opacity,
+          brush: api.options.brush
+        }
+      });
+      activeStrokeId = node.id;
+    },
+    onPointerMove(e, api) {
+      if (!activeStrokeId || e.buttons === 0) return;
+      const node = api.getNode(activeStrokeId);
+      if (!node) return;
+      node.data.points.push({ x: e.x, y: e.y });
+      api.requestRender();
+    },
+    onPointerUp(_e, api) {
+      if (!activeStrokeId) return;
+      const node = api.getNode(activeStrokeId);
+      if (node) {
+        api.updateNode(activeStrokeId, {
+          data: { ...node.data }
+        });
+      }
+      activeStrokeId = null;
+    },
+    hitTest(node, point, radius) {
+      const { points, size } = node.data;
+      const r = radius + size / 2;
+      return points.some(
+        (p) => (p.x - point.x) ** 2 + (p.y - point.y) ** 2 <= r * r
+      );
+    },
+    render(ctx, node) {
+      const { points, color, size, opacity, brush } = node.data;
+      if (points.length === 0) return;
+      ctx.save();
+      ctx.globalAlpha = opacity;
+      ctx.strokeStyle = color;
+      ctx.lineWidth = size;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      if (brush === "marker") {
+        ctx.globalCompositeOperation = "multiply";
+      }
+      ctx.beginPath();
+      if (points.length === 1) {
+        const [p] = points;
+        ctx.arc(p.x, p.y, Math.max(size / 2, 0.5), 0, Math.PI * 2);
+        ctx.fillStyle = color;
+        ctx.fill();
+        ctx.restore();
+        return;
+      }
+      ctx.moveTo(points[0].x, points[0].y);
+      for (let i = 1; i < points.length - 1; i++) {
+        const p = points[i];
+        const next = points[i + 1];
+        const mx = (p.x + next.x) / 2;
+        const my = (p.y + next.y) / 2;
+        ctx.quadraticCurveTo(p.x, p.y, mx, my);
+      }
+      const last = points[points.length - 1];
+      ctx.lineTo(last.x, last.y);
+      ctx.stroke();
+      ctx.restore();
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/eraseTool.d.ts

@@ -0,0 +1,5 @@
+export interface EraseToolOptions extends Record<string, unknown> {
+    /** Eraser radius in CSS pixels. */
+    radius: number;
+}
+export declare function eraseTool(options?: Partial<EraseToolOptions>): import("../types.js").CanvasTool<never, EraseToolOptions>;

package/dist/runtime/components/Canvas/tools/eraseTool.js

@@ -0,0 +1,62 @@
+import { defineCanvasTool } from "../types.js";
+import { findTopNode, renderHighlightRect } from "./hitTest.js";
+import EraseTooltip from "./tooltips/Erase.vue";
+export function eraseTool(options = {}) {
+  let erasing = false;
+  let hoveredNodeId = null;
+  function eraseAt(point, api) {
+    const node = findTopNode(point, api, api.options.radius);
+    if (node) {
+      hoveredNodeId = null;
+      api.removeNode(node.id);
+    }
+  }
+  return defineCanvasTool({
+    id: "erase",
+    label: "Eraser",
+    icon: "eraser",
+    cursor: "crosshair",
+    tooltip: EraseTooltip,
+    defaultOptions: {
+      radius: 10,
+      ...options
+    },
+    onPointerDown(e, api) {
+      erasing = true;
+      eraseAt(e, api);
+    },
+    onPointerMove(e, api) {
+      if (erasing && e.buttons !== 0) {
+        eraseAt(e, api);
+        return;
+      }
+      const node = findTopNode(e, api, api.options.radius);
+      const newId = node?.id ?? null;
+      if (newId !== hoveredNodeId) {
+        hoveredNodeId = newId;
+        api.requestRender();
+      }
+    },
+    onPointerUp() {
+      erasing = false;
+    },
+    onDeactivate(api) {
+      if (hoveredNodeId) {
+        hoveredNodeId = null;
+        api.requestRender();
+      }
+    },
+    renderOverlay(ctx, api) {
+      if (!hoveredNodeId) return;
+      const node = api.getNode(hoveredNodeId);
+      if (!node) {
+        hoveredNodeId = null;
+        return;
+      }
+      renderHighlightRect(ctx, node, {
+        strokeColor: "rgba(220, 53, 69, 0.8)",
+        fillColor: "rgba(220, 53, 69, 0.08)"
+      });
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/exportTool.d.ts

@@ -0,0 +1,65 @@
+import type { CanvasNode, CanvasTool } from "../types.js";
+/**
+ * Image formats Canvas2D's `toBlob`/`toDataURL` natively supports across
+ * modern browsers. Anything else (e.g. AVIF, TIFF) is encoder-dependent and
+ * not guaranteed to round-trip.
+ */
+export type ExportFormat = "png" | "jpeg" | "webp";
+export interface ExportResult {
+    blob: Blob;
+    dataURL: string;
+    /** Same bytes as `blob`, wrapped as a `File` with the configured filename. */
+    file: File;
+    format: ExportFormat;
+    /** Output pixel width (already multiplied by `scale`). */
+    width: number;
+    /** Output pixel height (already multiplied by `scale`). */
+    height: number;
+    filename: string;
+}
+export interface ExportOptions {
+    /** Output format. Defaults to PNG. */
+    format?: ExportFormat;
+    /** Quality for lossy formats (jpeg, webp), 0–1. Ignored for PNG. */
+    quality?: number;
+    /** File name without extension. */
+    filename?: string;
+    /** Pixel scale relative to the visible canvas (1 = same size). */
+    scale?: number;
+    /**
+     * If provided, receives the export result instead of (or alongside) the
+     * download. Use to push the image into application state (e.g. a cart) or
+     * upload to a backend. Async — the canvas awaits the returned Promise.
+     */
+    onExport?: (result: ExportResult) => void | Promise<void>;
+    /**
+     * Trigger a browser download. Defaults to `true` when `onExport` is not
+     * provided, `false` when it is.
+     */
+    download?: boolean;
+}
+export interface ExportToolOptions extends Required<Pick<ExportOptions, "format" | "quality" | "filename" | "scale">>, Pick<ExportOptions, "onExport" | "download">, Record<string, unknown> {
+}
+export declare const DEFAULT_EXPORT_OPTIONS: ExportToolOptions;
+export interface CanvasSnapshot {
+    nodes: CanvasNode[];
+    tools: CanvasTool[];
+    width: number;
+    height: number;
+}
+/**
+ * Render the snapshot to an offscreen canvas and produce a Blob/dataURL/File.
+ * Pure: does not download or invoke callbacks.
+ *
+ * The offscreen canvas is sized exactly to `snapshot.width × snapshot.height`
+ * (× `scale`), so any node geometry outside the canvas is naturally clipped —
+ * the result captures only what would be visible on the live canvas.
+ */
+export declare function renderCanvasSnapshot(snapshot: CanvasSnapshot, options?: ExportOptions): Promise<ExportResult>;
+/**
+ * Render the snapshot, then optionally hand the result to `onExport` and/or
+ * trigger a browser download. Resolves with the result so callers can chain
+ * additional work (uploads, state updates).
+ */
+export declare function performExport(snapshot: CanvasSnapshot, options?: ExportOptions): Promise<ExportResult>;
+export declare function exportTool(options?: Partial<ExportToolOptions>): CanvasTool<never, ExportToolOptions>;

package/dist/runtime/components/Canvas/tools/exportTool.js

@@ -0,0 +1,136 @@
+import { defineCanvasTool } from "../types.js";
+import { getNodeBounds } from "./hitTest.js";
+import ExportTooltip from "./tooltips/Export.vue";
+const MIME_TYPES = {
+  png: "image/png",
+  jpeg: "image/jpeg",
+  webp: "image/webp"
+};
+export const DEFAULT_EXPORT_OPTIONS = {
+  format: "png",
+  quality: 0.92,
+  filename: "canvas",
+  scale: 1
+};
+function renderNodesTo(target, nodes, tools) {
+  const toolMap = new Map(tools.map((t) => [t.id, t]));
+  const ordered = [...nodes].sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+  for (const node of ordered) {
+    const renderFn = toolMap.get(node.type)?.render;
+    if (!renderFn) continue;
+    if (node.rotation) {
+      const b = getNodeBounds(node);
+      const cx = b.x + b.width / 2;
+      const cy = b.y + b.height / 2;
+      target.save();
+      target.translate(cx, cy);
+      target.rotate(node.rotation);
+      target.translate(-cx, -cy);
+      renderFn(target, node);
+      target.restore();
+    } else {
+      renderFn(target, node);
+    }
+  }
+}
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function resolveFormat(format) {
+  return MIME_TYPES[format] ? format : "png";
+}
+function sanitizeFilename(name) {
+  return (name ?? "canvas").replace(/[^A-Za-z0-9._-]/g, "_") || "canvas";
+}
+export async function renderCanvasSnapshot(snapshot, options = {}) {
+  const format = resolveFormat(options.format);
+  const quality = options.quality ?? DEFAULT_EXPORT_OPTIONS.quality;
+  const scale = options.scale ?? DEFAULT_EXPORT_OPTIONS.scale;
+  if (!Number.isFinite(scale) || scale <= 0) {
+    throw new Error(
+      `[orio-canvas] invalid export option: scale must be a finite number > 0 (got ${scale})`
+    );
+  }
+  if (format !== "png" && options.quality !== void 0 && (!Number.isFinite(quality) || quality < 0 || quality > 1)) {
+    throw new Error(
+      `[orio-canvas] invalid export option: quality must be a finite number in [0, 1] (got ${quality})`
+    );
+  }
+  const mime = MIME_TYPES[format];
+  const ext = format === "jpeg" ? "jpg" : format;
+  const filename = `${sanitizeFilename(options.filename)}.${ext}`;
+  const out = document.createElement("canvas");
+  const w = Math.max(1, Math.round(snapshot.width * scale));
+  const h = Math.max(1, Math.round(snapshot.height * scale));
+  out.width = w;
+  out.height = h;
+  const c = out.getContext("2d");
+  if (!c) {
+    throw new Error("[orio-canvas] failed to acquire 2D context for export");
+  }
+  c.scale(scale, scale);
+  if (format === "jpeg") {
+    c.fillStyle = "#ffffff";
+    c.fillRect(0, 0, snapshot.width, snapshot.height);
+  }
+  renderNodesTo(c, snapshot.nodes, snapshot.tools);
+  const encoderQuality = format === "png" ? void 0 : quality;
+  const blob = await new Promise((resolve, reject) => {
+    out.toBlob(
+      (b) => b ? resolve(b) : reject(new Error("[orio-canvas] toBlob returned null")),
+      mime,
+      encoderQuality
+    );
+  });
+  const dataURL = out.toDataURL(mime, encoderQuality);
+  const file = new File([blob], filename, { type: mime });
+  return { blob, dataURL, file, format, width: w, height: h, filename };
+}
+export async function performExport(snapshot, options = {}) {
+  const result = await renderCanvasSnapshot(snapshot, options);
+  if (options.onExport) {
+    await options.onExport(result);
+  }
+  const shouldDownload = options.download ?? !options.onExport;
+  if (shouldDownload) {
+    downloadBlob(result.blob, result.filename);
+  }
+  return result;
+}
+export function exportTool(options = {}) {
+  return defineCanvasTool({
+    id: "export",
+    label: "Export",
+    icon: "export",
+    kind: "action",
+    tooltip: ExportTooltip,
+    defaultOptions: {
+      ...DEFAULT_EXPORT_OPTIONS,
+      ...options
+    },
+    disabled(api) {
+      return api.nodes.value.length === 0;
+    },
+    action(api) {
+      const { width, height } = api.size();
+      performExport(
+        {
+          nodes: api.nodes.value,
+          tools: api.getTools(),
+          width,
+          height
+        },
+        api.options
+      ).catch((err) => {
+        console.error("[orio-canvas] export failed", err);
+      });
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/highlightTool.d.ts

@@ -0,0 +1,11 @@
+export interface HighlightToolOptions extends Record<string, unknown> {
+    /** Hit-test radius in CSS pixels. */
+    radius: number;
+    /** Highlight stroke color. */
+    strokeColor: string;
+    /** Highlight fill color (transparent). */
+    fillColor: string;
+    /** Highlight stroke width. */
+    lineWidth: number;
+}
+export declare function highlightTool(options?: Partial<HighlightToolOptions>): import("../types.js").CanvasTool<never, HighlightToolOptions>;

package/dist/runtime/components/Canvas/tools/highlightTool.js

@@ -0,0 +1,51 @@
+import { defineCanvasTool } from "../types.js";
+import { findTopNode, renderHighlightRect } from "./hitTest.js";
+import HighlightTooltip from "./tooltips/Highlight.vue";
+export function highlightTool(options = {}) {
+  let highlightedNodeId = null;
+  return defineCanvasTool({
+    id: "highlight",
+    label: "Highlight",
+    icon: "highlight",
+    cursor: "default",
+    tooltip: HighlightTooltip,
+    defaultOptions: {
+      radius: 10,
+      strokeColor: "rgba(31, 122, 236, 0.8)",
+      fillColor: "rgba(31, 122, 236, 0.08)",
+      lineWidth: 2,
+      ...options
+    },
+    onPointerMove(e, api) {
+      const node = findTopNode(e, api, api.options.radius);
+      const newId = node?.id ?? null;
+      if (newId !== highlightedNodeId) {
+        highlightedNodeId = newId;
+        api.requestRender();
+      }
+    },
+    onPointerDown(e, api) {
+      const node = findTopNode(e, api, api.options.radius);
+      highlightedNodeId = node?.id ?? null;
+    },
+    onDeactivate(api) {
+      if (highlightedNodeId) {
+        highlightedNodeId = null;
+        api.requestRender();
+      }
+    },
+    renderOverlay(ctx, api) {
+      if (!highlightedNodeId) return;
+      const node = api.getNode(highlightedNodeId);
+      if (!node) {
+        highlightedNodeId = null;
+        return;
+      }
+      renderHighlightRect(ctx, node, {
+        strokeColor: api.options.strokeColor,
+        fillColor: api.options.fillColor,
+        lineWidth: api.options.lineWidth
+      });
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/hitTest.d.ts

@@ -0,0 +1,20 @@
+import type { CanvasNode, CanvasPoint, CanvasTool, CanvasToolApi } from "../types.js";
+export declare function defaultHitTest(node: CanvasNode, point: CanvasPoint, radius: number): boolean;
+/** Transform a canvas-space point into the node's pre-rotation local space. */
+export declare function toLocalPoint(node: CanvasNode, point: CanvasPoint): CanvasPoint;
+export declare function hitTestNode(node: CanvasNode, point: CanvasPoint, radius: number, toolMap: Map<string, CanvasTool>): boolean;
+export declare function findTopNode(point: CanvasPoint, api: CanvasToolApi, radius: number): CanvasNode | undefined;
+/** Compute an axis-aligned bounding box for a node. */
+export declare function getNodeBounds(node: CanvasNode): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export interface HighlightStyle {
+    strokeColor: string;
+    fillColor: string;
+    lineWidth: number;
+}
+/** Draw a dashed bounding-rect highlight around a node. */
+export declare function renderHighlightRect(ctx: CanvasRenderingContext2D, node: CanvasNode, style?: Partial<HighlightStyle>): void;