nirs4all-ui 0.1.12 → 0.1.13

package/assets/dag.css

@@ -0,0 +1,446 @@
+/* nirs4all-ui — default styles for the interactive compiled-DAG viewer.
+ *
+ * The component sets category colors inline as SVG attributes (node cards,
+ * accents, minimap dots, emphasized edges); this stylesheet themes everything
+ * left to CSS on purpose: chrome, frames, recessive edges, text, and the
+ * light/dark surfaces. It reads the shared nirs4all design tokens when present
+ * (load `nirs4all-default.css` or `theme.css`) and degrades to hardcoded
+ * fallbacks otherwise.
+ *
+ * Consumed as `nirs4all-ui/assets/dag.css`.
+ */
+
+.n4dag {
+  --n4dag-surface: var(--n4-color-surface, #fcfcfb);
+  --n4dag-node-bg: var(--n4-color-surface, #ffffff);
+  --n4dag-border: var(--n4-color-border, #e2e8f0);
+  --n4dag-text: var(--n4-color-text, #0f172a);
+  --n4dag-muted: var(--n4-color-muted, #64748b);
+  --n4dag-grid: color-mix(in srgb, var(--n4dag-muted) 16%, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: var(--n4-font-sans, "Inter", -apple-system, system-ui, sans-serif);
+  color: var(--n4dag-text);
+}
+
+/* ---- toolbar ---- */
+.n4dag__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.n4dag__title {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.n4dag__counts {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 10.5px;
+  color: var(--n4dag-muted);
+}
+.n4dag__spacer {
+  flex: 1 1 auto;
+}
+.n4dag__group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--n4dag-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--n4dag-muted) 5%, transparent);
+}
+.n4dag__depth {
+  font-family: var(--n4-font-mono, monospace);
+  font-size: 10.5px;
+  color: var(--n4dag-muted);
+  padding: 0 4px;
+  min-width: 52px;
+  text-align: center;
+}
+.n4dag__btn {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--n4dag-text);
+  border-radius: 6px;
+  min-width: 26px;
+  height: 26px;
+  padding: 0 7px;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.n4dag__btn:hover {
+  background: color-mix(in srgb, var(--n4-color-primary, #0d9488) 12%, transparent);
+  border-color: color-mix(in srgb, var(--n4-color-primary, #0d9488) 40%, transparent);
+}
+.n4dag__btn--text {
+  font-size: 11px;
+  font-weight: 600;
+  border: 1px solid var(--n4dag-border);
+}
+.n4dag__btn--on {
+  background: color-mix(in srgb, var(--n4-color-primary, #0d9488) 16%, transparent);
+  border-color: color-mix(in srgb, var(--n4-color-primary, #0d9488) 45%, transparent);
+  color: var(--n4-color-primary, #0d9488);
+}
+.n4dag__search-input {
+  appearance: none;
+  height: 26px;
+  width: 170px;
+  padding: 0 9px;
+  font-size: 12px;
+  color: var(--n4dag-text);
+  background: var(--n4dag-node-bg);
+  border: 1px solid var(--n4dag-border);
+  border-radius: 8px;
+}
+.n4dag__search-input:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--n4-color-primary, #0d9488) 55%, transparent);
+  outline-offset: 1px;
+}
+
+/* ---- stage ---- */
+.n4dag__stage {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--n4dag-border);
+  border-radius: 14px;
+  background-color: var(--n4dag-surface);
+  background-image: radial-gradient(var(--n4dag-grid) 1px, transparent 1px);
+  background-size: 22px 22px;
+  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent);
+}
+.n4dag__canvas {
+  display: block;
+  touch-action: none;
+  cursor: grab;
+}
+.n4dag__canvas:active {
+  cursor: grabbing;
+}
+.n4dag__empty {
+  fill: var(--n4dag-muted);
+  font-size: 13px;
+}
+
+/* ---- cluster frames ---- */
+.n4dag__frame-box {
+  fill: color-mix(in srgb, var(--n4dag-muted) 6%, transparent);
+  stroke: color-mix(in srgb, var(--n4dag-muted) 40%, transparent);
+  stroke-width: 1;
+  stroke-dasharray: 4 4;
+}
+.n4dag__frame-header {
+  cursor: pointer;
+}
+.n4dag__frame-tab {
+  fill: color-mix(in srgb, var(--n4dag-muted) 16%, var(--n4dag-surface));
+  stroke: color-mix(in srgb, var(--n4dag-muted) 30%, transparent);
+  stroke-width: 1;
+}
+.n4dag__frame-header:hover .n4dag__frame-tab {
+  fill: color-mix(in srgb, var(--n4-color-primary, #0d9488) 18%, var(--n4dag-surface));
+}
+.n4dag__frame-label {
+  font-size: 10.5px;
+  font-weight: 700;
+  fill: var(--n4dag-muted);
+  letter-spacing: 0.01em;
+}
+
+/* ---- edges ---- */
+.n4dag__edge {
+  color: color-mix(in srgb, var(--n4dag-muted) 55%, transparent);
+  stroke-linecap: round;
+  transition: opacity 120ms ease;
+}
+.n4dag__edge--back {
+  stroke-dasharray: 5 4;
+}
+.n4dag__edge--dim {
+  opacity: 0.12;
+}
+.n4dag__edge--on {
+  opacity: 1;
+}
+.n4dag__arrowhead {
+  fill: color-mix(in srgb, var(--n4dag-muted) 55%, transparent);
+}
+
+/* ---- nodes ---- */
+.n4dag__node {
+  cursor: pointer;
+}
+.n4dag__node--dim {
+  opacity: 0.3;
+  transition: opacity 120ms ease;
+}
+.n4dag__node-lod {
+  cursor: pointer;
+}
+.n4dag__node-stack {
+  opacity: 0.28;
+}
+.n4dag__node-card {
+  transition: stroke-width 100ms ease;
+}
+.n4dag__node--selected .n4dag__node-card {
+  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--n4-color-primary, #0d9488) 30%, transparent));
+}
+.n4dag__node--match .n4dag__node-card {
+  stroke-dasharray: 3 2;
+}
+.n4dag__node-label {
+  font-size: 12px;
+  font-weight: 650;
+  fill: var(--n4dag-text);
+  pointer-events: none;
+}
+.n4dag__node-sub {
+  font-size: 9.5px;
+  fill: var(--n4dag-muted);
+  pointer-events: none;
+}
+.n4dag__node-expand {
+  font-size: 13px;
+  font-weight: 700;
+  fill: var(--n4dag-muted);
+  pointer-events: none;
+}
+.n4dag__node-badge {
+  font-family: var(--n4-font-mono, monospace);
+  font-size: 10px;
+  font-weight: 700;
+  fill: var(--n4dag-text);
+  pointer-events: none;
+}
+.n4dag__node-shape {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 9.5px;
+  font-weight: 600;
+  fill: var(--n4dag-muted);
+  pointer-events: none;
+}
+.n4dag__node-port {
+  stroke: var(--n4dag-node-bg, #ffffff);
+  stroke-width: 1.5;
+}
+
+/* ---- shape labels on edges (data leaving a collapsed cluster) ---- */
+.n4dag__edge-shape-bg {
+  fill: color-mix(in srgb, var(--n4dag-surface) 90%, transparent);
+  stroke: var(--n4dag-border);
+  stroke-width: 1;
+}
+.n4dag__edge-shape-text {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 9px;
+  font-weight: 600;
+  fill: var(--n4dag-muted);
+}
+.n4dag__node-status[data-status="running"] { fill: #d97706; }
+.n4dag__node-status[data-status="done"] { fill: #10b981; }
+.n4dag__node-status[data-status="failed"] { fill: #e11d48; }
+.n4dag__node-status[data-status="skipped"] { fill: #94a3b8; }
+.n4dag__node-status[data-status="idle"] { fill: #cbd5e1; }
+
+/* ---- legend ---- */
+.n4dag__legend {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  max-width: 62%;
+  padding: 7px 9px;
+  border: 1px solid var(--n4dag-border);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--n4dag-surface) 92%, transparent);
+  box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.3);
+}
+.n4dag__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
+  color: var(--n4dag-muted);
+}
+.n4dag__legend-swatch {
+  width: 9px;
+  height: 9px;
+  border-radius: 3px;
+  flex: none;
+}
+
+/* ---- minimap ---- */
+.n4dag__minimap {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  border: 1px solid var(--n4dag-border);
+  border-radius: 8px;
+  box-shadow: 0 6px 20px -8px rgba(15, 23, 42, 0.35);
+  cursor: crosshair;
+}
+.n4dag__minimap-bg {
+  fill: color-mix(in srgb, var(--n4dag-surface) 92%, transparent);
+}
+.n4dag__minimap-view {
+  fill: color-mix(in srgb, var(--n4-color-primary, #0d9488) 14%, transparent);
+  stroke: var(--n4-color-primary, #0d9488);
+  stroke-width: 1;
+}
+
+/* ---- inspector ---- */
+.n4dag__inspector {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 268px;
+  max-height: calc(100% - 20px);
+  overflow: auto;
+  padding: 12px 14px;
+  border: 1px solid var(--n4dag-border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--n4dag-surface) 97%, transparent);
+  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.4);
+}
+.n4dag__inspector-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  appearance: none;
+  border: none;
+  background: transparent;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--n4dag-muted);
+  cursor: pointer;
+}
+.n4dag__inspector-head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 8px;
+  padding-right: 16px;
+}
+.n4dag__inspector-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  flex: none;
+}
+.n4dag__inspector-title {
+  font-size: 12.5px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+/* ---- inspector: dataset-shape in → out ---- */
+.n4dag__io {
+  margin: 0 0 10px;
+  padding: 8px 9px;
+  border: 1px solid var(--n4dag-border);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--n4dag-muted) 5%, transparent);
+  display: grid;
+  gap: 4px;
+}
+.n4dag__io-title {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--n4dag-muted);
+}
+.n4dag__io-row {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.n4dag__io-tag {
+  min-width: 24px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--n4dag-muted);
+}
+.n4dag__io-row--out .n4dag__io-tag,
+.n4dag__io-row--out .n4dag__io-shape {
+  color: var(--n4-color-primary, #0d9488);
+}
+.n4dag__io-shape {
+  font-size: 12px;
+  font-weight: 700;
+}
+.n4dag__io-rep,
+.n4dag__io-sources {
+  font-size: 9.5px;
+  color: var(--n4dag-muted);
+}
+.n4dag__io-note {
+  font-size: 9px;
+  font-weight: 600;
+  padding: 0 5px;
+  border-radius: 999px;
+  color: var(--n4-color-primary, #0d9488);
+  background: color-mix(in srgb, var(--n4-color-primary, #0d9488) 12%, transparent);
+}
+.n4dag__io-delta {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 10px;
+  color: var(--n4dag-text);
+  padding-top: 2px;
+  border-top: 1px dashed var(--n4dag-border);
+}
+.n4dag__inspector-dl {
+  margin: 0;
+  display: grid;
+  gap: 6px;
+}
+.n4dag__inspector-dl > div {
+  display: grid;
+  grid-template-columns: 62px 1fr;
+  gap: 8px;
+  align-items: baseline;
+}
+.n4dag__inspector-dl dt {
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--n4dag-muted);
+}
+.n4dag__inspector-dl dd {
+  margin: 0;
+  font-size: 11.5px;
+  overflow-wrap: anywhere;
+}
+.n4dag__mono {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 11px;
+}
+
+/* ---- standalone dark fallback (when design tokens are not loaded) ---- */
+:root[data-theme="dark"] .n4dag,
+.n4-theme-dark .n4dag {
+  --n4dag-surface: var(--n4-color-surface, #17181a);
+  --n4dag-node-bg: var(--n4-color-surface, #1f2123);
+  --n4dag-border: var(--n4-color-border, rgba(255, 255, 255, 0.14));
+  --n4dag-text: var(--n4-color-text, rgba(255, 255, 255, 0.92));
+  --n4dag-muted: var(--n4-color-muted, rgba(255, 255, 255, 0.6));
+}
+:root[data-theme="dark"] .n4dag__stage,
+.n4-theme-dark .n4dag__stage {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}

package/assets/motion/nirs-spectra.svg

@@ -3,25 +3,42 @@
   <defs>
     <linearGradient id="n4-motion-gradient" x1="0" x2="1" y1="0" y2="0">
       <stop offset="0" stop-color="#0f766e"/>
-      <stop offset=".45" stop-color="#06b6d4"/>
+      <stop offset=".5" stop-color="#06b6d4"/>
       <stop offset="1" stop-color="#10b981"/>
     </linearGradient>
-    <filter id="n4-motion-glow" x="-20%" y="-40%" width="140%" height="180%">
-      <feGaussianBlur stdDeviation="4" result="blur"/>
+    <filter id="n4-motion-glow" x="-10%" y="-40%" width="120%" height="180%">
+      <feGaussianBlur stdDeviation="3.2" result="blur"/>
       <feMerge>
         <feMergeNode in="blur"/>
         <feMergeNode in="SourceGraphic"/>
       </feMerge>
     </filter>
   </defs>
+
   <rect width="720" height="180" rx="18" fill="#faf7f0"/>
-  <path d="M36 98C72 48 102 48 138 98s66 50 102 0 66-50 102 0 66 50 102 0 66-50 102 0 66 50 138-16" fill="none" stroke="url(#n4-motion-gradient)" stroke-width="8" stroke-linecap="round" filter="url(#n4-motion-glow)">
-    <animate attributeName="stroke-dasharray" values="16 24;32 12;16 24" dur="10s" repeatCount="indefinite"/>
+  <g stroke="#0d9488" stroke-opacity=".08" stroke-width="1">
+    <line x1="0" y1="45" x2="720" y2="45"/>
+    <line x1="0" y1="90" x2="720" y2="90"/>
+    <line x1="0" y1="135" x2="720" y2="135"/>
+  </g>
+
+  <!-- faint reference spectrum -->
+  <path d="M24 132 C 96 128 132 96 176 108 S 268 150 330 84 S 452 148 520 112 S 626 58 700 120"
+    fill="none" stroke="#4f46e5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" opacity=".28">
+    <animate attributeName="opacity" values=".18;.4;.18" dur="9s" repeatCount="indefinite"/>
   </path>
-  <path d="M36 124C84 104 126 104 174 124s90 20 138 0 90-20 138 0 96 24 234-28" fill="none" stroke="#4f46e5" stroke-width="4" stroke-linecap="round" opacity=".62">
-    <animate attributeName="opacity" values=".38;.78;.38" dur="8s" repeatCount="indefinite"/>
+
+  <!-- primary absorbance spectrum -->
+  <path d="M24 138 C 92 134 128 58 176 92 S 262 152 324 66 S 438 150 508 104 S 612 40 700 128"
+    fill="none" stroke="url(#n4-motion-gradient)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"
+    filter="url(#n4-motion-glow)" stroke-dasharray="26 20">
+    <animate attributeName="stroke-dashoffset" values="0;-92" dur="8s" repeatCount="indefinite"/>
   </path>
-  <circle cx="602" cy="82" r="7" fill="#10b981">
-    <animate attributeName="cx" values="602;646;602" dur="7s" repeatCount="indefinite"/>
+
+  <!-- glowing peak dot -->
+  <circle r="6" fill="#10b981" filter="url(#n4-motion-glow)">
+    <animate attributeName="cx" values="176;324;508;700;508;324;176" dur="12s" repeatCount="indefinite"/>
+    <animate attributeName="cy" values="92;66;104;128;104;66;92" dur="12s" repeatCount="indefinite"/>
+    <animate attributeName="r" values="5;7;5" dur="3s" repeatCount="indefinite"/>
   </circle>
 </svg>

package/assets/viz.css

@@ -0,0 +1,152 @@
+/* nirs4all-ui — default styles for the reusable `viz` scientific charts.
+ *
+ * The chart components set data colors (bars, dots, cells, lines, node cards)
+ * inline as SVG attributes; this stylesheet only themes the elements that are
+ * left to CSS on purpose: axes, gridlines, connectors, and text. It reads the
+ * shared nirs4all design tokens when present (load `nirs4all-default.css` or
+ * `theme.css`) and degrades to hardcoded fallbacks otherwise.
+ *
+ * Consumed as `nirs4all-ui/assets/viz.css`.
+ */
+
+.n4viz {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  font-family: var(--n4-font-sans, "Inter", -apple-system, system-ui, sans-serif);
+}
+
+/* structural strokes (never set inline by the components) */
+.n4viz-grid {
+  stroke: var(--n4-color-border, #e2e8f0);
+  stroke-width: 1;
+}
+
+.n4viz-axis {
+  stroke: var(--n4-color-muted, #94a3b8);
+  stroke-opacity: 0.55;
+  stroke-width: 1;
+}
+
+.n4viz-edge {
+  stroke: var(--n4-color-border, #cbd5e1);
+  stroke-width: 1.5;
+}
+
+/* text roles */
+.n4viz-tick {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 10px;
+  fill: var(--n4-color-muted, #64748b);
+}
+
+.n4viz-axis-label {
+  font-size: 11px;
+  font-weight: 600;
+  fill: var(--n4-color-muted, #64748b);
+}
+
+.n4viz-badge {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 11px;
+  font-weight: 700;
+  fill: var(--n4-color-text, #0f172a);
+}
+
+.n4viz-cell-value {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 11px;
+  fill: var(--n4-color-text, #0f172a);
+}
+
+.n4viz-cell-value-strong {
+  fill: #ffffff;
+}
+
+.n4viz-legend-label {
+  font-size: 10px;
+  fill: var(--n4-color-muted, #64748b);
+}
+
+/* score-summary tiles */
+.n4viz-stat-label {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  fill: var(--n4-color-muted, #64748b);
+}
+
+.n4viz-stat-value {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 20px;
+  font-weight: 700;
+  fill: var(--n4-color-text, #0f172a);
+}
+
+.n4viz-stat-delta {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+/* pipeline node text */
+.n4viz-node-label {
+  font-size: 13px;
+  font-weight: 650;
+  fill: var(--n4-color-text, #0f172a);
+}
+
+.n4viz-node-detail {
+  font-size: 10px;
+  fill: var(--n4-color-muted, #64748b);
+}
+
+.n4viz-node-metric-value {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 10px;
+  font-weight: 700;
+  fill: var(--n4-color-text, #0f172a);
+}
+
+.n4viz-line-mean {
+  filter: drop-shadow(0 1px 2px rgba(13, 148, 136, 0.35));
+}
+
+/* conformal interval strip */
+.n4viz-conf-title {
+  font-size: 12.5px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  fill: var(--n4-color-text, #0f172a);
+}
+.n4viz-conf-readout {
+  font-family: var(--n4-font-mono, "JetBrains Mono", monospace);
+  font-size: 10.5px;
+  font-weight: 700;
+  fill: var(--n4-color-muted, #64748b);
+}
+.n4viz-conf-empty {
+  font-size: 12px;
+  fill: var(--n4-color-muted, #94a3b8);
+}
+.n4viz-conf-band {
+  transition: opacity 120ms ease;
+}
+/* outline the guarantee (target) band so it reads out of the nested stack */
+.n4viz-conf-band--target {
+  stroke: color-mix(in srgb, var(--n4-color-text, #0f172a) 26%, transparent);
+  stroke-width: 1;
+}
+.n4viz-conf-point {
+  stroke-linecap: round;
+}
+
+/* standalone dark fallback (when design tokens are not loaded) */
+:root[data-theme="dark"] .n4viz,
+.n4-theme-dark .n4viz {
+  --n4-color-border: rgba(255, 255, 255, 0.14);
+  --n4-color-muted: rgba(255, 255, 255, 0.62);
+  --n4-color-text: rgba(255, 255, 255, 0.92);
+}