@adoptai/genui-components 0.1.56 → 0.1.57

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

@@ -0,0 +1,627 @@
+"use client";
+import React4, { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { toPng } from 'html-to-image';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/shared/theme.ts
+var BORDER = "#dedede";
+var MUTED = "#777777";
+var PAPER = "#f6f6f6";
+var ACCENT = "#ff5000";
+var ACCENT_SOFT = "#cc4000";
+var SECONDARY = "#0364ff";
+var CHART_PALETTE = [
+  "#ff5000",
+  "#0364ff",
+  "#16a34a",
+  "#dc2626",
+  "#7c3aed",
+  "#0891b2",
+  "#f59e0b",
+  "#6366f1",
+  "#ec4899",
+  "#84cc16",
+  "#e11d48",
+  "#0ea5e9"
+];
+function ColumnSettingsPanel({ columns, hidden, onToggle, onShowAll, onHideAll }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px", minWidth: "180px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", paddingBottom: "4px", borderBottom: `1px solid ${BORDER}` }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onShowAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: ACCENT, fontWeight: 500, padding: 0 },
+          children: "Show all"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onHideAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, fontWeight: 500, padding: 0 },
+          children: "Hide all"
+        }
+      )
+    ] }),
+    columns.map((col) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", fontSize: "12px", color: "var(--foreground)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: !hidden.has(col.key),
+              onChange: () => onToggle(col.key),
+              style: { accentColor: ACCENT, width: "14px", height: "14px", margin: 0, cursor: "pointer" }
+            }
+          ),
+          col.label
+        ]
+      },
+      col.key
+    ))
+  ] });
+}
+var DOT_COLOR = "#aaaaaa";
+var DOT_HOVER = "#555555";
+function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "component" }) {
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState("main");
+  const contentRef = useRef(null);
+  const menuRef = useRef(null);
+  const btnRef = useRef(null);
+  const close = useCallback(() => {
+    setOpen(false);
+    setView("main");
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      var _a, _b;
+      if ((_a = menuRef.current) == null ? void 0 : _a.contains(e.target)) return;
+      if ((_b = btnRef.current) == null ? void 0 : _b.contains(e.target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, close]);
+  const handleDownloadPNG = useCallback(async () => {
+    if (!contentRef.current) return;
+    try {
+      const url = await toPng(contentRef.current, { backgroundColor: "white", pixelRatio: 2 });
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${filename}.png`;
+      a.click();
+    } catch (e) {
+    }
+    close();
+  }, [filename, close]);
+  const handleCSV = useCallback(() => {
+    onDownloadCSV == null ? void 0 : onDownloadCSV();
+    close();
+  }, [onDownloadCSV, close]);
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx("div", { ref: contentRef, style: { width: "100%" }, children }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: "4px", position: "relative", zIndex: 10, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: btnRef,
+          onClick: () => {
+            setOpen((o) => !o);
+            setView("main");
+          },
+          "aria-label": "Component actions",
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "4px 8px",
+            display: "flex",
+            gap: "3px",
+            alignItems: "center",
+            borderRadius: "6px",
+            transition: "background 0.15s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.background = "#f2f2f2";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_HOVER);
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "none";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_COLOR);
+          },
+          children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "6", viewBox: "0 0 20 6", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "10", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "17", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } })
+          ] })
+        }
+      ),
+      open && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            right: 0,
+            marginBottom: "4px",
+            background: "white",
+            border: `1px solid ${BORDER}`,
+            borderRadius: "0.75rem",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.06)",
+            zIndex: 50,
+            padding: view === "columns" ? "10px" : "4px",
+            minWidth: view === "columns" ? "200px" : "160px"
+          },
+          children: view === "main" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            columnConfig && /* @__PURE__ */ jsx(MenuButton, { label: "Customize columns", onClick: () => setView("columns") }),
+            onDownloadCSV && /* @__PURE__ */ jsx(MenuButton, { label: "Download CSV", onClick: handleCSV }),
+            /* @__PURE__ */ jsx(MenuButton, { label: "Download PNG", onClick: handleDownloadPNG })
+          ] }) : /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setView("main"),
+                style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, marginBottom: "6px", padding: 0 },
+                children: "\u2190 Back"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColumnSettingsPanel,
+              {
+                columns: columnConfig.columns,
+                hidden: columnConfig.hidden,
+                onToggle: columnConfig.onToggle,
+                onShowAll: columnConfig.onShowAll,
+                onHideAll: columnConfig.onHideAll
+              }
+            )
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function MenuButton({ label, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: "8px 12px",
+        fontSize: "12.5px",
+        color: "var(--foreground)",
+        textAlign: "left",
+        borderRadius: "8px",
+        transition: "background 0.15s",
+        whiteSpace: "nowrap"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.background = "#f2f2f2",
+      onMouseLeave: (e) => e.currentTarget.style.background = "none",
+      children: label
+    }
+  );
+}
+var DEFAULT_TOKENS = {
+  BORDER,
+  MUTED,
+  PAPER,
+  ACCENT,
+  ACCENT_SOFT,
+  SECONDARY,
+  CHART_PALETTE: [...CHART_PALETTE]
+};
+var GenUIThemeContext = createContext(DEFAULT_TOKENS);
+function useTheme() {
+  return useContext(GenUIThemeContext);
+}
+var DEFAULT_INTERACTION = {
+  selectedStepId: null,
+  onStepSelect: void 0,
+  resolvedDecisions: void 0,
+  onDecisionResolve: void 0,
+  onDecisionSource: void 0
+};
+var GenUIInteractionContext = createContext(DEFAULT_INTERACTION);
+function useGenUIInteraction() {
+  return useContext(GenUIInteractionContext);
+}
+var SEVERITY_COLORS = {
+  high: { color: "#dc2626", bg: "#fef2f2" },
+  medium: { color: "#f59e0b", bg: "#fff7ed" },
+  low: { color: "#777777", bg: "#f2f2f2" }
+};
+var GREEN = "#15803d";
+var GREEN_SOFT = "#dcfce7";
+var STACK_BELOW = 380;
+function formatAmount(amount, currency = "USD") {
+  var _a, _b;
+  const abs = Math.abs(amount);
+  const sign = amount < 0 ? "-" : "";
+  let body;
+  if (abs >= 1e6) body = `${(abs / 1e6).toFixed(abs >= 1e7 ? 0 : 1)}M`;
+  else if (abs >= 1e3) body = `${(abs / 1e3).toFixed(abs >= 1e4 ? 0 : 1)}K`;
+  else body = `${abs}`;
+  let symbol = "$";
+  try {
+    const parts = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency,
+      maximumFractionDigits: 0
+    }).formatToParts(0);
+    symbol = (_b = (_a = parts.find((p) => p.type === "currency")) == null ? void 0 : _a.value) != null ? _b : "$";
+  } catch (e) {
+    symbol = "$";
+  }
+  return `${sign}${symbol}${body}`;
+}
+function useContainerWidth(ref) {
+  const [w, setW] = React4.useState(0);
+  React4.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      var _a;
+      const cr = (_a = entries[0]) == null ? void 0 : _a.contentRect;
+      if (cr) setW(cr.width);
+    });
+    ro.observe(el);
+    setW(el.getBoundingClientRect().width);
+    return () => ro.disconnect();
+  }, [ref]);
+  return w;
+}
+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}
+@media (prefers-reduced-motion: reduce){
+  .dc-rise{animation:none !important;opacity:1 !important;transform:none !important}
+}`;
+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(
+    "path",
+    {
+      d: "M5 13l4 4L19 7",
+      stroke: color,
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function FlagPill({ flag }) {
+  var _a;
+  const sev = (_a = flag.severity) != null ? _a : "medium";
+  const { color, bg } = SEVERITY_COLORS[sev];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 5,
+        fontSize: 11,
+        fontWeight: 600,
+        padding: "3px 9px",
+        borderRadius: 9999,
+        background: bg,
+        color,
+        lineHeight: 1.2
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: { width: 6, height: 6, borderRadius: "50%", background: color, flexShrink: 0 }
+          }
+        ),
+        flag.field ? `${flag.field}: ${flag.issue}` : flag.issue
+      ]
+    }
+  );
+}
+function DecisionCardRenderer({
+  data,
+  resolved = null,
+  onResolve,
+  onOpenSource
+}) {
+  var _a, _b;
+  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 options = (_a = data.options) != null ? _a : [];
+  const recommendedIdx = Math.max(
+    0,
+    options.findIndex((o) => o.recommended)
+  );
+  const railColor = data.severity ? SEVERITY_COLORS[data.severity].color : ACCENT2;
+  const isResolved = Boolean(resolved);
+  const amountNode = typeof data.amount === "number" ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: stacked ? "flex-start" : "flex-end",
+        gap: 1,
+        flexShrink: 0
+      },
+      children: [
+        data.amount_label && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: 10,
+              textTransform: "uppercase",
+              letterSpacing: "0.07em",
+              fontWeight: 700,
+              color: MUTED2
+            },
+            children: data.amount_label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: 18,
+              fontWeight: 700,
+              color: "var(--foreground)",
+              fontVariantNumeric: "tabular-nums",
+              letterSpacing: "-0.01em",
+              lineHeight: 1.1
+            },
+            children: formatAmount(data.amount, data.currency)
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "dc-rise",
+      "data-testid": "decision-card",
+      "data-resolved": isResolved || void 0,
+      style: {
+        position: "relative",
+        width: "100%",
+        minWidth: 0,
+        boxSizing: "border-box",
+        borderRadius: "0.75rem",
+        border: `1px solid ${isResolved ? GREEN_SOFT : BORDER2}`,
+        background: isResolved ? "#f6fef9" : "white",
+        boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)",
+        padding: "16px 18px 16px 20px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              bottom: 0,
+              width: 4,
+              background: isResolved ? GREEN : railColor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: stacked ? "column" : "row",
+              alignItems: stacked ? "flex-start" : "flex-start",
+              justifyContent: "space-between",
+              gap: stacked ? 6 : 12
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 10.5,
+                      textTransform: "uppercase",
+                      letterSpacing: "0.07em",
+                      fontWeight: 700,
+                      color: ACCENT2
+                    },
+                    children: data.decision_type ? `Decision needs you \xB7 ${data.decision_type}` : "Decision needs you"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      fontFamily: "var(--font-serif)",
+                      fontSize: 17,
+                      fontWeight: 400,
+                      color: "var(--foreground)",
+                      letterSpacing: "-0.01em",
+                      margin: 0,
+                      lineHeight: 1.2
+                    },
+                    children: data.title
+                  }
+                )
+              ] }),
+              amountNode
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { style: { fontSize: 13, lineHeight: 1.5, color: MUTED2, margin: 0 }, children: data.question }),
+        data.flags && data.flags.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: data.flags.map((flag, i) => {
+          var _a2;
+          return /* @__PURE__ */ jsx(FlagPill, { flag }, `${(_a2 = flag.field) != null ? _a2 : "flag"}-${i}`);
+        }) }),
+        isResolved ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 7,
+              fontSize: 13,
+              fontWeight: 600,
+              color: GREEN
+            },
+            children: [
+              /* @__PURE__ */ jsx(SparkCheck, { size: 16, color: GREEN }),
+              "Resolved \xB7 ",
+              resolved
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: stacked ? "column" : "row",
+                flexWrap: stacked ? "nowrap" : "wrap",
+                gap: 8
+              },
+              children: options.map((opt, idx) => {
+                var _a2;
+                const primary = idx === recommendedIdx;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onResolve == null ? void 0 : onResolve(opt.label),
+                    style: {
+                      width: stacked ? "100%" : "auto",
+                      textAlign: stacked ? "left" : "center",
+                      border: `1px solid ${primary ? ACCENT2 : BORDER2}`,
+                      background: primary ? ACCENT2 : "white",
+                      color: primary ? "white" : "var(--foreground)",
+                      borderRadius: 8,
+                      fontSize: 13,
+                      fontWeight: 600,
+                      padding: "9px 14px",
+                      cursor: "pointer",
+                      transition: "background 0.15s, border-color 0.15s, color 0.15s"
+                    },
+                    onMouseEnter: (e) => {
+                      if (primary) {
+                        e.currentTarget.style.background = ACCENT_SOFT2;
+                      } else {
+                        e.currentTarget.style.borderColor = ACCENT2;
+                        e.currentTarget.style.background = "#fafafa";
+                      }
+                    },
+                    onMouseLeave: (e) => {
+                      if (primary) {
+                        e.currentTarget.style.background = ACCENT2;
+                      } else {
+                        e.currentTarget.style.borderColor = BORDER2;
+                        e.currentTarget.style.background = "white";
+                      }
+                    },
+                    children: opt.label
+                  },
+                  (_a2 = opt.id) != null ? _a2 : opt.label
+                );
+              })
+            }
+          ),
+          data.source && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onOpenSource,
+              style: {
+                alignSelf: "flex-start",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 5,
+                border: "none",
+                background: "none",
+                padding: 0,
+                cursor: "pointer",
+                fontSize: 12,
+                fontWeight: 600,
+                color: MUTED2,
+                transition: "color 0.15s"
+              },
+              onMouseEnter: (e) => e.currentTarget.style.color = ACCENT2,
+              onMouseLeave: (e) => e.currentTarget.style.color = MUTED2,
+              children: [
+                /* @__PURE__ */ jsx("svg", { width: 13, height: 13, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M14 3v4a1 1 0 001 1h4M5 4a1 1 0 011-1h8l5 5v11a1 1 0 01-1 1H6a1 1 0 01-1-1V4z",
+                    stroke: "currentColor",
+                    strokeWidth: 1.8,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                ) }),
+                (_b = data.source.label) != null ? _b : "View source for this figure"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function DecisionCardResolver(p) {
+  var _a, _b, _c, _d;
+  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 [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 handleSource = () => {
+    var _a2;
+    onDecisionSource == null ? void 0 : onDecisionSource(decisionId, p.source);
+    if (!onDecisionSource && ((_a2 = p.source) == null ? void 0 : _a2.url) && typeof window !== "undefined") {
+      window.open(p.source.url, "_blank", "noopener,noreferrer");
+    }
+  };
+  return /* @__PURE__ */ jsx(ComponentActions, { filename: (_d = p.title) != null ? _d : "decision-card", children: /* @__PURE__ */ jsx(
+    DecisionCardRenderer,
+    {
+      data: p,
+      resolved,
+      onResolve: handleResolve,
+      onOpenSource: handleSource
+    }
+  ) });
+}
+
+export { DecisionCardRenderer, DecisionCardResolver };
+//# sourceMappingURL=resolver.js.map
+//# sourceMappingURL=resolver.js.map