@validation-os/dashboard 0.16.0 → 0.16.2

package/dist/styles.css

@@ -3404,15 +3404,182 @@ button.vos-verdict-title {
 .vos-pipe-tag-needs { color: var(--vos-warn); border-color: var(--vos-warn); }
 .vos-detail-tag-qt { border-color: var(--vos-accent); color: var(--vos-accent); }
 
-/* Stage-keyed Risk threshold indicator (assumption detail) */
-.vos-threshold-indicator { padding: 10px 14px; }
-.vos-threshold-label { font-size: 9px; color: var(--vos-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
-.vos-threshold-row { display: flex; gap: 12px; align-items: center; font-size: 12px; }
-.vos-threshold-bar { color: var(--vos-muted); }
-.vos-threshold-status { font-weight: 600; }
-.vos-threshold-cleared { color: var(--vos-good); }
-.vos-threshold-needs { color: var(--vos-warn); }
-.vos-threshold-hint { font-size: 11px; color: var(--vos-muted); margin-top: 4px; }
+/* Stage-keyed evidence bar (assumption detail, DEV-5890) — a single
+   Confidence bar that fills UP toward the stage's floor marker. The target
+   zone above the marker is tinted to show "this is where you need to be."
+   Maturity's marker is at 60% (hard to reach); Discovery's is at 10% (easy). */
+.vos-threshold-bar-card {
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.vos-threshold-bar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.vos-threshold-bar-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vos-text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vos-threshold-bar-stage-tag {
+  font-size: 9px;
+  font-weight: 500;
+  color: var(--vos-muted);
+  padding: 1px 6px;
+  border: 1px solid var(--vos-border);
+  border-radius: 4px;
+  text-transform: capitalize;
+}
+
+.vos-threshold-bar-status {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.vos-threshold-bar-good { color: var(--vos-good); background: var(--vos-good-weak); }
+.vos-threshold-bar-warn { color: var(--vos-warn); background: var(--vos-warn-weak); }
+.vos-threshold-bar-crit { color: var(--vos-crit); background: var(--vos-crit-weak); }
+
+/* Bar section */
+.vos-threshold-bar-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.vos-threshold-bar-section-label {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 10px;
+  color: var(--vos-muted);
+}
+
+.vos-threshold-bar-section-val {
+  font-weight: 700;
+  color: var(--vos-text);
+  font-size: 13px;
+}
+
+.vos-threshold-bar-section-target {
+  font-size: 9px;
+  color: var(--vos-faint);
+  margin-left: auto;
+}
+
+/* The bar track — taller for prominence */
+.vos-threshold-bar-track {
+  position: relative;
+  height: 24px;
+  border-radius: 6px;
+  background: var(--vos-surface-2);
+  overflow: visible;
+  border: 1px solid var(--vos-border);
+}
+
+.vos-threshold-bar-track-tall {
+  height: 28px;
+}
+
+/* The target zone — tinted area above the floor marker (where you need to be) */
+.vos-threshold-bar-target-zone {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 4px,
+    rgba(0, 0, 0, 0.03) 4px,
+    rgba(0, 0, 0, 0.03) 8px
+  );
+  border-radius: 0 5px 5px 0;
+  pointer-events: none;
+}
+
+/* The fill */
+.vos-threshold-bar-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 5px 0 0 5px;
+  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0.8;
+  z-index: 1;
+}
+
+.vos-threshold-bar-fill.vos-fill-good { background: var(--vos-good); }
+.vos-threshold-bar-fill.vos-fill-warn { background: var(--vos-warn); }
+.vos-threshold-bar-fill.vos-fill-crit { background: var(--vos-crit); }
+
+/* The floor marker — a vertical dashed line with a label above */
+.vos-threshold-bar-marker {
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  width: 0;
+  border-left: 2px dashed var(--vos-border-strong);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.vos-threshold-bar-marker-label {
+  position: absolute;
+  top: -14px;
+  left: 4px;
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--vos-muted);
+  white-space: nowrap;
+}
+
+/* Scale under the bar */
+.vos-threshold-bar-scale {
+  display: flex;
+  justify-content: space-between;
+  font-size: 8px;
+  color: var(--vos-faint);
+  padding: 0 1px;
+}
+
+.vos-threshold-bar-scale-mid {
+  color: var(--vos-faint);
+}
+
+/* Compact risk summary */
+.vos-threshold-bar-risk-summary {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.vos-threshold-bar-risk-val {
+  font-weight: 700;
+}
+
+.vos-threshold-bar-risk-cap {
+  color: var(--vos-muted);
+  font-size: 10px;
+}
+
+.vos-threshold-bar-hint {
+  font-size: 11px;
+  color: var(--vos-muted);
+}
 
 /* Probative vs flagged-as-non-evidence grouping (assumption detail evidence list) */
 .vos-evidence-group { margin-top: 8px; }

package/package.json

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