nirs4all-ui 0.1.15 → 0.1.17

package/README.md

@@ -28,6 +28,9 @@ spectra motion asset.
 | `viz` | `nirs4all-ui/viz` | Dependency-free scientific SVG charts. Each chart provides a data-derived accessible description and accepts a `description` override for localized or domain-specific wording. Hosts supply computed values and retain analysis/execution. |
 | `dag` | `nirs4all-ui/dag` | Interactive compiled-DAG explorer (layered layout, pan/zoom, culling/LOD, collapsible clusters) plus the pure engine and a `fromCompiledGraph` adapter for a serialized DAG-ML graph/plan. |
 | `chains` | `nirs4all-ui/chains` | Chain-effect explorer over a corpus of scored pipelines: per-node influence ranking, position (early/mid/late) and predecessor×successor order effects, and with/without distribution shift, with per-dataset rank/z normalization. Pure engine + charts + interactive explorer, plus a `parseChainEffectAnalysis` adapter for the serialized `dag-ml` artifact. |
+| `workbench` | `nirs4all-ui/workbench` | Shared interactive-analysis kit behind the capsules: selection algebra (click / box / lasso, Shift add · Alt subtract · Ctrl toggle), color-by resolution, canvas views (`SpectraView` lines / bands / density, `ScatterView`, `DistributionView`, `ProfileView`) on a layered `CanvasPlot`, view grid with layout presets, panel chrome, virtual table, capsule-scoped shortcuts. |
+| `playground` | `nirs4all-ui/playground` | The **Playground capsule**: dataset exploration and live operator chains (pipeline timeline with preview cursor, operator picker, linked spectra / scores / target / T²–Q / loadings / r(λ) / folds / replicates / samples views, selection drawer). The host executes `PlaygroundRunRequest`s and returns `PlaygroundResult`s. |
+| `inspector` | `nirs4all-ui/inspector` | The **Inspector capsule**: rank and dissect trained chains (leaderboard with ☆ compare, score landscape, pivot heatmap, generalization, hyper-parameters, step effects, parity, residuals, fold stability, confusion, hard samples, chain details with step diff). The host supplies chains, score references and on-demand predictions. |
 | `lab` | `nirs4all-ui/lab` | Quality/lab decision, sample lifecycle, health, model report, worklist, and budget display contracts plus presentational components. |
 | `datasetBuilder` | `nirs4all-ui/datasetBuilder` | Multisource dataset-builder wizard components and pure dataset-config helpers. |
 | `brand` | `nirs4all-ui/brand` | Ecosystem brand definitions, stable asset paths, palettes, and deterministic SVG generators. |
@@ -37,7 +40,7 @@ spectra motion asset.
 The root export also exposes namespace barrels:
 
 ```ts
-import { brand, chains, conformal, dag, dataset, datasetBuilder, keywordRegistry, lab, nodeRegistry, robustness, runtime, score, styles, tuning } from "nirs4all-ui";
+import { brand, chains, conformal, dag, inspector, playground, workbench, dataset, datasetBuilder, keywordRegistry, lab, nodeRegistry, robustness, runtime, score, styles, tuning } from "nirs4all-ui";
 ```
 
 Prefer domain imports when a consumer only needs one area:
@@ -52,6 +55,9 @@ import { createKeywordRegistryFieldViews, createKeywordRegistryWorkspacePredicti
 import { projectN4mManifest } from "nirs4all-ui/nodeRegistry";
 import { createTuningSearchSpacePreview, createTuningStudySummary, createTuningSummaryCard, createTuningTrialRows, parseOrderedTuningSearchSpaceArtifact, parseTuningResultArtifact, parseTuningSummaryArtifact } from "nirs4all-ui/tuning";
 import { DatasetBuilder } from "nirs4all-ui/datasetBuilder";
+import { Playground } from "nirs4all-ui/playground";
+import { Inspector } from "nirs4all-ui/inspector";
+import { SpectraView, ScatterView, combineSelection } from "nirs4all-ui/workbench";
 import { DagGraphView, fromCompiledGraph } from "nirs4all-ui/dag";
 import { ChainExplorer, fromScoredChains, parseChainEffectAnalysis } from "nirs4all-ui/chains";
 import { DecisionBadge } from "nirs4all-ui/lab";
@@ -71,6 +77,7 @@ Static assets are published through the existing `nirs4all-ui/assets/*` export:
 ```css
 @import "nirs4all-ui/assets/styles/nirs4all-default.css";
 @import "nirs4all-ui/assets/datasetBuilder.css";
+@import "nirs4all-ui/assets/workbench.css";
 @import "nirs4all-ui/assets/theme.css";
 ```
 
@@ -143,3 +150,23 @@ verifies that every public React component, lab, and dataset-builder export
 appears in the page and that the mirrored brand/logo, crawler metadata,
 manifest, default styles, package CSS assets, motion asset, reusable brand kit,
 and canonical URLs stay in sync with the packaged asset set.
+
+### Pipeline preset cards
+
+`PipelinePresetCard` from `nirs4all-ui/components` presents Studio's preset metadata,
+complexity, canonical recipe statistics and preview, with host-provided task actions
+and icons. Import `nirs4all-ui/assets/pipeline-presets.css` for the shared appearance.
+`nirs4all-ui/pipelines` exports the pure canonical preview, statistics and preset
+model helpers. The component supports React server rendering for static catalogues;
+it owns no routing, API access or application state.
+
+The shared preset content is generated from Studio's `api/presets/*.yaml`:
+
+```bash
+python scripts/sync-studio-presets.py --studio ../nirs4all-studio
+# Requires PyYAML; use a Studio or Repository Python environment.
+```
+
+`getStudioPipelinePresets()` returns independent copies of all ten defaults and
+both task variants. Studio checks the snapshot against its authored YAML hashes;
+Repository checks its recipes against the same shared data before rendering.

package/assets/pipeline-presets.css

@@ -0,0 +1,38 @@
+.n4-preset-card {
+  --preset-text: var(--n4-color-text, #0f172a);
+  --preset-muted: var(--n4-color-muted, #64748b);
+  --preset-border: var(--n4-color-border, #e2e8f0);
+  --preset-primary: var(--n4-color-primary, #0d9488);
+  display: flex; flex-direction: column; height: 100%; min-width: 0; box-sizing: border-box;
+  padding: 16px; border: 1px solid var(--preset-border); border-radius: 8px;
+  background: var(--n4-color-surface, #fff); color: var(--preset-text); line-height: 1.5;
+  font-family: var(--n4-font-sans, Inter, system-ui, sans-serif);
+}
+.n4-preset-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
+.n4-preset-template { display: flex; align-items: center; gap: 8px; padding: 2px 8px; border-radius: 4px; background: #06b6d41a; color: #0891b2; font-size: 12px; font-weight: 500; }
+.n4-preset-name { font: 600 16px/1.5 var(--n4-font-sans, Inter, system-ui, sans-serif); margin: 0; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.n4-preset-description { font-size: 11px; color: var(--preset-muted); margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.n4-preset-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--preset-muted); }
+.n4-preset-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px 12px; margin: 12px 0 0; border: 1px solid var(--preset-border); border-radius: 6px; background: color-mix(in srgb, var(--preset-muted) 4%, transparent); }
+.n4-preset-stats dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; overflow-wrap: anywhere; }
+.n4-preset-stats dt { font-size: 10px; margin-top: 2px; text-transform: uppercase; letter-spacing: .025em; color: var(--preset-muted); }
+.n4-preset-stats .n4-preset-emphasize { font-size: clamp(12px, 1vw, 14px); white-space: nowrap; color: var(--preset-primary); }
+.n4-preset-preview { padding: 0; margin: 12px 0 0; list-style: none; font-size: 12px; }
+.n4-preset-preview li { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 4px; color: var(--preset-muted); }
+.n4-preset-preview li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.n4-preset-preview svg, .n4-preset-header svg, .n4-preset-hint svg { width: 12px; height: 12px; flex-shrink: 0; }
+.n4-preset-preview .n4-preset-more { font-size: 11px; font-style: italic; }
+.n4-preset-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
+.n4-preset-actions > div { flex: 1; min-width: 0; }
+.n4-preset-action { display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100%; min-height: 32px; padding: 4px 12px; border: 1px solid #10b98140; border-radius: 999px; background: #10b9811a; color: #047857; font-size: 11px; font-weight: 600; text-decoration: none; }
+.n4-preset-action:hover { background: #10b98129; text-decoration: none; }
+.n4-preset-action-classification { border-color: #0ea5e940; background: #0ea5e91a; color: #0369a1; }
+.n4-preset-action-classification:hover { background: #0ea5e929; }
+.n4-preset-complexity { display: inline-flex; align-items: center; gap: 6px; border: 1px solid; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
+.n4-preset-complexity > span { text-transform: capitalize; }
+.n4-preset-starter { color: #047857; border-color: #10b98140; background: #10b9811a; }
+.n4-preset-quick { color: #0369a1; border-color: #0ea5e940; background: #0ea5e91a; }
+.n4-preset-balanced { color: #b45309; border-color: #f59e0b40; background: #f59e0b1a; }
+.n4-preset-heavy { color: #c2410c; border-color: #f9731640; background: #f973161a; }
+.n4-preset-exhaustive { color: #be123c; border-color: #f43f5e40; background: #f43f5e1a; }
+.n4-preset-action:focus-visible { outline: 2px solid var(--preset-primary, #0d9488); outline-offset: 3px; }

package/assets/qualification.css

@@ -0,0 +1,176 @@
+/* nirs4all-ui qualification domain. Variables fall back to the shared teal/red brand. */
+.n4q-badge{display:inline-flex;align-items:center;gap:.4em;padding:.15em .6em;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid currentColor;background:var(--n4q-badge-bg,transparent);white-space:nowrap}
+.n4q-reason{font-weight:400;font-size:.72rem;opacity:.85}
+.n4q-profile-exploratory{color:#b45309}.n4q-profile-partial{color:#0f766e}.n4q-profile-complete{color:#047857}
+.n4q-avail-computed{color:#047857}.n4q-avail-not_applicable,.n4q-avail-undefined{color:#475569}
+.n4q-avail-insufficient_data,.n4q-avail-unsupported,.n4q-avail-not_identifiable{color:#b45309}
+.n4q-avail-cancelled{color:#6d28d9}.n4q-avail-error{color:#b91c1c}
+.n4q-conf-unknown{color:#475569}.n4q-conf-low{color:#b45309}.n4q-conf-medium{color:#0f766e}.n4q-conf-high{color:#047857}
+.n4q-sev-info{color:#0f766e}.n4q-sev-warning{color:#b45309}.n4q-sev-high{color:#b91c1c}.n4q-sev-blocking{color:#7f1d1d}
+.n4q-table-wrap{overflow-x:auto;max-width:100%}
+.n4q-table-wrap:focus-visible,.n4q-datatable summary:focus-visible{outline:2px solid var(--n4q-focus,#058e96);outline-offset:2px}
+.n4q-table{width:100%;border-collapse:collapse;font-size:.88rem}
+.n4q-table caption{text-align:left;font-weight:600;padding:.4rem 0}
+.n4q-table th,.n4q-table td{padding:.45rem .6rem;border-bottom:1px solid var(--n4q-line,rgba(100,116,139,.3));text-align:left;vertical-align:top}
+.n4q-table thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em}
+.n4q-table-compact th,.n4q-table-compact td{padding:.25rem .5rem}
+.n4q-num{text-align:right;font-variant-numeric:tabular-nums}
+.n4q-sub{display:block;font-size:.76rem;opacity:.75}
+.n4q-null{opacity:.7;font-style:italic}
+.n4q-unit{opacity:.75}
+.n4q-findings{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
+.n4q-finding{border:1px solid var(--n4q-line,rgba(100,116,139,.3));border-left-width:4px;border-radius:8px;padding:.6rem .8rem}
+.n4q-finding[data-severity=blocking]{border-left-color:#7f1d1d}.n4q-finding[data-severity=high]{border-left-color:#b91c1c}.n4q-finding[data-severity=warning]{border-left-color:#b45309}.n4q-finding[data-severity=info]{border-left-color:#058e96}
+.n4q-finding-head{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
+.n4q-finding p{margin:.35rem 0 0}
+.n4q-empty{opacity:.8}
+.n4q-overview{display:grid;gap:.8rem}
+.n4q-overview-head{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}.n4q-overview-head p{margin:0}
+.n4q-provenance{display:grid;grid-template-columns:max-content 1fr;gap:.2rem .8rem;margin:0;font-size:.85rem}.n4q-provenance dt{opacity:.75}.n4q-provenance dd{margin:0}
+.n4q-summary{margin:0;display:grid;gap:.5rem}
+.n4q-bar{width:100%;height:14px;border-radius:7px;overflow:hidden;background:rgba(100,116,139,.15)}
+.n4q-swatch{display:inline-block;width:.8em;height:.8em;margin-right:.5em;border-radius:2px;vertical-align:baseline}
+.n4q-fill-computed{fill:#059669;background:#059669}.n4q-fill-not_applicable{fill:#94a3b8;background:#94a3b8}
+.n4q-fill-insufficient_data{fill:#d97706;background:#d97706}.n4q-fill-unsupported{fill:#b45309;background:#b45309}
+.n4q-fill-not_identifiable{fill:#0891b2;background:#0891b2}.n4q-fill-undefined{fill:#64748b;background:#64748b}
+.n4q-fill-cancelled{fill:#7c3aed;background:#7c3aed}.n4q-fill-error{fill:#dc2626;background:#dc2626}
+.n4q-datatable summary{cursor:pointer;font-size:.85rem}
+
+/* --- charts (PopulationFlow, RepeatabilityProfile, EigenvalueScree, ScoreMap, TargetDistribution) --- */
+.n4q-chart{margin:0;display:grid;gap:.6rem;min-width:0}
+.n4q-chart-plot{position:relative;min-width:0}
+.n4q-svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font,Inter,system-ui,sans-serif)}
+.n4q-svg:focus-visible{outline:2px solid var(--teal,#0d9488);outline-offset:4px;border-radius:6px}
+.n4q-grid{stroke:var(--n4q-grid,rgba(100,116,139,.16));stroke-width:1}
+.n4q-zero,.n4q-baseline{stroke:var(--n4q-axis,rgba(100,116,139,.55));stroke-width:1}
+.n4q-crosshair{stroke:var(--text-2,#475569);stroke-width:1;stroke-opacity:.6}
+.n4q-tick{font-family:var(--mono,"JetBrains Mono",monospace);font-size:10px;fill:var(--text-3,#64748b)}
+.n4q-axis-title{font-size:11px;font-weight:600;fill:var(--text-2,#475569)}
+.n4q-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
+.n4q-marker,.n4q-dot{stroke:var(--n4q-surface,var(--surface,#fff));stroke-width:2;transition:r .12s}
+.n4q-whisker{stroke:var(--teal-d,#0f766e);stroke-width:1.5}
+.n4q-hit{cursor:default;outline:none}
+.n4q-hit:focus-visible rect:first-child{stroke:var(--teal,#0d9488);stroke-width:1.5;stroke-dasharray:3 3}
+.n4q-flow-label{font-size:12px;fill:var(--text-2,#475569)}
+.n4q-flow-total{font-size:15px;font-weight:700;fill:var(--text,#0f172a)}
+.n4q-flow-stage{font-weight:600;fill:var(--text,#0f172a)}
+.n4q-flow-link{fill-opacity:.1}
+.n4q-flow-empty{fill:var(--n4q-null-fill,#e2e8f0)}
+.n4q-flow-seg{outline:none;cursor:default}
+.n4q-flow-seg rect{transition:opacity .15s}
+.n4q-flow-seg[data-active] rect,.n4q-flow-seg:focus-visible rect{opacity:.82}
+.n4q-flow-seg:focus-visible rect{stroke:var(--text,#0f172a);stroke-width:2}
+.n4q-flow-inbar{font-size:11.5px;fill:#fff;pointer-events:none}
+.n4q-cat-label{font-size:12px;fill:var(--text-2,#475569)}
+.n4q-cat-value{font-size:12px;font-weight:700;fill:var(--text,#0f172a)}
+
+.n4q-tip{position:absolute;z-index:5;pointer-events:none;min-width:150px;max-width:280px;padding:.55rem .7rem;border-radius:10px;
+  background:var(--n4q-tip-bg,rgba(255,255,255,.97));color:var(--text,#0f172a);border:1px solid var(--border,#e2e8f0);
+  box-shadow:0 14px 34px -14px rgba(15,23,42,.35);font-size:.78rem;line-height:1.35;backdrop-filter:blur(8px)}
+.n4q-tip-head{font-weight:700;margin-bottom:.25rem;font-family:var(--mono,monospace);font-size:.74rem}
+.n4q-tip-row{display:flex;align-items:center;gap:.45rem;white-space:nowrap}
+.n4q-tip-row strong{font-variant-numeric:tabular-nums}
+.n4q-tip-row span:last-child{color:var(--text-2,#475569);overflow:hidden;text-overflow:ellipsis}
+.n4q-tip-sub{color:var(--text-3,#64748b);font-size:.72rem}
+.n4q-tip-block+.n4q-tip-block{margin-top:.3rem;padding-top:.3rem;border-top:1px solid var(--border,#e2e8f0)}
+
+.n4q-legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;list-style:none;margin:0;padding:0;font-size:.8rem;color:var(--text-2,#475569)}
+.n4q-legend li{display:inline-flex;align-items:center;gap:.4rem}
+.n4q-legend li[data-zero]{opacity:.55}
+.n4q-legend strong{color:var(--text,#0f172a);font-variant-numeric:tabular-nums}
+.n4q-legend-title{font-weight:600;color:var(--text,#0f172a)}
+.n4q-legend-sub{color:var(--text-3,#64748b)}
+.n4q-key-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
+.n4q-key-hollow{background:transparent;border:2px solid}
+.n4q-key-null{background:transparent;border:1.5px solid #94a3b8}
+.n4q-key-line{display:inline-block;width:16px;height:3px;border-radius:2px;flex:none}
+.n4q-key-box{display:inline-block;width:16px;height:10px;border-radius:3px;background:rgba(13,148,136,.25);border-left:3px solid #0d9488;flex:none}
+.n4q-key-diamond{display:inline-block;width:9px;height:9px;transform:rotate(45deg);flex:none}
+.n4q-colorbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-2,#475569);font-variant-numeric:tabular-nums}
+.n4q-colorbar-ramp{display:inline-block;width:140px;height:10px;border-radius:5px}
+.n4q-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+
+.n4q-stat{display:grid;gap:.15rem;align-content:start;padding:1rem 1.1rem;border-radius:var(--radius-sm,10px);background:var(--surface,#fff);
+  border:1px solid var(--border,#e2e8f0);color:inherit;text-decoration:none;position:relative;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
+.n4q-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--n4q-stat-accent,var(--teal,#0d9488));opacity:.85}
+.n4q-stat[data-tone=good]{--n4q-stat-accent:#059669}.n4q-stat[data-tone=warning]{--n4q-stat-accent:#d97706}.n4q-stat[data-tone=critical]{--n4q-stat-accent:#e11d48}
+a.n4q-stat:hover{border-color:var(--teal,#0d9488);transform:translateY(-1px);box-shadow:var(--shadow,0 4px 16px -4px rgba(17,24,39,.08))}
+.n4q-stat-label{font-size:.76rem;font-weight:600;color:var(--text-2,#475569)}
+.n4q-stat-value{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;color:var(--text,#0f172a);line-height:1.15}
+.n4q-stat-suffix{font-size:.85rem;font-weight:500;color:var(--text-3,#64748b);margin-left:.3rem;letter-spacing:0}
+.n4q-stat-hint{font-size:.76rem;color:var(--text-3,#64748b)}
+
+.n4q-capgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
+.n4q-capgroup{border:1px solid var(--border,#e2e8f0);border-radius:var(--radius-sm,10px);padding:.8rem .9rem;background:var(--surface,#fff)}
+.n4q-capgroup h4{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font-size:.85rem}
+.n4q-capcount{margin-left:auto;font-family:var(--mono,monospace);font-size:.75rem;color:var(--text-3,#64748b)}
+.n4q-capdot{width:9px;height:9px;border-radius:50%;background:#94a3b8}
+.n4q-capgroup[data-group=qualified] .n4q-capdot{background:#059669}
+.n4q-capgroup[data-group=available] .n4q-capdot{background:#d97706}
+.n4q-capgroup ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
+.n4q-capgroup li{display:grid;font-size:.84rem;line-height:1.3}
+.n4q-capgroup li code{font-size:.7rem;color:var(--text-3,#64748b)}
+.n4q-capgroup[data-group=unavailable] li strong{font-weight:500;color:var(--text-2,#475569)}
+.n4q-metric-name{display:block;font-weight:600;font-size:.84rem}
+.n4q-evidence-link{display:inline-block;margin-right:.5rem;font-weight:600}
+:root[data-theme=dark] .n4q-tip,.theme-dark .n4q-tip{--n4q-tip-bg:rgba(16,35,58,.97)}
+:root[data-theme=dark],.theme-dark{--n4q-null-fill:#334155;--n4q-grid:rgba(255,255,255,.08);--n4q-axis:rgba(255,255,255,.3)}
+.n4q-capgroup ul{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:.7rem 1.2rem}
+:root[data-theme=dark] .n4q-avail-not_applicable,:root[data-theme=dark] .n4q-avail-undefined,:root[data-theme=dark] .n4q-conf-unknown{color:#94a3b8}
+:root[data-theme=dark] .n4q-profile-exploratory,:root[data-theme=dark] .n4q-avail-insufficient_data,:root[data-theme=dark] .n4q-avail-unsupported,:root[data-theme=dark] .n4q-avail-not_identifiable,:root[data-theme=dark] .n4q-conf-low,:root[data-theme=dark] .n4q-sev-warning{color:#fbbf24}
+:root[data-theme=dark] .n4q-avail-computed,:root[data-theme=dark] .n4q-profile-complete,:root[data-theme=dark] .n4q-conf-high{color:#34d399}
+:root[data-theme=dark] .n4q-profile-partial,:root[data-theme=dark] .n4q-conf-medium,:root[data-theme=dark] .n4q-sev-info{color:#2dd4bf}
+:root[data-theme=dark] .n4q-avail-error,:root[data-theme=dark] .n4q-sev-high{color:#fb7185}
+:root[data-theme=dark] .n4q-sev-blocking{color:#fda4af}:root[data-theme=dark] .n4q-avail-cancelled{color:#a78bfa}
+.n4q-tip-ctx{display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:var(--text-2,#475569);margin-bottom:.1rem;white-space:nowrap}
+
+/* --- SpectraExplorer --- */
+.n4q-explorer-line{fill:none;stroke-width:1.3;stroke-opacity:.72;stroke-linejoin:round;transition:stroke-opacity .15s}
+.n4q-explorer-lines[data-dim] .n4q-explorer-line{stroke-opacity:.16}
+.n4q-explorer-focus{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
+.n4q-explorer-missing{opacity:.8}.n4q-explorer-missing[data-active]{opacity:1;transform-box:fill-box}
+.n4q-tip-alert{color:#e11d48;font-weight:600}
+
+/* --- CheckList --- */
+.n4q-checks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
+.n4q-check{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:.8rem;padding:.75rem .5rem;border-radius:10px;transition:background .15s}
+.n4q-check+.n4q-check{border-top:1px solid var(--border,#e2e8f0)}
+.n4q-check:hover{background:rgba(100,116,139,.06)}
+.n4q-check-icon{flex:none;margin-top:1px}
+.n4q-check-icon circle{fill:var(--n4q-check-bg)}
+.n4q-check-icon path{fill:none;stroke:var(--n4q-check-fg);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
+.n4q-check[data-status=ok]{--n4q-check-bg:rgba(16,185,129,.16);--n4q-check-fg:#059669}
+.n4q-check[data-status=attention]{--n4q-check-bg:rgba(217,119,6,.16);--n4q-check-fg:#b45309}
+.n4q-check[data-status=critical]{--n4q-check-bg:rgba(225,29,72,.14);--n4q-check-fg:#e11d48}
+.n4q-check[data-status=unavailable]{--n4q-check-bg:rgba(100,116,139,.14);--n4q-check-fg:#64748b}
+:root[data-theme=dark] .n4q-check[data-status=ok]{--n4q-check-fg:#34d399}
+:root[data-theme=dark] .n4q-check[data-status=attention]{--n4q-check-fg:#fbbf24}
+:root[data-theme=dark] .n4q-check[data-status=critical]{--n4q-check-fg:#fb7185}
+:root[data-theme=dark] .n4q-check[data-status=unavailable]{--n4q-check-fg:#94a3b8}
+.n4q-check-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem}
+.n4q-check-head strong{font-size:.92rem}
+.n4q-check-status{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n4q-check-fg)}
+.n4q-check-body p{margin:.15rem 0 0;font-size:.84rem;color:var(--text-2,#475569);line-height:1.45}
+.n4q-check-link{font-size:.8rem;font-weight:600;white-space:nowrap;align-self:center}
+.n4q-finding code,.n4q-finding-head code{overflow-wrap:anywhere}
+.n4q-finding{min-width:0}
+
+/* --- 0.1.0 blocks: MeasureBars, HypothesisTestTable, ComparisonMatrix, ReplicateHistogram, interval bands --- */
+.n4q-band{fill-opacity:.16;stroke:none}
+.n4q-identity{stroke:var(--text-3,#64748b);stroke-width:1;stroke-dasharray:4 4}
+.n4q-measure .n4q-cat-label{font-size:11.5px}
+.n4q-decision{font-weight:600;white-space:nowrap}
+.n4q-decision[data-rejects=true]{color:#b45309}
+.n4q-decision[data-rejects=false]{color:var(--text-2,#475569);font-weight:500}
+:root[data-theme=dark] .n4q-decision[data-rejects=true]{color:#fbbf24}
+.n4q-tests tbody th,.n4q-matrix tbody th{font-weight:600;white-space:nowrap}
+.n4q-tests tr[data-rejects=true] th{box-shadow:inset 3px 0 0 #d97706}
+.n4q-matrix-cell{min-width:7.5rem}
+.n4q-matrix-value{display:block;font-variant-numeric:tabular-nums}
+.n4q-matrix-track{position:relative;display:block;height:6px;margin-top:3px;border-radius:3px;background:rgba(100,116,139,.14);overflow:hidden}
+.n4q-matrix-bar{position:absolute;top:0;bottom:0;left:0;border-radius:3px;background:var(--teal,#0d9488);opacity:.8}
+.n4q-matrix-track[data-centred=true]::after{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:1px;background:var(--n4q-axis,rgba(100,116,139,.55))}
+.n4q-matrix-bar[data-below=true]{background:#6366f1}
+:root[data-theme=dark] .n4q-matrix-track{background:rgba(255,255,255,.08)}
+:root[data-theme=dark] .n4q-band{fill-opacity:.22}
+.n4q-table thead .n4q-nocase{text-transform:none;letter-spacing:0}