@validation-os/dashboard 0.15.1 → 0.15.2

package/dist/styles.css

@@ -2872,13 +2872,14 @@ button.vos-verdict-title {
 
 /* Segmented toggle (Grid / View all) */
 .vos-seg { display: inline-flex; gap: 0; border: 1px solid var(--vos-border); border-radius: var(--vos-radius); overflow: hidden; }
-.vos-seg-btn { padding: 6px 14px; background: transparent; border: none; color: var(--vos-muted); font: inherit; cursor: pointer; border-right: 1px solid var(--vos-border); }
+.vos-seg-btn { padding: 6px 14px; background: transparent; border: none; color: var(--vos-muted); font: inherit; cursor: pointer; border-right: 1px solid var(--vos-border); transition: background 0.15s, color 0.15s; }
 .vos-seg-btn:last-child { border-right: none; }
+.vos-seg-btn:hover { background: var(--vos-surface-2); }
 .vos-seg-btn.is-active { background: var(--vos-accent-weak); color: var(--vos-accent-text); }
 
 /* Stage grid cell button (clean count, 1 for single) */
 .vos-stage-grid-cell { padding: 2px; }
-.vos-stage-grid-btn { width: 100%; min-height: 56px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--vos-text); transition: background 0.15s; }
+.vos-stage-grid-btn { width: 100%; min-height: 56px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--vos-text); transition: filter 0.15s; }
 .vos-stage-grid-btn:hover:not(:disabled) { filter: brightness(1.1); }
 .vos-stage-grid-btn:disabled { cursor: default; }
 .vos-heat-0 { background: var(--vos-surface); opacity: 0.4; color: var(--vos-muted); }
@@ -2887,22 +2888,23 @@ button.vos-verdict-title {
 .vos-heat-3 { background: color-mix(in srgb, var(--vos-accent) 48%, var(--vos-surface)); }
 .vos-heat-4 { background: color-mix(in srgb, var(--vos-accent) 65%, var(--vos-surface)); }
 
-/* Pipeline board hero (board variant — compact) */
+/* Pipeline board hero (board variant — compact). Standardized 16px section gap. */
 .vos-pipe-hero-board { padding: 20px 24px; margin-bottom: 16px; }
 
-/* 2-segment meter track (Framed + Known — drops Planned/Tested) */
-.vos-pipe-row-2seg { grid-template-columns: 4px 1fr 180px 90px !important; }
-.vos-pipe-prog-2seg { padding: 12px 0; }
-.vos-meter2 { display: flex; flex-direction: column; gap: 2px; }
+/* 2-segment meter track (Framed + Known — drops Planned/Tested).
+   Meter column is flexible (min 140px) so the row breathes on narrow screens. */
+.vos-pipe-row-2seg { grid-template-columns: 4px 1fr minmax(140px, 180px) 90px !important; }
+.vos-pipe-prog-2seg { padding: 14px 0; }
+.vos-meter2 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .vos-meter2-track { height: 16px; border-radius: 4px; background: var(--vos-surface-2); overflow: hidden; display: flex; }
-.vos-meter2-seg { flex: 1; position: relative; border-right: 1px solid var(--vos-border); overflow: hidden; }
+.vos-meter2-seg { flex: 1; position: relative; border-right: 1px solid var(--vos-border); overflow: hidden; min-width: 0; }
 .vos-meter2-seg:last-child { border-right: none; }
 .vos-meter2-fill-accent { position: absolute; inset: 0; background: var(--vos-accent); opacity: 0.5; }
 .vos-meter2-fill-good { position: absolute; inset: 0; background: var(--vos-good); opacity: 0.6; }
 .vos-meter2-fill-warn { position: absolute; inset: 0; background: var(--vos-warn); opacity: 0.6; }
 .vos-meter2-fill-crit { position: absolute; inset: 0; background: var(--vos-crit); opacity: 0.6; }
 .vos-meter2-caps { display: flex; }
-.vos-meter2-cap { flex: 1; font-size: 8px; text-align: center; color: var(--vos-muted); }
+.vos-meter2-cap { flex: 1; font-size: 8px; text-align: center; color: var(--vos-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* Pipeline id + statement (compact row) */
 .vos-pipe-id { font-size: 9px; color: var(--vos-muted); display: block; }
@@ -2912,8 +2914,8 @@ button.vos-verdict-title {
 .vos-btn-accent { background: var(--vos-accent); color: var(--vos-bg); border: none; font-weight: 600; }
 .vos-btn-accent:hover { filter: brightness(1.1); }
 
-/* Recommended experiments section */
-.vos-pipe-recs { margin-top: 20px; padding: 16px; }
+/* Recommended experiments section. Standardized padding 14px, gap 16px. */
+.vos-pipe-recs { margin-top: 16px; padding: 14px; }
 .vos-pipe-recs-head { font-size: 11px; color: var(--vos-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 12px; }
 .vos-pipe-recs-list { display: flex; flex-direction: column; gap: 8px; }
 .vos-pipe-rec { padding: 14px; border: 1px solid var(--vos-border); border-radius: 10px; background: var(--vos-surface); }
@@ -2927,51 +2929,54 @@ button.vos-verdict-title {
 .vos-pipe-rec-bar { font-size: 10px; color: var(--vos-muted); padding: 4px 8px; background: var(--vos-surface-2); border-radius: 4px; border-left: 3px solid var(--vos-good); }
 .vos-pipe-rec-bar strong { color: var(--vos-good); }
 
-/* Breadcrumb */
-.vos-crumb { display: flex; gap: 6px; font-size: 11px; margin-bottom: 12px; color: var(--vos-muted); }
+/* Breadcrumb. margin-bottom 16px to align with section rhythm. */
+.vos-crumb { display: flex; gap: 6px; font-size: 11px; margin-bottom: 16px; color: var(--vos-muted); flex-wrap: wrap; }
 .vos-crumb-item { display: flex; gap: 6px; align-items: center; }
 .vos-crumb-sep { color: var(--vos-border); }
 .vos-crumb-link { background: none; border: none; cursor: pointer; color: var(--vos-muted); padding: 0; font: inherit; }
 .vos-crumb-link:hover { color: var(--vos-accent); }
 .vos-crumb-current { color: var(--vos-text); font-weight: 600; }
 
-/* List surfaces (experiments / readings) */
-.vos-list-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
-.vos-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--vos-surface-2); border: 1px solid var(--vos-border); border-radius: 6px; cursor: pointer; text-align: left; width: 100%; color: var(--vos-text); font: inherit; }
+/* List surfaces (experiments / readings). Standardized 14px padding. */
+.vos-list-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
+.vos-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--vos-surface-2); border: 1px solid var(--vos-border); border-radius: 6px; cursor: pointer; text-align: left; width: 100%; color: var(--vos-text); font: inherit; transition: border-color 0.15s; }
 .vos-list-row:hover { border-color: var(--vos-accent); }
 .vos-list-row-date { font-size: 9px; color: var(--vos-muted); min-width: 80px; }
 .vos-list-row-title { flex: 1; font-size: 12px; font-weight: 500; }
 .vos-list-row-meta { font-size: 10px; color: var(--vos-muted); }
 
 /* Detail head (id + tags) */
-.vos-detail-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
+.vos-detail-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; flex-wrap: wrap; }
 .vos-detail-id { font-size: 11px; color: var(--vos-muted); }
 .vos-detail-tag { font-size: 9px; color: var(--vos-muted); padding: 1px 6px; border: 1px solid var(--vos-border); border-radius: 4px; }
 .vos-detail-title { font-size: 16px; color: var(--vos-text); font-weight: 600; margin-bottom: 16px; }
 
-/* Next-move panel (accent-bordered, prominent) */
+/* Next-move panel (accent-bordered, prominent). Aligned with score cards below:
+   matching padding 14px and margin-bottom 16px keeps the left edge consistent. */
 .vos-next-move { padding: 14px; margin-bottom: 16px; border-left: 3px solid var(--vos-accent); }
 .vos-next-move-label { font-size: 10px; color: var(--vos-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
 .vos-next-move-text { font-size: 14px; color: var(--vos-accent-text); font-weight: 500; }
 
-/* Score cards (4 in a row) */
+/* Score cards (4 in a row). Same padding (14px) + left edge as .vos-next-move
+   via shared margin/padding; values vertically centered with flex column. */
 .vos-score-cards { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
-.vos-score-card { flex: 1; min-width: 100px; padding: 12px; text-align: center; background: var(--vos-surface); border: 1px solid var(--vos-border); border-radius: 10px; }
-.vos-score-value { font-size: 22px; font-weight: 700; color: var(--vos-text); }
+.vos-score-card { flex: 1; min-width: 100px; padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: var(--vos-surface); border: 1px solid var(--vos-border); border-radius: 10px; }
+.vos-score-value { font-size: 22px; font-weight: 700; color: var(--vos-text); line-height: 1; }
 .vos-score-label { font-size: 10px; color: var(--vos-muted); }
 
-/* Detail sections */
+/* Detail sections. Standardized 14px padding, 16px section gap. */
 .vos-detail-section { padding: 14px; margin-bottom: 16px; }
 .vos-detail-section-label { font-size: 11px; color: var(--vos-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
 
-/* Evidence composition (per-rung bars) */
-.vos-comp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
-.vos-comp-rung { width: 90px; font-size: 10px; color: var(--vos-text); }
+/* Evidence composition (per-rung bars). Rung label shrinks on narrow screens;
+   value + count fixed so columns align; row wraps gracefully under ~360px. */
+.vos-comp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: nowrap; }
+.vos-comp-rung { width: 90px; flex-shrink: 0; font-size: 10px; color: var(--vos-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .vos-comp-rung.is-empty { color: var(--vos-muted); }
-.vos-comp-bar { flex: 1; height: 10px; background: var(--vos-surface-2); border-radius: 5px; overflow: hidden; }
+.vos-comp-bar { flex: 1 1 80px; min-width: 60px; height: 10px; background: var(--vos-surface-2); border-radius: 5px; overflow: hidden; }
 .vos-comp-fill { display: block; height: 100%; background: var(--vos-accent); border-radius: 5px; }
-.vos-comp-val { width: 60px; text-align: right; font-size: 10px; color: var(--vos-muted); }
-.vos-comp-count { width: 40px; font-size: 9px; color: var(--vos-muted); }
+.vos-comp-val { width: 70px; flex-shrink: 0; text-align: right; font-size: 10px; color: var(--vos-muted); }
+.vos-comp-count { width: 40px; flex-shrink: 0; font-size: 9px; color: var(--vos-muted); }
 
 /* Relations */
 .vos-rel-group { margin-bottom: 10px; }
@@ -2988,8 +2993,8 @@ button.vos-verdict-title {
 .vos-rel-title { flex: 1; }
 .vos-rel-tag { font-size: 8px; color: var(--vos-muted); padding: 1px 4px; border: 1px solid var(--vos-border); border-radius: 3px; }
 
-/* Linked rows (experiments + readings on assumption detail) */
-.vos-linked-row { display: flex; gap: 8px; align-items: center; text-align: left; background: var(--vos-surface-2); border: 1px solid var(--vos-border); border-radius: 6px; padding: 10px; cursor: pointer; width: 100%; margin-bottom: 6px; font: inherit; color: var(--vos-text); }
+/* Linked rows (experiments + readings on assumption detail). 14px padding. */
+.vos-linked-row { display: flex; gap: 8px; align-items: center; text-align: left; background: var(--vos-surface-2); border: 1px solid var(--vos-border); border-radius: 6px; padding: 14px; cursor: pointer; width: 100%; margin-bottom: 6px; font: inherit; color: var(--vos-text); transition: border-color 0.15s; }
 .vos-linked-row:hover { border-color: var(--vos-accent); }
 .vos-linked-gauge { font-size: 16px; font-weight: 700; min-width: 32px; text-align: center; }
 .vos-linked-title { flex: 1; font-size: 12px; }
@@ -2997,9 +3002,9 @@ button.vos-verdict-title {
 .vos-linked-bar strong { color: var(--vos-good); }
 
 /* Reading head + excerpt */
-.vos-reading-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
+.vos-reading-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
 .vos-reading-date { font-size: 9px; color: var(--vos-muted); }
-.vos-reading-title { flex: 1; font-size: 12px; font-weight: 500; }
+.vos-reading-title { flex: 1; font-size: 12px; font-weight: 500; min-width: 0; }
 .vos-reading-source { font-size: 9px; color: var(--vos-muted); }
 .vos-reading-excerpt { padding: 4px 8px; border-left: 3px solid var(--vos-border); background: var(--vos-surface); border-radius: 0 4px 4px 0; font-style: italic; font-size: 11px; color: var(--vos-text); margin: 4px 0; }
 .vos-verdict-border-good { border-left-color: var(--vos-good); }
@@ -3008,12 +3013,12 @@ button.vos-verdict-title {
 .vos-rung-tag { font-size: 8px; color: var(--vos-muted); padding: 1px 5px; background: var(--vos-surface-2); border-radius: 3px; }
 .vos-link { color: var(--vos-accent-text); cursor: pointer; background: none; border: none; font: inherit; padding: 0; }
 
-/* Experiment detail: confidence gauge + coverage */
-.vos-exp-head { display: flex; gap: 16px; margin-bottom: 16px; padding: 12px; }
+/* Experiment detail: confidence gauge + coverage. 14px padding. */
+.vos-exp-head { display: flex; gap: 16px; margin-bottom: 16px; padding: 14px; }
 .vos-exp-gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 100px; }
 .vos-gauge-num { font-size: 32px; font-weight: 700; color: var(--vos-text); }
 .vos-gauge-label { font-size: 9px; color: var(--vos-muted); text-align: center; }
-.vos-exp-coverage { flex: 1; }
+.vos-exp-coverage { flex: 1; min-width: 0; }
 .vos-coverage-label { font-size: 11px; color: var(--vos-muted); margin-bottom: 6px; }
 .vos-coverage-bar { height: 10px; background: var(--vos-surface-2); border-radius: 5px; overflow: hidden; display: flex; }
 .vos-coverage-good { background: var(--vos-good); height: 100%; }
@@ -3027,53 +3032,56 @@ button.vos-verdict-title {
 .vos-dot-warn { background: var(--vos-warn); }
 .vos-dot-empty { background: var(--vos-surface-2); border: 1px solid var(--vos-border); }
 
-/* Reading card (in experiment detail) */
-.vos-reading-card { padding: 12px; margin-bottom: 8px; background: var(--vos-surface-2); border-radius: 8px; border: 1px solid var(--vos-border); }
+/* Reading card (in experiment detail). 14px padding, 8px gap. */
+.vos-reading-card { padding: 14px; margin-bottom: 8px; background: var(--vos-surface-2); border-radius: 8px; border: 1px solid var(--vos-border); }
 .vos-reading-quotes { margin: 4px 0; display: flex; flex-direction: column; gap: 4px; }
 .vos-reading-quote { padding: 4px 8px; border-left: 3px solid var(--vos-border); background: var(--vos-surface); border-radius: 0 4px 4px 0; font-style: italic; font-size: 11px; color: var(--vos-text); }
 .vos-reading-quote-id { font-style: normal; font-size: 9px; color: var(--vos-muted); }
 .vos-reading-beliefs-label { font-size: 10px; color: var(--vos-muted); margin-bottom: 4px; }
 
-/* Belief card (per-belief verdict) */
-.vos-belief-card { padding: 8px; margin-bottom: 4px; background: var(--vos-surface); border-radius: 6px; border: 1px solid var(--vos-border); }
-.vos-belief-head { display: flex; gap: 6px; align-items: baseline; margin-bottom: 4px; }
+/* Belief card (per-belief verdict). 14px padding, 8px gap; head wraps cleanly. */
+.vos-belief-card { padding: 14px; margin-bottom: 8px; background: var(--vos-surface); border-radius: 6px; border: 1px solid var(--vos-border); }
+.vos-belief-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
 .vos-belief-id { background: none; border: none; cursor: pointer; font-size: 10px; color: var(--vos-accent-text); padding: 0; font-family: var(--vos-mono); }
 .vos-belief-id:hover { text-decoration: underline; }
-.vos-belief-title { flex: 1; font-size: 11px; color: var(--vos-text); }
+.vos-belief-title { flex: 1 1 200px; font-size: 11px; color: var(--vos-text); min-width: 0; }
 .vos-belief-bar { font-size: 9px; color: var(--vos-muted); margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--vos-border); }
 .vos-belief-bar-label { font-size: 8px; color: var(--vos-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }
 .vos-belief-bar strong { color: var(--vos-good); }
 .vos-belief-why { font-size: 10px; color: var(--vos-muted); margin-top: 4px; }
 .vos-belief-excerpt { padding: 6px 10px; border-left: 3px solid var(--vos-border); background: var(--vos-surface); border-radius: 0 4px 4px 0; margin: 4px 0 6px; font-style: italic; font-size: 12px; color: var(--vos-text); }
 
-/* Unstarted bars section */
+/* Unstarted bars section. 14px padding, 8px gap. */
 .vos-unstarted { border-style: dashed; }
-.vos-unstarted-bar { padding: 8px; margin-bottom: 4px; background: var(--vos-surface-2); border-radius: 6px; border: 1px dashed var(--vos-border); }
+.vos-unstarted-bar { padding: 14px; margin-bottom: 8px; background: var(--vos-surface-2); border-radius: 6px; border: 1px dashed var(--vos-border); }
 
 /* ── DEV-5879 fixes: donut gauge, experiment rows, collapsible readings ── */
 
-/* Confidence donut gauge (SVG ring) */
-.vos-donut { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
-.vos-donut-num { position: absolute; font-weight: 700; color: var(--vos-text); }
+/* Confidence donut gauge (SVG ring). Number centered via grid overlay. */
+.vos-donut { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
+.vos-donut-num { grid-area: 1 / 1; font-weight: 700; color: var(--vos-text); text-align: center; line-height: 1; }
 
-/* Experiment list — bigger rows with donut gauge */
-.vos-exp-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
+/* Experiment list — bigger rows with donut gauge. 14px padding, more breathing room. */
+.vos-exp-list { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
 .vos-exp-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--vos-surface-2); border: 1px solid var(--vos-border); border-radius: 10px; cursor: pointer; text-align: left; width: 100%; color: var(--vos-text); font: inherit; transition: border-color 0.15s; }
 .vos-exp-row:hover { border-color: var(--vos-accent); }
 .vos-exp-row-body { flex: 1; min-width: 0; }
-.vos-exp-row-title { font-size: 14px; font-weight: 500; color: var(--vos-text); margin-bottom: 4px; }
+.vos-exp-row-title { font-size: 14px; font-weight: 500; color: var(--vos-text); margin-bottom: 6px; }
 .vos-exp-row-meta { font-size: 11px; color: var(--vos-muted); }
 
-/* Collapsible reading card (progressive disclosure) */
-.vos-reading-collapse { border: 1px solid var(--vos-border); border-radius: 8px; margin-bottom: 8px; background: var(--vos-surface-2); overflow: hidden; }
-.vos-reading-collapse > summary { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; }
+/* Collapsible reading card (progressive disclosure).
+   Summary bar: 14px padding, hover state, balanced spacing. */
+.vos-reading-collapse { border: 1px solid var(--vos-border); border-radius: 8px; margin-bottom: 8px; background: var(--vos-surface-2); overflow: hidden; transition: border-color 0.15s; }
+.vos-reading-collapse:hover { border-color: var(--vos-border-strong); }
+.vos-reading-collapse[open] { border-color: var(--vos-border-strong); }
+.vos-reading-collapse > summary { display: flex; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; user-select: none; transition: background 0.15s; }
 .vos-reading-collapse > summary::-webkit-details-marker { display: none; }
-.vos-reading-collapse > summary::before { content: "▸"; color: var(--vos-muted); font-size: 10px; transition: transform 0.15s; }
+.vos-reading-collapse > summary::before { content: "▸"; color: var(--vos-muted); font-size: 10px; transition: transform 0.15s; flex-shrink: 0; }
 .vos-reading-collapse[open] > summary::before { transform: rotate(90deg); }
 .vos-reading-collapse > summary:hover { background: var(--vos-surface); }
-.vos-reading-card-summary { display: flex; gap: 12px; align-items: baseline; width: 100%; }
-.vos-reading-beliefs-count { font-size: 10px; color: var(--vos-muted); margin-left: auto; }
-.vos-reading-card-body { padding: 0 14px 12px; }
+.vos-reading-card-summary { display: flex; gap: 12px; align-items: center; width: 100%; min-width: 0; }
+.vos-reading-beliefs-count { font-size: 10px; color: var(--vos-muted); margin-left: auto; flex-shrink: 0; }
+.vos-reading-card-body { padding: 0 16px 14px; }
 
 /* Evidence composition — fix the value display (signed contributions) */
 .vos-comp-val { width: 70px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@validation-os/dashboard",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "React dashboard components + hooks for validation-os, consuming the DataProvider seam.",
   "license": "MIT",
   "type": "module",
@@ -22,7 +22,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@validation-os/core": "0.15.1"
+    "@validation-os/core": "0.15.2"
   },
   "peerDependencies": {
     "react": ">=18",