@adoptai/genui-components 0.1.59 → 0.1.60

package/dist/composites/decision-card/resolver.js

@@ -283,8 +283,15 @@ function useContainerWidth(ref) {
 var KEYFRAMES = `
 @keyframes dcRise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
 .dc-rise{animation:dcRise 0.28s cubic-bezier(0.22,1,0.36,1) both}
+.dc-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:9999px;outline:none;cursor:pointer;background:transparent}
+.dc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:white;border:2px solid var(--dc-thumb,#ff5000);box-shadow:0 1px 3px rgba(0,0,0,0.18);cursor:grab;transition:transform 0.12s}
+.dc-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
+.dc-range:active::-webkit-slider-thumb{cursor:grabbing}
+.dc-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:white;border:2px solid var(--dc-thumb,#ff5000);box-shadow:0 1px 3px rgba(0,0,0,0.18);cursor:grab}
+.dc-range::-moz-range-track{height:4px;border-radius:9999px;background:transparent}
 @media (prefers-reduced-motion: reduce){
   .dc-rise{animation:none !important;opacity:1 !important;transform:none !important}
+  .dc-range::-webkit-slider-thumb{transition:none}
 }`;
 function SparkCheck({ size, color }) {
   return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
@@ -330,17 +337,239 @@ function FlagPill({ flag }) {
     }
   );
 }
+function formatFigure(value, unit) {
+  const body = Number.isInteger(value) ? `${value}` : `${Math.round(value * 100) / 100}`;
+  if (!unit) return body;
+  return unit === "%" ? `${body}%` : `${body} ${unit}`;
+}
+function clampToRange(raw, adjust) {
+  var _a;
+  const step = (_a = adjust.step) != null ? _a : Number.isInteger(adjust.min) && Number.isInteger(adjust.max) ? 1 : (adjust.max - adjust.min) / 100;
+  const snapped = Math.round((raw - adjust.min) / step) * step + adjust.min;
+  const fixed = Math.round(snapped * 1e6) / 1e6;
+  return Math.min(adjust.max, Math.max(adjust.min, fixed));
+}
+function ValueAdjuster({
+  option,
+  accent,
+  border,
+  muted,
+  onConfirm,
+  onBack
+}) {
+  var _a, _b;
+  const adjust = option.adjust;
+  const suggested = clampToRange((_a = option.value) != null ? _a : adjust.min, adjust);
+  const [value, setValue] = React4.useState(suggested);
+  const [text, setText] = React4.useState(String(suggested));
+  const step = (_b = adjust.step) != null ? _b : Number.isInteger(adjust.min) && Number.isInteger(adjust.max) ? 1 : (adjust.max - adjust.min) / 100;
+  const pct = adjust.max > adjust.min ? (value - adjust.min) / (adjust.max - adjust.min) * 100 : 0;
+  const suggestedPct = adjust.max > adjust.min ? (suggested - adjust.min) / (adjust.max - adjust.min) * 100 : 0;
+  const moved = value !== suggested;
+  const commit = (raw) => {
+    const v = clampToRange(raw, adjust);
+    setValue(v);
+    setText(String(v));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "dc-rise",
+      "data-testid": "decision-card-adjuster",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        border: `1px solid ${border}`,
+        borderRadius: 10,
+        padding: "12px 14px",
+        background: "#fafafa"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 8 }, children: [
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", color: muted }, children: [
+            "Adjust \xB7 ",
+            option.label
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onBack,
+              "data-testid": "decision-card-adjust-back",
+              style: { border: "none", background: "none", padding: 0, cursor: "pointer", fontSize: 12, fontWeight: 600, color: muted },
+              children: "Back"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: 6 }, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: text,
+              onChange: (e) => {
+                setText(e.target.value);
+                const n = Number(e.target.value);
+                if (Number.isFinite(n)) setValue(clampToRange(n, adjust));
+              },
+              onBlur: () => commit(Number(text) || suggested),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  const v = clampToRange(Number(text) || suggested, adjust);
+                  commit(v);
+                  onConfirm(v);
+                } else if (e.key === "ArrowUp") {
+                  e.preventDefault();
+                  commit(value + step);
+                } else if (e.key === "ArrowDown") {
+                  e.preventDefault();
+                  commit(value - step);
+                }
+              },
+              inputMode: "decimal",
+              "aria-label": `${option.label} value`,
+              "data-testid": "decision-card-adjust-input",
+              style: {
+                width: `${Math.max(3, String(text).length + 1)}ch`,
+                fontSize: 26,
+                fontWeight: 700,
+                fontVariantNumeric: "tabular-nums",
+                letterSpacing: "-0.02em",
+                color: "var(--foreground)",
+                border: "none",
+                borderBottom: `2px solid ${accent}`,
+                background: "transparent",
+                outline: "none",
+                padding: 0
+              }
+            }
+          ),
+          adjust.unit && /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: muted }, children: adjust.unit }),
+          moved && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => commit(suggested),
+              "data-testid": "decision-card-adjust-reset",
+              style: {
+                marginLeft: 8,
+                border: "none",
+                background: "none",
+                padding: 0,
+                cursor: "pointer",
+                fontSize: 11.5,
+                fontWeight: 600,
+                color: muted,
+                textDecoration: "underline",
+                textUnderlineOffset: 2
+              },
+              children: [
+                "Reset to suggested (",
+                formatFigure(suggested, adjust.unit),
+                ")"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { position: "relative", height: 16, display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  height: 4,
+                  borderRadius: 9999,
+                  background: `linear-gradient(to right, ${accent} ${pct}%, #e8e8e8 ${pct}%)`
+                }
+              }
+            ),
+            moved && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                title: `Suggested: ${formatFigure(suggested, adjust.unit)}`,
+                style: {
+                  position: "absolute",
+                  left: `${suggestedPct}%`,
+                  transform: "translateX(-50%)",
+                  width: 2,
+                  height: 10,
+                  borderRadius: 1,
+                  background: muted,
+                  opacity: 0.55
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                className: "dc-range",
+                min: adjust.min,
+                max: adjust.max,
+                step,
+                value,
+                onChange: (e) => commit(Number(e.target.value)),
+                "aria-label": `${option.label} slider`,
+                "data-testid": "decision-card-adjust-slider",
+                style: { position: "relative", ["--dc-thumb"]: accent }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 10.5, fontWeight: 600, color: muted, fontVariantNumeric: "tabular-nums" }, children: [
+            /* @__PURE__ */ jsx("span", { children: formatFigure(adjust.min, adjust.unit) }),
+            /* @__PURE__ */ jsx("span", { children: formatFigure(adjust.max, adjust.unit) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onConfirm(value),
+            "data-testid": "decision-card-adjust-confirm",
+            style: {
+              alignSelf: "flex-start",
+              border: `1px solid ${accent}`,
+              background: accent,
+              color: "white",
+              borderRadius: 8,
+              fontSize: 13,
+              fontWeight: 600,
+              padding: "9px 16px",
+              cursor: "pointer",
+              fontVariantNumeric: "tabular-nums",
+              transition: "opacity 0.15s"
+            },
+            onMouseEnter: (e) => e.currentTarget.style.opacity = "0.88",
+            onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
+            children: [
+              option.label,
+              " \xB7 ",
+              formatFigure(value, adjust.unit)
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function DecisionCardRenderer({
   data,
   resolved = null,
   onResolve,
   onOpenSource
 }) {
-  var _a, _b;
+  var _a, _b, _c;
   const { BORDER: BORDER2, MUTED: MUTED2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
   const rootRef = React4.useRef(null);
   const width = useContainerWidth(rootRef);
   const stacked = width > 0 && width < STACK_BELOW;
+  const [adjustingIdx, setAdjustingIdx] = React4.useState(null);
   const options = (_a = data.options) != null ? _a : [];
   const recommendedIdx = Math.max(
     0,
@@ -495,7 +724,20 @@ function DecisionCardRenderer({
             ]
           }
         ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
+          adjustingIdx != null && ((_b = options[adjustingIdx]) == null ? void 0 : _b.adjust) ? /* @__PURE__ */ jsx(
+            ValueAdjuster,
+            {
+              option: options[adjustingIdx],
+              accent: ACCENT2,
+              border: BORDER2,
+              muted: MUTED2,
+              onBack: () => setAdjustingIdx(null),
+              onConfirm: (value) => {
+                setAdjustingIdx(null);
+                onResolve == null ? void 0 : onResolve(options[adjustingIdx].label, value);
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -505,15 +747,21 @@ function DecisionCardRenderer({
                 gap: 8
               },
               children: options.map((opt, idx) => {
-                var _a2;
+                var _a2, _b2;
                 const primary = idx === recommendedIdx;
-                return /* @__PURE__ */ jsx(
+                const adjustable = Boolean(opt.adjust);
+                return /* @__PURE__ */ jsxs(
                   "button",
                   {
                     type: "button",
-                    onClick: () => onResolve == null ? void 0 : onResolve(opt.label),
+                    onClick: () => adjustable ? setAdjustingIdx(idx) : onResolve == null ? void 0 : onResolve(opt.label),
+                    "data-adjustable": adjustable || void 0,
                     style: {
                       width: stacked ? "100%" : "auto",
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: stacked ? "flex-start" : "center",
+                      gap: 7,
                       textAlign: stacked ? "left" : "center",
                       border: `1px solid ${primary ? ACCENT2 : BORDER2}`,
                       background: primary ? ACCENT2 : "white",
@@ -541,7 +789,28 @@ function DecisionCardRenderer({
                         e.currentTarget.style.background = "white";
                       }
                     },
-                    children: opt.label
+                    children: [
+                      opt.label,
+                      adjustable && typeof opt.value === "number" && /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 11.5,
+                            fontWeight: 700,
+                            fontVariantNumeric: "tabular-nums",
+                            padding: "1px 7px",
+                            borderRadius: 9999,
+                            background: primary ? "rgba(255,255,255,0.22)" : "#f2f2f2",
+                            color: primary ? "white" : MUTED2,
+                            lineHeight: 1.5
+                          },
+                          children: [
+                            formatFigure(opt.value, (_b2 = opt.adjust) == null ? void 0 : _b2.unit),
+                            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { marginLeft: 4, opacity: 0.8 }, children: "\u270E" })
+                          ]
+                        }
+                      )
+                    ]
                   },
                   (_a2 = opt.id) != null ? _a2 : opt.label
                 );
@@ -580,7 +849,7 @@ function DecisionCardRenderer({
                     strokeLinejoin: "round"
                   }
                 ) }),
-                (_b = data.source.label) != null ? _b : "View source for this figure"
+                (_c = data.source.label) != null ? _c : "View source for this figure"
               ]
             }
           )
@@ -589,20 +858,27 @@ function DecisionCardRenderer({
     }
   );
 }
+function composeResolution(p, option, value) {
+  var _a, _b, _c;
+  if (value == null) return option;
+  const unit = (_c = (_b = ((_a = p.options) != null ? _a : []).find((o) => o.label === option)) == null ? void 0 : _b.adjust) == null ? void 0 : _c.unit;
+  return `${option} \xB7 ${formatFigure(value, unit)}`;
+}
 function DecisionCardResolver(p) {
-  var _a, _b, _c, _d;
+  var _a, _b;
   const { resolvedDecisions, onDecisionResolve, onDecisionSource } = useGenUIInteraction();
   const decisionId = (_a = p.id) != null ? _a : p.title;
   const hostResolved = resolvedDecisions == null ? void 0 : resolvedDecisions[decisionId];
-  const initial = (_c = hostResolved != null ? hostResolved : (_b = p.resolved) == null ? void 0 : _b.option) != null ? _c : null;
+  const initial = hostResolved != null ? hostResolved : p.resolved ? composeResolution(p, p.resolved.option, p.resolved.value) : null;
   const [localResolved, setLocalResolved] = React4.useState(initial);
   React4.useEffect(() => {
     if (hostResolved !== void 0) setLocalResolved(hostResolved);
   }, [hostResolved]);
   const resolved = hostResolved != null ? hostResolved : localResolved;
-  const handleResolve = (option) => {
-    setLocalResolved(option);
-    onDecisionResolve == null ? void 0 : onDecisionResolve(decisionId, option);
+  const handleResolve = (option, value) => {
+    const resolution = composeResolution(p, option, value);
+    setLocalResolved(resolution);
+    onDecisionResolve == null ? void 0 : onDecisionResolve(decisionId, resolution);
   };
   const handleSource = () => {
     var _a2;
@@ -611,7 +887,7 @@ function DecisionCardResolver(p) {
       window.open(p.source.url, "_blank", "noopener,noreferrer");
     }
   };
-  return /* @__PURE__ */ jsx(ComponentActions, { filename: (_d = p.title) != null ? _d : "decision-card", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ComponentActions, { filename: (_b = p.title) != null ? _b : "decision-card", children: /* @__PURE__ */ jsx(
     DecisionCardRenderer,
     {
       data: p,