@validation-os/dashboard 0.15.3 → 0.15.4

package/dist/styles.css

@@ -2743,27 +2743,28 @@ button.vos-verdict-title {
   align-self: center;
 }
 .vos-stage-grid-card {
-  padding: 16px 18px;
+  padding: 22px 24px;
 }
 .vos-stage-grid-scroll {
   overflow-x: auto;
+  padding: 4px;
+  margin: -4px;
 }
 .vos-stage-grid {
   width: 100%;
   border-collapse: separate;
-  border-spacing: 0;
+  border-spacing: 6px;
   font-size: 13px;
 }
 .vos-stage-grid th,
 .vos-stage-grid td {
-  border-bottom: 1px solid var(--vos-border);
-  border-right: 1px solid var(--vos-border);
+  border: none;
   padding: 0;
   vertical-align: middle;
 }
 .vos-stage-grid th:last-child,
 .vos-stage-grid td:last-child {
-  border-right: none;
+  border: none;
 }
 .vos-stage-grid-corner {
   text-align: left;
@@ -2809,31 +2810,28 @@ button.vos-verdict-title {
 }
 .vos-stage-grid-cell {
   text-align: center;
-  background: var(--vos-surface);
-  /* The heatmap fill — opacity set per-cell via --vos-cell-alpha. */
-  background: color-mix(
-    in srgb,
-    var(--vos-accent) calc(var(--vos-cell-alpha, 0) * 100%),
-    var(--vos-surface)
-  );
+  background: transparent;
 }
-.vos-stage-grid-cell-empty {
+.vos-stage-grid-cell-empty .vos-stage-grid-btn {
   background: var(--vos-surface-2);
+  border-style: dashed;
+  border-color: var(--vos-border);
 }
 .vos-stage-grid-btn {
   width: 100%;
   height: 100%;
   min-height: 56px;
   background: transparent;
-  border: none;
+  border: 1px solid var(--vos-border);
   padding: 10px 12px;
   cursor: pointer;
   font: inherit;
   color: var(--vos-text);
-  border-radius: 0;
+  border-radius: 8px;
 }
 .vos-stage-grid-btn:hover {
   background: color-mix(in srgb, var(--vos-accent) 14%, transparent);
+  border-color: var(--vos-accent);
 }
 .vos-stage-grid-btn:focus-visible {
   outline: 2px solid var(--vos-accent);
@@ -2871,16 +2869,16 @@ button.vos-verdict-title {
 /* ── DEV-5879 redesign: unified nav, pipeline board, evidence-first details ── */
 
 /* 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 { display: inline-flex; gap: 0; border: 1px solid var(--vos-border); border-radius: var(--vos-radius); overflow: hidden; align-self: center; }
 .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: filter 0.15s; }
-.vos-stage-grid-btn:hover:not(:disabled) { filter: brightness(1.1); }
+.vos-stage-grid-cell { padding: 0; }
+.vos-stage-grid-btn { width: 100%; min-height: 56px; border: 1px solid var(--vos-border); border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--vos-text); transition: filter 0.15s, border-color 0.15s; }
+.vos-stage-grid-btn:hover:not(:disabled) { filter: brightness(1.05); border-color: var(--vos-accent); }
 .vos-stage-grid-btn:disabled { cursor: default; }
 .vos-heat-0 { background: var(--vos-surface); opacity: 0.4; color: var(--vos-muted); }
 .vos-heat-1 { background: color-mix(in srgb, var(--vos-accent) 18%, var(--vos-surface)); }
@@ -3243,3 +3241,39 @@ button.vos-verdict-title {
 .vos-next-moves-item-title { font-size: 12px; font-weight: 500; margin-bottom: 4px; line-height: 1.4; }
 .vos-next-moves-item-hint { font-size: 11px; color: var(--vos-muted); line-height: 1.4; }
 .vos-next-moves-rec { margin-bottom: 8px; }
+
+/* ── DEV-5879: grid text breathing room + next-move box consistency + header cleanup ── */
+
+/* Grid: more spacing between cells, taller cells, bigger text */
+.vos-stage-grid { border-spacing: 8px !important; }
+.vos-stage-grid-btn { min-height: 64px !important; font-size: 18px !important; }
+.vos-stage-grid-col { min-width: 140px !important; padding: 12px 14px !important; }
+.vos-stage-grid-rowhead { padding: 10px 14px !important; }
+.vos-stage-grid-stagename { font-size: 14px !important; }
+.vos-stage-grid-stagegloss { font-size: 11px !important; line-height: 1.4 !important; }
+
+/* Next-moves: equal-width columns, equal-height boxes, adaptable */
+.vos-next-moves-cols {
+  grid-template-columns: 1fr 1fr !important;
+  align-items: stretch !important;
+}
+.vos-next-moves-col {
+  display: flex !important;
+  flex-direction: column !important;
+  padding: 16px !important;
+}
+.vos-next-moves-col-label { margin-bottom: 14px !important; }
+/* Equal-height items within each column */
+.vos-next-moves-item, .vos-next-moves-rec {
+  flex: 1 1 auto;
+  min-height: 80px;
+}
+/* The proposed experiment summary should match the needs-framing item height */
+.vos-next-moves-rec > summary {
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+}
+
+/* Topbar: hide the backend + agent indicators (clean header) */
+.vos-backend, .vos-hint:has(.vos-live-dot) { display: none !important; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@validation-os/dashboard",
-  "version": "0.15.3",
+  "version": "0.15.4",
   "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.3"
+    "@validation-os/core": "0.15.4"
   },
   "peerDependencies": {
     "react": ">=18",