blessing-ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 0.3.0 — 2026-10-10
+
+12 new components, 176 in all, and a round of hardening across the existing ones. Every new component has a docs page, tests, a keyboard path for what the pointer does, and passes axe in light and dark and the end-to-end flows in Chromium, Firefox and WebKit. No breaking changes.
+
+**New components**
+
+- `BlessSparkline`: tiny inline line, bar or win/loss chart, named with a summary for screen readers
+- `BlessConfetti`: canvas burst fired with `fire()`; click-through, and silent under reduced motion
+- `BlessInfiniteCanvas`: pan and zoom surface (drag, Ctrl+wheel, pinch, keys); children can `inject(blessCanvasKey)`
+- `BlessNodeGraph`: draggable nodes and links on the canvas, keyboard linking (L, arrows, Enter), `acyclic`
+- `BlessTreemap`: squarified part-to-whole with drill-down and arrow-key navigation
+- `BlessCoachmark`: a "new" dot with a bubble, seen once (remembered by `id`)
+- `BlessOnboardingChecklist`: first steps with real checkboxes, progress, collapse, dismiss and optional persistence
+- `BlessDock`: magnifying icon strip; off for touch and reduced motion
+- `BlessFormula`: typed calculation parsed without `eval`, live result, exact errors, "did you mean", variable chips; `evaluateFormula` is exported
+- `BlessRangeCalendar`: paint many days by dragging, with keyboard painting
+- `BlessAnnotator`: boxes and pins on an image, as fractions of it
+- `BlessScheduler`: day or week grid; drag to create, move and resize, with overlap lanes
+
+**Existing components**
+
+- `BlessSortable` takes a `group`: lists with the same name trade items by drag or Alt+←/→ (Esc restores every list), with a new `transfer` event. A held grip near the window's top or bottom scrolls the page.
+- `BlessKanban`: a held card near the board's edge scrolls it (`useAutoScroll` is exported).
+- `BlessCommand`: `recent` puts items chosen before at the top while the search is empty (`v-model:history`, `recentLimit`, `persist`), and `scopes` lets a leading `@` or `#` narrow the search to one group, with a chip and a hint. Both are off unless asked for.
+- **Fix:** `BlessTour` could not hydrate in a server-rendered app (its teleport to `body`); it now renders after mount.
+
+**Wording**
+
+- `labels` on Sortable, Kanban, Timer, SliderCaptcha, Cropper, ShortcutRecorder, CodeBlock, Gantt, Calendar, InputNumber, DataTable, DataView, OrderList, PickList, Marquee, Uploader and Editor (by tool key), so buttons, hints and screen-reader announcements can be written in another language.
+- Single strings: `clearLabel` (DatePicker), `dotsLabel` (Carousel), `label` (LoadingBar), `errorText` (Attachment), `removeLabel` (Combobox, FileInput), `pageLabel` (Pagination), `goLabel` (Steps); DataView and SwipeDeck empty states take `labels.empty`.
+
 ## 0.2.0 — 2026-10-03
 
 20 new components, 164 in all. Every one has a docs page, tests, a keyboard path for what the pointer does, and passes axe in light and dark and the end-to-end flows in Chromium, Firefox and WebKit.

package/README.md

@@ -10,7 +10,7 @@ Vue 3 component library and design tokens. Grey-scale UI with one accent that ap
 
 Docs, with every component live: **[ui.blessing.id](https://ui.blessing.id)**
 
-- 164 components — from button to data table to chat — styled only through `--bless-*` custom properties, no Tailwind dependency
+- 176 components — from button to data table to chat — styled only through `--bless-*` custom properties, no Tailwind dependency
 - Native platform first: `<dialog>`, Popover API, `<details>`, native form controls, `Intl` dates, scroll-snap — no positioning, date or table library
 - Accessible defaults: focus rings, ARIA tablist/dialog/tables, `prefers-reduced-motion`
 - ESM, tree-shakable, `vue` as the only required peer (`@tiptap/vue-3` optional, for `BlessEditor`). One component (`BlessButton`) costs ~1 KB gzip of JS and ~2.6 KB of CSS (tokens + its own styles); everything is ~64 KB + 27 KB. CSS is split per component and pulled in by the import, so you never pay for styles you don't use
@@ -86,7 +86,7 @@ import {
 
 ## Components
 
-164 components across eight groups. Every one styles itself from `--bless-*` tokens and ships with a test and a docs page.
+176 components across eight groups. Every one styles itself from `--bless-*` tokens and ships with a test and a docs page.
 
 ### Primitives
 
@@ -125,124 +125,133 @@ import {
 
 ### Forms
 
-| Component                          | Purpose                                                                                                   | Key props / slots                                                                                                                                                                       |
-| ---------------------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `BlessLabel`                       | `<label>` with required mark and hint                                                                     | `for`, `required`, `hint`                                                                                                                                                               |
-| `BlessInput`                       | Text-like input                                                                                           | `v-model`, `type`, `size`, `invalid`, `description`, `error`; `#prefix` `#suffix`                                                                                                       |
-| `BlessInputGroup`                  | Shared surface: addons + any control                                                                      | `size`, `disabled`; `#prefix` `#suffix` (text or `BlessButton`), default = `BlessInput`/`BlessSelect`                                                                                   |
-| `BlessTextarea`                    | Auto-growing textarea                                                                                     | `v-model`, `rows`, `autogrow`, `maxlength`, `counter`, `error`                                                                                                                          |
-| `BlessCheckbox`                    | Native checkbox                                                                                           | `v-model` (bool or array), `value`, `indeterminate`, `description`                                                                                                                      |
-| `BlessRadioGroup` / `BlessRadio`   | Native radios                                                                                             | group `v-model`, `label`, `orientation`; radio `value`, `description`                                                                                                                   |
-| `BlessSwitch`                      | `role=switch` toggle                                                                                      | `v-model`, `size`, `labelPosition`                                                                                                                                                      |
-| `BlessRating`                      | Star rating on native radios                                                                              | `v-model`, `max`, `icon`, `size`, `readonly`                                                                                                                                            |
-| `BlessFileInput`                   | File input + drop zone                                                                                    | `v-model` File[], `accept`, `multiple`, `hint`, `list`, `invalid`                                                                                                                       |
-| `BlessColorPicker`                 | `<input type=color>` + swatches                                                                           | `v-model` hex, `swatches[]`, `showValue`                                                                                                                                                |
-| `BlessPasswordMeter`               | Strength `<meter>` from rules                                                                             | `value`, `rules[{label,test}]`, `labels`, `showRules`                                                                                                                                   |
-| `BlessListbox`                     | `role=listbox`, keyboard + typeahead                                                                      | `v-model` (array when `multiple`), `options`, `rows`, `label`; `#default="{option, selected}"`                                                                                          |
-| `BlessKnob`                        | Rotary dial on `<input type=range>`                                                                       | `v-model`, `min`, `max`, `step`, `size`, `sweep`, `format`, `label`                                                                                                                     |
-| `BlessSignaturePad`                | Canvas signature                                                                                          | `v-model` data URL, `height`, `lineWidth`, `color`, `type`; emits `end`; exposes `clear()` `isEmpty()`                                                                                  |
-| `BlessEditor`                      | Rich text toolbar for Tiptap                                                                              | `editor` (from `useEditor`), `tools[]`, `minHeight`; default slot = `<EditorContent>`; `#toolbar` `#footer`. Optional peer `@tiptap/vue-3`                                              |
-| `BlessRange`                       | Two-thumb range                                                                                           | `v-model` [lo, hi], `min`, `max`, `step`, `gap`, `label`, `showValue`, `format`                                                                                                         |
-| `BlessTimePicker`                  | `<input type=time>` + datalist                                                                            | `v-model` "HH:MM", `step` (minutes), `min`, `max`, `hour12`, `seconds`, `size`                                                                                                          |
-| `BlessUploader`                    | Upload queue                                                                                              | `url`, `field`, `headers`, `accept`, `multiple`, `auto`, `maxSize`; emits `upload(item, progress, done, fail)` `done` `error`; exposes `start()` `clear()`                              |
-| `BlessInputNumber`                 | Number with ± and Intl format                                                                             | `v-model` number, `min`, `max`, `step`, `buttons`, `prefix`, `suffix`, `format`, `locale`                                                                                               |
-| `BlessPasswordInput`               | Password + reveal + meter                                                                                 | `v-model`, `meter`; wraps `BlessInput`                                                                                                                                                  |
-| `BlessInputTags`                   | Free-text tags                                                                                            | `v-model` string[], `separators`, `max`, `duplicates`                                                                                                                                   |
-| `BlessFloatLabel`                  | Floating / in-field label                                                                                 | `label`, `for`, `variant` over/in; wrap a control with `placeholder=" "`                                                                                                                |
-| `BlessFieldset`                    | `<fieldset>` + legend                                                                                     | `legend`, `toggleable`, `v-model:collapsed`, `disabled`                                                                                                                                 |
-| `BlessInplace`                     | Click to edit                                                                                             | `v-model:active`, `closable`; `#display` `#content="{close}"`                                                                                                                           |
-| `BlessCompare`                     | Before / after slider                                                                                     | `v-model` 0–100, `orientation`; `#before` `#after`                                                                                                                                      |
-| `BlessCascadeSelect`               | Nested options, one column per level                                                                      | `v-model`, `options[{value,label,children}]`, `showPath`, `separator`, `size`; emits `select(option, path)`                                                                             |
-| `BlessTreeSelect`                  | Tree in a popover                                                                                         | `v-model` id or id[], `nodes`, `multiple`, `leafOnly`, `size`; emits `select`                                                                                                           |
-| `BlessInputMask`                   | Pattern-masked `BlessInput`                                                                               | `v-model` masked, `mask` (`#` digit `A` letter `*` either), `placeholder`; emits `update:raw`                                                                                           |
-| `BlessOrderList`                   | Reorderable list                                                                                          | `v-model` items, `rowKey`, `buttons`; drag, ↑↓, Alt+arrows; emits `move`; `#default="{item,index}"`                                                                                     |
-| `BlessCountUp`                     | Number that counts up to its value, optionally as odometer reels                                          | `value`, `duration`, `locale`, `options` (Intl), `appear`, `odometer`                                                                                                                   |
-| `BlessTimer`                       | Countdown, stopwatch or interval timer with Start / Pause / Reset                                         | `mode`, `duration`, `phases[{label,seconds}]`, `rounds`, `autostart`, `controls`, `v-model:running`; emits `finish` `phase`; exposes `start` `pause` `reset` `toggle`                   |
-| `BlessGauge`                       | Read-only gauge with zones, as a half circle or a bar (role=meter)                                        | `value`, `min`, `max`, `zones[{to,color,label}]`, `variant` arc/linear, `label`, `format`                                                                                               |
-| `BlessGantt`                       | Schedule: task bars on a day axis with progress, dependencies and a today line; draggable when `editable` | `v-model:tasks` `[{id,label,start,end,progress,after}]`, `editable`, `dayWidth`, `rowHeight`, `from`, `to`, `locale`, `labelWidth`, `v-model:selected`; emits `select` `change`         |
-| `BlessShortcutRecorder`            | Press-to-record key combo with conflict detection                                                         | `v-model` e.g. `Ctrl+K`, `taken` (list or `{combo: name}`), `allowBare`, `label`, `placeholder`; emits `conflict`                                                                       |
-| `BlessDiff`                        | Line diff of two texts, inline or side by side, with folding                                              | `a`, `b`, `mode` inline/split, `context`, `lineNumbers`, `labelA`, `labelB`, `label`                                                                                                    |
-| `BlessCodeBlock`                   | Code listing with copy, line marks, line numbers and file tabs; you bring the highlighter                 | `code`, `lang`, `filename`, `files[{name,code,lang}]`, `v-model:active`, `lines` "2,4-6", `lineNumbers`, `copy`, `wrap`; emits `copy`; `#code="{code,lang,lines}"`                      |
-| `BlessMarquee`                     | Seamless ticker; pauses on hover, focus and a button; still under reduced motion                          | `speed`, `reverse`, `pauseOnHover`, `controls`, `v-model:paused`, `label`                                                                                                               |
-| `BlessMasonry`                     | Variable-height cards packed into columns, in reading order                                               | `items`, `rowKey`, `columns`, `minWidth`, `gap`, `label`; `#default="{item,index}"`                                                                                                     |
-| `BlessSplitView`                   | Master / detail: draggable divider when wide, one pane at a time when narrow                              | `v-model` master width %, `v-model:detail` (stacked), `breakpoint`, `min`, `max`, `storageKey`, `backLabel`; emits `back`; `#master="{open}"` `#detail`                                 |
-| `BlessRadialMenu`                  | Round menu around the pointer: right-click, long touch (slide and release) or the menu key                | `items[{id,label,icon,disabled}]`, `v-model:open`, `radius`, `holdMs`, `disabled`, `label`; emits `select`; default slot is the target, `#item="{item,index}"`                          |
-| `BlessLoupe`                       | Magnifier lens over an image: hover, touch-drag or arrow keys                                             | `src`, `alt`, `zoomSrc`, `zoom`, `size`                                                                                                                                                 |
-| `BlessSliderCaptcha`               | Slide the piece into the gap (a human check, not security)                                                | `v-model:verified`, `src`, `tolerance`, `label`; emits `verify({ms})` `fail`; exposes `reset()`; ←→ + Enter from the keyboard                                                           |
-| `BlessSwipeDeck`                   | Stack of cards: swipe or press to accept / reject / skip                                                  | `v-model` remaining cards, `rowKey`, `label`, `controls`, `threshold`, `labels`; emits `decide(item, decision)` `undo(item)`; `#card` `#empty`; exposes `accept` `reject` `skip` `undo` |
-| `BlessHotspots`                    | Numbered pins on an image or diagram, each with a popover                                                 | `v-model` spots `[{id,x,y,label}]` (percent), `v-model:active`, `src`, `alt`, `editable`, `placement`; emits `add` `remove`; `#spot="{spot,index}"`, default slot for a diagram         |
-| `BlessCropper`                     | Crop and rotate an image; exports the cropped pixels                                                      | `src`, `aspect`, `crossorigin`, `controls`, `label`; `v-model` rect `{x,y,width,height,rotation}`; `toBlob({type,quality,maxWidth})`; emits `ready` `error`                             |
-| `BlessKanban`                      | Board: columns of cards, drag or keys between columns                                                     | `v-model` columns `[{id,title,items,limit}]`, `rowKey`, `label`; emits `move(item, from, to)`; `#card="{item,column,index}"` `#header="{column}"`                                       |
-| `BlessMention`                     | Textarea with `@` / `#` suggestions                                                                       | `v-model`, `options` (list or `{trigger: list}`), `triggers`, `limit`, `label`; other props go to `BlessTextarea`; emits `select(option, trigger)`                                      |
-| `BlessHeatmapCalendar`             | Activity grid, one square per day                                                                         | `data` {iso: count}, `end`, `weeks`, `weekStart`, `levels`, `max`, `locale`, `unit`, `legend`; `v-model` picked day; arrows move by day / week                                          |
-| `BlessSortable`                    | Reorder a list or grid by drag handle or keyboard                                                         | `v-model` items, `rowKey`, `label`, `columns`; drag, Space + arrows, Esc cancels; emits `move`; `#default="{item,index}"`                                                               |
-| `BlessPickList`                    | Transfer between two listboxes                                                                            | `v-model:source`, `v-model:target`, `sourceLabel`, `targetLabel`, `rows`                                                                                                                |
-| `BlessSelect`                      | Styled native `<select>` (picker styled too on Chrome 135+)                                               | `v-model`, `options` (groups ok), `placeholder`, `size`, `error`                                                                                                                        |
-| `BlessSlider`                      | Native range                                                                                              | `v-model`, `min`, `max`, `step`, `showValue`, `format`                                                                                                                                  |
-| `BlessToggle` / `BlessToggleGroup` | Pressed buttons                                                                                           | toggle `v-model:pressed`, `value`; group `v-model`, `type` single/multiple                                                                                                              |
-| `BlessCombobox`                    | Searchable select                                                                                         | `v-model`, `options`, `multiple`, `creatable` (emits `create`), `size`                                                                                                                  |
-| `BlessDatePicker`                  | Calendar in a popover                                                                                     | `v-model` ISO string or `[start,end]`, `range`, `min`, `max`, `locale`, `nativeOnTouch`                                                                                                 |
-| `BlessCalendar`                    | Month grid                                                                                                | same as DatePicker plus `weekStart`, `disabledDates`, `month`                                                                                                                           |
-| `BlessInputOTP`                    | One-time code cells                                                                                       | `v-model`, `length`, `numeric`, `separators`, `masked`; emits `complete`                                                                                                                |
-| `BlessForm` / `BlessField`         | Constraint-API form + field wiring                                                                        | form emits `submit(FormData)` / `invalid`; field `label`, `required`, `description`, `error`; `#default="{ id, error, describedby }"`                                                   |
+| Component                          | Purpose                                                                                                   | Key props / slots                                                                                                                                                                                                                |
+| ---------------------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `BlessLabel`                       | `<label>` with required mark and hint                                                                     | `for`, `required`, `hint`                                                                                                                                                                                                        |
+| `BlessInput`                       | Text-like input                                                                                           | `v-model`, `type`, `size`, `invalid`, `description`, `error`; `#prefix` `#suffix`                                                                                                                                                |
+| `BlessInputGroup`                  | Shared surface: addons + any control                                                                      | `size`, `disabled`; `#prefix` `#suffix` (text or `BlessButton`), default = `BlessInput`/`BlessSelect`                                                                                                                            |
+| `BlessTextarea`                    | Auto-growing textarea                                                                                     | `v-model`, `rows`, `autogrow`, `maxlength`, `counter`, `error`                                                                                                                                                                   |
+| `BlessCheckbox`                    | Native checkbox                                                                                           | `v-model` (bool or array), `value`, `indeterminate`, `description`                                                                                                                                                               |
+| `BlessRadioGroup` / `BlessRadio`   | Native radios                                                                                             | group `v-model`, `label`, `orientation`; radio `value`, `description`                                                                                                                                                            |
+| `BlessSwitch`                      | `role=switch` toggle                                                                                      | `v-model`, `size`, `labelPosition`                                                                                                                                                                                               |
+| `BlessRating`                      | Star rating on native radios                                                                              | `v-model`, `max`, `icon`, `size`, `readonly`                                                                                                                                                                                     |
+| `BlessFileInput`                   | File input + drop zone                                                                                    | `v-model` File[], `accept`, `multiple`, `hint`, `list`, `invalid`                                                                                                                                                                |
+| `BlessColorPicker`                 | `<input type=color>` + swatches                                                                           | `v-model` hex, `swatches[]`, `showValue`                                                                                                                                                                                         |
+| `BlessPasswordMeter`               | Strength `<meter>` from rules                                                                             | `value`, `rules[{label,test}]`, `labels`, `showRules`                                                                                                                                                                            |
+| `BlessListbox`                     | `role=listbox`, keyboard + typeahead                                                                      | `v-model` (array when `multiple`), `options`, `rows`, `label`; `#default="{option, selected}"`                                                                                                                                   |
+| `BlessKnob`                        | Rotary dial on `<input type=range>`                                                                       | `v-model`, `min`, `max`, `step`, `size`, `sweep`, `format`, `label`                                                                                                                                                              |
+| `BlessSignaturePad`                | Canvas signature                                                                                          | `v-model` data URL, `height`, `lineWidth`, `color`, `type`; emits `end`; exposes `clear()` `isEmpty()`                                                                                                                           |
+| `BlessEditor`                      | Rich text toolbar for Tiptap                                                                              | `editor` (from `useEditor`), `tools[]`, `minHeight`; default slot = `<EditorContent>`; `#toolbar` `#footer`. Optional peer `@tiptap/vue-3`                                                                                       |
+| `BlessRange`                       | Two-thumb range                                                                                           | `v-model` [lo, hi], `min`, `max`, `step`, `gap`, `label`, `showValue`, `format`                                                                                                                                                  |
+| `BlessTimePicker`                  | `<input type=time>` + datalist                                                                            | `v-model` "HH:MM", `step` (minutes), `min`, `max`, `hour12`, `seconds`, `size`                                                                                                                                                   |
+| `BlessUploader`                    | Upload queue                                                                                              | `url`, `field`, `headers`, `accept`, `multiple`, `auto`, `maxSize`; emits `upload(item, progress, done, fail)` `done` `error`; exposes `start()` `clear()`                                                                       |
+| `BlessInputNumber`                 | Number with ± and Intl format                                                                             | `v-model` number, `min`, `max`, `step`, `buttons`, `prefix`, `suffix`, `format`, `locale`                                                                                                                                        |
+| `BlessPasswordInput`               | Password + reveal + meter                                                                                 | `v-model`, `meter`; wraps `BlessInput`                                                                                                                                                                                           |
+| `BlessInputTags`                   | Free-text tags                                                                                            | `v-model` string[], `separators`, `max`, `duplicates`                                                                                                                                                                            |
+| `BlessFloatLabel`                  | Floating / in-field label                                                                                 | `label`, `for`, `variant` over/in; wrap a control with `placeholder=" "`                                                                                                                                                         |
+| `BlessFieldset`                    | `<fieldset>` + legend                                                                                     | `legend`, `toggleable`, `v-model:collapsed`, `disabled`                                                                                                                                                                          |
+| `BlessInplace`                     | Click to edit                                                                                             | `v-model:active`, `closable`; `#display` `#content="{close}"`                                                                                                                                                                    |
+| `BlessCompare`                     | Before / after slider                                                                                     | `v-model` 0–100, `orientation`; `#before` `#after`                                                                                                                                                                               |
+| `BlessCascadeSelect`               | Nested options, one column per level                                                                      | `v-model`, `options[{value,label,children}]`, `showPath`, `separator`, `size`; emits `select(option, path)`                                                                                                                      |
+| `BlessTreeSelect`                  | Tree in a popover                                                                                         | `v-model` id or id[], `nodes`, `multiple`, `leafOnly`, `size`; emits `select`                                                                                                                                                    |
+| `BlessInputMask`                   | Pattern-masked `BlessInput`                                                                               | `v-model` masked, `mask` (`#` digit `A` letter `*` either), `placeholder`; emits `update:raw`                                                                                                                                    |
+| `BlessOrderList`                   | Reorderable list                                                                                          | `v-model` items, `rowKey`, `buttons`; drag, ↑↓, Alt+arrows; emits `move`; `#default="{item,index}"`                                                                                                                              |
+| `BlessCountUp`                     | Number that counts up to its value, optionally as odometer reels                                          | `value`, `duration`, `locale`, `options` (Intl), `appear`, `odometer`                                                                                                                                                            |
+| `BlessTimer`                       | Countdown, stopwatch or interval timer with Start / Pause / Reset                                         | `mode`, `duration`, `phases[{label,seconds}]`, `rounds`, `autostart`, `controls`, `v-model:running`; emits `finish` `phase`; exposes `start` `pause` `reset` `toggle`                                                            |
+| `BlessGauge`                       | Read-only gauge with zones, as a half circle or a bar (role=meter)                                        | `value`, `min`, `max`, `zones[{to,color,label}]`, `variant` arc/linear, `label`, `format`                                                                                                                                        |
+| `BlessGantt`                       | Schedule: task bars on a day axis with progress, dependencies and a today line; draggable when `editable` | `v-model:tasks` `[{id,label,start,end,progress,after}]`, `editable`, `dayWidth`, `rowHeight`, `from`, `to`, `locale`, `labelWidth`, `v-model:selected`; emits `select` `change`                                                  |
+| `BlessShortcutRecorder`            | Press-to-record key combo with conflict detection                                                         | `v-model` e.g. `Ctrl+K`, `taken` (list or `{combo: name}`), `allowBare`, `label`, `placeholder`; emits `conflict`                                                                                                                |
+| `BlessDiff`                        | Line diff of two texts, inline or side by side, with folding                                              | `a`, `b`, `mode` inline/split, `context`, `lineNumbers`, `labelA`, `labelB`, `label`                                                                                                                                             |
+| `BlessCodeBlock`                   | Code listing with copy, line marks, line numbers and file tabs; you bring the highlighter                 | `code`, `lang`, `filename`, `files[{name,code,lang}]`, `v-model:active`, `lines` "2,4-6", `lineNumbers`, `copy`, `wrap`; emits `copy`; `#code="{code,lang,lines}"`                                                               |
+| `BlessMarquee`                     | Seamless ticker; pauses on hover, focus and a button; still under reduced motion                          | `speed`, `reverse`, `pauseOnHover`, `controls`, `v-model:paused`, `label`                                                                                                                                                        |
+| `BlessMasonry`                     | Variable-height cards packed into columns, in reading order                                               | `items`, `rowKey`, `columns`, `minWidth`, `gap`, `label`; `#default="{item,index}"`                                                                                                                                              |
+| `BlessSplitView`                   | Master / detail: draggable divider when wide, one pane at a time when narrow                              | `v-model` master width %, `v-model:detail` (stacked), `breakpoint`, `min`, `max`, `storageKey`, `backLabel`; emits `back`; `#master="{open}"` `#detail`                                                                          |
+| `BlessRadialMenu`                  | Round menu around the pointer: right-click, long touch (slide and release) or the menu key                | `items[{id,label,icon,disabled}]`, `v-model:open`, `radius`, `holdMs`, `disabled`, `label`; emits `select`; default slot is the target, `#item="{item,index}"`                                                                   |
+| `BlessLoupe`                       | Magnifier lens over an image: hover, touch-drag or arrow keys                                             | `src`, `alt`, `zoomSrc`, `zoom`, `size`                                                                                                                                                                                          |
+| `BlessSliderCaptcha`               | Slide the piece into the gap (a human check, not security)                                                | `v-model:verified`, `src`, `tolerance`, `label`; emits `verify({ms})` `fail`; exposes `reset()`; ←→ + Enter from the keyboard                                                                                                    |
+| `BlessSwipeDeck`                   | Stack of cards: swipe or press to accept / reject / skip                                                  | `v-model` remaining cards, `rowKey`, `label`, `controls`, `threshold`, `labels`; emits `decide(item, decision)` `undo(item)`; `#card` `#empty`; exposes `accept` `reject` `skip` `undo`                                          |
+| `BlessHotspots`                    | Numbered pins on an image or diagram, each with a popover                                                 | `v-model` spots `[{id,x,y,label}]` (percent), `v-model:active`, `src`, `alt`, `editable`, `placement`; emits `add` `remove`; `#spot="{spot,index}"`, default slot for a diagram                                                  |
+| `BlessCropper`                     | Crop and rotate an image; exports the cropped pixels                                                      | `src`, `aspect`, `crossorigin`, `controls`, `label`; `v-model` rect `{x,y,width,height,rotation}`; `toBlob({type,quality,maxWidth})`; emits `ready` `error`                                                                      |
+| `BlessKanban`                      | Board: columns of cards, drag or keys between columns                                                     | `v-model` columns `[{id,title,items,limit}]`, `rowKey`, `label`; emits `move(item, from, to)`; `#card="{item,column,index}"` `#header="{column}"`                                                                                |
+| `BlessMention`                     | Textarea with `@` / `#` suggestions                                                                       | `v-model`, `options` (list or `{trigger: list}`), `triggers`, `limit`, `label`; other props go to `BlessTextarea`; emits `select(option, trigger)`                                                                               |
+| `BlessHeatmapCalendar`             | Activity grid, one square per day                                                                         | `data` {iso: count}, `end`, `weeks`, `weekStart`, `levels`, `max`, `locale`, `unit`, `legend`; `v-model` picked day; arrows move by day / week                                                                                   |
+| `BlessSortable`                    | Reorder a list or grid by drag handle or keyboard                                                         | `v-model` items, `rowKey`, `label`, `columns`; drag, Space + arrows, Esc cancels; emits `move`; `#default="{item,index}"`                                                                                                        |
+| `BlessPickList`                    | Transfer between two listboxes                                                                            | `v-model:source`, `v-model:target`, `sourceLabel`, `targetLabel`, `rows`                                                                                                                                                         |
+| `BlessSelect`                      | Styled native `<select>` (picker styled too on Chrome 135+)                                               | `v-model`, `options` (groups ok), `placeholder`, `size`, `error`                                                                                                                                                                 |
+| `BlessSlider`                      | Native range                                                                                              | `v-model`, `min`, `max`, `step`, `showValue`, `format`                                                                                                                                                                           |
+| `BlessToggle` / `BlessToggleGroup` | Pressed buttons                                                                                           | toggle `v-model:pressed`, `value`; group `v-model`, `type` single/multiple                                                                                                                                                       |
+| `BlessCombobox`                    | Searchable select                                                                                         | `v-model`, `options`, `multiple`, `creatable` (emits `create`), `size`                                                                                                                                                           |
+| `BlessDatePicker`                  | Calendar in a popover                                                                                     | `v-model` ISO string or `[start,end]`, `range`, `min`, `max`, `locale`, `nativeOnTouch`                                                                                                                                          |
+| `BlessCalendar`                    | Month grid                                                                                                | same as DatePicker plus `weekStart`, `disabledDates`, `month`                                                                                                                                                                    |
+| `BlessInputOTP`                    | One-time code cells                                                                                       | `v-model`, `length`, `numeric`, `separators`, `masked`; emits `complete`                                                                                                                                                         |
+| `BlessForm` / `BlessField`         | Constraint-API form + field wiring                                                                        | form emits `submit(FormData)` / `invalid`; field `label`, `required`, `description`, `error`; `#default="{ id, error, describedby }"`                                                                                            |
+| `BlessNodeGraph`                   | Editable node-and-link diagram; keyboard linking, acyclic option                                          | `v-model:nodes` `{id,x,y,label}`, `v-model:edges` `{from,to}`, `v-model:selected`, `v-model:view`, `snap`, `acyclic`, `editable`, `nodeWidth`, `nodeHeight`, `label`, `labels`; `#node`; `connect` `disconnect` `move` `remove`  |
+| `BlessFormula`                     | Safe expression field: live result, exact errors, did-you-mean, variable chips                            | `v-model`, `variables` `{name,label?,value}`, `functions`, `label`, `placeholder`, `disabled`, `locale`, `labels`; `result`                                                                                                      |
+| `BlessRangeCalendar`               | Month where drags add or remove days (availability); keyboard painting, blocks summary                    | `v-model` `string[]` (YYYY-MM-DD), `month`, `weekStart`, `locale`, `min`, `max`, `disabledDates`, `label`, `labels`; `#summary`; `change`                                                                                        |
+| `BlessScheduler`                   | Day/week time grid; drag to create/move/resize, overlap lanes, keyboard, snap                             | `v-model` events `{id,title,date,start,end}` (minutes), `v-model:date`, `v-model:selected`, `view`, `weekStart`, `dayStart`, `dayEnd`, `snap`, `hourHeight`, `locale`, `editable`, `label`, `labels`; `create` `change` `remove` |
 
 ### Layout & navigation
 
-| Component                                   | Purpose                                  | Key props / slots                                                                                                          |
-| ------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `BlessStage`                                | Page shell, sidebar → drawer under 800px | `v-model:open`; `#sidebar` default `#footer` `#background`                                                                 |
-| `BlessSidebarNav`                           | Vertical nav list                        | `items`, `active`; emits `select`; `#item`                                                                                 |
-| `BlessNavigationMenu`                       | Horizontal nav with panels               | `items[{label,href,items[]}]`; emits `select`; `#panel`                                                                    |
-| `BlessMenubar`                              | Bar of `BlessDropdownMenu`s              | `label`                                                                                                                    |
-| `BlessSteps`                                | Stepper                                  | `steps[{label,description}]`, `v-model` index, `orientation`, `clickable`; emits `select`                                  |
-| `BlessTree` / `BlessTreeItem`               | Nested `<details>` tree                  | `nodes[{label,id,href,icon,children,open,disabled}]`, `v-model:selected`; emits `select` `change`                          |
-| `BlessContainer`                            | Centred max-width box                    | `size` sm/md/lg/full, `padded`, `as`                                                                                       |
-| `BlessStack`                                | Flex row / column                        | `direction`, `gap` token, `align`, `justify`, `wrap`, `as`                                                                 |
-| `BlessScrollTop`                            | Back-to-top button                       | `threshold`, `target`, `position`, `label`                                                                                 |
-| `BlessToolbar`                              | Start / center / end bar                 | `label`, `surface`; `#start` `#center` `#end`                                                                              |
-| `BlessPanel`                                | Titled box                               | `title`, `toggleable`, `v-model:collapsed`, `surface`; `#actions` `#footer`                                                |
-| `BlessStepper`                              | Steps + panels                           | `steps`, `v-model`, `orientation`, `labels`; `#default="{step,index,next,prev,last}"` `#actions`; emits `finish`           |
-| `BlessSplitButton`                          | Button + menu                            | `label`, `items`, `color`, `variant`, `size`; emits `click` `select`                                                       |
-| `BlessDataView`                             | List / grid + pagination                 | `items`, `pageSize`, `columns`, `v-model:layout`, `rowKey`; `#default="{item,index,layout}"` `#header` `#empty`            |
-| `BlessDeferredContent`                      | Mount on scroll into view                | `rootMargin`, `minHeight`; `#placeholder`; emits `load`                                                                    |
-| `BlessTreeTable`                            | Expandable rows                          | `rows` (with `children`), `columns`, `rowKey`, `treeColumn`, `v-model:expanded`, `defaultExpanded`; `#cell-*` pass through |
-| `BlessOrgChart` / `BlessOrgChartNode`       | Node tree with connectors                | `nodes`, `v-model:selected`; `#node="{node, selected}"`; emits `select`                                                    |
-| `BlessBottomTabs`                           | Mobile bottom nav / dock                 | `items[{label,value,icon,href,badge}]`, `v-model`, `variant` bar/dock, `inline`; emits `select`                            |
-| `BlessSpeedDial`                            | FAB with fan-out actions                 | `actions[{label,value,icon,color}]`, `direction`, `color`, `v-model:open`, `inline`; emits `select`                        |
-| `BlessVirtualScroller`                      | Windowed list (fixed row height)         | `items`, `itemHeight`, `height`, `overscan`, `rowKey`; exposes `scrollTo(i)`; `#default="{item,index}"`                    |
-| `BlessBreadcrumb`                           | Trail                                    | `items[{label,href}]`, `separator`; `#item`                                                                                |
-| `BlessPagination`                           | Page list                                | `v-model`, `total`, `siblings`, `href(page)`                                                                               |
-| `BlessTabs`                                 | ARIA tablist                             | `tabs`, `v-model`, `activation`, `color`; `#default="{tab}"` `#tab`                                                        |
-| `BlessSection` / `BlessWatermark`           | Titled block with a giant watermark word | `title`, `watermark`, `watermarkPosition`, `headingLevel`                                                                  |
-| `BlessBackground`                           | Tiled texture layer                      | `src`, `offset`, `mode`, `opacity`                                                                                         |
-| `BlessCard`                                 | Flat surface                             | `label`, `labelColor`, `surface`, `bordered`, `href`; `#media` `#footer`                                                   |
-| `BlessList` / `BlessListItem`               | Divided rows                             | item `meta`, `badge`, `href`; `#suffix`                                                                                    |
-| `BlessCollapsible` / `BlessAccordion(Item)` | `<details>` based                        | `v-model:open`, `title`, `disabled`; accordion `type` single/multiple                                                      |
-| `BlessScrollArea`                           | Thin scrollbar + fade                    | `axis`, `fade`, `height`, `width`                                                                                          |
-| `BlessResizable`                            | Two-pane split                           | `v-model` (% of first pane), `direction`, `min`, `max`, `step`; `#a` `#b`                                                  |
-| `BlessTable`                                | Typed table, stacks on mobile            | `columns`, `rows`, `rowKey`, `caption`, `striped`, `stack`; `#cell-<key>`                                                  |
-| `BlessDataTable`                            | Table + sort/search/select/paginate      | `columns` (+`sortable`, `hideable`), `rows`, `rowKey`, `selectable`, `searchable`, `pageSize`; `#toolbar` `#cell-<key>`    |
+| Component                                   | Purpose                                                                                       | Key props / slots                                                                                                                                          |
+| ------------------------------------------- | --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `BlessStage`                                | Page shell, sidebar → drawer under 800px                                                      | `v-model:open`; `#sidebar` default `#footer` `#background`                                                                                                 |
+| `BlessSidebarNav`                           | Vertical nav list                                                                             | `items`, `active`; emits `select`; `#item`                                                                                                                 |
+| `BlessNavigationMenu`                       | Horizontal nav with panels                                                                    | `items[{label,href,items[]}]`; emits `select`; `#panel`                                                                                                    |
+| `BlessMenubar`                              | Bar of `BlessDropdownMenu`s                                                                   | `label`                                                                                                                                                    |
+| `BlessSteps`                                | Stepper                                                                                       | `steps[{label,description}]`, `v-model` index, `orientation`, `clickable`; emits `select`                                                                  |
+| `BlessTree` / `BlessTreeItem`               | Nested `<details>` tree                                                                       | `nodes[{label,id,href,icon,children,open,disabled}]`, `v-model:selected`; emits `select` `change`                                                          |
+| `BlessContainer`                            | Centred max-width box                                                                         | `size` sm/md/lg/full, `padded`, `as`                                                                                                                       |
+| `BlessStack`                                | Flex row / column                                                                             | `direction`, `gap` token, `align`, `justify`, `wrap`, `as`                                                                                                 |
+| `BlessScrollTop`                            | Back-to-top button                                                                            | `threshold`, `target`, `position`, `label`                                                                                                                 |
+| `BlessToolbar`                              | Start / center / end bar                                                                      | `label`, `surface`; `#start` `#center` `#end`                                                                                                              |
+| `BlessPanel`                                | Titled box                                                                                    | `title`, `toggleable`, `v-model:collapsed`, `surface`; `#actions` `#footer`                                                                                |
+| `BlessStepper`                              | Steps + panels                                                                                | `steps`, `v-model`, `orientation`, `labels`; `#default="{step,index,next,prev,last}"` `#actions`; emits `finish`                                           |
+| `BlessSplitButton`                          | Button + menu                                                                                 | `label`, `items`, `color`, `variant`, `size`; emits `click` `select`                                                                                       |
+| `BlessDataView`                             | List / grid + pagination                                                                      | `items`, `pageSize`, `columns`, `v-model:layout`, `rowKey`; `#default="{item,index,layout}"` `#header` `#empty`                                            |
+| `BlessDeferredContent`                      | Mount on scroll into view                                                                     | `rootMargin`, `minHeight`; `#placeholder`; emits `load`                                                                                                    |
+| `BlessTreeTable`                            | Expandable rows                                                                               | `rows` (with `children`), `columns`, `rowKey`, `treeColumn`, `v-model:expanded`, `defaultExpanded`; `#cell-*` pass through                                 |
+| `BlessOrgChart` / `BlessOrgChartNode`       | Node tree with connectors                                                                     | `nodes`, `v-model:selected`; `#node="{node, selected}"`; emits `select`                                                                                    |
+| `BlessBottomTabs`                           | Mobile bottom nav / dock                                                                      | `items[{label,value,icon,href,badge}]`, `v-model`, `variant` bar/dock, `inline`; emits `select`                                                            |
+| `BlessSpeedDial`                            | FAB with fan-out actions                                                                      | `actions[{label,value,icon,color}]`, `direction`, `color`, `v-model:open`, `inline`; emits `select`                                                        |
+| `BlessVirtualScroller`                      | Windowed list (fixed row height)                                                              | `items`, `itemHeight`, `height`, `overscan`, `rowKey`; exposes `scrollTo(i)`; `#default="{item,index}"`                                                    |
+| `BlessBreadcrumb`                           | Trail                                                                                         | `items[{label,href}]`, `separator`; `#item`                                                                                                                |
+| `BlessPagination`                           | Page list                                                                                     | `v-model`, `total`, `siblings`, `href(page)`                                                                                                               |
+| `BlessTabs`                                 | ARIA tablist                                                                                  | `tabs`, `v-model`, `activation`, `color`; `#default="{tab}"` `#tab`                                                                                        |
+| `BlessSection` / `BlessWatermark`           | Titled block with a giant watermark word                                                      | `title`, `watermark`, `watermarkPosition`, `headingLevel`                                                                                                  |
+| `BlessBackground`                           | Tiled texture layer                                                                           | `src`, `offset`, `mode`, `opacity`                                                                                                                         |
+| `BlessCard`                                 | Flat surface                                                                                  | `label`, `labelColor`, `surface`, `bordered`, `href`; `#media` `#footer`                                                                                   |
+| `BlessList` / `BlessListItem`               | Divided rows                                                                                  | item `meta`, `badge`, `href`; `#suffix`                                                                                                                    |
+| `BlessCollapsible` / `BlessAccordion(Item)` | `<details>` based                                                                             | `v-model:open`, `title`, `disabled`; accordion `type` single/multiple                                                                                      |
+| `BlessScrollArea`                           | Thin scrollbar + fade                                                                         | `axis`, `fade`, `height`, `width`                                                                                                                          |
+| `BlessResizable`                            | Two-pane split                                                                                | `v-model` (% of first pane), `direction`, `min`, `max`, `step`; `#a` `#b`                                                                                  |
+| `BlessTable`                                | Typed table, stacks on mobile                                                                 | `columns`, `rows`, `rowKey`, `caption`, `striped`, `stack`; `#cell-<key>`                                                                                  |
+| `BlessDataTable`                            | Table + sort/search/select/paginate                                                           | `columns` (+`sortable`, `hideable`), `rows`, `rowKey`, `selectable`, `searchable`, `pageSize`; `#toolbar` `#cell-<key>`                                    |
+| `BlessInfiniteCanvas`                       | Pan / zoom surface; Ctrl+wheel and pinch zoom, arrows and +/− from the keyboard               | `v-model:view` `{x,y,zoom}`, `minZoom`, `maxZoom`, `grid`, `controls`, `wheelZoom`, `label`, `labels`; exposes `fit` `centerOn` `zoomBy` `reset` `toWorld` |
+| `BlessDock`                                 | Magnifying icon dock; toolbar keys, links or buttons, badge; off for touch and reduced motion | `items` `{id,label,icon?,href?,badge?,disabled?}`, `position`, `size`, `magnification`, `radius`, `label`; `#item`; `select`                               |
 
 ### Overlays
 
-| Component                         | Purpose                          | Key props / slots                                                                                                               |
-| --------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `BlessModal`                      | Native `<dialog>`                | `v-model`, `title`, `hash` (deep link), `size`, `dismissible`; `#footer`                                                        |
-| `BlessAlertDialog`                | Confirm dialog                   | `v-model`, `title`, `description`, `confirmLabel`, `cancelLabel`, `color`, `loading`; emits `confirm` `cancel`                  |
-| `BlessSheet`                      | Side panel                       | `v-model`, `side`, `title`, `size`, `handle`; `#footer`                                                                         |
-| `BlessDrawer`                     | Bottom sheet with swipe-to-close | `v-model`, `title`                                                                                                              |
-| `BlessPopover`                    | Popover API panel                | `v-model:open`, `placement`, `trigger` click/hover/manual, `modal`; `#trigger` `#default="{close}"`                             |
-| `BlessTooltip`                    | Hover/focus tip                  | `text`, `placement`, `delay`; `#content`                                                                                        |
-| `BlessHoverCard`                  | Rich hover popover               | `placement`, `openDelay`, `closeDelay`; `#trigger`                                                                              |
-| `BlessDropdownMenu`               | ARIA menu                        | `items` (item/checkbox/radio/separator/label/sub), `placement`, `v-model:checked`, `v-model:radios`; emits `select`; `#trigger` |
-| `BlessContextMenu`                | Menu on right click              | `items`; wraps its slot                                                                                                         |
-| `BlessCommand`                    | ⌘K palette                       | `v-model:open`, `items` (groups, keywords, shortcuts), `inline`, `hotkey`; emits `select`; `#footer`                            |
-| `BlessGallery`                    | Thumb grid + lightbox            | `items`, `v-model` index, `columns`, `loop`                                                                                     |
-| `BlessConfirmPopup`               | Confirm in a popover             | `message`, `title`, `confirmLabel`, `cancelLabel`, `color`, `placement`, `v-model:open`; emits `confirm` `cancel`               |
-| `BlessDialogHost` + `useDialog()` | Programmatic modals              | `open({ title, component, props, text, size, dismissible })` → Promise, `close(id, result)`                                     |
-| `BlessTour`                       | Spotlight walkthrough            | `steps[{target,title,text,placement}]`, `v-model:open`, `v-model:step`, `spotlight`, `labels`; emits `finish` `skip`            |
-| `BlessToaster` + `useToast()`     | Notifications                    | `position`; `toast()`, `success()`, `error()`, `warning()`, `info()`, `dismiss()`                                               |
-| `BlessSplash`                     | First-visit overlay              | `once`, `duration`, `skipLabel`; emits `done`                                                                                   |
+| Component                         | Purpose                                                                            | Key props / slots                                                                                                                                                                                        |
+| --------------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `BlessModal`                      | Native `<dialog>`                                                                  | `v-model`, `title`, `hash` (deep link), `size`, `dismissible`; `#footer`                                                                                                                                 |
+| `BlessAlertDialog`                | Confirm dialog                                                                     | `v-model`, `title`, `description`, `confirmLabel`, `cancelLabel`, `color`, `loading`; emits `confirm` `cancel`                                                                                           |
+| `BlessSheet`                      | Side panel                                                                         | `v-model`, `side`, `title`, `size`, `handle`; `#footer`                                                                                                                                                  |
+| `BlessDrawer`                     | Bottom sheet with swipe-to-close                                                   | `v-model`, `title`                                                                                                                                                                                       |
+| `BlessPopover`                    | Popover API panel                                                                  | `v-model:open`, `placement`, `trigger` click/hover/manual, `modal`; `#trigger` `#default="{close}"`                                                                                                      |
+| `BlessTooltip`                    | Hover/focus tip                                                                    | `text`, `placement`, `delay`; `#content`                                                                                                                                                                 |
+| `BlessHoverCard`                  | Rich hover popover                                                                 | `placement`, `openDelay`, `closeDelay`; `#trigger`                                                                                                                                                       |
+| `BlessDropdownMenu`               | ARIA menu                                                                          | `items` (item/checkbox/radio/separator/label/sub), `placement`, `v-model:checked`, `v-model:radios`; emits `select`; `#trigger`                                                                          |
+| `BlessContextMenu`                | Menu on right click                                                                | `items`; wraps its slot                                                                                                                                                                                  |
+| `BlessCommand`                    | ⌘K palette                                                                         | `v-model:open`, `v-model:history`, `items` (groups, keywords, shortcuts), `scopes`, `recent`, `recentLimit`, `persist`, `labels`, `inline`, `hotkey`; emits `select`; `#footer`                          |
+| `BlessGallery`                    | Thumb grid + lightbox                                                              | `items`, `v-model` index, `columns`, `loop`                                                                                                                                                              |
+| `BlessConfirmPopup`               | Confirm in a popover                                                               | `message`, `title`, `confirmLabel`, `cancelLabel`, `color`, `placement`, `v-model:open`; emits `confirm` `cancel`                                                                                        |
+| `BlessDialogHost` + `useDialog()` | Programmatic modals                                                                | `open({ title, component, props, text, size, dismissible })` → Promise, `close(id, result)`                                                                                                              |
+| `BlessTour`                       | Spotlight walkthrough                                                              | `steps[{target,title,text,placement}]`, `v-model:open`, `v-model:step`, `spotlight`, `labels`; emits `finish` `skip`                                                                                     |
+| `BlessToaster` + `useToast()`     | Notifications                                                                      | `position`; `toast()`, `success()`, `error()`, `warning()`, `info()`, `dismiss()`                                                                                                                        |
+| `BlessSplash`                     | First-visit overlay                                                                | `once`, `duration`, `skipLabel`; emits `done`                                                                                                                                                            |
+| `BlessConfetti`                   | Confetti burst fired with `fire(from?, angle?)`; off under reduced motion          | `count`, `colors`, `duration`, `spread`, `power`, `gravity`; `done`                                                                                                                                      |
+| `BlessCoachmark`                  | Pulsing new-dot with a bubble; remembers dismissal by id                           | `text`, `id`, `placement`, `dismissOnUse`, `v-model:dismissed`, `labels`; `dismiss`                                                                                                                      |
+| `BlessOnboardingChecklist`        | Getting-started checklist: real checkboxes, progress, collapse, dismiss, persisted | `items` `{id,label,description?,action?}`, `v-model:done`, `v-model:collapsed`, `v-model:dismissed`, `title`, `persist`, `floating`, `dismissible`, `labels`; `#complete`; `select` `complete` `dismiss` |
 
 ### Conversation
 
@@ -257,10 +266,12 @@ import {
 
 ### Chart
 
-| Component     | Purpose                                                          | Key props / slots                                                                            |
-| ------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| `BlessChart`  | Themed frame for any [Unovis](https://unovis.dev) chart          | `title`, `description`, `height`, `legend[]`; `#header` `#legend` `#footer`, default = chart |
-| `BlessQrCode` | QR SVG from a module matrix ([uqr](https://github.com/unjs/uqr)) | `matrix` boolean[][], `value`, `size`, `border`, `color`, `background`, `frame`              |
+| Component        | Purpose                                                             | Key props / slots                                                                                            |
+| ---------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `BlessChart`     | Themed frame for any [Unovis](https://unovis.dev) chart             | `title`, `description`, `height`, `legend[]`; `#header` `#legend` `#footer`, default = chart                 |
+| `BlessQrCode`    | QR SVG from a module matrix ([uqr](https://github.com/unjs/uqr))    | `matrix` boolean[][], `value`, `size`, `border`, `color`, `background`, `frame`                              |
+| `BlessSparkline` | Tiny inline trend: line, bar or win/loss                            | `data`, `type`, `width`, `height`, `color`, `negativeColor`, `fill`, `dot`, `label`, `format`                |
+| `BlessTreemap`   | Squarified treemap of a tree of sizes; drill-down path and keyboard | `data` `{id,label,value?,children?,color?}`, `v-model:path`, `height`, `format`, `label`, `labels`; `select` |
 
 Blessing does not bundle a chart library. `BlessChart` maps `--bless-color-chart-{1..5}`, type and dark mode onto Unovis' `--vis-*` variables, and adds a legend. Install Unovis yourself:
 
@@ -295,13 +306,14 @@ Gestures: `usePan(el, cb)` · `useSwipe(el, cb, { threshold, axis })` · `useLon
 
 ### Media
 
-| Component          | Purpose                   | Key props / slots                                                                                                   |
-| ------------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| `BlessImg`         | Lazy image                | `src`, `alt`, `ratio`, `fit`, `loading`, `placeholder`, `srcset`, `sizes`; default slot = caption overlay; `#error` |
-| `BlessVideo`       | Responsive embed / video  | `src`, `title`, `ratio`, `native`, `poster`                                                                         |
-| `BlessParallax`    | Slow-scrolling background | `src`, `height`, `speed`; `#media` default                                                                          |
-| `BlessCarousel`    | Scroll-snap slider        | `v-model`, `perView`, `gap`, `loop`, `autoplay`, `dots`, `arrows`                                                   |
-| `BlessAudioPlayer` | Track list player         | `tracks`, `v-model` index, `color`; emits `play` `pause` `ended`                                                    |
+| Component          | Purpose                                                                         | Key props / slots                                                                                                         |
+| ------------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `BlessImg`         | Lazy image                                                                      | `src`, `alt`, `ratio`, `fit`, `loading`, `placeholder`, `srcset`, `sizes`; default slot = caption overlay; `#error`       |
+| `BlessVideo`       | Responsive embed / video                                                        | `src`, `title`, `ratio`, `native`, `poster`                                                                               |
+| `BlessParallax`    | Slow-scrolling background                                                       | `src`, `height`, `speed`; `#media` default                                                                                |
+| `BlessCarousel`    | Scroll-snap slider                                                              | `v-model`, `perView`, `gap`, `loop`, `autoplay`, `dots`, `arrows`                                                         |
+| `BlessAudioPlayer` | Track list player                                                               | `tracks`, `v-model` index, `color`; emits `play` `pause` `ended`                                                          |
+| `BlessAnnotator`   | Draw / move / resize boxes and pins on an image; regions as fractions; keyboard | `v-model` regions `{id,x,y,w?,h?,label}`, `v-model:selected`, `v-model:tool`, `src`, `alt`, `editable`, `label`, `labels` |
 
 ### Composables