@discuss-ds/ui 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(index_exports, {
   ActivityStructure: () => ActivityStructure,
   AskAiInput: () => AskAiInput,
   AskAiToggle: () => AskAiToggle,
+  Badge: () => Badge,
   Button: () => Button,
   Calendar: () => Calendar,
   ChatChoices: () => ChatChoices,
@@ -80,6 +81,7 @@ __export(index_exports, {
   FormMessage: () => FormMessage,
   ImagePreview: () => ImagePreview,
   ImageThumbnails: () => ImageThumbnails,
+  InlineEdit: () => InlineEdit,
   Input: () => Input,
   InputWithAction: () => InputWithAction,
   Label: () => Label,
@@ -102,7 +104,6 @@ __export(index_exports, {
   RadioGroupItem: () => RadioGroupItem,
   RankList: () => RankList,
   RatingScale: () => RatingScale,
-  RoleTag: () => RoleTag,
   SearchBar: () => SearchBar,
   Select: () => Select,
   SelectContent: () => SelectContent,
@@ -1514,18 +1515,138 @@ var FormMessage = React23.forwardRef(
 );
 FormMessage.displayName = "FormMessage";
 
-// src/components/Forms & Data Entry/Input.tsx
+// src/components/Forms & Data Entry/InlineEdit.tsx
 var React24 = __toESM(require("react"), 1);
+var import_react11 = require("@phosphor-icons/react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
+var InlineEdit = React24.forwardRef(
+  ({
+    className,
+    textClassName,
+    value: valueProp,
+    defaultValue = "",
+    onValueChange,
+    placeholder = "Click to edit",
+    multiline,
+    maxLength,
+    disabled,
+    onEditingChange,
+    onDraftChange,
+    variant = "default",
+    selected,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const [internal, setInternal] = React24.useState(defaultValue);
+    const value = valueProp ?? internal;
+    const [editing, setEditing] = React24.useState(false);
+    const [draft, setDraft] = React24.useState(value);
+    const fieldRef = React24.useRef(null);
+    const readRef = React24.useRef(null);
+    const cancelled = React24.useRef(false);
+    const restoreFocus = React24.useRef(false);
+    React24.useEffect(() => {
+      if (editing) {
+        fieldRef.current?.focus();
+        fieldRef.current?.select();
+      } else if (restoreFocus.current) {
+        restoreFocus.current = false;
+        readRef.current?.focus();
+      }
+    }, [editing]);
+    const start = () => {
+      if (disabled) return;
+      setDraft(value);
+      cancelled.current = false;
+      setEditing(true);
+      onEditingChange?.(true);
+    };
+    const finish = (commit, refocus) => {
+      restoreFocus.current = refocus;
+      if (commit && draft !== value) {
+        if (valueProp === void 0) setInternal(draft);
+        onValueChange?.(draft);
+      }
+      setEditing(false);
+      onEditingChange?.(false);
+      onDraftChange?.(commit ? draft : value);
+    };
+    const textClasses = cn("text-ui-input-value text-surface-foreground", textClassName);
+    const question = variant === "question";
+    const fill = multiline || question;
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn(fill ? "flex w-full min-w-0" : "inline-flex min-w-0 max-w-full", className), ...props, children: editing ? React24.createElement(multiline ? "textarea" : "input", {
+      ref: fieldRef,
+      value: draft,
+      maxLength,
+      "aria-label": ariaLabel,
+      ...multiline ? { rows: 1 } : { type: "text" },
+      className: cn(
+        "w-full px-3 py-1 outline-none",
+        multiline && "field-sizing-content resize-none",
+        question ? "rounded-none border-0 border-b-2 border-input-accent bg-transparent" : cn("rounded-md focus-visible:border-input-accent", fieldSurfaceClasses("default")),
+        textClasses
+      ),
+      onChange: (event) => {
+        setDraft(event.target.value);
+        onDraftChange?.(event.target.value);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          cancelled.current = true;
+          finish(false, true);
+        } else if (event.key === "Enter" && (!multiline || event.metaKey || event.ctrlKey || question && !event.shiftKey)) {
+          event.preventDefault();
+          finish(true, true);
+        }
+      },
+      onBlur: () => {
+        if (!cancelled.current) finish(true, false);
+      }
+    }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "button",
+      {
+        ref: readRef,
+        type: "button",
+        disabled,
+        "aria-label": `${ariaLabel}: ${value || placeholder}. Edit`,
+        onClick: start,
+        className: cn(
+          "group inline-flex min-w-0 max-w-full items-center gap-2 px-3 py-1 text-left outline-none",
+          fill && "w-full",
+          question ? cn("rounded-none border-b-2", selected ? "border-input-accent" : "border-transparent") : "rounded-md border border-transparent",
+          "enabled:hover:bg-secondary enabled:focus-visible:border-input-accent disabled:cursor-not-allowed disabled:opacity-50",
+          question && "enabled:hover:border-input-accent",
+          textClasses
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn("min-w-0", multiline ? "whitespace-pre-wrap" : "truncate", fill && "flex-1", !value && "text-muted-foreground"), children: value || placeholder }),
+          !fill && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_react11.PencilSimple,
+            {
+              size: 16,
+              "aria-hidden": true,
+              className: "shrink-0 text-secondary-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+InlineEdit.displayName = "InlineEdit";
+
+// src/components/Forms & Data Entry/Input.tsx
+var React25 = __toESM(require("react"), 1);
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var inputClasses = (status, className) => cn(
   "flex h-10 w-full rounded-md px-3 py-2 text-ui-input-value placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
   fieldSurfaceClasses(status),
   className
 );
-var Input = React24.forwardRef(
+var Input = React25.forwardRef(
   ({ className, status = "default", label, description, message, id, ...props }, ref) => {
     if (label == null && description == null && message == null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "input",
         {
           ref,
@@ -1536,16 +1657,16 @@ var Input = React24.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Field, { label, description, message, status, id, children: (control) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", { ref, className: inputClasses(status, className), ...control, ...props }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Field, { label, description, message, status, id, children: (control) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", { ref, className: inputClasses(status, className), ...control, ...props }) });
   }
 );
 Input.displayName = "Input";
 
 // src/components/Forms & Data Entry/InputWithAction.tsx
-var React25 = __toESM(require("react"), 1);
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var InputWithAction = React25.forwardRef(
-  ({ className, actionLabel, onAction, tags, status = "default", label, description, message, id, disabled, placeholder, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Field, { label, description, message, status, id, children: (control) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+var React26 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var InputWithAction = React26.forwardRef(
+  ({ className, actionLabel, onAction, tags, status = "default", label, description, message, id, disabled, placeholder, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Field, { label, description, message, status, id, children: (control) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       className: cn(
@@ -1557,8 +1678,8 @@ var InputWithAction = React25.forwardRef(
         className
       ),
       children: [
-        tags && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: tags }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        tags && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex shrink-0 items-center gap-1", children: tags }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ref,
@@ -1569,7 +1690,7 @@ var InputWithAction = React25.forwardRef(
             ...props
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { type: "button", variant: "subtle", size: "sm", disabled, onClick: onAction, children: actionLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", variant: "subtle", size: "sm", disabled, onClick: onAction, children: actionLabel })
       ]
     }
   ) })
@@ -1577,10 +1698,10 @@ var InputWithAction = React25.forwardRef(
 InputWithAction.displayName = "InputWithAction";
 
 // src/components/Forms & Data Entry/NumberInput.tsx
-var React26 = __toESM(require("react"), 1);
-var import_react11 = require("@phosphor-icons/react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var NumberInput = React26.forwardRef(
+var React27 = __toESM(require("react"), 1);
+var import_react12 = require("@phosphor-icons/react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var NumberInput = React27.forwardRef(
   ({
     className,
     value,
@@ -1598,7 +1719,7 @@ var NumberInput = React26.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const [internal, setInternal] = React26.useState(defaultValue);
+    const [internal, setInternal] = React27.useState(defaultValue);
     const current = value ?? internal;
     const clamp = (next) => Math.min(max, Math.max(min, next));
     const commit = (next) => {
@@ -1606,7 +1727,7 @@ var NumberInput = React26.forwardRef(
       setInternal(clamped);
       onValueChange?.(clamped);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Field, { label, description, message, status, id, className: "w-50", children: (control) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Field, { label, description, message, status, id, className: "w-50", children: (control) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "div",
       {
         className: cn(
@@ -1617,7 +1738,7 @@ var NumberInput = React26.forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Button,
             {
               type: "button",
@@ -1626,11 +1747,11 @@ var NumberInput = React26.forwardRef(
               "aria-label": "Decrease",
               disabled: disabled || current <= min,
               onClick: () => commit(current - step),
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react11.Minus, { size: 16, "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react12.Minus, { size: 16, "aria-hidden": true })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-center gap-1 text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-center gap-1 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "input",
               {
                 ref,
@@ -1660,9 +1781,9 @@ var NumberInput = React26.forwardRef(
                 ...props
               }
             ),
-            unit && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-body-small text-secondary-muted-foreground", children: unit })
+            unit && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-body-small text-secondary-muted-foreground", children: unit })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             Button,
             {
               type: "button",
@@ -1671,7 +1792,7 @@ var NumberInput = React26.forwardRef(
               "aria-label": "Increase",
               disabled: disabled || current >= max,
               onClick: () => commit(current + step),
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react11.Plus, { size: 16, "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react12.Plus, { size: 16, "aria-hidden": true })
             }
           )
         ]
@@ -1682,14 +1803,14 @@ var NumberInput = React26.forwardRef(
 NumberInput.displayName = "NumberInput";
 
 // src/components/Forms & Data Entry/SearchBar.tsx
-var React27 = __toESM(require("react"), 1);
-var import_react12 = require("@phosphor-icons/react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var SearchBar = React27.forwardRef(
+var React28 = __toESM(require("react"), 1);
+var import_react13 = require("@phosphor-icons/react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var SearchBar = React28.forwardRef(
   ({ className, value, defaultValue, onChange, onClear, clearLabel = "Clear search", disabled, ...props }, ref) => {
-    const innerRef = React27.useRef(null);
-    React27.useImperativeHandle(ref, () => innerRef.current);
-    const [uncontrolled, setUncontrolled] = React27.useState(String(defaultValue ?? ""));
+    const innerRef = React28.useRef(null);
+    React28.useImperativeHandle(ref, () => innerRef.current);
+    const [uncontrolled, setUncontrolled] = React28.useState(String(defaultValue ?? ""));
     const current = value !== void 0 ? String(value) : uncontrolled;
     const clear = () => {
       const input = innerRef.current;
@@ -1701,7 +1822,7 @@ var SearchBar = React27.forwardRef(
       }
       onClear?.();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "div",
       {
         className: cn(
@@ -1712,8 +1833,8 @@ var SearchBar = React27.forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react12.MagnifyingGlass, { size: 16, "aria-hidden": true, className: "shrink-0 text-surface-foreground" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react13.MagnifyingGlass, { size: 16, "aria-hidden": true, className: "shrink-0 text-surface-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "input",
             {
               ref: innerRef,
@@ -1730,14 +1851,14 @@ var SearchBar = React27.forwardRef(
               ...props
             }
           ),
-          current !== "" && !disabled && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          current !== "" && !disabled && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "button",
             {
               type: "button",
               "aria-label": clearLabel,
               onClick: clear,
               className: "inline-flex size-4 shrink-0 items-center justify-center rounded-xs text-surface-foreground",
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react12.X, { size: 16, "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react13.X, { size: 16, "aria-hidden": true })
             }
           )
         ]
@@ -1748,16 +1869,16 @@ var SearchBar = React27.forwardRef(
 SearchBar.displayName = "SearchBar";
 
 // src/components/Forms & Data Entry/Select.tsx
-var React28 = __toESM(require("react"), 1);
-var import_react13 = require("@phosphor-icons/react");
+var React29 = __toESM(require("react"), 1);
+var import_react14 = require("@phosphor-icons/react");
 var import_radix_ui14 = require("radix-ui");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Select = import_radix_ui14.Select.Root;
 var SelectValue = import_radix_ui14.Select.Value;
 var SelectGroup = import_radix_ui14.Select.Group;
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M1 4L3.5 6.5L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var SelectTrigger = React28.forwardRef(
-  ({ className, children, icon, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M1 4L3.5 6.5L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var SelectTrigger = React29.forwardRef(
+  ({ className, children, icon, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     import_radix_ui14.Select.Trigger,
     {
       ref,
@@ -1770,16 +1891,16 @@ var SelectTrigger = React28.forwardRef(
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "flex shrink-0 text-surface-foreground", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "min-w-0 flex-1 truncate", children }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui14.Select.Icon, { className: "shrink-0 text-surface-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react13.CaretDown, { size: 16, "aria-hidden": true }) })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "flex shrink-0 text-surface-foreground", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "min-w-0 flex-1 truncate", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui14.Select.Icon, { className: "shrink-0 text-surface-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react14.CaretDown, { size: 16, "aria-hidden": true }) })
       ]
     }
   )
 );
 SelectTrigger.displayName = "SelectTrigger";
-var SelectContent = React28.forwardRef(
-  ({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui14.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var SelectContent = React29.forwardRef(
+  ({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui14.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_radix_ui14.Select.Content,
     {
       ref,
@@ -1793,13 +1914,13 @@ var SelectContent = React28.forwardRef(
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui14.Select.Viewport, { className: "p-1", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui14.Select.Viewport, { className: "p-1", children })
     }
   ) })
 );
 SelectContent.displayName = "SelectContent";
-var SelectItem = React28.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+var SelectItem = React29.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     import_radix_ui14.Select.Item,
     {
       ref,
@@ -1810,8 +1931,8 @@ var SelectItem = React28.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui14.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CheckIcon, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui14.Select.ItemText, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui14.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CheckIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui14.Select.ItemText, { children })
       ]
     }
   )
@@ -1819,10 +1940,10 @@ var SelectItem = React28.forwardRef(
 SelectItem.displayName = "SelectItem";
 
 // src/components/Forms & Data Entry/Slider.tsx
-var React29 = __toESM(require("react"), 1);
+var React30 = __toESM(require("react"), 1);
 var import_radix_ui15 = require("radix-ui");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Slider = React29.forwardRef(
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Slider = React30.forwardRef(
   ({
     className,
     value,
@@ -1837,15 +1958,15 @@ var Slider = React29.forwardRef(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) => {
-    const [internal, setInternal] = React29.useState(defaultValue ?? [min]);
+    const [internal, setInternal] = React30.useState(defaultValue ?? [min]);
     const thumbValues = value ?? internal;
     const hasHeader = label != null || showRange;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("flex w-full flex-col gap-2", className), children: [
-      hasHeader && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between text-secondary-muted-foreground", children: [
-        label != null ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-ui-label text-surface-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-ui-caption", children: min }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-body-small", children: max })
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("flex w-full flex-col gap-2", className), children: [
+      hasHeader && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between text-secondary-muted-foreground", children: [
+        label != null ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-ui-label text-surface-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-ui-caption", children: min }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-body-small", children: max })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         import_radix_ui15.Slider.Root,
         {
           ref,
@@ -1860,19 +1981,19 @@ var Slider = React29.forwardRef(
           className: "relative flex h-4 w-full touch-none items-center select-none",
           ...props,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui15.Slider.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-xxs bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_radix_ui15.Slider.Range, { className: "absolute h-full bg-input-accent" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_radix_ui15.Slider.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-xxs bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_radix_ui15.Slider.Range, { className: "absolute h-full bg-input-accent" }) }),
             thumbValues.map((thumbValue, index) => (
               // The accessible name belongs on each individual thumb (the actual
               // role="slider" element) — Root is just a group container. With
               // more than one thumb this applies the same label to each; give a
               // range slider distinct per-thumb labels via aria-labelledby instead.
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 import_radix_ui15.Slider.Thumb,
                 {
                   "aria-label": ariaLabel,
                   "aria-labelledby": ariaLabelledBy,
                   className: "group relative block size-4 rounded-full border-2 border-surface bg-input-accent shadow-sm transition-colors disabled:pointer-events-none disabled:opacity-50",
-                  children: showValue && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  children: showValue && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     "span",
                     {
                       "aria-hidden": "true",
@@ -1896,17 +2017,17 @@ var Slider = React29.forwardRef(
 Slider.displayName = "Slider";
 
 // src/components/Forms & Data Entry/Textarea.tsx
-var React30 = __toESM(require("react"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var React31 = __toESM(require("react"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var textareaClasses = (status, className) => cn(
   "flex field-sizing-content min-h-25 w-full rounded-md px-3 py-2.5 text-body-base placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
   fieldSurfaceClasses(status),
   className
 );
-var Textarea = React30.forwardRef(
+var Textarea = React31.forwardRef(
   ({ className, status = "default", label, description, message, id, ...props }, ref) => {
     if (label == null && description == null && message == null) {
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "textarea",
         {
           ref,
@@ -1917,29 +2038,29 @@ var Textarea = React30.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label, description, message, status, id, children: (control) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("textarea", { ref, className: textareaClasses(status, className), ...control, ...props }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label, description, message, status, id, children: (control) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("textarea", { ref, className: textareaClasses(status, className), ...control, ...props }) });
   }
 );
 Textarea.displayName = "Textarea";
 
 // src/components/Overlays & Feedback/Dialog.tsx
-var React31 = __toESM(require("react"), 1);
-var import_react14 = require("@phosphor-icons/react");
+var React32 = __toESM(require("react"), 1);
+var import_react15 = require("@phosphor-icons/react");
 var import_radix_ui16 = require("radix-ui");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Dialog = import_radix_ui16.Dialog.Root;
 var DialogTrigger = import_radix_ui16.Dialog.Trigger;
 var DialogClose = import_radix_ui16.Dialog.Close;
-var DialogContent = React31.forwardRef(
-  ({ className, children, closeLabel = "Close", hideClose, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_radix_ui16.Dialog.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var DialogContent = React32.forwardRef(
+  ({ className, children, closeLabel = "Close", hideClose, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_radix_ui16.Dialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       import_radix_ui16.Dialog.Overlay,
       {
         style: { zIndex: "var(--sys-z-30)" },
         className: "fixed inset-0 bg-primary/30"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       import_radix_ui16.Dialog.Content,
       {
         ref,
@@ -1951,15 +2072,15 @@ var DialogContent = React31.forwardRef(
         ...props,
         children: [
           children,
-          !hideClose && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_radix_ui16.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "ghost", size: "icon-sm", "aria-label": closeLabel, className: "absolute top-4 right-6", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react14.X, { size: 16, "aria-hidden": true }) }) })
+          !hideClose && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_radix_ui16.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { variant: "ghost", size: "icon-sm", "aria-label": closeLabel, className: "absolute top-4 right-6", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react15.X, { size: 16, "aria-hidden": true }) }) })
         ]
       }
     )
   ] })
 );
 DialogContent.displayName = "DialogContent";
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("flex flex-col gap-1.5 border-b border-border px-6 py-4 pr-16", className), ...props });
-var DialogTitle = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("flex flex-col gap-1.5 border-b border-border px-6 py-4 pr-16", className), ...props });
+var DialogTitle = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   import_radix_ui16.Dialog.Title,
   {
     ref,
@@ -1968,7 +2089,7 @@ var DialogTitle = React31.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var DialogDescription = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
   import_radix_ui16.Dialog.Description,
   {
     ref,
@@ -1977,15 +2098,15 @@ var DialogDescription = React31.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DialogDescription.displayName = "DialogDescription";
-var DialogBody = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("flex flex-col gap-4 p-6", className), ...props });
-var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("flex items-center justify-end gap-3 border-t border-border px-6 py-4", className), ...props });
+var DialogBody = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("flex flex-col gap-4 p-6", className), ...props });
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("flex items-center justify-end gap-3 border-t border-border px-6 py-4", className), ...props });
 
 // src/components/Overlays & Feedback/Toast.tsx
-var React32 = __toESM(require("react"), 1);
-var import_react15 = require("@phosphor-icons/react");
+var React33 = __toESM(require("react"), 1);
+var import_react16 = require("@phosphor-icons/react");
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_radix_ui17 = require("radix-ui");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var toastVariants = (0, import_class_variance_authority4.cva)("border", {
   variants: {
     variant: {
@@ -2011,13 +2132,13 @@ var titleColour = {
 };
 function VariantIcon({ variant, size }) {
   const props = { size, "aria-hidden": true, className: cn("shrink-0", iconColour[variant]) };
-  if (variant === "success") return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react15.CheckCircle, { ...props });
-  if (variant === "warning") return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react15.Warning, { ...props });
-  if (variant === "destructive") return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react15.WarningCircle, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react15.Info, { ...props });
+  if (variant === "success") return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react16.CheckCircle, { ...props });
+  if (variant === "warning") return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react16.Warning, { ...props });
+  if (variant === "destructive") return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react16.WarningCircle, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react16.Info, { ...props });
 }
 var ToastProvider = import_radix_ui17.Toast.Provider;
-var ToastViewport = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+var ToastViewport = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
   import_radix_ui17.Toast.Viewport,
   {
     ref,
@@ -2027,10 +2148,10 @@ var ToastViewport = React32.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 ToastViewport.displayName = "ToastViewport";
-var Toast = React32.forwardRef(
+var Toast = React33.forwardRef(
   ({ className, variant = "info", title, description, action, closeLabel = "Close", children, ...props }, ref) => {
     const v = variant ?? "info";
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       import_radix_ui17.Toast.Root,
       {
         ref,
@@ -2038,19 +2159,19 @@ var Toast = React32.forwardRef(
         className: cn("flex items-start gap-3 rounded-lg p-4 shadow-lg", toastVariants({ variant: v }), className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariantIcon, { variant: v, size: 20 }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1 text-body-small", children: [
-            title != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_radix_ui17.Toast.Title, { className: cn("font-semibold", titleColour[v]), children: title }),
-            description != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_radix_ui17.Toast.Description, { className: "text-secondary-muted-foreground", children: description }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VariantIcon, { variant: v, size: 20 }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1 text-body-small", children: [
+            title != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_radix_ui17.Toast.Title, { className: cn("font-semibold", titleColour[v]), children: title }),
+            description != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_radix_ui17.Toast.Description, { className: "text-secondary-muted-foreground", children: description }),
             children,
             action
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             import_radix_ui17.Toast.Close,
             {
               "aria-label": closeLabel,
               className: "inline-flex size-4 shrink-0 items-center justify-center rounded-xs text-surface-foreground",
-              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react15.X, { size: 16, "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react16.X, { size: 16, "aria-hidden": true })
             }
           )
         ]
@@ -2060,10 +2181,10 @@ var Toast = React32.forwardRef(
 );
 Toast.displayName = "Toast";
 var ToastAction = import_radix_ui17.Toast.Action;
-var ToastInline = React32.forwardRef(
+var ToastInline = React33.forwardRef(
   ({ className, variant = "info", onClose, closeLabel = "Close", children, ...props }, ref) => {
     const v = variant ?? "info";
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "div",
       {
         ref,
@@ -2071,9 +2192,9 @@ var ToastInline = React32.forwardRef(
         className: cn("flex items-center gap-2 rounded-sm px-2 py-1.5", toastVariants({ variant: v }), className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariantIcon, { variant: v, size: 16 }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "min-w-0 flex-1 text-body-small text-secondary-muted-foreground", children }),
-          onClose && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react15.X, { size: 16, "aria-hidden": true }) })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VariantIcon, { variant: v, size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "min-w-0 flex-1 text-body-small text-secondary-muted-foreground", children }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react16.X, { size: 16, "aria-hidden": true }) })
         ]
       }
     );
@@ -2082,16 +2203,16 @@ var ToastInline = React32.forwardRef(
 ToastInline.displayName = "ToastInline";
 
 // src/components/Overlays & Feedback/Tooltip.tsx
-var React33 = __toESM(require("react"), 1);
+var React34 = __toESM(require("react"), 1);
 var import_radix_ui18 = require("radix-ui");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var TooltipProvider = import_radix_ui18.Tooltip.Provider;
 var Tooltip = import_radix_ui18.Tooltip.Root;
 var TooltipTrigger = import_radix_ui18.Tooltip.Trigger;
-var TooltipContent = React33.forwardRef(
+var TooltipContent = React34.forwardRef(
   ({ className, sideOffset = 4, title, description, action, arrow = true, children, ...props }, ref) => {
     const detailed = title != null || description != null;
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_radix_ui18.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui18.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       import_radix_ui18.Tooltip.Content,
       {
         ref,
@@ -2105,12 +2226,12 @@ var TooltipContent = React33.forwardRef(
         ),
         ...props,
         children: [
-          detailed ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-            title != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xs leading-4 font-semibold text-label", children: title }),
-            description != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xs leading-4.5 text-plum-200", children: description }),
-            action != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-1 text-ui-caption text-plum-300 underline *:underline", children: action })
+          detailed ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+            title != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xs leading-4 font-semibold text-label", children: title }),
+            description != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xs leading-4.5 text-plum-200", children: description }),
+            action != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mt-1 text-ui-caption text-plum-300 underline *:underline", children: action })
           ] }) : children,
-          arrow && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_radix_ui18.Tooltip.Arrow, { width: 12, height: 8, className: "fill-primary-soft-foreground" })
+          arrow && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_radix_ui18.Tooltip.Arrow, { width: 12, height: 8, className: "fill-primary-soft-foreground" })
         ]
       }
     ) });
@@ -2119,14 +2240,14 @@ var TooltipContent = React33.forwardRef(
 TooltipContent.displayName = "TooltipContent";
 
 // src/components/Question Types/FileUpload.tsx
-var React35 = __toESM(require("react"), 1);
-var import_react16 = require("@phosphor-icons/react");
+var React36 = __toESM(require("react"), 1);
+var import_react17 = require("@phosphor-icons/react");
 var import_radix_ui19 = require("radix-ui");
 
 // src/components/Tags & Badges/Tag.tsx
-var React34 = __toESM(require("react"), 1);
+var React35 = __toESM(require("react"), 1);
 var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var tagVariants = (0, import_class_variance_authority5.cva)(
   "inline-flex items-center gap-1.5 whitespace-nowrap rounded-sm border px-2.5 py-1 text-ui-caption",
   {
@@ -2142,7 +2263,7 @@ var tagVariants = (0, import_class_variance_authority5.cva)(
     defaultVariants: { variant: "neutral" }
   }
 );
-var Tag = React34.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { ref, className: cn(tagVariants({ variant }), className), ...props }));
+var Tag = React35.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { ref, className: cn(tagVariants({ variant }), className), ...props }));
 Tag.displayName = "Tag";
 var statusDotVariants = (0, import_class_variance_authority5.cva)("size-1.5 shrink-0 rounded-full", {
   variants: {
@@ -2155,20 +2276,20 @@ var statusDotVariants = (0, import_class_variance_authority5.cva)("size-1.5 shri
   },
   defaultVariants: { status: "active" }
 });
-var StatusTag = React34.forwardRef(
-  ({ className, status, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { ref, className: cn(tagVariants({ variant: "default" }), className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: statusDotVariants({ status }), "aria-hidden": "true" }),
+var StatusTag = React35.forwardRef(
+  ({ className, status, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { ref, className: cn(tagVariants({ variant: "default" }), className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: statusDotVariants({ status }), "aria-hidden": "true" }),
     children
   ] })
 );
 StatusTag.displayName = "StatusTag";
 
 // src/components/Question Types/FileUpload.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var FileUploadZone = React35.forwardRef(
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var FileUploadZone = React36.forwardRef(
   ({ className, title = "Upload document", hint, icon, onFiles, ...props }, ref) => {
-    const [over, setOver] = React35.useState(false);
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    const [over, setOver] = React36.useState(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "label",
       {
         className: cn(
@@ -2188,12 +2309,12 @@ var FileUploadZone = React35.forwardRef(
           onFiles?.(Array.from(event.dataTransfer.files));
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex size-10 items-center justify-center rounded-full bg-background bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react16.FileText, { size: 24, "aria-hidden": true }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-body-small text-surface-foreground", children: title }),
-            hint && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-ui-caption text-secondary-muted-foreground", children: hint })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex size-10 items-center justify-center rounded-full bg-background bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.FileText, { size: 24, "aria-hidden": true }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-body-small text-surface-foreground", children: title }),
+            hint && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-ui-caption text-secondary-muted-foreground", children: hint })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "input",
             {
               ref,
@@ -2209,49 +2330,49 @@ var FileUploadZone = React35.forwardRef(
   }
 );
 FileUploadZone.displayName = "FileUploadZone";
-var FileUploadItem = React35.forwardRef(
+var FileUploadItem = React36.forwardRef(
   ({ className, name, size, status = "uploading", progress = 0, timeLeft, icon, onRemove, removeLabel, ...props }, ref) => {
     const uploading = status === "uploading";
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "div",
       {
         ref,
         className: cn("flex w-full flex-col justify-center gap-2 overflow-hidden rounded-sm border border-border p-2", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-background bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react16.FileText, { size: 24, "aria-hidden": true }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "truncate text-ui-label text-surface-foreground", children: name }),
-                  status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Tag, { variant: "success", children: "Complete" }),
-                  status === "error" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Tag, { variant: "destructive", children: "Error" })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-background bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.FileText, { size: 24, "aria-hidden": true }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "truncate text-ui-label text-surface-foreground", children: name }),
+                  status === "complete" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Tag, { variant: "success", children: "Complete" }),
+                  status === "error" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Tag, { variant: "destructive", children: "Error" })
                 ] }),
-                onRemove && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": removeLabel ?? `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react16.X, { size: 16, "aria-hidden": true }) })
+                onRemove && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": removeLabel ?? `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.X, { size: 16, "aria-hidden": true }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between text-ui-caption text-secondary-muted-foreground", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between text-ui-caption text-secondary-muted-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex items-center gap-2", children: [
                   size,
-                  uploading && timeLeft && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": "true", className: "size-0.5 rounded-full bg-secondary-muted-foreground" }),
+                  uploading && timeLeft && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": "true", className: "size-0.5 rounded-full bg-secondary-muted-foreground" }),
                     timeLeft
                   ] })
                 ] }),
-                uploading && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "text-body-xxs font-normal", children: [
+                uploading && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-body-xxs font-normal", children: [
                   Math.round(progress),
                   "%"
                 ] })
               ] })
             ] })
           ] }),
-          uploading && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          uploading && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             import_radix_ui19.Progress.Root,
             {
               value: progress,
               "aria-label": `Uploading ${name}`,
               className: "h-0.75 w-full overflow-hidden rounded-sm bg-background bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5",
-              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_radix_ui19.Progress.Indicator, { className: "h-full bg-accent transition-[width]", style: { width: `${progress}%` } })
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui19.Progress.Indicator, { className: "h-full bg-accent transition-[width]", style: { width: `${progress}%` } })
             }
           )
         ]
@@ -2262,31 +2383,31 @@ var FileUploadItem = React35.forwardRef(
 FileUploadItem.displayName = "FileUploadItem";
 
 // src/components/Question Types/Media.tsx
-var React36 = __toESM(require("react"), 1);
-var import_react17 = require("@phosphor-icons/react");
+var React37 = __toESM(require("react"), 1);
+var import_react18 = require("@phosphor-icons/react");
 var import_radix_ui20 = require("radix-ui");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function MediaInfo({ name, details, onRemove, removeLabel, large, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("flex items-center justify-between border-t border-border bg-surface px-6 py-4", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: cn("truncate text-surface-foreground", large ? "text-body-section" : "text-ui-label"), children: name }),
-      details && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: cn("flex items-center gap-2 text-secondary-muted-foreground", large ? "text-body-small" : "text-ui-caption"), children: details.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(React36.Fragment, { children: [
-        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": "true", className: "size-0.5 rounded-full bg-secondary-muted-foreground" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("flex items-center justify-between border-t border-border bg-surface px-6 py-4", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: cn("truncate text-surface-foreground", large ? "text-body-section" : "text-ui-label"), children: name }),
+      details && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: cn("flex items-center gap-2 text-secondary-muted-foreground", large ? "text-body-small" : "text-ui-caption"), children: details.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(React37.Fragment, { children: [
+        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": "true", className: "size-0.5 rounded-full bg-secondary-muted-foreground" }),
         part
       ] }, part)) })
     ] }),
-    onRemove && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { type: "button", variant: "destructive", size: "icon", "aria-label": removeLabel ?? `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.Trash, { size: 16, "aria-hidden": true }) })
+    onRemove && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { type: "button", variant: "destructive", size: "icon", "aria-label": removeLabel ?? `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react18.Trash, { size: 16, "aria-hidden": true }) })
   ] });
 }
-var ImagePreview = React36.forwardRef(
-  ({ className, children, name, details, onRemove, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref, className: cn("flex w-full flex-col overflow-hidden rounded-lg border border-border", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex h-84 w-full items-center justify-center bg-accent-soft [&>img]:size-full [&>img]:object-contain", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MediaInfo, { name, details, onRemove, large: true })
+var ImagePreview = React37.forwardRef(
+  ({ className, children, name, details, onRemove, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref, className: cn("flex w-full flex-col overflow-hidden rounded-lg border border-border", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex h-84 w-full items-center justify-center bg-accent-soft [&>img]:size-full [&>img]:object-contain", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MediaInfo, { name, details, onRemove, large: true })
   ] })
 );
 ImagePreview.displayName = "ImagePreview";
-var ImageThumbnails = React36.forwardRef(
-  ({ className, max, images, value, onValueChange, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var ImageThumbnails = React37.forwardRef(
+  ({ className, max, images, value, onValueChange, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     import_radix_ui20.ToggleGroup.Root,
     {
       ref,
@@ -2298,17 +2419,17 @@ var ImageThumbnails = React36.forwardRef(
       children: Array.from({ length: max }, (_, index) => {
         const image = images[index];
         if (!image) {
-          return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "span",
             {
               "aria-hidden": "true",
               className: "flex h-20 min-w-0 flex-1 items-center justify-center rounded-sm border border-dashed border-border text-accent-foreground",
-              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.Image, { size: 24 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react18.Image, { size: 24 })
             },
             `empty-${index}`
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           import_radix_ui20.ToggleGroup.Item,
           {
             value: image.id,
@@ -2318,7 +2439,7 @@ var ImageThumbnails = React36.forwardRef(
               "hover:bg-accent-soft hover:bg-none",
               "data-[state=on]:border-accent-foreground data-[state=on]:bg-accent-soft data-[state=on]:bg-none data-[state=on]:text-accent-foreground"
             ),
-            children: image.src ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { src: image.src, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.Image, { size: 24, "aria-hidden": true })
+            children: image.src ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: image.src, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react18.Image, { size: 24, "aria-hidden": true })
           },
           image.id
         );
@@ -2331,13 +2452,13 @@ var formatTime = (seconds) => {
   const total = Math.max(0, Math.floor(Number.isFinite(seconds) ? seconds : 0));
   return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
 };
-var VideoPlayer = React36.forwardRef(
+var VideoPlayer = React37.forwardRef(
   ({ className, src, name, details, onRemove, onMore, initialTime = 0, initialDuration = 0, ...props }, ref) => {
-    const video = React36.useRef(null);
-    const [playing, setPlaying] = React36.useState(false);
-    const [time, setTime] = React36.useState(initialTime);
-    const [duration, setDuration] = React36.useState(initialDuration);
-    const [volume, setVolume] = React36.useState(1);
+    const video = React37.useRef(null);
+    const [playing, setPlaying] = React37.useState(false);
+    const [time, setTime] = React37.useState(initialTime);
+    const [duration, setDuration] = React37.useState(initialDuration);
+    const [volume, setVolume] = React37.useState(1);
     const muted = volume === 0;
     const toggle2 = () => {
       const el = video.current;
@@ -2345,9 +2466,9 @@ var VideoPlayer = React36.forwardRef(
       if (el.paused) void el.play();
       else el.pause();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref, className: cn("flex w-full flex-col overflow-hidden rounded-lg border border-border bg-surface", className), ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative flex h-60.5 w-full items-end bg-accent-soft", children: [
-        src && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref, className: cn("flex w-full flex-col overflow-hidden rounded-lg border border-border bg-surface", className), ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative flex h-60.5 w-full items-end bg-accent-soft", children: [
+        src && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "video",
           {
             ref: video,
@@ -2360,8 +2481,8 @@ var VideoPlayer = React36.forwardRef(
             onVolumeChange: (event) => setVolume(event.currentTarget.muted ? 0 : event.currentTarget.volume)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative flex w-full flex-col gap-2 bg-surface-foreground bg-linear-to-r from-primary/30 to-primary/30 px-4 pt-3 pb-4 text-surface", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative flex w-full flex-col gap-2 bg-surface-foreground bg-linear-to-r from-primary/30 to-primary/30 px-4 pt-3 pb-4 text-surface", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
             import_radix_ui20.Slider.Root,
             {
               min: 0,
@@ -2375,31 +2496,31 @@ var VideoPlayer = React36.forwardRef(
               },
               className: "relative flex h-4 w-full touch-none items-center select-none",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui20.Slider.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-xxs bg-surface/20", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui20.Slider.Range, { className: "absolute h-full bg-accent-foreground" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui20.Slider.Thumb, { "aria-label": "Seek", className: "block size-3 rounded-full border-2 border-surface bg-surface shadow-sm" })
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_radix_ui20.Slider.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-xxs bg-surface/20", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_radix_ui20.Slider.Range, { className: "absolute h-full bg-accent-foreground" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_radix_ui20.Slider.Thumb, { "aria-label": "Seek", className: "block size-3 rounded-full border-2 border-surface bg-surface shadow-sm" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 "button",
                 {
                   type: "button",
                   "aria-label": playing ? "Pause" : "Play",
                   onClick: toggle2,
                   className: "inline-flex size-10 items-center justify-center rounded-full bg-surface/12 text-surface transition-colors hover:bg-surface/20",
-                  children: playing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.Pause, { size: 16, weight: "fill", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.Play, { size: 16, weight: "fill", "aria-hidden": true })
+                  children: playing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react18.Pause, { size: 16, weight: "fill", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react18.Play, { size: 16, weight: "fill", "aria-hidden": true })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-ui-label whitespace-nowrap text-surface/80", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "text-ui-label whitespace-nowrap text-surface/80", children: [
                 formatTime(time),
                 " / ",
                 formatTime(duration)
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 VolumeControl,
                 {
                   volume,
@@ -2412,41 +2533,41 @@ var VideoPlayer = React36.forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 "button",
                 {
                   type: "button",
                   "aria-label": "Full screen",
                   onClick: () => void video.current?.requestFullscreen?.(),
                   className: "inline-flex size-10 items-center justify-center rounded-md text-surface transition-colors hover:bg-surface/12",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.CornersOut, { size: 16, "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react18.CornersOut, { size: 16, "aria-hidden": true })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 "button",
                 {
                   type: "button",
                   "aria-label": "More",
                   onClick: onMore,
                   className: "inline-flex size-10 items-center justify-center rounded-md text-surface transition-colors hover:bg-surface/12",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.DotsThree, { size: 16, "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react18.DotsThree, { size: 16, "aria-hidden": true })
                 }
               )
             ] })
           ] })
         ] })
       ] }),
-      name && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MediaInfo, { name, details, onRemove }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "sr-only", "aria-live": "polite", children: muted ? "Muted" : "" })
+      name && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MediaInfo, { name, details, onRemove }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "sr-only", "aria-live": "polite", children: muted ? "Muted" : "" })
     ] });
   }
 );
 VideoPlayer.displayName = "VideoPlayer";
 function VolumeControl({ volume, onVolumeChange, className }) {
-  const last = React36.useRef(volume || 1);
+  const last = React37.useRef(volume || 1);
   if (volume > 0) last.current = volume;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("group/volume flex items-center", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-0 overflow-hidden opacity-0 transition-all group-focus-within/volume:w-16 group-focus-within/volume:opacity-100 group-hover/volume:w-16 group-hover/volume:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("group/volume flex items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-0 overflow-hidden opacity-0 transition-all group-focus-within/volume:w-16 group-focus-within/volume:opacity-100 group-hover/volume:w-16 group-hover/volume:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       import_radix_ui20.Slider.Root,
       {
         min: 0,
@@ -2456,32 +2577,32 @@ function VolumeControl({ volume, onVolumeChange, className }) {
         onValueChange: ([next]) => next !== void 0 && onVolumeChange(next),
         className: "relative flex h-4 w-14 touch-none items-center select-none",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui20.Slider.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-xxs bg-surface/20", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui20.Slider.Range, { className: "absolute h-full bg-surface" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_radix_ui20.Slider.Thumb, { "aria-label": "Volume", className: "block size-3 rounded-full bg-surface shadow-sm" })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_radix_ui20.Slider.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-xxs bg-surface/20", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_radix_ui20.Slider.Range, { className: "absolute h-full bg-surface" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_radix_ui20.Slider.Thumb, { "aria-label": "Volume", className: "block size-3 rounded-full bg-surface shadow-sm" })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "button",
       {
         type: "button",
         "aria-label": volume === 0 ? "Unmute" : "Mute",
         onClick: () => onVolumeChange(volume === 0 ? last.current : 0),
         className: "inline-flex size-10 items-center justify-center rounded-md text-surface transition-colors hover:bg-surface/12",
-        children: volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.SpeakerSimpleX, { size: 16, "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react17.SpeakerSimpleHigh, { size: 16, "aria-hidden": true })
+        children: volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react18.SpeakerSimpleX, { size: 16, "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react18.SpeakerSimpleHigh, { size: 16, "aria-hidden": true })
       }
     )
   ] });
 }
 
 // src/components/Question Types/OpenEndAnswer.tsx
-var React37 = __toESM(require("react"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var OpenEndAnswer = React37.forwardRef(
+var React38 = __toESM(require("react"), 1);
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var OpenEndAnswer = React38.forwardRef(
   ({ value, defaultValue, onChange, maxLength = 1e3, placeholder = "Write your answer", ...props }, ref) => {
-    const [internal, setInternal] = React37.useState(String(defaultValue ?? ""));
+    const [internal, setInternal] = React38.useState(String(defaultValue ?? ""));
     const text = value !== void 0 ? String(value) : internal;
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Textarea,
       {
         ref,
@@ -2501,10 +2622,10 @@ var OpenEndAnswer = React37.forwardRef(
 OpenEndAnswer.displayName = "OpenEndAnswer";
 
 // src/components/Question Types/QuestionCard.tsx
-var React38 = __toESM(require("react"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var QuestionCard = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var React39 = __toESM(require("react"), 1);
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var QuestionCard = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       ref,
@@ -2516,23 +2637,25 @@ var QuestionCard = React38.forwardRef(
 QuestionCard.displayName = "QuestionCard";
 
 // src/components/Question Types/QuestionEditorCard.tsx
-var React40 = __toESM(require("react"), 1);
-var import_react19 = require("@phosphor-icons/react");
+var React41 = __toESM(require("react"), 1);
+var import_react20 = require("@phosphor-icons/react");
 
 // src/components/Question Types/QuestionHeader.tsx
-var React39 = __toESM(require("react"), 1);
-var import_react18 = require("@phosphor-icons/react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var React40 = __toESM(require("react"), 1);
+var import_react19 = require("@phosphor-icons/react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var eyebrow = "text-ui-caption uppercase text-secondary-muted-foreground";
-var QuestionHeader = React39.forwardRef(
+var QuestionHeader = React40.forwardRef(
   ({ className, number, title, required, error, onDismissError, editor, onTitleChange, actions, maxLength = 2e3, active, showCounter = true, ...props }, ref) => {
+    const [draft, setDraft] = React40.useState(null);
     const label = String(number).padStart(2, "0");
     const showError = error !== void 0 && error !== false;
     if (editor) {
       const text = typeof title === "string" ? title : "";
-      return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ref, className: cn("group/header flex w-full flex-col gap-2", className), ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      const count = (draft ?? text).length;
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: cn("group/header flex w-full flex-col gap-2", className), ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
             "span",
             {
               className: cn(
@@ -2540,43 +2663,51 @@ var QuestionHeader = React39.forwardRef(
                 active ? "bg-accent-soft text-accent-soft-foreground" : "bg-secondary bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react18.DotsSixVertical, { size: 16, "aria-hidden": true, className: "hidden shrink-0 group-hover/handle:block" }),
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react19.DotsSixVertical, { size: 16, "aria-hidden": true, className: "hidden shrink-0 group-hover/handle:block" }),
                 "Question ",
                 number
               ]
             }
           ),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex items-center gap-2 opacity-0 transition-opacity group-focus-within/header:opacity-100 group-hover/header:opacity-100", children: actions })
+          actions && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex items-center gap-2 opacity-0 transition-opacity group-focus-within/header:opacity-100 group-hover/header:opacity-100", children: actions })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          "textarea",
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          InlineEdit,
           {
-            rows: 1,
+            variant: "question",
+            multiline: true,
+            selected: active,
+            className: "-mx-3 w-auto",
             "aria-label": "Question title",
+            placeholder: "Click to write the question text",
             value: text,
             maxLength,
-            onChange: (event) => onTitleChange?.(event.target.value),
-            className: "field-sizing-content w-full resize-none bg-transparent text-heading-h4 text-surface-foreground outline-none"
+            onValueChange: onTitleChange,
+            onDraftChange: setDraft,
+            onEditingChange: (editing) => {
+              if (!editing) setDraft(null);
+            },
+            textClassName: "text-heading-h4"
           }
         ),
-        showCounter && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-ui-caption text-secondary-muted-foreground", children: [
-          text.length,
+        showCounter && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { className: "text-ui-caption text-secondary-muted-foreground", children: [
+          count,
           "/",
           maxLength,
           " characters"
         ] })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
-      showError && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ToastInline, { variant: "destructive", onClose: onDismissError, className: "min-h-10", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-ui-label text-destructive", children: error === true ? "This question is mandatory." : error }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: eyebrow, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+      showError && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ToastInline, { variant: "destructive", onClose: onDismissError, className: "min-h-10", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-ui-label text-destructive", children: error === true ? "This question is mandatory." : error }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { className: eyebrow, children: [
         "Question ",
         label
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("h3", { className: "text-heading-h4 text-surface-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("h3", { className: "text-heading-h4 text-surface-foreground", children: [
         title,
-        required && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": "true", className: "text-destructive", children: "*" }),
-        required && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "sr-only", children: " (required)" })
+        required && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "aria-hidden": "true", className: "text-destructive", children: "*" }),
+        required && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "sr-only", children: " (required)" })
       ] })
     ] });
   }
@@ -2584,8 +2715,8 @@ var QuestionHeader = React39.forwardRef(
 QuestionHeader.displayName = "QuestionHeader";
 
 // src/components/Question Types/QuestionEditorCard.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var QuestionEditorCard = React40.forwardRef(
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var QuestionEditorCard = React41.forwardRef(
   ({
     className,
     number,
@@ -2606,14 +2737,14 @@ var QuestionEditorCard = React40.forwardRef(
     ...props
   }, ref) => {
     const footer = active && (countLabel != null || onAdd || onPaste);
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "div",
       {
         ref,
         className: cn("group/editor flex w-full items-start gap-2", className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
             "div",
             {
               className: cn(
@@ -2621,9 +2752,9 @@ var QuestionEditorCard = React40.forwardRef(
                 active ? "border-accent" : "border-border"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-col p-6", footer ? "gap-5" : "gap-4"), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col gap-4", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col p-6", footer ? "gap-5" : "gap-4"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-4", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                       QuestionHeader,
                       {
                         editor: true,
@@ -2633,8 +2764,8 @@ var QuestionEditorCard = React40.forwardRef(
                         active,
                         showCounter: !!active,
                         maxLength,
-                        actions: actions ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                        actions: actions ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             Button,
                             {
                               type: "button",
@@ -2642,10 +2773,10 @@ var QuestionEditorCard = React40.forwardRef(
                               size: "icon-sm",
                               "aria-label": "Duplicate question",
                               onClick: onDuplicate,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react19.Copy, { size: 16, "aria-hidden": true })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react20.Copy, { size: 16, "aria-hidden": true })
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             Button,
                             {
                               type: "button",
@@ -2653,10 +2784,10 @@ var QuestionEditorCard = React40.forwardRef(
                               size: "icon-sm",
                               "aria-label": "Delete question",
                               onClick: onDelete,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react19.Trash, { size: 16, "aria-hidden": true })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react20.Trash, { size: 16, "aria-hidden": true })
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                             Button,
                             {
                               type: "button",
@@ -2664,7 +2795,7 @@ var QuestionEditorCard = React40.forwardRef(
                               size: "icon-sm",
                               "aria-label": "Preview question",
                               onClick: onPreview,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react19.Eye, { size: 16, "aria-hidden": true })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react20.Eye, { size: 16, "aria-hidden": true })
                             }
                           )
                         ] })
@@ -2672,10 +2803,10 @@ var QuestionEditorCard = React40.forwardRef(
                     ),
                     children
                   ] }),
-                  footer && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-ui-caption text-secondary-muted-foreground", children: countLabel }),
-                    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      onAdd && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  footer && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-ui-caption text-secondary-muted-foreground", children: countLabel }),
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      onAdd && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         Button,
                         {
                           type: "button",
@@ -2683,10 +2814,10 @@ var QuestionEditorCard = React40.forwardRef(
                           size: "icon",
                           "aria-label": "Add choice",
                           onClick: onAdd,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react19.Plus, { size: 16, "aria-hidden": true })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react20.Plus, { size: 16, "aria-hidden": true })
                         }
                       ),
-                      onPaste && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                      onPaste && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         Button,
                         {
                           type: "button",
@@ -2694,17 +2825,17 @@ var QuestionEditorCard = React40.forwardRef(
                           size: "icon",
                           "aria-label": "Paste choices",
                           onClick: onPaste,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react19.Clipboard, { size: 16, "aria-hidden": true })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react20.Clipboard, { size: 16, "aria-hidden": true })
                         }
                       )
                     ] })
                   ] })
                 ] }),
-                note && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "border-t border-border px-2 py-2 text-body-small text-surface-foreground", children: note })
+                note && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "border-t border-border px-2 py-2 text-body-small text-surface-foreground", children: note })
               ]
             }
           ),
-          onAskAi && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          onAskAi && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             Button,
             {
               type: "button",
@@ -2713,7 +2844,7 @@ var QuestionEditorCard = React40.forwardRef(
               "aria-label": "Ask AI",
               onClick: onAskAi,
               className: "shrink-0 opacity-0 transition-opacity group-hover/editor:opacity-100 group-focus-within/editor:opacity-100 focus-visible:opacity-100",
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react19.Sparkle, { size: 16, "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react20.Sparkle, { size: 16, "aria-hidden": true })
             }
           )
         ]
@@ -2724,33 +2855,33 @@ var QuestionEditorCard = React40.forwardRef(
 QuestionEditorCard.displayName = "QuestionEditorCard";
 
 // src/components/Question Types/QuestionNavItem.tsx
-var React42 = __toESM(require("react"), 1);
-var import_react21 = require("@phosphor-icons/react");
+var React43 = __toESM(require("react"), 1);
+var import_react22 = require("@phosphor-icons/react");
 var import_radix_ui21 = require("radix-ui");
 
 // src/components/Question Types/QuestionTypeIcon.tsx
-var React41 = require("react");
-var import_react20 = require("@phosphor-icons/react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var React42 = require("react");
+var import_react21 = require("@phosphor-icons/react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var icons = {
-  "select-one": import_react20.RadioButton,
-  "select-multiple": import_react20.CheckSquare,
-  ranking: import_react20.ListNumbers,
-  upload: import_react20.FileArrowUp,
-  rating: import_react20.StarHalf,
-  "open-end": import_react20.ChatsCircle
+  "select-one": import_react21.RadioButton,
+  "select-multiple": import_react21.CheckSquare,
+  ranking: import_react21.ListNumbers,
+  upload: import_react21.FileArrowUp,
+  rating: import_react21.StarHalf,
+  "open-end": import_react21.ChatsCircle
 };
 function QuestionTypeIcon({ type, size = 22.5, className, ...props }) {
   const Icon = icons[type];
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { size, weight: "duotone", "aria-hidden": true, className: className ?? "text-accent-foreground", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { size, weight: "duotone", "aria-hidden": true, className: className ?? "text-accent-foreground", ...props });
 }
 
 // src/components/Question Types/QuestionNavItem.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var QuestionNavItem = React42.forwardRef(
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var QuestionNavItem = React43.forwardRef(
   ({ className, questionType = "select-one", selected, error, asChild, children, ...props }, ref) => {
     const Comp = asChild ? import_radix_ui21.Slot.Root : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       Comp,
       {
         ref,
@@ -2766,12 +2897,12 @@ var QuestionNavItem = React42.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { "aria-hidden": "true", className: "relative flex size-4 shrink-0 items-center justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react21.DotsSixVertical, { size: 16, className: "hidden group-hover/nav:block" }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "group-hover/nav:hidden", children: error ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react21.Warning, { size: 16, className: "text-destructive" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(QuestionTypeIcon, { type: questionType, size: 16 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { "aria-hidden": "true", className: "relative flex size-4 shrink-0 items-center justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react22.DotsSixVertical, { size: 16, className: "hidden group-hover/nav:block" }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "group-hover/nav:hidden", children: error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react22.Warning, { size: 16, className: "text-destructive" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(QuestionTypeIcon, { type: questionType, size: 16 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "min-w-0 flex-1 truncate", children }),
-          error && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "sr-only", children: ", has errors" })
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "min-w-0 flex-1 truncate", children }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "sr-only", children: ", has errors" })
         ]
       }
     );
@@ -2780,14 +2911,14 @@ var QuestionNavItem = React42.forwardRef(
 QuestionNavItem.displayName = "QuestionNavItem";
 
 // src/components/Question Types/QuestionOption.tsx
-var React43 = __toESM(require("react"), 1);
-var import_react22 = require("@phosphor-icons/react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var React44 = __toESM(require("react"), 1);
+var import_react23 = require("@phosphor-icons/react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var optionClasses = "flex w-full max-w-150 cursor-pointer items-center gap-2 rounded-md border border-border bg-surface px-4 py-2 text-body-base text-surface-foreground transition-colors hover:border-input hover:bg-accent-soft hover:shadow-md has-[[data-state=checked]]:border-accent-foreground has-[[data-state=checked]]:hover:border-accent-foreground has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50";
 function QuestionOption(props) {
-  const id = React43.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("label", { htmlFor: id, className: cn(optionClasses, props.className), children: [
-    props.kind === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  const id = React44.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("label", { htmlFor: id, className: cn(optionClasses, props.className), children: [
+    props.kind === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       Checkbox,
       {
         id,
@@ -2796,16 +2927,16 @@ function QuestionOption(props) {
         onCheckedChange: (next) => props.onCheckedChange?.(next === true),
         disabled: props.disabled
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(RadioGroupItem, { id, value: props.value, disabled: props.disabled }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "min-w-0 flex-1", children: props.label })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(RadioGroupItem, { id, value: props.value, disabled: props.disabled }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "min-w-0 flex-1", children: props.label })
   ] });
 }
-var QuestionOtherOption = React43.forwardRef(
+var QuestionOtherOption = React44.forwardRef(
   ({ className, onSubmit, confirmLabel = "Confirm answer", placeholder = "Type your answer", ...props }, ref) => {
-    const inner = React43.useRef(null);
-    React43.useImperativeHandle(ref, () => inner.current);
+    const inner = React44.useRef(null);
+    React44.useImperativeHandle(ref, () => inner.current);
     const submit = () => onSubmit?.(inner.current?.value ?? "");
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       "div",
       {
         className: cn(
@@ -2813,7 +2944,7 @@ var QuestionOtherOption = React43.forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             "input",
             {
               ref: inner,
@@ -2829,7 +2960,7 @@ var QuestionOtherOption = React43.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { type: "button", variant: "subtle", size: "icon-sm", "aria-label": confirmLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react22.Check, { size: 16, "aria-hidden": true }) })
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { type: "button", variant: "subtle", size: "icon-sm", "aria-label": confirmLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react23.Check, { size: 16, "aria-hidden": true }) })
         ]
       }
     );
@@ -2837,10 +2968,10 @@ var QuestionOtherOption = React43.forwardRef(
 );
 QuestionOtherOption.displayName = "QuestionOtherOption";
 function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex w-full items-center gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex h-11.5 min-w-0 flex-1 items-center gap-2 rounded-md border border-border bg-surface px-4 py-2 focus-within:border-input-accent hover:border-input hover:shadow-md", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react22.DotsSixVertical, { size: 20, "aria-hidden": true, className: "shrink-0 text-surface-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("flex w-full items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex h-11.5 min-w-0 flex-1 items-center gap-2 rounded-md border border-border bg-surface px-4 py-2 focus-within:border-input-accent hover:border-input hover:shadow-md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react23.DotsSixVertical, { size: 20, "aria-hidden": true, className: "shrink-0 text-surface-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "input",
         {
           "aria-label": "Option label",
@@ -2850,15 +2981,15 @@ function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": "Remove option", onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react22.Trash, { size: 16, "aria-hidden": true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Add option", onClick: onAdd, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react22.Plus, { size: 16, "aria-hidden": true }) })
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": "Remove option", onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react23.Trash, { size: 16, "aria-hidden": true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Add option", onClick: onAdd, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react23.Plus, { size: 16, "aria-hidden": true }) })
   ] });
 }
 
 // src/components/Question Types/RankList.tsx
-var React44 = __toESM(require("react"), 1);
-var import_react23 = require("@phosphor-icons/react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var React45 = __toESM(require("react"), 1);
+var import_react24 = require("@phosphor-icons/react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function move(list, from, to) {
   if (from === to || to < 0 || to >= list.length) return list;
   const next = list.slice();
@@ -2866,13 +2997,13 @@ function move(list, from, to) {
   next.splice(to, 0, item);
   return next;
 }
-var RankList = React44.forwardRef(
+var RankList = React45.forwardRef(
   ({ className, items, onItemsChange, ...props }, ref) => {
-    const [dragIndex, setDragIndex] = React44.useState(null);
-    const [announcement, setAnnouncement] = React44.useState("");
-    const handles = React44.useRef(/* @__PURE__ */ new Map());
-    const refocus = React44.useRef(null);
-    React44.useEffect(() => {
+    const [dragIndex, setDragIndex] = React45.useState(null);
+    const [announcement, setAnnouncement] = React45.useState("");
+    const handles = React45.useRef(/* @__PURE__ */ new Map());
+    const refocus = React45.useRef(null);
+    React45.useEffect(() => {
       if (refocus.current) {
         handles.current.get(refocus.current)?.focus();
         refocus.current = null;
@@ -2885,8 +3016,8 @@ var RankList = React44.forwardRef(
       setAnnouncement(`Moved to position ${to + 1} of ${items.length}`);
       onItemsChange(next);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ol", { ref, className: cn("flex w-full max-w-150 flex-col gap-4", className), ...props, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("ol", { ref, className: cn("flex w-full max-w-150 flex-col gap-4", className), ...props, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
         "li",
         {
           draggable: true,
@@ -2903,7 +3034,7 @@ var RankList = React44.forwardRef(
             dragIndex === index && "opacity-50"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               "button",
               {
                 type: "button",
@@ -2922,10 +3053,10 @@ var RankList = React44.forwardRef(
                   }
                 },
                 className: "inline-flex shrink-0 cursor-grab rounded-xs text-surface-foreground",
-                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react23.DotsSixVertical, { size: 16, "aria-hidden": true })
+                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react24.DotsSixVertical, { size: 16, "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               "span",
               {
                 "aria-hidden": "true",
@@ -2933,27 +3064,27 @@ var RankList = React44.forwardRef(
                 children: index + 1
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "min-w-0 flex-1", children: item.label })
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "min-w-0 flex-1", children: item.label })
           ]
         },
         item.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })
     ] });
   }
 );
 RankList.displayName = "RankList";
 
 // src/components/Question Types/RatingScale.tsx
-var React45 = __toESM(require("react"), 1);
+var React46 = __toESM(require("react"), 1);
 var import_radix_ui22 = require("radix-ui");
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var RatingScale = React45.forwardRef(
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var RatingScale = React46.forwardRef(
   ({ className, max = 5, value, defaultValue, onValueChange, lowLabel, highLabel, ...props }, ref) => {
-    const [internal, setInternal] = React45.useState(defaultValue);
+    const [internal, setInternal] = React46.useState(defaultValue);
     const current = value !== void 0 ? value : internal;
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("flex w-full max-w-150 flex-col gap-2", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("flex w-full max-w-150 flex-col gap-2", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         import_radix_ui22.ToggleGroup.Root,
         {
           ref,
@@ -2966,7 +3097,7 @@ var RatingScale = React45.forwardRef(
           },
           className: "flex gap-2",
           ...props,
-          children: Array.from({ length: max }, (_, i) => i + 1).map((n) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          children: Array.from({ length: max }, (_, i) => i + 1).map((n) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             import_radix_ui22.ToggleGroup.Item,
             {
               value: String(n),
@@ -2982,9 +3113,9 @@ var RatingScale = React45.forwardRef(
           ))
         }
       ),
-      (lowLabel != null || highLabel != null) && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex justify-between text-ui-caption text-secondary-muted-foreground", "aria-hidden": "true", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: lowLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: highLabel })
+      (lowLabel != null || highLabel != null) && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex justify-between text-ui-caption text-secondary-muted-foreground", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: lowLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: highLabel })
       ] })
     ] });
   }
@@ -2992,27 +3123,27 @@ var RatingScale = React45.forwardRef(
 RatingScale.displayName = "RatingScale";
 
 // src/components/Data Display/Progress.tsx
-var React46 = __toESM(require("react"), 1);
+var React47 = __toESM(require("react"), 1);
 var import_radix_ui23 = require("radix-ui");
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var Progress = React46.forwardRef(
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var Progress = React47.forwardRef(
   ({ className, value = 0, label, valueLabel, detailsStart, detailsEnd, ...props }, ref) => {
     const hasHeader = label != null || valueLabel != null;
     const hasDetails = detailsStart != null || detailsEnd != null;
     const clamped = Math.min(100, Math.max(0, value ?? 0));
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("flex w-full flex-col gap-2", className), children: [
-      hasHeader && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between text-ui-label text-surface-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: valueLabel === true ? `${Math.round(clamped)}%` : valueLabel })
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("flex w-full flex-col gap-2", className), children: [
+      hasHeader && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between text-ui-label text-surface-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: valueLabel === true ? `${Math.round(clamped)}%` : valueLabel })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         import_radix_ui23.Progress.Root,
         {
           ref,
           value: clamped,
           className: "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
           ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             import_radix_ui23.Progress.Indicator,
             {
               className: "h-full rounded-full bg-accent transition-[width]",
@@ -3021,9 +3152,9 @@ var Progress = React46.forwardRef(
           )
         }
       ),
-      hasDetails && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-start justify-between text-ui-label leading-5 text-secondary-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: detailsStart }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: detailsEnd })
+      hasDetails && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-start justify-between text-ui-label leading-5 text-secondary-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: detailsStart }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: detailsEnd })
       ] })
     ] });
   }
@@ -3031,11 +3162,11 @@ var Progress = React46.forwardRef(
 Progress.displayName = "Progress";
 
 // src/components/Data Display/Table.tsx
-var React47 = __toESM(require("react"), 1);
-var import_react24 = require("@phosphor-icons/react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var Table = React47.forwardRef(
-  ({ className, containerClassName, striped, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cn("relative w-full overflow-auto rounded-lg border border-border bg-surface", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+var React48 = __toESM(require("react"), 1);
+var import_react25 = require("@phosphor-icons/react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Table = React48.forwardRef(
+  ({ className, containerClassName, striped, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("relative w-full overflow-auto rounded-lg border border-border bg-surface", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "table",
     {
       ref,
@@ -3046,16 +3177,16 @@ var Table = React47.forwardRef(
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = React47.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { ref, className, ...props })
+var TableHeader = React48.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("thead", { ref, className, ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React47.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tbody", { ref, className, ...props })
+var TableBody = React48.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tbody", { ref, className, ...props })
 );
 TableBody.displayName = "TableBody";
-var TableRow = React47.forwardRef(
-  ({ className, selected, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+var TableRow = React48.forwardRef(
+  ({ className, selected, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "tr",
     {
       ref,
@@ -3072,10 +3203,10 @@ var TableRow = React47.forwardRef(
 );
 TableRow.displayName = "TableRow";
 var ariaSort = { none: "none", asc: "ascending", desc: "descending" };
-var TableHead = React47.forwardRef(
+var TableHead = React48.forwardRef(
   ({ className, align = "left", sortable, sort = "none", onSort, checkbox, children, ...props }, ref) => {
-    const caret = sort === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react24.CaretUp, { size: 16, "aria-hidden": true, className: "shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react24.CaretDown, { size: 16, "aria-hidden": true, className: "shrink-0" });
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    const caret = sort === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react25.CaretUp, { size: 16, "aria-hidden": true, className: "shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react25.CaretDown, { size: 16, "aria-hidden": true, className: "shrink-0" });
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "th",
       {
         ref,
@@ -3088,7 +3219,7 @@ var TableHead = React47.forwardRef(
           className
         ),
         ...props,
-        children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+        children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
           "button",
           {
             type: "button",
@@ -3099,14 +3230,14 @@ var TableHead = React47.forwardRef(
               caret
             ]
           }
-        ) : checkbox ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex items-center justify-center", children }) : children
+        ) : checkbox ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-center justify-center", children }) : children
       }
     );
   }
 );
 TableHead.displayName = "TableHead";
-var TableCell = React47.forwardRef(
-  ({ className, align = "left", muted, checkbox, actions, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+var TableCell = React48.forwardRef(
+  ({ className, align = "left", muted, checkbox, actions, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "td",
     {
       ref,
@@ -3119,25 +3250,25 @@ var TableCell = React47.forwardRef(
         className
       ),
       ...props,
-      children: checkbox ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex items-center justify-center", children }) : actions ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex items-start justify-end gap-1", children }) : children
+      children: checkbox ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-center justify-center", children }) : actions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-start justify-end gap-1", children }) : children
     }
   )
 );
 TableCell.displayName = "TableCell";
 function TableCellTwoLines({ primary, secondary, avatar, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("flex items-center gap-2", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex items-center gap-2", className), ...props, children: [
     avatar,
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-0.5 whitespace-nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-ui-label text-surface-foreground", children: primary }),
-      secondary && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-ui-caption text-secondary-muted-foreground", children: secondary })
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-0.5 whitespace-nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-ui-label text-surface-foreground", children: primary }),
+      secondary && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-ui-caption text-secondary-muted-foreground", children: secondary })
     ] })
   ] });
 }
 
 // src/components/Data Display/StatCard.tsx
-var React48 = __toESM(require("react"), 1);
+var React49 = __toESM(require("react"), 1);
 var import_class_variance_authority6 = require("class-variance-authority");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var statCardVariants = (0, import_class_variance_authority6.cva)("flex min-w-0 flex-col gap-2 rounded-md border p-3", {
   variants: {
     variant: {
@@ -3147,11 +3278,11 @@ var statCardVariants = (0, import_class_variance_authority6.cva)("flex min-w-0 f
   },
   defaultVariants: { variant: "default" }
 });
-var StatCard = React48.forwardRef(
-  ({ className, variant, label, value, icon, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ref, className: cn(statCardVariants({ variant }), className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "truncate text-ui-caption text-secondary-muted-foreground", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("p", { className: "flex items-center gap-2 text-body-base text-surface-foreground", children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { "aria-hidden": "true", className: "inline-flex size-6 shrink-0 items-center justify-center", children: icon }),
+var StatCard = React49.forwardRef(
+  ({ className, variant, label, value, icon, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { ref, className: cn(statCardVariants({ variant }), className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "truncate text-ui-caption text-secondary-muted-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: "flex items-center gap-2 text-body-base text-surface-foreground", children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": "true", className: "inline-flex size-6 shrink-0 items-center justify-center", children: icon }),
       value
     ] })
   ] })
@@ -3159,13 +3290,13 @@ var StatCard = React48.forwardRef(
 StatCard.displayName = "StatCard";
 
 // src/components/Research-Specific/ActivityStructure.tsx
-var React50 = __toESM(require("react"), 1);
+var React51 = __toESM(require("react"), 1);
 
 // src/components/Tags & Badges/EditableTag.tsx
-var React49 = __toESM(require("react"), 1);
-var import_react25 = require("@phosphor-icons/react");
+var React50 = __toESM(require("react"), 1);
+var import_react26 = require("@phosphor-icons/react");
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var editableTagVariants = (0, import_class_variance_authority7.cva)(
   "inline-flex h-6.5 items-center whitespace-nowrap rounded-sm py-1 text-ui-caption transition-colors",
   {
@@ -3180,27 +3311,27 @@ var editableTagVariants = (0, import_class_variance_authority7.cva)(
     defaultVariants: { type: "default" }
   }
 );
-var EditableTag = React49.forwardRef(
+var EditableTag = React50.forwardRef(
   ({ className, type = "default", icon, onRemove, onClick, children, ...props }, ref) => {
     const classes = cn(editableTagVariants({ type }), className);
-    const leading = type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react25.Plus, { size: 12, "aria-hidden": true }) : icon !== void 0 ? icon : type === "default" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react25.Crown, { size: 12, weight: "fill", "aria-hidden": true }) : null;
+    const leading = type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react26.Plus, { size: 12, "aria-hidden": true }) : icon !== void 0 ? icon : type === "default" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react26.Crown, { size: 12, weight: "fill", "aria-hidden": true }) : null;
     if (type === "add" || type === "multiple" && onClick) {
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("button", { ref, type: "button", className: classes, onClick, ...props, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("button", { ref, type: "button", className: classes, onClick, ...props, children: [
         leading,
         children
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { ref, className: classes, ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { ref, className: classes, ...props, children: [
       leading,
       children,
-      onRemove && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      onRemove && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "button",
         {
           type: "button",
           "aria-label": typeof children === "string" ? `Remove ${children}` : "Remove",
           onClick: onRemove,
           className: "inline-flex size-3 items-center justify-center rounded-xs",
-          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react25.X, { size: 12, "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react26.X, { size: 12, "aria-hidden": true })
         }
       )
     ] });
@@ -3209,23 +3340,23 @@ var EditableTag = React49.forwardRef(
 EditableTag.displayName = "EditableTag";
 
 // src/components/Research-Specific/ActivityStructure.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var ActivityStructure = React50.forwardRef(
-  ({ className, title = "Activity Structure", stats, sections, onRemoveTag, onAddTag, addTagLabel = "Add tag", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var ActivityStructure = React51.forwardRef(
+  ({ className, title = "Activity Structure", stats, sections, onRemoveTag, onAddTag, addTagLabel = "Add tag", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "section",
     {
       ref,
       className: cn("flex w-full max-w-96.5 flex-col gap-4 rounded-2xl border border-border bg-surface p-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h3", { className: "text-heading-h3 text-surface-foreground", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map(({ id, ...stat }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StatCard, { ...stat }, id)) }),
-        sections?.map(({ id, heading, body, tags }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h4", { className: "text-heading-h4 text-surface-foreground", children: heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-body-base text-surface-foreground", children: body }),
-          (tags?.length || onAddTag) && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-            tags?.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(EditableTag, { type: "editable", onRemove: onRemoveTag && (() => onRemoveTag(id, tag)), children: tag }, tag)),
-            onAddTag && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(EditableTag, { type: "add", onClick: () => onAddTag(id), children: addTagLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h3", { className: "text-heading-h3 text-surface-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map(({ id, ...stat }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StatCard, { ...stat }, id)) }),
+        sections?.map(({ id, heading, body, tags }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h4", { className: "text-heading-h4 text-surface-foreground", children: heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-body-base text-surface-foreground", children: body }),
+          (tags?.length || onAddTag) && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+            tags?.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EditableTag, { type: "editable", onRemove: onRemoveTag && (() => onRemoveTag(id, tag)), children: tag }, tag)),
+            onAddTag && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EditableTag, { type: "add", onClick: () => onAddTag(id), children: addTagLabel })
           ] })
         ] }, id))
       ]
@@ -3234,11 +3365,11 @@ var ActivityStructure = React50.forwardRef(
 );
 ActivityStructure.displayName = "ActivityStructure";
 
-// src/components/Tags & Badges/RoleTag.tsx
-var React51 = __toESM(require("react"), 1);
-var import_react26 = require("@phosphor-icons/react");
+// src/components/Tags & Badges/Badge.tsx
+var React52 = __toESM(require("react"), 1);
+var import_react27 = require("@phosphor-icons/react");
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var roleTagVariants = (0, import_class_variance_authority8.cva)(
   "group inline-flex h-6 items-center whitespace-nowrap rounded-sm py-1 text-ui-caption transition-colors",
   {
@@ -3247,7 +3378,9 @@ var roleTagVariants = (0, import_class_variance_authority8.cva)(
         primary: "bg-primary-soft px-2.5 text-primary-soft-foreground",
         secondary: "bg-secondary bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 px-2.5 text-secondary-muted-foreground",
         question: "gap-1 bg-primary-soft pl-1 pr-2.5 text-plum-500",
-        interactable: "gap-1 pl-2.5 pr-2.5 hover:pl-1"
+        interactable: "gap-1 pl-2.5 pr-2.5 hover:pl-1",
+        id: "gap-1 bg-secondary bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 px-2.5 tabular-nums text-surface-foreground",
+        count: "min-w-6 justify-center rounded-full bg-secondary bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 px-2 tabular-nums text-surface-foreground"
       },
       selected: { true: "", false: "" }
     },
@@ -3262,11 +3395,11 @@ var roleTagVariants = (0, import_class_variance_authority8.cva)(
     defaultVariants: { type: "primary", selected: false }
   }
 );
-var RoleTag = React51.forwardRef(
+var Badge = React52.forwardRef(
   ({ className, type = "primary", selected = false, onClick, children, ...props }, ref) => {
     const classes = cn(roleTagVariants({ type, selected: type === "interactable" ? selected : false }), className);
     if (type === "interactable") {
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
         "button",
         {
           ref,
@@ -3276,24 +3409,25 @@ var RoleTag = React51.forwardRef(
           onClick,
           ...props,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react26.DotsSixVertical, { size: 16, "aria-hidden": true, className: "hidden shrink-0 group-hover:block" }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react27.DotsSixVertical, { size: 16, "aria-hidden": true, className: "hidden shrink-0 group-hover:block" }),
             children
           ]
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { ref, className: classes, ...props, children: [
-      type === "question" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react26.RadioButton, { size: 16, weight: "fill", "aria-hidden": true }),
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { ref, className: classes, ...props, children: [
+      type === "question" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react27.RadioButton, { size: 16, weight: "fill", "aria-hidden": true }),
+      type === "id" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-secondary-muted-foreground", children: "ID" }),
       children
     ] });
   }
 );
-RoleTag.displayName = "RoleTag";
+Badge.displayName = "Badge";
 
 // src/components/Utility/Pagination.tsx
-var React52 = __toESM(require("react"), 1);
-var import_react27 = require("@phosphor-icons/react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var React53 = __toESM(require("react"), 1);
+var import_react28 = require("@phosphor-icons/react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function getPaginationItems(page, pageCount, siblings = 1) {
   const keep = /* @__PURE__ */ new Set([1, pageCount]);
   for (let p = page - siblings; p <= page + siblings; p++) if (p >= 1 && p <= pageCount) keep.add(p);
@@ -3307,10 +3441,10 @@ function getPaginationItems(page, pageCount, siblings = 1) {
   });
   return items;
 }
-var Pagination = React52.forwardRef(
+var Pagination = React53.forwardRef(
   ({ className, page, pageCount, onPageChange, variant = "full", siblings = 1, ...props }, ref) => {
     const go = (next2) => onPageChange(Math.min(pageCount, Math.max(1, next2)));
-    const previous = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    const previous = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       Button,
       {
         type: "button",
@@ -3319,10 +3453,10 @@ var Pagination = React52.forwardRef(
         "aria-label": "Previous page",
         disabled: page <= 1,
         onClick: () => go(page - 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react27.ArrowLeft, { size: 16, "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react28.ArrowLeft, { size: 16, "aria-hidden": true })
       }
     );
-    const next = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    const next = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       Button,
       {
         type: "button",
@@ -3331,10 +3465,10 @@ var Pagination = React52.forwardRef(
         "aria-label": "Next page",
         disabled: page >= pageCount,
         onClick: () => go(page + 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react27.ArrowRight, { size: 16, "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react28.ArrowRight, { size: 16, "aria-hidden": true })
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       "nav",
       {
         ref,
@@ -3343,14 +3477,14 @@ var Pagination = React52.forwardRef(
         ...props,
         children: [
           previous,
-          variant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "text-body-small text-surface-foreground", "aria-live": "polite", children: [
+          variant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "text-body-small text-surface-foreground", "aria-live": "polite", children: [
             page,
             "/",
             pageCount
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { className: "flex items-center gap-2", children: getPaginationItems(page, pageCount, siblings).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("li", { children: item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "inline-flex size-8 items-center justify-center rounded-sm border border-border bg-surface text-surface-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react27.DotsThree, { size: 16, "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "sr-only", children: "More pages" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ul", { className: "flex items-center gap-2", children: getPaginationItems(page, pageCount, siblings).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("li", { children: item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "inline-flex size-8 items-center justify-center rounded-sm border border-border bg-surface text-surface-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react28.DotsThree, { size: 16, "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "sr-only", children: "More pages" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             Button,
             {
               type: "button",
@@ -3376,6 +3510,7 @@ Pagination.displayName = "Pagination";
   ActivityStructure,
   AskAiInput,
   AskAiToggle,
+  Badge,
   Button,
   Calendar,
   ChatChoices,
@@ -3421,6 +3556,7 @@ Pagination.displayName = "Pagination";
   FormMessage,
   ImagePreview,
   ImageThumbnails,
+  InlineEdit,
   Input,
   InputWithAction,
   Label,
@@ -3443,7 +3579,6 @@ Pagination.displayName = "Pagination";
   RadioGroupItem,
   RankList,
   RatingScale,
-  RoleTag,
   SearchBar,
   Select,
   SelectContent,