@ponchia/ui 0.6.6 → 0.6.8

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;
+  }
 }

package/css/state.css

@@ -4,7 +4,8 @@
    Serious apps spend a lot of time in states like saving, saved, queued,
    offline, stale, conflicted, locked, and reviewed — usually improvised per
    product, so even good apps feel inconsistent. This is the canonical set:
-   a labelled state object with a rationed tone, plus a page/document sync bar.
+   a labelled state object with a rationed tone, a page/document sync bar, and
+   a persistent background-job row.
 
    The state is carried by a tone dot AND an author-written label, never colour
    alone (WCAG 1.4.1) — the label is the canonical wording (see docs/state.md).
@@ -112,10 +113,128 @@
   padding-block: var(--space-xs);
 }
 
+/* Background job — persistent progress/status for asynchronous work. The host
+   owns polling, retries, cancellation, and partial-failure semantics; Bronto
+   paints the durable row so long-running work is not hidden in a toast. */
+.ui-job {
+  --job-progress: 0%;
+  --job-tone: var(--text-dim);
+
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-inline-start: 2px solid var(--job-tone);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+.ui-job__head {
+  align-items: start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs) var(--space-md);
+  justify-content: space-between;
+}
+
+.ui-job__title {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: var(--text-sm);
+  letter-spacing: var(--tracking-wide);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-job__meta {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-job__body {
+  color: var(--text-soft);
+  margin: 0;
+}
+
+.ui-job__progress {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  block-size: 0.5rem;
+  overflow: hidden;
+}
+
+.ui-job__bar {
+  background: var(--job-tone);
+  block-size: 100%;
+  display: block;
+  inline-size: clamp(0%, var(--job-progress), 100%);
+  min-inline-size: 1px;
+  print-color-adjust: exact;
+  transition: inline-size var(--duration-base) var(--ease-standard);
+}
+
+.ui-job__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+}
+
+.ui-job--compact {
+  gap: var(--space-xs);
+  padding: var(--space-sm);
+}
+
+.ui-job--queued {
+  --job-tone: var(--text-dim);
+}
+
+.ui-job--running {
+  --job-tone: var(--accent);
+}
+
+.ui-job--blocked {
+  --job-tone: var(--warning);
+}
+
+.ui-job--failed {
+  --job-tone: var(--danger);
+}
+
+.ui-job--complete {
+  --job-tone: var(--success);
+}
+
+.ui-job--running .ui-job__bar {
+  background-image: linear-gradient(
+    90deg,
+    var(--job-tone),
+    color-mix(in srgb, var(--job-tone) 62%, var(--panel))
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-job__bar {
+    transition: none;
+  }
+}
+
 /* Forced colours: the tone dot collapses to a system colour, so the
    author-written label remains the state channel (it already must be). */
 @media (forced-colors: active) {
   .ui-state::before {
     background: CanvasText;
   }
+
+  .ui-job {
+    border-inline-start-color: CanvasText;
+  }
+
+  .ui-job__bar {
+    background: CanvasText;
+  }
 }

package/css/table.css

@@ -85,6 +85,10 @@
   overflow-wrap: anywhere;
 }
 
+.ui-table--break-anywhere {
+  table-layout: fixed;
+}
+
 /* Numeric / right-aligned cells. */
 .ui-table .is-num,
 .ui-table th.is-num {

package/css/tokens.css

@@ -166,7 +166,7 @@
     --text-dim: #a0a0a0;
     --accent: #ff3b41;
     --accent-ramp-end: #000000;
-    --accent-strong: color-mix(in srgb, var(--accent) 84%, #fff);
+    --accent-strong: color-mix(in srgb, var(--accent) 80%, #fff);
     --accent-text: var(--accent-strong);
     --on-accent: var(--button-text);
     --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
@@ -205,7 +205,7 @@
   --text-dim: #a0a0a0;
   --accent: #ff3b41;
   --accent-ramp-end: #000000;
-  --accent-strong: color-mix(in srgb, var(--accent) 84%, #fff);
+  --accent-strong: color-mix(in srgb, var(--accent) 80%, #fff);
   --accent-text: var(--accent-strong);
   --on-accent: var(--button-text);
   --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
@@ -237,16 +237,16 @@
 /* --------------------------------------------------------------------------
    Theming contract — the public override surface.
 
-   Re-brand a whole project (or a subtree) by setting ONE knob; the rest
-   of the accent family derives from it via color-mix:
+   Re-brand a whole project by setting ONE knob; the rest of the accent
+   family derives from it via color-mix:
 
      :root { --accent: #2f6df6; }          // brand it blue, everywhere
-     .promo { --accent: #16a34a; }          // or just a subtree
 
-   --accent-strong/-soft, --bg-accent, --field-dot-accent and --focus-ring
-   all follow. The other documented knobs: the --space-* scale (or the
-   [data-density] presets below), --radius-*, and the font vars
-   (--display / --mono / --sans). docs/theming.md is the full contract.
+   Scoped --accent overrides recolor direct accent uses in that subtree, but
+   the derived family is declared at :root and is a root-level skin contract.
+   For full rebrands, override per theme at :root as shown in docs/theming.md.
+   The other documented knobs: the --space-* scale (or the [data-density]
+   presets below), --radius-*, and the font vars (--display / --mono / --sans).
 
    Density and contrast are CSS-only presets (not part of the JS token
    model): opt in with [data-density] / [data-contrast] on any element.
@@ -360,9 +360,25 @@
     --line: #d9d9d9;
     --line-strong: #b3b3b3;
     --success: #2f7d4f;
+    --success-soft: rgb(47, 125, 79, 0.12);
     --danger: #c01622;
+    --danger-soft: rgb(192, 22, 34, 0.1);
     --warning: #806414;
+    --warning-soft: rgb(128, 100, 20, 0.13);
     --info: #1f63c4;
+    --info-soft: rgb(31, 99, 196, 0.12);
     --accent: #d71921;
+    --bg-accent: color-mix(in srgb, var(--accent) 6%, transparent);
+    --accent-ramp-end: #ffffff;
+    --accent-strong: color-mix(in srgb, var(--accent) 83%, #000);
+    --accent-text: var(--accent-strong);
+    --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+    --button-text: #ffffff;
+    --on-accent: var(--button-text);
+    --field-dot: rgb(17, 17, 17, 0.16);
+    --field-dot-hot: rgb(17, 17, 17, 0.4);
+    --field-dot-accent: color-mix(in srgb, var(--accent) 78%, transparent);
+    --focus-ring: var(--accent);
+    --code-bg: rgb(17, 17, 17, 0.05);
   }
 }

package/css/workbench.css

@@ -1,12 +1,11 @@
 /* ==========================================================================
-   workbench — opt-in inspector / property / selection-bar primitives.
-
-   Real tools need inspectors, property rows, 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 CSS core:
-   layout and affordances only. Resizable split panes (a focusable ARIA
-   window-splitter behavior) and drag handles are deliberately deferred until a
-   consumer needs them. Not imported by core.css.
+   workbench — opt-in inspector / property / selection-bar / splitter primitives.
+
+   Real tools need inspectors, property rows, a bar of actions on the current
+   selection, and resizable panes. Generic kits stop at cards/tables/forms, so
+   every app builds its own half-consistent workbench. This is the low-risk
+   core: layout and affordances, plus a tiny optional ARIA splitter behavior.
+   Not imported by core.css.
    ========================================================================== */
 
 /* --- Inspector — a panel of details for the selected object. --- */
@@ -81,3 +80,97 @@
   flex-wrap: wrap;
   gap: var(--space-xs);
 }
+
+/* --- Splitter — two panes separated by a focusable ARIA separator handle. --- */
+.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;
+  }
+}