@olundot/ui 0.20.0-next.8 → 0.20.0

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 = {
@@ -990,13 +1019,38 @@ var MARKER_ICON = {
   error: CircleAlert
 };
 var TITLE_LINE_HEIGHT = 21;
-var defaultEmphasis = (v) => v === "error" ? "strong" : "subtle";
-var Alert = React5.forwardRef(
-  ({ variant = "info", emphasis, marker = "icon", title, children, onDismiss, style, ...rest }, ref) => {
-    const weight = emphasis ?? defaultEmphasis(variant);
-    const strong = weight === "strong";
+var actionPlacement = {
+  oneLine: "col-start-2 row-start-2 justify-self-start mt-[var(--space-1)] @[344px]:col-start-3 @[344px]:row-start-1 @[344px]:mt-0 @[344px]:ms-[var(--space-2)]",
+  twoLine: "col-start-2 row-start-3 justify-self-start mt-[var(--space-1)] @[344px]:col-start-3 @[344px]:row-[1/span_2] @[344px]:mt-0 @[344px]:ms-[var(--space-2)]"
+};
+var textWrap = { wordBreak: "keep-all", overflowWrap: "break-word", minWidth: 0 };
+var isEmpty = (node) => {
+  if (node == null || typeof node === "boolean" || node === "") return true;
+  if (Array.isArray(node)) return node.every(isEmpty);
+  if (React6.isValidElement(node) && node.type === React6.Fragment) {
+    return isEmpty(node.props.children);
+  }
+  return false;
+};
+var Alert = React6.forwardRef(
+  ({
+    variant = "info",
+    emphasis = "subtle",
+    marker = "icon",
+    title,
+    children,
+    action,
+    onDismiss,
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const strong = emphasis === "strong";
     const fg = SEM_FG[variant];
     const MarkerIcon = MARKER_ICON[variant];
+    const hasBody = !isEmpty(children);
+    const hasAction = !isEmpty(action);
+    const controlRow = hasBody ? "1 / span 2" : 1;
     return /* @__PURE__ */ jsxs5(
       "div",
       {
@@ -1005,12 +1059,14 @@ var Alert = React5.forwardRef(
         "aria-live": variant === "error" ? "assertive" : "polite",
         "data-slot": "alert",
         "data-variant": variant,
-        "data-emphasis": weight,
+        "data-emphasis": emphasis,
         "data-marker": marker,
+        className: cn(hasAction && "@container w-full", className),
         style: {
-          display: "flex",
-          alignItems: "flex-start",
-          gap: "var(--space-2)",
+          display: "grid",
+          gridTemplateColumns: "auto minmax(0, 1fr) auto auto",
+          rowGap: 2,
+          alignItems: hasBody ? "start" : "center",
           borderRadius: "var(--radius-md)",
           border: "1px solid " + (strong ? "color-mix(in srgb, " + fg + " 26%, transparent)" : "var(--border)"),
           background: strong ? SEM_BG[variant] : "var(--bg-surface)",
@@ -1026,9 +1082,11 @@ var Alert = React5.forwardRef(
               "aria-hidden": "true",
               "data-slot": "alert-marker",
               style: {
+                gridColumn: 1,
+                gridRow: 1,
                 display: "inline-flex",
                 height: TITLE_LINE_HEIGHT,
-                flexShrink: 0,
+                marginInlineEnd: "var(--space-2)",
                 alignItems: "center",
                 justifyContent: "center",
                 color: fg
@@ -1042,37 +1100,49 @@ var Alert = React5.forwardRef(
               ) : /* @__PURE__ */ jsx5(MarkerIcon, { "data-slot": "alert-icon", size: 16, strokeWidth: 2.25 })
             }
           ),
-          /* @__PURE__ */ jsxs5("div", { "data-slot": "alert-content", style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx5(
-              "div",
-              {
-                "data-slot": "alert-title",
-                style: {
-                  fontFamily: "var(--font-sans)",
-                  fontSize: 14,
-                  fontWeight: "var(--fw-medium)",
-                  lineHeight: TITLE_LINE_HEIGHT + "px",
-                  color: strong ? fg : "var(--text-primary)"
-                },
-                children: title
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              "div",
-              {
-                "data-slot": "alert-body",
-                style: {
-                  marginTop: 2,
-                  fontFamily: "var(--font-sans)",
-                  fontSize: "var(--fs-sm)",
-                  lineHeight: "var(--lh-normal)",
-                  color: strong ? "color-mix(in srgb, " + fg + " 88%, var(--text-primary))" : "var(--text-secondary)"
-                },
-                children
-              }
-            )
-          ] }),
-          onDismiss ? /* @__PURE__ */ jsx5(DismissButton, { onDismiss, strong, fg }) : null
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              "data-slot": "alert-title",
+              style: {
+                gridColumn: 2,
+                gridRow: 1,
+                ...textWrap,
+                fontFamily: "var(--font-sans)",
+                fontSize: 14,
+                fontWeight: "var(--fw-medium)",
+                lineHeight: TITLE_LINE_HEIGHT + "px",
+                color: strong ? fg : "var(--text-primary)"
+              },
+              children: title
+            }
+          ),
+          hasBody ? /* @__PURE__ */ jsx5(
+            "div",
+            {
+              "data-slot": "alert-body",
+              style: {
+                gridColumn: 2,
+                gridRow: 2,
+                ...textWrap,
+                fontFamily: "var(--font-sans)",
+                fontSize: "var(--fs-sm)",
+                lineHeight: "var(--lh-normal)",
+                color: strong ? "color-mix(in srgb, " + fg + " 88%, var(--text-primary))" : "var(--text-secondary)"
+              },
+              children
+            }
+          ) : null,
+          hasAction ? /* @__PURE__ */ jsx5(
+            "div",
+            {
+              "data-slot": "alert-action",
+              className: hasBody ? actionPlacement.twoLine : actionPlacement.oneLine,
+              style: { display: "flex", alignItems: "center" },
+              children: action
+            }
+          ) : null,
+          onDismiss ? /* @__PURE__ */ jsx5(DismissButton, { onDismiss, strong, fg, row: controlRow }) : null
         ]
       }
     );
@@ -1082,10 +1152,11 @@ Alert.displayName = "Alert";
 function DismissButton({
   onDismiss,
   strong,
-  fg
+  fg,
+  row
 }) {
-  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",
     {
@@ -1097,8 +1168,11 @@ function DismissButton({
       onMouseLeave: () => setHover(false),
       onFocus: (e) => setFocus(e.currentTarget.matches(":focus-visible")),
       onBlur: () => setFocus(false),
+      className: "relative before:absolute before:-inset-[9px] before:content-['']",
       style: {
-        flexShrink: 0,
+        gridColumn: 4,
+        gridRow: row,
+        marginInlineStart: "var(--space-2)",
         display: "inline-flex",
         width: 28,
         height: 28,
@@ -1117,22 +1191,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 +1212,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 +1235,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 +1261,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 +1330,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 +1357,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 +1368,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 +1391,7 @@ var Textarea = React6.forwardRef(
       "textarea",
       {
         ref,
-        id: label || message || description || hasCounter ? textareaId : id,
+        id: elementId,
         required,
         disabled,
         readOnly,
@@ -1330,7 +1422,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 +1497,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 +1606,7 @@ function SelectItem({
   );
 }
 SelectItem.displayName = "SelectItem";
-var Select = React7.forwardRef(
+var Select = React8.forwardRef(
   ({
     className,
     selectVariant,
@@ -1547,38 +1639,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 +1791,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 +1811,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 +1867,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 +1886,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 +1902,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 +1959,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 +1978,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 +1988,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 +2017,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,11 +2048,11 @@ 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";
-import { Fragment, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var switchFieldVariants = cva7("", {
   variants: {
     labelPlacement: {
@@ -1952,7 +2069,7 @@ var switchFieldVariants = cva7("", {
     fullWidth: false
   }
 });
-var Switch = React9.forwardRef(
+var Switch = React11.forwardRef(
   ({
     className,
     label,
@@ -1963,12 +2080,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 +2100,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)]",
@@ -2057,13 +2177,13 @@ var Switch = React9.forwardRef(
         "data-slot": "switch-field",
         "data-disabled": isDisabled ? "" : void 0,
         className: switchFieldVariants({ labelPlacement, fullWidth }),
-        children: isStart ? /* @__PURE__ */ jsxs10(Fragment, { children: [
+        children: isStart ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
           /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 grow flex-col gap-[var(--space-1)]", children: [
             labelNode,
             descriptionNode
           ] }),
           track
-        ] }) : /* @__PURE__ */ jsxs10(Fragment, { children: [
+        ] }) : /* @__PURE__ */ jsxs10(Fragment2, { children: [
           /* @__PURE__ */ jsxs10("div", { className: "inline-flex items-center gap-[var(--space-3)]", children: [
             track,
             labelNode
@@ -2077,13 +2197,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 +2225,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 +2257,7 @@ function TooltipTrigger({
   onClick: userOnClick,
   ...props
 }) {
-  const ctx = React10.useContext(TooltipTouchContext);
+  const ctx = React12.useContext(TooltipTouchContext);
   return /* @__PURE__ */ jsx11(
     TooltipPrimitive.Trigger,
     {
@@ -2156,7 +2276,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 +2291,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";
+import { Fragment as Fragment4, 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 +2308,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,10 +2339,10 @@ 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 });
+    return /* @__PURE__ */ jsx12(Fragment4, { children });
   }
   if (fallback === "hide" || fallback == null) {
     return null;
@@ -2230,7 +2350,7 @@ function PermissionGuard({
   if (fallback === "disabled") {
     return renderDisabledFallback(children, disabledReason);
   }
-  return /* @__PURE__ */ jsx12(Fragment3, { children: fallback });
+  return /* @__PURE__ */ jsx12(Fragment4, { children: fallback });
 }
 function getPermissionCandidates(permission, scope) {
   const candidates = /* @__PURE__ */ new Set([permission]);
@@ -2253,10 +2373,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 +2402,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 +2453,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 +2474,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 +2484,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 +2497,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 +2510,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 +2520,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 +2539,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 +2551,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 +2638,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 +2663,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 +2688,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 +2701,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 +2747,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",
@@ -2657,7 +2777,7 @@ var DataLayout = React15.forwardRef(
                   "div",
                   {
                     "data-slot": "data-layout-bulkbar",
-                    className: "pointer-events-none sticky bottom-[var(--space-4)] z-20 mt-[var(--space-2)] flex justify-center",
+                    className: "pointer-events-none sticky bottom-[calc(var(--space-4)+env(safe-area-inset-bottom))] z-20 mt-[var(--space-2)] flex justify-center",
                     children: /* @__PURE__ */ jsx16("div", { className: "flex w-full flex-col items-center [&>*:has([data-slot=bulk-action-bar])]:self-stretch [&>*:not(:has([data-slot=bulk-action-bar]))]:pointer-events-auto [&>*]:max-w-full [&_[data-slot=bulk-action-bar]]:pointer-events-auto", children: bulkBar })
                   }
                 ) : null
@@ -2672,9 +2792,9 @@ 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";
+import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var circleBaseClassName = [
   "flex items-center justify-center rounded-[var(--radius-full)] border text-[12px] font-semibold leading-none",
   "transition-[background-color,border-color,color] motion-reduce:transition-none"
@@ -2739,7 +2859,7 @@ function getConnectorClassName(isActivePath) {
     isActivePath ? "bg-[var(--primary)]" : "bg-[var(--border-subtle)]"
   );
 }
-var WizardLayout = React16.forwardRef(
+var WizardLayout = React18.forwardRef(
   ({
     className,
     header,
@@ -2752,8 +2872,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 +2883,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 +3037,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",
                                       {
@@ -2965,7 +3085,7 @@ var WizardLayout = React16.forwardRef(
                                               ) : null
                                             ]
                                           }
-                                        ) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+                                        ) : /* @__PURE__ */ jsxs16(Fragment7, { children: [
                                           /* @__PURE__ */ jsx17(
                                             "span",
                                             {
@@ -3027,14 +3147,14 @@ 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";
-import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var tabsRootVariants = cva9("w-full", {
   variants: {
     orientation: {
@@ -3179,9 +3299,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 +3326,7 @@ function useTabsIndicator(enabled, activeKey, tabsKey, listRef, indicatorRef) {
     },
     [listRef, indicatorRef]
   );
-  React17.useLayoutEffect(() => {
+  React19.useLayoutEffect(() => {
     if (!enabled) {
       placedRef.current = null;
       previousKeyRef.current = null;
@@ -3216,7 +3336,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 +3371,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 +3385,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);
@@ -3301,7 +3421,7 @@ var Tabs = React17.forwardRef(
                     className: cn("group", tabsTriggerVariants({ variant, orientation }), triggerClassName),
                     children: [
                       isLine ? /* @__PURE__ */ jsx18("span", { "data-label": tab.label, className: tabsLabelReserveClassName, children: tab.label }) : /* @__PURE__ */ jsx18("span", { children: tab.label }),
-                      isShownTabBadge(tab.badge) ? /* @__PURE__ */ jsxs17(Fragment7, { children: [
+                      isShownTabBadge(tab.badge) ? /* @__PURE__ */ jsxs17(Fragment8, { children: [
                         /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", "data-slot": "tabs-badge", className: tabsBadgeVariants(), children: formatTabBadge(tab.badge) }),
                         /* @__PURE__ */ jsx18("span", { className: "sr-only", children: ` ${tab.badge}` })
                       ] }) : null,
@@ -3340,7 +3460,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,
@@ -3360,7 +3480,7 @@ var TabsContent = React17.forwardRef(({ className, tabKey, baseId, ...props }, r
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/ui/detail-layout.tsx
-import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function DetailLayoutBody({
   children,
   aside,
@@ -3398,29 +3518,29 @@ 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: [
+        /* @__PURE__ */ jsxs18(Fragment9, { children: [
           child.props.children,
           /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: 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 +3549,7 @@ function appendFooterToActiveTabsContent(children, activeTab, footer) {
     return child;
   });
 }
-var DetailLayout = React18.forwardRef(
+var DetailLayout = React20.forwardRef(
   ({
     className,
     header,
@@ -3495,7 +3615,7 @@ var DetailLayout = React18.forwardRef(
                   baseId,
                   forceMount: true,
                   hidden: tab.key !== activeTab,
-                  children: tab.key === activeTab ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
+                  children: tab.key === activeTab ? /* @__PURE__ */ jsxs18(Fragment9, { children: [
                     body,
                     footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
                   ] }) : null
@@ -3503,7 +3623,7 @@ var DetailLayout = React18.forwardRef(
                 tab.key
               ))
             }
-          ) : /* @__PURE__ */ jsxs18(Fragment8, { children: [
+          ) : /* @__PURE__ */ jsxs18(Fragment9, { children: [
             body,
             footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
           ] })
@@ -3515,7 +3635,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 +3648,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 +3735,7 @@ function FormLayoutSectionBlock({
     }
   );
 }
-var FormLayout = React19.forwardRef(
+var FormLayout = React21.forwardRef(
   ({
     className,
     header,
@@ -3674,11 +3794,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 +3806,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 +3818,7 @@ function useOverlayAction({
     },
     [isBusy, onOpenChange]
   );
-  const run = React20.useCallback(async () => {
+  const run = React22.useCallback(async () => {
     if (busyRef.current || loading || disabled) {
       return;
     }
@@ -3719,11 +3839,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 +3851,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 +3866,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 +3944,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 +4051,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 +4131,7 @@ var iconButtonBadgeVariants = cva10(
     }
   }
 );
-var IconButton = React23.forwardRef(
+var IconButton = React25.forwardRef(
   ({
     className,
     appearance,
@@ -4173,7 +4293,8 @@ var overlaySize = {
   dialog: {
     sm: "max-w-[420px]",
     md: "max-w-[560px]",
-    lg: "max-w-[720px]"
+    lg: "max-w-[720px]",
+    xl: "max-w-[960px]"
   },
   sheet: {
     md: "lg:w-[480px] lg:max-w-[480px]",
@@ -4221,7 +4342,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 +4526,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 +4596,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 +4640,7 @@ function StructuredSheet({
         ]
       }
     )
-  ] }) });
+  ] }) }) });
 }
 function SheetTrigger({
   ...props
@@ -4534,7 +4655,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,
@@ -4704,11 +4825,11 @@ function SheetDescription({
 }
 
 // src/components/ui/dialog.tsx
-import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 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 +4861,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 +4879,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,
@@ -4798,22 +4919,24 @@ function StructuredDialog({
                 footerRow
               ]
             }
-          ) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
+          ) : /* @__PURE__ */ jsxs23(Fragment10, { children: [
             body,
             footerRow
           ] })
         ]
       }
     )
-  ] }) });
+  ] }) }) });
 }
 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 +4953,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 +4964,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 +5049,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 +5061,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 +5070,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 +5082,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";
@@ -4999,7 +5123,7 @@ function FormModal({
 
 // src/components/ui/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive2 } from "radix-ui";
-import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function AlertDialogFrame({
   open,
   onOpenChange,
@@ -5023,7 +5147,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 +5162,7 @@ function AlertDialogFrame({
         ]
       }
     )
-  ] }) });
+  ] }) }) });
 }
 function AlertDialog({
   open,
@@ -5063,7 +5187,7 @@ function AlertDialog({
     disabled: confirmDisabled,
     onError
   });
-  const footer = confirmLabel != null ? /* @__PURE__ */ jsxs25(Fragment10, { children: [
+  const footer = confirmLabel != null ? /* @__PURE__ */ jsxs25(Fragment11, { children: [
     /* @__PURE__ */ jsx28(AlertDialogPrimitive2.Cancel, { asChild: true, children: /* @__PURE__ */ jsx28(Button, { appearance: "outline", tone: "neutral", size: "lg", className: footerButtonHitAreaClassName, disabled: isBusy, children: cancelLabel }) }),
     /* @__PURE__ */ jsx28(
       Button,
@@ -5133,15 +5257,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 Fragment12, 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 +5282,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 +5359,42 @@ var chipCountVariants = cva11(
     }
   }
 );
-var Chip = React27.forwardRef(
+function ChipCount({
+  count,
+  tone,
+  size
+}) {
+  return /* @__PURE__ */ jsxs26(Fragment12, { 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 +5417,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 +5435,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 +5477,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 +5486,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 +5496,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 +5519,7 @@ var PopoverContent = React28.forwardRef(({ className, align = "center", sideOffs
     ),
     ...props,
     children: [
-      children,
+      /* @__PURE__ */ jsx31(FormFieldBoundary, { children }),
       showArrow ? /* @__PURE__ */ jsx31(
         PopoverPrimitive.Arrow,
         {
@@ -5378,7 +5533,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 +5547,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 Fragment14, jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 var collapsibleClassNames = {
   sm: {
     inline: "hidden @[640px]:flex",
@@ -5411,30 +5566,71 @@ var collapsibleClassNames = {
     trigger: "hidden"
   }
 };
-var FilterToolbar = React29.forwardRef(
+var gridCollapsibleClassNames = {
+  sm: { inline: "hidden", trigger: "" },
+  md: { inline: "hidden", trigger: "" },
+  lg: { inline: "hidden", trigger: "" },
+  never: { inline: "flex @[640px]:hidden", trigger: "hidden @[640px]:inline" }
+};
+var gridSearchClassName = "order-1 min-w-[min(160px,100%)] max-w-full flex-[1_1_0%] @[640px]:min-w-0 @[640px]:flex-[3_1_0%]";
+var gridFiltersClassName = "order-3 flex min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:contents";
+var gridCellClassName = cn(
+  "contents @[640px]:block @[640px]:order-3 @[640px]:min-w-0 @[640px]:flex-[3_1_0%]",
+  "@[640px]:[&:has([data-slot=select-trigger])]:flex-[2_1_0%]",
+  "@[640px]:[&:has(>[data-slot=chip])]:flex-none",
+  // A Chip group is named: a role="group" child that holds the Chips. A control that shows its
+  // values as Chips keeps the default share.
+  "@[640px]:[&:has(>[role=group]>[data-slot=chip])]:flex-none",
+  // The control fills its cell, through a width the consumer put on a wrapper.
+  "@[640px]:[&>:not([data-slot=chip])]:w-full @[640px]:[&_[data-slot=select-trigger]]:w-full"
+);
+var MAX_GRID_FILTERS = 3;
+var focusableSelector = "input, button, [tabindex]:not([tabindex='-1'])";
+function canTakeFocus(element) {
+  return Boolean(element && element.getClientRects().length > 0 && !element.matches(":disabled"));
+}
+function filterCells(node, prefix = "") {
+  return React31.Children.toArray(node).flatMap((child, index) => {
+    const key = `${prefix}${React31.isValidElement(child) ? child.key : index}`;
+    return React31.isValidElement(child) && child.type === React31.Fragment ? filterCells(child.props.children, `${key}/`) : [{ key, cell: child }];
+  });
+}
+function warnGridFilters(count) {
+  if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+  console.warn(
+    `FilterToolbar: layout="grid" fits ${MAX_GRID_FILTERS} filters on the line, got ${count}. Move the rest to \`collapsible\`.`
+  );
+}
+var FilterToolbar = React31.forwardRef(
   ({
     className,
     search,
     filters,
     collapsible,
     collapseBelow = "lg",
-    activeFilterCount = 0,
+    activeFilterCount: activeFilterCountProp,
     onClearFilters,
     collapsedLabel = "\uD544\uD130",
     resultSummary,
     clearAction,
     actions,
+    layout = "flow",
+    appliedFilters,
     ...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 rowRef = React31.useRef(null);
+    const chipsRef = React31.useRef(null);
+    const chipRemoveRefs = React31.useRef(/* @__PURE__ */ new Map());
+    const pendingFocusRef = React31.useRef(null);
+    const setRootRefs = React31.useCallback(
       (element) => {
         setRootElement(element);
         if (typeof ref === "function") ref(element);
@@ -5442,7 +5638,7 @@ var FilterToolbar = React29.forwardRef(
       },
       [ref]
     );
-    React29.useEffect(() => {
+    React31.useEffect(() => {
       if (!rootElement) return;
       const updateWidth = () => {
         setContainerWidth(rootElement.getBoundingClientRect().width);
@@ -5453,15 +5649,53 @@ 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 isGrid = layout === "grid";
+    const gridCells = isGrid ? filterCells(filters) : [];
+    const filterCellCount = gridCells.length;
+    React31.useEffect(() => {
+      if (filterCellCount > MAX_GRID_FILTERS) warnGridFilters(filterCellCount);
+    }, [filterCellCount]);
+    React31.useEffect(() => {
+      const ownerDocument = rootElement?.ownerDocument;
+      if (!ownerDocument) return;
+      const dropOutside = (event) => {
+        if (!chipsRef.current?.contains(event.target)) pendingFocusRef.current = null;
+      };
+      ownerDocument.addEventListener("focusin", dropOutside);
+      ownerDocument.addEventListener("pointerdown", dropOutside, true);
+      return () => {
+        ownerDocument.removeEventListener("focusin", dropOutside);
+        ownerDocument.removeEventListener("pointerdown", dropOutside, true);
+      };
+    }, [rootElement]);
+    React31.useEffect(() => {
+      const request = pendingFocusRef.current;
+      if (!request) return;
+      const present = new Set(appliedFilters?.map((filter) => filter.key));
+      if (request.removed.some((key) => present.has(key))) return;
+      pendingFocusRef.current = null;
+      const active = rootElement?.ownerDocument.activeElement;
+      if (active && active !== rootElement.ownerDocument.body) return;
+      const candidates = [
+        ...request.next.map((key) => chipRemoveRefs.current.get(key)),
+        triggerRef.current,
+        ...rowRef.current?.querySelectorAll(focusableSelector) ?? []
+      ];
+      candidates.find(canTakeFocus)?.focus();
+    }, [appliedFilters, rootElement]);
     const hasControls = Boolean(search || filters || collapsible);
+    const hasMeta = Boolean(
+      resultSummary || clearAction || actions && !hasControls
+    );
+    const activeFilterCount = activeFilterCountProp ?? appliedFilters?.length ?? 0;
     const hasAppliedFilters = activeFilterCount > 0;
+    const hasAppliedChips = Boolean(appliedFilters && appliedFilters.length > 0);
     const usesSheet = containerWidth !== null && containerWidth < 640;
-    const collapseClasses = collapsibleClassNames[collapseBelow];
+    const collapseClasses = (isGrid ? gridCollapsibleClassNames : collapsibleClassNames)[collapseBelow];
     const collapseTriggerLabel = hasAppliedFilters ? `${collapsedLabel}, ${activeFilterCount}\uAC1C \uC801\uC6A9` : collapsedLabel;
     const clearFiltersButton = onClearFilters ? /* @__PURE__ */ jsx32(
       "button",
@@ -5521,6 +5755,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",
@@ -5531,14 +5766,18 @@ var FilterToolbar = React29.forwardRef(
           hasControls ? /* @__PURE__ */ jsxs28(
             "div",
             {
+              ref: rowRef,
               "data-slot": "filter-toolbar-row",
-              className: "flex min-h-[32px] w-full flex-wrap items-center justify-start gap-x-[var(--space-2)] gap-y-[var(--space-2)]",
+              className: cn(
+                "flex min-h-[32px] w-full flex-wrap items-center justify-start gap-x-[var(--space-2)] gap-y-[var(--space-2)]",
+                isGrid && "@[640px]:flex-nowrap"
+              ),
               children: [
                 search ? /* @__PURE__ */ jsx32(
                   "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: isGrid ? gridSearchClassName : "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,
@@ -5565,8 +5804,16 @@ var FilterToolbar = React29.forwardRef(
                   "div",
                   {
                     "data-slot": "filter-toolbar-filters",
-                    className: "order-3 flex min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:flex-[2_1_auto]",
-                    children: filters
+                    className: isGrid ? gridFiltersClassName : "order-3 flex min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:flex-[2_1_auto]",
+                    children: isGrid ? gridCells.map(({ key, cell }) => /* @__PURE__ */ jsx32(
+                      "div",
+                      {
+                        "data-slot": "filter-toolbar-cell",
+                        className: gridCellClassName,
+                        children: cell
+                      },
+                      key
+                    )) : filters
                   }
                 ) : null,
                 collapsible && !overlayOpen ? /* @__PURE__ */ jsx32(
@@ -5579,6 +5826,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
               ]
             }
@@ -5593,18 +5848,72 @@ var FilterToolbar = React29.forwardRef(
               children: collapsedContent
             }
           ) : null,
+          hasAppliedChips ? /* @__PURE__ */ jsxs28(
+            "div",
+            {
+              ref: chipsRef,
+              role: "group",
+              "aria-label": collapsedLabel,
+              "data-slot": "filter-toolbar-applied-chips",
+              className: "hidden flex-wrap items-center gap-[var(--space-2)] @[640px]:flex",
+              children: [
+                appliedFilters.map((filter, index) => /* @__PURE__ */ jsx32(
+                  Chip,
+                  {
+                    ref: (button) => {
+                      if (button) chipRemoveRefs.current.set(filter.key, button);
+                      else chipRemoveRefs.current.delete(filter.key);
+                    },
+                    variant: "removable",
+                    size: "md",
+                    removeLabel: `${filter.label} \uC81C\uAC70`,
+                    onClick: () => {
+                      pendingFocusRef.current = {
+                        removed: [filter.key],
+                        next: [appliedFilters[index + 1]?.key, appliedFilters[index - 1]?.key].filter(
+                          (key) => key !== void 0
+                        )
+                      };
+                      filter.onRemove();
+                    },
+                    children: filter.label
+                  },
+                  filter.key
+                )),
+                onClearFilters ? /* @__PURE__ */ jsx32(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "filter-toolbar-clear-filters",
+                    className: "cursor-pointer border-0 bg-transparent p-0 text-body-sm font-medium text-text-secondary no-underline",
+                    onClick: () => {
+                      pendingFocusRef.current = {
+                        removed: appliedFilters.map((filter) => filter.key),
+                        next: []
+                      };
+                      onClearFilters();
+                    },
+                    children: "\uD574\uC81C"
+                  }
+                ) : null
+              ]
+            }
+          ) : null,
           hasAppliedFilters ? /* @__PURE__ */ jsxs28(
             "div",
             {
               "data-slot": "filter-toolbar-applied",
-              className: "flex items-center gap-[var(--space-1)] text-[11px] text-text-tertiary",
+              className: cn(
+                "flex items-center gap-[var(--space-1)] text-[11px] text-text-tertiary",
+                hasAppliedChips && "@[640px]:hidden"
+              ),
               children: [
                 /* @__PURE__ */ jsxs28("span", { children: [
                   "\uD544\uD130 ",
                   activeFilterCount,
                   "\uAC1C \uC801\uC6A9"
                 ] }),
-                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment11, { children: [
+                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment14, { children: [
                   /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: " \xB7 " }),
                   /* @__PURE__ */ jsx32(
                     "button",
@@ -5634,7 +5943,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 +5962,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 +5982,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 +6000,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 +6018,7 @@ function DropdownMenuContent({
       ),
       ...props
     }
-  ) });
+  ) }) });
 }
 function DropdownMenuGroup({
   ...props
@@ -5892,7 +6201,7 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx33(FormFieldBoundary, { children: /* @__PURE__ */ jsx33(
     DropdownMenuPrimitive.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
@@ -5908,20 +6217,23 @@ 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 Fragment16, 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",
   "transition-colors motion-reduce:transition-none hover:bg-[var(--action-hover)]",
   "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--focus-ring)]",
   "enabled:data-[destructive]:text-[var(--semantic-error-fg)]",
-  "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled"
+  "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
+  "aria-disabled:cursor-not-allowed"
 );
 var sheetRowDescriptionClassName = "block text-[12px] font-normal text-text-secondary group-disabled:text-text-disabled";
+var unavailableClassName = "text-text-disabled";
+var reasonClassName = "block text-[12px] font-normal leading-normal text-text-tertiary";
 var sheetGroupLabelClassName = "px-[var(--space-4)] pt-[var(--space-3)] pb-[var(--space-2)] text-[12px] font-semibold leading-normal text-text-tertiary";
 var sheetGroupSeparatorClassName = "h-[var(--space-2)] bg-[var(--bg-inset)]";
 function ActionMenuSheet({
@@ -5934,9 +6246,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 +6276,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,27 +6299,38 @@ 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,
-              group.items.map((item) => {
+              group.items.map((item, itemIndex) => {
                 const Icon = item.icon;
+                const reason = item.disabledReason || void 0;
+                const reasonId = `${labelId}-${index}-${itemIndex}-reason`;
+                const itemLabelId = `${labelId}-${index}-${itemIndex}-label`;
                 return /* @__PURE__ */ jsxs30(
                   "button",
                   {
                     type: "button",
                     "data-slot": "action-menu-item",
-                    "data-destructive": item.destructive ? "" : void 0,
+                    "data-destructive": item.destructive && !reason ? "" : void 0,
                     className: sheetRowClassName,
-                    disabled: item.disabled,
-                    onClick: () => handleSelect(item),
+                    disabled: item.disabled && !reason,
+                    "aria-disabled": reason ? true : void 0,
+                    "aria-labelledby": reason ? itemLabelId : void 0,
+                    "aria-describedby": reason ? reasonId : void 0,
+                    onClick: () => {
+                      if (!reason) handleSelect(item);
+                    },
                     children: [
-                      Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 17, strokeWidth: 1.75, className: "shrink-0" }) : null,
-                      /* @__PURE__ */ jsxs30("span", { className: "min-w-0 flex-1 break-keep", children: [
+                      Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 17, strokeWidth: 1.75, className: cn("shrink-0", reason && unavailableClassName) }) : null,
+                      /* @__PURE__ */ jsx34("span", { className: "min-w-0 flex-1 break-keep", children: reason ? /* @__PURE__ */ jsxs30(Fragment16, { children: [
+                        /* @__PURE__ */ jsx34("span", { id: itemLabelId, className: unavailableClassName, children: item.label }),
+                        /* @__PURE__ */ jsx34("span", { id: reasonId, className: reasonClassName, children: reason })
+                      ] }) : /* @__PURE__ */ jsxs30(Fragment16, { children: [
                         item.label,
                         item.description ? /* @__PURE__ */ jsx34("span", { className: sheetRowDescriptionClassName, children: item.description }) : null
-                      ] })
+                      ] }) })
                     ]
                   },
                   item.id
@@ -6018,11 +6341,53 @@ function ActionMenuSheet({
         ]
       }
     )
-  ] }) });
+  ] }) }) });
+}
+function ActionMenuDropdownItem({
+  item,
+  onPick
+}) {
+  const id = React32.useId();
+  const labelId = `${id}-label`;
+  const reasonId = `${id}-reason`;
+  const Icon = item.icon;
+  const reason = item.disabledReason || void 0;
+  if (!reason) {
+    return /* @__PURE__ */ jsxs30(
+      DropdownMenuItem,
+      {
+        variant: item.destructive ? "destructive" : "default",
+        disabled: item.disabled,
+        onSelect: () => onPick(item),
+        children: [
+          Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75 }) : null,
+          item.label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs30(
+    DropdownMenuItem,
+    {
+      "aria-disabled": true,
+      "aria-labelledby": labelId,
+      "aria-describedby": reasonId,
+      textValue: item.label,
+      className: "aria-disabled:cursor-not-allowed",
+      onSelect: (event) => event.preventDefault(),
+      children: [
+        Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75, className: unavailableClassName }) : null,
+        /* @__PURE__ */ jsxs30("span", { className: "min-w-0 flex-1 break-keep", children: [
+          /* @__PURE__ */ jsx34("span", { id: labelId, className: unavailableClassName, children: item.label }),
+          /* @__PURE__ */ jsx34("span", { id: reasonId, className: cn(reasonClassName, "max-w-64"), children: reason })
+        ] })
+      ]
+    }
+  );
 }
 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 +6402,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 +6414,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,31 +6435,23 @@ function ActionMenu({
     triggerRef.current?.focus();
   };
   const triggerLabel = trigger.props["aria-label"];
-  return /* @__PURE__ */ jsxs30(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment16, { 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,
-          group.items.map((item) => {
-            const Icon = item.icon;
-            return /* @__PURE__ */ jsxs30(
-              DropdownMenuItem,
-              {
-                variant: item.destructive ? "destructive" : "default",
-                disabled: item.disabled,
-                onSelect: () => {
-                  pendingRef.current = item;
-                },
-                children: [
-                  Icon ? /* @__PURE__ */ jsx34(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75 }) : null,
-                  item.label
-                ]
-              },
-              item.id
-            );
-          })
+          group.items.map((item) => /* @__PURE__ */ jsx34(
+            ActionMenuDropdownItem,
+            {
+              item,
+              onPick: (picked) => {
+                pendingRef.current = picked;
+              }
+            },
+            item.id
+          ))
         ] })
       ] }, group.id)) })
     ] }),
@@ -6114,7 +6471,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 +6578,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 +6598,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 +6634,7 @@ var Checkbox = React31.forwardRef(
         CheckboxPrimitive.Root,
         {
           ref,
-          id: checkboxId,
+          id: elementId,
           "data-slot": "checkbox",
           "aria-labelledby": labelId,
           "aria-describedby": describedBy,
@@ -6281,6 +6646,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 +6733,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 +6767,7 @@ var Checkbox = React31.forwardRef(
               "label",
               {
                 id: labelId,
-                htmlFor: checkboxId,
+                htmlFor: elementId,
                 "data-slot": "checkbox-label",
                 className: labelClassName,
                 children: [
@@ -6478,11 +6845,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 Fragment17, 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 +6931,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(Fragment17, { 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 ? (
@@ -6598,7 +6965,7 @@ function ListCard({
           ),
           children: [
             hasValue ? /* @__PURE__ */ jsx37("span", { "data-slot": `${slot}-value`, className: "text-[13px] leading-[20px] text-text-secondary tabular-nums", children: value }) : null,
-            actions != null ? /* @__PURE__ */ jsx37("span", { className: "relative z-[1] flex", children: /* @__PURE__ */ jsx37(
+            actions != null ? /* @__PURE__ */ jsx37("span", { "data-slot": `${slot}-actions`, className: "relative z-[1] flex", children: /* @__PURE__ */ jsx37(
               ActionMenu,
               {
                 title: typeof title === "string" ? title : void 0,
@@ -6632,7 +6999,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 Fragment19, 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)]",
@@ -6755,25 +7122,24 @@ function RowActionsCell({
   );
 }
 function RowContextMenu({
-  openKey,
+  menuKey,
   position,
   groups,
+  cards,
   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(true);
+  const closeRef = React35.useRef(null);
+  const pressedOutside = React35.useRef(false);
+  const close = (reason) => {
+    closeRef.current ??= reason;
+    setOpen(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(() => {
-    pendingRef.current = null;
-    outsideRef.current = false;
-    focusInsideRef.current = false;
-    setOpen(openKey !== null);
-  }, [openKey]);
+  const gone = groups === null;
+  const contentRef = React35.useRef(null);
+  const focusInsideRef = React35.useRef(false);
   useIsomorphicLayoutEffect(() => {
     const content = contentRef.current;
     if (!open || !focusInsideRef.current || !content?.isConnected) return;
@@ -6782,14 +7148,21 @@ function RowContextMenu({
     const next = content.querySelector('[role="menuitem"]:not([data-disabled])') ?? content;
     next.focus();
   });
-  React33.useEffect(() => {
-    if (gone) setOpen(false);
+  React35.useEffect(() => {
+    if (gone) close({ by: "dismiss", outside: false });
   }, [gone]);
+  useIsomorphicLayoutEffect(() => {
+    if (!cards || !open || closeRef.current) return;
+    const active = document.activeElement;
+    close({ by: "layout", focusInside: Boolean(active && contentRef.current?.contains(active)) });
+  }, [cards, open]);
   return /* @__PURE__ */ jsx38(
     ContextMenu,
     {
       open: open && !gone,
-      onOpenChange: setOpen,
+      onOpenChange: (next) => {
+        if (!next) close({ by: "dismiss", outside: false });
+      },
       position,
       contentProps: {
         align: "start",
@@ -6803,37 +7176,31 @@ function RowContextMenu({
           }
         },
         onInteractOutside: () => {
-          outsideRef.current = true;
+          pressedOutside.current = true;
+          close({ by: "dismiss", outside: true });
         },
         onCloseAutoFocus: (event) => {
           event.preventDefault();
-          const item = pendingRef.current;
-          pendingRef.current = null;
-          onClose(item, outsideRef.current);
+          let reason = closeRef.current ?? { by: "dismiss", outside: false };
+          if (pressedOutside.current && reason.by === "dismiss") reason = { by: "dismiss", outside: true };
+          if (pressedOutside.current && reason.by === "layout") reason = { by: "layout", focusInside: false };
+          onClose(menuKey, reason);
         }
       },
-      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,
-          group.items.map((item) => {
-            const Icon = item.icon;
-            return /* @__PURE__ */ jsxs34(
-              DropdownMenuItem,
-              {
-                variant: item.destructive ? "destructive" : "default",
-                disabled: item.disabled,
-                onSelect: () => {
-                  pendingRef.current = item;
-                },
-                children: [
-                  Icon ? /* @__PURE__ */ jsx38(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75 }) : null,
-                  item.label
-                ]
-              },
-              item.id
-            );
-          })
+          group.items.map((item) => /* @__PURE__ */ jsx38(
+            ActionMenuDropdownItem,
+            {
+              item,
+              onPick: (picked) => {
+                closeRef.current ??= { by: "item", item: picked };
+              }
+            },
+            item.id
+          ))
         ] })
       ] }, group.id))
     }
@@ -6847,12 +7214,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 +7267,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 +7281,7 @@ function MobileSortMenu({
         size: "sm",
         className: "ml-auto min-w-0",
         children: [
-          active && sortBy ? /* @__PURE__ */ jsxs34(Fragment16, { children: [
+          active && sortBy ? /* @__PURE__ */ jsxs34(Fragment19, { 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 +7297,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 +7310,7 @@ function MobileSortMenu({
 function MobileToolbar({
   columns,
   sortBy,
+  defaultSort,
   onSortChange,
   selectable,
   selectAllChecked,
@@ -6953,7 +7328,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 +7443,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 +7554,7 @@ function DataTableRowView({
   if (!expand) {
     return dataRow;
   }
-  return /* @__PURE__ */ jsxs34(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs34(Fragment19, { children: [
     dataRow,
     /* @__PURE__ */ jsx38(
       "div",
@@ -7317,9 +7700,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 +7782,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 +7790,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 +7858,7 @@ function useVirtualWindow({
   useIsomorphicLayoutEffect(() => {
     update.current();
   });
-  React33.useEffect(() => {
+  React35.useEffect(() => {
     if (!enabled) {
       return;
     }
@@ -7497,7 +7880,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 +7913,7 @@ function useVisibleLayout({
   desktopRef,
   mobileRef
 }) {
-  const [layout, setLayout] = React33.useState(null);
+  const [layout, setLayout] = React35.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (!enabled) {
       return;
@@ -7567,9 +7950,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 +8029,8 @@ function DataTableInner({
   announceSelection = true,
   activeRowId,
   onRowContextMenu,
-  sortBy,
+  sortBy: sortByProp,
+  defaultSort,
   onSortChange,
   loading = false,
   emptyState,
@@ -7665,18 +8049,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 +8080,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 +8104,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 +8151,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;
@@ -7781,15 +8166,22 @@ function DataTableInner({
     contextMenuKey.current += 1;
     setContextMenu({ rowId, position: { x: event.clientX, y: event.clientY }, key: contextMenuKey.current });
   };
-  const closeRowContextMenu = (item, outside) => {
+  const closeRowContextMenu = (key, close) => {
+    if (key !== contextMenuKey.current) {
+      return;
+    }
     const rowId = contextMenu?.rowId;
-    if (rowId !== void 0 && (item || !outside)) {
-      const list = desktopListRef.current;
-      const row = Array.from(list?.querySelectorAll('[data-slot="data-table-row"]') ?? []).find(
-        (node) => node.getAttribute("data-row-id") === rowId
+    const refocus = close.by === "item" || (close.by === "dismiss" ? !close.outside : close.focusInside);
+    if (rowId !== void 0 && refocus) {
+      const cards = readLayout(desktopRef.current) === "mobile";
+      const list = cards ? mobileListRef.current : desktopListRef.current;
+      const row = Array.from(
+        list?.querySelectorAll(cards ? '[data-slot="data-table-mobile-card"]' : '[data-slot="data-table-row"]') ?? []
+      ).find((node) => node.getAttribute("data-row-id") === rowId);
+      const trigger = row?.querySelector(
+        cards ? '[data-slot="list-card-actions"] button' : '[data-slot="data-table-row-actions"] button'
       );
-      const trigger = row?.querySelector('[data-slot="data-table-row-actions"] button');
-      const target = trigger ?? (row?.hasAttribute("tabindex") ? row : null) ?? list ?? desktopRef.current;
+      const target = trigger ?? (row && (cards || row.hasAttribute("tabindex")) ? row : null) ?? list ?? (cards ? mobileRef : desktopRef).current;
       if (target) {
         if (!target.hasAttribute("tabindex") && !target.matches("a[href],button,input")) {
           target.tabIndex = -1;
@@ -7798,26 +8190,26 @@ function DataTableInner({
       }
     }
     setContextMenu(null);
-    item?.onSelect();
+    if (close.by === "item") close.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 +8329,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 +8407,7 @@ function DataTableInner({
             {
               columns,
               sortBy,
+              defaultSort,
               onSortChange,
               selectable,
               selectAllChecked,
@@ -8049,24 +8442,26 @@ function DataTableInner({
           )
         ] }),
         footer != null ? /* @__PURE__ */ jsx38("div", { "data-slot": "data-table-footer", className: "border-t border-[var(--border-subtle)] empty:hidden", children: footer }) : null,
-        hasRowActions ? /* @__PURE__ */ jsx38(
+        hasRowActions && contextMenu ? /* @__PURE__ */ jsx38(
           RowContextMenu,
           {
-            openKey: contextMenu?.key ?? null,
-            position: contextMenu?.position ?? null,
+            menuKey: contextMenu.key,
+            position: contextMenu.position,
             groups: contextGroups,
+            cards: activeLayout === "mobile",
             onClose: closeRowContextMenu
-          }
+          },
+          contextMenu.key
         ) : null
       ]
     }
   );
 }
-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 }) {
@@ -8114,6 +8509,35 @@ function ActionButton({ action }) {
     }
   );
 }
+function CardActionButton({ action }) {
+  const Icon = action.icon;
+  return /* @__PURE__ */ jsxs35(
+    Button,
+    {
+      appearance: "outline",
+      tone: action.variant === "destructive" ? "danger" : "neutral",
+      size: "sm",
+      className: "before:-inset-y-[5px]",
+      "data-slot": "bulk-action-bar-action",
+      "data-variant": action.variant ?? "default",
+      disabled: action.disabled,
+      title: action.title,
+      onClick: action.onClick,
+      children: [
+        Icon ? /* @__PURE__ */ jsx39(
+          Icon,
+          {
+            "aria-hidden": "true",
+            "data-slot": "bulk-action-bar-action-icon",
+            size: 16,
+            strokeWidth: 1.75
+          }
+        ) : null,
+        action.label
+      ]
+    }
+  );
+}
 function Divider() {
   return /* @__PURE__ */ jsx39(
     "span",
@@ -8156,24 +8580,24 @@ function ClearButton({ onClear }) {
     }
   );
 }
+var CLEAR_CLEARANCE = 32;
 var INLINE_HEIGHT = 40;
 var HIT_AREA = 44;
 var HIT_INSET = 8;
+var FLOATING_BOTTOM = "calc(var(--space-4) + env(safe-area-inset-bottom))";
 var floatingStyle = {
   position: "sticky",
-  bottom: "calc(var(--space-4) + env(safe-area-inset-bottom))",
+  bottom: FLOATING_BOTTOM,
   zIndex: 1100,
   margin: "0 auto",
   display: "flex",
-  minHeight: 32,
-  width: "fit-content",
-  maxWidth: "calc(100% - var(--space-8))",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  borderRadius: 9999,
+  boxSizing: "border-box",
+  width: "min(360px, calc(100% - var(--space-8)))",
+  flexDirection: "column",
+  borderRadius: "var(--radius-xl)",
   border: "1px solid var(--border)",
   background: "var(--bg-raised)",
-  padding: "var(--space-1) var(--space-2)",
+  padding: "var(--space-2) var(--space-4) var(--space-3)",
   boxShadow: "var(--shadow-8)"
 };
 var inlineStyle = {
@@ -8207,10 +8631,128 @@ 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 warnedTrailing = false;
+function warnTrailingOnce() {
+  if (warnedTrailing || typeof process === "undefined" || process.env.NODE_ENV === "production") {
+    return;
+  }
+  warnedTrailing = true;
+  console.warn("BulkActionBar: the floating card ignores `trailing`. Put edit-mode controls at the right end of the toolbar.");
+}
+var OFFSET_PROPERTY = "--olun-bulk-bar-offset";
+var LIFT_ZONE = 204;
+var cardOffsets = /* @__PURE__ */ new Map();
+function writeOffset() {
+  const root = document.documentElement;
+  const offset = Math.max(0, ...cardOffsets.values());
+  const value = offset > 0 ? `${offset}px` : "";
+  if (root.style.getPropertyValue(OFFSET_PROPERTY) === value) return;
+  if (value) root.style.setProperty(OFFSET_PROPERTY, value);
+  else root.style.removeProperty(OFFSET_PROPERTY);
+}
+function reportOffset(key, card) {
+  let offset = 0;
+  if (card.offsetHeight > 0) {
+    const { top, bottom } = card.getBoundingClientRect();
+    if (window.innerHeight - bottom <= LIFT_ZONE) offset = Math.max(0, Math.round(window.innerHeight - top));
+  }
+  if (offset === (cardOffsets.get(key) ?? 0)) return;
+  if (offset > 0) cardOffsets.set(key, offset);
+  else cardOffsets.delete(key);
+  writeOffset();
+}
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React36.useEffect : React36.useLayoutEffect;
+function useBottomOffset(card) {
+  const [key] = React36.useState(() => ({}));
+  React36.useEffect(() => {
+    if (!card) return;
+    let frame = 0;
+    let stopped = false;
+    let listening = false;
+    const schedule = () => {
+      if (frame || stopped) return;
+      frame = requestAnimationFrame(measure);
+    };
+    const listen = (on) => {
+      if (on === listening) return;
+      listening = on;
+      if (on) {
+        window.addEventListener("resize", schedule);
+        window.addEventListener("scroll", schedule, { capture: true, passive: true });
+      } else {
+        window.removeEventListener("resize", schedule);
+        window.removeEventListener("scroll", schedule, { capture: true });
+      }
+    };
+    let watcher = null;
+    let watched = "";
+    const arm = (margin, threshold) => {
+      let first = true;
+      watcher = new IntersectionObserver(
+        ([entry]) => {
+          if (stopped) return;
+          if (first) {
+            first = false;
+            if (entry.intersectionRatio === threshold) return;
+            watcher?.disconnect();
+            arm(margin, entry.intersectionRatio);
+          }
+          schedule();
+        },
+        { root: document, rootMargin: margin, threshold }
+      );
+      watcher.observe(card);
+    };
+    const watch = (on) => {
+      let margin = "";
+      if (on && typeof IntersectionObserver !== "undefined") {
+        const { top, right, bottom, left } = card.getBoundingClientRect();
+        const { clientWidth, clientHeight } = document.documentElement;
+        margin = [top, clientWidth - right, clientHeight - bottom, left].map((inset) => `${-Math.floor(inset)}px`).join(" ");
+      }
+      if (margin === watched) return;
+      watched = margin;
+      watcher?.disconnect();
+      watcher = null;
+      if (margin) arm(margin, 1);
+    };
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => schedule());
+    const measure = () => {
+      frame = 0;
+      reportOffset(key, card);
+      const shown = card.offsetHeight > 0;
+      listen(shown || !observer);
+      watch(shown);
+    };
+    measure();
+    observer?.observe(card);
+    card.addEventListener("animationend", schedule);
+    return () => {
+      stopped = true;
+      cancelAnimationFrame(frame);
+      listen(false);
+      watcher?.disconnect();
+      observer?.disconnect();
+      card.removeEventListener("animationend", schedule);
+      cardOffsets.delete(key);
+      writeOffset();
+    };
+  }, [key, card]);
+  useIsomorphicLayoutEffect2(() => {
+    if (card && typeof ResizeObserver === "undefined") reportOffset(key, card);
+  });
+}
 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 +8762,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,7 +8786,10 @@ function BulkActionBar({
   ...props
 }) {
   const inline = placement === "inline";
-  const trailingSlot = trailing !== void 0 && trailing !== null ? /* @__PURE__ */ jsx39(
+  if (inline) warnInlineOnce();
+  const hasTrailing = trailing !== void 0 && trailing !== null;
+  if (!inline && hasTrailing) warnTrailingOnce();
+  const trailingSlot = inline && hasTrailing ? /* @__PURE__ */ jsx39(
     "div",
     {
       "data-slot": "bulk-action-bar-trailing",
@@ -8257,11 +8802,13 @@ 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
   );
+  const [card, setCard] = React36.useState(null);
+  useBottomOffset(card);
   if (count === 0 && idleContent !== void 0 && trailingSlot) {
     return /* @__PURE__ */ jsxs35(
       "div",
@@ -8316,16 +8863,31 @@ function BulkActionBar({
     "span",
     {
       "data-slot": "bulk-action-bar-count",
-      style: {
-        paddingLeft: inline ? void 0 : "var(--space-2)",
+      style: inline ? {
         paddingRight: "var(--space-1)",
         fontFamily: "var(--font-sans)",
         fontSize: 13,
-        fontWeight: inline ? 600 : 500,
+        fontWeight: 600,
         fontVariantNumeric: "tabular-nums",
         color: "var(--text-primary)",
         whiteSpace: "nowrap"
-      },
+      } : (
+        // First row, 32px like the ✕ beside it; the right padding keeps text clear of it,
+        // and a long unbroken unit or hint breaks instead of running under it.
+        {
+          display: "flex",
+          minHeight: 32,
+          alignItems: "center",
+          paddingRight: CLEAR_CLEARANCE,
+          fontFamily: "var(--font-sans)",
+          fontSize: 13,
+          fontWeight: 500,
+          fontVariantNumeric: "tabular-nums",
+          color: "var(--text-primary)",
+          wordBreak: "keep-all",
+          overflowWrap: "anywhere"
+        }
+      ),
       children: count > 0 ? `${count.toLocaleString("ko-KR")}${unit} \uC120\uD0DD\uB428` : emptyHint
     }
   );
@@ -8335,7 +8897,7 @@ function BulkActionBar({
       ref: setSummaryElement,
       "data-slot": "bulk-action-bar-summary",
       style: {
-        display: inline ? "flex" : "inline-flex",
+        display: "flex",
         minWidth: 0,
         alignItems: "center",
         columnGap: "var(--space-3)",
@@ -8358,27 +8920,30 @@ function BulkActionBar({
             whiteSpace: "nowrap",
             contain: "inline-size"
           }
-        ) : { flexWrap: "wrap", wordBreak: "keep-all" }
+        ) : (
+          // Its own row at the card's full inner width; wraps, never clips.
+          { flexWrap: "wrap", lineHeight: 1.5, wordBreak: "keep-all", overflowWrap: "anywhere" }
+        )
       },
       children: compact ? compactSummary : summary
     }
   ) : null;
-  const actionGroup = /* @__PURE__ */ jsx39(
-    "div",
-    {
-      "data-slot": "bulk-action-bar-actions",
-      style: {
-        display: "flex",
-        minWidth: 0,
-        flexWrap: inline ? "nowrap" : "wrap",
-        alignItems: "center",
-        justifyContent: "flex-end",
-        gap: 2
-      },
-      children: actions.map((action) => /* @__PURE__ */ jsx39(ActionButton, { action }, action.key))
-    }
-  );
   if (inline) {
+    const actionGroup = /* @__PURE__ */ jsx39(
+      "div",
+      {
+        "data-slot": "bulk-action-bar-actions",
+        style: {
+          display: "flex",
+          minWidth: 0,
+          flexWrap: "nowrap",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: 2
+        },
+        children: actions.map((action) => /* @__PURE__ */ jsx39(ActionButton, { action }, action.key))
+      }
+    );
     return /* @__PURE__ */ jsxs35(
       "div",
       {
@@ -8443,6 +9008,7 @@ function BulkActionBar({
         "animate-[olun-bulk-action-bar-in_var(--dur-fast)_var(--ease-out)_both] motion-reduce:animate-none",
         className
       ),
+      ref: setCard,
       style: { ...floatingStyle, ...style },
       ...props,
       children: [
@@ -8454,8 +9020,8 @@ function BulkActionBar({
             style: {
               display: "flex",
               minWidth: 0,
-              alignItems: "center",
-              gap: "var(--space-2)"
+              flexDirection: "column",
+              rowGap: "var(--space-2)"
             },
             children: [
               countLabel,
@@ -8463,11 +9029,29 @@ function BulkActionBar({
             ]
           }
         ),
-        count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx39(Divider, {}) : null,
-        actionGroup,
-        /* @__PURE__ */ jsx39(Divider, {}),
-        /* @__PURE__ */ jsx39(ClearButton, { onClear }),
-        trailingSlot
+        actions.length > 0 ? /* @__PURE__ */ jsx39(
+          "div",
+          {
+            "data-slot": "bulk-action-bar-actions",
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              justifyContent: "flex-end",
+              gap: "var(--space-2)",
+              marginTop: "var(--space-3)"
+            },
+            children: actions.map((action) => /* @__PURE__ */ jsx39(CardActionButton, { action }, action.key))
+          }
+        ) : null,
+        /* @__PURE__ */ jsx39(
+          IconButton,
+          {
+            icon: X4,
+            "aria-label": "\uC120\uD0DD \uD574\uC81C",
+            onClick: onClear,
+            style: { position: "absolute", top: "var(--space-2)", right: "var(--space-2)" }
+          }
+        )
       ]
     }
   );
@@ -8717,7 +9301,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 +9311,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 +9332,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 +9355,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 +9425,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 +9436,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 +9451,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 +9485,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 +9518,7 @@ function formatNotificationCount(count, max) {
   }
   return String(count);
 }
-var NotificationBadge = React39.forwardRef(
+var NotificationBadge = React41.forwardRef(
   ({
     className,
     count,
@@ -8949,17 +9533,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 +9553,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 +9581,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 +9693,7 @@ var iconSize2 = {
   md: 20,
   lg: 24
 };
-var EmptyState = React40.forwardRef(
+var EmptyState = React42.forwardRef(
   ({
     className,
     size = "md",
@@ -9123,9 +9709,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 +9729,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 +9775,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 +9800,7 @@ var errorStateVariants = cva16(
     }
   }
 );
-var ErrorState = React41.forwardRef(
+var ErrorState = React43.forwardRef(
   ({
     className,
     size = "md",
@@ -9225,7 +9811,7 @@ var ErrorState = React41.forwardRef(
     onRetry,
     retryLabel = "\uB2E4\uC2DC \uC2DC\uB3C4",
     ...props
-  }, ref) => /* @__PURE__ */ jsxs40(
+  }, ref) => /* @__PURE__ */ jsxs41(
     "div",
     {
       ref,
@@ -9243,7 +9829,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 +9863,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 +9909,7 @@ var spinnerVariants = cva17(
     }
   }
 );
-var Skeleton = React42.forwardRef(
+var Skeleton = React44.forwardRef(
   ({ className, shape, style, ...props }, ref) => /* @__PURE__ */ jsx52(
     "div",
     {
@@ -9337,7 +9923,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 +9943,7 @@ var SkeletonText = React42.forwardRef(
   )
 );
 SkeletonText.displayName = "SkeletonText";
-var SkeletonRow = React42.forwardRef(
+var SkeletonRow = React44.forwardRef(
   ({
     className,
     columns,
@@ -9414,7 +10000,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 +10016,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 +10040,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 +10072,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 +10157,7 @@ function NavigationButton({
     }
   );
 }
-var Pagination = React43.forwardRef(
+var Pagination = React45.forwardRef(
   ({
     className,
     size = "standard",
@@ -9596,7 +10182,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 +10192,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 +10206,7 @@ var Pagination = React43.forwardRef(
               }
             ) }) : null
           ] }),
-          /* @__PURE__ */ jsxs42(
+          /* @__PURE__ */ jsxs43(
             "div",
             {
               "data-slot": "pagination-list",
@@ -9709,7 +10295,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 +10325,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 +10342,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 +10383,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 { Fragment as Fragment20, 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)]",
@@ -9820,25 +10406,41 @@ var modeToggleItemVariants = cva19(
     "[&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:stroke-[1.75]"
   ].join(" ")
 );
+function formatModeToggleCount(value) {
+  return value > 99 ? "99+" : String(value);
+}
+function isShownModeToggleCount(value) {
+  if (value === void 0) return false;
+  if (Number.isInteger(value) && value >= 0) return true;
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.warn(`ModeToggle: count must be an integer 0 or greater (got ${value}). The count is not shown.`);
+  }
+  return false;
+}
 function ModeToggle({
   className,
   itemClassName,
   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",
@@ -9855,20 +10457,24 @@ function ModeToggle({
             },
             children: [
               Icon ? /* @__PURE__ */ jsx56(Icon, { "aria-hidden": "true", "data-slot": "mode-toggle-icon" }) : null,
-              /* @__PURE__ */ jsx56("span", { children: option.label })
+              /* @__PURE__ */ jsx56("span", { children: option.label }),
+              isShownModeToggleCount(option.count) ? /* @__PURE__ */ jsxs45(Fragment20, { children: [
+                /* @__PURE__ */ jsx56("span", { "aria-hidden": "true", "data-slot": "mode-toggle-count", className: tabsBadgeVariants(), children: formatModeToggleCount(option.count) }),
+                /* @__PURE__ */ jsx56("span", { className: "sr-only", children: ` ${option.count}` })
+              ] }) : null
             ]
           },
           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 +10573,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 +10586,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 +10603,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 +10643,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)",
@@ -10071,7 +10677,8 @@ var toastVariants = cva21(
 );
 var toastViewportVariants = cva21(
   [
-    "fixed bottom-[var(--space-6)] right-[var(--space-6)] z-[var(--z-toast,50)]",
+    // A floating BulkActionBar publishes --olun-bulk-bar-offset while it is up; sit 8px above it.
+    "fixed bottom-[max(var(--space-6),calc(var(--olun-bulk-bar-offset,0px)+var(--space-2)))] right-[var(--space-6)] z-[var(--z-toast,50)]",
     "flex w-[min(420px,calc(100vw-var(--space-12)))] list-none flex-col gap-[var(--space-2)]",
     "pointer-events-none outline-none"
   ].join(" ")
@@ -10157,7 +10764,7 @@ var toast = {
   }
 };
 var Toast = toast;
-var ToastRoot = React45.forwardRef(
+var ToastRoot = React47.forwardRef(
   ({
     className,
     id,
@@ -10174,10 +10781,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 +10793,7 @@ var ToastRoot = React45.forwardRef(
         timerRef.current = null;
       };
     }, [durationMs]);
-    return /* @__PURE__ */ jsxs46(
+    return /* @__PURE__ */ jsxs47(
       "div",
       {
         ref,
@@ -10223,7 +10830,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 +10848,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 +10882,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 +10893,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 Fragment21, 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 +11037,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 +11057,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 +11103,7 @@ var OTPField = React46.forwardRef(
       },
       [disabled, isControlled, length, onComplete, onValueChange]
     );
-    return /* @__PURE__ */ jsxs47(
+    return /* @__PURE__ */ jsxs48(
       "fieldset",
       {
         ref,
@@ -10501,7 +11116,7 @@ var OTPField = React46.forwardRef(
         className: cn(otpFieldVariants({ size, className })),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs47(
+          /* @__PURE__ */ jsxs48(
             "legend",
             {
               id: labelId,
@@ -10625,7 +11240,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(Fragment21, { children: [
                 /* @__PURE__ */ jsx59(
                   AlertCircle4,
                   {
@@ -10659,10 +11274,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 +11342,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 +11355,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 +11379,7 @@ var SearchField = React47.forwardRef(
       }
       onClear?.();
     };
-    return /* @__PURE__ */ jsxs48(
+    return /* @__PURE__ */ jsxs49(
       "div",
       {
         "data-slot": "search-field",
@@ -10783,6 +11401,8 @@ var SearchField = React47.forwardRef(
             {
               ref: inputRef,
               type: "search",
+              id: id ?? field?.controlId,
+              "aria-describedby": joinIds(ariaDescribedBy, field?.describedBy),
               inputMode,
               value,
               defaultValue,
@@ -10818,7 +11438,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 +11466,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 +11479,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 +11508,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 +11527,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 +11538,7 @@ var CheckboxGroup = React48.forwardRef(
           className
         ),
         ...props,
-        children
+        children: /* @__PURE__ */ jsx61(FormFieldControlContext.Provider, { value: null, children })
       }
     ) });
   }
@@ -10920,11 +11546,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 +11639,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 +11653,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 +11669,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 +11681,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 +11701,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 +11725,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 +11756,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 +11862,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 +11968,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 +11999,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 +12035,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 +12060,7 @@ function TreeView({
             onSelect?.(node.id, node);
           },
           children: [
-            /* @__PURE__ */ jsxs51(
+            /* @__PURE__ */ jsxs52(
               "span",
               {
                 "data-slot": "treeitem-row",
@@ -11491,7 +12128,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 Fragment22, 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 +12138,7 @@ function symbolGeometry(size) {
 function SymbolCircles({ size }) {
   const { ring } = OLUN_SYMBOL;
   const g = symbolGeometry(size);
-  return /* @__PURE__ */ jsxs52(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs53(Fragment22, { children: [
     /* @__PURE__ */ jsx66(
       "circle",
       {
@@ -11542,7 +12179,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 +12209,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,