@ponchia/ui 0.6.8 → 0.6.10

package/css/primitives.css

@@ -74,7 +74,7 @@
 /* Intrinsic aspect-ratio box; the media child fills it. The contract is ONE
    child (a single <img>/<video>/<iframe>). Scope the fill to :first-child rather
    than every child: a second child would otherwise be forced to 100%/100% +
-   object-fit and stack on top, silently breaking the ratio. (audit C34.) */
+   object-fit and stack on top, silently breaking the ratio. */
 .ui-ratio {
   aspect-ratio: var(--ratio, 16 / 9);
 }
@@ -100,7 +100,7 @@
 /* Logical `max-inline-size`, not physical `max-width`: the container is typed
    `inline-size`, so the inline axis is the one actually tracked — the logical
    query matches it in any writing mode (a physical `width` query silently
-   misses in a vertical WM). (component audit C34.) */
+   misses in a vertical writing mode). */
 @container bronto (max-inline-size: 34rem) {
   .ui-grid {
     --grid-min: 100%;
@@ -193,7 +193,7 @@
   /* These tiles hold IDs / hashes / big numbers — the unbreakable-token case is
      the common one. A grid item defaults to min-inline-size:auto, so a long
      value pushes the whole statgrid track wider; allow the tile to shrink so the
-     value can wrap instead (paired with overflow-wrap on __value). (audit C5.) */
+     value can wrap instead (paired with overflow-wrap on __value). */
   min-inline-size: 0;
   padding: var(--space-md);
 }
@@ -216,7 +216,7 @@
   font-weight: var(--display-weight-strong);
   letter-spacing: 0.02em;
   line-height: 1.05;
-  overflow-wrap: anywhere; /* break an unspaced ID/hash rather than overflow (audit C5) */
+  overflow-wrap: anywhere; /* break an unspaced ID/hash rather than overflow */
 }
 
 .ui-stat__delta,
@@ -237,7 +237,7 @@
 
 /* A direction arrow is the non-colour channel — colour alone (success/danger)
    fails WCAG 1.4.1, so the tile carries the same ▲/▼ glyph as `.ui-delta`
-   (C13). Marked aria-hidden-equivalent by being generated content; the sign is
+   as a second signal. Marked aria-hidden-equivalent by being generated content; the sign is
    still in the author's text ("+12%"). */
 .ui-stat__delta.is-pos::before,
 .ui-app-metric__delta.is-pos::before {
@@ -259,7 +259,7 @@
 .ui-num {
   /* inline-block so `text-align: end` actually applies: on a bare inline element
      it computes but never paints (the box is shrink-wrapped), so an author who
-     followed the docs to right-align an inline figure saw no effect. (audit C17.) */
+     followed the docs to right-align an inline figure saw no effect. */
   display: inline-block;
   font-variant-numeric: tabular-nums;
   text-align: end;
@@ -436,8 +436,8 @@
    this looks-dead state is NOT keyboard-inert: for that, prefer native
    `<button disabled>`, run `initDisabledGuard()` (it intercepts Enter/Space on
    aria-disabled controls), or add `tabindex="-1"` (and drop `href` on a link).
-   See docs/usage.md "Disabled vs aria-disabled". (a11y review C3 / audit C4;
-   native :disabled already inert.) */
+   See docs/usage.md "Disabled vs aria-disabled"; native :disabled is already
+   inert. */
 .ui-button[aria-disabled='true'],
 .ui-link[aria-disabled='true'] {
   pointer-events: none;
@@ -445,7 +445,7 @@
 
 /* The button family dims + shows not-allowed via its `:disabled` rule above, but
    a disabled LINK got only pointer-events:none — it looked fully live. Give it
-   the same visual disabled cue. (component audit C30.) */
+   the same visual disabled cue. */
 .ui-link[aria-disabled='true'] {
   cursor: not-allowed;
   opacity: 0.45;
@@ -480,7 +480,7 @@
      !important `animation-duration`, so the old non-important `1.4s` slow-spin
      here was dead code AND left a broken, transparent-topped ring looking like a
      rendering bug. Drop the dead rule; show a STATIC complete ring instead — a
-     still busy cue with no implied motion. (component audit C15.) */
+     still busy cue with no implied motion. */
   .ui-button[aria-busy='true']::before {
     border-block-start-color: currentcolor;
   }
@@ -530,8 +530,7 @@
 
 /* RTL: the logical borders flip sides, but a fixed `rotate(45deg)` then points
    the chevron UP rather than toward the inline-end (the reading-forward way).
-   Mirror the rotation so the resting affordance points forward in RTL too.
-   (component audit C14.) */
+   Mirror the rotation so the resting affordance points forward in RTL too. */
 [dir='rtl'] .ui-link--arrow::after,
 [dir='rtl'] .ui-link--cta::after {
   transform: rotate(-45deg);
@@ -540,8 +539,7 @@
 /* Standalone CTA links are tap targets, not inline prose links: on a coarse
    pointer float them to the WCAG 2.5.8 AA 24px floor (the 2.5.8 inline-link
    exception doesn't cover a block-level call-to-action, which is what these
-   are). Buttons already auto-grow to ~44px on coarse pointers. (component
-   audit C14.) */
+   are). Buttons already auto-grow to ~44px on coarse pointers. */
 @media (pointer: coarse) {
   .ui-link--arrow,
   .ui-link--cta {
@@ -600,7 +598,7 @@
 
   /* Accent mixes 45% (vs 40% for the status tones below) on purpose: the brand
      hue is lower-chroma here than the status hues, so it needs a touch more to
-     read at the same border weight. Intentional, not a copy-paste slip. (Q15.) */
+     read at the same border weight. Intentional, not a copy-paste slip. */
   border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
 }
 
@@ -694,7 +692,7 @@
   font-family: var(--mono);
   margin: 0;
   min-inline-size: 0;
-  overflow-wrap: anywhere; /* IDs/hashes/paths are the common value — break, don't overflow (audit C5) */
+  overflow-wrap: anywhere; /* IDs/hashes/paths are the common value — break, don't overflow */
 }
 
 /* --- Hover (pointer only) --- */

package/css/sidenote.css

@@ -41,7 +41,7 @@
 /* The inline superscript that anchors a numbered sidenote. Use --accent-text,
    not raw --accent: this is readable text and must clear WCAG AA 4.5:1 even
    after a one-knob re-brand to a paler --accent (raw --accent drops to ~1.5:1).
-   Same accent-as-text contract as .ui-eyebrow / .ui-link--cta. (audit C6.) */
+   Same accent-as-text contract as .ui-eyebrow / .ui-link--cta. */
 .ui-sidenote__ref {
   color: var(--accent-text);
   counter-increment: ui-sidenote;
@@ -54,7 +54,7 @@
 }
 
 /* The note repeats its number (display only — the ref already incremented).
-   --accent-text for the same WCAG-AA reason as the ref above. (audit C6.) */
+   --accent-text for the same WCAG-AA reason as the ref above. */
 .ui-sidenote::before {
   color: var(--accent-text);
   content: counter(ui-sidenote) '. ';

package/css/table.css

@@ -39,7 +39,7 @@
 
   /* Keep the sticky header above body cells — cheap insurance for the
      sticky-header + pinned/positioned-column combo, where an un-z-indexed th
-     scrolls under a positioned cell. (audit C30.) */
+     scrolls under a positioned cell. */
   z-index: 1;
 }
 
@@ -171,7 +171,7 @@
 
 /* --- Loading state: set aria-busy + .ui-table-wrap--loading on the wrap. The
    modifier is named for the element it goes ON (the wrap), not `.ui-table`, so
-   the BEM host matches the documented placement. (component audit C19.) --- */
+   the BEM host matches the documented placement. --- */
 .ui-table-wrap--loading {
   opacity: 0.6;
   pointer-events: none;

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

@@ -13,6 +13,42 @@ points away from it, and a **note** carries the visible explanation.
 Use it with any SVG renderer. Bronto supplies classes and tiny geometry helpers;
 it does not own chart scales, mutate the DOM, or provide draggable edit mode.
 
+For new annotation-engine work, use the sibling `@ponchia/annotations` package:
+it owns placement, collision handling, SVG/React renderers, editable layers, and
+Mermaid/D2/Vega/React Flow adapters. This `@ponchia/ui/annotations` subpath
+stays a dependency-free compatibility surface for static Bronto SVG helpers, so
+installing the UI package never pulls in the annotation engine and public
+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/architecture.md

@@ -76,6 +76,13 @@ on top of the CSS, none of which require a framework commitment**:
   `index.js` is a barrel; each behavior lives in its own module
   (`dialog.js`, `combobox.js`, …) over a shared `internal.js` of DOM helpers,
   so the public import surface is unchanged.
+- **connectors/** and **annotations/** — dependency-free SVG geometry helpers
+  for report and analytical figures. `@ponchia/ui/annotations` intentionally
+  stays a small static-helper compatibility layer for the Bronto subject /
+  connector / note grammar. The richer annotation engine - placement,
+  collision handling, SVG/React renderers, editing, and diagram/chart adapters
+  - lives in the sibling `@ponchia/annotations` package and must not be pulled
+  in as a runtime or public type dependency of `@ponchia/ui`.
 - **glyphs/** — static bitmap data and SSR-safe render helpers. The
   256-cell DOM renderers are for display and solid inline icons; the `.ui-icon`
   mask renderer is for dense icon-at-scale use.
@@ -102,6 +109,26 @@ on top of the CSS, none of which require a framework commitment**:
   `/svelte`, `/vue`, `/skins`, `/charts`, `/mermaid`, `/d2`, `/vega`). This is
   a permanent, intentional contract.
 
+### Surface admission rule
+
+The default bundle is the shared app/service identity, not the complete Bronto
+catalog. A new public surface must choose one lane before it ships:
+
+- **core identity** — universal application chrome or accessibility/platform
+  glue that belongs in `dist/bronto.css`;
+- **opt-in toolbox** — report, analytical, provenance, generated-content,
+  renderer, workbench, or command vocabulary that ships as an explicit CSS/JS
+  subpath;
+- **recipe/docs only** — a pattern that can be taught without creating a new
+  class, token, behavior, export, or package path.
+
+When the answer is unclear, choose recipe/docs first. Promote to an opt-in leaf
+only after a real consumer repeats the pattern; promote to core only when it is
+clearly shared application identity. Bronto owns visual grammar, token handoff,
+pure geometry, and delegated accessibility behavior. It does not own chart
+scales, data fetching, persistence, routing, workflow execution, action
+registries, virtualized grids, or framework component APIs.
+
 ## Repository layout
 
 The repo root mixes five kinds of directory that look alike but follow very
@@ -162,6 +189,7 @@ are copied into consumer reports.
 | published tarball == intended `files` only      | `check-pack.mjs`    |
 | packed core JS/JSON public subpaths import without optional framework peers, packed JS named exports exactly match source modules, peer-backed adapters import after peers are linked, concrete CSS/doc/font subpaths resolve, and packed behavior initializers/toast no-op in a clean consumer with no DOM globals | `check-consumer-surface.mjs` |
 | packed typed public subpaths compile through package exports in a clean TypeScript consumer | `check-consumer-types.mjs` |
+| function-level cyclomatic complexity stays ≤12 and function NLOC stays within budget, with no per-function exception list | `check-complexity.mjs` |
 | GitHub Actions workflow syntax and embedded shell snippets lint | `check:workflows` (`github-actionlint`) |
 | every shipped CSS leaf is classified as foundation or has explicit docs/demo/e2e ownership | `check-component-matrix.mjs` |
 | every public behavior export has explicit docs, unit-test, and browser-test ownership | `check-behavior-matrix.mjs` |

package/docs/interop/react-flow.md

@@ -0,0 +1,89 @@
+# React Flow interop
+
+`@ponchia/ui` does not wrap or depend on React Flow / Xyflow. Use React Flow as
+the renderer and keep graph state, layout, hit-testing, and node components in
+the host application.
+
+The one Bronto-specific gotcha is the base media reset:
+
+```css
+img,
+svg {
+  display: block;
+  max-inline-size: 100%;
+}
+```
+
+That reset is correct for normal inline SVGs, report figures, icons, and rendered
+diagrams. React Flow edge SVGs are different: the edge layer uses absolutely
+positioned SVG wrappers that paint by overflow. If `max-inline-size: 100%` is
+allowed to constrain those wrappers, edges can disappear or clip.
+
+## Edge SVG escape hatch
+
+Scope the escape hatch to the React Flow surface in your app stylesheet. Keep it
+un-layered, or place it in an app layer declared after `bronto`.
+
+```css
+/* app.css */
+@import '@ponchia/ui';
+
+.flow-surface .react-flow__edges svg,
+.flow-surface .react-flow__edge svg {
+  display: initial;
+  max-inline-size: none;
+  overflow: visible;
+}
+```
+
+```tsx
+import { ReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+export function GraphView() {
+  return (
+    <div className="flow-surface">
+      <ReactFlow nodes={nodes} edges={edges} />
+    </div>
+  );
+}
+```
+
+Do not remove Bronto's global SVG reset to fix this. The incompatibility is
+specific to React Flow's edge-layer geometry, so the override should stay scoped
+to the canvas.
+
+## HTML edge labels
+
+If you use React Flow's `EdgeLabelRenderer`, remember that labels are HTML
+overlays, not SVG text. Container/group nodes can paint over them. Lift the label
+overlay only inside the graph surface, and keep labels pointer-transparent unless
+they are deliberately interactive:
+
+```css
+.flow-surface .react-flow__edgelabel-renderer {
+  z-index: var(--z-raised, 10);
+}
+
+.flow-surface .flow-edge-label {
+  pointer-events: none;
+}
+```
+
+For dense operational diagrams, prefer sparse edge labels plus a side inspector
+for detail. Use Bronto primitives inside nodes or inspectors (`ui-badge`,
+`ui-dot`, `ui-property`, `ui-legend`) rather than adding a Bronto graph-node
+component before a second consumer proves the pattern repeats.
+
+## What belongs in the app
+
+Keep these outside `@ponchia/ui`:
+
+- authored or automatic node placement;
+- graph data models and domain status names;
+- brand/product icons;
+- animation semantics, such as travelling reconciliation dots;
+- click/hover selection behavior.
+
+Bronto should provide the visual vocabulary and interop recipe. The graph
+renderer and product meaning remain the host application's job.

package/docs/package-contract.md

@@ -169,6 +169,7 @@ semantic versioning contract for the surfaces listed here.
 | `./docs/workbench.md` | `./docs/workbench.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
 | `./docs/command.md` | `./docs/command.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
 | `./docs/interop/tailwind.md` | `./docs/interop/tailwind.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
+| `./docs/interop/react-flow.md` | `./docs/interop/react-flow.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
 | `./docs/migrations/0.2-to-0.3.md` | `./docs/migrations/0.2-to-0.3.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
 | `./docs/migrations/0.3-to-0.4.md` | `./docs/migrations/0.3-to-0.4.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
 | `./docs/migrations/0.4-to-0.5.md` | `./docs/migrations/0.4-to-0.5.md` | Shipped documentation | Stable path | Markdown documentation shipped in the tarball. Paths are public reading assets within a compatible minor. |
@@ -266,6 +267,7 @@ always includes `package.json`, `README.md`, `LICENSE`, and
 | `docs/workbench.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/command.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/interop/tailwind.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
+| `docs/interop/react-flow.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/migrations/0.2-to-0.3.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/migrations/0.3-to-0.4.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |
 | `docs/migrations/0.4-to-0.5.md` | Shipped documentation | Curated Markdown reading asset shipped in the npm tarball. |

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.8/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/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.8/dist/bronto.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/css/report.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/css/dataviz.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/dist/css/annotations.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.6.8/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.8/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": [