@misoto22/design 0.6.1 → 0.7.0

package/README.md

@@ -30,6 +30,18 @@ import '@misoto22/design/semantic.css'  // roles
 import '@misoto22/design/keyframes.css' // motion
 ```
 
+Diagrams ship from their own specifier, so a page that renders a `Badge` does
+not pay for a routing engine:
+
+```tsx
+import { ArchitectureFigure, DiagramCanvas } from '@misoto22/design/diagrams'
+```
+
+Five server-rendered figures — architecture, workflow, sequence, data-flow and
+lifecycle — plus the chrome to explore one. They read the JSON schemas
+published by [archify](https://github.com/tt-a1i/archify), so a specification
+authored for that tool renders here with no translation step.
+
 ## Theming
 
 Seven independent axes, each an attribute, each working on **any** element

package/dist/agent/Accordion.md

@@ -4,7 +4,7 @@ Disclosure rows that open in place.
 
 - Group: Navigation
 - Import: `import { Accordion } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/accordion/
 - Related: tabs
 

package/dist/agent/Alert.md

@@ -4,7 +4,7 @@ A message about the page, in place.
 
 - Group: Feedback
 - Import: `import { Alert } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/alert/
 - Related: toast, error-state
 

package/dist/agent/AppShell.md

@@ -4,7 +4,7 @@ Two columns on a desktop, a drawer on a phone.
 
 - Group: Surfaces
 - Import: `import { AppShell } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/app-shell/
 - Related: nav-item
 

package/dist/agent/ArchitectureFigure.md

@@ -0,0 +1,48 @@
+# ArchitectureFigure
+
+A component map: services, datastores, trust boundaries, and what talks to what.
+
+- Group: Diagrams
+- Import: `import { ArchitectureFigure } from '@misoto22/design/diagrams'`
+- Version: 0.7.0
+- Docs: https://ui.misoto22.com/components/architecture-figure/
+- Related: dataflow-figure, diagram, diagram-canvas
+
+## When to reach for it
+
+Reach for it when the question is "what talks to what". If the question is "in what order", that is a workflow or a sequence; if it is "what is in this arrow", that is a data flow.
+
+## Accessibility
+
+- The <svg> is role="img" with a name, so a screen reader announces a picture instead of walking two hundred <text> nodes in drawing order.
+- The diagram’s content is published beside it as an ordinary list — every node with its kind, every relationship as "A → B: over HTTPS". That list is where the meaning lives for anyone not looking at the picture.
+- Passing onSelectNode turns that list into real buttons, which is the keyboard’s only route to a selection: the plates inside the picture are presentational by construction.
+
+## ArchitectureFigure
+
+A component map: services, datastores, boundaries, and what talks to what. Takes the same JSON an archify `architecture` specification carries — `components`, `boundaries`, `connections` — and draws it in this system's own terms: paper plates on a hairline, one reversed plate for the component the diagram is about, and seven drawn sigils where archify uses seven hues. IT RENDERS ON A SERVER because every position is already in the specification. A component gives a `row` and a `col` into a grid whose cell size is either declared or defaulted, or it gives an absolute `pos` — nothing here is solved for, relaxed, or measured. So the markup is a pure function of the input, it is identical on the server and in the browser, and there is no layout shift on hydration because there is no layout to do. BOUNDARIES ARE DRAWN FIRST, AND DRAWN DIFFERENTLY. A `region` is where something RUNS — a VPC, a zone, a cluster — and is a solid frame. A `security-group` is what may REACH it, and is dashed. That is not decoration: an infrastructure diagram is very often read for exactly one of those two questions, and a reader should be able to tell which line answers which without reading either label.
+
+### Props
+
+- `spec` (required) — `ArchitectureSpec`.
+
+Also accepts: `FigureChrome`.
+
+## Examples
+
+```tsx
+<ArchitectureFigure
+  spec={{
+    meta: { title: 'Request path' },
+    components: [
+      { id: 'cdn', type: 'cloud', label: 'CloudFront', row: 0, col: 0 },
+      { id: 'api', type: 'backend', label: 'FastAPI', sublabel: 'ECS', row: 0, col: 1 },
+      { id: 'db', type: 'database', label: 'Postgres', row: 0, col: 2 },
+    ],
+    connections: [
+      { from: 'cdn', to: 'api', label: 'HTTPS' },
+      { from: 'api', to: 'db', label: 'SQL' },
+    ],
+  }}
+/>
+```

package/dist/agent/AreaChart.md

@@ -4,7 +4,7 @@ A filled series over a continuous axis, where the area means something.
 
 - Group: Charts
 - Import: `import { AreaChart } from '@misoto22/design/charts'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/area-chart/
 - Related: line-chart, bar-chart, composed-chart
 

package/dist/agent/Article.md

@@ -4,7 +4,7 @@ The long-form reading surface — everything a Markdown pipeline emits, in this
 
 - Group: Surfaces
 - Import: `import { Article } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/article/
 - Related: diagram, card
 

package/dist/agent/Avatar.md

@@ -4,7 +4,7 @@ A person, as a circle, with initials until the image lands.
 
 - Group: Display
 - Import: `import { Avatar } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/avatar/
 
 ## Accessibility

package/dist/agent/Badge.md

@@ -4,7 +4,7 @@ A count or a state, set in mono so it reads as metadata.
 
 - Group: Display
 - Import: `import { Badge } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/badge/
 - Related: tag, status-pill
 

package/dist/agent/BarChart.md

@@ -4,7 +4,7 @@ Discrete categories compared by length.
 
 - Group: Charts
 - Import: `import { BarChart } from '@misoto22/design/charts'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/bar-chart/
 - Related: area-chart, composed-chart, radial-chart
 

package/dist/agent/BarList.md

@@ -4,7 +4,7 @@ A ranked list, with the bar behind the name rather than beside it.
 
 - Group: Data
 - Import: `import { BarList } from '@misoto22/design/charts'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/bar-list/
 - Related: bar-chart, table
 

package/dist/agent/BigNumber.md

@@ -4,7 +4,7 @@ One number, at the size of a headline.
 
 - Group: Data
 - Import: `import { BigNumber } from '@misoto22/design/charts'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/big-number/
 - Related: sparkline, figure-band
 

package/dist/agent/BoxPlot.md

@@ -4,7 +4,7 @@ The spread of a measurement, per category.
 
 - Group: Charts
 - Import: `import { BoxPlot } from '@misoto22/design/charts'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/box-plot/
 - Related: histogram, scatter-chart
 

package/dist/agent/Breadcrumb.md

@@ -4,7 +4,7 @@ Where you are, as a path.
 
 - Group: Navigation
 - Import: `import { Breadcrumb } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/breadcrumb/
 - Related: pagination
 

package/dist/agent/BulletChart.md

@@ -4,7 +4,7 @@ A measure, its target, and the bands that say whether it is any good.
 
 - Group: Data
 - Import: `import { BulletChart } from '@misoto22/design/charts'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/bullet-chart/
 - Related: bar-list, big-number
 

package/dist/agent/Button.md

@@ -4,7 +4,7 @@ The system’s action, on the same corner as the field beside it.
 
 - Group: Actions
 - Import: `import { Button } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/button/
 - Related: floating-icon-button, spinner
 

package/dist/agent/Calendar.md

@@ -4,7 +4,7 @@ A month, as a grid of days.
 
 - Group: Surfaces
 - Import: `import { Calendar } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/calendar/
 - Related: date-picker
 

package/dist/agent/Card.md

@@ -4,7 +4,7 @@ A bounded surface, with no shadow under it.
 
 - Group: Surfaces
 - Import: `import { Card } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/card/
 - Related: table, figure-band
 

package/dist/agent/Checkbox.md

@@ -4,7 +4,7 @@ A choice that takes effect when the form is submitted.
 
 - Group: Forms
 - Import: `import { Checkbox } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/checkbox/
 - Related: switch, radio-group
 

package/dist/agent/Collapsible.md

@@ -4,7 +4,7 @@ One thing that opens, on its own.
 
 - Group: Navigation
 - Import: `import { Collapsible } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/collapsible/
 - Related: accordion
 

package/dist/agent/Combobox.md

@@ -4,7 +4,7 @@ A select you can type into.
 
 - Group: Forms
 - Import: `import { Combobox } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/combobox/
 - Related: select, command
 

package/dist/agent/Command.md

@@ -4,7 +4,7 @@ A filterable list of actions — the ⌘K surface.
 
 - Group: Overlays
 - Import: `import { Command } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/command/
 - Related: combobox, dialog
 

package/dist/agent/ComposedChart.md

@@ -4,7 +4,7 @@ Bars and lines over one axis — the volume, and the rate it moved at.
 
 - Group: Charts
 - Import: `import { ComposedChart } from '@misoto22/design/charts'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/composed-chart/
 - Related: bar-chart, line-chart
 

package/dist/agent/ContextMenu.md

@@ -4,7 +4,7 @@ The menu a right-click opens.
 
 - Group: Overlays
 - Import: `import { ContextMenu } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/context-menu/
 - Related: dropdown-menu
 

package/dist/agent/DataflowFigure.md

@@ -0,0 +1,27 @@
+# DataflowFigure
+
+A pipeline: where data comes from, what happens to it, and who ends up with it.
+
+- Group: Diagrams
+- Import: `import { DataflowFigure } from '@misoto22/design/diagrams'`
+- Version: 0.7.0
+- Docs: https://ui.misoto22.com/components/dataflow-figure/
+- Related: architecture-figure, lifecycle-figure
+
+## When to reach for it
+
+Structurally close to an architecture map, read for a different question. classification gets its own chip because a governance reviewer is looking for exactly that.
+
+## Accessibility
+
+- A flow’s classification is folded into its summary line, so "clickstream — PII touch" reaches a reader who cannot see the chip.
+
+## DataflowFigure
+
+A pipeline: where data comes from, what happens to it, and who ends up with it. Structurally close to an architecture map and read for a completely different question, which is why it is a separate renderer rather than a preset. An architecture diagram is read for "what talks to what". A data-flow diagram is read for "what is IN this arrow" — and that question is why `classification` gets its own mono chip under the label rather than being folded into the wording. `clickstream / PII touch` and `clickstream` are two different facts, and a governance reviewer is looking for the second one. Stages are printed as column headings on a rule across the top. They are the axis of the figure: a node's `stage` is its position along the pipeline, and a reader should be able to answer "how far has this got" by looking up rather than by tracing arrows.
+
+### Props
+
+- `spec` (required) — `DataflowSpec`.
+
+Also accepts: `FigureChrome`.

package/dist/agent/DatePicker.md

@@ -4,7 +4,7 @@ A date — or a span of them — chosen from a calendar.
 
 - Group: Forms
 - Import: `import { DatePicker } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/date-picker/
 - Related: calendar, field
 

package/dist/agent/Diagram.md

@@ -4,7 +4,7 @@ A flow or architecture figure, drawn out of the system’s own parts.
 
 - Group: Display
 - Import: `import { Diagram } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/diagram/
 - Related: card, figure-band
 

package/dist/agent/DiagramCanvas.md

@@ -0,0 +1,47 @@
+# DiagramCanvas
+
+A frame that a picture larger than it can be panned and zoomed inside.
+
+- Group: Diagrams
+- Import: `import { DiagramCanvas } from '@misoto22/design/diagrams'`
+- Version: 0.7.0
+- Docs: https://ui.misoto22.com/components/diagram-canvas/
+- Related: diagram-minimap, architecture-figure, scroll-area
+
+## When to reach for it
+
+Any oversized figure — an SVG, an image, a table that will not fold. It knows nothing about nodes, which is what makes it reusable.
+
+## Accessibility
+
+- The frame is a real tab stop, so the keyboard controls can be pressed at all.
+- A plain wheel scrolls the page. Zoom needs the platform modifier, so the canvas is never a scroll trap in the middle of an article.
+
+## Keyboard
+
+- + / = — Zooms in about the centre of the frame.
+- - — Zooms out.
+- 0 — Resets the scale and the offset together.
+- ← / → / ↑ / ↓ — Pans. Shift pans further per press.
+
+## DiagramCanvas
+
+A frame that a picture larger than it can be moved around inside. Pan with a drag, zoom with the controls or with ⌘/Ctrl and the wheel, and reset with a key. That is the whole of it — this is deliberately a VIEWPORT and not a diagram editor: nothing here knows what a node is, so it works for any oversized figure, an SVG, an image, a table that will not fold. Three decisions here are not obvious. **A plain wheel scrolls the page, not the diagram.** A canvas that swallows the wheel is a scroll trap: a reader flicking down an article hits the figure and the page stops moving for no reason they can see. Zooming needs the modifier — which is also the platform gesture for zoom everywhere else, and is what a trackpad pinch already sends. **The transform is on a wrapper, not on the content.** The child keeps its own coordinate space, so a figure inside can still be measured, exported and read by anything that walks it. Scaling the child directly would make every `getBoundingClientRect` inside it a lie. **Keyboard first, and the frame is a real tab stop.** `+` / `-` / `0` and the arrow keys move the view; the frame takes focus so they can be pressed at all. A canvas that only answers a drag is a canvas half the readers cannot operate.
+
+### Props
+
+- `children` (required) — `ReactNode`.
+- `className` — `string`.
+- `height` — `string` default `'24rem'`. How tall the frame is. Anything CSS accepts.
+- `onViewChange` — `(view: CanvasView) => void`. Told about every view change, for a minimap or a percentage readout.
+- `controls` — `boolean` default `true`. Hides the built-in zoom controls, for a caller supplying its own.
+- `label` — `string` default `'Diagram canvas'`. Names the region for assistive tech.
+- `ref` — `Ref<DiagramCanvasHandle>`.
+
+## Examples
+
+```tsx
+<DiagramCanvas height="26rem" label="Request path">
+  <ArchitectureFigure spec={spec} heading={false} legend="hidden" cards={false} />
+</DiagramCanvas>
+```

package/dist/agent/DiagramExportMenu.md

@@ -0,0 +1,38 @@
+# DiagramExportMenu
+
+Taking the figure off the page: PNG, JPEG, WebP, SVG and a 1200×630 share card.
+
+- Group: Diagrams
+- Import: `import { DiagramExportMenu } from '@misoto22/design/diagrams'`
+- Version: 0.7.0
+- Docs: https://ui.misoto22.com/components/diagram-export-menu/
+- Related: dropdown-menu, diagram-toolbar
+
+## When to reach for it
+
+It does the export rather than emitting a format name, because the interesting half — baking custom properties into real colours before serialising — is the half a caller would not know to write.
+
+## Accessibility
+
+- A failed export is reported through onResult rather than swallowed: a click that quietly does nothing is indistinguishable from a broken button.
+
+## DiagramExportMenu
+
+Taking the figure off the page: five files, one menu. WHY THE MENU DOES THE WORK rather than handing back a format: every one of these exports is the same six steps — find the `<svg>`, walk it with `getComputedStyle` to bake the custom properties into real colours, serialise, rasterise, name the file, hand it to the browser — and only the last two differ between them. A menu that emitted `'png'` and left the caller to do the rest would be a menu that every consumer reimplements, badly, and the interesting half (a serialised SVG resolves `var(--ink)` to nothing and comes out invisible) is exactly the half a caller would not know to write. `onExport` is still there for a page with its own pipeline — a server-side renderer, a different frame size — and taking it turns everything below into a no-op. What each format actually is, stated rather than implied. **SVG** is the artwork with resolved colours. It is editable and it is the only lossless one, but it carries no web fonts: a machine without the family renders it in a fallback, so type metrics will differ. **PNG, JPEG and WebP** are the browser's own rasteriser re-drawing that SVG at 2×. Not a screenshot — antialiasing and any effect a page stylesheet applied from OUTSIDE the `<svg>` are not in it. **JPEG has no alpha**, so it is flattened onto the resolved paper colour rather than onto black, which is what a transparent PNG becomes when a format with no transparency is asked to hold it. **The share card** is a 1200 × 630 frame with the title on it and the whole diagram letterboxed inside — never cropped. A card that cropped to fill the frame would be a picture of a different diagram.
+
+### Props
+
+- `targetRef` (required) — `RefObject<HTMLElement | SVGSVGElement | null>`. The `<svg>` to export, or an element containing exactly one. A ref rather than a selector, because a page can hold several figures and a selector would export whichever the document happened to reach first.
+- `title` (required) — `string`. Names the file, and is printed on the share card.
+- `trigger` — `ReactNode`. Replaces the trigger.
+- `className` — `string`.
+- `onExport` — `(format: ExportFormat) => void | Promise<void>`. Runs instead of the built-in export — for a caller with its own pipeline.
+- `onResult` — `(result: ExportResult) => void`. Told what happened, so a page can raise a toast.
+
+## exportFigure
+
+One figure, one format, one file. Exported so a page can wire a keyboard shortcut or its own button to exactly what the menu does, without reimplementing the six steps.
+
+## Types
+
+- `ExportFormat` = `'png' | 'jpeg' | 'webp' | 'svg' | 'share-card'`

package/dist/agent/DiagramInspector.md

@@ -0,0 +1,50 @@
+# DiagramInspector
+
+What the reader just picked, written out beside the picture.
+
+- Group: Diagrams
+- Import: `import { DiagramInspector } from '@misoto22/design/diagrams'`
+- Version: 0.7.0
+- Docs: https://ui.misoto22.com/components/diagram-inspector/
+- Related: card, diagram-canvas
+
+## When to reach for it
+
+A node holds about eight words before it stops being a node. Everything past those — the port, the owner, the six relationships — belongs here.
+
+## Accessibility
+
+- A labelled region with aria-live="polite", not a dialog: the reader clicked a node, they did not open anything, so focus is never trapped or demanded.
+- Relationships are real buttons when they carry onSelect, which is how the graph becomes walkable peer by peer from the keyboard.
+
+## DiagramInspector
+
+What the reader just picked, written out. A diagram can hold about eight words per node before it stops being a diagram and starts being a document with lines drawn on it. Everything past those eight — the port, the owning team, the file it was read out of, the six relationships it takes part in — belongs beside the picture rather than inside it, and this is that place. NOT A DIALOG, and that is deliberate. An inspector is a REGION that changes with the selection, not a modal. Giving it `role="dialog"` would trap focus and demand dismissal for something the reader never opened — they clicked a node, and the panel followed. So it is a labelled region with `aria-live="polite"`, which is what makes a screen reader announce the new selection without stealing the cursor from whatever the reader was doing. The relationships are real buttons when they carry `onSelect`, which is how the diagram becomes navigable from the keyboard: a reader can walk the graph peer by peer without ever touching the picture.
+
+### Props
+
+- `eyebrow` — `string`. The kicker over the title — what KIND of thing this panel is showing.
+- `title` (required) — `string`.
+- `description` — `ReactNode`.
+- `facts` — `InspectorFact[]` default `[]`.
+- `links` — `InspectorLink[]` default `[]`.
+- `actions` — `ReactNode`. Buttons under the facts — copy a link, open the source.
+- `onClose` — `() => void`.
+- `className` — `string`.
+- `floating` — `boolean`. Renders as a floating panel over the surface rather than in the flow.
+
+## Examples
+
+```tsx
+<DiagramInspector
+  eyebrow="Service"
+  title="API Server"
+  description="FastAPI, behind the load balancer."
+  facts={[
+    { label: 'Port', value: '8000', mono: true },
+    { label: 'Id', value: 'api', mono: true },
+  ]}
+  links={[{ direction: 'out', label: 'SQL', peer: 'PostgreSQL' }]}
+  onClose={() => setSelected(null)}
+/>
+```

package/dist/agent/DiagramLegend.md

@@ -0,0 +1,34 @@
+# DiagramLegend
+
+The key: which drawn form means which kind of thing.
+
+- Group: Diagrams
+- Import: `import { DiagramLegend } from '@misoto22/design/diagrams'`
+- Version: 0.7.0
+- Docs: https://ui.misoto22.com/components/diagram-legend/
+- Related: architecture-figure, lifecycle-figure
+
+## When to reach for it
+
+Not optional furniture in a monochrome system. When a queue and a cache differ by a sigil rather than a colour, this is the only place a reader is told what the sigil means.
+
+## Accessibility
+
+- A list of pairs rather than a row of spans, so the count is part of what a screen reader says about it.
+- kindLegend, variantLegend and stateLegend build the standard sets out of the renderers’ own drawing code, so the key can never drift from the figure.
+
+## DiagramLegend
+
+The key: which drawn form means which kind of thing. Not optional furniture in a monochrome system, and this is the one place that has to be said plainly. When the difference between a queue and a cache is a sigil rather than a colour, the key is the only place a reader is told what the sigil means — a figure whose forms are undocumented is a figure whose forms might as well not have been drawn. A `<ul>` rather than a row of `<span>`s: it is a list of pairs, and the count is part of what a screen reader should say about it.
+
+### Props
+
+- `entries` (required) — `DiagramLegendEntry[]`.
+- `title` — `string | null` default `'Key'`. The kicker before the row. Pass null for a bare row.
+- `className` — `string`.
+
+## Examples
+
+```tsx
+<DiagramLegend entries={kindLegend(['backend', 'database'])} />
+```

package/dist/agent/DiagramMinimap.md

@@ -0,0 +1,48 @@
+# DiagramMinimap
+
+Where you are in something bigger than the window.
+
+- Group: Diagrams
+- Import: `import { DiagramMinimap } from '@misoto22/design/diagrams'`
+- Version: 0.7.0
+- Docs: https://ui.misoto22.com/components/diagram-minimap/
+- Related: diagram-canvas
+
+## When to reach for it
+
+Pairs with DiagramCanvas. The viewport rectangle is derived from the canvas’s own view, never stored — a map that disagrees with its territory is worse than none.
+
+## Accessibility
+
+- The miniature is aria-hidden. The figure it mirrors already publishes its own summary, and a second copy would read the whole diagram out twice.
+
+## DiagramMinimap
+
+Where you are in something bigger than the window. Two things at once, and both are needed: a miniature of the whole artwork, and a rectangle showing which part of it the frame is currently over. The miniature alone answers "what is there"; the rectangle answers "and where am I", which is the question a reader who has just panned twice actually has. THE RECTANGLE IS DERIVED, never stored. Its position comes out of the canvas's own view — the same three numbers the canvas is already transforming by — divided by the map's scale. Keeping a second copy of "where the viewport is" is how a minimap comes to disagree with the thing it is a map of, and a map that disagrees is worse than none. CLICKING RECENTRES rather than jumping. `onSeek` reports a point in CONTENT coordinates, which is what a canvas's `centerOn` takes. The minimap does not move anything itself: it has no authority over the view, it only says where the reader pointed.
+
+### Props
+
+- `content` (required) — `{ width: number; height: number }`. The whole artwork, at its natural size in CSS pixels.
+- `frame` (required) — `{ width: number; height: number }`. The frame the artwork is being looked at through, in CSS pixels.
+- `view` (required) — `CanvasView`. Where that frame currently sits — a `DiagramCanvas`'s `onViewChange`.
+- `children` — `ReactNode`. A miniature of the artwork. Usually the same figure, rendered again.
+- `onSeek` — `(x: number, y: number) => void`. Called with a point in CONTENT coordinates when the reader picks one.
+- `width` — `number` default `200`. How wide the map is, in CSS pixels. Height follows the aspect ratio.
+- `className` — `string`.
+- `label` — `string` default `'Diagram overview'`.
+
+## Examples
+
+```tsx
+const canvas = useRef<DiagramCanvasHandle>(null)
+const [view, setView] = useState({ scale: 1, x: 0, y: 0 })
+// …
+<DiagramMinimap
+  content={{ width: 1400, height: 620 }}
+  frame={{ width: 720, height: 400 }}
+  view={view}
+  onSeek={(x, y) => canvas.current?.centerOn(x, y)}
+>
+  <ArchitectureFigure spec={spec} heading={false} legend="hidden" cards={false} />
+</DiagramMinimap>
+```

package/dist/agent/DiagramToolbar.md

@@ -0,0 +1,47 @@
+# DiagramToolbar
+
+A bar of actions belonging to the surface underneath them.
+
+- Group: Diagrams
+- Import: `import { DiagramToolbar } from '@misoto22/design/diagrams'`
+- Version: 0.7.0
+- Docs: https://ui.misoto22.com/components/diagram-toolbar/
+- Related: floating-icon-button, diagram-export-menu
+
+## When to reach for it
+
+FloatingIconButton is one pinned action. This is the container for several, so they read as one object rather than as a scatter.
+
+## Accessibility
+
+- role="toolbar" announces a toolbar rather than six unrelated buttons. It does not implement roving focus — Tab visits every control, which is honest for a bar of three.
+
+## DiagramToolbar
+
+A bar of actions that belong to the surface underneath them. The package already has `FloatingIconButton` for ONE pinned action. This is the container for several — which is a different problem, because several pinned buttons need to read as one object rather than as a scatter: one plate, one border, hairlines between the groups, and a single `role="toolbar"` so a screen reader announces a toolbar instead of six unrelated buttons. `role="toolbar"` also changes the keyboard contract, and callers should know what they are opting into: arrow keys are expected to move between the controls and Tab is expected to leave the bar. This component does not implement roving focus for you — a bar of three buttons where Tab visits all three is honest and fine — so pass `placement="inline"` and skip the role by using a plain `<div>` if that is not what you want.
+
+### Props
+
+- `children` (required) — `ReactNode`.
+- `placement` — `'inline' | 'floating'` default `'inline'`. Where it sits. `floating` pins it over the surface it acts on.
+- `align` — `'start' | 'end'` default `'end'`. Which corner a floating bar pins to.
+- `label` (required) — `string`.
+
+Also accepts: `Omit<ComponentProps<'div'>, 'children'>`.
+
+## DiagramToolbarGroup
+
+One run of related controls inside the bar. Separated by a hairline rather than by space, because a gap large enough to read as a group boundary is also large enough to stop the bar reading as one object — which is the whole reason the controls were collected into a bar.
+
+## Examples
+
+```tsx
+<DiagramToolbar label="Diagram actions" placement="floating">
+  <DiagramToolbarGroup>
+    <Button size="sm" variant="ghost">Theme</Button>
+  </DiagramToolbarGroup>
+  <DiagramToolbarGroup>
+    <DiagramExportMenu targetRef={svg} title="Request path" />
+  </DiagramToolbarGroup>
+</DiagramToolbar>
+```

package/dist/agent/Dialog.md

@@ -4,7 +4,7 @@ A modal surface: portal, scrim, centred panel.
 
 - Group: Overlays
 - Import: `import { Dialog } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/dialog/
 - Related: dropdown-menu, tooltip
 

package/dist/agent/DropdownMenu.md

@@ -4,7 +4,7 @@ A menu of actions.
 
 - Group: Overlays
 - Import: `import { DropdownMenu } from '@misoto22/design'`
-- Version: 0.6.1
+- Version: 0.7.0
 - Docs: https://ui.misoto22.com/components/dropdown-menu/
 - Related: dialog, select