orio-ui 1.20.0 → 1.23.2

package/README.md

@@ -8,7 +8,7 @@ A delightful, lightweight component library for Nuxt 3+ applications. Built with
 
 ## Features
 
-✨ **34 Components** - Beautiful, accessible components ready to use
+✨ **56 Components** - Beautiful, accessible components ready to use
 🎨 **Themeable** - 5 built-in accent themes with light/dark mode support
 🚀 **Auto-imported** - Works seamlessly with Nuxt's auto-import system
 📦 **Tree-shakeable** - Only bundle what you use
@@ -16,6 +16,7 @@ A delightful, lightweight component library for Nuxt 3+ applications. Built with
 🧪 **Tested** - 29 test suites for reliability
 📱 **Responsive** - Mobile-first design approach
 ♿ **Accessible** - ARIA-compliant components
+🌐 **i18n** - Built-in vue-i18n support with English defaults
 
 ## Quick Start
 
@@ -66,7 +67,7 @@ function handleClick() {
 
 ## What's Included
 
-### Components (34)
+### Components (56)
 
 #### Form Controls
 
@@ -78,16 +79,22 @@ function handleClick() {
 - **DatePicker** - Date selection with month/year options
 - **DateRangePicker** - Start and end date selection
 - **Selector** - Generic dropdown selector (single/multi-select)
+- **TaggableSelector** - Selector with taggable input
+- **CheckboxGroup** - Group of checkboxes with shared model
+- **RadioButton** - Radio button component
 - **Tag** - Styled tag/badge component
 - **Badge** - Status badge with variants
+- **ListItem** - Selectable list item
 
 #### Interactive
 
 - **Button** - Primary, secondary, subdued variants with loading/icon support
 - **NavButton** - Navigation button component
+- **Form** - Form wrapper with validation support
 - **Modal** - Animated modal with origin morphing
 - **Popover** - Positioned popover with smart placement
 - **Tooltip** - Hover tooltip component
+- **Banner** - Notification banner component
 
 #### Display
 
@@ -112,7 +119,7 @@ function handleClick() {
 
 - **Upload** - File upload component
 
-### Composables (11)
+### Composables (13)
 
 - **useTheme** - Theme and color mode management
 - **useModal** - Modal state with animation origin tracking
@@ -187,8 +194,8 @@ npm run docs:dev
 orio-ui/
 ├── src/
 │   ├── runtime/
-│   │   ├── components/   # 34 Vue components
-│   │   ├── composables/  # 11 composables
+│   │   ├── components/   # 56 Vue components
+│   │   ├── composables/  # 13 composables
 │   │   ├── assets/css/   # Theme CSS files
 │   │   └── utils/        # Icon registry
 │   └── module.ts         # Nuxt Module definition

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.20.0",
+  "version": "1.23.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addImports, addPlugin } from '@nuxt/kit';
 import { COOKIE_NAMES, THEME_DEFAULTS } from '../dist/runtime/constants/theme.js';
 
 const themeScript = `
@@ -34,9 +34,12 @@ const module$1 = defineNuxtModule({
     addComponentsDir({
       path: resolver.resolve("./runtime/components"),
       prefix: "Orio",
-      pathPrefix: true
+      pathPrefix: true,
+      ignore: ["**/components/**"]
     });
     addImportsDir(resolver.resolve("./runtime/composables"));
+    addImports({ name: "useI18n", from: "vue-i18n" });
+    addPlugin(resolver.resolve("./runtime/plugins/i18n"));
   }
 });
 

package/dist/runtime/canvas.d.ts

@@ -0,0 +1,21 @@
+export { default as Canvas, type CanvasProps, } from "./components/Canvas/index.vue.js";
+export { default as CanvasStage } from "./components/Canvas/components/Stage.vue.js";
+export { default as CanvasToolbar } from "./components/Canvas/components/Toolbar.vue.js";
+export { default as CanvasToolButton } from "./components/Canvas/components/ToolButton.vue.js";
+export { defineCanvasTool, type CanvasTool, type CanvasToolKind, type CanvasNode, type CanvasToolApi, type CanvasPoint, type CanvasPointerEvent, } from "./components/Canvas/types.js";
+export { useCanvasContext, type CanvasContext, } from "./components/Canvas/context.js";
+export { canvasRegistry } from "./components/Canvas/registry.js";
+export { drawTool, type DrawToolOptions, type DrawNodeData, } from "./components/Canvas/tools/drawTool.js";
+export { textTool, type TextToolOptions, type TextNodeData, } from "./components/Canvas/tools/textTool.js";
+export { undoTool } from "./components/Canvas/tools/undoTool.js";
+export { redoTool } from "./components/Canvas/tools/redoTool.js";
+export { clearTool } from "./components/Canvas/tools/clearTool.js";
+export { colorPickerTool, type ColorPickerToolOptions, } from "./components/Canvas/tools/colorPickerTool.js";
+export { eraseTool, type EraseToolOptions, } from "./components/Canvas/tools/eraseTool.js";
+export { moveTool, type MoveToolOptions, } from "./components/Canvas/tools/moveTool.js";
+export { highlightTool, type HighlightToolOptions, } from "./components/Canvas/tools/highlightTool.js";
+export { rotateTool, type RotateToolOptions, } from "./components/Canvas/tools/rotateTool.js";
+export { resizeTool, type ResizeToolOptions, } from "./components/Canvas/tools/resizeTool.js";
+export { transformTool, type TransformToolOptions, } from "./components/Canvas/tools/transformTool.js";
+export { imageTool, type ImageToolOptions, type ImageNodeData, } from "./components/Canvas/tools/imageTool.js";
+export { exportTool, type ExportToolOptions, type ExportFormat, } from "./components/Canvas/tools/exportTool.js";

package/dist/runtime/canvas.js

@@ -0,0 +1,49 @@
+export {
+  default as Canvas
+} from "./components/Canvas/index.vue";
+export { default as CanvasStage } from "./components/Canvas/components/Stage.vue";
+export { default as CanvasToolbar } from "./components/Canvas/components/Toolbar.vue";
+export { default as CanvasToolButton } from "./components/Canvas/components/ToolButton.vue";
+export {
+  defineCanvasTool
+} from "./components/Canvas/types.js";
+export {
+  useCanvasContext
+} from "./components/Canvas/context.js";
+export { canvasRegistry } from "./components/Canvas/registry.js";
+export {
+  drawTool
+} from "./components/Canvas/tools/drawTool.js";
+export {
+  textTool
+} from "./components/Canvas/tools/textTool.js";
+export { undoTool } from "./components/Canvas/tools/undoTool.js";
+export { redoTool } from "./components/Canvas/tools/redoTool.js";
+export { clearTool } from "./components/Canvas/tools/clearTool.js";
+export {
+  colorPickerTool
+} from "./components/Canvas/tools/colorPickerTool.js";
+export {
+  eraseTool
+} from "./components/Canvas/tools/eraseTool.js";
+export {
+  moveTool
+} from "./components/Canvas/tools/moveTool.js";
+export {
+  highlightTool
+} from "./components/Canvas/tools/highlightTool.js";
+export {
+  rotateTool
+} from "./components/Canvas/tools/rotateTool.js";
+export {
+  resizeTool
+} from "./components/Canvas/tools/resizeTool.js";
+export {
+  transformTool
+} from "./components/Canvas/tools/transformTool.js";
+export {
+  imageTool
+} from "./components/Canvas/tools/imageTool.js";
+export {
+  exportTool
+} from "./components/Canvas/tools/exportTool.js";

package/dist/runtime/components/Canvas/REQUIREMENTS.md

@@ -0,0 +1,174 @@
+# Canvas — Internal Requirements
+
+Scratchpad for the Canvas component. Not shipped to users, not imported anywhere.
+Update as scope evolves.
+
+## Vision
+
+A **tiptap-flavored, headless-ish canvas playground**. The core owns the
+`<canvas>`, node storage, rendering loop and pointer dispatch. Everything
+else — tools, toolbars, node kinds, UI chrome — is pluggable by the consumer.
+
+## Extensibility goals
+
+- Consumers can define a tool in userland (`defineCanvasTool({...})`) and drop
+  it into `<orio-canvas :tools="[...]" />`.
+- Tools own:
+  - their id (also the node type they produce),
+  - pointer handlers,
+  - the render function for nodes of their type,
+  - reactive per-tool options (brush size, color, font family, ...),
+  - optional icon and label used by the default toolbar.
+- Consumers can replace the toolbar UI entirely via the `toolbar` slot, or
+  replace individual tool buttons via the default slot of
+  `<orio-canvas-tool-button>`.
+- Consumers can replace the stage too — `<orio-canvas-stage>` is a standalone
+  child; advanced users could write their own stage using `useCanvasContext`.
+
+## Data model
+
+- `CanvasNode` = `{ id, type, x, y, width?, height?, rotation?, frozen?, zIndex?, data }`
+- `nodes` is the single source of truth (reactive array), v-modelable as
+  `v-model:nodes`.
+- Rendering order is `zIndex` ascending (stable). New nodes get an increasing
+  zIndex by default.
+- `frozen` is a flag only. Interaction tools (`moveTool`, `eraseTool`,
+  `highlightTool`) skip frozen nodes; strokes and text are painted regardless.
+
+## Rendering
+
+- Single `<canvas>` element. 2D context. DPR-scaled.
+- Full redraw on every `requestRender()`, batched through `requestAnimationFrame`.
+- Tools render their own node type via `render(ctx, node)`. Unknown node types
+  are silently skipped — lets consumers hydrate a saved doc gradually as tools
+  register themselves.
+
+## Tool API surface
+
+```ts
+CanvasTool<TNodeData, TOptions> = {
+  id: string
+  label?: string
+  icon?: string               // orio-icon registry name
+  cursor?: string             // CSS cursor applied to stage when active
+  kind?: "interaction" | "action" | "widget"
+  action?(api)                // for action tools — fired on button click
+  disabled?(api) => boolean   // for action tools — reactive disabled state
+  toolbar?: Component         // for widget tools — rendered instead of button
+  defaultOptions?: TOptions
+  onPointerDown?(e, api)
+  onPointerMove?(e, api)
+  onPointerUp?(e, api)
+  onActivate?(api)
+  onDeactivate?(api)
+  render?(ctx, node)
+}
+```
+
+`api: CanvasToolApi<TOptions>` = `{ options, nodes, addNode, updateNode,
+removeNode, getNode, clear, requestRender, stageEl(), size(), undo, redo,
+canUndo, canRedo, getToolOptions }`.
+
+Tool options live on the context keyed by tool id. Mutating `api.options`
+should be reactive so overlays or settings panels can reflect changes.
+
+### Tool kinds
+
+- **interaction** (default) — standard pointer tool, becomes active on click.
+- **action** — fires `action(api)` on click, never becomes active. Button
+  shows disabled state from `disabled(api)`.
+- **widget** — renders a custom `toolbar` Vue component instead of a button.
+
+## Scope v1 (SHIPPING)
+
+- Core canvas component + Stage + Toolbar + ToolButton.
+- No default tools — consumer specifies everything explicitly.
+- `drawTool()` — freehand pen, per-tool color/size/opacity/brush. Uses
+  quadratic smoothing between points.
+- `textTool()` — click to place, inline `<input>` overlay for editing, commits
+  on Enter/blur, Escape cancels. Options: `fontSize`, `fontFamily`, `color`,
+  `weight`.
+- `eraseTool()` — erases non-frozen nodes under pointer. Uses per-tool
+  `hitTest` for accurate detection, falls back to bounding box.
+- `moveTool()` — drags non-frozen nodes; `[`/`]` keys reorder zIndex of
+  hovered/dragged node. Shares hit-testing via `tools/hitTest.ts`.
+- `highlightTool()` — hover overlay showing the top-most hit node's bounds.
+- `undoTool()`, `redoTool()`, `clearTool()` — action tools.
+- `colorPickerTool()` — widget tool, native color input, syncs to targets.
+- `setup` prop — callback on mount to seed initial nodes. Frozen nodes are
+  protected from eraser and future selection tools.
+- `hitTest` optional method on CanvasTool for spatial queries.
+- Undo / redo — history stack on the nodes array, Ctrl+Z / Ctrl+Shift+Z
+  keyboard support, `maxHistory` prop (default 50). drawTool finalizes stroke
+  on pointerUp so the full stroke is captured as one snapshot.
+- Vitepress docs covering usage, slots, and how to author a custom tool.
+- Icons added to `icon-registry.ts`: `pencil`, `text`, `undo`, `redo`,
+  `eraser`.
+
+## Out of scope v1 (stubbed in types / docs only)
+
+- Image tool — image nodes need loading/caching + upload hookup. Add as
+  `imageTool()` next iteration.
+- ~~Move~~ — shipped in v1 via `moveTool` (reuses shared `hitTest.ts`).
+- Selection / resize / rotate — needs a marquee-select tool and bounds
+  handles. Not in v1.
+- Freeze toggle UI — data model supports `frozen`, but there is no tool to
+  toggle it yet. Add when selection lands.
+- Custom font loading — doc will explain using the `FontFace` API; no bundled
+  loader.
+- ~~Undo/redo~~ — shipped in v1.
+- Save / load — `v-model:nodes` plus JSON is enough for now; real persistence
+  (including bitmap snapshots) comes later.
+- Zoom / pan — stage is fixed-size in v1. Add a viewport transform layer
+  later; tools should keep working because they already operate on
+  canvas-space coordinates.
+
+## Decisions / rationale
+
+- **Per-tool factory (`drawTool()` vs a singleton object):** each call creates
+  fresh closure state (e.g. the "currently drawing" node id), so two canvases
+  on the same page don't trample each other.
+- **`activeId` stored in closure, not context:** it's a transient interaction
+  state owned by the tool, not something any other component cares about.
+- **`stageEl` as a context ref:** text tool needs a DOM parent to mount its
+  inline editor, and future tools (image crop, handles) will need it too.
+- **Not using `<canvas>` per node:** single canvas is simpler, renders faster,
+  and matches the "raster playground" feel. Trade-off: no layer-level hit
+  testing — we'll need to maintain an index when selection arrives.
+
+## File layout
+
+```text
+Canvas/
+├── REQUIREMENTS.md         <- this file
+├── index.vue               <- <orio-canvas>
+├── types.ts                <- CanvasNode, CanvasTool, defineCanvasTool
+├── context.ts              <- provide/inject + useCanvasContext
+├── registry.ts             <- module-level Map<name, CanvasContext> for
+│                              detached toolbars (toolbar in a different
+│                              subtree binds via `canvas="<name>"`)
+├── components/
+│   ├── Stage.vue           <- <orio-canvas-stage>
+│   ├── Toolbar.vue         <- <orio-canvas-toolbar>
+│   └── ToolButton.vue      <- <orio-canvas-tool-button>
+├── composables/
+│   ├── useCanvasHistory.ts <- undo/redo stack
+│   ├── useCanvasNodes.ts   <- add/update/remove/clear
+│   └── useCanvasSetup.ts   <- onMounted setup() + baseline
+└── tools/
+    ├── drawTool.ts
+    ├── textTool.ts
+    ├── eraseTool.ts
+    ├── moveTool.ts
+    ├── highlightTool.ts
+    ├── undoTool.ts
+    ├── redoTool.ts
+    ├── clearTool.ts
+    ├── colorPickerTool.ts
+    ├── hitTest.ts          <- shared findTopNode / renderHighlightRect
+    ├── ColorPickerWidget.vue
+    └── tooltips/           <- per-tool <orio-view-text> + key binds
+```
+
+Auto-import prefix is `Orio`, so nested files become `<orio-canvas-stage>`,
+`<orio-canvas-toolbar>`, `<orio-canvas-tool-button>`.

package/dist/runtime/components/Canvas/components/Stage.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/components/Stage.vue

@@ -0,0 +1,150 @@
+<script setup>
+import { computed, onMounted, onUnmounted, useTemplateRef, watch } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { useCanvasContext } from "../context";
+import { getNodeBounds } from "../tools/hitTest";
+const ctx = useCanvasContext();
+const rootEl = useTemplateRef("rootEl");
+const canvasEl = useTemplateRef("canvasEl");
+let renderQueued = false;
+let rafId = 0;
+function render() {
+  renderQueued = false;
+  const canvas = canvasEl.value;
+  if (!canvas) return;
+  const c = canvas.getContext("2d");
+  if (!c) return;
+  const dpr = window.devicePixelRatio || 1;
+  const { width, height } = ctx.size.value;
+  const pxW = Math.round(width * dpr);
+  const pxH = Math.round(height * dpr);
+  if (canvas.width !== pxW || canvas.height !== pxH) {
+    canvas.width = pxW;
+    canvas.height = pxH;
+  }
+  c.setTransform(dpr, 0, 0, dpr, 0, 0);
+  c.clearRect(0, 0, width, height);
+  const toolMap = new Map(
+    ctx.tools.value.map((t) => [t.id, t])
+  );
+  const ordered = [...ctx.nodes.value].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;
+      c.save();
+      c.translate(cx, cy);
+      c.rotate(node.rotation);
+      c.translate(-cx, -cy);
+      renderFn(c, node);
+      c.restore();
+    } else {
+      renderFn(c, node);
+    }
+  }
+  const active = ctx.tools.value.find((t) => t.id === ctx.activeToolId.value);
+  if (active?.renderOverlay) {
+    active.renderOverlay(c, ctx.getToolApi(active.id));
+  }
+}
+function requestRender() {
+  if (renderQueued) return;
+  renderQueued = true;
+  rafId = requestAnimationFrame(render);
+}
+ctx.installRenderer(requestRender);
+useEventListener(rootEl, "keydown", ctx.onKeyDown);
+onMounted(() => {
+  ctx.stageEl.value = rootEl.value;
+  requestRender();
+});
+onUnmounted(() => {
+  cancelAnimationFrame(rafId);
+  if (ctx.stageEl.value === rootEl.value) {
+    ctx.stageEl.value = null;
+  }
+});
+watch(
+  () => ctx.nodes.value,
+  () => requestRender(),
+  { deep: true }
+);
+watch(() => ctx.size.value, requestRender, { deep: true });
+const activeTool = computed(
+  () => ctx.tools.value.find((t) => t.id === ctx.activeToolId.value)
+);
+const cursor = computed(
+  () => ctx.cursorOverride.value ?? activeTool.value?.cursor ?? "default"
+);
+function toCanvasEvent(e) {
+  const rect = rootEl.value.getBoundingClientRect();
+  return {
+    x: e.clientX - rect.left,
+    y: e.clientY - rect.top,
+    clientX: e.clientX,
+    clientY: e.clientY,
+    buttons: e.buttons,
+    originalEvent: e
+  };
+}
+function onPointerDown(e) {
+  rootEl.value?.focus();
+  const tool = activeTool.value;
+  if (!tool) return;
+  ctx.beginAction();
+  try {
+    e.currentTarget.setPointerCapture(e.pointerId);
+  } catch {
+  }
+  tool.onPointerDown?.(toCanvasEvent(e), ctx.getToolApi(tool.id));
+}
+function onPointerMove(e) {
+  const tool = activeTool.value;
+  if (!tool) return;
+  tool.onPointerMove?.(toCanvasEvent(e), ctx.getToolApi(tool.id));
+}
+function onPointerUp(e) {
+  const tool = activeTool.value;
+  if (!tool) return;
+  tool.onPointerUp?.(toCanvasEvent(e), ctx.getToolApi(tool.id));
+  ctx.endAction();
+  try {
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  } catch {
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="canvas-stage"
+    tabindex="0"
+    :style="{
+  width: ctx.size.value.width + 'px',
+  height: ctx.size.value.height + 'px',
+  cursor
+}"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+  >
+    <canvas
+      ref="canvasEl"
+      :style="{
+  width: ctx.size.value.width + 'px',
+  height: ctx.size.value.height + 'px'
+}"
+    />
+  </div>
+</template>
+
+<style scoped>
+.canvas-stage{outline:none;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.canvas-stage>canvas{display:block}
+</style>

package/dist/runtime/components/Canvas/components/Stage.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/components/ToolButton.d.vue.ts

@@ -0,0 +1,24 @@
+import type { CanvasTool } from "../types.js";
+interface Props {
+    tool: CanvasTool;
+}
+declare function onClick(): void;
+declare var __VLS_24: {
+    tool: CanvasTool<unknown, Record<string, unknown>>;
+    isActive: boolean;
+    activate: typeof onClick;
+}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_24) => any;
+} & {
+    tooltip?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: 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 __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/components/ToolButton.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref, computed, h } from "vue";
+import { useCanvasContext } from "../context";
+const props = defineProps({
+  tool: { type: Object, required: true }
+});
+const ctx = useCanvasContext();
+const kind = computed(() => props.tool.kind ?? "interaction");
+const isActive = computed(
+  () => kind.value === "interaction" && ctx.activeToolId.value === props.tool.id
+);
+const showTooltip = ref(true);
+const isDisabled = computed(() => {
+  if (!props.tool.disabled) return false;
+  return props.tool.disabled(ctx.getToolApi(props.tool.id));
+});
+function onClick() {
+  showTooltip.value = false;
+  if (kind.value === "action") {
+    props.tool.action?.(ctx.getToolApi(props.tool.id));
+  } else if (kind.value === "interaction") {
+    ctx.setActiveTool(props.tool.id);
+  }
+}
+const tooltip = computed(() => {
+  if (props.tool.tooltip) {
+    return h(props.tool.tooltip);
+  }
+  return h("span", props.tool.label ?? props.tool.id);
+});
+</script>
+
+<template>
+  <component
+    :is="tool.toolbar"
+    v-if="kind === 'widget' && tool.toolbar"
+    :tool
+  />
+
+  <orio-tooltip v-else :disabled="!showTooltip">
+    <template #default>
+      <orio-button
+        appearance="minimal"
+        :variant="isActive ? 'primary' : 'subdued'"
+        :aria-pressed="kind === 'interaction' ? isActive : void 0"
+        :disabled="isDisabled"
+        @click="onClick"
+        @mouseleave="showTooltip = true"
+      >
+        <slot :tool :is-active :activate="onClick">
+          <orio-icon v-if="tool.icon" :name="tool.icon" />
+          <span v-else>{{ tool.label ?? tool.id }}</span>
+        </slot>
+      </orio-button>
+    </template>
+    <template #content>
+      <slot name="tooltip">
+        <component :is="tooltip" />
+      </slot>
+    </template>
+  </orio-tooltip>
+</template>

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

@@ -0,0 +1,24 @@
+import type { CanvasTool } from "../types.js";
+interface Props {
+    tool: CanvasTool;
+}
+declare function onClick(): void;
+declare var __VLS_24: {
+    tool: CanvasTool<unknown, Record<string, unknown>>;
+    isActive: boolean;
+    activate: typeof onClick;
+}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_24) => any;
+} & {
+    tooltip?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: 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 __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/components/Toolbar.d.vue.ts

@@ -0,0 +1,24 @@
+interface Props {
+    /**
+     * Name of the `<orio-canvas>` instance to bind to. Lets the toolbar live
+     * anywhere in the app — header, sidebar, modal — not just inside the canvas.
+     */
+    canvas: string;
+}
+declare var __VLS_1: {
+    tools: any;
+    activeToolId: any;
+    setActiveTool: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __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;
+    };
+};