@ponchia/ui 0.6.6 → 0.6.7

package/classes/index.js

@@ -346,6 +346,16 @@ export const cls = Object.freeze({
   compare2up: 'ui-compare--2up',
   compareCol: 'ui-compare__col',
   compareHead: 'ui-compare__head',
+  // figure — analytical/report figure stage (css/figure.css)
+  figure: 'ui-figure',
+  figureCaption: 'ui-figure__caption',
+  figureBody: 'ui-figure__body',
+  figureBodyKeyRight: 'ui-figure__body--key-right',
+  figureStage: 'ui-figure__stage',
+  figureMedia: 'ui-figure__media',
+  figureOverlay: 'ui-figure__overlay',
+  figureKey: 'ui-figure__key',
+  figureData: 'ui-figure__data',
   // legend (standalone data keys — css/legend.css)
   legend: 'ui-legend',
   legendVertical: 'ui-legend--vertical',
@@ -483,6 +493,22 @@ export const cls = Object.freeze({
   srcReviewed: 'ui-src--reviewed',
   srcStale: 'ui-src--stale',
   srcConflict: 'ui-src--conflict',
+  // interval — low/high uncertainty span (css/interval.css)
+  interval: 'ui-interval',
+  intervalTrack: 'ui-interval__track',
+  intervalRange: 'ui-interval__range',
+  intervalPoint: 'ui-interval__point',
+  intervalLabel: 'ui-interval__label',
+  intervalBounds: 'ui-interval__bounds',
+  // clamp — bounded excerpt + reveal (css/clamp.css)
+  clamp: 'ui-clamp',
+  clampBody: 'ui-clamp__body',
+  clampToggle: 'ui-clamp__toggle',
+  clampControl: 'ui-clamp__control',
+  clampMore: 'ui-clamp__more',
+  clampLess: 'ui-clamp__less',
+  // highlights — CSS Custom Highlight API paint host (css/highlights.css)
+  highlights: 'ui-highlights',
   // diff — line/row change-review grammar (css/diff.css)
   diff: 'ui-diff',
   diffSplit: 'ui-diff--split',
@@ -558,6 +584,20 @@ export const cls = Object.freeze({
   stateReviewed: 'ui-state--reviewed',
   stateNeedsReview: 'ui-state--needs-review',
   syncbar: 'ui-syncbar',
+  job: 'ui-job',
+  jobHead: 'ui-job__head',
+  jobTitle: 'ui-job__title',
+  jobMeta: 'ui-job__meta',
+  jobBody: 'ui-job__body',
+  jobProgress: 'ui-job__progress',
+  jobBar: 'ui-job__bar',
+  jobActions: 'ui-job__actions',
+  jobCompact: 'ui-job--compact',
+  jobQueued: 'ui-job--queued',
+  jobRunning: 'ui-job--running',
+  jobBlocked: 'ui-job--blocked',
+  jobFailed: 'ui-job--failed',
+  jobComplete: 'ui-job--complete',
   // generated content / AI-trust surfaces (css/generated.css)
   generated: 'ui-generated',
   generatedLabel: 'ui-generated__label',
@@ -570,7 +610,7 @@ 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 (css/workbench.css)
+  // workbench — inspector / property / selection bar / splitter (css/workbench.css)
   inspector: 'ui-inspector',
   inspectorHead: 'ui-inspector__head',
   inspectorBody: 'ui-inspector__body',
@@ -580,6 +620,11 @@ export const cls = Object.freeze({
   selectionbar: 'ui-selectionbar',
   selectionbarCount: 'ui-selectionbar__count',
   selectionbarActions: 'ui-selectionbar__actions',
+  splitter: 'ui-splitter',
+  splitterVertical: 'ui-splitter--vertical',
+  splitterHorizontal: 'ui-splitter--horizontal',
+  splitterPane: 'ui-splitter__pane',
+  splitterHandle: 'ui-splitter__handle',
   // command palette shell (css/command.css + initCommand)
   command: 'ui-command',
   commandInput: 'ui-command__input',
@@ -673,6 +718,15 @@ const stateTone = (state) =>
     'needs-review': cls.stateNeedsReview,
   })[state] || '';
 
+const jobTone = (state) =>
+  ({
+    queued: cls.jobQueued,
+    running: cls.jobRunning,
+    blocked: cls.jobBlocked,
+    failed: cls.jobFailed,
+    complete: cls.jobComplete,
+  })[state] || '';
+
 // Trust-state → tone class, shared by the source/citation/provenance recipes.
 // Object-literal lookup to match stateTone above (shorter, greppable, one idiom).
 const srcTone = (state) =>
@@ -987,6 +1041,7 @@ export const ui = {
       tone === 'neg' && cls.bulletMeasureNeg,
     ),
   state: ({ state, busy } = {}) => j(cls.state, stateTone(state), busy && cls.stateBusy),
+  job: ({ state, compact } = {}) => j(cls.job, jobTone(state), compact && cls.jobCompact),
   originLabel: ({ ai } = {}) => j(cls.originLabel, ai && cls.originLabelAi),
 };
 

package/classes/vscode.css-custom-data.json

@@ -39,7 +39,7 @@
     },
     {
       "name": "--accent-strong",
-      "description": "Theme token. Light: `color-mix(in srgb, var(--accent) 83%, #000)` · Dark: `color-mix(in srgb, var(--accent) 84%, #fff)`"
+      "description": "Theme token. Light: `color-mix(in srgb, var(--accent) 83%, #000)` · Dark: `color-mix(in srgb, var(--accent) 80%, #fff)`"
     },
     {
       "name": "--accent-text",

package/css/analytical.css

@@ -1,7 +1,7 @@
 /* ==========================================================================
    analytical — convenience roll-up of the opt-in analytical-primitive layers.
 
-   Import this one file instead of the seven leaves when you're building
+   Import this one file instead of the nine leaves when you're building
    analytical / generated-report UI:
 
      @import '@ponchia/ui';
@@ -13,9 +13,11 @@
    ========================================================================== */
 
 @import url('./annotations.css') layer(bronto);
+@import url('./figure.css') layer(bronto);
 @import url('./legend.css') layer(bronto);
 @import url('./marks.css') layer(bronto);
 @import url('./connectors.css') layer(bronto);
 @import url('./spotlight.css') layer(bronto);
 @import url('./crosshair.css') layer(bronto);
 @import url('./selection.css') layer(bronto);
+@import url('./highlights.css') layer(bronto);

package/css/app.css

@@ -1,6 +1,6 @@
 /* ==========================================================================
-   app — admin shell (sidebar + topbar + panels + metrics)
-   For admin / operator dashboards.
+   app — service shell (sidebar + topbar + panels + metrics)
+   For app, service, admin, and operator dashboards.
    ========================================================================== */
 
 .ui-app-shell {
@@ -103,7 +103,7 @@
 .ui-app-nav a[aria-current]:not([aria-current='false']) {
   background: var(--accent-soft);
   border-inline-start-color: var(--accent);
-  color: var(--accent-text);
+  color: var(--text);
 }
 
 @media (pointer: coarse) {
@@ -257,7 +257,7 @@
 /* --- Metric tiles ---
    The metric primitive itself is shell-agnostic and now lives in
    primitives.css as `.ui-stat` / `.ui-statgrid`; `.ui-app-metric*` and
-   `.ui-app-metrics` remain as permanent admin-shell aliases (grouped on
+   `.ui-app-metrics` remain as permanent app-shell aliases (grouped on
    the canonical rules there — identical output). Nothing app-specific
    left to define here. */
 

package/css/clamp.css

@@ -0,0 +1,92 @@
+/* ==========================================================================
+   clamp — opt-in bounded excerpt + reveal.
+
+   For source excerpts, claim basis, caveats, and evidence text that should
+   scan as a bounded block but remain reachable. Bronto owns the visual clamp
+   and optional CSS-only reveal affordance; the host owns content, IDs, and
+   whether truncation is appropriate. Not imported by core.css.
+   ========================================================================== */
+
+.ui-clamp {
+  --clamp-lines: 4;
+
+  display: grid;
+  gap: var(--space-2xs);
+  min-inline-size: 0;
+  position: relative;
+}
+
+.ui-clamp__body {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--clamp-lines);
+  display: -webkit-box;
+  line-clamp: var(--clamp-lines);
+  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
+  overflow: hidden;
+}
+
+.ui-clamp:has(> .ui-clamp__toggle:checked) .ui-clamp__body {
+  -webkit-line-clamp: unset;
+  display: block;
+  line-clamp: none;
+  mask-image: none;
+}
+
+.ui-clamp__toggle {
+  block-size: 1px;
+  clip-path: inset(50%);
+  inline-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.ui-clamp__control {
+  color: var(--accent-text);
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  inline-size: max-content;
+  letter-spacing: var(--tracking-wide);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  text-underline-offset: 0.2rem;
+  text-transform: uppercase;
+}
+
+.ui-clamp__toggle:focus-visible + .ui-clamp__body + .ui-clamp__control {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.ui-clamp__less {
+  display: none;
+}
+
+.ui-clamp:has(> .ui-clamp__toggle:checked) .ui-clamp__more {
+  display: none;
+}
+
+.ui-clamp:has(> .ui-clamp__toggle:checked) .ui-clamp__less {
+  display: inline;
+}
+
+@media (hover: hover) {
+  .ui-clamp__control:hover {
+    text-decoration-color: currentColor;
+  }
+}
+
+@media print {
+  .ui-clamp__body {
+    -webkit-line-clamp: unset;
+    display: block;
+    line-clamp: none;
+    mask-image: none;
+  }
+
+  .ui-clamp__toggle,
+  .ui-clamp__control {
+    display: none;
+  }
+}

package/css/figure.css

@@ -0,0 +1,102 @@
+/* ==========================================================================
+   figure — opt-in analytical/report figure stage.
+
+   A frame for chart/diagram/media evidence: caption, stable stage, optional
+   overlay, key, and fallback data. Bronto owns only the layout grammar. The
+   host still owns data, scales, chart rendering, annotation content, and the
+   fallback table. Not imported by core.css.
+   ========================================================================== */
+
+.ui-figure {
+  display: grid;
+  gap: var(--space-sm);
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.ui-figure > *,
+.ui-figure__body > *,
+.ui-figure__stage > * {
+  min-inline-size: 0;
+}
+
+.ui-figure__caption {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.ui-figure__body {
+  align-items: start;
+  display: grid;
+  gap: var(--space-sm);
+}
+
+.ui-figure__body--key-right {
+  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 10rem), var(--figure-key-width, 14rem));
+}
+
+.ui-figure__stage {
+  --figure-max-inline: 42rem;
+  --figure-min-block: 0px;
+
+  display: grid;
+  inline-size: min(100%, var(--figure-max-inline));
+  margin-inline: auto;
+  min-block-size: var(--figure-min-block);
+  place-items: center;
+  position: relative;
+}
+
+.ui-figure__media {
+  display: block;
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+.ui-figure__stage > :is(canvas, img, picture, svg):not(.ui-figure__overlay) {
+  display: block;
+  max-inline-size: 100%;
+}
+
+.ui-figure__overlay {
+  block-size: 100%;
+  inline-size: 100%;
+  inset: 0;
+  overflow: visible;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ui-figure__key,
+.ui-figure__data {
+  display: grid;
+  gap: var(--space-xs);
+}
+
+.ui-figure__data {
+  margin-block-start: var(--space-xs);
+}
+
+@media (max-width: 44rem) {
+  .ui-figure__body--key-right {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media print {
+  .ui-figure {
+    break-inside: avoid;
+  }
+
+  .ui-figure__body {
+    display: block;
+  }
+
+  .ui-figure__body > * + * {
+    margin-block-start: var(--space-sm);
+  }
+}

package/css/highlights.css

@@ -0,0 +1,50 @@
+/* ==========================================================================
+   highlights — opt-in CSS Custom Highlight API paint.
+
+   Named text ranges for cited evidence, search hits, and current match. The
+   HOST creates Range objects and registers Highlight instances in CSS.highlights
+   under the documented names. Bronto only paints the registered ranges. Not
+   imported by core.css.
+   ========================================================================== */
+
+.ui-highlights {
+  --highlight-evidence: var(--accent-soft);
+  --highlight-search: var(--warning-soft);
+  --highlight-current: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+
+.ui-highlights::highlight(bronto-evidence) {
+  background-color: var(--highlight-evidence);
+  color: inherit;
+  text-decoration-color: var(--accent);
+  text-decoration-line: underline;
+  text-decoration-thickness: 0.1em;
+  text-underline-offset: 0.18em;
+}
+
+.ui-highlights::highlight(bronto-search) {
+  background-color: var(--highlight-search);
+  color: inherit;
+}
+
+.ui-highlights::highlight(bronto-current) {
+  background-color: var(--highlight-current);
+  color: var(--text);
+}
+
+@media (forced-colors: active) {
+  .ui-highlights::highlight(bronto-evidence),
+  .ui-highlights::highlight(bronto-search),
+  .ui-highlights::highlight(bronto-current) {
+    background-color: Highlight;
+    color: HighlightText;
+    text-decoration-color: HighlightText;
+  }
+}
+
+@media print {
+  .ui-highlights {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/interval.css

@@ -0,0 +1,90 @@
+/* ==========================================================================
+   interval — opt-in low/high uncertainty span.
+
+   A compact report primitive for "the value is somewhere in this range" —
+   confidence intervals, estimates, budget windows, and measured uncertainty.
+   Boundary: the HOST normalises `--lo`, `--hi`, and optional `--v` to 0..1 and
+   writes the accessible label. Bronto only paints geometry. Not imported by
+   core.css.
+   ========================================================================== */
+
+.ui-interval {
+  --lo: 0;
+  --hi: 1;
+
+  display: grid;
+  gap: 0.35rem;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.ui-interval__track {
+  background: var(--surface-4);
+  block-size: 0.7rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  min-inline-size: 8rem;
+  position: relative;
+}
+
+.ui-interval__range {
+  background: color-mix(in srgb, var(--accent) 26%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
+  border-radius: var(--radius-pill);
+  inline-size: max(2px, calc((var(--hi) - var(--lo)) * 100%));
+  inset-block: 18%;
+  inset-inline-start: calc(var(--lo) * 100%);
+  position: absolute;
+}
+
+.ui-interval__point {
+  background: var(--text);
+  border: 2px solid var(--panel);
+  border-radius: 50%;
+  block-size: 0.72rem;
+  box-shadow: 0 0 0 1px var(--line-strong);
+  inline-size: 0.72rem;
+  inset-block-start: 50%;
+  inset-inline-start: calc(var(--v, var(--lo)) * 100%);
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+
+.ui-interval__label,
+.ui-interval__bounds {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+}
+
+.ui-interval__label {
+  color: var(--text-soft);
+}
+
+.ui-interval__bounds {
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: space-between;
+}
+
+@media (forced-colors: active) {
+  .ui-interval__track,
+  .ui-interval__range,
+  .ui-interval__point {
+    border-color: CanvasText;
+  }
+
+  .ui-interval__range,
+  .ui-interval__point {
+    background: CanvasText;
+  }
+}
+
+@media print {
+  .ui-interval__range,
+  .ui-interval__point {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}

package/css/primitives.css

@@ -569,9 +569,8 @@
 }
 
 .ui-chip--accent {
-  /* accent-strong, not accent: chip text is small uppercase mono and must
-     clear WCAG AA 4.5:1 — same rule as .ui-eyebrow above. */
-  color: var(--accent-text);
+  /* Tone rides the border + hover tint; text stays neutral-readable. */
+  color: var(--text-soft);
   border-color: var(--accent);
 }
 

package/css/report-kit.css

@@ -0,0 +1,38 @@
+/* ==========================================================================
+   report-kit — convenience roll-up for static/PDF report consumers.
+
+   Import the default bundle first, then this opt-in kit:
+
+     @import '@ponchia/ui';
+     @import '@ponchia/ui/css/report-kit.css';
+
+   This file deliberately excludes app workbench/command surfaces. Reports can
+   still import narrower leaves one by one; this roll-up is the no-build,
+   copy-paste path for complete static reports.
+   ========================================================================== */
+
+@import url('./report.css') layer(bronto);
+@import url('./dataviz.css') layer(bronto);
+@import url('./figure.css') layer(bronto);
+@import url('./annotations.css') layer(bronto);
+@import url('./legend.css') layer(bronto);
+@import url('./marks.css') layer(bronto);
+@import url('./connectors.css') layer(bronto);
+@import url('./spotlight.css') layer(bronto);
+@import url('./crosshair.css') layer(bronto);
+@import url('./selection.css') layer(bronto);
+@import url('./sources.css') layer(bronto);
+@import url('./generated.css') layer(bronto);
+@import url('./state.css') layer(bronto);
+@import url('./interval.css') layer(bronto);
+@import url('./clamp.css') layer(bronto);
+@import url('./highlights.css') layer(bronto);
+@import url('./diff.css') layer(bronto);
+@import url('./code.css') layer(bronto);
+@import url('./spark.css') layer(bronto);
+@import url('./bullet.css') layer(bronto);
+@import url('./sidenote.css') layer(bronto);
+@import url('./textref.css') layer(bronto);
+@import url('./term.css') layer(bronto);
+@import url('./toc.css') layer(bronto);
+@import url('./tree.css') layer(bronto);

package/css/report.css

@@ -274,7 +274,7 @@
 
 .ui-report__finding-title {
   color: var(--text);
-  font-size: var(--text-md);
+  font-size: var(--text-base);
   font-weight: 650;
   line-height: 1.25;
 }
@@ -480,7 +480,7 @@
 
 .ui-evidence-item__value {
   color: var(--text);
-  font-size: var(--text-md);
+  font-size: var(--text-base);
   font-weight: 650;
 }
 
@@ -510,13 +510,20 @@
   padding-block: var(--space-sm);
 }
 
+.ui-report__action > :not(.ui-report__action-status) {
+  grid-column: 1;
+}
+
 .ui-report__action-status {
-  align-self: start;
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
+  grid-column: 2;
+  grid-row: 1;
   letter-spacing: var(--tracking-wide);
+  place-self: start end;
   text-transform: uppercase;
+  white-space: nowrap;
 }
 
 .ui-report__action-title,
@@ -556,6 +563,12 @@
   .ui-report__action {
     grid-template-columns: 1fr;
   }
+
+  .ui-report__action-status {
+    grid-column: 1;
+    grid-row: auto;
+    place-self: auto start;
+  }
 }
 
 .ui-report__sources,
@@ -720,6 +733,9 @@
     margin-block-start: var(--space-sm);
   }
 
+  /* Stat tiles and table rows are guarded at the item level (the tile / the
+     row), not the container — a long statgrid or table may legitimately span
+     pages, but a sliced tile or row is unreadable. */
   .ui-report__cover,
   .ui-report__head,
   .ui-report__decision,
@@ -730,7 +746,10 @@
   .ui-report__toc,
   .ui-claim,
   .ui-evidence-item,
-  .ui-report__action {
+  .ui-report__action,
+  .ui-stat,
+  .ui-statgrid > *,
+  tr {
     break-inside: avoid;
   }
 

package/css/sidenote.css

@@ -14,11 +14,21 @@
    same breakpoint. Place each note in the DOM right after its `.ui-sidenote__ref`.
    ========================================================================== */
 
-.ui-sidenote,
-.ui-marginnote {
+/* The two knobs are ROOT-scoped on purpose: the documented host contract has
+   the CONTAINER reserve the gutter with
+   `padding-inline-end: calc(var(--sidenote-width) + var(--sidenote-gap))`,
+   and custom properties do not flow upward — declared only on the notes,
+   that calc is invalid on any ancestor and silently resolves to NO gutter
+   (the floated notes then spill past the page edge). Root scope makes the
+   documented calc work anywhere, and overriding either var on the container
+   re-sizes the notes and the gutter together. */
+:root {
   --sidenote-width: 12rem;
   --sidenote-gap: 2rem;
+}
 
+.ui-sidenote,
+.ui-marginnote {
   border-inline-start: 2px solid var(--line);
   color: var(--text-dim);
   display: block;

package/css/site.css

@@ -318,10 +318,11 @@
   padding: 0.28rem 0.6rem;
 }
 
+/* Tone rides the tint + border; text stays neutral-readable. */
 .ui-tag--accent {
   background: var(--accent-soft);
   border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
-  color: var(--accent-text);
+  color: var(--text-soft);
 }
 
 /* --- Meta row — date · author · read-time, dot-separated --- */

package/css/sources.css

@@ -236,4 +236,9 @@
   .ui-citation[href]::after {
     content: none !important;
   }
+
+  .ui-source-card,
+  .ui-source-list__item {
+    break-inside: avoid;
+  }
 }