@ponchia/ui 0.6.9 → 0.6.10

package/CHANGELOG.md

@@ -5,6 +5,26 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 0.6.10 — 2026-06-23
+
+### Added
+
+- **Workbench toolstrip primitives.** `workbench.css`, the generated class
+  registry, and the workbench docs now cover floating toolstrips, compact
+  grouped actions, segmented button groups, contextual labels, and search/action
+  slots for dense canvas or editor-style tools.
+- **Annotation composition guidance.** The annotation docs now show how the
+  dependency-free `@ponchia/ui` annotation surface composes with richer
+  annotation engines in a workbench-style consumer, while keeping runtime
+  package boundaries explicit.
+
+### Verified
+
+- **Release evidence.** PR CI passed for the workbench expansion, including the
+  aggregate `check` gate, Chromium e2e, CodeQL, and the packed examples matrix.
+  This release adds opt-in workbench CSS and generated class/docs artifacts; it
+  does not move the default bundle contract.
+
 ## 0.6.9 — 2026-06-20
 
 ### Changed

package/README.md

@@ -67,7 +67,7 @@ npm i @ponchia/ui
 Or drop it in with no build step, straight from a CDN:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/bronto.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/dist/bronto.css">
 ```
 
 ## Quick start

package/classes/classes.json

@@ -1,8 +1,8 @@
 {
   "$comment": "@ponchia/ui class vocabulary as language-neutral data — validate emitted markup without executing the ESM cls map or parsing the .d.ts. Generated from classes/index.js — do not edit by hand; run `npm run classes:json:build`. Drift-checked in CI. `groups[].base` is null for a parts-only namespace (no standalone base class — do NOT emit it). A modifier whose name contains `__` (e.g. `ui-spark__bar--pos`) attaches to THAT part, not the base host. `states` is the author-applied `is-*` hooks (runtime/behavior-managed hooks are excluded); `behaviorAttributes` are the `data-bronto-*` wiring hooks the optional behaviors delegate on; `requiredAria` is the role/aria a generator must emit per component. `states` + `customProperties` are documented in docs/reference.md and ship outside `cls` by design.",
   "counts": {
-    "classes": 634,
-    "groups": 177
+    "classes": 644,
+    "groups": 179
   },
   "groups": {
     "ui-accordion": {
@@ -1081,6 +1081,13 @@
         "ui-segmented__option"
       ]
     },
+    "ui-segmented-buttons": {
+      "base": "ui-segmented-buttons",
+      "modifiers": [],
+      "parts": [
+        "ui-segmented-buttons__button"
+      ]
+    },
     "ui-sel": {
       "base": "ui-sel",
       "modifiers": [
@@ -1437,6 +1444,20 @@
       "modifiers": [],
       "parts": []
     },
+    "ui-toolstrip": {
+      "base": "ui-toolstrip",
+      "modifiers": [
+        "ui-toolstrip--compact",
+        "ui-toolstrip--floating"
+      ],
+      "parts": [
+        "ui-toolstrip__actions",
+        "ui-toolstrip__brand",
+        "ui-toolstrip__context",
+        "ui-toolstrip__group",
+        "ui-toolstrip__search"
+      ]
+    },
     "ui-tooltip": {
       "base": "ui-tooltip",
       "modifiers": [],
@@ -1964,6 +1985,8 @@
     "ui-scroll-reveal",
     "ui-search",
     "ui-segmented",
+    "ui-segmented-buttons",
+    "ui-segmented-buttons__button",
     "ui-segmented__option",
     "ui-sel",
     "ui-sel--maybe",
@@ -2100,6 +2123,14 @@
     "ui-tool-call__name",
     "ui-tool-call__status",
     "ui-tool-log",
+    "ui-toolstrip",
+    "ui-toolstrip--compact",
+    "ui-toolstrip--floating",
+    "ui-toolstrip__actions",
+    "ui-toolstrip__brand",
+    "ui-toolstrip__context",
+    "ui-toolstrip__group",
+    "ui-toolstrip__search",
     "ui-tooltip",
     "ui-tooltip__bubble",
     "ui-tour-note",

package/classes/index.d.ts

@@ -574,6 +574,16 @@ export declare const cls: {
   readonly inspector: 'ui-inspector';
   readonly inspectorHead: 'ui-inspector__head';
   readonly inspectorBody: 'ui-inspector__body';
+  readonly toolstrip: 'ui-toolstrip';
+  readonly toolstripFloating: 'ui-toolstrip--floating';
+  readonly toolstripCompact: 'ui-toolstrip--compact';
+  readonly toolstripBrand: 'ui-toolstrip__brand';
+  readonly toolstripContext: 'ui-toolstrip__context';
+  readonly toolstripGroup: 'ui-toolstrip__group';
+  readonly toolstripActions: 'ui-toolstrip__actions';
+  readonly toolstripSearch: 'ui-toolstrip__search';
+  readonly segmentedButtons: 'ui-segmented-buttons';
+  readonly segmentedButtonsButton: 'ui-segmented-buttons__button';
   readonly property: 'ui-property';
   readonly propertyLabel: 'ui-property__label';
   readonly propertyValue: 'ui-property__value';

package/classes/index.js

@@ -609,10 +609,20 @@ export const cls = Object.freeze({
   toolCallName: 'ui-tool-call__name',
   toolCallStatus: 'ui-tool-call__status',
   toolCallBody: 'ui-tool-call__body',
-  // workbench — inspector / property / selection bar / splitter (css/workbench.css)
+  // workbench — inspector / property / toolstrip / selection bar / splitter (css/workbench.css)
   inspector: 'ui-inspector',
   inspectorHead: 'ui-inspector__head',
   inspectorBody: 'ui-inspector__body',
+  toolstrip: 'ui-toolstrip',
+  toolstripFloating: 'ui-toolstrip--floating',
+  toolstripCompact: 'ui-toolstrip--compact',
+  toolstripBrand: 'ui-toolstrip__brand',
+  toolstripContext: 'ui-toolstrip__context',
+  toolstripGroup: 'ui-toolstrip__group',
+  toolstripActions: 'ui-toolstrip__actions',
+  toolstripSearch: 'ui-toolstrip__search',
+  segmentedButtons: 'ui-segmented-buttons',
+  segmentedButtonsButton: 'ui-segmented-buttons__button',
   property: 'ui-property',
   propertyLabel: 'ui-property__label',
   propertyValue: 'ui-property__value',

package/css/workbench.css

@@ -32,6 +32,119 @@
   gap: var(--space-2xs);
 }
 
+/* --- Toolstrip — compact workbench controls, optionally floating over a
+   viewport. The host owns commands, search behavior, active mode, and
+   responsive hiding policy. --- */
+.ui-toolstrip {
+  align-items: center;
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  min-inline-size: 0;
+  padding: 0.35rem;
+}
+
+.ui-toolstrip--floating {
+  box-shadow: var(--shadow-raised);
+}
+
+.ui-toolstrip--compact {
+  gap: var(--space-2xs);
+  padding: 0.25rem;
+}
+
+.ui-toolstrip__brand {
+  align-items: baseline;
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--space-xs);
+  min-inline-size: 0;
+  padding-inline: var(--space-xs);
+}
+
+.ui-toolstrip__brand strong {
+  color: var(--text);
+  font-size: var(--text-sm);
+}
+
+.ui-toolstrip__context {
+  color: var(--text-dim);
+  font-size: var(--text-xs);
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-toolstrip__group,
+.ui-toolstrip__actions {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-2xs);
+}
+
+.ui-toolstrip__group {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  padding: 0.16rem;
+}
+
+.ui-toolstrip__search {
+  flex: 1 1 14rem;
+  min-inline-size: min(100%, 11rem);
+}
+
+.ui-toolstrip__actions {
+  margin-inline-start: auto;
+}
+
+/* --- Button segmented control — command buttons that expose one active
+   mode. For actual form values, keep using `.ui-segmented` with radio inputs. --- */
+.ui-segmented-buttons {
+  align-items: center;
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.16rem;
+  padding: 0.16rem;
+}
+
+.ui-segmented-buttons__button {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  line-height: 1;
+  min-block-size: 1.9rem;
+  padding: 0.48rem 0.7rem;
+  text-transform: uppercase;
+}
+
+.ui-segmented-buttons__button[aria-pressed='true'],
+.ui-segmented-buttons__button.is-active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--button-text);
+}
+
+.ui-segmented-buttons__button:disabled,
+.ui-segmented-buttons__button[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
 /* --- Property row — a label/value pair, denser than ui-key-value and tuned
    for an inspector (the value can hold an input or a static read-out). --- */
 .ui-property {
@@ -81,6 +194,14 @@
   gap: var(--space-xs);
 }
 
+@media (hover: hover) {
+  .ui-segmented-buttons__button:hover:not(:disabled, [aria-disabled='true'], [aria-pressed='true'], .is-active) {
+    background: var(--panel);
+    border-color: var(--line-strong);
+    color: var(--text);
+  }
+}
+
 /* --- Splitter — two panes separated by a focusable ARIA separator handle. --- */
 .ui-splitter {
   --splitter-pos: 50%;
@@ -166,6 +287,13 @@
 }
 
 @media (forced-colors: active) {
+  .ui-segmented-buttons__button[aria-pressed='true'],
+  .ui-segmented-buttons__button.is-active {
+    background: Highlight;
+    border-color: Highlight;
+    color: HighlightText;
+  }
+
   .ui-splitter__handle {
     border-color: CanvasText;
   }

package/dist/css/workbench.css

@@ -1 +1 @@
-@layer bronto{.ui-inspector{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-inspector__head{align-items: baseline;border-block-end: 1px solid var(--line);display: flex;gap: var(--space-sm);justify-content: space-between;padding-block-end: var(--space-xs)}.ui-inspector__body{display: grid;gap: var(--space-2xs)}.ui-property{align-items: baseline;display: grid;gap: var(--space-sm);grid-template-columns: minmax(6rem,38%) 1fr}.ui-property__label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-property__value{color: var(--text);font-size: var(--text-sm);min-inline-size: 0}.ui-selectionbar{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: flex;flex-wrap: wrap;gap: var(--space-sm) var(--space-md);justify-content: space-between;padding: 0.5rem 0.85rem}.ui-selectionbar__count{color: var(--text);font-family: var(--mono);font-size: var(--text-sm)}.ui-selectionbar__actions{display: flex;flex-wrap: wrap;gap: var(--space-xs)}.ui-splitter{--splitter-pos: 50%;--splitter-handle: 0.75rem;--splitter-pane-min: 0px;background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr);min-block-size: 18rem;overflow: hidden}.ui-splitter--vertical{grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter--horizontal{grid-template-columns: 1fr;grid-template-rows: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter__pane{min-block-size: 0;min-inline-size: 0;overflow: auto;padding: var(--space-md)}.ui-splitter__handle{align-self: stretch;background: var(--panel-strong);border-block: 0;border-inline: 1px solid var(--line);cursor: col-resize;display: grid;min-inline-size: var(--splitter-handle);place-items: center;touch-action: none}.ui-splitter__handle::before{background: var(--line-strong);border-radius: var(--radius-pill);block-size: 2.5rem;content: "";inline-size: 2px}.ui-splitter__handle:hover::before,.ui-splitter__handle.is-active::before,.ui-splitter__handle[aria-valuenow]:focus-visible::before{background: var(--accent)}.ui-splitter__handle:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: -2px}.ui-splitter--horizontal .ui-splitter__handle{border-block: 1px solid var(--line);border-inline: 0;cursor: row-resize;min-block-size: var(--splitter-handle);min-inline-size: 0}.ui-splitter--horizontal .ui-splitter__handle::before{block-size: 2px;inline-size: 2.5rem}@media (forced-colors: active){.ui-splitter__handle{border-color: CanvasText}.ui-splitter__handle::before{background: CanvasText}}}
+@layer bronto{.ui-inspector{background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;gap: var(--space-sm);padding: var(--space-md)}.ui-inspector__head{align-items: baseline;border-block-end: 1px solid var(--line);display: flex;gap: var(--space-sm);justify-content: space-between;padding-block-end: var(--space-xs)}.ui-inspector__body{display: grid;gap: var(--space-2xs)}.ui-toolstrip{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);display: flex;flex-wrap: wrap;gap: var(--space-xs);min-inline-size: 0;padding: 0.35rem}.ui-toolstrip--floating{box-shadow: var(--shadow-raised)}.ui-toolstrip--compact{gap: var(--space-2xs);padding: 0.25rem}.ui-toolstrip__brand{align-items: baseline;display: inline-flex;flex: 0 1 auto;gap: var(--space-xs);min-inline-size: 0;padding-inline: var(--space-xs)}.ui-toolstrip__brand strong{color: var(--text);font-size: var(--text-sm)}.ui-toolstrip__context{color: var(--text-dim);font-size: var(--text-xs);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.ui-toolstrip__group,.ui-toolstrip__actions{align-items: center;display: inline-flex;flex-wrap: wrap;gap: var(--space-2xs)}.ui-toolstrip__group{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);padding: 0.16rem}.ui-toolstrip__search{flex: 1 1 14rem;min-inline-size: min(100%,11rem)}.ui-toolstrip__actions{margin-inline-start: auto}.ui-segmented-buttons{align-items: center;background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);display: inline-flex;flex-wrap: wrap;gap: 0.16rem;padding: 0.16rem}.ui-segmented-buttons__button{background: transparent;border: 1px solid transparent;border-radius: var(--radius-sm);color: var(--text-soft);cursor: pointer;font-family: var(--mono);font-size: var(--text-xs);font-weight: 700;letter-spacing: var(--tracking-wide);line-height: 1;min-block-size: 1.9rem;padding: 0.48rem 0.7rem;text-transform: uppercase}.ui-segmented-buttons__button[aria-pressed='true'],.ui-segmented-buttons__button.is-active{background: var(--accent);border-color: var(--accent);color: var(--button-text)}.ui-segmented-buttons__button:disabled,.ui-segmented-buttons__button[aria-disabled='true']{cursor: not-allowed;opacity: 0.45}.ui-property{align-items: baseline;display: grid;gap: var(--space-sm);grid-template-columns: minmax(6rem,38%) 1fr}.ui-property__label{color: var(--text-dim);font-family: var(--mono);font-size: var(--text-2xs);letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-property__value{color: var(--text);font-size: var(--text-sm);min-inline-size: 0}.ui-selectionbar{align-items: center;background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: flex;flex-wrap: wrap;gap: var(--space-sm) var(--space-md);justify-content: space-between;padding: 0.5rem 0.85rem}.ui-selectionbar__count{color: var(--text);font-family: var(--mono);font-size: var(--text-sm)}.ui-selectionbar__actions{display: flex;flex-wrap: wrap;gap: var(--space-xs)}@media (hover: hover){.ui-segmented-buttons__button:hover:not(:disabled,[aria-disabled='true'],[aria-pressed='true'],.is-active){background: var(--panel);border-color: var(--line-strong);color: var(--text)}}.ui-splitter{--splitter-pos: 50%;--splitter-handle: 0.75rem;--splitter-pane-min: 0px;background: var(--panel);border: 1px solid var(--line);border-radius: var(--radius-md);display: grid;grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr);min-block-size: 18rem;overflow: hidden}.ui-splitter--vertical{grid-template-columns: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter--horizontal{grid-template-columns: 1fr;grid-template-rows: minmax(var(--splitter-pane-min),var(--splitter-pos)) var(--splitter-handle) minmax(0,1fr)}.ui-splitter__pane{min-block-size: 0;min-inline-size: 0;overflow: auto;padding: var(--space-md)}.ui-splitter__handle{align-self: stretch;background: var(--panel-strong);border-block: 0;border-inline: 1px solid var(--line);cursor: col-resize;display: grid;min-inline-size: var(--splitter-handle);place-items: center;touch-action: none}.ui-splitter__handle::before{background: var(--line-strong);border-radius: var(--radius-pill);block-size: 2.5rem;content: "";inline-size: 2px}.ui-splitter__handle:hover::before,.ui-splitter__handle.is-active::before,.ui-splitter__handle[aria-valuenow]:focus-visible::before{background: var(--accent)}.ui-splitter__handle:focus-visible{outline: 2px solid var(--focus-ring);outline-offset: -2px}.ui-splitter--horizontal .ui-splitter__handle{border-block: 1px solid var(--line);border-inline: 0;cursor: row-resize;min-block-size: var(--splitter-handle);min-inline-size: 0}.ui-splitter--horizontal .ui-splitter__handle::before{block-size: 2px;inline-size: 2.5rem}@media (forced-colors: active){.ui-segmented-buttons__button[aria-pressed='true'],.ui-segmented-buttons__button.is-active{background: Highlight;border-color: Highlight;color: HighlightText}.ui-splitter__handle{border-color: CanvasText}.ui-splitter__handle::before{background: CanvasText}}}

package/docs/annotations.md

@@ -22,6 +22,33 @@ declarations never type-reference it. Combine the two by using Bronto's
 `css/annotations.css` for the visual grammar, or the annotation package's Bronto
 CSS bridge when the engine emits its own layer.
 
+When an annotation engine overlays a rendered chart, screenshot, canvas, or
+diagram, put the rendered media in `.ui-figure__media` and the emitted annotation
+layer in `.ui-figure__overlay`. The figure stage supplies the stable positioning
+context; the annotation package owns anchors, placement, collision handling, and
+SVG/React rendering. Keep the same annotation text available through a caption,
+`<desc>`, fallback table, or surrounding prose when it carries data.
+
+For inspector-driven selection, keep selection state in the host application:
+the selected item can render details in `.ui-inspector`, while the annotation
+engine receives the focused anchor and emits the matching overlay. Bronto UI
+styles the inspector, figure stage, and annotation visual grammar; it does not
+own hit-testing, selected IDs, camera/chart state, or focus policy.
+
+```html
+<figure class="ui-figure" role="group" aria-labelledby="annotated-title">
+  <figcaption id="annotated-title" class="ui-figure__caption">
+    Annotated service latency
+  </figcaption>
+  <div class="ui-figure__stage">
+    <canvas class="ui-figure__media" aria-label="Latency chart"></canvas>
+    <svg class="ui-figure__overlay pa-annotation-layer" viewBox="0 0 640 360">
+      <!-- emitted by @ponchia/annotations -->
+    </svg>
+  </div>
+</figure>
+```
+
 ```js
 import {
   annotationParts,

package/docs/reference.md

@@ -9,7 +9,7 @@ rendering of every class is the kitchen-sink demo:
 **<https://ponchia.github.io/bronto-ui/>**. Theming knobs and the token
 contract: [docs/theming.md](theming.md).
 
-- 634 classes across 177 component groups
+- 644 classes across 179 component groups
 - Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
 - Validate markup as data (no JS/TS): `@ponchia/ui/classes.json` — the same
   vocabulary as language-neutral JSON (`groups`, `classes`, `states`,
@@ -1131,6 +1131,13 @@ each one matches a real selector in the stylesheet.
 | `cls.segmented` | `ui-segmented` | base |
 | `cls.segmentedOption` | `ui-segmented__option` | part |
 
+### `.ui-segmented-buttons`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.segmentedButtons` | `ui-segmented-buttons` | base |
+| `cls.segmentedButtonsButton` | `ui-segmented-buttons__button` | part |
+
 ### `.ui-sel`
 
 | Registry key | Class | Kind |
@@ -1496,6 +1503,19 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.toolLog` | `ui-tool-log` | base |
 
+### `.ui-toolstrip`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.toolstrip` | `ui-toolstrip` | base |
+| `cls.toolstripActions` | `ui-toolstrip__actions` | part |
+| `cls.toolstripBrand` | `ui-toolstrip__brand` | part |
+| `cls.toolstripContext` | `ui-toolstrip__context` | part |
+| `cls.toolstripGroup` | `ui-toolstrip__group` | part |
+| `cls.toolstripSearch` | `ui-toolstrip__search` | part |
+| `cls.toolstripCompact` | `ui-toolstrip--compact` | modifier |
+| `cls.toolstripFloating` | `ui-toolstrip--floating` | modifier |
+
 ### `.ui-tooltip`
 
 | Registry key | Class | Kind |

package/docs/reporting.md

@@ -54,18 +54,18 @@ No install? Link the same files from a CDN. Pin the version — pre-1.0, breakin
 changes ship in the minor (see [stability.md](./stability.md)):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/report-kit.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/dist/css/report-kit.css" />
 ```
 
 Leaf-by-leaf CDN imports use the same `dist/css/` paths:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/report.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/dataviz.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/annotations.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/legend.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/dist/bronto.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/dist/css/report.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/dist/css/dataviz.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/dist/css/annotations.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/dist/css/legend.css" />
 ```
 
 The CDN serves the package's own `fonts/` next to the CSS, so font URLs resolve
@@ -879,7 +879,7 @@ or validation runtime.
 
 ```json
 {
-  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/schemas/report-claims.v1.schema.json",
+  "$schema": "https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/schemas/report-claims.v1.schema.json",
   "schemaVersion": "bronto-report-claims.v1",
   "report": { "title": "Decision readiness", "type": "decision" },
   "claims": [

package/docs/workbench.md

@@ -1,10 +1,11 @@
-# Workbench — split panes, inspector, properties, selection bar
+# Workbench — split panes, toolstrips, inspector, properties, selection bar
 
 `@ponchia/ui/css/workbench.css` is an opt-in set of primitives for **real
-tools**: resizable split panes, an inspector panel, property rows for a selected
-object, and a bar of actions on the current selection. Generic kits stop at
-cards/tables/forms, so every app builds its own half-consistent workbench. This
-is the low-risk core — layout, resize affordance, and ARIA value sync.
+tools**: resizable split panes, compact toolstrips, button-mode segmented
+controls, an inspector panel, property rows for a selected object, and a bar of
+actions on the current selection. Generic kits stop at cards/tables/forms, so
+every app builds its own half-consistent workbench. This is the low-risk core —
+layout, dense controls, resize affordance, and ARIA value sync.
 
 ```css
 @import '@ponchia/ui';
@@ -20,6 +21,51 @@ initSplitter();
 Not in the core bundle. Import the CSS leaf where the workbench appears and run
 `initSplitter()` only if the page includes `[data-bronto-splitter]`.
 
+## Toolstrip — `.ui-toolstrip`
+
+A compact row of controls for a tool surface or viewport. Use
+`.ui-toolstrip--floating` when the strip sits over a canvas, chart, map, media
+stage, or preview. The CSS owns density, wrapping, grouping, and raised/floating
+treatment; the host owns commands, search behavior, active mode, responsive
+hiding, and placement.
+
+```html
+<header class="ui-toolstrip ui-toolstrip--floating" aria-label="View controls">
+  <div class="ui-toolstrip__brand">
+    <strong>Repository</strong>
+    <span class="ui-toolstrip__context">main branch</span>
+  </div>
+  <div class="ui-toolstrip__group" aria-label="Mode">
+    <button class="ui-segmented-buttons__button" type="button" aria-pressed="true">Map</button>
+    <button class="ui-segmented-buttons__button" type="button" aria-pressed="false">Flow</button>
+    <button class="ui-segmented-buttons__button" type="button" aria-pressed="false">Risk</button>
+  </div>
+  <label class="ui-toolstrip__search">
+    <span class="ui-visually-hidden">Filter items</span>
+    <input class="ui-input" type="search" placeholder="Filter by path, owner, or tag" />
+  </label>
+  <div class="ui-toolstrip__actions" aria-label="Viewport actions">
+    <button class="ui-button ui-button--ghost ui-button--icon ui-button--sm" type="button">
+      Fit
+    </button>
+  </div>
+</header>
+```
+
+## Button segmented control — `.ui-segmented-buttons`
+
+Use `.ui-segmented-buttons` when each option is a real command button and the
+current mode is exposed with `aria-pressed`. For form values submitted with the
+page, keep using the core `.ui-segmented` radio-input pattern.
+
+```html
+<div class="ui-segmented-buttons" aria-label="Density">
+  <button class="ui-segmented-buttons__button" type="button" aria-pressed="true">Dense</button>
+  <button class="ui-segmented-buttons__button" type="button" aria-pressed="false">Comfort</button>
+  <button class="ui-segmented-buttons__button" type="button" aria-pressed="false">Wide</button>
+</div>
+```
+
 ## Splitter — `.ui-splitter`
 
 Two panes separated by a focusable ARIA separator handle. The CSS owns the grid
@@ -113,7 +159,8 @@ A raised bar of actions on the current selection: a `__count` on one side,
 ## Scope
 
 No recipes — these are structural containers and rows; apply the classes
-directly (or read them from `cls.splitter`, `cls.inspector`, `cls.property`, …).
-Pair the selection bar with the cross-cutting [`ui-sel`](./selection.md) states
-on the selected items themselves. Bronto styles both and wires the splitter
-affordance; the host owns hit-testing, persistence, pane contents, and commands.
+directly (or read them from `cls.toolstrip`, `cls.splitter`, `cls.inspector`,
+`cls.property`, …). Pair the selection bar with the cross-cutting
+[`ui-sel`](./selection.md) states on the selected items themselves. Bronto styles
+the chrome and wires the splitter affordance; the host owns hit-testing,
+persistence, pane contents, viewport semantics, and commands.

package/llms.txt

@@ -44,7 +44,7 @@ the path changes from source `css/` to built `dist/css/`:
 <!-- installed locally -->
 <link rel="stylesheet" href="./node_modules/@ponchia/ui/dist/css/<leaf>.css" />
 <!-- or from a CDN; pin the version (pre-1.0, breaking changes ship in the minor) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.9/dist/css/<leaf>.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.10/dist/css/<leaf>.css" />
 ```
 
 The flattened default bundle is `dist/bronto.css` (bundler shorthand

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponchia/ui",
-  "version": "0.6.9",
+  "version": "0.6.10",
   "type": "module",
   "description": "CSS-first identity and UI layer for services, tools, sites, and reports — works in HTML, every framework, and PDF, no component runtime. Shared app shell, forms, tables, workflow chrome, plus opt-in analytical/report primitives. Monochrome with one rationed accent. Zero runtime dependencies.",
   "keywords": [