@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/public-chat/components/GuidedVariableInputs.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useState, useCallback, useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from "react";
 import { ChevronLeft, ChevronRight, ChevronDown, Check } from "lucide-react";
 import { Textarea } from "@ai-matrx/design-system";
 import { Input } from "@ai-matrx/design-system";
@@ -13,7 +14,7 @@ function InlineCustomInput({
   onChange,
   placeholder = "Or type your own answer..."
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "mt-2 pt-2 border-t border-border/40" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "mt-2 pt-2 border-t border-border/40", children: /* @__PURE__ */ jsx(
     "input",
     {
       type: "text",
@@ -22,7 +23,7 @@ function InlineCustomInput({
       placeholder,
       className: "w-full text-base md:text-sm bg-textured border-none outline-none text-foreground placeholder:text-muted-foreground py-1 px-2 rounded"
     }
-  ));
+  ) });
 }
 function GuidedSelect({
   value,
@@ -52,59 +53,69 @@ function GuidedSelect({
     }
     setShowOther(false);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "grid gap-1.5" }, options.map((option) => {
-    const isActive = value === option;
-    return /* @__PURE__ */ React.createElement(
-      "div",
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+      options.map((option) => {
+        const isActive = value === option;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => handleSelect(option),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleSelect(option);
+              }
+            },
+            className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
+            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              isActive && /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-primary flex-shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: isActive ? "font-medium" : "", children: option || "(empty)" })
+            ] })
+          },
+          option
+        );
+      }),
+      allowOther && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: handleOtherClick,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleOtherClick();
+            }
+          },
+          className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${showOther ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
+          children: "Other..."
+        }
+      )
+    ] }),
+    showOther && /* @__PURE__ */ jsx(
+      Textarea,
       {
-        key: option,
-        role: "button",
-        tabIndex: 0,
-        onClick: () => handleSelect(option),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleSelect(option);
-          }
+        value: otherText,
+        onChange: (e) => {
+          setOtherText(e.target.value);
+          onChange(`Other: ${e.target.value}`);
         },
-        className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2" }, isActive && /* @__PURE__ */ React.createElement(Check, { className: "w-3.5 h-3.5 text-primary flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: isActive ? "font-medium" : "" }, option || "(empty)"))
-    );
-  }), allowOther && /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      role: "button",
-      tabIndex: 0,
-      onClick: handleOtherClick,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleOtherClick();
-        }
-      },
-      className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${showOther ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`
-    },
-    "Other..."
-  )), showOther && /* @__PURE__ */ React.createElement(
-    Textarea,
-    {
-      value: otherText,
-      onChange: (e) => {
-        setOtherText(e.target.value);
-        onChange(`Other: ${e.target.value}`);
-      },
-      placeholder: "Type your answer...",
-      className: "min-h-[60px] text-base md:text-sm mt-1",
-      autoFocus: true
-    }
-  ), !showOther && /* @__PURE__ */ React.createElement(
-    InlineCustomInput,
-    {
-      value: isCustom ? value : "",
-      onChange: handleCustomChange
-    }
-  ));
+        placeholder: "Type your answer...",
+        className: "min-h-[60px] text-base md:text-sm mt-1",
+        autoFocus: true
+      }
+    ),
+    !showOther && /* @__PURE__ */ jsx(
+      InlineCustomInput,
+      {
+        value: isCustom ? value : "",
+        onChange: handleCustomChange
+      }
+    )
+  ] });
 }
 function GuidedCheckbox({
   value,
@@ -139,54 +150,69 @@ function GuidedCheckbox({
     if (v === "") return;
     onChange(v);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "grid gap-1.5" }, options.map((option) => {
-    const isActive = selected.includes(option);
-    return /* @__PURE__ */ React.createElement(
-      "label",
-      {
-        key: option,
-        className: `flex w-full items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer text-left ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`
-      },
-      /* @__PURE__ */ React.createElement(
-        Checkbox,
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+      options.map((option) => {
+        const isActive = selected.includes(option);
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: `flex w-full items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer text-left ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isActive,
+                  onCheckedChange: () => toggle(option),
+                  "aria-label": option || "(empty)",
+                  className: "flex-shrink-0"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: isActive ? "font-medium" : "", children: option || "(empty)" })
+            ]
+          },
+          option
+        );
+      }),
+      allowOther && /* @__PURE__ */ jsxs(
+        "label",
         {
-          checked: isActive,
-          onCheckedChange: () => toggle(option),
-          "aria-label": option || "(empty)",
-          className: "flex-shrink-0"
+          className: `flex w-full items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer text-left ${showOther ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: showOther,
+                onCheckedChange: handleOtherToggle,
+                "aria-label": "Other",
+                className: "flex-shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: "Other..." })
+          ]
         }
-      ),
-      /* @__PURE__ */ React.createElement("span", { className: isActive ? "font-medium" : "" }, option || "(empty)")
-    );
-  }), allowOther && /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      className: `flex w-full items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer text-left ${showOther ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`
-    },
-    /* @__PURE__ */ React.createElement(
-      Checkbox,
+      )
+    ] }),
+    showOther && /* @__PURE__ */ jsx(
+      Textarea,
       {
-        checked: showOther,
-        onCheckedChange: handleOtherToggle,
-        "aria-label": "Other",
-        className: "flex-shrink-0"
+        value: otherText,
+        onChange: (e) => {
+          setOtherText(e.target.value);
+          const regular = selected.filter((s) => !s.startsWith("Other: "));
+          onChange([...regular, `Other: ${e.target.value}`].join("\n"));
+        },
+        placeholder: "Type your answer...",
+        className: "min-h-[60px] text-base md:text-sm mt-1",
+        autoFocus: true
       }
     ),
-    /* @__PURE__ */ React.createElement("span", null, "Other...")
-  )), showOther && /* @__PURE__ */ React.createElement(
-    Textarea,
-    {
-      value: otherText,
-      onChange: (e) => {
-        setOtherText(e.target.value);
-        const regular = selected.filter((s) => !s.startsWith("Other: "));
-        onChange([...regular, `Other: ${e.target.value}`].join("\n"));
-      },
-      placeholder: "Type your answer...",
-      className: "min-h-[60px] text-base md:text-sm mt-1",
-      autoFocus: true
-    }
-  ), selected.length > 0 && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, selected.length, " selected"), !showOther && /* @__PURE__ */ React.createElement(InlineCustomInput, { value: "", onChange: handleCustomChange }));
+    selected.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      selected.length,
+      " selected"
+    ] }),
+    !showOther && /* @__PURE__ */ jsx(InlineCustomInput, { value: "", onChange: handleCustomChange })
+  ] });
 }
 function GuidedToggle({
   value,
@@ -202,32 +228,35 @@ function GuidedToggle({
   const handleCustomChange = (v) => {
     onChange(v || offLabel);
   };
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-2" }, [offLabel, onLabel].map((label) => {
-    const isActive = value === label;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: label,
-        role: "button",
-        tabIndex: 0,
-        onClick: () => handleSelect(label),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleSelect(label);
-          }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: [offLabel, onLabel].map((label) => {
+      const isActive = value === label;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: () => handleSelect(label),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleSelect(label);
+            }
+          },
+          className: `px-4 py-3 rounded-lg text-sm font-medium text-center transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
+          children: label
         },
-        className: `px-4 py-3 rounded-lg text-sm font-medium text-center transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`
-      },
-      label
-    );
-  })), /* @__PURE__ */ React.createElement(
-    InlineCustomInput,
-    {
-      value: value !== offLabel && value !== onLabel ? value : "",
-      onChange: handleCustomChange
-    }
-  ));
+        label
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      InlineCustomInput,
+      {
+        value: value !== offLabel && value !== onLabel ? value : "",
+        onChange: handleCustomChange
+      }
+    )
+  ] });
 }
 function GuidedNumber({
   value,
@@ -239,51 +268,58 @@ function GuidedNumber({
   const num = parseFloat(value) || 0;
   const canDec = min === void 0 || num > min;
   const canInc = max === void 0 || num < max;
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center gap-3" }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type: "button",
-      variant: "outline",
-      onClick: () => canDec && onChange((num - step).toString()),
-      disabled: !canDec
-    },
-    /* @__PURE__ */ React.createElement(Minus, { className: "w-5 h-5" })
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center min-w-[120px]" }, /* @__PURE__ */ React.createElement(
-    Input,
-    {
-      type: "text",
-      value,
-      onChange: (e) => {
-        const v = e.target.value;
-        if (v === "" || v === "-" || !isNaN(parseFloat(v))) onChange(v);
-      },
-      className: "w-full text-center text-2xl font-semibold h-12",
-      placeholder: "0"
-    }
-  )), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type: "button",
-      variant: "outline",
-      onClick: () => canInc && onChange((num + step).toString()),
-      disabled: !canInc
-    },
-    /* @__PURE__ */ React.createElement(Plus, { className: "w-5 h-5" })
-  )), /* @__PURE__ */ React.createElement(
-    InlineCustomInput,
-    {
-      value: "",
-      onChange: (v) => onChange(v),
-      placeholder: "Or type a number..."
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => canDec && onChange((num - step).toString()),
+          disabled: !canDec,
+          children: /* @__PURE__ */ jsx(Minus, { className: "w-5 h-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-w-[120px]", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value,
+          onChange: (e) => {
+            const v = e.target.value;
+            if (v === "" || v === "-" || !isNaN(parseFloat(v))) onChange(v);
+          },
+          className: "w-full text-center text-2xl font-semibold h-12",
+          placeholder: "0"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => canInc && onChange((num + step).toString()),
+          disabled: !canInc,
+          children: /* @__PURE__ */ jsx(Plus, { className: "w-5 h-5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      InlineCustomInput,
+      {
+        value: "",
+        onChange: (v) => onChange(v),
+        placeholder: "Or type a number..."
+      }
+    )
+  ] });
 }
 function GuidedTextarea({
   value,
   onChange,
   variableName
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Textarea,
     {
       value,
@@ -302,7 +338,7 @@ function GuidedVariableContent({
 }) {
   const cc = variable.customComponent;
   if (!cc || cc.type === "textarea") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       GuidedTextarea,
       {
         value,
@@ -315,7 +351,7 @@ function GuidedVariableContent({
     case "select":
     case "radio":
       if (!cc.options?.length) {
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           GuidedTextarea,
           {
             value,
@@ -324,7 +360,7 @@ function GuidedVariableContent({
           }
         );
       }
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         GuidedSelect,
         {
           value,
@@ -336,7 +372,7 @@ function GuidedVariableContent({
       );
     case "checkbox":
       if (!cc.options?.length) {
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           GuidedTextarea,
           {
             value,
@@ -345,7 +381,7 @@ function GuidedVariableContent({
           }
         );
       }
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         GuidedCheckbox,
         {
           value,
@@ -355,7 +391,7 @@ function GuidedVariableContent({
         }
       );
     case "toggle":
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         GuidedToggle,
         {
           value,
@@ -365,7 +401,7 @@ function GuidedVariableContent({
         }
       );
     case "number":
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         GuidedNumber,
         {
           value,
@@ -376,7 +412,7 @@ function GuidedVariableContent({
         }
       );
     default:
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         GuidedTextarea,
         {
           value,
@@ -388,7 +424,7 @@ function GuidedVariableContent({
 }
 function GuidedVariableInputs(props) {
   if (props.variableDefaults.length === 0) return null;
-  return /* @__PURE__ */ React.createElement(GuidedVariableInputsBody, { ...props });
+  return /* @__PURE__ */ jsx(GuidedVariableInputsBody, { ...props });
 }
 function GuidedVariableInputsBody({
   variableDefaults,
@@ -473,13 +509,12 @@ function GuidedVariableInputsBody({
   );
   const outerRadius = seamless ? "rounded-t-xl rounded-b-none" : "rounded-xl";
   const collapsedRadius = seamless ? "rounded-t-xl rounded-b-none" : "rounded-xl";
-  const progressDots = /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, variableDefaults.map((v, i) => {
+  const progressDots = /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: variableDefaults.map((v, i) => {
     const filled = String(values[v.name] ?? v.defaultValue ?? "").trim() !== "";
     const isCurrent = i === activeIndex;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "span",
       {
-        key: v.name,
         role: "button",
         tabIndex: 0,
         onClick: (e) => {
@@ -496,58 +531,89 @@ function GuidedVariableInputsBody({
         },
         className: `rounded-full transition-all cursor-pointer ${isCurrent ? "w-5 h-2 bg-primary" : filled ? "w-2 h-2 bg-primary/40" : "w-2 h-2 bg-muted-foreground/20"}`,
         title: variableRunLabel(v)
-      }
+      },
+      v.name
     );
-  }));
+  }) });
   if (isCollapsed) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        className: `bg-card border border-border ${collapsedRadius} ${seamless ? "border-b-0" : ""}`
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          role: "button",
-          tabIndex: 0,
-          onClick: handleToggleCollapse,
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleToggleCollapse();
-            }
-          },
-          className: `w-full flex items-center justify-between px-3 py-2 hover:bg-accent/50 transition-colors cursor-pointer ${collapsedRadius}`
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, progressDots, /* @__PURE__ */ React.createElement("span", { className: "text-xs text-muted-foreground truncate" }, answeredCount, "/", total, " answered")),
-        /* @__PURE__ */ React.createElement(ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" })
-      )
+        className: `bg-card border border-border ${collapsedRadius} ${seamless ? "border-b-0" : ""}`,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: handleToggleCollapse,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleToggleCollapse();
+              }
+            },
+            className: `w-full flex items-center justify-between px-3 py-2 hover:bg-accent/50 transition-colors cursor-pointer ${collapsedRadius}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                progressDots,
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
+                  answeredCount,
+                  "/",
+                  total,
+                  " answered"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" })
+            ]
+          }
+        )
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: `bg-muted border border-border ${outerRadius} ${seamless ? "border-b-0" : ""}`,
-      onKeyDown: handleKeyDown
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "px-3 pt-2.5 pb-2 border-b border-border/40" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, progressDots, /* @__PURE__ */ React.createElement("h3", { className: "flex-1 text-sm font-medium text-foreground truncate min-w-0" }, formattedName), /* @__PURE__ */ React.createElement(Button, { variant: "quiet", onClick: handleSkipAll }, "Skip questions")), helpText && /* @__PURE__ */ React.createElement("p", { className: "ml-2 mt-1.5 text-xs text-muted-foreground leading-snug" }, helpText)),
-    /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref: scrollRef,
-        className: "max-h-[28dvh] md:max-h-[35dvh] overflow-y-auto overscroll-contain px-3 py-2"
-      },
-      /* @__PURE__ */ React.createElement(
-        GuidedVariableContent,
-        {
-          variable,
-          value,
-          onChange: handleChange,
-          onAutoAdvance: goNext
-        }
-      )
-    ), isScrollable && /* @__PURE__ */ React.createElement("div", { className: "pointer-events-none absolute bottom-0 inset-x-0 h-8 z-10 bg-gradient-to-t from-muted to-transparent" })),
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border/50" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ChevronLeft, null), onClick: goPrev, disabled: activeIndex === 0 }, "Prev"), /* @__PURE__ */ React.createElement("span", { className: "text-xs text-muted-foreground" }, activeIndex + 1, " of ", total), activeIndex < total - 1 ? /* @__PURE__ */ React.createElement(Button, { variant: "quiet", tone: "primary", iconEnd: /* @__PURE__ */ React.createElement(ChevronRight, null), onClick: goNext }, "Next") : /* @__PURE__ */ React.createElement(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ React.createElement(Check, null), iconEnd: /* @__PURE__ */ React.createElement(ChevronRight, null), onClick: handleSkipAll }, "Done"))
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2.5 pb-2 border-b border-border/40", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            progressDots,
+            /* @__PURE__ */ jsx("h3", { className: "flex-1 text-sm font-medium text-foreground truncate min-w-0", children: formattedName }),
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: handleSkipAll, children: "Skip questions" })
+          ] }),
+          helpText && /* @__PURE__ */ jsx("p", { className: "ml-2 mt-1.5 text-xs text-muted-foreground leading-snug", children: helpText })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: scrollRef,
+              className: "max-h-[28dvh] md:max-h-[35dvh] overflow-y-auto overscroll-contain px-3 py-2",
+              children: /* @__PURE__ */ jsx(
+                GuidedVariableContent,
+                {
+                  variable,
+                  value,
+                  onChange: handleChange,
+                  onAutoAdvance: goNext
+                }
+              )
+            }
+          ),
+          isScrollable && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 inset-x-0 h-8 z-10 bg-gradient-to-t from-muted to-transparent" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border/50", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ChevronLeft, {}), onClick: goPrev, disabled: activeIndex === 0, children: "Prev" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            activeIndex + 1,
+            " of ",
+            total
+          ] }),
+          activeIndex < total - 1 ? /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", iconEnd: /* @__PURE__ */ jsx(ChevronRight, {}), onClick: goNext, children: "Next" }) : /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ jsx(Check, {}), iconEnd: /* @__PURE__ */ jsx(ChevronRight, {}), onClick: handleSkipAll, children: "Done" })
+        ] })
+      ]
+    }
   );
 }
 var GuidedVariableInputs_default = GuidedVariableInputs;