@olundot/ui 0.20.0-next.8 → 0.20.0-next.9

package/dist/index.js

@@ -456,9 +456,30 @@ var CopyButton = React2.forwardRef(
 CopyButton.displayName = "CopyButton";
 
 // src/components/ui/input.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { cva as cva2 } from "class-variance-authority";
 import { AlertCircle, CheckCircle2 } from "lucide-react";
+
+// src/components/ui/form-field-context.ts
+import * as React3 from "react";
+var FormFieldControlContext = React3.createContext(null);
+function useFormFieldControl() {
+  return React3.useContext(FormFieldControlContext);
+}
+function joinIds(...lists) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const list of lists) {
+    for (const id of list?.split(/\s+/) ?? []) {
+      if (id) ids.add(id);
+    }
+  }
+  return ids.size > 0 ? [...ids].join(" ") : void 0;
+}
+function FormFieldBoundary({ children }) {
+  return React3.createElement(FormFieldControlContext.Provider, { value: null }, children);
+}
+
+// src/components/ui/input.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var inputVariants = cva2(
   [
@@ -525,7 +546,7 @@ function mapInputSizeLegacy(inputSize) {
       return "lg";
   }
 }
-var Input = React3.forwardRef(
+var Input = React4.forwardRef(
   ({
     className,
     type,
@@ -548,21 +569,29 @@ var Input = React3.forwardRef(
   }, ref) => {
     const resolvedSize = size ?? mapInputSizeLegacy(inputSize) ?? "md";
     const resolvedFullWidth = fullWidth ?? true;
-    const generatedId = React3.useId();
-    const inputId = id ?? generatedId;
+    const field = useFormFieldControl();
+    const generatedId = React4.useId();
+    const inputId = field ? generatedId : id ?? generatedId;
+    const controlId = id ?? field?.controlId;
     const resolvedState = invalid || state === "error" ? "error" : state;
     const showDescription = resolvedState === "default" && Boolean(description);
     const showMessage = Boolean(message) && !showDescription;
     const messageId = showMessage ? `${inputId}-message` : void 0;
     const descriptionId = showDescription ? `${inputId}-description` : void 0;
-    const describedBy = [ariaDescribedBy, descriptionId, messageId].filter(Boolean).join(" ") || void 0;
+    const describedBy = joinIds(
+      ariaDescribedBy,
+      descriptionId,
+      messageId,
+      field?.describedBy
+    );
     const resolvedInvalid = resolvedState === "error" ? true : ariaInvalid ?? void 0;
+    const elementId = controlId ?? (label || message || description ? inputId : void 0);
     const control = /* @__PURE__ */ jsx3(
       "input",
       {
         type,
         ref,
-        id: label || message || description ? inputId : id,
+        id: elementId,
         required,
         disabled,
         readOnly,
@@ -589,7 +618,7 @@ var Input = React3.forwardRef(
             {
               "data-slot": "input-label",
               "data-required": required ? "true" : void 0,
-              htmlFor: inputId,
+              htmlFor: elementId,
               className: "pl-1 pb-1 text-sm font-medium leading-snug text-text-secondary",
               children: [
                 label,
@@ -645,7 +674,7 @@ var Input = React3.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/file-upload-zone.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { UploadCloud } from "lucide-react";
 import { cva as cva3 } from "class-variance-authority";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -782,7 +811,7 @@ function createFileListFromFiles(files) {
   files.forEach((file) => transfer.items.add(file));
   return transfer.files;
 }
-var FileUploadZone = React4.forwardRef(
+var FileUploadZone = React5.forwardRef(
   ({
     accept = ".csv,text/csv",
     className,
@@ -802,13 +831,13 @@ var FileUploadZone = React4.forwardRef(
     surface = "surface",
     ...props
   }, ref) => {
-    const generatedId = React4.useId();
+    const generatedId = React5.useId();
     const inputId = id ?? generatedId;
-    const inputRef = React4.useRef(null);
-    const [isDragging, setIsDragging] = React4.useState(false);
-    const [selectedFiles, setSelectedFiles] = React4.useState("");
+    const inputRef = React5.useRef(null);
+    const [isDragging, setIsDragging] = React5.useState(false);
+    const [selectedFiles, setSelectedFiles] = React5.useState("");
     const hasFile = selectedFiles.length > 0;
-    const pushFiles = React4.useCallback(
+    const pushFiles = React5.useCallback(
       (incomingFiles) => {
         if (!incomingFiles || incomingFiles.length === 0) {
           setSelectedFiles("");
@@ -968,7 +997,7 @@ var FileUploadZone = React4.forwardRef(
 FileUploadZone.displayName = "FileUploadZone";
 
 // src/components/ui/alert.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var SEM_FG = {
@@ -991,7 +1020,7 @@ var MARKER_ICON = {
 };
 var TITLE_LINE_HEIGHT = 21;
 var defaultEmphasis = (v) => v === "error" ? "strong" : "subtle";
-var Alert = React5.forwardRef(
+var Alert = React6.forwardRef(
   ({ variant = "info", emphasis, marker = "icon", title, children, onDismiss, style, ...rest }, ref) => {
     const weight = emphasis ?? defaultEmphasis(variant);
     const strong = weight === "strong";
@@ -1084,8 +1113,8 @@ function DismissButton({
   strong,
   fg
 }) {
-  const [hover, setHover] = React5.useState(false);
-  const [focus, setFocus] = React5.useState(false);
+  const [hover, setHover] = React6.useState(false);
+  const [focus, setFocus] = React6.useState(false);
   return /* @__PURE__ */ jsx5(
     "button",
     {
@@ -1117,22 +1146,19 @@ function DismissButton({
     }
   );
 }
-var InlineAlert = React5.forwardRef(
+var INLINE_LINE_HEIGHT = 1.4;
+var INLINE_ICON_SIZE = 12;
+var InlineAlert = React6.forwardRef(
   ({
     variant = "info",
-    emphasis = "subtle",
-    surface = "filled",
+    marker = "icon",
     children,
     style,
     "aria-live": ariaLive,
     ...rest
   }, ref) => {
-    const strong = emphasis === "strong";
     const fg = SEM_FG[variant];
-    const filled = surface === "filled";
-    const bg = strong ? SEM_BG[variant] : filled ? "var(--bg-surface)" : "transparent";
-    const border = strong ? "color-mix(in srgb, " + fg + " 26%, transparent)" : filled ? "var(--border-subtle)" : "transparent";
-    const textColor = strong ? fg : filled ? "var(--text-primary)" : "var(--text-secondary)";
+    const MarkerIcon = MARKER_ICON[variant];
     return /* @__PURE__ */ jsxs5(
       "div",
       {
@@ -1141,23 +1167,21 @@ var InlineAlert = React5.forwardRef(
         "aria-live": ariaLive ?? (variant === "error" ? "assertive" : "polite"),
         "data-slot": "inline-alert",
         "data-variant": variant,
-        "data-emphasis": emphasis,
-        "data-surface": surface,
+        "data-marker": marker,
         style: {
           display: "inline-flex",
           width: "fit-content",
           maxWidth: "100%",
-          alignItems: "center",
-          gap: 7,
-          borderRadius: "var(--radius-sm)",
-          background: bg,
-          border: "1px solid " + border,
-          padding: strong || filled ? "6px 10px" : "2px 0",
+          alignItems: "flex-start",
+          gap: "var(--space-2)",
+          background: "transparent",
+          border: "1px solid transparent",
+          padding: "2px 0",
           fontFamily: "var(--font-sans)",
           fontSize: 12,
           fontWeight: 500,
-          lineHeight: 1.4,
-          color: textColor,
+          lineHeight: INLINE_LINE_HEIGHT,
+          color: "var(--text-secondary)",
           ...style
         },
         ...rest,
@@ -1166,7 +1190,21 @@ var InlineAlert = React5.forwardRef(
             "span",
             {
               "aria-hidden": "true",
-              style: { width: 6, height: 6, flexShrink: 0, borderRadius: 9999, background: fg }
+              "data-slot": "inline-alert-marker",
+              style: {
+                display: "inline-flex",
+                height: INLINE_LINE_HEIGHT + "em",
+                flexShrink: 0,
+                alignItems: "center",
+                color: fg
+              },
+              children: marker === "dot" ? /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  "data-slot": "inline-alert-dot",
+                  style: { width: 6, height: 6, borderRadius: 9999, background: "currentColor" }
+                }
+              ) : /* @__PURE__ */ jsx5(MarkerIcon, { "data-slot": "inline-alert-icon", size: INLINE_ICON_SIZE, strokeWidth: 2.25 })
             }
           ),
           /* @__PURE__ */ jsx5("span", { style: { minWidth: 0 }, children })
@@ -1178,7 +1216,7 @@ var InlineAlert = React5.forwardRef(
 InlineAlert.displayName = "InlineAlert";
 
 // src/components/ui/textarea.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { cva as cva4 } from "class-variance-authority";
 import { AlertCircle as AlertCircle2, CheckCircle2 as CheckCircle22 } from "lucide-react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -1247,7 +1285,7 @@ function mapTextareaSizeLegacy(textareaSize) {
 function getTextLength(value) {
   return typeof value === "string" ? value.length : void 0;
 }
-var Textarea = React6.forwardRef(
+var Textarea = React7.forwardRef(
   ({
     className,
     size,
@@ -1274,8 +1312,10 @@ var Textarea = React6.forwardRef(
   }, ref) => {
     const resolvedSize = size ?? mapTextareaSizeLegacy(textareaSize) ?? "md";
     const resolvedFullWidth = fullWidth ?? true;
-    const generatedId = React6.useId();
-    const textareaId = id ?? generatedId;
+    const field = useFormFieldControl();
+    const generatedId = React7.useId();
+    const textareaId = field ? generatedId : id ?? generatedId;
+    const controlId = id ?? field?.controlId;
     const hasCounter = maxLength != null;
     const resolvedState = invalid || state === "error" ? "error" : state;
     const showDescription = resolvedState === "default" && Boolean(description);
@@ -1283,9 +1323,16 @@ var Textarea = React6.forwardRef(
     const messageId = showMessage ? `${textareaId}-message` : void 0;
     const descriptionId = showDescription ? `${textareaId}-description` : void 0;
     const counterId = hasCounter ? `${textareaId}-counter` : void 0;
-    const describedBy = [ariaDescribedBy, descriptionId, messageId, counterId].filter(Boolean).join(" ") || void 0;
+    const describedBy = joinIds(
+      ariaDescribedBy,
+      descriptionId,
+      messageId,
+      counterId,
+      field?.describedBy
+    );
+    const elementId = controlId ?? (label || message || description || hasCounter ? textareaId : void 0);
     const resolvedInvalid = resolvedState === "error" ? true : ariaInvalid ?? void 0;
-    const [uncontrolledLength, setUncontrolledLength] = React6.useState(
+    const [uncontrolledLength, setUncontrolledLength] = React7.useState(
       () => getTextLength(defaultValue) ?? 0
     );
     const resolvedLength = valueLength ?? getTextLength(value) ?? uncontrolledLength;
@@ -1299,7 +1346,7 @@ var Textarea = React6.forwardRef(
       "textarea",
       {
         ref,
-        id: label || message || description || hasCounter ? textareaId : id,
+        id: elementId,
         required,
         disabled,
         readOnly,
@@ -1330,7 +1377,7 @@ var Textarea = React6.forwardRef(
             {
               "data-slot": "textarea-label",
               "data-required": required ? "true" : void 0,
-              htmlFor: textareaId,
+              htmlFor: elementId,
               className: "pl-1 pb-1 text-sm font-medium leading-snug text-text-secondary",
               children: [
                 label,
@@ -1405,7 +1452,7 @@ var Textarea = React6.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/ui/select.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { cva as cva5 } from "class-variance-authority";
 import {
   AlertCircle as AlertCircle3,
@@ -1514,7 +1561,7 @@ function SelectItem({
   );
 }
 SelectItem.displayName = "SelectItem";
-var Select = React7.forwardRef(
+var Select = React8.forwardRef(
   ({
     className,
     selectVariant,
@@ -1547,38 +1594,44 @@ var Select = React7.forwardRef(
     const resolvedSize = size ?? mapSelectSizeLegacy(selectSize) ?? "md";
     const resolvedFullWidth = fullWidth ?? (selectVariant === "inline" ? false : true);
     const resolvedAppearance = appearance ?? (selectVariant === "inline" ? "inline" : "field");
-    const generatedId = React7.useId();
-    const selectId = id ?? generatedId;
+    const field = useFormFieldControl();
+    const generatedId = React8.useId();
+    const selectId = field ? generatedId : id ?? generatedId;
     const inlineLabel = labelPlacement === "inline" && Boolean(label);
     const inlineLabelId = inlineLabel ? `${selectId}-label` : void 0;
     const inlineValueId = inlineLabel ? `${selectId}-value` : void 0;
-    const triggerId = label || message || description ? selectId : id;
+    const triggerId = id ?? field?.controlId ?? (label || message || description ? selectId : void 0);
     const resolvedState = invalid || state === "error" ? "error" : state;
     const showDescription = resolvedState === "default" && Boolean(description);
     const showMessage = Boolean(message) && !showDescription;
     const messageId = showMessage ? `${selectId}-message` : void 0;
     const descriptionId = showDescription ? `${selectId}-description` : void 0;
     const resolvedInvalid = resolvedState === "error" ? true : ariaInvalid ?? void 0;
-    const describedBy = [ariaDescribedBy, descriptionId, messageId].filter(Boolean).join(" ") || void 0;
+    const describedBy = joinIds(
+      ariaDescribedBy,
+      descriptionId,
+      messageId,
+      field?.describedBy
+    );
     const isControlled = value !== void 0;
-    const [uncontrolledValue, setUncontrolledValue] = React7.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React8.useState(
       defaultValue ?? ""
     );
     const selectedValue = isControlled ? value : uncontrolledValue;
     const selectedOption = options.find((option) => option.value === selectedValue);
     const hasSelection = selectedValue != null && selectedValue !== "";
-    const [portalMounted, setPortalMounted] = React7.useState(false);
-    React7.useEffect(() => {
+    const [portalMounted, setPortalMounted] = React8.useState(false);
+    React8.useEffect(() => {
       setPortalMounted(true);
     }, []);
-    const effectiveOptions = React7.useMemo(() => {
+    const effectiveOptions = React8.useMemo(() => {
       if (!clearable) return options;
       return [
         { value: SELECT_CLEAR_SENTINEL, label: clearLabel ?? placeholder },
         ...options
       ];
     }, [clearable, clearLabel, placeholder, options]);
-    const handleValueChange = React7.useCallback(
+    const handleValueChange = React8.useCallback(
       (nextValue) => {
         const resolved = nextValue === SELECT_CLEAR_SENTINEL ? "" : nextValue;
         if (!isControlled) {
@@ -1693,7 +1746,7 @@ var Select = React7.forwardRef(
               ]
             }
           ),
-          portalMounted ? /* @__PURE__ */ jsx7(SelectPrimitive.Portal, { children: content }) : content
+          /* @__PURE__ */ jsx7(FormFieldBoundary, { children: portalMounted ? /* @__PURE__ */ jsx7(SelectPrimitive.Portal, { children: content }) : content })
         ]
       }
     );
@@ -1713,7 +1766,7 @@ var Select = React7.forwardRef(
             {
               "data-slot": "select-label",
               "data-required": required ? "true" : void 0,
-              htmlFor: selectId,
+              htmlFor: triggerId,
               className: "pl-1 pb-1 text-sm font-medium leading-snug text-text-secondary",
               children: [
                 label,
@@ -1769,6 +1822,7 @@ var Select = React7.forwardRef(
 Select.displayName = "Select";
 
 // src/components/ui/form-field.tsx
+import * as React9 from "react";
 import { cva as cva6 } from "class-variance-authority";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var formFieldVariants = cva6("w-full", {
@@ -1787,6 +1841,10 @@ var formFieldRequiredClassName = "ml-[2px] font-bold text-[var(--semantic-error,
 var formFieldDescriptionClassName = "text-[12px] leading-snug text-text-tertiary";
 var formFieldErrorClassName = "text-[12px] leading-snug text-[var(--semantic-error,var(--error))]";
 var formFieldControlStackClassName = "flex min-w-0 flex-col gap-[var(--space-1)]";
+var nativeLabelableTags = /* @__PURE__ */ new Set(["input", "select", "textarea", "button"]);
+function isNativeLabelable(node) {
+  return React9.isValidElement(node) && typeof node.type === "string" && nativeLabelableTags.has(node.type);
+}
 function FormField({
   label,
   required,
@@ -1799,27 +1857,50 @@ function FormField({
   ...props
 }) {
   const isFunctionChildren = typeof children === "function";
-  const descriptionId = id && description && !error ? `${id}-description` : void 0;
-  const errorId = id && error ? `${id}-error` : void 0;
-  const describedBy = !isFunctionChildren ? [descriptionId, errorId].filter(Boolean).join(" ") || void 0 : void 0;
+  const autoId = React9.useId();
+  const controlId = id ?? autoId;
+  const labelId = `${autoId}-label`;
+  const descriptionId = description && !error ? `${controlId}-description` : void 0;
+  const errorId = error ? `${controlId}-error` : void 0;
+  const describedBy = !isFunctionChildren ? joinIds(descriptionId, errorId) : void 0;
   const invalid = Boolean(error);
   const controlDescription = !error ? description : void 0;
   const controlMessage = error;
   const controlState = error ? "error" : "default";
-  const resolvedChildren = isFunctionChildren ? children({
-    controlProps: {
-      id,
-      "aria-describedby": describedBy,
-      "aria-invalid": invalid ? true : void 0,
-      required: required || void 0,
-      description: controlDescription,
-      message: controlMessage,
-      state: controlState
-    },
-    descriptionId,
-    errorId,
-    invalid
-  }) : children;
+  const nativeControl = !isFunctionChildren && isNativeLabelable(children) ? children : null;
+  const labelTarget = nativeControl?.props.id ?? controlId;
+  let resolvedChildren;
+  if (isFunctionChildren) {
+    resolvedChildren = children({
+      controlProps: {
+        id: controlId,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid ? true : void 0,
+        required: required || void 0,
+        description: controlDescription,
+        message: controlMessage,
+        state: controlState
+      },
+      descriptionId,
+      errorId,
+      invalid
+    });
+  } else if (nativeControl) {
+    const nativeDescribedBy = joinIds(
+      nativeControl.props["aria-describedby"],
+      describedBy
+    );
+    resolvedChildren = React9.cloneElement(nativeControl, {
+      id: labelTarget,
+      ...nativeDescribedBy ? { "aria-describedby": nativeDescribedBy } : null
+    });
+  } else {
+    resolvedChildren = children;
+  }
+  const controlContext = React9.useMemo(
+    () => isFunctionChildren ? null : { controlId, labelId, describedBy },
+    [isFunctionChildren, controlId, labelId, describedBy]
+  );
   const labelClassName = cn(
     formFieldLabelClassName,
     layout === "horizontal" && "sm:justify-self-end sm:text-right sm:pt-[var(--space-4)]"
@@ -1833,11 +1914,12 @@ function FormField({
       className: cn(formFieldVariants({ layout }), className),
       ...props,
       children: [
-        id ? /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs8(
           "label",
           {
+            id: labelId,
             "data-slot": "form-field-label",
-            htmlFor: id,
+            htmlFor: labelTarget,
             className: labelClassName,
             children: [
               /* @__PURE__ */ jsx8("span", { children: label }),
@@ -1851,17 +1933,7 @@ function FormField({
               ) : null
             ]
           }
-        ) : /* @__PURE__ */ jsxs8("span", { "data-slot": "form-field-label", className: labelClassName, children: [
-          label,
-          required ? /* @__PURE__ */ jsx8(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: formFieldRequiredClassName,
-              children: "*"
-            }
-          ) : null
-        ] }),
+        ),
         /* @__PURE__ */ jsxs8(
           "div",
           {
@@ -1871,7 +1943,7 @@ function FormField({
               layout === "horizontal" && "sm:col-start-2"
             ),
             children: [
-              resolvedChildren,
+              /* @__PURE__ */ jsx8(FormFieldControlContext.Provider, { value: controlContext, children: resolvedChildren }),
               !isFunctionChildren && !error && description ? /* @__PURE__ */ jsx8(
                 "p",
                 {
@@ -1900,10 +1972,10 @@ function FormField({
 }
 
 // src/components/ui/label.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 import { Label as LabelPrimitive } from "radix-ui";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
-var Label = React8.forwardRef(({ htmlFor, required, children, className, ...props }, ref) => /* @__PURE__ */ jsxs9(
+var Label = React10.forwardRef(({ htmlFor, required, children, className, ...props }, ref) => /* @__PURE__ */ jsxs9(
   LabelPrimitive.Root,
   {
     ref,
@@ -1931,7 +2003,7 @@ var Label = React8.forwardRef(({ htmlFor, required, children, className, ...prop
 Label.displayName = "Label";
 
 // src/components/ui/switch.tsx
-import * as React9 from "react";
+import * as React11 from "react";
 import { cva as cva7 } from "class-variance-authority";
 import { Loader2 as Loader22 } from "lucide-react";
 import { Switch as SwitchPrimitive } from "radix-ui";
@@ -1952,7 +2024,7 @@ var switchFieldVariants = cva7("", {
     fullWidth: false
   }
 });
-var Switch = React9.forwardRef(
+var Switch = React11.forwardRef(
   ({
     className,
     label,
@@ -1963,12 +2035,15 @@ var Switch = React9.forwardRef(
     fullWidth = false,
     disabled,
     id,
+    "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
-    const generatedId = React9.useId();
-    const switchId = id ?? generatedId;
-    const labelId = id ? `${id}-label` : `${generatedId}-label`;
-    const descriptionId = description ? id ? `${id}-description` : `${generatedId}-description` : void 0;
+    const field = useFormFieldControl();
+    const generatedId = React11.useId();
+    const switchId = id ?? field?.controlId ?? generatedId;
+    const slotId = field ? generatedId : id ?? generatedId;
+    const labelId = `${slotId}-label`;
+    const descriptionId = description ? `${slotId}-description` : void 0;
     const isDisabled = disabled || loading;
     const isStart = labelPlacement === "start";
     const track = /* @__PURE__ */ jsxs10(
@@ -1980,7 +2055,7 @@ var Switch = React9.forwardRef(
         disabled: isDisabled,
         "aria-required": required || void 0,
         "aria-busy": loading || void 0,
-        "aria-describedby": descriptionId,
+        "aria-describedby": joinIds(ariaDescribedBy, descriptionId, field?.describedBy),
         className: cn(
           "group relative inline-flex h-[24px] w-[44px] cursor-pointer items-center rounded-full transition-colors",
           "bg-[var(--border)] data-[state=checked]:bg-[var(--primary)]",
@@ -2077,13 +2152,13 @@ var Switch = React9.forwardRef(
 Switch.displayName = "Switch";
 
 // src/components/ui/permission-guard.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 
 // src/components/ui/tooltip.tsx
-import * as React10 from "react";
+import * as React12 from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var TooltipTouchContext = React10.createContext(null);
+var TooltipTouchContext = React12.createContext(null);
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -2105,17 +2180,17 @@ function Tooltip({
   children,
   ...props
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React10.useState(defaultOpen ?? false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React12.useState(defaultOpen ?? false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const handleOpenChange = React10.useCallback(
+  const handleOpenChange = React12.useCallback(
     (value) => {
       if (!isControlled) setUncontrolledOpen(value);
       userOnOpenChange?.(value);
     },
     [isControlled, userOnOpenChange]
   );
-  const ctx = React10.useMemo(
+  const ctx = React12.useMemo(
     () => ({
       enableTouch: enableTouch && !isControlled,
       toggle: () => handleOpenChange(!open)
@@ -2137,7 +2212,7 @@ function TooltipTrigger({
   onClick: userOnClick,
   ...props
 }) {
-  const ctx = React10.useContext(TooltipTouchContext);
+  const ctx = React12.useContext(TooltipTouchContext);
   return /* @__PURE__ */ jsx11(
     TooltipPrimitive.Trigger,
     {
@@ -2156,7 +2231,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx11(FormFieldBoundary, { children: /* @__PURE__ */ jsx11(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs11(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -2171,13 +2246,13 @@ function TooltipContent({
         /* @__PURE__ */ jsx11(TooltipPrimitive.Arrow, { className: "z-[var(--z-tooltip)] size-[10px] translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
       ]
     }
-  ) });
+  ) }) });
 }
 
 // src/components/ui/permission-guard.tsx
 import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var defaultDisabledReason = "\uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4";
-var PermissionContext = React11.createContext(
+var PermissionContext = React13.createContext(
   void 0
 );
 function PermissionProvider({
@@ -2188,7 +2263,7 @@ function PermissionProvider({
   return /* @__PURE__ */ jsx12(PermissionContext.Provider, { value: value ?? permissions, children });
 }
 function usePermission(permission, scope) {
-  const state = React11.useContext(PermissionContext);
+  const state = React13.useContext(PermissionContext);
   return evaluatePermission(permission, state, scope);
 }
 function evaluatePermission(permission, state, scope) {
@@ -2219,7 +2294,7 @@ function PermissionGuard({
   permissions,
   disabledReason = defaultDisabledReason
 }) {
-  const state = React11.useContext(PermissionContext);
+  const state = React13.useContext(PermissionContext);
   const allowed = evaluatePermission(permission, permissions ?? state, scope);
   if (allowed) {
     return /* @__PURE__ */ jsx12(Fragment3, { children });
@@ -2253,10 +2328,10 @@ function hasAnyMatch(candidates, values) {
   return candidates.some((candidate) => valueSet.has(candidate));
 }
 function renderDisabledFallback(children, disabledReason) {
-  if (!React11.isValidElement(children) || children.type === React11.Fragment) {
+  if (!React13.isValidElement(children) || children.type === React13.Fragment) {
     return null;
   }
-  const clonedChild = React11.cloneElement(
+  const clonedChild = React13.cloneElement(
     children,
     {
       disabled: true,
@@ -2282,7 +2357,7 @@ function isPermissionState(value) {
 }
 
 // src/components/ui/card.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 import { cva as cva8 } from "class-variance-authority";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var cardBaseVariants = cva8(
@@ -2333,7 +2408,7 @@ function cardVariants({ variant, surface, interactive, className } = {}) {
     className
   );
 }
-var Card = React12.forwardRef(
+var Card = React14.forwardRef(
   ({ className, variant, surface, interactive, selected, disabled, "aria-disabled": ariaDisabled, ...props }, ref) => /* @__PURE__ */ jsx13(
     "div",
     {
@@ -2354,7 +2429,7 @@ var Card = React12.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var CardHeader = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   "div",
   {
     ref,
@@ -2364,7 +2439,7 @@ var CardHeader = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var CardTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   "h3",
   {
     ref,
@@ -2377,7 +2452,7 @@ var CardTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var CardDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   "p",
   {
     ref,
@@ -2390,7 +2465,7 @@ var CardDescription = React12.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var CardContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   "div",
   {
     ref,
@@ -2400,7 +2475,7 @@ var CardContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CardContent.displayName = "CardContent";
-var CardProse = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var CardProse = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   "div",
   {
     ref,
@@ -2419,7 +2494,7 @@ var CardProse = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardProse.displayName = "CardProse";
-var CardFooter = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var CardFooter = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   "div",
   {
     ref,
@@ -2431,9 +2506,9 @@ var CardFooter = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE
 CardFooter.displayName = "CardFooter";
 
 // src/components/ui/page-header.tsx
-import * as React13 from "react";
+import * as React15 from "react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-var PageHeader = React13.forwardRef(
+var PageHeader = React15.forwardRef(
   ({
     className,
     breadcrumb,
@@ -2518,7 +2593,7 @@ var PageHeader = React13.forwardRef(
 PageHeader.displayName = "PageHeader";
 
 // src/components/ui/breadcrumb.tsx
-import * as React14 from "react";
+import * as React16 from "react";
 import { ChevronRight } from "lucide-react";
 import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function getDisplayItems(items, maxItems) {
@@ -2543,7 +2618,7 @@ var Separator = () => /* @__PURE__ */ jsx15("li", { "aria-hidden": "true", "data
     className: "text-[var(--text-disabled)]"
   }
 ) });
-var Breadcrumb = React14.forwardRef(
+var Breadcrumb = React16.forwardRef(
   ({
     className,
     items,
@@ -2568,7 +2643,7 @@ var Breadcrumb = React14.forwardRef(
             children: displayItems.map((item, index) => {
               const isLast = index === displayItems.length - 1;
               if (item === "ellipsis") {
-                return /* @__PURE__ */ jsxs14(React14.Fragment, { children: [
+                return /* @__PURE__ */ jsxs14(React16.Fragment, { children: [
                   /* @__PURE__ */ jsx15(
                     "li",
                     {
@@ -2581,7 +2656,7 @@ var Breadcrumb = React14.forwardRef(
                   /* @__PURE__ */ jsx15(Separator, {})
                 ] }, "ellipsis");
               }
-              return /* @__PURE__ */ jsxs14(React14.Fragment, { children: [
+              return /* @__PURE__ */ jsxs14(React16.Fragment, { children: [
                 /* @__PURE__ */ jsx15("li", { "data-slot": "breadcrumb-item", className: "flex min-w-0 items-center", children: isLast ? /* @__PURE__ */ jsx15(
                   "span",
                   {
@@ -2627,9 +2702,9 @@ var Breadcrumb = React14.forwardRef(
 Breadcrumb.displayName = "Breadcrumb";
 
 // src/components/ui/data-layout.tsx
-import * as React15 from "react";
+import * as React17 from "react";
 import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
-var DataLayout = React15.forwardRef(
+var DataLayout = React17.forwardRef(
   ({ className, header, toolbar, children, footer, bulkBar, ...props }, ref) => {
     return /* @__PURE__ */ jsxs15(
       "div",
@@ -2672,7 +2747,7 @@ var DataLayout = React15.forwardRef(
 DataLayout.displayName = "DataLayout";
 
 // src/components/ui/wizard-layout.tsx
-import * as React16 from "react";
+import * as React18 from "react";
 import { Check as Check2 } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var circleBaseClassName = [
@@ -2739,7 +2814,7 @@ function getConnectorClassName(isActivePath) {
     isActivePath ? "bg-[var(--primary)]" : "bg-[var(--border-subtle)]"
   );
 }
-var WizardLayout = React16.forwardRef(
+var WizardLayout = React18.forwardRef(
   ({
     className,
     header,
@@ -2752,8 +2827,8 @@ var WizardLayout = React16.forwardRef(
     allowStepNavigation = true,
     ...props
   }, ref) => {
-    const stepViewportRef = React16.useRef(null);
-    const stepItemRefs = React16.useRef([]);
+    const stepViewportRef = React18.useRef(null);
+    const stepItemRefs = React18.useRef([]);
     const resolvedSteps = steps.map((step, index) => ({
       ...step,
       resolvedState: getStepState(step, index, activeStep)
@@ -2763,7 +2838,7 @@ var WizardLayout = React16.forwardRef(
     const currentStep = resolvedSteps[currentStepIndex];
     const progressStepNumber = stepCount > 0 ? currentStepIndex + 1 : 0;
     const progressValue = stepCount > 0 ? progressStepNumber / stepCount * 100 : 0;
-    React16.useLayoutEffect(() => {
+    React18.useLayoutEffect(() => {
       const viewportNode = stepViewportRef.current;
       const activeNode = stepItemRefs.current[currentStepIndex];
       if (!viewportNode || !activeNode) {
@@ -2917,7 +2992,7 @@ var WizardLayout = React16.forwardRef(
                                   const isClickable = allowStepNavigation && step.resolvedState === "complete" && typeof onStepChange === "function";
                                   const isCurrent = step.resolvedState === "current";
                                   const connectorIsActive = index < activeStep;
-                                  return /* @__PURE__ */ jsxs16(React16.Fragment, { children: [
+                                  return /* @__PURE__ */ jsxs16(React18.Fragment, { children: [
                                     /* @__PURE__ */ jsx17(
                                       "li",
                                       {
@@ -3027,10 +3102,10 @@ var WizardLayout = React16.forwardRef(
 WizardLayout.displayName = "WizardLayout";
 
 // src/components/ui/detail-layout.tsx
-import * as React18 from "react";
+import * as React20 from "react";
 
 // src/components/ui/tabs.tsx
-import * as React17 from "react";
+import * as React19 from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { cva as cva9 } from "class-variance-authority";
 import { Lock } from "lucide-react";
@@ -3179,9 +3254,9 @@ var tabsBadgeVariants = cva9(
   ].join(" ")
 );
 function useTabsIndicator(enabled, activeKey, tabsKey, listRef, indicatorRef) {
-  const placedRef = React17.useRef(null);
-  const previousKeyRef = React17.useRef(null);
-  const place = React17.useCallback(
+  const placedRef = React19.useRef(null);
+  const previousKeyRef = React19.useRef(null);
+  const place = React19.useCallback(
     (animate) => {
       const list = listRef.current;
       const indicator = indicatorRef.current;
@@ -3206,7 +3281,7 @@ function useTabsIndicator(enabled, activeKey, tabsKey, listRef, indicatorRef) {
     },
     [listRef, indicatorRef]
   );
-  React17.useLayoutEffect(() => {
+  React19.useLayoutEffect(() => {
     if (!enabled) {
       placedRef.current = null;
       previousKeyRef.current = null;
@@ -3216,7 +3291,7 @@ function useTabsIndicator(enabled, activeKey, tabsKey, listRef, indicatorRef) {
     previousKeyRef.current = activeKey;
     place(previousKey !== null && previousKey !== activeKey);
   }, [enabled, activeKey, tabsKey, place]);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     const list = listRef.current;
     if (!enabled || !list) return;
     let cancelled = false;
@@ -3251,7 +3326,7 @@ function getTabId(baseId, key) {
 function getPanelId(baseId, key) {
   return baseId ? `${baseId}-panel-${key}` : `panel-${key}`;
 }
-var Tabs = React17.forwardRef(
+var Tabs = React19.forwardRef(
   ({
     className,
     listClassName,
@@ -3265,8 +3340,8 @@ var Tabs = React17.forwardRef(
     variant = "line",
     ...props
   }, ref) => {
-    const listRef = React17.useRef(null);
-    const indicatorRef = React17.useRef(null);
+    const listRef = React19.useRef(null);
+    const indicatorRef = React19.useRef(null);
     const isLine = variant === "line";
     const tabsKey = tabs.map((tab) => tab.key).join("\0");
     useTabsIndicator(isLine, activeKey, tabsKey, listRef, indicatorRef);
@@ -3340,7 +3415,7 @@ var Tabs = React17.forwardRef(
   }
 );
 Tabs.displayName = "Tabs";
-var TabsContent = React17.forwardRef(({ className, tabKey, baseId, ...props }, ref) => /* @__PURE__ */ jsx18(
+var TabsContent = React19.forwardRef(({ className, tabKey, baseId, ...props }, ref) => /* @__PURE__ */ jsx18(
   TabsPrimitive.Content,
   {
     ref,
@@ -3398,19 +3473,19 @@ function DetailLayoutBody({
   );
 }
 function isTabsContentChild(child) {
-  return React18.isValidElement(child) && child.type === TabsContent;
+  return React20.isValidElement(child) && child.type === TabsContent;
 }
 function containsTabsContent(children) {
-  return React18.Children.toArray(children).some((child) => {
+  return React20.Children.toArray(children).some((child) => {
     if (isTabsContentChild(child)) return true;
-    return React18.isValidElement(child) && containsTabsContent(child.props.children);
+    return React20.isValidElement(child) && containsTabsContent(child.props.children);
   });
 }
 function appendFooterToActiveTabsContent(children, activeTab, footer) {
-  return React18.Children.map(children, (child) => {
+  return React20.Children.map(children, (child) => {
     if (isTabsContentChild(child)) {
       if (child.props.tabKey !== activeTab || !footer) return child;
-      return React18.cloneElement(
+      return React20.cloneElement(
         child,
         void 0,
         /* @__PURE__ */ jsxs18(Fragment8, { children: [
@@ -3419,8 +3494,8 @@ function appendFooterToActiveTabsContent(children, activeTab, footer) {
         ] })
       );
     }
-    if (React18.isValidElement(child)) {
-      return React18.cloneElement(
+    if (React20.isValidElement(child)) {
+      return React20.cloneElement(
         child,
         void 0,
         appendFooterToActiveTabsContent(child.props.children, activeTab, footer)
@@ -3429,7 +3504,7 @@ function appendFooterToActiveTabsContent(children, activeTab, footer) {
     return child;
   });
 }
-var DetailLayout = React18.forwardRef(
+var DetailLayout = React20.forwardRef(
   ({
     className,
     header,
@@ -3515,7 +3590,7 @@ var DetailLayout = React18.forwardRef(
 DetailLayout.displayName = "DetailLayout";
 
 // src/components/ui/form-layout.tsx
-import * as React19 from "react";
+import * as React21 from "react";
 import { ChevronDown as ChevronDown3 } from "lucide-react";
 import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 function FormLayoutSectionBlock({
@@ -3528,7 +3603,7 @@ function FormLayoutSectionBlock({
   const isEditorSection = section.id === editorSectionId;
   const resolvedColumns = isEditorSection ? 1 : section.columns ?? 1;
   const isCollapsible = Boolean(section.collapsible);
-  const [isOpen, setIsOpen] = React19.useState(section.defaultOpen ?? true);
+  const [isOpen, setIsOpen] = React21.useState(section.defaultOpen ?? true);
   const contentId = `${section.id}-content`;
   const titleId = `${section.id}-title`;
   const sectionHeader = /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 flex-col gap-[var(--space-2)] sm:flex-row sm:items-start sm:justify-between", children: [
@@ -3615,7 +3690,7 @@ function FormLayoutSectionBlock({
     }
   );
 }
-var FormLayout = React19.forwardRef(
+var FormLayout = React21.forwardRef(
   ({
     className,
     header,
@@ -3674,11 +3749,11 @@ var FormLayout = React19.forwardRef(
 FormLayout.displayName = "FormLayout";
 
 // src/components/ui/dialog.tsx
-import * as React26 from "react";
+import * as React28 from "react";
 import { Dialog as DialogPrimitive3 } from "radix-ui";
 
 // src/lib/use-overlay-action.ts
-import * as React20 from "react";
+import * as React22 from "react";
 function useOverlayAction({
   action,
   onOpenChange,
@@ -3686,10 +3761,10 @@ function useOverlayAction({
   disabled = false,
   onError
 }) {
-  const [pending, setPending] = React20.useState(false);
-  const busyRef = React20.useRef(false);
+  const [pending, setPending] = React22.useState(false);
+  const busyRef = React22.useRef(false);
   const isBusy = loading || pending;
-  const guardOpenChange = React20.useCallback(
+  const guardOpenChange = React22.useCallback(
     (nextOpen) => {
       if (!nextOpen && isBusy) {
         return;
@@ -3698,7 +3773,7 @@ function useOverlayAction({
     },
     [isBusy, onOpenChange]
   );
-  const run = React20.useCallback(async () => {
+  const run = React22.useCallback(async () => {
     if (busyRef.current || loading || disabled) {
       return;
     }
@@ -3719,11 +3794,11 @@ function useOverlayAction({
 }
 
 // src/lib/use-return-focus.ts
-import * as React21 from "react";
+import * as React23 from "react";
 var closingOverlay = '[role="dialog"][data-state="closed"], [role="alertdialog"][data-state="closed"]';
 function useReturnFocus() {
-  const returnTo = React21.useRef(null);
-  const onOpenAutoFocus = React21.useCallback((event) => {
+  const returnTo = React23.useRef(null);
+  const onOpenAutoFocus = React23.useCallback((event) => {
     const active = document.activeElement;
     const content = event?.target instanceof HTMLElement ? event.target : null;
     const hasTrigger = !!content?.id && Array.from(document.querySelectorAll("[aria-controls]")).some(
@@ -3731,7 +3806,7 @@ function useReturnFocus() {
     );
     returnTo.current = !hasTrigger && active instanceof HTMLElement && active !== document.body ? active : null;
   }, []);
-  const onCloseAutoFocus = React21.useCallback((event) => {
+  const onCloseAutoFocus = React23.useCallback((event) => {
     const target = returnTo.current;
     returnTo.current = null;
     if (!target?.isConnected) return;
@@ -3746,11 +3821,11 @@ function useReturnFocus() {
 }
 
 // src/components/ui/overlay-anatomy.tsx
-import * as React24 from "react";
+import * as React26 from "react";
 import { AlertDialog as AlertDialogPrimitive, Dialog as DialogPrimitive2 } from "radix-ui";
 
 // src/components/ui/overlay-bottom-sheet.tsx
-import * as React22 from "react";
+import * as React24 from "react";
 
 // src/components/ui/overlay-policy.ts
 var OVERLAY_DESKTOP_QUERY = "(min-width: 1024px)";
@@ -3824,11 +3899,11 @@ function clearOffset(surface) {
   surface?.style.removeProperty("transform");
 }
 function useSwipeDismiss({ enabled, onDismiss, surfaceRef, always = false }) {
-  const [dragging, setDragging] = React22.useState(false);
-  const drag = React22.useRef(null);
-  const dismiss = React22.useRef(onDismiss);
+  const [dragging, setDragging] = React24.useState(false);
+  const drag = React24.useRef(null);
+  const dismiss = React24.useRef(onDismiss);
   dismiss.current = onDismiss;
-  const handleProps = React22.useMemo(() => {
+  const handleProps = React24.useMemo(() => {
     if (!enabled) return {};
     const end = (event, release) => {
       const current = drag.current;
@@ -3931,7 +4006,7 @@ import { X as X2 } from "lucide-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 
 // src/components/ui/icon-button.tsx
-import * as React23 from "react";
+import * as React25 from "react";
 import { cva as cva10 } from "class-variance-authority";
 import { ChevronDown as ChevronDown4, Loader2 as Loader23 } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -4011,7 +4086,7 @@ var iconButtonBadgeVariants = cva10(
     }
   }
 );
-var IconButton = React23.forwardRef(
+var IconButton = React25.forwardRef(
   ({
     className,
     appearance,
@@ -4221,7 +4296,7 @@ var scrimMotionOf = {
   sheet: scrimMotion.responsive,
   menu: scrimMotion.sheet
 };
-var OverlayScrimLayer = React24.forwardRef(
+var OverlayScrimLayer = React26.forwardRef(
   ({ scrim, kind, still, className, ...props }, ref) => {
     const Overlay = kind === "alert" ? AlertDialogPrimitive.Overlay : DialogPrimitive2.Overlay;
     return /* @__PURE__ */ jsx24(
@@ -4405,7 +4480,7 @@ var bottomSheet = {
 };
 
 // src/components/ui/sheet.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 import { Dialog as SheetPrimitive } from "radix-ui";
 import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var defaultSheetMotionConfig = {
@@ -4475,10 +4550,10 @@ function StructuredSheet({
 }) {
   const policy = OVERLAY_POLICY.sheet;
   const motionConfig = resolveSheetMotionConfig(motion);
-  const surfaceRef = React25.useRef(null);
+  const surfaceRef = React27.useRef(null);
   const swipe = useSwipeDismiss({ enabled: policy.swipe, onDismiss: () => onOpenChange(false), surfaceRef });
   const returnFocus = useReturnFocus();
-  return /* @__PURE__ */ jsx25(SheetPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs22(SheetPrimitive.Portal, { children: [
+  return /* @__PURE__ */ jsx25(SheetPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsx25(FormFieldBoundary, { children: /* @__PURE__ */ jsxs22(SheetPrimitive.Portal, { children: [
     /* @__PURE__ */ jsx25(OverlayScrimLayer, { kind: "sheet", scrim, still: motionConfig === false }),
     /* @__PURE__ */ jsxs22(
       SheetPrimitive.Content,
@@ -4519,7 +4594,7 @@ function StructuredSheet({
         ]
       }
     )
-  ] }) });
+  ] }) }) });
 }
 function SheetTrigger({
   ...props
@@ -4534,7 +4609,7 @@ function SheetClose({
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx25(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx25(FormFieldBoundary, { children: /* @__PURE__ */ jsx25(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props }) });
 }
 function SheetOverlay({
   className,
@@ -4708,7 +4783,7 @@ import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-r
 function dialogMobileSheetStyle(style) {
   return getDefaultSheetMotionStyle(style);
 }
-var DialogModalContext = React26.createContext(true);
+var DialogModalContext = React28.createContext(true);
 function Dialog(props) {
   if (props.title !== void 0) return /* @__PURE__ */ jsx26(StructuredDialog, { ...props });
   return /* @__PURE__ */ jsx26(DialogRoot, { ...props });
@@ -4740,7 +4815,7 @@ function StructuredDialog({
     onError
   });
   const returnFocus = useReturnFocus();
-  const surfaceRef = React26.useRef(null);
+  const surfaceRef = React28.useRef(null);
   const swipe = useSwipeDismiss({ enabled: policy.swipe, onDismiss: () => guardOpenChange(false), surfaceRef });
   const body = /* @__PURE__ */ jsx26(OverlayBody, { kind: "dialog", className, children });
   const footerRow = formMode ? /* @__PURE__ */ jsxs23(OverlayFooter, { kind: "dialog", children: [
@@ -4758,7 +4833,7 @@ function StructuredDialog({
     ),
     /* @__PURE__ */ jsx26(Button, { type: "submit", appearance: "filled", tone: "primary", size: "lg", className: footerButtonHitAreaClassName, loading: isBusy, children: submitLabel })
   ] }) : footer != null ? /* @__PURE__ */ jsx26(OverlayFooter, { kind: "dialog", children: footer }) : null;
-  return /* @__PURE__ */ jsx26(DialogPrimitive3.Root, { open, onOpenChange: guardOpenChange, children: /* @__PURE__ */ jsxs23(DialogPrimitive3.Portal, { children: [
+  return /* @__PURE__ */ jsx26(DialogPrimitive3.Root, { open, onOpenChange: guardOpenChange, children: /* @__PURE__ */ jsx26(FormFieldBoundary, { children: /* @__PURE__ */ jsxs23(DialogPrimitive3.Portal, { children: [
     /* @__PURE__ */ jsx26(OverlayScrimLayer, { kind: "dialog", scrim }),
     /* @__PURE__ */ jsxs23(
       DialogPrimitive3.Content,
@@ -4805,15 +4880,17 @@ function StructuredDialog({
         ]
       }
     )
-  ] }) });
+  ] }) }) });
 }
 function DialogRoot({ modal = true, ...props }) {
   return /* @__PURE__ */ jsx26(DialogModalContext.Provider, { value: modal, children: /* @__PURE__ */ jsx26(DialogPrimitive3.Root, { modal, ...props }) });
 }
 var DialogTrigger = DialogPrimitive3.Trigger;
-var DialogPortal = DialogPrimitive3.Portal;
+function DialogPortal(props) {
+  return /* @__PURE__ */ jsx26(FormFieldBoundary, { children: /* @__PURE__ */ jsx26(DialogPrimitive3.Portal, { ...props }) });
+}
 var DialogClose = DialogPrimitive3.Close;
-var DialogOverlay = React26.forwardRef(({ className, ...props }, ref) => (
+var DialogOverlay = React28.forwardRef(({ className, ...props }, ref) => (
   // Position and scrim color come from the shared scrim (overlay-anatomy).
   /* @__PURE__ */ jsx26(
     OverlayScrimLayer,
@@ -4830,7 +4907,7 @@ var DialogOverlay = React26.forwardRef(({ className, ...props }, ref) => (
   )
 ));
 DialogOverlay.displayName = DialogPrimitive3.Overlay.displayName;
-var DialogContent = React26.forwardRef(
+var DialogContent = React28.forwardRef(
   ({
     className,
     children,
@@ -4841,7 +4918,7 @@ var DialogContent = React26.forwardRef(
     onCloseAutoFocus,
     ...props
   }, ref) => {
-    const modal = React26.useContext(DialogModalContext);
+    const modal = React28.useContext(DialogModalContext);
     const returnFocus = useReturnFocus();
     const handleOpenAutoFocus = (event) => {
       if (modal) returnFocus.onOpenAutoFocus(event);
@@ -4926,7 +5003,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DialogTitle = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DialogPrimitive3.Title,
   {
     ref,
@@ -4938,7 +5015,7 @@ var DialogTitle = React26.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive3.Title.displayName;
-var DialogDescription = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DialogDescription = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DialogPrimitive3.Description,
   {
     ref,
@@ -4947,7 +5024,7 @@ var DialogDescription = React26.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DialogDescription.displayName = DialogPrimitive3.Description.displayName;
-var DialogEyebrow = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DialogEyebrow = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   "p",
   {
     ref,
@@ -4959,7 +5036,8 @@ var DialogEyebrow = React26.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogEyebrow.displayName = "DialogEyebrow";
-var DialogRawContent = DialogPrimitive3.Content;
+var DialogRawContent = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx26(FormFieldBoundary, { children: /* @__PURE__ */ jsx26(DialogPrimitive3.Content, { ref, ...props }) }));
+DialogRawContent.displayName = DialogPrimitive3.Content.displayName;
 
 // src/components/ui/form-modal.tsx
 import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -5023,7 +5101,7 @@ function AlertDialogFrame({
       control.focus();
     }
   };
-  return /* @__PURE__ */ jsx28(AlertDialogPrimitive2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs25(AlertDialogPrimitive2.Portal, { children: [
+  return /* @__PURE__ */ jsx28(AlertDialogPrimitive2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsx28(FormFieldBoundary, { children: /* @__PURE__ */ jsxs25(AlertDialogPrimitive2.Portal, { children: [
     /* @__PURE__ */ jsx28(OverlayScrimLayer, { kind: "alert", scrim }),
     /* @__PURE__ */ jsxs25(
       AlertDialogPrimitive2.Content,
@@ -5038,7 +5116,7 @@ function AlertDialogFrame({
         ]
       }
     )
-  ] }) });
+  ] }) }) });
 }
 function AlertDialog({
   open,
@@ -5133,15 +5211,15 @@ function InfoModal({
 }
 
 // src/components/ui/filter-toolbar.tsx
-import * as React29 from "react";
+import * as React31 from "react";
 import { SlidersHorizontal } from "lucide-react";
 
 // src/components/ui/chip.tsx
-import * as React27 from "react";
+import * as React29 from "react";
 import { cva as cva11 } from "class-variance-authority";
 import { X as X3 } from "lucide-react";
 import { Slot as Slot2 } from "radix-ui";
-import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 var chipVariants = cva11(
   [
     "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
@@ -5158,7 +5236,7 @@ var chipVariants = cva11(
         filter: "cursor-pointer",
         choice: "cursor-pointer",
         removable: "cursor-pointer",
-        // status-filter — 정적 표시 chip (display only, 클릭 affordance 없음).
+        // status-filter — 정적 표시 chip (display only, 클릭 affordance 없음). onClick·pressed 없으면 span.
         /** @deprecated A read-only label is a Badge: neutral·muted → `neutral`, accent → `brand`, success → `success`, warning → `warning`, danger → `error`. */
         "status-filter": "cursor-default"
       },
@@ -5235,19 +5313,42 @@ var chipCountVariants = cva11(
     }
   }
 );
-var Chip = React27.forwardRef(
+function ChipCount({
+  count,
+  tone,
+  size
+}) {
+  return /* @__PURE__ */ jsxs26(Fragment11, { children: [
+    /* @__PURE__ */ jsx30(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "chip-count",
+        "data-count-tone": tone,
+        className: chipCountVariants({ tone, size }),
+        children: count
+      }
+    ),
+    /* @__PURE__ */ jsxs26("span", { className: "sr-only", children: [
+      " ",
+      count
+    ] })
+  ] });
+}
+var Chip = React29.forwardRef(
   ({
     className,
     variant = "filter",
     tone = "neutral",
     size = "md",
-    pressed = false,
+    pressed: pressedProp,
     count,
-    removeLabel = "Remove",
+    removeLabel = "\uC81C\uAC70",
     asChild = false,
     children,
     ...props
   }, ref) => {
+    const pressed = pressedProp ?? false;
     const removable = variant === "removable";
     if (removable) {
       const {
@@ -5270,16 +5371,7 @@ var Chip = React27.forwardRef(
           ...spanProps,
           children: [
             /* @__PURE__ */ jsx30("span", { children }),
-            count !== void 0 ? /* @__PURE__ */ jsx30(
-              "span",
-              {
-                "aria-hidden": "true",
-                "data-slot": "chip-count",
-                "data-count-tone": tone,
-                className: chipCountVariants({ tone, size }),
-                children: count
-              }
-            ) : null,
+            count !== void 0 ? /* @__PURE__ */ jsx30(ChipCount, { count, tone, size }) : null,
             /* @__PURE__ */ jsx30(
               "button",
               {
@@ -5297,6 +5389,32 @@ var Chip = React27.forwardRef(
         }
       );
     }
+    if (variant === "status-filter" && !asChild && props.onClick === void 0 && pressedProp === void 0) {
+      const {
+        disabled: _disabled,
+        type: _type,
+        autoFocus: _af,
+        form: _form,
+        name: _name,
+        value: _value,
+        ...spanProps
+      } = props;
+      return /* @__PURE__ */ jsxs26(
+        "span",
+        {
+          ref,
+          "data-slot": "chip",
+          "data-variant": variant,
+          "data-tone": tone,
+          className: cn(chipVariants({ variant, tone, size, pressed, className })),
+          ...spanProps,
+          children: [
+            children,
+            count !== void 0 ? /* @__PURE__ */ jsx30(ChipCount, { count, tone, size }) : null
+          ]
+        }
+      );
+    }
     const Comp = asChild ? Slot2.Root : "button";
     return /* @__PURE__ */ jsxs26(
       Comp,
@@ -5313,16 +5431,7 @@ var Chip = React27.forwardRef(
         ...props,
         children: [
           children,
-          count !== void 0 ? /* @__PURE__ */ jsx30(
-            "span",
-            {
-              "aria-hidden": "true",
-              "data-slot": "chip-count",
-              "data-count-tone": tone,
-              className: chipCountVariants({ tone, size }),
-              children: count
-            }
-          ) : null
+          count !== void 0 ? /* @__PURE__ */ jsx30(ChipCount, { count, tone, size }) : null
         ]
       }
     );
@@ -5331,7 +5440,7 @@ var Chip = React27.forwardRef(
 Chip.displayName = "Chip";
 
 // src/components/ui/popover.tsx
-import * as React28 from "react";
+import * as React30 from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function Popover({ modal = false, ...props }) {
@@ -5341,7 +5450,7 @@ var popoverArrowClassName = "fill-[var(--bg-surface)] stroke-[var(--border)] [&>
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverClose = PopoverPrimitive.Close;
-var PopoverContent = React28.forwardRef(({ className, align = "center", sideOffset = 8, collisionPadding = 8, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsx31(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs27(
+var PopoverContent = React30.forwardRef(({ className, align = "center", sideOffset = 8, collisionPadding = 8, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsx31(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs27(
   PopoverPrimitive.Content,
   {
     ref,
@@ -5364,7 +5473,7 @@ var PopoverContent = React28.forwardRef(({ className, align = "center", sideOffs
     ),
     ...props,
     children: [
-      children,
+      /* @__PURE__ */ jsx31(FormFieldBoundary, { children }),
       showArrow ? /* @__PURE__ */ jsx31(
         PopoverPrimitive.Arrow,
         {
@@ -5378,7 +5487,7 @@ var PopoverContent = React28.forwardRef(({ className, align = "center", sideOffs
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var PopoverArrow = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var PopoverArrow = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   PopoverPrimitive.Arrow,
   {
     ref,
@@ -5392,7 +5501,7 @@ var PopoverArrow = React28.forwardRef(({ className, ...props }, ref) => /* @__PU
 PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
 
 // src/components/ui/filter-toolbar.tsx
-import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 var collapsibleClassNames = {
   sm: {
     inline: "hidden @[640px]:flex",
@@ -5411,7 +5520,7 @@ var collapsibleClassNames = {
     trigger: "hidden"
   }
 };
-var FilterToolbar = React29.forwardRef(
+var FilterToolbar = React31.forwardRef(
   ({
     className,
     search,
@@ -5426,15 +5535,15 @@ var FilterToolbar = React29.forwardRef(
     actions,
     ...props
   }, ref) => {
-    const [rootElement, setRootElement] = React29.useState(
+    const [rootElement, setRootElement] = React31.useState(
       null
     );
-    const [containerWidth, setContainerWidth] = React29.useState(
+    const [containerWidth, setContainerWidth] = React31.useState(
       null
     );
-    const [overlayOpen, setOverlayOpen] = React29.useState(false);
-    const triggerRef = React29.useRef(null);
-    const setRootRefs = React29.useCallback(
+    const [overlayOpen, setOverlayOpen] = React31.useState(false);
+    const triggerRef = React31.useRef(null);
+    const setRootRefs = React31.useCallback(
       (element) => {
         setRootElement(element);
         if (typeof ref === "function") ref(element);
@@ -5442,7 +5551,7 @@ var FilterToolbar = React29.forwardRef(
       },
       [ref]
     );
-    React29.useEffect(() => {
+    React31.useEffect(() => {
       if (!rootElement) return;
       const updateWidth = () => {
         setContainerWidth(rootElement.getBoundingClientRect().width);
@@ -5453,12 +5562,14 @@ var FilterToolbar = React29.forwardRef(
       observer.observe(rootElement);
       return () => observer.disconnect();
     }, [rootElement]);
-    const handleOverlayOpenChange = React29.useCallback((open) => {
+    const handleOverlayOpenChange = React31.useCallback((open) => {
       setOverlayOpen(open);
       if (!open) queueMicrotask(() => triggerRef.current?.focus());
     }, []);
-    const hasMeta = Boolean(resultSummary || clearAction || actions);
     const hasControls = Boolean(search || filters || collapsible);
+    const hasMeta = Boolean(
+      resultSummary || clearAction || actions && !hasControls
+    );
     const hasAppliedFilters = activeFilterCount > 0;
     const usesSheet = containerWidth !== null && containerWidth < 640;
     const collapseClasses = collapsibleClassNames[collapseBelow];
@@ -5521,6 +5632,7 @@ var FilterToolbar = React29.forwardRef(
       "div",
       {
         ref: setRootRefs,
+        role: "group",
         "data-slot": "filter-toolbar",
         className: cn(
           "@container flex w-full flex-col gap-[var(--space-2)] text-foreground",
@@ -5538,7 +5650,7 @@ var FilterToolbar = React29.forwardRef(
                   "div",
                   {
                     "data-slot": "filter-toolbar-search",
-                    className: "order-1 min-w-0 max-w-full flex-[1_1_auto] @[640px]:flex-[1_1_280px]",
+                    className: "order-1 min-w-[min(160px,100%)] max-w-full flex-[1_1_0%] @[640px]:min-w-0 @[640px]:flex-[1_1_280px]",
                     children: search
                   }
                 ) : null,
@@ -5579,6 +5691,14 @@ var FilterToolbar = React29.forwardRef(
                     ),
                     children: collapsible
                   }
+                ) : null,
+                actions ? /* @__PURE__ */ jsx32(
+                  "div",
+                  {
+                    "data-slot": "filter-toolbar-actions",
+                    className: "order-6 ml-auto flex shrink-0 flex-wrap items-center gap-[var(--space-2)]",
+                    children: actions
+                  }
                 ) : null
               ]
             }
@@ -5604,7 +5724,7 @@ var FilterToolbar = React29.forwardRef(
                   activeFilterCount,
                   "\uAC1C \uC801\uC6A9"
                 ] }),
-                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment11, { children: [
+                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment12, { children: [
                   /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: " \xB7 " }),
                   /* @__PURE__ */ jsx32(
                     "button",
@@ -5634,7 +5754,7 @@ var FilterToolbar = React29.forwardRef(
                   }
                 ) : null,
                 clearAction ? /* @__PURE__ */ jsx32("div", { "data-slot": "filter-toolbar-clear", className: "shrink-0", children: clearAction }) : null,
-                actions ? /* @__PURE__ */ jsx32(
+                actions && !hasControls ? /* @__PURE__ */ jsx32(
                   "div",
                   {
                     "data-slot": "filter-toolbar-actions",
@@ -5653,12 +5773,12 @@ var FilterToolbar = React29.forwardRef(
 FilterToolbar.displayName = "FilterToolbar";
 
 // src/components/ui/data-table.tsx
-import * as React33 from "react";
+import * as React35 from "react";
 import { ChevronDown as ChevronDown5, ChevronRight as ChevronRight3, ChevronUp as ChevronUp2, ChevronsUpDown, EllipsisVertical } from "lucide-react";
 import { cva as cva13 } from "class-variance-authority";
 
 // src/components/ui/action-menu.tsx
-import * as React30 from "react";
+import * as React32 from "react";
 import { Dialog as DialogPrimitive4, Slot as Slot3 } from "radix-ui";
 
 // src/components/ui/dropdown-menu.tsx
@@ -5673,7 +5793,7 @@ function DropdownMenu({
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ jsx33(FormFieldBoundary, { children: /* @__PURE__ */ jsx33(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props }) });
 }
 function DropdownMenuTrigger({
   ...props
@@ -5691,7 +5811,7 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx33(FormFieldBoundary, { children: /* @__PURE__ */ jsx33(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx33(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -5709,7 +5829,7 @@ function DropdownMenuContent({
       ),
       ...props
     }
-  ) });
+  ) }) });
 }
 function DropdownMenuGroup({
   ...props
@@ -5892,7 +6012,7 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx33(FormFieldBoundary, { children: /* @__PURE__ */ jsx33(
     DropdownMenuPrimitive.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
@@ -5908,11 +6028,11 @@ function DropdownMenuSubContent({
       ),
       ...props
     }
-  );
+  ) });
 }
 
 // src/components/ui/action-menu.tsx
-import { Fragment as Fragment13, jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 var sheetRowClassName = cn(
   "group flex min-h-12 w-full cursor-pointer items-center gap-[var(--space-3)] px-[var(--space-4)] py-[var(--space-2)] text-left",
   "border-t border-[var(--border-subtle)] text-[13px] font-medium leading-normal text-text-primary",
@@ -5934,9 +6054,9 @@ function ActionMenuSheet({
   onOpenAutoFocus,
   onCloseAutoFocus
 }) {
-  const pendingRef = React30.useRef(null);
-  const surfaceRef = React30.useRef(null);
-  const labelId = React30.useId();
+  const pendingRef = React32.useRef(null);
+  const surfaceRef = React32.useRef(null);
+  const labelId = React32.useId();
   const handleOpenChange = (nextOpen) => {
     pendingRef.current = null;
     onOpenChange(nextOpen);
@@ -5964,7 +6084,7 @@ function ActionMenuSheet({
     pendingRef.current = null;
     item?.onSelect();
   };
-  return /* @__PURE__ */ jsx34(DialogPrimitive4.Root, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs30(DialogPrimitive4.Portal, { children: [
+  return /* @__PURE__ */ jsx34(DialogPrimitive4.Root, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx34(FormFieldBoundary, { children: /* @__PURE__ */ jsxs30(DialogPrimitive4.Portal, { children: [
     /* @__PURE__ */ jsx34(OverlayScrimLayer, { kind: "menu" }),
     /* @__PURE__ */ jsxs30(
       DialogPrimitive4.Content,
@@ -5987,7 +6107,7 @@ function ActionMenuSheet({
               dragHandleProps: swipe.handleProps
             }
           ),
-          /* @__PURE__ */ jsx34(OverlayBody, { kind: "menu", children: groups.map((group, index) => /* @__PURE__ */ jsxs30(React30.Fragment, { children: [
+          /* @__PURE__ */ jsx34(OverlayBody, { kind: "menu", children: groups.map((group, index) => /* @__PURE__ */ jsxs30(React32.Fragment, { children: [
             index > 0 ? /* @__PURE__ */ jsx34("div", { role: "separator", className: sheetGroupSeparatorClassName }) : null,
             /* @__PURE__ */ jsxs30("div", { role: "group", "aria-labelledby": group.label ? `${labelId}-${index}` : void 0, children: [
               group.label ? /* @__PURE__ */ jsx34("div", { id: `${labelId}-${index}`, className: sheetGroupLabelClassName, children: group.label }) : null,
@@ -6018,11 +6138,11 @@ function ActionMenuSheet({
         ]
       }
     )
-  ] }) });
+  ] }) }) });
 }
 var readPresentation = () => window.matchMedia?.(OVERLAY_DESKTOP_QUERY).matches ?? true ? "dropdown" : "sheet";
 var subscribeNothing = () => () => void 0;
-var useHydrated = () => React30.useSyncExternalStore(
+var useHydrated = () => React32.useSyncExternalStore(
   subscribeNothing,
   () => true,
   () => false
@@ -6037,10 +6157,10 @@ function ActionMenu({
   items,
   groups
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React30.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React32.useState(false);
   const hydrated = useHydrated();
   const open = (openProp ?? uncontrolledOpen) && hydrated;
-  const [shown, setShown] = React30.useState({
+  const [shown, setShown] = React32.useState({
     open: false,
     presentation: "dropdown"
   });
@@ -6049,8 +6169,8 @@ function ActionMenu({
     if (open) presentation = readPresentation();
     setShown({ open, presentation });
   }
-  const triggerRef = React30.useRef(null);
-  const pendingRef = React30.useRef(null);
+  const triggerRef = React32.useRef(null);
+  const pendingRef = React32.useRef(null);
   const setOpen = (nextOpen) => {
     if (nextOpen) pendingRef.current = null;
     if (openProp === void 0) setUncontrolledOpen(nextOpen);
@@ -6070,10 +6190,10 @@ function ActionMenu({
     triggerRef.current?.focus();
   };
   const triggerLabel = trigger.props["aria-label"];
-  return /* @__PURE__ */ jsxs30(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment14, { children: [
     /* @__PURE__ */ jsxs30(DropdownMenu, { open: open && presentation === "dropdown", onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx34(DropdownMenuTrigger, { asChild: true, "aria-expanded": open, children: /* @__PURE__ */ jsx34(Slot3.Root, { ref: triggerRef, children: trigger }) }),
-      /* @__PURE__ */ jsx34(DropdownMenuContent, { align: "end", onCloseAutoFocus: handleDropdownCloseAutoFocus, children: menuGroups.map((group, index) => /* @__PURE__ */ jsxs30(React30.Fragment, { children: [
+      /* @__PURE__ */ jsx34(DropdownMenuContent, { align: "end", onCloseAutoFocus: handleDropdownCloseAutoFocus, children: menuGroups.map((group, index) => /* @__PURE__ */ jsxs30(React32.Fragment, { children: [
         index > 0 ? /* @__PURE__ */ jsx34(DropdownMenuSeparator, {}) : null,
         /* @__PURE__ */ jsxs30(DropdownMenuGroup, { children: [
           group.label ? /* @__PURE__ */ jsx34(DropdownMenuLabel, { children: group.label }) : null,
@@ -6114,7 +6234,7 @@ function ActionMenu({
 }
 
 // src/components/ui/checkbox.tsx
-import * as React31 from "react";
+import * as React33 from "react";
 import { cva as cva12 } from "class-variance-authority";
 import { Check as Check3, Minus } from "lucide-react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
@@ -6221,11 +6341,11 @@ var checkboxGroupBoxVariants = cva12(
     }
   }
 );
-var CheckboxGroupContext = React31.createContext(null);
+var CheckboxGroupContext = React33.createContext(null);
 function getLabel(children, label) {
   return children ?? label;
 }
-var Checkbox = React31.forwardRef(
+var Checkbox = React33.forwardRef(
   ({
     className,
     size = "md",
@@ -6241,21 +6361,29 @@ var Checkbox = React31.forwardRef(
     checked,
     disabled,
     onCheckedChange,
+    "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
-    const group = React31.useContext(CheckboxGroupContext);
-    const generatedId = React31.useId();
-    const checkboxId = id ?? generatedId;
+    const group = React33.useContext(CheckboxGroupContext);
+    const field = useFormFieldControl();
+    const generatedId = React33.useId();
     const labelContent = getLabel(children, label);
     const isGrouped = Boolean(group && value != null);
     const valueString = value == null ? void 0 : String(value);
     const resolvedChecked = isGrouped && valueString ? group?.selectedValues.has(valueString) : checked;
     const resolvedDisabled = disabled || group?.disabled;
     const resolvedName = name ?? group?.name;
+    const fieldControl = isGrouped ? null : field;
+    const checkboxId = fieldControl ? generatedId : id ?? generatedId;
     const labelId = `${checkboxId}-label`;
     const descriptionId = description && !error ? `${checkboxId}-description` : void 0;
     const errorId = error ? `${checkboxId}-error` : void 0;
-    const describedBy = errorId ?? descriptionId;
+    const elementId = id ?? fieldControl?.controlId ?? generatedId;
+    const describedBy = joinIds(
+      ariaDescribedBy,
+      errorId ?? descriptionId,
+      fieldControl?.describedBy
+    );
     const handleCheckedChange = (nextChecked) => {
       onCheckedChange?.(nextChecked);
       if (isGrouped && valueString) {
@@ -6269,7 +6397,7 @@ var Checkbox = React31.forwardRef(
         CheckboxPrimitive.Root,
         {
           ref,
-          id: checkboxId,
+          id: elementId,
           "data-slot": "checkbox",
           "aria-labelledby": labelId,
           "aria-describedby": describedBy,
@@ -6281,6 +6409,8 @@ var Checkbox = React31.forwardRef(
           disabled: resolvedDisabled,
           className: cn(
             checkboxGroupItemVariants({ appearance, density }),
+            // plain rows sit side by side only at content width; w-full would wrap each one.
+            appearance === "plain" && group?.orientation === "horizontal" && "w-auto",
             className
           ),
           onCheckedChange: handleCheckedChange,
@@ -6366,7 +6496,7 @@ var Checkbox = React31.forwardRef(
               CheckboxPrimitive.Root,
               {
                 ref,
-                id: checkboxId,
+                id: elementId,
                 "data-slot": "checkbox",
                 "aria-describedby": describedBy,
                 "aria-required": required || void 0,
@@ -6400,7 +6530,7 @@ var Checkbox = React31.forwardRef(
               "label",
               {
                 id: labelId,
-                htmlFor: checkboxId,
+                htmlFor: elementId,
                 "data-slot": "checkbox-label",
                 className: labelClassName,
                 children: [
@@ -6478,11 +6608,11 @@ function ContextMenu({
 }
 
 // src/components/ui/list-card.tsx
-import * as React32 from "react";
+import * as React34 from "react";
 import { ChevronRight as ChevronRight2, MoreVertical } from "lucide-react";
-import { Fragment as Fragment14, jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
 function lineTokens(value) {
-  return React32.Children.toArray(value).filter((token) => token !== "");
+  return React34.Children.toArray(value).filter((token) => token !== "");
 }
 function MetaLine({
   tokens,
@@ -6564,10 +6694,10 @@ function ListCard({
       "data-slot": `${slot}-title`,
       className: titleClassName,
       title: typeof title === "string" || typeof title === "number" ? String(title) : void 0,
-      children: overlay && href != null ? React32.createElement(linkComponent ?? "a", { ...linkProps, href, className: overlayClassName }, title) : title
+      children: overlay && href != null ? React34.createElement(linkComponent ?? "a", { ...linkProps, href, className: overlayClassName }, title) : title
     }
   );
-  const content = /* @__PURE__ */ jsxs33(Fragment14, { children: [
+  const content = /* @__PURE__ */ jsxs33(Fragment15, { children: [
     leading != null ? /* @__PURE__ */ jsx37("span", { className: "flex min-h-[18px] items-center", children: leading }) : null,
     /* @__PURE__ */ jsxs33("span", { className: "min-w-0", children: [
       overlay && href == null ? (
@@ -6632,7 +6762,7 @@ function ListCard({
 }
 
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment16, jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 var dataTableVariants = cva13(
   [
     "relative overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -6760,15 +6890,15 @@ function RowContextMenu({
   groups,
   onClose
 }) {
-  const [open, setOpen] = React33.useState(false);
-  const pendingRef = React33.useRef(null);
-  const outsideRef = React33.useRef(false);
-  const shownGroups = React33.useRef([]);
+  const [open, setOpen] = React35.useState(false);
+  const pendingRef = React35.useRef(null);
+  const outsideRef = React35.useRef(false);
+  const shownGroups = React35.useRef([]);
   if (groups) shownGroups.current = groups;
   const gone = openKey !== null && groups === null;
-  const contentRef = React33.useRef(null);
-  const focusInsideRef = React33.useRef(false);
-  React33.useEffect(() => {
+  const contentRef = React35.useRef(null);
+  const focusInsideRef = React35.useRef(false);
+  React35.useEffect(() => {
     pendingRef.current = null;
     outsideRef.current = false;
     focusInsideRef.current = false;
@@ -6782,7 +6912,7 @@ function RowContextMenu({
     const next = content.querySelector('[role="menuitem"]:not([data-disabled])') ?? content;
     next.focus();
   });
-  React33.useEffect(() => {
+  React35.useEffect(() => {
     if (gone) setOpen(false);
   }, [gone]);
   return /* @__PURE__ */ jsx38(
@@ -6812,7 +6942,7 @@ function RowContextMenu({
           onClose(item, outsideRef.current);
         }
       },
-      children: shownGroups.current.map((group, index) => /* @__PURE__ */ jsxs34(React33.Fragment, { children: [
+      children: shownGroups.current.map((group, index) => /* @__PURE__ */ jsxs34(React35.Fragment, { children: [
         index > 0 ? /* @__PURE__ */ jsx38(DropdownMenuSeparator, {}) : null,
         /* @__PURE__ */ jsxs34(DropdownMenuGroup, { children: [
           group.label ? /* @__PURE__ */ jsx38(DropdownMenuLabel, { children: group.label }) : null,
@@ -6847,12 +6977,18 @@ function getRenderedCell(row, column) {
   if (value === null || value === void 0) {
     return null;
   }
-  if (React33.isValidElement(value)) {
+  if (React35.isValidElement(value)) {
     return value;
   }
   return String(value);
 }
-function getNextSort(current, key) {
+function getNextSort(current, key, defaultSort) {
+  if (defaultSort?.key === key) {
+    if (current?.key === key && current.dir === defaultSort.dir) {
+      return defaultSort.dir === "asc" ? "desc" : "asc";
+    }
+    return defaultSort.dir;
+  }
   if (current?.key !== key) {
     return "asc";
   }
@@ -6894,6 +7030,7 @@ function SortIcon({ sort, columnKey }) {
 function MobileSortMenu({
   columns,
   sortBy,
+  defaultSort,
   onSortChange
 }) {
   const active = sortBy ? columns.find((column) => column.key === sortBy.key) : void 0;
@@ -6907,7 +7044,7 @@ function MobileSortMenu({
         size: "sm",
         className: "ml-auto min-w-0",
         children: [
-          active && sortBy ? /* @__PURE__ */ jsxs34(Fragment16, { children: [
+          active && sortBy ? /* @__PURE__ */ jsxs34(Fragment17, { children: [
             /* @__PURE__ */ jsx38("span", { className: "sr-only", children: "\uC815\uB82C " }),
             /* @__PURE__ */ jsx38("span", { className: "truncate", children: active.header }),
             /* @__PURE__ */ jsxs34("span", { className: "sr-only", children: [
@@ -6923,7 +7060,7 @@ function MobileSortMenu({
       DropdownMenuRadioItem,
       {
         value: column.key,
-        onSelect: () => onSortChange?.(column.key, getNextSort(sortBy, column.key)),
+        onSelect: () => onSortChange?.(column.key, getNextSort(sortBy, column.key, defaultSort)),
         children: [
           /* @__PURE__ */ jsx38("span", { className: "truncate", children: column.header }),
           column.key === active?.key ? /* @__PURE__ */ jsx38("span", { className: "ml-auto pl-[var(--space-4)]", children: /* @__PURE__ */ jsx38(SortIcon, { sort: sortBy, columnKey: column.key }) }) : null
@@ -6936,6 +7073,7 @@ function MobileSortMenu({
 function MobileToolbar({
   columns,
   sortBy,
+  defaultSort,
   onSortChange,
   selectable,
   selectAllChecked,
@@ -6953,7 +7091,15 @@ function MobileToolbar({
       className: "flex min-w-0 items-center gap-[var(--space-2)] px-[var(--space-4)] py-[var(--space-2)]",
       children: [
         selectable ? /* @__PURE__ */ jsx38(SelectAllCheckbox, { checked: selectAllChecked, disabled: selectAllDisabled, onToggleAll }) : null,
-        sortableColumns.length > 0 ? /* @__PURE__ */ jsx38(MobileSortMenu, { columns: sortableColumns, sortBy, onSortChange }) : null
+        sortableColumns.length > 0 ? /* @__PURE__ */ jsx38(
+          MobileSortMenu,
+          {
+            columns: sortableColumns,
+            sortBy,
+            defaultSort,
+            onSortChange
+          }
+        ) : null
       ]
     }
   );
@@ -7060,7 +7206,7 @@ var expandedPanelClass = cn(
 );
 var expandChevronClass = "motion-safe:transition-transform motion-safe:duration-[var(--dur-base)] motion-safe:ease-[var(--ease-standard)]";
 function useOpenedOnce(expanded) {
-  const [opened, setOpened] = React33.useState(expanded);
+  const [opened, setOpened] = React35.useState(expanded);
   if (expanded && !opened) {
     setOpened(true);
   }
@@ -7171,7 +7317,7 @@ function DataTableRowView({
   if (!expand) {
     return dataRow;
   }
-  return /* @__PURE__ */ jsxs34(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment17, { children: [
     dataRow,
     /* @__PURE__ */ jsx38(
       "div",
@@ -7317,9 +7463,9 @@ function DataTableMobileCardView({
     }
   );
 }
-var MemoDataTableRow = React33.memo(DataTableRowView);
-var MemoDataTableMobileCard = React33.memo(DataTableMobileCardView);
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? React33.useEffect : React33.useLayoutEffect;
+var MemoDataTableRow = React35.memo(DataTableRowView);
+var MemoDataTableMobileCard = React35.memo(DataTableMobileCardView);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React35.useEffect : React35.useLayoutEffect;
 var VIRTUAL_DEFAULT_OVERSCAN = 8;
 var VIRTUAL_INITIAL_ROWS = 24;
 var VIRTUAL_FALLBACK_SIZE = { desktop: 48, mobile: 120 };
@@ -7399,7 +7545,7 @@ function useVirtualWindow({
   mobileListRef
 }) {
   const count = rowIds.length;
-  const [win, setWin] = React33.useState({
+  const [win, setWin] = React35.useState({
     layout: null,
     start: 0,
     end: VIRTUAL_INITIAL_ROWS,
@@ -7407,12 +7553,12 @@ function useVirtualWindow({
     padTop: 0,
     padBottom: 0
   });
-  const desktopSize = React33.useRef(0);
-  const cardHeights = React33.useRef(null);
+  const desktopSize = React35.useRef(0);
+  const cardHeights = React35.useRef(null);
   cardHeights.current ??= new CardHeights();
-  const update = React33.useRef(() => void 0);
-  const reported = React33.useRef("");
-  const latest = React33.useRef({
+  const update = React35.useRef(() => void 0);
+  const reported = React35.useRef("");
+  const latest = React35.useRef({
     count,
     layout: "desktop",
     extent: uniformExtent(VIRTUAL_FALLBACK_SIZE.desktop)
@@ -7475,7 +7621,7 @@ function useVirtualWindow({
   useIsomorphicLayoutEffect(() => {
     update.current();
   });
-  React33.useEffect(() => {
+  React35.useEffect(() => {
     if (!enabled) {
       return;
     }
@@ -7497,7 +7643,7 @@ function useVirtualWindow({
       window.cancelAnimationFrame(frame);
     };
   }, [enabled]);
-  const scrollToIndex = React33.useCallback(
+  const scrollToIndex = React35.useCallback(
     (index) => {
       const { count: rowCount, layout, extent } = latest.current;
       const list = (layout === "desktop" ? desktopListRef : mobileListRef).current;
@@ -7530,7 +7676,7 @@ function useVisibleLayout({
   desktopRef,
   mobileRef
 }) {
-  const [layout, setLayout] = React33.useState(null);
+  const [layout, setLayout] = React35.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (!enabled) {
       return;
@@ -7567,9 +7713,9 @@ function useLayoutFocusHandoff({
   layout,
   containers
 }) {
-  const lastFocus = React33.useRef(null);
-  const previousLayout = React33.useRef(layout);
-  React33.useEffect(() => {
+  const lastFocus = React35.useRef(null);
+  const previousLayout = React35.useRef(layout);
+  React35.useEffect(() => {
     const root = rootRef.current;
     if (!root) {
       return;
@@ -7646,7 +7792,8 @@ function DataTableInner({
   announceSelection = true,
   activeRowId,
   onRowContextMenu,
-  sortBy,
+  sortBy: sortByProp,
+  defaultSort,
   onSortChange,
   loading = false,
   emptyState,
@@ -7665,18 +7812,19 @@ function DataTableInner({
   "aria-label": ariaLabel = "\uB370\uC774\uD130 \uD14C\uC774\uBE14",
   ...props
 }, ref) {
+  const sortBy = sortByProp ?? defaultSort;
   const virtualOptions = virtual ? virtual === true ? {} : virtual : null;
   const isVirtual = virtualOptions !== null;
   if (isVirtual && columns.some((column) => column.wrap)) {
     warnWrapVirtualOnce();
   }
-  const rootRef = React33.useRef(null);
-  const desktopRef = React33.useRef(null);
-  const headerRef = React33.useRef(null);
-  const desktopListRef = React33.useRef(null);
-  const mobileRef = React33.useRef(null);
-  const mobileListRef = React33.useRef(null);
-  const setRootRef = React33.useCallback(
+  const rootRef = React35.useRef(null);
+  const desktopRef = React35.useRef(null);
+  const headerRef = React35.useRef(null);
+  const desktopListRef = React35.useRef(null);
+  const mobileRef = React35.useRef(null);
+  const mobileListRef = React35.useRef(null);
+  const setRootRef = React35.useCallback(
     (node) => {
       rootRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -7695,7 +7843,7 @@ function DataTableInner({
     desktopListRef,
     mobileListRef
   });
-  React33.useImperativeHandle(virtualOptions?.handleRef, () => ({ scrollToIndex }), [scrollToIndex]);
+  React35.useImperativeHandle(virtualOptions?.handleRef, () => ({ scrollToIndex }), [scrollToIndex]);
   const visibleLayout = useVisibleLayout({ enabled: !isVirtual, desktopRef, mobileRef });
   const activeLayout = isVirtual ? virtualWindow.layout : visibleLayout;
   useLayoutFocusHandoff({
@@ -7719,8 +7867,8 @@ function DataTableInner({
   const expandable = renderExpanded != null;
   const hasRowActions = rowActions != null;
   const gridTemplateColumns = getGridTemplate(columns, selectable, expandable, hasRowActions);
-  const panelIdBase = React33.useId();
-  const [ownExpandedIds, setOwnExpandedIds] = React33.useState(() => /* @__PURE__ */ new Set());
+  const panelIdBase = React35.useId();
+  const [ownExpandedIds, setOwnExpandedIds] = React35.useState(() => /* @__PURE__ */ new Set());
   const resolvedExpandedIds = expandedIds ?? ownExpandedIds;
   const toggleExpanded = (id) => {
     const nextIds = new Set(resolvedExpandedIds);
@@ -7766,8 +7914,8 @@ function DataTableInner({
       window.location.assign(href);
     }
   };
-  const [contextMenu, setContextMenu] = React33.useState(null);
-  const contextMenuKey = React33.useRef(0);
+  const [contextMenu, setContextMenu] = React35.useState(null);
+  const contextMenuKey = React35.useRef(0);
   const contextRow = contextMenu ? data.find((item) => getRowId(item, keyField) === contextMenu.rowId) : void 0;
   const contextActions = contextRow && rowActions ? rowActions(contextRow) : [];
   const contextGroups = countActions(contextActions) > 0 ? toActionGroups(contextActions) : null;
@@ -7801,23 +7949,23 @@ function DataTableInner({
     item?.onSelect();
   };
   const handleRowContextMenu = rowActions ? openRowContextMenu : onRowContextMenu;
-  const latestHandlers = React33.useRef({ toggleRow, activateRow, onRowContextMenu, handleRowContextMenu });
+  const latestHandlers = React35.useRef({ toggleRow, activateRow, onRowContextMenu, handleRowContextMenu });
   useIsomorphicLayoutEffect(() => {
     latestHandlers.current = { toggleRow, activateRow, onRowContextMenu, handleRowContextMenu };
   });
-  const stableToggleRow = React33.useCallback(
+  const stableToggleRow = React35.useCallback(
     (id, checked) => latestHandlers.current.toggleRow(id, checked),
     []
   );
-  const stableActivateRow = React33.useCallback(
+  const stableActivateRow = React35.useCallback(
     (row, href, event) => latestHandlers.current.activateRow(row, href, event),
     []
   );
-  const stableRowContextMenu = React33.useCallback(
+  const stableRowContextMenu = React35.useCallback(
     (rowId, event) => latestHandlers.current.onRowContextMenu?.(rowId, event),
     []
   );
-  const stableHandleRowContextMenu = React33.useCallback(
+  const stableHandleRowContextMenu = React35.useCallback(
     (rowId, event) => latestHandlers.current.handleRowContextMenu?.(rowId, event),
     []
   );
@@ -7937,7 +8085,7 @@ function DataTableInner({
                     selectable ? /* @__PURE__ */ jsx38("div", { role: "columnheader", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx38(SelectAllCheckbox, { checked: selectAllChecked, disabled: selectAllDisabled, onToggleAll: toggleAllRows }) }) : null,
                     columns.map((column) => {
                       const align = column.align ?? "left";
-                      const nextSort = getNextSort(sortBy, column.key);
+                      const nextSort = getNextSort(sortBy, column.key, defaultSort);
                       const ariaSort = sortBy?.key === column.key ? sortBy.dir === "asc" ? "ascending" : "descending" : void 0;
                       return /* @__PURE__ */ jsx38(
                         "div",
@@ -8015,6 +8163,7 @@ function DataTableInner({
             {
               columns,
               sortBy,
+              defaultSort,
               onSortChange,
               selectable,
               selectAllChecked,
@@ -8062,11 +8211,11 @@ function DataTableInner({
     }
   );
 }
-var DataTable = React33.forwardRef(DataTableInner);
+var DataTable = React35.forwardRef(DataTableInner);
 DataTable.displayName = "DataTable";
 
 // src/components/ui/bulk-action-bar.tsx
-import * as React34 from "react";
+import * as React36 from "react";
 import { X as X4 } from "lucide-react";
 import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
 function ActionButton({ action }) {
@@ -8207,10 +8356,18 @@ var idleLineStyle = {
   fontVariantNumeric: "tabular-nums",
   color: "var(--text-secondary)"
 };
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React34.useEffect : React34.useLayoutEffect;
+var warnedInline = false;
+function warnInlineOnce() {
+  if (warnedInline || typeof process === "undefined" || process.env.NODE_ENV === "production") {
+    return;
+  }
+  warnedInline = true;
+  console.warn('BulkActionBar: placement="inline" is deprecated and removed in the next minor. Use "floating".');
+}
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React36.useEffect : React36.useLayoutEffect;
 function useCompactSummary(slot, enabled) {
-  const [fullWidth, setFullWidth] = React34.useState(null);
-  const measure = React34.useCallback(() => {
+  const [fullWidth, setFullWidth] = React36.useState(null);
+  const measure = React36.useCallback(() => {
     if (!slot) return;
     setFullWidth((prev) => {
       if (prev === null) return slot.scrollWidth > slot.clientWidth ? slot.scrollWidth : null;
@@ -8220,7 +8377,7 @@ function useCompactSummary(slot, enabled) {
   useIsomorphicLayoutEffect2(() => {
     if (enabled) measure();
   });
-  React34.useEffect(() => {
+  React36.useEffect(() => {
     if (!enabled || !slot || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(measure);
     observer.observe(slot);
@@ -8244,6 +8401,7 @@ function BulkActionBar({
   ...props
 }) {
   const inline = placement === "inline";
+  if (inline) warnInlineOnce();
   const trailingSlot = trailing !== void 0 && trailing !== null ? /* @__PURE__ */ jsx39(
     "div",
     {
@@ -8257,7 +8415,7 @@ function BulkActionBar({
       children: trailing
     }
   ) : null;
-  const [summaryElement, setSummaryElement] = React34.useState(null);
+  const [summaryElement, setSummaryElement] = React36.useState(null);
   const compact = useCompactSummary(
     summaryElement,
     inline && compactSummary !== void 0 && compactSummary !== null
@@ -8717,7 +8875,7 @@ function ActionSheet({
 }
 
 // src/components/ui/badge.tsx
-import * as React35 from "react";
+import * as React37 from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var TONE = {
   neutral: "bg-[var(--fill-on-bg,var(--semantic-neutral-bg))] text-[var(--semantic-neutral-fg)]",
@@ -8727,7 +8885,7 @@ var TONE = {
   error: "bg-[var(--semantic-error-bg)] text-[var(--semantic-error-fg)]",
   brand: "bg-[var(--accent-bg-strong)] text-[var(--accent)]"
 };
-var Badge = React35.forwardRef(
+var Badge = React37.forwardRef(
   ({ tone = "neutral", className, children, ...props }, ref) => /* @__PURE__ */ jsx45(
     "span",
     {
@@ -8748,7 +8906,7 @@ var Badge = React35.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/ui/two-tier-badge.tsx
-import * as React36 from "react";
+import * as React38 from "react";
 import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 var FG = {
   neutral: "var(--text-secondary)",
@@ -8771,7 +8929,7 @@ var SEGMENT = {
   md: "gap-[7px] py-[var(--space-1)] px-[var(--space-3)] text-[14px]"
 };
 var DOT = { xs: 5, sm: 6, md: 7 };
-var TwoTierBadge = React36.forwardRef(
+var TwoTierBadge = React38.forwardRef(
   ({ primary, secondary, tone = "neutral", emphasis = "subtle", size = "sm", showDot = false, className, style, ...props }, ref) => {
     const strong = emphasis === "strong";
     const fg = FG[tone];
@@ -8841,7 +8999,7 @@ var TwoTierBadge = React36.forwardRef(
 TwoTierBadge.displayName = "TwoTierBadge";
 
 // src/components/ui/status-badge.tsx
-import * as React37 from "react";
+import * as React39 from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var ROLE = {
   error: "error",
@@ -8852,13 +9010,13 @@ var ROLE = {
   success: "success",
   archived: "neutral"
 };
-var StatusBadge = React37.forwardRef(
+var StatusBadge = React39.forwardRef(
   ({ status = "active", emphasis: _emphasis, size: _size, showDot: _showDot, pulse: _pulse, ...props }, ref) => /* @__PURE__ */ jsx47(Badge, { ref, tone: ROLE[status], ...props })
 );
 StatusBadge.displayName = "StatusBadge";
 
 // src/components/ui/status-dot.tsx
-import * as React38 from "react";
+import * as React40 from "react";
 import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var DOT2 = {
   neutral: "bg-[var(--semantic-neutral-fg)]",
@@ -8867,7 +9025,7 @@ var DOT2 = {
   warning: "bg-[var(--semantic-warning-fg)]",
   error: "bg-[var(--semantic-error-fg)]"
 };
-var StatusDot = React38.forwardRef(
+var StatusDot = React40.forwardRef(
   ({ tone, label, pulse = false, className, ...props }, ref) => /* @__PURE__ */ jsxs38(
     "span",
     {
@@ -8901,9 +9059,9 @@ var StatusDot = React38.forwardRef(
 StatusDot.displayName = "StatusDot";
 
 // src/components/ui/notification-badge.tsx
-import * as React39 from "react";
+import * as React41 from "react";
 import { cva as cva14 } from "class-variance-authority";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var notificationBadgeVariants = cva14(
   [
     "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)]",
@@ -8934,7 +9092,7 @@ function formatNotificationCount(count, max) {
   }
   return String(count);
 }
-var NotificationBadge = React39.forwardRef(
+var NotificationBadge = React41.forwardRef(
   ({
     className,
     count,
@@ -8949,17 +9107,19 @@ var NotificationBadge = React39.forwardRef(
     }
     const normalizedMax = Math.max(1, Math.floor(max));
     const label = ariaLabel ?? (count > normalizedMax ? `\uC77D\uC9C0 \uC54A\uC740 \uC54C\uB9BC ${normalizedMax}\uAC1C \uC774\uC0C1` : `\uC77D\uC9C0 \uC54A\uC740 \uC54C\uB9BC ${count}\uAC1C`);
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsxs39(
       "span",
       {
         ref,
         "data-slot": "notification-badge",
         "data-size": size,
         "data-placement": placement,
-        "aria-label": label,
         className: cn(notificationBadgeVariants({ size, placement, className })),
         ...props,
-        children: formatNotificationCount(count, normalizedMax)
+        children: [
+          /* @__PURE__ */ jsx49("span", { "aria-hidden": "true", children: formatNotificationCount(count, normalizedMax) }),
+          /* @__PURE__ */ jsx49("span", { className: "sr-only", children: label })
+        ]
       }
     );
   }
@@ -8967,9 +9127,9 @@ var NotificationBadge = React39.forwardRef(
 NotificationBadge.displayName = "NotificationBadge";
 
 // src/components/ui/empty-state.tsx
-import * as React40 from "react";
+import * as React42 from "react";
 import { cva as cva15 } from "class-variance-authority";
-import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 var emptyStateBaseVariants = cva15(
   [
     "flex flex-col items-center justify-center text-center",
@@ -8995,7 +9155,7 @@ var emptyStateBaseVariants = cva15(
   }
 );
 var PAGE_FILL_QUERY = "(min-width: 768px)";
-var useIsomorphicLayoutEffect3 = typeof window === "undefined" ? React40.useEffect : React40.useLayoutEffect;
+var useIsomorphicLayoutEffect3 = typeof window === "undefined" ? React42.useEffect : React42.useLayoutEffect;
 function findScrollParent(node) {
   for (let el = node.parentElement; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
     const { overflowY } = getComputedStyle(el);
@@ -9107,7 +9267,7 @@ var iconSize2 = {
   md: 20,
   lg: 24
 };
-var EmptyState = React40.forwardRef(
+var EmptyState = React42.forwardRef(
   ({
     className,
     size = "md",
@@ -9123,9 +9283,9 @@ var EmptyState = React40.forwardRef(
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
-    const pageRef = React40.useRef(null);
+    const pageRef = React42.useRef(null);
     usePageFill(pageRef, layout === "page");
-    const box = /* @__PURE__ */ jsxs39(
+    const box = /* @__PURE__ */ jsxs40(
       "div",
       {
         ref,
@@ -9143,7 +9303,7 @@ var EmptyState = React40.forwardRef(
               children: /* @__PURE__ */ jsx50(Icon, { size: iconSize2[resolvedSize], strokeWidth: 1.75 })
             }
           ) : null,
-          /* @__PURE__ */ jsxs39("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
+          /* @__PURE__ */ jsxs40("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
             /* @__PURE__ */ jsx50(
               "h2",
               {
@@ -9189,10 +9349,10 @@ var EmptyState = React40.forwardRef(
 EmptyState.displayName = "EmptyState";
 
 // src/components/ui/error-state.tsx
-import * as React41 from "react";
+import * as React43 from "react";
 import { AlertTriangle } from "lucide-react";
 import { cva as cva16 } from "class-variance-authority";
-import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
 var errorStateVariants = cva16(
   [
     "flex flex-col items-center justify-center text-center",
@@ -9214,7 +9374,7 @@ var errorStateVariants = cva16(
     }
   }
 );
-var ErrorState = React41.forwardRef(
+var ErrorState = React43.forwardRef(
   ({
     className,
     size = "md",
@@ -9225,7 +9385,7 @@ var ErrorState = React41.forwardRef(
     onRetry,
     retryLabel = "\uB2E4\uC2DC \uC2DC\uB3C4",
     ...props
-  }, ref) => /* @__PURE__ */ jsxs40(
+  }, ref) => /* @__PURE__ */ jsxs41(
     "div",
     {
       ref,
@@ -9243,7 +9403,7 @@ var ErrorState = React41.forwardRef(
             children: /* @__PURE__ */ jsx51(AlertTriangle, { size: 24, strokeWidth: 1.75 })
           }
         ),
-        /* @__PURE__ */ jsxs40("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
+        /* @__PURE__ */ jsxs41("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
           /* @__PURE__ */ jsx51(
             "h2",
             {
@@ -9277,7 +9437,7 @@ var ErrorState = React41.forwardRef(
 ErrorState.displayName = "ErrorState";
 
 // src/components/ui/skeleton.tsx
-import * as React42 from "react";
+import * as React44 from "react";
 import { cva as cva17 } from "class-variance-authority";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var skeletonVariants = cva17(
@@ -9323,7 +9483,7 @@ var spinnerVariants = cva17(
     }
   }
 );
-var Skeleton = React42.forwardRef(
+var Skeleton = React44.forwardRef(
   ({ className, shape, style, ...props }, ref) => /* @__PURE__ */ jsx52(
     "div",
     {
@@ -9337,7 +9497,7 @@ var Skeleton = React42.forwardRef(
 );
 Skeleton.displayName = "Skeleton";
 var defaultTextWidths = ["92%", "84%", "68%", "76%"];
-var SkeletonText = React42.forwardRef(
+var SkeletonText = React44.forwardRef(
   ({ className, lines = 3, widths = defaultTextWidths, ...props }, ref) => /* @__PURE__ */ jsx52(
     "div",
     {
@@ -9357,7 +9517,7 @@ var SkeletonText = React42.forwardRef(
   )
 );
 SkeletonText.displayName = "SkeletonText";
-var SkeletonRow = React42.forwardRef(
+var SkeletonRow = React44.forwardRef(
   ({
     className,
     columns,
@@ -9414,7 +9574,7 @@ var SkeletonRow = React42.forwardRef(
   }
 );
 SkeletonRow.displayName = "SkeletonRow";
-var Spinner = React42.forwardRef(
+var Spinner = React44.forwardRef(
   ({ className, size, label = "\uB85C\uB529 \uC911", ...props }, ref) => /* @__PURE__ */ jsx52(
     "span",
     {
@@ -9430,12 +9590,12 @@ var Spinner = React42.forwardRef(
 Spinner.displayName = "Spinner";
 
 // src/components/ui/pagination.tsx
-import * as React43 from "react";
+import * as React45 from "react";
 import { ChevronsLeft, ChevronLeft, ChevronRight as ChevronRight4, ChevronsRight } from "lucide-react";
 import { cva as cva18 } from "class-variance-authority";
 
 // src/components/ui/page-size-select.tsx
-import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = [10, 20, 50, 100];
 function PageSizeSelect({
   value,
@@ -9454,7 +9614,7 @@ function PageSizeSelect({
     label: `${opt}${unit}`
   }));
   const selectSize = size === "compact" ? "sm" : "md";
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       "data-slot": "page-size-select",
@@ -9486,7 +9646,7 @@ function PageSizeSelect({
 }
 
 // src/components/ui/pagination.tsx
-import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 var paginationVariants = cva18(
   [
     "flex w-full flex-col gap-[var(--space-3)]",
@@ -9571,7 +9731,7 @@ function NavigationButton({
     }
   );
 }
-var Pagination = React43.forwardRef(
+var Pagination = React45.forwardRef(
   ({
     className,
     size = "standard",
@@ -9596,7 +9756,7 @@ var Pagination = React43.forwardRef(
     const items = getPaginationItems(currentPage, pageCount);
     const isFirstPage = currentPage === 1;
     const isLastPage = currentPage === pageCount;
-    return /* @__PURE__ */ jsxs42(
+    return /* @__PURE__ */ jsxs43(
       "nav",
       {
         ref,
@@ -9606,7 +9766,7 @@ var Pagination = React43.forwardRef(
         className: cn(paginationVariants({ size: resolvedSize, className })),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs42("div", { className: "flex flex-wrap items-center gap-[var(--space-3)]", children: [
+          /* @__PURE__ */ jsxs43("div", { className: "flex flex-wrap items-center gap-[var(--space-3)]", children: [
             /* @__PURE__ */ jsx54("span", { "data-slot": "pagination-total", className: "font-medium text-text-secondary", children: totalLabel(total) }),
             showPageSize ? /* @__PURE__ */ jsx54("div", { "data-slot": "pagination-size", children: /* @__PURE__ */ jsx54(
               PageSizeSelect,
@@ -9620,7 +9780,7 @@ var Pagination = React43.forwardRef(
               }
             ) }) : null
           ] }),
-          /* @__PURE__ */ jsxs42(
+          /* @__PURE__ */ jsxs43(
             "div",
             {
               "data-slot": "pagination-list",
@@ -9709,7 +9869,7 @@ Pagination.displayName = "Pagination";
 
 // src/components/ui/table-pagination.tsx
 import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight5 } from "lucide-react";
-import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 var TABLE_PAGE_SIZE_OPTIONS = [20, 50, 100];
 function shouldHideTablePagination({
   rangeEnd,
@@ -9739,7 +9899,7 @@ function TablePagination({
   "aria-label": ariaLabel = "\uD398\uC774\uC9C0\uB124\uC774\uC158"
 }) {
   if (shouldHideTablePagination({ rangeEnd, total, hasPrev, hasNext, pageSizeOptions })) return null;
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     "nav",
     {
       "data-slot": "table-pagination",
@@ -9756,16 +9916,16 @@ function TablePagination({
             className: "shrink-0 max-lg:[&>span:first-child]:hidden"
           }
         ),
-        /* @__PURE__ */ jsxs43("div", { className: "flex min-w-0 items-center gap-[var(--space-2)]", children: [
-          /* @__PURE__ */ jsxs43("span", { "data-slot": "table-pagination-range", className: "whitespace-nowrap tabular-nums", children: [
-            /* @__PURE__ */ jsxs43("span", { className: "font-medium text-text-primary", children: [
+        /* @__PURE__ */ jsxs44("div", { className: "flex min-w-0 items-center gap-[var(--space-2)]", children: [
+          /* @__PURE__ */ jsxs44("span", { "data-slot": "table-pagination-range", className: "whitespace-nowrap tabular-nums", children: [
+            /* @__PURE__ */ jsxs44("span", { className: "font-medium text-text-primary", children: [
               formatCount(rangeStart),
               "\u2013",
               formatCount(rangeEnd)
             ] }),
             total !== void 0 ? /* @__PURE__ */ jsx55("span", { "data-slot": "table-pagination-total", className: "text-text-tertiary @max-[400px]:hidden", children: ` / \uCD1D ${formatCount(total)}${unit}` }) : null
           ] }),
-          /* @__PURE__ */ jsxs43("div", { className: "flex shrink-0 items-center gap-[var(--space-1)]", children: [
+          /* @__PURE__ */ jsxs44("div", { className: "flex shrink-0 items-center gap-[var(--space-1)]", children: [
             /* @__PURE__ */ jsx55(
               IconButton,
               {
@@ -9797,7 +9957,7 @@ function TablePagination({
 
 // src/components/ui/mode-toggle.tsx
 import { cva as cva19 } from "class-variance-authority";
-import { jsx as jsx56, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
 var modeToggleVariants = cva19(
   [
     "inline-flex items-center rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -9826,19 +9986,24 @@ function ModeToggle({
   options,
   value,
   onChange,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   ...props
 }) {
+  const field = useFormFieldControl();
   return /* @__PURE__ */ jsx56(
     "div",
     {
       role: "group",
+      "aria-labelledby": ariaLabelledBy ?? (props["aria-label"] ? void 0 : field?.labelId),
+      "aria-describedby": joinIds(ariaDescribedBy, field?.describedBy),
       "data-slot": "mode-toggle",
       className: cn(modeToggleVariants(), className),
       ...props,
-      children: options.map((option) => {
+      children: /* @__PURE__ */ jsx56(FormFieldBoundary, { children: options.map((option) => {
         const Icon = option.icon;
         const isActive = option.value === value;
-        return /* @__PURE__ */ jsxs44(
+        return /* @__PURE__ */ jsxs45(
           "button",
           {
             type: "button",
@@ -9860,15 +10025,15 @@ function ModeToggle({
           },
           option.value
         );
-      })
+      }) })
     }
   );
 }
 
 // src/components/ui/action-footer.tsx
-import * as React44 from "react";
+import * as React46 from "react";
 import { cva as cva20 } from "class-variance-authority";
-import { jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
 var actionFooterVariants = cva20(
   [
     // Below sm: two fixed rows — destructive actions (start) and status (end) on top, the main
@@ -9967,7 +10132,7 @@ function renderAction(action, className) {
   }
   return /* @__PURE__ */ jsx57(Button, { ...common, ...style, size: "lg", loading: action.loading, children: action.label }, key);
 }
-var ActionFooter = React44.forwardRef(
+var ActionFooter = React46.forwardRef(
   ({
     className,
     status,
@@ -9980,7 +10145,7 @@ var ActionFooter = React44.forwardRef(
     const visibleActions = actions.filter((action) => canRenderAction(action, permissions));
     const destructiveActions = visibleActions.filter(isDestructive);
     const mainActions = sortMainActions(visibleActions.filter((action) => !isDestructive(action)));
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs46(
       "div",
       {
         ref,
@@ -9997,7 +10162,7 @@ var ActionFooter = React44.forwardRef(
               children: destructiveActions.map((action) => renderAction(action))
             }
           ) : null,
-          status ? /* @__PURE__ */ jsxs45(
+          status ? /* @__PURE__ */ jsxs46(
             "div",
             {
               "data-slot": "action-footer-status",
@@ -10037,9 +10202,9 @@ var ActionFooter = React44.forwardRef(
 ActionFooter.displayName = "ActionFooter";
 
 // src/components/ui/toast.tsx
-import * as React45 from "react";
+import * as React47 from "react";
 import { cva as cva21 } from "class-variance-authority";
-import { jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
 var DOT3 = {
   default: "var(--neutral)",
   success: "var(--success)",
@@ -10157,7 +10322,7 @@ var toast = {
   }
 };
 var Toast = toast;
-var ToastRoot = React45.forwardRef(
+var ToastRoot = React47.forwardRef(
   ({
     className,
     id,
@@ -10174,10 +10339,10 @@ var ToastRoot = React45.forwardRef(
     ...props
   }, ref) => {
     const durationMs = getToastDuration({ message, variant, duration });
-    const onCloseRef = React45.useRef(onClose);
+    const onCloseRef = React47.useRef(onClose);
     onCloseRef.current = onClose;
-    const timerRef = React45.useRef(null);
-    React45.useEffect(() => {
+    const timerRef = React47.useRef(null);
+    React47.useEffect(() => {
       if (!onCloseRef.current) return void 0;
       const timer = createToastTimer(durationMs, () => onCloseRef.current?.());
       timerRef.current = timer;
@@ -10186,7 +10351,7 @@ var ToastRoot = React45.forwardRef(
         timerRef.current = null;
       };
     }, [durationMs]);
-    return /* @__PURE__ */ jsxs46(
+    return /* @__PURE__ */ jsxs47(
       "div",
       {
         ref,
@@ -10223,7 +10388,7 @@ var ToastRoot = React45.forwardRef(
               style: { background: DOT3[variant] ?? DOT3.default }
             }
           ),
-          /* @__PURE__ */ jsxs46("div", { "data-slot": "toast-body", className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs47("div", { "data-slot": "toast-body", className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsx58(
               "div",
               {
@@ -10241,7 +10406,7 @@ var ToastRoot = React45.forwardRef(
               }
             ) : null
           ] }),
-          /* @__PURE__ */ jsxs46("div", { "data-slot": "toast-actions", className: "flex shrink-0 items-center gap-[2px]", children: [
+          /* @__PURE__ */ jsxs47("div", { "data-slot": "toast-actions", className: "flex shrink-0 items-center gap-[2px]", children: [
             action ? /* @__PURE__ */ jsx58(
               Button,
               {
@@ -10275,7 +10440,7 @@ var ToastRoot = React45.forwardRef(
   }
 );
 ToastRoot.displayName = "ToastRoot";
-var ToastViewport = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx58(
+var ToastViewport = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx58(
   "ol",
   {
     ref,
@@ -10286,24 +10451,24 @@ var ToastViewport = React45.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 ToastViewport.displayName = "ToastViewport";
 function ToastProvider({ children, maxToasts = 3, className, ...props }) {
-  const [items, setItems] = React45.useState([]);
-  React45.useEffect(
+  const [items, setItems] = React47.useState([]);
+  React47.useEffect(
     () => toast.subscribe((nextItems) => {
       setItems(limitToasts(nextItems, maxToasts));
     }),
     [maxToasts]
   );
-  return /* @__PURE__ */ jsxs46("div", { "data-slot": "toast-provider", className, ...props, children: [
+  return /* @__PURE__ */ jsxs47("div", { "data-slot": "toast-provider", className, ...props, children: [
     children,
     /* @__PURE__ */ jsx58(ToastViewport, { children: items.map((item) => /* @__PURE__ */ jsx58("li", { children: /* @__PURE__ */ jsx58(ToastRoot, { ...item, onClose: () => toast.dismiss(item.id) }) }, item.id)) })
   ] });
 }
 
 // src/components/ui/otp-field.tsx
-import * as React46 from "react";
+import * as React48 from "react";
 import { cva as cva22 } from "class-variance-authority";
 import { AlertCircle as AlertCircle4 } from "lucide-react";
-import { Fragment as Fragment17, jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx59, jsxs as jsxs48 } from "react/jsx-runtime";
 var otpFieldVariants = cva22("flex w-full min-w-0 flex-col gap-[var(--space-3)]", {
   variants: {
     size: {
@@ -10430,7 +10595,7 @@ function fillDigitsFromIndex(slots, index, inserted, length) {
     focusIndex: Math.min(cursor, length - 1)
   };
 }
-var OTPField = React46.forwardRef(
+var OTPField = React48.forwardRef(
   ({
     className,
     defaultValue,
@@ -10450,26 +10615,34 @@ var OTPField = React46.forwardRef(
     surface = "surface",
     value,
     required,
+    "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
-    const generatedId = React46.useId();
+    const formField = useFormFieldControl();
+    const generatedId = React48.useId();
     const fieldId = id ?? generatedId;
-    const labelId = `${fieldId}-label`;
-    const helperId = helperText ? `${fieldId}-helper` : void 0;
-    const errorId = errorText ? `${fieldId}-error` : void 0;
+    const slotId = formField ? generatedId : fieldId;
+    const labelId = `${slotId}-label`;
+    const helperId = helperText ? `${slotId}-helper` : void 0;
+    const errorId = errorText ? `${slotId}-error` : void 0;
     const resolvedState = invalid || errorText ? "error" : "default";
     const isControlled = value !== void 0;
-    const [uncontrolledSlots, setUncontrolledSlots] = React46.useState(
+    const [uncontrolledSlots, setUncontrolledSlots] = React48.useState(
       () => toDigitsArray(onlyDigits(defaultValue, length), length)
     );
-    const resolvedSlots = React46.useMemo(
+    const resolvedSlots = React48.useMemo(
       () => isControlled ? toDigitsArray(onlyDigits(value, length), length) : uncontrolledSlots,
       [isControlled, length, uncontrolledSlots, value]
     );
     const resolvedValue = joinDigits(resolvedSlots).slice(0, length);
-    const cellsRef = React46.useRef([]);
-    const groupDescribedBy = [helperId, errorId].filter(Boolean).join(" ") || void 0;
-    const setResolvedValue = React46.useCallback(
+    const cellsRef = React48.useRef([]);
+    const groupDescribedBy = joinIds(
+      ariaDescribedBy,
+      helperId,
+      errorId,
+      formField?.describedBy
+    );
+    const setResolvedValue = React48.useCallback(
       (nextSlots, focusIndex) => {
         const normalizedSlots = nextSlots.slice(0, length);
         const normalizedValue = joinDigits(normalizedSlots).slice(0, length);
@@ -10488,7 +10661,7 @@ var OTPField = React46.forwardRef(
       },
       [disabled, isControlled, length, onComplete, onValueChange]
     );
-    return /* @__PURE__ */ jsxs47(
+    return /* @__PURE__ */ jsxs48(
       "fieldset",
       {
         ref,
@@ -10501,7 +10674,7 @@ var OTPField = React46.forwardRef(
         className: cn(otpFieldVariants({ size, className })),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs47(
+          /* @__PURE__ */ jsxs48(
             "legend",
             {
               id: labelId,
@@ -10625,7 +10798,7 @@ var OTPField = React46.forwardRef(
               "data-slot": "otp-field-message",
               "data-kind": errorText ? "error" : "helper",
               className: otpFieldMessageVariants({ state: resolvedState }),
-              children: errorText ? /* @__PURE__ */ jsxs47(Fragment17, { children: [
+              children: errorText ? /* @__PURE__ */ jsxs48(Fragment18, { children: [
                 /* @__PURE__ */ jsx59(
                   AlertCircle4,
                   {
@@ -10659,10 +10832,10 @@ var OTPField = React46.forwardRef(
 OTPField.displayName = "OTPField";
 
 // src/components/ui/search-field.tsx
-import * as React47 from "react";
+import * as React49 from "react";
 import { Search, X as X5 } from "lucide-react";
 import { cva as cva23 } from "class-variance-authority";
-import { jsx as jsx60, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs49 } from "react/jsx-runtime";
 var searchFieldVariants = cva23("relative flex w-full items-center", {
   variants: {
     size: {
@@ -10727,7 +10900,7 @@ var iconSize3 = {
 function hasVisibleValue(value) {
   return typeof value === "string" ? value.length > 0 : value !== void 0;
 }
-var SearchField = React47.forwardRef(
+var SearchField = React49.forwardRef(
   ({
     className,
     inputMode = "search",
@@ -10740,15 +10913,18 @@ var SearchField = React47.forwardRef(
     value,
     defaultValue,
     disabled,
+    id,
+    "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
+    const field = useFormFieldControl();
     const resolvedSize = size ?? "md";
-    const inputRef = React47.useRef(null);
-    const [hasText, setHasText] = React47.useState(
+    const inputRef = React49.useRef(null);
+    const [hasText, setHasText] = React49.useState(
       () => hasVisibleValue(value ?? defaultValue)
     );
-    React47.useImperativeHandle(ref, () => inputRef.current);
-    React47.useEffect(() => {
+    React49.useImperativeHandle(ref, () => inputRef.current);
+    React49.useEffect(() => {
       if (value !== void 0) {
         setHasText(hasVisibleValue(value));
       }
@@ -10761,7 +10937,7 @@ var SearchField = React47.forwardRef(
       }
       onClear?.();
     };
-    return /* @__PURE__ */ jsxs48(
+    return /* @__PURE__ */ jsxs49(
       "div",
       {
         "data-slot": "search-field",
@@ -10783,6 +10959,8 @@ var SearchField = React47.forwardRef(
             {
               ref: inputRef,
               type: "search",
+              id: id ?? field?.controlId,
+              "aria-describedby": joinIds(ariaDescribedBy, field?.describedBy),
               inputMode,
               value,
               defaultValue,
@@ -10818,7 +10996,7 @@ var SearchField = React47.forwardRef(
 SearchField.displayName = "SearchField";
 
 // src/components/ui/checkbox-group.tsx
-import * as React48 from "react";
+import * as React50 from "react";
 import { cva as cva24 } from "class-variance-authority";
 import { jsx as jsx61 } from "react/jsx-runtime";
 var checkboxGroupVariants = cva24("gap-[var(--space-2)]", {
@@ -10846,7 +11024,7 @@ var checkboxGroupVariants = cva24("gap-[var(--space-2)]", {
 function toSelectionSet(value) {
   return new Set(value ?? []);
 }
-var CheckboxGroup = React48.forwardRef(
+var CheckboxGroup = React50.forwardRef(
   ({
     className,
     children,
@@ -10859,17 +11037,20 @@ var CheckboxGroup = React48.forwardRef(
     columns = "one",
     density = "comfortable",
     disabled,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
+    const field = useFormFieldControl();
     const isControlled = value != null;
-    const [uncontrolledValue, setUncontrolledValue] = React48.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React50.useState(
       () => toSelectionSet(defaultValue)
     );
-    const selectedValues = React48.useMemo(
+    const selectedValues = React50.useMemo(
       () => isControlled ? toSelectionSet(value) : uncontrolledValue,
       [isControlled, uncontrolledValue, value]
     );
-    const toggleValue = React48.useCallback(
+    const toggleValue = React50.useCallback(
       (itemValue, checked) => {
         const nextValues = new Set(selectedValues);
         if (checked) {
@@ -10885,16 +11066,17 @@ var CheckboxGroup = React48.forwardRef(
       },
       [isControlled, onValueChange, selectedValues]
     );
-    const contextValue = React48.useMemo(
+    const contextValue = React50.useMemo(
       () => ({
         appearance,
         density,
+        orientation,
         disabled,
         name,
         selectedValues,
         toggleValue
       }),
-      [appearance, density, disabled, name, selectedValues, toggleValue]
+      [appearance, density, orientation, disabled, name, selectedValues, toggleValue]
     );
     return /* @__PURE__ */ jsx61(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx61(
       "div",
@@ -10903,6 +11085,8 @@ var CheckboxGroup = React48.forwardRef(
         "data-slot": "checkbox-group",
         "data-appearance": appearance,
         role: "group",
+        "aria-labelledby": ariaLabelledBy ?? (props["aria-label"] ? void 0 : field?.labelId),
+        "aria-describedby": joinIds(ariaDescribedBy, field?.describedBy),
         className: cn(
           checkboxGroupVariants({
             appearance,
@@ -10912,7 +11096,7 @@ var CheckboxGroup = React48.forwardRef(
           className
         ),
         ...props,
-        children
+        children: /* @__PURE__ */ jsx61(FormFieldControlContext.Provider, { value: null, children })
       }
     ) });
   }
@@ -10920,11 +11104,11 @@ var CheckboxGroup = React48.forwardRef(
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/ui/radio-group.tsx
-import * as React49 from "react";
+import * as React51 from "react";
 import { cva as cva25 } from "class-variance-authority";
 import { Circle } from "lucide-react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
-import { jsx as jsx62, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs50 } from "react/jsx-runtime";
 var radioGroupVariants = cva25("gap-[var(--space-2)]", {
   variants: {
     appearance: {
@@ -11013,11 +11197,12 @@ var radioControlVariants = cva25(
     }
   }
 );
-var RadioGroupContext = React49.createContext({
+var RadioGroupContext = React51.createContext({
   appearance: "plain",
-  density: "comfortable"
+  density: "comfortable",
+  orientation: "vertical"
 });
-var RadioGroup = React49.forwardRef(
+var RadioGroup = React51.forwardRef(
   ({
     className,
     children,
@@ -11026,11 +11211,14 @@ var RadioGroup = React49.forwardRef(
     columns = "one",
     density = "comfortable",
     required,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
-    const contextValue = React49.useMemo(
-      () => ({ appearance, density }),
-      [appearance, density]
+    const field = useFormFieldControl();
+    const contextValue = React51.useMemo(
+      () => ({ appearance, density, orientation }),
+      [appearance, density, orientation]
     );
     return /* @__PURE__ */ jsx62(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx62(
       RadioGroupPrimitive.Root,
@@ -11039,6 +11227,8 @@ var RadioGroup = React49.forwardRef(
         "data-slot": "radio-group",
         "data-appearance": appearance,
         "aria-required": required || void 0,
+        "aria-labelledby": ariaLabelledBy ?? (props["aria-label"] ? void 0 : field?.labelId),
+        "aria-describedby": joinIds(ariaDescribedBy, field?.describedBy),
         orientation,
         className: cn(
           radioGroupVariants({
@@ -11049,19 +11239,19 @@ var RadioGroup = React49.forwardRef(
           className
         ),
         ...props,
-        children
+        children: /* @__PURE__ */ jsx62(FormFieldControlContext.Provider, { value: null, children })
       }
     ) });
   }
 );
 RadioGroup.displayName = "RadioGroup";
-var Radio = React49.forwardRef(({ className, children, description, id, ...props }, ref) => {
-  const { appearance, density } = React49.useContext(RadioGroupContext);
-  const generatedId = React49.useId();
+var Radio = React51.forwardRef(({ className, children, description, id, ...props }, ref) => {
+  const { appearance, density, orientation } = React51.useContext(RadioGroupContext);
+  const generatedId = React51.useId();
   const radioId = id ?? generatedId;
   const labelId = `${radioId}-label`;
   const descriptionId = description ? `${radioId}-description` : void 0;
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     RadioGroupPrimitive.Item,
     {
       ref,
@@ -11069,7 +11259,12 @@ var Radio = React49.forwardRef(({ className, children, description, id, ...props
       "data-slot": "radio",
       "aria-labelledby": labelId,
       "aria-describedby": descriptionId,
-      className: cn(radioVariants({ appearance, density }), className),
+      className: cn(
+        radioVariants({ appearance, density }),
+        // plain rows sit side by side only at content width; w-full would wrap each one.
+        appearance === "plain" && orientation === "horizontal" && "w-auto",
+        className
+      ),
       ...props,
       children: [
         /* @__PURE__ */ jsx62(
@@ -11088,7 +11283,7 @@ var Radio = React49.forwardRef(({ className, children, description, id, ...props
             )
           }
         ),
-        /* @__PURE__ */ jsxs49("span", { className: "flex min-w-0 flex-col gap-[var(--space-1)]", children: [
+        /* @__PURE__ */ jsxs50("span", { className: "flex min-w-0 flex-col gap-[var(--space-1)]", children: [
           /* @__PURE__ */ jsx62(
             "span",
             {
@@ -11119,13 +11314,13 @@ Radio.displayName = "Radio";
 
 // src/components/ui/scroll-area.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-import { jsx as jsx63, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs51 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     ScrollAreaPrimitive.Root,
     {
       "data-slot": "scroll-area",
@@ -11225,10 +11420,10 @@ function Progress({
 }
 
 // src/components/ui/tree-view.tsx
-import * as React50 from "react";
+import * as React52 from "react";
 import { ChevronRight as ChevronRight6 } from "lucide-react";
 import { cva as cva26 } from "class-variance-authority";
-import { jsx as jsx65, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs52 } from "react/jsx-runtime";
 var treeViewVariants = cva26(
   "m-0 list-none p-[var(--space-1)] text-body-sm text-foreground"
 );
@@ -11331,27 +11526,27 @@ function TreeView({
   ...rest
 }) {
   const isExpandedControlled = expandedIds !== void 0;
-  const [internalExpanded, setInternalExpanded] = React50.useState(
+  const [internalExpanded, setInternalExpanded] = React52.useState(
     () => defaultExpandedIds ?? []
   );
   const expandedList = isExpandedControlled ? expandedIds : internalExpanded;
-  const expandedSet = React50.useMemo(() => new Set(expandedList), [expandedList]);
-  const items = React50.useMemo(
+  const expandedSet = React52.useMemo(() => new Set(expandedList), [expandedList]);
+  const items = React52.useMemo(
     () => flattenVisibleNodes(nodes, getChildren, expandedSet),
     [nodes, getChildren, expandedSet]
   );
-  const [focusedId, setFocusedId] = React50.useState(null);
+  const [focusedId, setFocusedId] = React52.useState(null);
   const visibleIds = items.map((item) => item.id);
   const activeId = focusedId && visibleIds.includes(focusedId) ? focusedId : selectedId && visibleIds.includes(selectedId) ? selectedId : visibleIds[0] ?? null;
-  const itemRefs = React50.useRef(/* @__PURE__ */ new Map());
-  const commitExpanded = React50.useCallback(
+  const itemRefs = React52.useRef(/* @__PURE__ */ new Map());
+  const commitExpanded = React52.useCallback(
     (next) => {
       if (!isExpandedControlled) setInternalExpanded(next);
       onExpandedChange?.(next);
     },
     [isExpandedControlled, onExpandedChange]
   );
-  const setExpanded = React50.useCallback(
+  const setExpanded = React52.useCallback(
     (id, expand) => {
       const has = expandedSet.has(id);
       if (expand && !has) {
@@ -11362,7 +11557,7 @@ function TreeView({
     },
     [commitExpanded, expandedList, expandedSet]
   );
-  const focusItem = React50.useCallback((id) => {
+  const focusItem = React52.useCallback((id) => {
     setFocusedId(id);
     itemRefs.current.get(id)?.focus();
   }, []);
@@ -11398,7 +11593,7 @@ function TreeView({
       const selected = node.id === selectedId;
       const isActive = node.id === activeId;
       const itemState = { expanded, selected, depth, hasChildren };
-      return /* @__PURE__ */ jsxs51(
+      return /* @__PURE__ */ jsxs52(
         "li",
         {
           ref: (element) => {
@@ -11423,7 +11618,7 @@ function TreeView({
             onSelect?.(node.id, node);
           },
           children: [
-            /* @__PURE__ */ jsxs51(
+            /* @__PURE__ */ jsxs52(
               "span",
               {
                 "data-slot": "treeitem-row",
@@ -11491,7 +11686,7 @@ function TreeView({
 
 // src/components/branding/olun-logo.tsx
 import { OLUN_MASTER, OLUN_SYMBOL, OLUN_WORDMARK } from "@olundot/tokens/brand";
-import { Fragment as Fragment18, jsx as jsx66, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx66, jsxs as jsxs53 } from "react/jsx-runtime";
 var ACCENT_FILL = "var(--accent-pop)";
 var INK = { color: "var(--text-primary)" };
 var INK_TIGHT = { ...INK, display: "block", overflow: "visible" };
@@ -11501,7 +11696,7 @@ function symbolGeometry(size) {
 function SymbolCircles({ size }) {
   const { ring } = OLUN_SYMBOL;
   const g = symbolGeometry(size);
-  return /* @__PURE__ */ jsxs52(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs53(Fragment19, { children: [
     /* @__PURE__ */ jsx66(
       "circle",
       {
@@ -11542,7 +11737,7 @@ function OlunLogo({
   if (!showSymbol) {
     const { full } = OLUN_WORDMARK;
     const height2 = fontSize * full.height / OLUN_WORDMARK.unitsPerEm;
-    return /* @__PURE__ */ jsxs52(
+    return /* @__PURE__ */ jsxs53(
       "svg",
       {
         width: height2 * full.width / full.height,
@@ -11572,7 +11767,7 @@ function OlunLogo({
   }
   const layout = symbolSize > OLUN_SYMBOL.smallMax ? OLUN_MASTER.large : OLUN_MASTER.small;
   const height = symbolSize * layout.height / (OLUN_SYMBOL.box * layout.symbol.scale);
-  return /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsxs53(
     "svg",
     {
       width: height * layout.width / layout.height,