orio-ui 1.20.0 → 1.23.2

package/dist/runtime/components/Canvas/tools/tooltips/Draw.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Draw</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Freehand pen. Click and drag to draw strokes.
+    </orio-view-text>
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:200px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Draw.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Erase.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Erase.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Eraser</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Drag over elements to remove them. Frozen nodes are protected.
+    </orio-view-text>
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:220px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Erase.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Export.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Export.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Export</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Download the canvas as PNG, JPEG, or WebP. Configure format and filename
+      via the tool's options.
+    </orio-view-text>
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:240px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Export.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Highlight.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Highlight.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Highlight</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Hover over nodes to inspect their bounding box.
+    </orio-view-text>
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:200px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Highlight.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Image.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Image.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Upload image</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Insert a PNG, JPEG, WebP, GIF, SVG, AVIF, or BMP file. Resize and rotate
+      with the Transform tool.
+    </orio-view-text>
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:240px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Image.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Move.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Move.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Move</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Click and drag to reposition nodes.
+    </orio-view-text>
+    <orio-view-key-binds bind="`]` bring forward · `[` send backward" />
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:220px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Move.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Redo.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Redo.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Redo</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Restore the last undone action.
+    </orio-view-text>
+    <orio-view-key-binds bind="`Ctrl`/`Cmd` + `Shift` + `Z`" />
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:200px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Redo.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Resize.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Resize.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Resize</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Click a node to select, then drag a handle to resize.
+    </orio-view-text>
+    <orio-view-key-binds bind="`Esc` deselect" />
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:220px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Resize.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Rotate.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Rotate.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Rotate</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Click a node to select, then drag the top circle to rotate.
+    </orio-view-text>
+    <orio-view-key-binds bind="`Esc` deselect" />
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:220px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Rotate.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Text.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Text.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Text</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Click anywhere to place text.
+    </orio-view-text>
+    <orio-view-key-binds bind="`Enter` commit · `Esc` cancel" />
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:220px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Text.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Transform.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Transform.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Transform</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Click a node to select. Drag corners to resize, the top circle to rotate,
+      or the body to move.
+    </orio-view-text>
+    <orio-view-key-binds bind="`Esc` deselect" />
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:220px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Transform.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Undo.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Canvas/tools/tooltips/Undo.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="tool-tip">
+    <orio-view-text type="title" size="medium">Undo</orio-view-text>
+    <orio-view-text type="subtitle" size="small">
+      Revert the last action.
+    </orio-view-text>
+    <orio-view-key-binds bind="`Ctrl`/`Cmd` + `Z`" />
+  </div>
+</template>
+
+<style scoped>
+.tool-tip{--view-text-color:#fff;display:flex;flex-direction:column;gap:.25rem;max-width:200px;white-space:normal}
+</style>

package/dist/runtime/components/Canvas/tools/tooltips/Undo.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,74 @@
+import type { CanvasNode, CanvasPoint } from "../types.js";
+export type ResizeHandle = "n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se";
+export type Handle = ResizeHandle | "rotate";
+export interface Bounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface HandleStyle {
+    size: number;
+    fill: string;
+    stroke: string;
+    lineWidth: number;
+    rotateOffset: number;
+}
+/** Cursor for each resize handle (CSS values). */
+export declare const HANDLE_CURSORS: Record<ResizeHandle, string>;
+/** Map a resize handle through node rotation so cursors match the visual. */
+export declare function cursorForHandle(handle: Handle, rotation?: number): string;
+/** Resize handle anchor positions in node-local (un-rotated) space. */
+export declare function getResizeHandles(b: Bounds): Record<ResizeHandle, CanvasPoint>;
+/** Rotation handle anchor — sits above the top-center of the bounds. */
+export declare function getRotationHandle(b: Bounds, offset?: number): CanvasPoint;
+/**
+ * Hit-test the handles of a (possibly rotated) node.
+ *
+ * @returns the matched handle name or `null` if the point is outside all handles.
+ */
+export declare function hitHandle(node: CanvasNode, point: CanvasPoint, opts?: {
+    style?: Partial<HandleStyle>;
+    /** Restrict which handles can be hit (e.g. resize-only tools). */
+    handles?: Handle[];
+}): Handle | null;
+/** Render resize handles on a node's bounding rect, applying rotation. */
+export declare function renderResizeHandles(ctx: CanvasRenderingContext2D, node: CanvasNode, opts?: {
+    style?: Partial<HandleStyle>;
+    handles?: ResizeHandle[];
+    hovered?: ResizeHandle | null;
+}): void;
+/** Render rotation handle (line + circle) above the node, applying rotation. */
+export declare function renderRotationHandle(ctx: CanvasRenderingContext2D, node: CanvasNode, opts?: {
+    style?: Partial<HandleStyle>;
+    hovered?: boolean;
+}): void;
+/** Wrap a delta into (-π, π] so multi-turn drags don't jump at atan2's boundary. */
+export declare function normalizeAngleDelta(delta: number): number;
+/**
+ * Compute a node's rotation given a pointer position. The rotation is the
+ * angle from the node's bounds-center to `point`, with 0 meaning the
+ * rotation handle pointing straight up.
+ */
+export declare function rotationFromPoint(node: CanvasNode, point: CanvasPoint): number;
+export interface ResizeContext {
+    /** Node snapshot taken at pointer-down. */
+    original: CanvasNode;
+    /** Bounds of `original`. */
+    originalBounds: Bounds;
+    /** Pointer in canvas-space at pointer-down (already in local coords). */
+    startLocal: CanvasPoint;
+}
+/**
+ * Compute a patch that resizes `ctx.original` so the dragged handle lines up
+ * with the current pointer.
+ *
+ * - For width/height nodes: patches `x`, `y`, `width`, `height`.
+ * - For draw nodes (with `data.points`): scales each point relative to the
+ *   original bounds.
+ * - For text nodes (with `data.fontSize`): uniform scale via `fontSize`,
+ *   only on corner handles.
+ */
+export declare function computeResizePatch(handle: ResizeHandle, pointerLocal: CanvasPoint, ctx: ResizeContext, opts?: {
+    minSize?: number;
+}): Partial<Omit<CanvasNode, "id">> | null;

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

@@ -0,0 +1,191 @@
+import { getNodeBounds, toLocalPoint } from "./hitTest.js";
+const DEFAULT_STYLE = {
+  size: 10,
+  fill: "transparent",
+  stroke: "rgba(31, 122, 236, 1)",
+  lineWidth: 1.5,
+  rotateOffset: 28
+};
+const HOVER_ALPHA = 0.4;
+export const HANDLE_CURSORS = {
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize",
+  nw: "nwse-resize",
+  se: "nwse-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize"
+};
+export function cursorForHandle(handle, rotation = 0) {
+  if (handle === "rotate") return "grab";
+  if (!rotation) return HANDLE_CURSORS[handle];
+  const order = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+  const idx = order.indexOf(handle);
+  const step = Math.round(rotation * 4 / Math.PI);
+  return HANDLE_CURSORS[order[((idx + step) % 8 + 8) % 8]];
+}
+export function getResizeHandles(b) {
+  const cx = b.x + b.width / 2;
+  const cy = b.y + b.height / 2;
+  return {
+    nw: { x: b.x, y: b.y },
+    n: { x: cx, y: b.y },
+    ne: { x: b.x + b.width, y: b.y },
+    e: { x: b.x + b.width, y: cy },
+    se: { x: b.x + b.width, y: b.y + b.height },
+    s: { x: cx, y: b.y + b.height },
+    sw: { x: b.x, y: b.y + b.height },
+    w: { x: b.x, y: cy }
+  };
+}
+export function getRotationHandle(b, offset = DEFAULT_STYLE.rotateOffset) {
+  return { x: b.x + b.width / 2, y: b.y - offset };
+}
+export function hitHandle(node, point, opts = {}) {
+  const style = { ...DEFAULT_STYLE, ...opts.style };
+  const allowed = new Set(
+    opts.handles ?? ["n", "s", "e", "w", "nw", "ne", "sw", "se", "rotate"]
+  );
+  const bounds = getNodeBounds(node);
+  const local = toLocalPoint(node, point);
+  const r = style.size / 2 + 2;
+  if (allowed.has("rotate")) {
+    const h = getRotationHandle(bounds, style.rotateOffset);
+    if ((local.x - h.x) ** 2 + (local.y - h.y) ** 2 <= (r + 2) ** 2) {
+      return "rotate";
+    }
+  }
+  const resize = getResizeHandles(bounds);
+  for (const key of Object.keys(resize)) {
+    if (!allowed.has(key)) continue;
+    const h = resize[key];
+    if (Math.abs(local.x - h.x) <= r && Math.abs(local.y - h.y) <= r) {
+      return key;
+    }
+  }
+  return null;
+}
+export function renderResizeHandles(ctx, node, opts = {}) {
+  const style = { ...DEFAULT_STYLE, ...opts.style };
+  const bounds = getNodeBounds(node);
+  const all = getResizeHandles(bounds);
+  const list = opts.handles ?? Object.keys(all);
+  ctx.save();
+  if (node.rotation) {
+    const cx = bounds.x + bounds.width / 2;
+    const cy = bounds.y + bounds.height / 2;
+    ctx.translate(cx, cy);
+    ctx.rotate(node.rotation);
+    ctx.translate(-cx, -cy);
+  }
+  ctx.fillStyle = style.fill;
+  ctx.strokeStyle = style.stroke;
+  ctx.lineWidth = style.lineWidth;
+  for (const key of list) {
+    const p = all[key];
+    const half = style.size / 2;
+    const hovered = opts.hovered === key;
+    if (hovered) {
+      ctx.save();
+      ctx.globalAlpha = HOVER_ALPHA;
+    }
+    ctx.beginPath();
+    ctx.rect(p.x - half, p.y - half, style.size, style.size);
+    ctx.fill();
+    ctx.stroke();
+    if (hovered) ctx.restore();
+  }
+  ctx.restore();
+}
+export function renderRotationHandle(ctx, node, opts = {}) {
+  const style = { ...DEFAULT_STYLE, ...opts.style };
+  const bounds = getNodeBounds(node);
+  const top = { x: bounds.x + bounds.width / 2, y: bounds.y };
+  const handle = getRotationHandle(bounds, style.rotateOffset);
+  const r = style.size / 2 + 1;
+  ctx.save();
+  if (node.rotation) {
+    const cx = bounds.x + bounds.width / 2;
+    const cy = bounds.y + bounds.height / 2;
+    ctx.translate(cx, cy);
+    ctx.rotate(node.rotation);
+    ctx.translate(-cx, -cy);
+  }
+  ctx.strokeStyle = style.stroke;
+  ctx.fillStyle = style.fill;
+  ctx.lineWidth = style.lineWidth;
+  if (opts.hovered) ctx.globalAlpha = HOVER_ALPHA;
+  ctx.beginPath();
+  ctx.moveTo(top.x, top.y);
+  ctx.lineTo(handle.x, handle.y);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(handle.x, handle.y, r, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+}
+export function normalizeAngleDelta(delta) {
+  const TAU = Math.PI * 2;
+  return ((delta + Math.PI) % TAU + TAU) % TAU - Math.PI;
+}
+export function rotationFromPoint(node, point) {
+  const b = getNodeBounds(node);
+  const cx = b.x + b.width / 2;
+  const cy = b.y + b.height / 2;
+  return Math.atan2(point.y - cy, point.x - cx) + Math.PI / 2;
+}
+export function computeResizePatch(handle, pointerLocal, ctx, opts = {}) {
+  const minSize = opts.minSize ?? 8;
+  const ob = ctx.originalBounds;
+  let nx = ob.x;
+  let ny = ob.y;
+  let nw = ob.width;
+  let nh = ob.height;
+  if (handle.includes("e")) nw = Math.max(minSize, pointerLocal.x - ob.x);
+  if (handle.includes("s")) nh = Math.max(minSize, pointerLocal.y - ob.y);
+  if (handle.includes("w")) {
+    const right = ob.x + ob.width;
+    nx = Math.min(pointerLocal.x, right - minSize);
+    nw = right - nx;
+  }
+  if (handle.includes("n")) {
+    const bottom = ob.y + ob.height;
+    ny = Math.min(pointerLocal.y, bottom - minSize);
+    nh = bottom - ny;
+  }
+  const data = ctx.original.data;
+  if (ctx.original.width != null && ctx.original.height != null) {
+    return { x: nx, y: ny, width: nw, height: nh };
+  }
+  if (Array.isArray(data?.points)) {
+    const points = data.points;
+    const sx = ob.width === 0 ? 1 : nw / ob.width;
+    const sy = ob.height === 0 ? 1 : nh / ob.height;
+    return {
+      x: ctx.original.x,
+      y: ctx.original.y,
+      data: {
+        ...data,
+        points: points.map((p) => ({
+          x: nx + (p.x - ob.x) * sx,
+          y: ny + (p.y - ob.y) * sy
+        }))
+      }
+    };
+  }
+  if (typeof data?.text === "string" && typeof data?.fontSize === "number") {
+    if (!["nw", "ne", "sw", "se"].includes(handle)) return null;
+    const sx = ob.width === 0 ? 1 : nw / ob.width;
+    const sy = ob.height === 0 ? 1 : nh / ob.height;
+    const scale = Math.max(sx, sy);
+    const newFont = Math.max(minSize, data.fontSize * scale);
+    return {
+      x: nx,
+      y: ny + (newFont - data.fontSize) / 2,
+      data: { ...data, fontSize: newFont }
+    };
+  }
+  return null;
+}

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

@@ -0,0 +1,7 @@
+export interface TransformToolOptions extends Record<string, unknown> {
+    /** Hit-test radius in CSS pixels for picking a node to select. */
+    radius: number;
+    /** Minimum side length when resizing. */
+    minSize: number;
+}
+export declare function transformTool(options?: Partial<TransformToolOptions>): import("../types.js").CanvasTool<never, TransformToolOptions>;