@olundot/ui 0.20.0-next.4 → 0.20.0-next.6

package/dist/index.js

@@ -184,21 +184,46 @@ function useOlunTheme() {
 // src/components/ui/button.tsx
 import * as React from "react";
 import { cva } from "class-variance-authority";
-import { Loader2 } from "lucide-react";
+import { ChevronDown, Loader2 } from "lucide-react";
 import { Slot } from "radix-ui";
 
+// src/components/ui/surface.ts
+var insetMarkerContext = "[--fill-on-bg:var(--fill-on-inset)]";
+var surfaceMarkerContext = "[--fill-on-bg:initial]";
+var surfaceClassNames = {
+  surface: `bg-[var(--bg-surface)] ${surfaceMarkerContext}`,
+  canvas: `bg-[var(--bg-canvas)] ${surfaceMarkerContext}`,
+  raised: `bg-[var(--bg-raised)] ${surfaceMarkerContext}`
+};
+var fieldSurfaceClassNames = {
+  surface: "bg-[var(--bg-surface)]",
+  canvas: "bg-[var(--bg-canvas)]",
+  raised: "bg-[var(--bg-raised)]"
+};
+var selectSurfaceClassNames = {
+  surface: "bg-[var(--bg-surface)] [background-color:var(--bg-surface)]",
+  canvas: "bg-[var(--bg-canvas)] [background-color:var(--bg-canvas)]",
+  raised: "bg-[var(--bg-raised)] [background-color:var(--bg-raised)]"
+};
+
 // src/components/ui/action-variants.ts
 var actionPaint = {
   // = Button `primary`
   filledPrimary: "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-fg)] hover:bg-[var(--primary-hover)] hover:border-[var(--primary-hover)]",
   // = IconButton `subtle`; the transparent 1px border keeps Button's box model
-  filledNeutral: "border-transparent bg-[var(--bg-inset)] text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
+  filledNeutral: `border-transparent bg-[var(--bg-inset)] text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground ${insetMarkerContext}`,
   // = Button `danger`
   filledDanger: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
   // = Button `secondary`
-  outlineNeutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)]",
+  outlineNeutral: `border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)] ${surfaceMarkerContext}`,
+  // Destructive action that is not the main one: outline neutral's surface, error border and
+  // label, error wash on hover.
+  outlineDanger: `border-[var(--error)] bg-[var(--bg-surface)] text-[var(--error)] hover:bg-[var(--error-bg)] ${surfaceMarkerContext}`,
   // = Button and IconButton `ghost`
-  ghostNeutral: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground"
+  ghostNeutral: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
+  // Button `appearance="link"` only: the label color; the box and underline live in button.tsx.
+  linkPrimary: "text-[var(--accent)]",
+  linkDanger: "text-[var(--error)]"
 };
 var actionAxisVariants = {
   appearance: { filled: "", outline: "", ghost: "" },
@@ -209,6 +234,7 @@ var actionCompoundVariants = [
   { appearance: "filled", tone: "neutral", className: actionPaint.filledNeutral },
   { appearance: "filled", tone: "danger", className: actionPaint.filledDanger },
   { appearance: "outline", tone: "neutral", className: actionPaint.outlineNeutral },
+  { appearance: "outline", tone: "danger", className: actionPaint.outlineDanger },
   { appearance: "ghost", tone: "neutral", className: actionPaint.ghostNeutral }
 ];
 function resolveActionStyle(appearance, tone, fallback) {
@@ -228,17 +254,13 @@ var buttonSizes = {
   // xs/sm: invisible ::before stretches the hit area to 44px tall (#69), vertically only so
   // side-by-side buttons never overlap. Its inset is measured from the padding box, inside
   // the 1px border every variant carries: inset = (44 - (height - 2 × 1px)) / 2.
-  // IconButton with text reuses these through `buttonSizeClassName`.
+  // IconButton with text renders through `buttonVariants`, so it takes these too.
   xs: "relative h-[28px] gap-[6px] px-[var(--space-3)] text-[12px] leading-[14px] before:absolute before:inset-x-0 before:-inset-y-[9px] before:content-[''] [&_svg]:size-[14px] [&_svg]:stroke-[1.75]",
   sm: "relative h-[30px] gap-[6px] px-[var(--space-3)] text-body-sm leading-[16px] before:absolute before:inset-x-0 before:-inset-y-[8px] before:content-[''] [&_svg]:size-[16px]",
   md: buttonSizeMd,
   lg: "h-[36px] gap-[var(--space-2)] px-[var(--space-4)] text-[15px] leading-[18px] [&_svg]:size-[18px]",
   xl: "h-[40px] gap-[var(--space-2)] px-5 text-[15px] leading-[18px] [&_svg]:size-[18px]",
-  default: buttonSizeMd,
-  /** @deprecated Use IconButton `size="lg"`. */
-  icon: "size-[36px] p-0 [&_svg]:size-[18px]",
-  /** @deprecated Use IconButton `size="md"`. */
-  "icon-xs": "size-[32px] p-0 [&_svg]:size-[14px] [&_svg]:stroke-[1.75]"
+  default: buttonSizeMd
 };
 var buttonCva = cva(
   [
@@ -252,70 +274,62 @@ var buttonCva = cva(
   ].join(" "),
   {
     variants: {
-      // Legacy single axis, deprecated in 0.19 for `appearance` × `tone` and removed in 0.20.
-      // Frozen at 0.18; button-appearance.test.tsx keeps each value equal to its new pair.
-      variant: {
-        /** @deprecated Use `appearance="filled" tone="primary"`. */
-        primary: "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-fg)] hover:bg-[var(--primary-hover)] hover:border-[var(--primary-hover)]",
-        /** @deprecated Use `appearance="outline" tone="neutral"`. */
-        outline: "border-[var(--border)] bg-transparent text-foreground hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
-        /** @deprecated Use `appearance="ghost" tone="neutral"`. */
-        ghost: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
-        /** @deprecated Use `appearance="filled" tone="danger"`. */
-        danger: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
-        /** @deprecated Use `appearance="filled" tone="danger"`. */
-        emergency: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
-        /** @deprecated Use `appearance="outline" tone="neutral"`. */
-        subtle: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)]",
-        /** @deprecated Use `appearance="filled" tone="primary"`. */
-        default: "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-fg)] hover:bg-[var(--primary-hover)] hover:border-[var(--primary-hover)]",
-        /** @deprecated Use `appearance="filled" tone="danger"`. */
-        destructive: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
-        /** @deprecated Use `appearance="outline" tone="neutral"`. */
-        secondary: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)]",
-        /** @deprecated No replacement on Button; a link component is planned. */
-        link: "border-transparent bg-transparent px-0 text-[var(--accent)] underline-offset-4 hover:underline"
-      },
-      ...actionAxisVariants,
+      // `link` is Button's own appearance (IconButton has no link); its box comes after the
+      // size in the compounds below.
+      appearance: { ...actionAxisVariants.appearance, link: "" },
+      tone: actionAxisVariants.tone,
       size: buttonSizes
     },
-    compoundVariants: [...actionCompoundVariants],
+    compoundVariants: [
+      ...actionCompoundVariants,
+      // Compounds render after the size, so px-0 beats the size's px-*. The height and the xs/sm
+      // 44px band stay. Underline on hover only, no visited look; disabled keeps the transparent
+      // box with Button's disabled text color.
+      {
+        appearance: "link",
+        className: [
+          "border-transparent bg-transparent px-0 underline-offset-4 hover:underline",
+          "disabled:border-transparent disabled:bg-transparent disabled:no-underline",
+          "aria-disabled:border-transparent aria-disabled:bg-transparent aria-disabled:no-underline"
+        ].join(" ")
+      },
+      { appearance: "link", tone: "primary", className: actionPaint.linkPrimary },
+      { appearance: "link", tone: "danger", className: actionPaint.linkDanger }
+    ],
     defaultVariants: {
-      variant: "primary",
       size: "md"
     }
   }
 );
+function resolveButtonStyle(appearance, tone) {
+  if (appearance === "link") return { appearance, tone: tone ?? "primary" };
+  return resolveActionStyle(appearance, tone, "filled");
+}
 function buttonVariants(options) {
-  if (options?.appearance == null && options?.tone == null) return buttonCva(options);
-  return buttonCva({
-    ...options,
-    ...resolveActionStyle(options.appearance, options.tone, "filled"),
-    variant: null
-  });
+  return cn(buttonCva({ ...options, ...resolveButtonStyle(options?.appearance, options?.tone) }));
 }
-var buttonSizeClassName = (size) => buttonSizes[size];
 var footerButtonHitAreaClassName = "relative before:absolute before:inset-x-0 before:-inset-y-[5px] before:content-['']";
+function preventActivation(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
 var Button = React.forwardRef(
   ({
     asChild = false,
     className,
     children,
     disabled,
-    leadingIcon: LeadingIcon,
     loading,
-    trailingIcon: TrailingIcon,
     type = "button",
-    variant,
     appearance,
     tone,
     size,
     style,
+    menuIndicator,
     ...props
   }, ref) => {
     const Comp = asChild ? Slot.Root : "button";
     const isDisabled = disabled || loading;
-    const IconBefore = loading ? Loader2 : LeadingIcon;
     const internalRef = React.useRef(null);
     const frozenWidthRef = React.useRef(null);
     if (loading && internalRef.current && frozenWidthRef.current === null) {
@@ -343,20 +357,14 @@ var Button = React.forwardRef(
         "aria-disabled": isDisabled ? true : void 0,
         disabled: !asChild ? isDisabled : void 0,
         type: !asChild ? type : void 0,
-        className: cn(buttonVariants({ variant, appearance, tone, size, className })),
+        className: cn(buttonVariants({ appearance, tone, size, className })),
         style: frozenStyle ? { ...frozenStyle, ...style } : style,
         ...props,
+        ...asChild && isDisabled ? { tabIndex: -1, onClickCapture: preventActivation, onAuxClickCapture: preventActivation } : null,
         children: [
-          IconBefore ? /* @__PURE__ */ jsx(
-            IconBefore,
-            {
-              "aria-hidden": "true",
-              "data-slot": loading ? "button-spinner" : "button-leading-icon",
-              className: loading ? "animate-spin" : void 0
-            }
-          ) : null,
-          children,
-          !loading && TrailingIcon ? /* @__PURE__ */ jsx(TrailingIcon, { "aria-hidden": "true", "data-slot": "button-trailing-icon" }) : null
+          loading ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", "data-slot": "button-spinner", className: "animate-spin" }) : null,
+          asChild ? /* @__PURE__ */ jsx(Slot.Slottable, { children }) : children,
+          menuIndicator ? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", "data-slot": "button-menu-indicator" }) : null
         ]
       }
     );
@@ -393,7 +401,8 @@ var CopyButton = React2.forwardRef(
     onCopied,
     size = "sm",
     value,
-    variant = "secondary",
+    appearance = "outline",
+    tone,
     ...props
   }, ref) => {
     const [copied, setCopied] = React2.useState(false);
@@ -424,7 +433,7 @@ var CopyButton = React2.forwardRef(
         "aria-label": ariaLabel ?? getCopyButtonAriaLabel(label, value),
         "data-slot": "copy-button",
         size,
-        variant,
+        ...{ appearance, tone },
         onClick: handleClick,
         ...props,
         children: [
@@ -450,25 +459,6 @@ CopyButton.displayName = "CopyButton";
 import * as React3 from "react";
 import { cva as cva2 } from "class-variance-authority";
 import { AlertCircle, CheckCircle2 } from "lucide-react";
-
-// src/components/ui/surface.ts
-var surfaceClassNames = {
-  surface: "bg-[var(--bg-surface)]",
-  canvas: "bg-[var(--bg-canvas)]",
-  raised: "bg-[var(--bg-raised)]"
-};
-var fieldSurfaceClassNames = {
-  surface: "bg-[var(--bg-surface)]",
-  canvas: "bg-[var(--bg-canvas)]",
-  raised: "bg-[var(--bg-raised)]"
-};
-var selectSurfaceClassNames = {
-  surface: "bg-[var(--bg-surface)] [background-color:var(--bg-surface)]",
-  canvas: "bg-[var(--bg-canvas)] [background-color:var(--bg-canvas)]",
-  raised: "bg-[var(--bg-raised)] [background-color:var(--bg-raised)]"
-};
-
-// src/components/ui/input.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var inputVariants = cva2(
   [
@@ -667,6 +657,8 @@ var fileUploadZoneVariants = cva3(
     "hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
     "focus-within:border-[var(--focus-ring)] focus-within:shadow-[0_0_0_1px_var(--focus-ring)]",
     "data-[has-file=true]:border-solid data-[has-file=true]:border-[var(--border-strong)] data-[has-file=true]:bg-[var(--bg-inset)]",
+    // the filled zone is an inset well for neutral markers inside it (insetMarkerContext, surface.ts)
+    "data-[has-file=true]:[--fill-on-bg:var(--fill-on-inset)]",
     "data-[dragging=true]:border-[var(--border-strong)] data-[dragging=true]:bg-[var(--action-active)]",
     "data-[error=true]:border-[var(--error)]",
     "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:border-[var(--border-subtle)] data-[disabled=true]:bg-[var(--action-disabled-bg)]",
@@ -1420,7 +1412,7 @@ import { cva as cva5 } from "class-variance-authority";
 import {
   AlertCircle as AlertCircle3,
   CheckCircle2 as CheckCircle23,
-  ChevronDown,
+  ChevronDown as ChevronDown2,
   ChevronUp
 } from "lucide-react";
 import { Select as SelectPrimitive } from "radix-ui";
@@ -1631,7 +1623,7 @@ var Select = React7.forwardRef(
             {
               "data-slot": "select-scroll-down",
               className: "flex items-center justify-center border-t border-[var(--border)] bg-[var(--bg-surface)] py-[var(--space-1)] text-text-tertiary",
-              children: /* @__PURE__ */ jsx7(ChevronDown, { "aria-hidden": "true", className: "size-[16px]" })
+              children: /* @__PURE__ */ jsx7(ChevronDown2, { "aria-hidden": "true", className: "size-[16px]" })
             }
           )
         ]
@@ -1674,7 +1666,7 @@ var Select = React7.forwardRef(
                     "data-slot": "select-icon",
                     className: "ml-[var(--space-2)] inline-flex size-[14px] shrink-0 items-center justify-center text-text-tertiary group-disabled:text-text-disabled",
                     children: /* @__PURE__ */ jsx7(
-                      ChevronDown,
+                      ChevronDown2,
                       {
                         "aria-hidden": "true",
                         className: "size-[14px]",
@@ -1925,9 +1917,26 @@ Label.displayName = "Label";
 
 // src/components/ui/switch.tsx
 import * as React9 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 { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var switchFieldVariants = cva7("", {
+  variants: {
+    labelPlacement: {
+      end: "flex flex-col gap-[var(--space-1)]",
+      start: "flex items-start gap-[var(--space-3)]"
+    },
+    fullWidth: {
+      true: "w-full",
+      false: "w-fit"
+    }
+  },
+  defaultVariants: {
+    labelPlacement: "end",
+    fullWidth: false
+  }
+});
 var Switch = React9.forwardRef(
   ({
     className,
@@ -1935,6 +1944,8 @@ var Switch = React9.forwardRef(
     description,
     required,
     loading,
+    labelPlacement = "end",
+    fullWidth = false,
     disabled,
     id,
     ...props
@@ -1944,95 +1955,108 @@ var Switch = React9.forwardRef(
     const labelId = id ? `${id}-label` : `${generatedId}-label`;
     const descriptionId = description ? id ? `${id}-description` : `${generatedId}-description` : void 0;
     const isDisabled = disabled || loading;
-    return /* @__PURE__ */ jsxs10(
-      "div",
+    const isStart = labelPlacement === "start";
+    const track = /* @__PURE__ */ jsxs10(
+      SwitchPrimitive.Root,
       {
-        "data-slot": "switch-field",
-        "data-disabled": isDisabled ? "" : void 0,
-        className: "flex flex-col gap-[var(--space-1)] w-fit",
+        ref,
+        id: switchId,
+        "data-slot": "switch",
+        disabled: isDisabled,
+        "aria-required": required || void 0,
+        "aria-busy": loading || void 0,
+        "aria-describedby": descriptionId,
+        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)]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          isStart && "shrink-0",
+          className
+        ),
+        ...props,
         children: [
-          /* @__PURE__ */ jsxs10("div", { className: "inline-flex items-center gap-[var(--space-3)]", children: [
-            /* @__PURE__ */ jsxs10(
-              SwitchPrimitive.Root,
-              {
-                ref,
-                id: switchId,
-                "data-slot": "switch",
-                disabled: isDisabled,
-                "aria-required": required || void 0,
-                "aria-busy": loading || void 0,
-                "aria-describedby": descriptionId,
-                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)]",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
-                  "disabled:cursor-not-allowed disabled:opacity-50",
-                  className
-                ),
-                ...props,
-                children: [
-                  /* @__PURE__ */ jsx10(
-                    SwitchPrimitive.Thumb,
-                    {
-                      "data-slot": "switch-thumb",
-                      className: cn(
-                        "pointer-events-none block h-[20px] w-[20px] rounded-full bg-[var(--bg-surface)] shadow",
-                        "transition-transform translate-x-[2px] data-[state=checked]:translate-x-[22px]"
-                      )
-                    }
-                  ),
-                  loading ? /* @__PURE__ */ jsx10(
-                    "span",
-                    {
-                      "aria-hidden": "true",
-                      "data-slot": "switch-loading",
-                      className: "absolute inset-0 flex items-center justify-center",
-                      children: /* @__PURE__ */ jsx10(Loader22, { className: "size-[14px] animate-spin text-text-secondary" })
-                    }
-                  ) : null
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs10(
-              "label",
-              {
-                htmlFor: switchId,
-                id: labelId,
-                "data-slot": "switch-label",
-                className: cn(
-                  "cursor-pointer select-none text-sm font-medium text-foreground",
-                  isDisabled && "cursor-not-allowed text-text-disabled"
-                ),
-                children: [
-                  label,
-                  required ? /* @__PURE__ */ jsx10(
-                    "span",
-                    {
-                      "aria-hidden": "true",
-                      "data-slot": "switch-required-marker",
-                      className: "ml-[var(--space-1)] font-bold text-[var(--semantic-error,var(--error))]",
-                      children: "*"
-                    }
-                  ) : null
-                ]
-              }
-            )
-          ] }),
-          description ? /* @__PURE__ */ jsx10(
-            "p",
+          /* @__PURE__ */ jsx10(
+            SwitchPrimitive.Thumb,
             {
-              id: descriptionId,
-              "data-slot": "switch-description",
+              "data-slot": "switch-thumb",
               className: cn(
-                "ml-[var(--space-3)] text-xs font-normal leading-normal text-text-tertiary",
-                isDisabled && "text-text-disabled"
-              ),
-              children: description
+                "pointer-events-none block h-[20px] w-[20px] rounded-full bg-[var(--bg-surface)] shadow",
+                "transition-transform translate-x-[2px] data-[state=checked]:translate-x-[22px]"
+              )
+            }
+          ),
+          loading ? /* @__PURE__ */ jsx10(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "switch-loading",
+              className: "absolute inset-0 flex items-center justify-center",
+              children: /* @__PURE__ */ jsx10(Loader22, { className: "size-[14px] animate-spin text-text-secondary" })
+            }
+          ) : null
+        ]
+      }
+    );
+    const labelNode = /* @__PURE__ */ jsxs10(
+      "label",
+      {
+        htmlFor: switchId,
+        id: labelId,
+        "data-slot": "switch-label",
+        className: cn(
+          "cursor-pointer select-none break-keep text-sm font-medium text-foreground [overflow-wrap:anywhere]",
+          isStart && "leading-6",
+          isDisabled && "cursor-not-allowed text-text-disabled"
+        ),
+        children: [
+          label,
+          required ? /* @__PURE__ */ jsx10(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "switch-required-marker",
+              className: "ml-[var(--space-1)] font-bold text-[var(--semantic-error,var(--error))]",
+              children: "*"
             }
           ) : null
         ]
       }
     );
+    const descriptionNode = description ? /* @__PURE__ */ jsx10(
+      "p",
+      {
+        id: descriptionId,
+        "data-slot": "switch-description",
+        className: cn(
+          "break-keep text-xs font-normal leading-normal text-text-tertiary [overflow-wrap:anywhere]",
+          !isStart && "ml-[var(--space-3)]",
+          isDisabled && "text-text-disabled"
+        ),
+        children: description
+      }
+    ) : null;
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        "data-slot": "switch-field",
+        "data-disabled": isDisabled ? "" : void 0,
+        className: switchFieldVariants({ labelPlacement, fullWidth }),
+        children: isStart ? /* @__PURE__ */ jsxs10(Fragment, { 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("div", { className: "inline-flex items-center gap-[var(--space-3)]", children: [
+            track,
+            labelNode
+          ] }),
+          descriptionNode
+        ] })
+      }
+    );
   }
 );
 Switch.displayName = "Switch";
@@ -2136,7 +2160,7 @@ function TooltipContent({
 }
 
 // src/components/ui/permission-guard.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var defaultDisabledReason = "\uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4";
 var PermissionContext = React11.createContext(
   void 0
@@ -2183,7 +2207,7 @@ function PermissionGuard({
   const state = React11.useContext(PermissionContext);
   const allowed = evaluatePermission(permission, permissions ?? state, scope);
   if (allowed) {
-    return /* @__PURE__ */ jsx12(Fragment2, { children });
+    return /* @__PURE__ */ jsx12(Fragment3, { children });
   }
   if (fallback === "hide" || fallback == null) {
     return null;
@@ -2191,7 +2215,7 @@ function PermissionGuard({
   if (fallback === "disabled") {
     return renderDisabledFallback(children, disabledReason);
   }
-  return /* @__PURE__ */ jsx12(Fragment2, { children: fallback });
+  return /* @__PURE__ */ jsx12(Fragment3, { children: fallback });
 }
 function getPermissionCandidates(permission, scope) {
   const candidates = /* @__PURE__ */ new Set([permission]);
@@ -2244,9 +2268,9 @@ function isPermissionState(value) {
 
 // src/components/ui/card.tsx
 import * as React12 from "react";
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva8 } from "class-variance-authority";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var cardBaseVariants = cva7(
+var cardBaseVariants = cva8(
   [
     "rounded-[var(--radius-lg)] border border-[var(--border)]",
     "px-[var(--space-6)] py-[var(--space-4)] text-foreground"
@@ -2631,7 +2655,7 @@ DataLayout.displayName = "DataLayout";
 // src/components/ui/wizard-layout.tsx
 import * as React16 from "react";
 import { Check as Check2 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, 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"
@@ -2922,7 +2946,7 @@ var WizardLayout = React16.forwardRef(
                                               ) : null
                                             ]
                                           }
-                                        ) : /* @__PURE__ */ jsxs16(Fragment5, { children: [
+                                        ) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
                                           /* @__PURE__ */ jsx17(
                                             "span",
                                             {
@@ -2989,10 +3013,10 @@ import * as React18 from "react";
 // src/components/ui/tabs.tsx
 import * as React17 from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { cva as cva8 } from "class-variance-authority";
+import { cva as cva9 } from "class-variance-authority";
 import { Lock } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
-var tabsRootVariants = cva8("w-full", {
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+var tabsRootVariants = cva9("w-full", {
   variants: {
     orientation: {
       horizontal: "",
@@ -3003,13 +3027,14 @@ var tabsRootVariants = cva8("w-full", {
     orientation: "horizontal"
   }
 });
-var tabsListVariants = cva8(
-  "flex",
+var tabsListVariants = cva9(
+  // A list that overflows scrolls sideways without showing a scrollbar.
+  "flex [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
   {
     variants: {
       variant: {
         line: "",
-        contained: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-inset)] p-[var(--space-1)]"
+        contained: `rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-inset)] p-[var(--space-1)] ${insetMarkerContext}`
       },
       orientation: {
         horizontal: "",
@@ -3044,7 +3069,7 @@ var tabsListVariants = cva8(
     }
   }
 );
-var tabsTriggerVariants = cva8(
+var tabsTriggerVariants = cva9(
   [
     "relative inline-flex shrink-0 cursor-pointer items-center gap-[var(--space-2)]",
     "px-0 py-[var(--space-2)] text-body-sm font-medium",
@@ -3098,7 +3123,7 @@ var tabsTriggerVariants = cva8(
     }
   }
 );
-var tabsIndicatorVariants = cva8(
+var tabsIndicatorVariants = cva9(
   [
     "pointer-events-none absolute invisible bg-[var(--text-primary)]",
     // transition-property stays none (duration alone would animate every property, visibility included)
@@ -3127,18 +3152,11 @@ var tabsLabelReserveClassName = [
   "before:invisible before:h-0 before:overflow-hidden before:font-medium before:content-[attr(data-label)]",
   "after:invisible after:h-0 after:overflow-hidden after:font-bold after:content-[attr(data-label)]"
 ].join(" ");
-var tabsBadgeVariants = cva8(
+var tabsBadgeVariants = cva9(
   [
-    "inline-flex h-[18px] min-w-[18px] items-center justify-center",
-    "rounded-[var(--radius-full)] border border-[var(--border-subtle)]",
-    "bg-[var(--bg-inset)] px-[var(--space-1)]",
-    "font-[family-name:var(--font-display)] text-xs font-semibold leading-none tabular-nums",
-    // R14 — Badge는 metadata, 추가 marker(filled wash)가 아니다. marker 종류는
-    // trigger underline 하나(active-state doctrine). single-hue-family: active 시 인접
-    // visible token(underline + badge text + badge border)을 같은 hue family로 — text는
-    // inherit, border는 active만 중립 --border-strong로 lift(accent rationing — selection은 brand 미사용). filled wash는 여전히 금지.
-    "text-inherit",
-    "group-data-[state=active]:border-[var(--border-strong)]"
+    "inline-flex h-[var(--space-4)] min-w-[var(--space-4)] items-center justify-center",
+    "rounded-[var(--radius-full)] px-[var(--space-1)] bg-[var(--action-selected)]",
+    "font-[family-name:var(--font-display)] text-xs font-medium tabular-nums text-inherit"
   ].join(" ")
 );
 function useTabsIndicator(enabled, activeKey, tabsKey, listRef, indicatorRef) {
@@ -3198,7 +3216,15 @@ function useTabsIndicator(enabled, activeKey, tabsKey, listRef, indicatorRef) {
   }, [enabled, tabsKey, place, listRef]);
 }
 function formatTabBadge(value) {
-  return value > 99 ? "99+" : String(value);
+  return value > 999 ? "999+" : String(value);
+}
+function isShownTabBadge(value) {
+  if (value === void 0) return false;
+  if (Number.isFinite(value) && value >= 0) return true;
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.warn(`Tabs: badge must be a number 0 or greater (got ${value}). The badge is not shown.`);
+  }
+  return false;
 }
 function getTabId(baseId, key) {
   return baseId ? `${baseId}-tab-${key}` : `tab-${key}`;
@@ -3256,7 +3282,10 @@ 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 }),
-                      tab.badge !== void 0 && tab.badge > 0 ? /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", "data-slot": "tabs-badge", className: tabsBadgeVariants(), children: formatTabBadge(tab.badge) }) : null,
+                      isShownTabBadge(tab.badge) ? /* @__PURE__ */ jsxs17(Fragment7, { 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,
                       tab.disabled ? /* @__PURE__ */ jsx18(
                         Lock,
                         {
@@ -3312,7 +3341,7 @@ var TabsContent = React17.forwardRef(({ className, tabKey, baseId, ...props }, r
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/ui/detail-layout.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function DetailLayoutBody({
   children,
   aside,
@@ -3365,7 +3394,7 @@ function appendFooterToActiveTabsContent(children, activeTab, footer) {
       return React18.cloneElement(
         child,
         void 0,
-        /* @__PURE__ */ jsxs18(Fragment6, { children: [
+        /* @__PURE__ */ jsxs18(Fragment8, { children: [
           child.props.children,
           /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer })
         ] })
@@ -3447,7 +3476,7 @@ var DetailLayout = React18.forwardRef(
                   baseId,
                   forceMount: true,
                   hidden: tab.key !== activeTab,
-                  children: tab.key === activeTab ? /* @__PURE__ */ jsxs18(Fragment6, { children: [
+                  children: tab.key === activeTab ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
                     body,
                     footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
                   ] }) : null
@@ -3455,7 +3484,7 @@ var DetailLayout = React18.forwardRef(
                 tab.key
               ))
             }
-          ) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+          ) : /* @__PURE__ */ jsxs18(Fragment8, { children: [
             body,
             footer ? /* @__PURE__ */ jsx19("div", { "data-slot": "detail-layout-footer", className: "min-w-0", children: footer }) : null
           ] })
@@ -3468,7 +3497,7 @@ DetailLayout.displayName = "DetailLayout";
 
 // src/components/ui/form-layout.tsx
 import * as React19 from "react";
-import { ChevronDown as ChevronDown2 } from "lucide-react";
+import { ChevronDown as ChevronDown3 } from "lucide-react";
 import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 function FormLayoutSectionBlock({
   section,
@@ -3537,7 +3566,7 @@ function FormLayoutSectionBlock({
             children: /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 items-start gap-[var(--space-2)]", children: [
               /* @__PURE__ */ jsx20("div", { className: "min-w-0 flex-1", children: sectionHeader }),
               /* @__PURE__ */ jsx20(
-                ChevronDown2,
+                ChevronDown3,
                 {
                   "aria-hidden": "true",
                   className: cn(
@@ -3884,9 +3913,11 @@ import { Dialog as DialogPrimitive } from "radix-ui";
 
 // src/components/ui/icon-button.tsx
 import * as React23 from "react";
-import { cva as cva9 } from "class-variance-authority";
+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";
-var iconButtonCva = cva9(
+var pressedNeutralClassName = "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground";
+var iconButtonCva = cva10(
   [
     "olun-icon-button relative inline-flex cursor-pointer shrink-0 items-center justify-center before:absolute before:content-['']",
     "rounded-[var(--radius-md)] border font-medium",
@@ -3897,28 +3928,17 @@ var iconButtonCva = cva9(
   ].join(" "),
   {
     variants: {
-      // Legacy single axis, deprecated in 0.19 for `appearance` × `tone` and removed in 0.20.
-      // Frozen at 0.18; button-appearance.test.tsx keeps ghost and subtle equal to their new
-      // pair. `outline` and `danger` differ from the pair they migrate to (outline + neutral =
-      // Button secondary, filled + danger = solid red).
-      variant: {
-        /** @deprecated Use `appearance="ghost" tone="neutral"` (the default). */
-        ghost: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
-        /** @deprecated Use `appearance="outline" tone="neutral"`. */
-        outline: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)] hover:text-foreground",
-        /** @deprecated Use `appearance="filled" tone="neutral"`. */
-        subtle: "border-transparent bg-[var(--bg-inset)] text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
-        /** @deprecated Use `appearance="filled" tone="danger"` (solid red, like Button). */
-        danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]"
-      },
       ...actionAxisVariants,
-      // Hit area = 44px on every size. The ::before is absolutely positioned, so its
-      // inset is measured from the padding box — inside the 1px border every variant
-      // carries (transparent or not). Inset = (44 - (size - 2 × 1px border)) / 2.
+      // Button's five heights, so one size is one height with or without text. Icon only is
+      // square with a 44px hit area: the ::before is absolutely positioned, so its inset is
+      // measured from the padding box — inside the 1px border every pair carries (transparent
+      // or not). Inset = (44 - (size - 2 × 1px border)) / 2. With text the box is Button's.
       size: {
-        sm: "size-[28px] before:-inset-[9px]",
+        xs: "size-[28px] before:-inset-[9px]",
+        sm: "size-[30px] before:-inset-[8px]",
         md: "size-[32px] before:-inset-[7px]",
-        lg: "size-[40px] before:-inset-[3px]"
+        lg: "size-[36px] before:-inset-[5px]",
+        xl: "size-[40px] before:-inset-[3px]"
       },
       pressed: {
         true: "",
@@ -3927,39 +3947,17 @@ var iconButtonCva = cva9(
     },
     compoundVariants: [
       ...actionCompoundVariants,
-      {
-        pressed: true,
-        variant: ["ghost", "outline", "subtle"],
-        className: "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground"
-      },
-      {
-        pressed: true,
-        variant: "danger",
-        className: "border-[var(--error)] bg-[var(--error-bg)] text-[var(--error)]"
-      },
-      {
-        pressed: true,
-        tone: "neutral",
-        className: "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground"
-      }
+      { pressed: true, tone: "neutral", className: pressedNeutralClassName }
     ],
     // ghost is the intended default, not a fallback: ghost is reserved for icon-only
     // actions repeated in rows or chrome (toolbars, headers, table rows), and
     // IconButton is its canonical entry point (#58). Text actions use Button.
     defaultVariants: {
-      variant: "ghost",
       size: "md",
       pressed: false
     }
   }
 );
-var axisSizeClassName = {
-  xs: "size-[28px] before:-inset-[9px]",
-  sm: "size-[30px] before:-inset-[8px]",
-  md: "size-[32px] before:-inset-[7px]",
-  lg: "size-[36px] before:-inset-[5px]",
-  xl: "size-[40px] before:-inset-[3px]"
-};
 var axisIcon = {
   xs: { size: 14, strokeWidth: 1.75 },
   sm: { size: 16, strokeWidth: 2 },
@@ -3968,19 +3966,12 @@ var axisIcon = {
   xl: { size: 18, strokeWidth: 2 }
 };
 function iconButtonVariants(options) {
-  if (options?.appearance == null && options?.tone == null) {
-    return iconButtonCva(options);
-  }
-  const { size, ...rest } = options;
-  const paint = iconButtonCva({
-    ...rest,
-    ...resolveActionStyle(options.appearance, options.tone, "ghost"),
-    variant: null,
-    size: null
+  return iconButtonCva({
+    ...options,
+    ...resolveActionStyle(options?.appearance, options?.tone, "ghost")
   });
-  return size === null ? paint : `${paint} ${axisSizeClassName[size ?? "md"]}`;
 }
-var iconButtonBadgeVariants = cva9(
+var iconButtonBadgeVariants = cva10(
   [
     "pointer-events-none absolute right-0 top-0 inline-flex",
     "olun-icon-button__badge",
@@ -4001,25 +3992,9 @@ var iconButtonBadgeVariants = cva9(
     }
   }
 );
-var iconSize2 = {
-  sm: 14,
-  md: 16,
-  lg: 18
-};
-var textButtonSize = {
-  sm: "xs",
-  md: "md",
-  lg: "xl"
-};
-var iconStrokeWidth = {
-  sm: 2.25,
-  md: 2.25,
-  lg: 1.75
-};
 var IconButton = React23.forwardRef(
   ({
     className,
-    variant = "ghost",
     appearance,
     tone,
     size = "md",
@@ -4032,28 +4007,37 @@ var IconButton = React23.forwardRef(
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     iconPosition = "start",
+    loading,
+    menuIndicator,
+    disabled,
     label,
     children,
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
-    const usesAxes = appearance != null || tone != null;
     const isToggle = pressed !== void 0;
     const isPressed = pressed === true;
     const hoverTitle = title ?? (typeof ariaLabel === "string" ? ariaLabel : void 0);
     const text = label ?? children;
     const hasText = text !== void 0 && text !== null && text !== false;
-    const style = usesAxes ? resolveActionStyle(appearance, tone, "ghost") : void 0;
-    const axisSize = usesAxes ? resolvedSize : void 0;
-    const legacySize = resolvedSize;
-    const textBoxSize = axisSize ?? textButtonSize[legacySize];
-    const icon = /* @__PURE__ */ jsx22(
+    const isDisabled = disabled || loading;
+    const style = resolveActionStyle(appearance, tone, "ghost");
+    const icon = loading ? /* @__PURE__ */ jsx22(
+      Loader23,
+      {
+        "aria-hidden": "true",
+        "data-slot": "icon-button-spinner",
+        className: "animate-spin",
+        size: axisIcon[resolvedSize].size,
+        strokeWidth: axisIcon[resolvedSize].strokeWidth
+      }
+    ) : /* @__PURE__ */ jsx22(
       Icon,
       {
         "aria-hidden": "true",
         "data-slot": "icon-button-icon",
-        size: axisSize ? axisIcon[axisSize].size : iconSize2[legacySize],
-        strokeWidth: axisSize ? axisIcon[axisSize].strokeWidth : hasText ? void 0 : iconStrokeWidth[legacySize]
+        size: axisIcon[resolvedSize].size,
+        strokeWidth: axisIcon[resolvedSize].strokeWidth
       }
     );
     return /* @__PURE__ */ jsxs20(
@@ -4062,25 +4046,27 @@ var IconButton = React23.forwardRef(
         ref,
         ...props,
         "data-slot": "icon-button",
-        "data-variant": usesAxes ? void 0 : variant,
-        "data-appearance": style?.appearance,
-        "data-tone": style?.tone,
+        "data-appearance": style.appearance,
+        "data-tone": style.tone,
         "data-size": resolvedSize,
         "data-icon-position": hasText ? iconPosition : void 0,
         "data-pressed": isToggle ? String(isPressed) : void 0,
+        "data-loading": loading ? "true" : void 0,
+        "aria-busy": loading ? true : void 0,
+        "aria-disabled": isDisabled ? true : void 0,
+        disabled: isDisabled,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         "aria-pressed": isToggle ? isPressed : void 0,
         title: hoverTitle,
         className: cn(
-          iconButtonVariants({
-            variant,
-            appearance,
-            tone,
-            size: hasText ? null : size,
-            pressed: isPressed
-          }),
-          hasText && ["whitespace-nowrap", buttonSizeClassName(textBoxSize)],
+          hasText ? [
+            "olun-icon-button",
+            buttonVariants({ ...style, size: resolvedSize }),
+            isPressed && style.tone === "neutral" && pressedNeutralClassName,
+            // The badge sits on the corner; Button xs/sm are already relative.
+            badge !== void 0 && "relative"
+          ] : iconButtonVariants({ appearance, tone, size: resolvedSize, pressed: isPressed }),
           className
         ),
         type: type ?? "button",
@@ -4088,6 +4074,15 @@ var IconButton = React23.forwardRef(
           hasText && iconPosition === "end" ? null : icon,
           hasText ? text : null,
           hasText && iconPosition === "end" ? icon : null,
+          hasText && menuIndicator ? /* @__PURE__ */ jsx22(
+            ChevronDown4,
+            {
+              "aria-hidden": "true",
+              "data-slot": "icon-button-menu-indicator",
+              size: axisIcon[resolvedSize].size,
+              strokeWidth: axisIcon[resolvedSize].strokeWidth
+            }
+          ) : null,
           badge !== void 0 ? /* @__PURE__ */ jsx22(
             "span",
             {
@@ -4690,7 +4685,7 @@ function SheetDescription({
 }
 
 // src/components/ui/dialog.tsx
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 function dialogMobileSheetStyle(style) {
   return getDefaultSheetMotionStyle(style);
 }
@@ -4784,7 +4779,7 @@ function StructuredDialog({
                 footerRow
               ]
             }
-          ) : /* @__PURE__ */ jsxs23(Fragment7, { children: [
+          ) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
             body,
             footerRow
           ] })
@@ -4985,7 +4980,7 @@ function FormModal({
 
 // src/components/ui/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive2 } from "radix-ui";
-import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function AlertDialogFrame({
   open,
   onOpenChange,
@@ -5049,7 +5044,7 @@ function AlertDialog({
     disabled: confirmDisabled,
     onError
   });
-  const footer = confirmLabel != null ? /* @__PURE__ */ jsxs25(Fragment8, { children: [
+  const footer = confirmLabel != null ? /* @__PURE__ */ jsxs25(Fragment10, { 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,
@@ -5124,11 +5119,11 @@ import { SlidersHorizontal } from "lucide-react";
 
 // src/components/ui/chip.tsx
 import * as React27 from "react";
-import { cva as cva10 } from "class-variance-authority";
+import { cva as cva11 } from "class-variance-authority";
 import { X as X2 } from "lucide-react";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
-var chipVariants = cva10(
+var chipVariants = cva11(
   [
     "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
     "rounded-[var(--radius-full)] border leading-none",
@@ -5149,7 +5144,7 @@ var chipVariants = cva10(
         "status-filter": "cursor-default"
       },
       tone: {
-        neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:bg-[var(--action-hover)]",
+        neutral: `border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:bg-[var(--action-hover)] ${surfaceMarkerContext}`,
         accent: "border-[var(--border-accent)] bg-transparent text-[var(--accent)] hover:bg-[var(--accent-bg-strong)]",
         success: "border-transparent bg-[var(--success-bg)] text-[var(--success)] hover:bg-[var(--action-hover)]",
         warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)] hover:bg-[var(--action-hover)]",
@@ -5181,7 +5176,7 @@ var chipVariants = cva10(
       {
         pressed: true,
         tone: "muted",
-        className: "border-[var(--border-strong)] bg-[var(--bg-inset)] text-text-secondary"
+        className: `border-[var(--border-strong)] bg-[var(--bg-inset)] text-text-secondary ${insetMarkerContext}`
       }
     ],
     defaultVariants: {
@@ -5192,7 +5187,7 @@ var chipVariants = cva10(
     }
   }
 );
-var chipCountVariants = cva10(
+var chipCountVariants = cva11(
   [
     "inline-flex min-w-[var(--space-4)] items-center justify-center",
     "rounded-[var(--radius-full)] px-[var(--space-1)]",
@@ -5201,12 +5196,13 @@ var chipCountVariants = cva10(
   {
     variants: {
       tone: {
-        neutral: "bg-[var(--bg-inset)] text-text-tertiary",
+        // neutral·muted take --fill-on-bg when an inset background sets it (see surface.ts).
+        neutral: "bg-[var(--fill-on-bg,var(--bg-inset))] text-text-tertiary",
         accent: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
         success: "bg-[var(--success)] text-[var(--success-contrast)]",
         warning: "bg-[var(--warning)] text-[var(--warning-contrast)]",
         danger: "bg-[var(--error)] text-[var(--error-contrast)]",
-        muted: "bg-[var(--bg-inset)] text-text-tertiary"
+        muted: "bg-[var(--fill-on-bg,var(--bg-inset))] text-text-tertiary"
       },
       size: {
         sm: "h-[var(--space-4)] text-xs",
@@ -5377,7 +5373,7 @@ var PopoverArrow = React28.forwardRef(({ className, ...props }, ref) => /* @__PU
 PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
 
 // src/components/ui/filter-toolbar.tsx
-import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 var collapsibleClassNames = {
   sm: {
     inline: "hidden @[640px]:flex",
@@ -5482,7 +5478,8 @@ var FilterToolbar = React29.forwardRef(
               "aria-label": collapseTriggerLabel,
               icon: SlidersHorizontal,
               size: "md",
-              variant: "outline",
+              appearance: "outline",
+              tone: "neutral",
               onClick: () => handleOverlayOpenChange(true)
             }
           ),
@@ -5588,7 +5585,7 @@ var FilterToolbar = React29.forwardRef(
                   activeFilterCount,
                   "\uAC1C \uC801\uC6A9"
                 ] }),
-                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment9, { children: [
+                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment11, { children: [
                   /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: " \xB7 " }),
                   /* @__PURE__ */ jsx32(
                     "button",
@@ -5637,17 +5634,17 @@ var FilterToolbar = React29.forwardRef(
 FilterToolbar.displayName = "FilterToolbar";
 
 // src/components/ui/data-table.tsx
-import * as React32 from "react";
-import { ChevronDown as ChevronDown3, ChevronUp as ChevronUp2, ChevronsUpDown } from "lucide-react";
-import { cva as cva12 } from "class-variance-authority";
+import * as React33 from "react";
+import { ChevronDown as ChevronDown5, ChevronRight as ChevronRight3, ChevronUp as ChevronUp2, ChevronsUpDown } from "lucide-react";
+import { cva as cva13 } from "class-variance-authority";
 
 // src/components/ui/checkbox.tsx
 import * as React30 from "react";
-import { cva as cva11 } from "class-variance-authority";
+import { cva as cva12 } from "class-variance-authority";
 import { Check as Check3, Minus } from "lucide-react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
-var checkboxFieldVariants = cva11(
+var checkboxFieldVariants = cva12(
   "flex flex-col gap-[var(--space-1)]",
   {
     variants: {
@@ -5662,14 +5659,14 @@ var checkboxFieldVariants = cva11(
   }
 );
 var checkboxVariants = checkboxFieldVariants;
-var checkboxRootVariants = cva11(
+var checkboxRootVariants = cva12(
   [
     "group shrink-0 cursor-pointer rounded-[var(--radius-xs)]",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
     "disabled:cursor-not-allowed"
   ].join(" ")
 );
-var checkboxBoxVariants = cva11(
+var checkboxBoxVariants = cva12(
   [
     "flex shrink-0 items-center justify-center rounded-[var(--radius-xs)] border",
     "border-[var(--border-strong)] bg-[var(--bg-surface)] text-transparent",
@@ -5693,7 +5690,7 @@ var checkboxBoxVariants = cva11(
     }
   }
 );
-var checkboxGroupItemVariants = cva11(
+var checkboxGroupItemVariants = cva12(
   [
     "group w-full cursor-pointer text-left transition-colors motion-reduce:transition-none",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
@@ -5735,7 +5732,7 @@ var checkboxGroupItemVariants = cva11(
     }
   }
 );
-var checkboxGroupBoxVariants = cva11(
+var checkboxGroupBoxVariants = cva12(
   "mt-[2px]",
   {
     variants: {
@@ -6225,84 +6222,313 @@ function DropdownMenuSubContent({
 }
 
 // src/components/ui/list-card.tsx
+import * as React32 from "react";
+import { ChevronRight as ChevronRight2, MoreVertical } from "lucide-react";
+
+// src/components/ui/action-menu.tsx
 import * as React31 from "react";
-import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
-function lineTokens(value) {
-  return React31.Children.toArray(value).filter((token) => token !== "");
-}
-function lineTitle(tokens) {
-  if (!tokens.every((token) => typeof token === "string" || typeof token === "number")) {
-    return void 0;
-  }
-  return tokens.join(" \xB7 ");
-}
-function MetaLine({ tokens, slot }) {
-  return /* @__PURE__ */ jsx35(
-    "span",
-    {
-      "data-slot": slot,
-      className: "block truncate whitespace-nowrap text-[12px] leading-[16px] text-text-secondary",
-      title: lineTitle(tokens),
-      children: tokens.map((token, index) => /* @__PURE__ */ jsxs31(React31.Fragment, { children: [
-        index > 0 ? " \xB7 " : null,
-        token
-      ] }, index))
-    }
-  );
-}
-function ListCard({
+import { Dialog as DialogPrimitive4, Slot as Slot3 } from "radix-ui";
+import { Fragment as Fragment13, jsx as jsx35, jsxs as jsxs31 } 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"
+);
+var sheetRowDescriptionClassName = "block text-[12px] font-normal text-text-secondary group-disabled:text-text-disabled";
+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({
+  open,
+  onOpenChange,
   title,
-  meta,
-  status,
-  caption,
-  leading,
-  value,
-  trailing = "chevron",
-  href,
-  linkComponent,
-  linkProps,
-  onClick,
-  slot = "list-card",
-  className
+  description,
+  closeLabel,
+  groups,
+  onOpenAutoFocus,
+  onCloseAutoFocus
 }) {
-  const meta1 = lineTokens(meta?.[0]);
-  const meta2 = lineTokens(meta?.[1]);
-  const hasValue = value != null;
-  const chevron = /* @__PURE__ */ jsx35(
-    ChevronRight2,
-    {
-      "data-slot": `${slot}-suffix`,
-      "aria-hidden": true,
-      className: "size-[var(--space-4)] shrink-0 text-text-tertiary"
+  const pendingRef = React31.useRef(null);
+  const surfaceRef = React31.useRef(null);
+  const labelId = React31.useId();
+  const handleOpenChange = (nextOpen) => {
+    pendingRef.current = null;
+    onOpenChange(nextOpen);
+  };
+  const swipe = useSwipeDismiss({
+    enabled: OVERLAY_POLICY.menu.swipe,
+    onDismiss: () => handleOpenChange(false),
+    surfaceRef,
+    always: true
+  });
+  const handleSelect = (item) => {
+    onOpenChange(false);
+    pendingRef.current = item;
+  };
+  const handleOpenAutoFocus = (event) => {
+    onOpenAutoFocus?.(event);
+    const firstRow = surfaceRef.current?.querySelector('[data-slot="action-menu-item"]:enabled');
+    if (!firstRow) return;
+    event.preventDefault();
+    firstRow.focus();
+  };
+  const handleCloseAutoFocus = (event) => {
+    onCloseAutoFocus(event);
+    const item = pendingRef.current;
+    pendingRef.current = null;
+    item?.onSelect();
+  };
+  return /* @__PURE__ */ jsx35(DialogPrimitive4.Root, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs31(DialogPrimitive4.Portal, { children: [
+    /* @__PURE__ */ jsx35(OverlayScrimLayer, { kind: "menu" }),
+    /* @__PURE__ */ jsxs31(
+      DialogPrimitive4.Content,
+      {
+        ref: surfaceRef,
+        "data-slot": "action-menu-sheet",
+        className: overlayBoxClassName("menu"),
+        onOpenAutoFocus: handleOpenAutoFocus,
+        onCloseAutoFocus: handleCloseAutoFocus,
+        ...description ? {} : { "aria-describedby": void 0 },
+        children: [
+          /* @__PURE__ */ jsx35(OverlayGrabber, { always: true, ...swipe.handleProps }),
+          /* @__PURE__ */ jsx35(
+            OverlayHeader,
+            {
+              kind: "menu",
+              title,
+              description,
+              closeLabel,
+              dragHandleProps: swipe.handleProps
+            }
+          ),
+          /* @__PURE__ */ jsx35(OverlayBody, { kind: "menu", children: groups.map((group, index) => /* @__PURE__ */ jsxs31(React31.Fragment, { children: [
+            index > 0 ? /* @__PURE__ */ jsx35("div", { role: "separator", className: sheetGroupSeparatorClassName }) : null,
+            /* @__PURE__ */ jsxs31("div", { role: "group", "aria-labelledby": group.label ? `${labelId}-${index}` : void 0, children: [
+              group.label ? /* @__PURE__ */ jsx35("div", { id: `${labelId}-${index}`, className: sheetGroupLabelClassName, children: group.label }) : null,
+              group.items.map((item) => {
+                const Icon = item.icon;
+                return /* @__PURE__ */ jsxs31(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "action-menu-item",
+                    "data-destructive": item.destructive ? "" : void 0,
+                    className: sheetRowClassName,
+                    disabled: item.disabled,
+                    onClick: () => handleSelect(item),
+                    children: [
+                      Icon ? /* @__PURE__ */ jsx35(Icon, { "aria-hidden": true, size: 17, strokeWidth: 1.75, className: "shrink-0" }) : null,
+                      /* @__PURE__ */ jsxs31("span", { className: "min-w-0 flex-1 break-keep", children: [
+                        item.label,
+                        item.description ? /* @__PURE__ */ jsx35("span", { className: sheetRowDescriptionClassName, children: item.description }) : null
+                      ] })
+                    ]
+                  },
+                  item.id
+                );
+              })
+            ] })
+          ] }, group.id)) })
+        ]
+      }
+    )
+  ] }) });
+}
+var readPresentation = () => window.matchMedia?.(OVERLAY_DESKTOP_QUERY).matches ?? true ? "dropdown" : "sheet";
+var subscribeNothing = () => () => void 0;
+var useHydrated = () => React31.useSyncExternalStore(
+  subscribeNothing,
+  () => true,
+  () => false
+);
+function ActionMenu({
+  trigger,
+  title,
+  description,
+  open: openProp,
+  onOpenChange,
+  closeLabel,
+  items,
+  groups
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React31.useState(false);
+  const hydrated = useHydrated();
+  const open = (openProp ?? uncontrolledOpen) && hydrated;
+  const [shown, setShown] = React31.useState({
+    open: false,
+    presentation: "dropdown"
+  });
+  let presentation = shown.presentation;
+  if (shown.open !== open) {
+    if (open) presentation = readPresentation();
+    setShown({ open, presentation });
+  }
+  const triggerRef = React31.useRef(null);
+  const pendingRef = React31.useRef(null);
+  const setOpen = (nextOpen) => {
+    if (nextOpen) pendingRef.current = null;
+    if (openProp === void 0) setUncontrolledOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  };
+  const menuGroups = groups ?? [{ id: "items", items: items ?? [] }];
+  const handleDropdownCloseAutoFocus = (event) => {
+    const item = pendingRef.current;
+    pendingRef.current = null;
+    if (!item) return;
+    event.preventDefault();
+    triggerRef.current?.focus();
+    item.onSelect();
+  };
+  const handleSheetCloseAutoFocus = (event) => {
+    event.preventDefault();
+    triggerRef.current?.focus();
+  };
+  const triggerLabel = trigger.props["aria-label"];
+  return /* @__PURE__ */ jsxs31(Fragment13, { children: [
+    /* @__PURE__ */ jsxs31(DropdownMenu, { open: open && presentation === "dropdown", onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx35(DropdownMenuTrigger, { asChild: true, "aria-expanded": open, children: /* @__PURE__ */ jsx35(Slot3.Root, { ref: triggerRef, children: trigger }) }),
+      /* @__PURE__ */ jsx35(DropdownMenuContent, { align: "end", onCloseAutoFocus: handleDropdownCloseAutoFocus, children: menuGroups.map((group, index) => /* @__PURE__ */ jsxs31(React31.Fragment, { children: [
+        index > 0 ? /* @__PURE__ */ jsx35(DropdownMenuSeparator, {}) : null,
+        /* @__PURE__ */ jsxs31(DropdownMenuGroup, { children: [
+          group.label ? /* @__PURE__ */ jsx35(DropdownMenuLabel, { children: group.label }) : null,
+          group.items.map((item) => {
+            const Icon = item.icon;
+            return /* @__PURE__ */ jsxs31(
+              DropdownMenuItem,
+              {
+                variant: item.destructive ? "destructive" : "default",
+                disabled: item.disabled,
+                onSelect: () => {
+                  pendingRef.current = item;
+                },
+                children: [
+                  Icon ? /* @__PURE__ */ jsx35(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75 }) : null,
+                  item.label
+                ]
+              },
+              item.id
+            );
+          })
+        ] })
+      ] }, group.id)) })
+    ] }),
+    /* @__PURE__ */ jsx35(
+      ActionMenuSheet,
+      {
+        open: open && presentation === "sheet",
+        onOpenChange: setOpen,
+        title: title ?? /* @__PURE__ */ jsx35("span", { className: "sr-only", children: triggerLabel }),
+        description,
+        closeLabel,
+        groups: menuGroups,
+        onCloseAutoFocus: handleSheetCloseAutoFocus
+      }
+    )
+  ] });
+}
+
+// src/components/ui/list-card.tsx
+import { Fragment as Fragment14, jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+function lineTokens(value) {
+  return React32.Children.toArray(value).filter((token) => token !== "");
+}
+function MetaLine({
+  tokens,
+  slot,
+  first,
+  last
+}) {
+  return /* @__PURE__ */ jsx36(
+    "span",
+    {
+      "data-slot": slot,
+      className: cn(
+        "flex flex-wrap gap-x-[var(--space-3)] gap-y-[2px] text-[12px] leading-[16px] text-text-secondary",
+        first ? "mt-[var(--space-1)]" : "mt-[2px]"
+      ),
+      children: tokens.map((token, index) => /* @__PURE__ */ jsxs32(
+        "span",
+        {
+          className: "max-w-full truncate whitespace-nowrap",
+          title: typeof token === "string" || typeof token === "number" ? String(token) : void 0,
+          children: [
+            token,
+            index < tokens.length - 1 || !last ? /* @__PURE__ */ jsx36("span", { className: "sr-only", children: ", " }) : null
+          ]
+        },
+        index
+      ))
     }
   );
-  const trailingNode = trailing === "chevron" ? chevron : trailing === "none" ? null : /* @__PURE__ */ jsx35("span", { "data-slot": `${slot}-suffix`, children: trailing });
+}
+var titleClassName = "line-clamp-2 text-[13px] font-medium leading-[18px] text-text-primary [overflow-wrap:anywhere] [word-break:keep-all]";
+var overlayClassName = cn(
+  "text-inherit no-underline outline-none after:absolute after:inset-0 after:content-['']",
+  "focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--focus-ring)]"
+);
+function ListCard({
+  title,
+  meta,
+  status,
+  caption,
+  leading,
+  value,
+  trailing = "chevron",
+  actions,
+  href,
+  linkComponent,
+  linkProps,
+  onClick,
+  slot = "list-card",
+  className
+}) {
+  const meta1 = lineTokens(meta?.[0]);
+  const meta2 = lineTokens(meta?.[1]);
+  const hasValue = value != null;
+  const overlay = actions != null && (href != null || onClick != null);
+  const trailingNode = trailing === "chevron" ? /* @__PURE__ */ jsx36(
+    ChevronRight2,
+    {
+      "data-slot": `${slot}-suffix`,
+      "aria-hidden": true,
+      className: "size-[var(--space-4)] shrink-0 text-text-tertiary"
+    }
+  ) : trailing === "none" ? null : /* @__PURE__ */ jsx36("span", { "data-slot": `${slot}-suffix`, children: trailing });
+  const bottomIcon = actions != null && trailingNode != null;
+  const hasEnd = hasValue || actions != null || trailingNode != null;
   const rootClassName = cn(
-    "relative grid w-full min-w-0 items-center gap-x-[var(--space-2)] whitespace-normal text-left outline-none",
+    "relative grid w-full min-w-0 items-start gap-x-[var(--space-2)] whitespace-normal text-left outline-none",
     "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--focus-ring)]",
-    // The right track is the 16px chevron, or `auto` when a value sits before it.
-    leading ? hasValue ? "grid-cols-[auto_minmax(0,1fr)_auto]" : "grid-cols-[auto_minmax(0,1fr)_16px]" : hasValue ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)_16px]",
-    href && "after:absolute after:inset-0 after:content-['']",
+    // An empty end keeps the 16px chevron track.
+    leading ? hasEnd ? "grid-cols-[auto_minmax(0,1fr)_auto]" : "grid-cols-[auto_minmax(0,1fr)_16px]" : hasEnd ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)_16px]",
+    // 84 = the ⋮ hit area (2 above the top to 42 below) meets the chevron's (42 above the bottom to 2 below).
+    bottomIcon ? "min-h-[calc(var(--space-20)+var(--space-1))]" : null,
+    href && !overlay && "after:absolute after:inset-0 after:content-['']",
     className
   );
-  const content = /* @__PURE__ */ jsxs31(Fragment11, { children: [
-    leading != null ? /* @__PURE__ */ jsx35("span", { className: "flex items-center", children: leading }) : null,
-    /* @__PURE__ */ jsxs31("span", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx35(
-        "span",
-        {
-          "data-slot": `${slot}-title`,
-          className: "line-clamp-2 text-[13px] font-medium leading-[18px] text-text-primary [overflow-wrap:anywhere] [word-break:keep-all]",
-          title: typeof title === "string" || typeof title === "number" ? String(title) : void 0,
-          children: title
-        }
-      ),
-      meta1.length > 0 ? /* @__PURE__ */ jsx35("span", { className: "mt-[var(--space-1)] block", children: /* @__PURE__ */ jsx35(MetaLine, { tokens: meta1, slot: `${slot}-meta1` }) }) : null,
-      meta2.length > 0 ? /* @__PURE__ */ jsx35("span", { className: "mt-[2px] block", children: /* @__PURE__ */ jsx35(MetaLine, { tokens: meta2, slot: `${slot}-meta2` }) }) : null,
-      status != null ? /* @__PURE__ */ jsxs31("span", { "data-slot": `${slot}-bottom`, className: "mt-[var(--space-2)] flex min-h-[18px] items-center gap-[var(--space-2)]", children: [
-        /* @__PURE__ */ jsx35("span", { "data-slot": `${slot}-badge`, className: "flex items-center", children: status }),
-        caption != null ? /* @__PURE__ */ jsx35(
+  const titleNode = /* @__PURE__ */ jsx36(
+    "span",
+    {
+      "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
+    }
+  );
+  const content = /* @__PURE__ */ jsxs32(Fragment14, { children: [
+    leading != null ? /* @__PURE__ */ jsx36("span", { className: "flex min-h-[18px] items-center", children: leading }) : null,
+    /* @__PURE__ */ jsxs32("span", { className: "min-w-0", children: [
+      overlay && href == null ? (
+        // A block button keeps the title's two-line clamp inside it.
+        /* @__PURE__ */ jsx36("button", { type: "button", onClick, className: cn(overlayClassName, "block w-full text-left"), children: titleNode })
+      ) : titleNode,
+      meta1.length > 0 ? /* @__PURE__ */ jsx36(MetaLine, { tokens: meta1, slot: `${slot}-meta1`, first: true, last: meta2.length === 0 }) : null,
+      meta2.length > 0 ? /* @__PURE__ */ jsx36(MetaLine, { tokens: meta2, slot: `${slot}-meta2`, first: meta1.length === 0, last: true }) : null,
+      status != null || caption != null ? /* @__PURE__ */ jsxs32("span", { "data-slot": `${slot}-bottom`, className: "mt-[var(--space-2)] flex min-h-[18px] items-center gap-[var(--space-2)]", children: [
+        status != null ? /* @__PURE__ */ jsx36("span", { "data-slot": `${slot}-badge`, className: "flex items-center", children: status }) : null,
+        caption != null ? /* @__PURE__ */ jsx36(
           "span",
           {
             "data-slot": `${slot}-caption`,
@@ -6312,31 +6538,52 @@ function ListCard({
         ) : null
       ] }) : null
     ] }),
-    hasValue ? /* @__PURE__ */ jsxs31(
-      "span",
-      {
-        "data-slot": `${slot}-trailing`,
-        className: "inline-flex items-center gap-[var(--space-2)] text-[13px] leading-[20px] text-text-secondary tabular-nums",
-        children: [
-          /* @__PURE__ */ jsx35("span", { "data-slot": `${slot}-value`, children: value }),
-          trailingNode
-        ]
-      }
-    ) : trailingNode
+    hasEnd ? /* @__PURE__ */ jsxs32("span", { "data-slot": `${slot}-trailing`, className: "flex flex-col items-end justify-between self-stretch", children: [
+      /* @__PURE__ */ jsxs32(
+        "span",
+        {
+          className: cn(
+            "-mt-[var(--space-2)] flex min-h-[var(--space-8)] items-center",
+            actions != null ? "-mr-[var(--space-2)] gap-[var(--space-1)]" : "gap-[var(--space-2)]"
+          ),
+          children: [
+            hasValue ? /* @__PURE__ */ jsx36("span", { "data-slot": `${slot}-value`, className: "text-[13px] leading-[20px] text-text-secondary tabular-nums", children: value }) : null,
+            actions != null ? /* @__PURE__ */ jsx36("span", { className: "relative z-[1] flex", children: /* @__PURE__ */ jsx36(
+              ActionMenu,
+              {
+                title: typeof title === "string" ? title : void 0,
+                items: [...actions.items],
+                trigger: /* @__PURE__ */ jsx36(
+                  IconButton,
+                  {
+                    icon: MoreVertical,
+                    "aria-label": actions.label,
+                    appearance: "ghost",
+                    tone: "neutral",
+                    size: "md"
+                  }
+                )
+              }
+            ) }) : trailingNode
+          ]
+        }
+      ),
+      bottomIcon ? trailingNode : null
+    ] }) : null
   ] });
-  if (href) {
+  if (href && !overlay) {
     const LinkComponent = linkComponent ?? "a";
-    return /* @__PURE__ */ jsx35(LinkComponent, { ...linkProps, href, className: rootClassName, children: content });
+    return /* @__PURE__ */ jsx36(LinkComponent, { ...linkProps, href, className: rootClassName, children: content });
   }
-  if (onClick) {
-    return /* @__PURE__ */ jsx35("button", { type: "button", onClick, className: rootClassName, children: content });
+  if (onClick && !overlay) {
+    return /* @__PURE__ */ jsx36("button", { type: "button", onClick, className: rootClassName, children: content });
   }
-  return /* @__PURE__ */ jsx35("div", { className: rootClassName, children: content });
+  return /* @__PURE__ */ jsx36("div", { className: rootClassName, children: content });
 }
 
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
-var dataTableVariants = cva12(
+import { Fragment as Fragment15, jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+var dataTableVariants = cva13(
   [
     "relative overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
     "text-foreground"
@@ -6355,7 +6602,7 @@ var dataTableVariants = cva12(
     }
   }
 );
-var dataTableRowVariants = cva12(
+var dataTableRowVariants = cva13(
   [
     "grid min-h-[48px] items-center border-t border-[var(--border-subtle)]",
     "text-body-sm leading-compact text-foreground",
@@ -6386,9 +6633,9 @@ var alignmentClass = {
 function getRowId(row, keyField) {
   return String(row[keyField]);
 }
-function getGridTemplate(columns, selectable) {
+function getGridTemplate(columns, selectable, expandable) {
   const columnWidths = columns.map((column) => column.width ?? "1fr");
-  return [selectable ? "44px" : null, ...columnWidths].filter(Boolean).join(" ");
+  return [selectable ? "44px" : null, ...columnWidths, expandable ? "40px" : null].filter(Boolean).join(" ");
 }
 function getRenderedCell(row, column) {
   if (column.render) {
@@ -6398,7 +6645,7 @@ function getRenderedCell(row, column) {
   if (value === null || value === void 0) {
     return null;
   }
-  if (React32.isValidElement(value)) {
+  if (React33.isValidElement(value)) {
     return value;
   }
   return String(value);
@@ -6418,7 +6665,7 @@ function isInteractiveTarget(target) {
 function SortIcon({ sort, columnKey }) {
   const isActive = sort?.key === columnKey;
   if (!isActive) {
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       ChevronsUpDown,
       {
         "aria-hidden": "true",
@@ -6429,8 +6676,8 @@ function SortIcon({ sort, columnKey }) {
       }
     );
   }
-  const Icon = sort.dir === "asc" ? ChevronUp2 : ChevronDown3;
-  return /* @__PURE__ */ jsx36(
+  const Icon = sort.dir === "asc" ? ChevronUp2 : ChevronDown5;
+  return /* @__PURE__ */ jsx37(
     Icon,
     {
       "aria-hidden": "true",
@@ -6448,8 +6695,8 @@ function MobileSortMenu({
   onSortChange
 }) {
   const active = sortBy ? columns.find((column) => column.key === sortBy.key) : void 0;
-  return /* @__PURE__ */ jsxs32(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx36(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx37(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs33(
       Button,
       {
         "data-slot": "data-table-mobile-sort-button",
@@ -6458,26 +6705,26 @@ function MobileSortMenu({
         size: "sm",
         className: "ml-auto min-w-0",
         children: [
-          active && sortBy ? /* @__PURE__ */ jsxs32(Fragment12, { children: [
-            /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "\uC815\uB82C " }),
-            /* @__PURE__ */ jsx36("span", { className: "truncate", children: active.header }),
-            /* @__PURE__ */ jsxs32("span", { className: "sr-only", children: [
+          active && sortBy ? /* @__PURE__ */ jsxs33(Fragment15, { children: [
+            /* @__PURE__ */ jsx37("span", { className: "sr-only", children: "\uC815\uB82C " }),
+            /* @__PURE__ */ jsx37("span", { className: "truncate", children: active.header }),
+            /* @__PURE__ */ jsxs33("span", { className: "sr-only", children: [
               ", ",
               sortBy.dir === "asc" ? "\uC624\uB984\uCC28\uC21C" : "\uB0B4\uB9BC\uCC28\uC21C"
             ] })
           ] }) : "\uC815\uB82C",
-          /* @__PURE__ */ jsx36(SortIcon, { sort: sortBy, columnKey: active?.key ?? "" })
+          /* @__PURE__ */ jsx37(SortIcon, { sort: sortBy, columnKey: active?.key ?? "" })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx36(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsx36(DropdownMenuRadioGroup, { value: active?.key ?? "", children: columns.map((column) => /* @__PURE__ */ jsxs32(
+    /* @__PURE__ */ jsx37(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsx37(DropdownMenuRadioGroup, { value: active?.key ?? "", children: columns.map((column) => /* @__PURE__ */ jsxs33(
       DropdownMenuRadioItem,
       {
         value: column.key,
         onSelect: () => onSortChange?.(column.key, getNextSort(sortBy, column.key)),
         children: [
-          /* @__PURE__ */ jsx36("span", { className: "truncate", children: column.header }),
-          column.key === active?.key ? /* @__PURE__ */ jsx36("span", { className: "ml-auto pl-[var(--space-4)]", children: /* @__PURE__ */ jsx36(SortIcon, { sort: sortBy, columnKey: column.key }) }) : null
+          /* @__PURE__ */ jsx37("span", { className: "truncate", children: column.header }),
+          column.key === active?.key ? /* @__PURE__ */ jsx37("span", { className: "ml-auto pl-[var(--space-4)]", children: /* @__PURE__ */ jsx37(SortIcon, { sort: sortBy, columnKey: column.key }) }) : null
         ]
       },
       column.key
@@ -6496,14 +6743,14 @@ function MobileToolbar({
   if (!selectable && sortableColumns.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       "data-slot": "data-table-mobile-toolbar",
       className: "flex min-w-0 items-center gap-[var(--space-2)] px-[var(--space-4)] py-[var(--space-2)]",
       children: [
-        selectable ? /* @__PURE__ */ jsx36(SelectAllCheckbox, { checked: selectAllChecked, onToggleAll }) : null,
-        sortableColumns.length > 0 ? /* @__PURE__ */ jsx36(MobileSortMenu, { columns: sortableColumns, sortBy, onSortChange }) : null
+        selectable ? /* @__PURE__ */ jsx37(SelectAllCheckbox, { checked: selectAllChecked, onToggleAll }) : null,
+        sortableColumns.length > 0 ? /* @__PURE__ */ jsx37(MobileSortMenu, { columns: sortableColumns, sortBy, onSortChange }) : null
       ]
     }
   );
@@ -6512,13 +6759,13 @@ function SelectAllCheckbox({
   checked,
   onToggleAll
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Checkbox,
     {
       "aria-label": "\uC804\uCCB4 \uD589 \uC120\uD0DD",
       checked,
       onCheckedChange: (nextChecked) => onToggleAll(nextChecked === true),
-      children: /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "\uC804\uCCB4 \uD589 \uC120\uD0DD" })
+      children: /* @__PURE__ */ jsx37("span", { className: "sr-only", children: "\uC804\uCCB4 \uD589 \uC120\uD0DD" })
     }
   );
 }
@@ -6529,13 +6776,13 @@ function RowCheckbox({
   selected,
   onToggle
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Checkbox,
     {
       "aria-label": `${String(row[columns[0]?.key] ?? rowId)} \uD589 \uC120\uD0DD`,
       checked: selected,
       onCheckedChange: (nextChecked) => onToggle(rowId, nextChecked === true),
-      children: /* @__PURE__ */ jsxs32("span", { className: "sr-only", children: [
+      children: /* @__PURE__ */ jsxs33("span", { className: "sr-only", children: [
         rowId,
         " \uD589 \uC120\uD0DD"
       ] })
@@ -6552,17 +6799,17 @@ function SkeletonRows({
     // role="table"의 허용 자식은 row/rowgroup뿐이라 컨테이너는 rowgroup이어야 한다.
     // 로딩 알림은 그 안의 row/cell 안에 둔다 — 종전에는 컨테이너가 role="status"라
     // aria-required-children(Critical)이 났다.
-    /* @__PURE__ */ jsxs32("div", { role: "rowgroup", children: [
-      /* @__PURE__ */ jsx36("div", { role: "row", children: /* @__PURE__ */ jsx36("div", { role: "cell", "aria-colindex": 1, "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911", children: /* @__PURE__ */ jsx36("span", { role: "status", className: "sr-only", children: "\uB370\uC774\uD130 \uB85C\uB4DC \uC911" }) }) }),
-      Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs32(
+    /* @__PURE__ */ jsxs33("div", { role: "rowgroup", children: [
+      /* @__PURE__ */ jsx37("div", { role: "row", children: /* @__PURE__ */ jsx37("div", { role: "cell", "aria-colindex": 1, "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911", children: /* @__PURE__ */ jsx37("span", { role: "status", className: "sr-only", children: "\uB370\uC774\uD130 \uB85C\uB4DC \uC911" }) }) }),
+      Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs33(
         "div",
         {
           "data-slot": "data-table-skeleton-row",
           className: "grid min-h-[48px] items-center border-t border-[var(--border-subtle)]",
           style: { gridTemplateColumns },
           children: [
-            selectable ? /* @__PURE__ */ jsx36("div", { "aria-hidden": "true", className: "px-[var(--space-4)]" }) : null,
-            columns.map((column, columnIndex) => /* @__PURE__ */ jsx36("div", { className: "px-[var(--space-4)] py-[var(--space-2)]", children: /* @__PURE__ */ jsx36(
+            selectable ? /* @__PURE__ */ jsx37("div", { "aria-hidden": "true", className: "px-[var(--space-4)]" }) : null,
+            columns.map((column, columnIndex) => /* @__PURE__ */ jsx37("div", { className: "px-[var(--space-4)] py-[var(--space-2)]", children: /* @__PURE__ */ jsx37(
               "div",
               {
                 className: cn(
@@ -6579,15 +6826,15 @@ function SkeletonRows({
   );
 }
 function MobileSkeletonCards({ count }) {
-  return /* @__PURE__ */ jsx36("div", { "data-slot": "data-table-mobile-skeleton", "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911", role: "status", children: Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsx37("div", { "data-slot": "data-table-mobile-skeleton", "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911", role: "status", children: Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs33(
     "div",
     {
       "data-slot": "data-table-mobile-skeleton-card",
       className: "flex flex-col gap-[var(--space-2)] border-t border-[var(--border-subtle)] px-[var(--space-4)] py-[var(--space-4)]",
       children: [
-        /* @__PURE__ */ jsx36("div", { className: "h-[14px] w-[72%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]" }),
-        /* @__PURE__ */ jsx36("div", { className: "h-[12px] w-[56%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]" }),
-        /* @__PURE__ */ jsx36("div", { className: "h-[12px] w-[64%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]" })
+        /* @__PURE__ */ jsx37("div", { className: "h-[14px] w-[72%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]" }),
+        /* @__PURE__ */ jsx37("div", { className: "h-[12px] w-[56%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]" }),
+        /* @__PURE__ */ jsx37("div", { className: "h-[12px] w-[64%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-inset)]" })
       ]
     },
     rowIndex
@@ -6598,6 +6845,19 @@ var rowLinkClass = cn(
   "text-inherit no-underline outline-none after:absolute after:inset-0 after:content-['']",
   "focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--focus-ring)]"
 );
+var expandedPanelClass = cn(
+  "grid grid-rows-[0fr] invisible data-[state=open]:grid-rows-[1fr] data-[state=open]:visible",
+  "motion-safe:[transition:grid-template-rows_var(--dur-base)_var(--ease-standard),visibility_0s_linear_var(--dur-base)]",
+  "motion-safe:data-[state=open]:[transition:grid-template-rows_var(--dur-base)_var(--ease-out),visibility_0s]"
+);
+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);
+  if (expanded && !opened) {
+    setOpened(true);
+  }
+  return opened || expanded;
+}
 function useActivationHandlers({ row, href, activatable, onActivate }) {
   return {
     onClick: (event) => {
@@ -6630,12 +6890,14 @@ function DataTableRowView({
   onToggle,
   onActivate,
   onRowContextMenu,
+  expand,
   gridTemplateColumns,
   ariaRowIndex
 }) {
   const linked = Boolean(LinkComponent && href);
   const handlers = useActivationHandlers({ row, href, activatable, onActivate });
-  return /* @__PURE__ */ jsxs32(
+  const opened = useOpenedOnce(expand?.expanded ?? false);
+  const dataRow = /* @__PURE__ */ jsxs33(
     "div",
     {
       "data-slot": "data-table-row",
@@ -6645,19 +6907,21 @@ function DataTableRowView({
       "aria-rowindex": ariaRowIndex,
       tabIndex: activatable ? 0 : void 0,
       className: cn(
-        dataTableRowVariants({ interactive: activatable || linked, selected: visuallySelected }),
+        dataTableRowVariants({ interactive: activatable || linked || expand != null, selected: visuallySelected }),
         linked ? rowLinkHostClass : null
       ),
       style: { gridTemplateColumns },
       onContextMenu: (event) => onRowContextMenu?.(rowId, event),
-      onClick: handlers.onClick,
+      onClick: expand ? (event) => {
+        if (!isInteractiveTarget(event.target)) expand.onToggle(rowId);
+      } : handlers.onClick,
       onKeyDown: handlers.onKeyDown,
       children: [
-        selectable ? /* @__PURE__ */ jsx36("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx36(RowCheckbox, { row, rowId, columns, selected, onToggle }) }) : null,
+        selectable ? /* @__PURE__ */ jsx37("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx37(RowCheckbox, { row, rowId, columns, selected, onToggle }) }) : null,
         columns.map((column, columnIndex) => {
           const align = column.align ?? "left";
           const content = getRenderedCell(row, column);
-          return /* @__PURE__ */ jsx36(
+          return /* @__PURE__ */ jsx37(
             "div",
             {
               "data-slot": "data-table-cell",
@@ -6667,14 +6931,57 @@ function DataTableRowView({
                 alignmentClass[align],
                 column.tabular ? "font-[family-name:var(--font-display)] tabular-nums" : null
               ),
-              children: /* @__PURE__ */ jsx36("span", { className: "min-w-0 truncate", children: linked && columnIndex === 0 && LinkComponent ? /* @__PURE__ */ jsx36(LinkComponent, { href, "data-slot": "data-table-row-link", className: rowLinkClass, children: content }) : content })
+              children: /* @__PURE__ */ jsx37("span", { className: "min-w-0 truncate", children: linked && columnIndex === 0 && LinkComponent ? /* @__PURE__ */ jsx37(LinkComponent, { href, "data-slot": "data-table-row-link", className: rowLinkClass, children: content }) : content })
             },
             column.key
           );
-        })
+        }),
+        expand ? /* @__PURE__ */ jsx37("div", { role: "cell", "data-slot": "data-table-expand-cell", className: "flex items-center justify-end pr-[var(--space-2)]", children: /* @__PURE__ */ jsx37(
+          IconButton,
+          {
+            icon: ChevronRight3,
+            "aria-label": expand.label,
+            "aria-expanded": expand.expanded,
+            "aria-controls": expand.panelId,
+            appearance: "ghost",
+            tone: "neutral",
+            size: "md",
+            className: cn(
+              "aria-expanded:[&_svg]:rotate-90",
+              "motion-safe:[&_svg]:transition-transform motion-safe:[&_svg]:duration-[var(--dur-base)] motion-safe:[&_svg]:ease-[var(--ease-standard)]"
+            ),
+            onClick: () => expand.onToggle(rowId)
+          }
+        ) }) : null
       ]
     }
   );
+  if (!expand) {
+    return dataRow;
+  }
+  return /* @__PURE__ */ jsxs33(Fragment15, { children: [
+    dataRow,
+    /* @__PURE__ */ jsx37(
+      "div",
+      {
+        role: "row",
+        "data-slot": "data-table-expanded-row",
+        "data-row-id": rowId,
+        "data-state": expand.expanded ? "open" : "closed",
+        className: expandedPanelClass,
+        children: /* @__PURE__ */ jsx37(
+          "div",
+          {
+            role: "cell",
+            id: expand.panelId,
+            "aria-colspan": columns.length + (selectable ? 2 : 1),
+            className: "min-h-0 min-w-0 overflow-hidden",
+            children: opened ? expand.render(row) : null
+          }
+        )
+      }
+    )
+  ] });
 }
 function DataTableMobileCardView({
   row,
@@ -6689,20 +6996,50 @@ function DataTableMobileCardView({
   onToggle,
   onActivate,
   onRowContextMenu,
+  expand,
   getMobileCardContent,
   ariaPosInSet,
   ariaSetSize,
   first
 }) {
   const linked = Boolean(LinkComponent && href);
-  const handlers = useActivationHandlers({ row, href, activatable, onActivate });
   const content = getMobileCardContent(row);
   const navigable = linked || activatable;
-  const leading = selectable || content.leading != null ? /* @__PURE__ */ jsxs32("span", { className: "flex items-center gap-[var(--space-2)]", children: [
-    selectable ? /* @__PURE__ */ jsx36(RowCheckbox, { row, rowId, columns, selected, onToggle }) : null,
+  const opened = useOpenedOnce(expand?.expanded ?? false);
+  const leading = selectable || content.leading != null ? /* @__PURE__ */ jsxs33("span", { className: "flex items-center gap-[var(--space-2)]", children: [
+    selectable ? /* @__PURE__ */ jsx37(RowCheckbox, { row, rowId, columns, selected, onToggle }) : null,
     content.leading
   ] }) : void 0;
-  return /* @__PURE__ */ jsx36(
+  let title = content.title;
+  if (expand) {
+    title = /* @__PURE__ */ jsx37(
+      "button",
+      {
+        type: "button",
+        "data-slot": "data-table-row-link",
+        "aria-label": expand.label,
+        "aria-expanded": expand.expanded,
+        "aria-controls": expand.panelId,
+        className: cn(rowLinkClass, "block w-full text-left"),
+        onClick: () => expand.onToggle(rowId),
+        children: /* @__PURE__ */ jsx37("span", { className: "line-clamp-2", children: content.title })
+      }
+    );
+  } else if (linked && LinkComponent) {
+    title = /* @__PURE__ */ jsx37(LinkComponent, { href, "data-slot": "data-table-row-link", className: rowLinkClass, children: content.title });
+  } else if (activatable) {
+    title = /* @__PURE__ */ jsx37(
+      "button",
+      {
+        type: "button",
+        "data-slot": "data-table-row-link",
+        className: cn(rowLinkClass, "block w-full text-left"),
+        onClick: (event) => onActivate(row, href, event),
+        children: /* @__PURE__ */ jsx37("span", { className: "line-clamp-2", children: content.title })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       "data-slot": "data-table-mobile-card",
@@ -6711,37 +7048,57 @@ function DataTableMobileCardView({
       role: "listitem",
       "aria-posinset": ariaPosInSet,
       "aria-setsize": ariaSetSize,
-      "aria-label": content.ariaLabel,
-      tabIndex: activatable ? 0 : void 0,
+      "aria-label": content.ariaLabel ?? String(content.title),
       className: cn(
         "min-w-0 border-t border-[var(--border-subtle)] transition-colors motion-reduce:transition-none",
         first ? "border-t-0" : null,
-        navigable ? "cursor-pointer hover:bg-[var(--action-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--focus-ring)]" : null,
+        navigable ? "cursor-pointer hover:bg-[var(--action-hover)]" : null,
         visuallySelected ? "bg-[var(--action-selected)]" : null,
-        linked ? rowLinkHostClass : null
+        navigable ? rowLinkHostClass : null
       ),
       onContextMenu: (event) => onRowContextMenu?.(rowId, event),
-      onClick: handlers.onClick,
-      onKeyDown: handlers.onKeyDown,
-      children: /* @__PURE__ */ jsx36(
-        ListCard,
-        {
-          className: "px-[var(--space-4)] py-[var(--space-3)]",
-          title: linked && LinkComponent ? /* @__PURE__ */ jsx36(LinkComponent, { href, "data-slot": "data-table-row-link", className: rowLinkClass, children: content.title }) : content.title,
-          meta: content.meta ? [content.meta[0], content.meta[1]] : void 0,
-          status: content.status,
-          caption: content.date,
-          value: content.value,
-          leading,
-          trailing: navigable ? "chevron" : "none"
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx37(
+          ListCard,
+          {
+            className: cn(
+              "px-[var(--space-4)] py-[var(--space-3)]",
+              expand ? ["cursor-pointer transition-colors hover:bg-[var(--action-hover)] motion-reduce:transition-none", rowLinkHostClass] : null
+            ),
+            title,
+            meta: content.meta ? [content.meta[0], content.meta[1]] : void 0,
+            status: content.status,
+            caption: content.date,
+            value: content.value,
+            leading,
+            trailing: expand ? /* @__PURE__ */ jsx37(
+              ChevronRight3,
+              {
+                "aria-hidden": true,
+                "data-state": expand.expanded ? "open" : "closed",
+                className: cn("block size-[var(--space-4)] shrink-0 text-text-tertiary data-[state=open]:rotate-90", expandChevronClass)
+              }
+            ) : navigable ? "chevron" : "none",
+            actions: content.actions
+          }
+        ),
+        expand ? /* @__PURE__ */ jsx37(
+          "div",
+          {
+            id: expand.panelId,
+            "data-slot": "data-table-expanded",
+            "data-state": expand.expanded ? "open" : "closed",
+            className: expandedPanelClass,
+            children: /* @__PURE__ */ jsx37("div", { className: "min-h-0 min-w-0 overflow-hidden", children: opened ? expand.render(row) : null })
+          }
+        ) : null
+      ]
     }
   );
 }
-var MemoDataTableRow = React32.memo(DataTableRowView);
-var MemoDataTableMobileCard = React32.memo(DataTableMobileCardView);
-var useIsomorphicLayoutEffect = typeof window === "undefined" ? React32.useEffect : React32.useLayoutEffect;
+var MemoDataTableRow = React33.memo(DataTableRowView);
+var MemoDataTableMobileCard = React33.memo(DataTableMobileCardView);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? React33.useEffect : React33.useLayoutEffect;
 var VIRTUAL_DEFAULT_OVERSCAN = 8;
 var VIRTUAL_INITIAL_ROWS = 24;
 var VIRTUAL_FALLBACK_SIZE = { desktop: 48, mobile: 120 };
@@ -6821,7 +7178,7 @@ function useVirtualWindow({
   mobileListRef
 }) {
   const count = rowIds.length;
-  const [win, setWin] = React32.useState({
+  const [win, setWin] = React33.useState({
     layout: null,
     start: 0,
     end: VIRTUAL_INITIAL_ROWS,
@@ -6829,12 +7186,12 @@ function useVirtualWindow({
     padTop: 0,
     padBottom: 0
   });
-  const desktopSize = React32.useRef(0);
-  const cardHeights = React32.useRef(null);
+  const desktopSize = React33.useRef(0);
+  const cardHeights = React33.useRef(null);
   cardHeights.current ??= new CardHeights();
-  const update = React32.useRef(() => void 0);
-  const reported = React32.useRef("");
-  const latest = React32.useRef({
+  const update = React33.useRef(() => void 0);
+  const reported = React33.useRef("");
+  const latest = React33.useRef({
     count,
     layout: "desktop",
     extent: uniformExtent(VIRTUAL_FALLBACK_SIZE.desktop)
@@ -6897,7 +7254,7 @@ function useVirtualWindow({
   useIsomorphicLayoutEffect(() => {
     update.current();
   });
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     if (!enabled) {
       return;
     }
@@ -6919,7 +7276,7 @@ function useVirtualWindow({
       window.cancelAnimationFrame(frame);
     };
   }, [enabled]);
-  const scrollToIndex = React32.useCallback(
+  const scrollToIndex = React33.useCallback(
     (index) => {
       const { count: rowCount, layout, extent } = latest.current;
       const list = (layout === "desktop" ? desktopListRef : mobileListRef).current;
@@ -6952,7 +7309,7 @@ function useVisibleLayout({
   desktopRef,
   mobileRef
 }) {
-  const [layout, setLayout] = React32.useState(null);
+  const [layout, setLayout] = React33.useState(null);
   useIsomorphicLayoutEffect(() => {
     if (!enabled) {
       return;
@@ -6989,9 +7346,9 @@ function useLayoutFocusHandoff({
   layout,
   containers
 }) {
-  const lastFocus = React32.useRef(null);
-  const previousLayout = React32.useRef(layout);
-  React32.useEffect(() => {
+  const lastFocus = React33.useRef(null);
+  const previousLayout = React33.useRef(layout);
+  React33.useEffect(() => {
     const root = rootRef.current;
     if (!root) {
       return;
@@ -7043,7 +7400,7 @@ function useLayoutFocusHandoff({
     const item = record.rowId ? Array.from(container.querySelectorAll("[data-row-id]")).find(
       (node) => node.getAttribute("data-row-id") === record.rowId
     ) : void 0;
-    const target = (item && (record.checkbox ? item.querySelector('[role="checkbox"]') : item.hasAttribute("tabindex") ? item : item.querySelector("a[href]"))) ?? item ?? container;
+    const target = (item && (record.checkbox ? item.querySelector('[role="checkbox"]') : item.hasAttribute("tabindex") ? item : item.querySelector('[data-slot="data-table-row-link"],[data-slot="data-table-expand-cell"] button'))) ?? item ?? container;
     if (target instanceof HTMLElement) {
       if (!target.hasAttribute("tabindex") && !target.matches("a[href],button,input")) {
         target.tabIndex = -1;
@@ -7075,19 +7432,23 @@ function DataTableInner({
   linkComponent,
   onRowClick,
   virtual,
+  renderExpanded,
+  getExpandLabel,
+  expandedIds,
+  onExpandedChange,
   skeletonRowCount = 8,
   "aria-label": ariaLabel = "\uB370\uC774\uD130 \uD14C\uC774\uBE14",
   ...props
 }, ref) {
   const virtualOptions = virtual ? virtual === true ? {} : virtual : null;
   const isVirtual = virtualOptions !== null;
-  const rootRef = React32.useRef(null);
-  const desktopRef = React32.useRef(null);
-  const headerRef = React32.useRef(null);
-  const desktopListRef = React32.useRef(null);
-  const mobileRef = React32.useRef(null);
-  const mobileListRef = React32.useRef(null);
-  const setRootRef = React32.useCallback(
+  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(
     (node) => {
       rootRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -7106,7 +7467,7 @@ function DataTableInner({
     desktopListRef,
     mobileListRef
   });
-  React32.useImperativeHandle(virtualOptions?.handleRef, () => ({ scrollToIndex }), [scrollToIndex]);
+  React33.useImperativeHandle(virtualOptions?.handleRef, () => ({ scrollToIndex }), [scrollToIndex]);
   const visibleLayout = useVisibleLayout({ enabled: !isVirtual, desktopRef, mobileRef });
   const activeLayout = isVirtual ? virtualWindow.layout : visibleLayout;
   useLayoutFocusHandoff({
@@ -7122,7 +7483,23 @@ function DataTableInner({
   const allVisibleRowsSelected = rowIds.length > 0 && selectedCount === rowIds.length;
   const partiallySelected = selectedCount > 0 && !allVisibleRowsSelected;
   const selectAllChecked = partiallySelected ? "indeterminate" : allVisibleRowsSelected;
-  const gridTemplateColumns = getGridTemplate(columns, selectable);
+  const expandable = renderExpanded != null;
+  const gridTemplateColumns = getGridTemplate(columns, selectable, expandable);
+  const panelIdBase = React33.useId();
+  const [ownExpandedIds, setOwnExpandedIds] = React33.useState(() => /* @__PURE__ */ new Set());
+  const resolvedExpandedIds = expandedIds ?? ownExpandedIds;
+  const toggleExpanded = (id) => {
+    const nextIds = new Set(resolvedExpandedIds);
+    if (nextIds.has(id)) {
+      nextIds.delete(id);
+    } else {
+      nextIds.add(id);
+    }
+    if (expandedIds === void 0) {
+      setOwnExpandedIds(nextIds);
+    }
+    onExpandedChange?.(nextIds);
+  };
   const emitSelection = (nextIds) => {
     onSelectionChange?.(nextIds);
   };
@@ -7151,23 +7528,23 @@ function DataTableInner({
       window.location.assign(href);
     }
   };
-  const latestHandlers = React32.useRef({ toggleRow, activateRow, onRowContextMenu });
+  const latestHandlers = React33.useRef({ toggleRow, activateRow, onRowContextMenu });
   useIsomorphicLayoutEffect(() => {
     latestHandlers.current = { toggleRow, activateRow, onRowContextMenu };
   });
-  const stableToggleRow = React32.useCallback(
+  const stableToggleRow = React33.useCallback(
     (id, checked) => latestHandlers.current.toggleRow(id, checked),
     []
   );
-  const stableActivateRow = React32.useCallback(
+  const stableActivateRow = React33.useCallback(
     (row, href, event) => latestHandlers.current.activateRow(row, href, event),
     []
   );
-  const stableRowContextMenu = React32.useCallback(
+  const stableRowContextMenu = React33.useCallback(
     (rowId, event) => latestHandlers.current.onRowContextMenu?.(rowId, event),
     []
   );
-  const getItemProps = (row) => {
+  const getItemProps = (row, layout, index) => {
     const rowId = getRowId(row, keyField);
     const selected = resolvedSelectedIds.has(rowId);
     const href = rowHref?.(row);
@@ -7184,7 +7561,14 @@ function DataTableInner({
       LinkComponent: linkComponent,
       onToggle: isVirtual ? stableToggleRow : toggleRow,
       onActivate: isVirtual ? stableActivateRow : activateRow,
-      onRowContextMenu: isVirtual ? stableRowContextMenu : onRowContextMenu
+      onRowContextMenu: isVirtual ? stableRowContextMenu : onRowContextMenu,
+      expand: renderExpanded && getExpandLabel ? {
+        expanded: resolvedExpandedIds.has(rowId),
+        label: getExpandLabel(row),
+        panelId: `${panelIdBase}-${layout}-${index}`,
+        render: renderExpanded,
+        onToggle: toggleExpanded
+      } : void 0
     };
   };
   const sliceFor = (layout) => {
@@ -7215,7 +7599,7 @@ function DataTableInner({
   const mobileSlice = sliceFor("mobile");
   const RowComponent = isVirtual ? MemoDataTableRow : DataTableRowView;
   const CardComponent = isVirtual ? MemoDataTableMobileCard : DataTableMobileCardView;
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       ref: setRootRef,
@@ -7229,7 +7613,7 @@ function DataTableInner({
       ),
       ...props,
       children: [
-        selectable && announceSelection ? /* @__PURE__ */ jsx36(
+        selectable && announceSelection ? /* @__PURE__ */ jsx37(
           "div",
           {
             "data-slot": "data-table-selection-status",
@@ -7238,23 +7622,23 @@ function DataTableInner({
             children: selectedCount > 0 ? `${selectedCount.toLocaleString("ko-KR")}${selectionUnit} \uC120\uD0DD\uB428` : ""
           }
         ) : null,
-        loading && data.length > 0 ? /* @__PURE__ */ jsx36(
+        loading && data.length > 0 ? /* @__PURE__ */ jsx37(
           "div",
           {
             "data-slot": "data-table-progress",
             "aria-hidden": "true",
             className: "absolute left-0 right-0 top-0 z-10 h-[2px] overflow-hidden bg-[var(--action-selected)]",
-            children: /* @__PURE__ */ jsx36("div", { className: "h-full w-1/3 animate-pulse bg-[var(--primary)]" })
+            children: /* @__PURE__ */ jsx37("div", { className: "h-full w-1/3 animate-pulse bg-[var(--primary)]" })
           }
         ) : null,
-        /* @__PURE__ */ jsx36("div", { ref: desktopRef, "data-slot": "data-table-desktop", className: "max-lg:hidden lg:block", children: /* @__PURE__ */ jsxs32(
+        /* @__PURE__ */ jsx37("div", { ref: desktopRef, "data-slot": "data-table-desktop", className: "max-lg:hidden lg:block", children: /* @__PURE__ */ jsxs33(
           "div",
           {
             role: "table",
             "aria-label": ariaLabel,
             "aria-rowcount": isVirtual && data.length > 0 ? data.length + 1 : void 0,
             children: [
-              /* @__PURE__ */ jsxs32(
+              /* @__PURE__ */ jsxs33(
                 "div",
                 {
                   ref: headerRef,
@@ -7269,12 +7653,12 @@ function DataTableInner({
                   ),
                   style: { gridTemplateColumns },
                   children: [
-                    selectable ? /* @__PURE__ */ jsx36("div", { role: "columnheader", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx36(SelectAllCheckbox, { checked: selectAllChecked, onToggleAll: toggleAllRows }) }) : null,
+                    selectable ? /* @__PURE__ */ jsx37("div", { role: "columnheader", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx37(SelectAllCheckbox, { checked: selectAllChecked, onToggleAll: toggleAllRows }) }) : null,
                     columns.map((column) => {
                       const align = column.align ?? "left";
                       const nextSort = getNextSort(sortBy, column.key);
                       const ariaSort = sortBy?.key === column.key ? sortBy.dir === "asc" ? "ascending" : "descending" : void 0;
-                      return /* @__PURE__ */ jsx36(
+                      return /* @__PURE__ */ jsx37(
                         "div",
                         {
                           role: "columnheader",
@@ -7283,7 +7667,7 @@ function DataTableInner({
                             "flex min-w-0 items-center gap-[var(--space-1)] px-[var(--space-4)] py-[var(--space-2)]",
                             alignmentClass[align]
                           ),
-                          children: column.sortable ? /* @__PURE__ */ jsxs32(
+                          children: column.sortable ? /* @__PURE__ */ jsxs33(
                             "button",
                             {
                               type: "button",
@@ -7294,19 +7678,20 @@ function DataTableInner({
                               ),
                               onClick: () => onSortChange?.(column.key, nextSort),
                               children: [
-                                /* @__PURE__ */ jsx36("span", { className: "truncate", children: column.header }),
-                                /* @__PURE__ */ jsx36(SortIcon, { sort: sortBy, columnKey: column.key })
+                                /* @__PURE__ */ jsx37("span", { className: "truncate", children: column.header }),
+                                /* @__PURE__ */ jsx37(SortIcon, { sort: sortBy, columnKey: column.key })
                               ]
                             }
-                          ) : /* @__PURE__ */ jsx36("span", { className: "truncate", children: column.header })
+                          ) : /* @__PURE__ */ jsx37("span", { className: "truncate", children: column.header })
                         },
                         column.key
                       );
-                    })
+                    }),
+                    expandable ? /* @__PURE__ */ jsx37("div", { role: "cell" }) : null
                   ]
                 }
               ),
-              loading && data.length === 0 ? /* @__PURE__ */ jsx36(
+              loading && data.length === 0 ? /* @__PURE__ */ jsx37(
                 SkeletonRows,
                 {
                   columns,
@@ -7317,7 +7702,7 @@ function DataTableInner({
               ) : data.length === 0 ? (
                 /* role="table" 직계 자식은 row/rowgroup이어야 한다. data-slot과 테두리는
                    그대로 유지해 시각 계약을 깨지 않는다(빈 상태에서도 표가 테두리를 그린다). */
-                /* @__PURE__ */ jsx36("div", { role: "rowgroup", children: /* @__PURE__ */ jsx36("div", { role: "row", children: /* @__PURE__ */ jsx36(
+                /* @__PURE__ */ jsx37("div", { role: "rowgroup", children: /* @__PURE__ */ jsx37("div", { role: "row", children: /* @__PURE__ */ jsx37(
                   "div",
                   {
                     role: "cell",
@@ -7327,9 +7712,9 @@ function DataTableInner({
                     children: emptyState
                   }
                 ) }) })
-              ) : /* @__PURE__ */ jsx36("div", { ref: desktopListRef, role: "rowgroup", style: desktopSlice.style, children: desktopSlice.rows.map((row, index) => {
-                const itemProps = getItemProps(row);
-                return /* @__PURE__ */ jsx36(
+              ) : /* @__PURE__ */ jsx37("div", { ref: desktopListRef, role: "rowgroup", style: desktopSlice.style, children: desktopSlice.rows.map((row, index) => {
+                const itemProps = getItemProps(row, "desktop", desktopSlice.start + index);
+                return /* @__PURE__ */ jsx37(
                   RowComponent,
                   {
                     ...itemProps,
@@ -7342,8 +7727,8 @@ function DataTableInner({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs32("div", { ref: mobileRef, "data-slot": "data-table-mobile", className: "lg:hidden", children: [
-          /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsxs33("div", { ref: mobileRef, "data-slot": "data-table-mobile", className: "lg:hidden", children: [
+          /* @__PURE__ */ jsx37(
             MobileToolbar,
             {
               columns,
@@ -7354,7 +7739,7 @@ function DataTableInner({
               onToggleAll: toggleAllRows
             }
           ),
-          loading && data.length === 0 ? /* @__PURE__ */ jsx36(MobileSkeletonCards, { count: skeletonRowCount }) : data.length === 0 ? /* @__PURE__ */ jsx36("div", { "data-slot": "data-table-mobile-empty", className: "border-t border-[var(--border-subtle)] p-[var(--space-4)]", children: emptyState }) : /* @__PURE__ */ jsx36(
+          loading && data.length === 0 ? /* @__PURE__ */ jsx37(MobileSkeletonCards, { count: skeletonRowCount }) : data.length === 0 ? /* @__PURE__ */ jsx37("div", { "data-slot": "data-table-mobile-empty", className: "border-t border-[var(--border-subtle)] p-[var(--space-4)]", children: emptyState }) : /* @__PURE__ */ jsx37(
             "div",
             {
               ref: mobileListRef,
@@ -7363,9 +7748,9 @@ function DataTableInner({
               "aria-label": `${ariaLabel} \uBAA8\uBC14\uC77C \uCE74\uB4DC \uBAA9\uB85D`,
               style: mobileSlice.style,
               children: mobileSlice.rows.map((row, index) => {
-                const itemProps = getItemProps(row);
                 const rowIndex = mobileSlice.start + index;
-                return /* @__PURE__ */ jsx36(
+                const itemProps = getItemProps(row, "mobile", rowIndex);
+                return /* @__PURE__ */ jsx37(
                   CardComponent,
                   {
                     ...itemProps,
@@ -7384,11 +7769,11 @@ function DataTableInner({
     }
   );
 }
-var DataTable = React32.forwardRef(DataTableInner);
+var DataTable = React33.forwardRef(DataTableInner);
 DataTable.displayName = "DataTable";
 
 // src/components/ui/context-menu.tsx
-import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
 function ContextMenu({
   open,
   onOpenChange,
@@ -7399,8 +7784,8 @@ function ContextMenu({
   if (!position) {
     return null;
   }
-  return /* @__PURE__ */ jsxs33(DropdownMenu, { open, onOpenChange, modal: false, children: [
-    /* @__PURE__ */ jsx37(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs34(DropdownMenu, { open, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ jsx38(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(
       "span",
       {
         "aria-hidden": "true",
@@ -7414,19 +7799,19 @@ function ContextMenu({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx37(DropdownMenuContent, { ...contentProps, children })
+    /* @__PURE__ */ jsx38(DropdownMenuContent, { ...contentProps, children })
   ] });
 }
 
 // src/components/ui/bulk-action-bar.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { X as X3 } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
 function ActionButton({ action }) {
   const danger = action.variant === "destructive";
   const off = action.disabled;
   const Icon = action.icon;
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "button",
     {
       type: "button",
@@ -7453,7 +7838,7 @@ function ActionButton({ action }) {
         whiteSpace: "nowrap"
       },
       children: [
-        Icon ? /* @__PURE__ */ jsx38(
+        Icon ? /* @__PURE__ */ jsx39(
           Icon,
           {
             "aria-hidden": "true",
@@ -7468,7 +7853,7 @@ function ActionButton({ action }) {
   );
 }
 function Divider() {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "span",
     {
       "aria-hidden": "true",
@@ -7483,7 +7868,7 @@ function Divider() {
   );
 }
 function ClearButton({ onClear }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "button",
     {
       type: "button",
@@ -7505,7 +7890,7 @@ function ClearButton({ onClear }) {
         justifyContent: "center",
         borderRadius: "var(--radius-md)"
       },
-      children: /* @__PURE__ */ jsx38(X3, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
+      children: /* @__PURE__ */ jsx39(X3, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
     }
   );
 }
@@ -7560,10 +7945,10 @@ var idleLineStyle = {
   fontVariantNumeric: "tabular-nums",
   color: "var(--text-secondary)"
 };
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React33.useEffect : React33.useLayoutEffect;
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React34.useEffect : React34.useLayoutEffect;
 function useCompactSummary(slot, enabled) {
-  const [fullWidth, setFullWidth] = React33.useState(null);
-  const measure = React33.useCallback(() => {
+  const [fullWidth, setFullWidth] = React34.useState(null);
+  const measure = React34.useCallback(() => {
     if (!slot) return;
     setFullWidth((prev) => {
       if (prev === null) return slot.scrollWidth > slot.clientWidth ? slot.scrollWidth : null;
@@ -7573,7 +7958,7 @@ function useCompactSummary(slot, enabled) {
   useIsomorphicLayoutEffect2(() => {
     if (enabled) measure();
   });
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     if (!enabled || !slot || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(measure);
     observer.observe(slot);
@@ -7597,7 +7982,7 @@ function BulkActionBar({
   ...props
 }) {
   const inline = placement === "inline";
-  const trailingSlot = trailing !== void 0 && trailing !== null ? /* @__PURE__ */ jsx38(
+  const trailingSlot = trailing !== void 0 && trailing !== null ? /* @__PURE__ */ jsx39(
     "div",
     {
       "data-slot": "bulk-action-bar-trailing",
@@ -7610,13 +7995,13 @@ function BulkActionBar({
       children: trailing
     }
   ) : null;
-  const [summaryElement, setSummaryElement] = React33.useState(null);
+  const [summaryElement, setSummaryElement] = React34.useState(null);
   const compact = useCompactSummary(
     summaryElement,
     inline && compactSummary !== void 0 && compactSummary !== null
   );
   if (count === 0 && idleContent !== void 0 && trailingSlot) {
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(
       "div",
       {
         "data-slot": "bulk-action-bar",
@@ -7626,7 +8011,7 @@ function BulkActionBar({
         style: { ...idleLineStyle, overflow: "visible", ...style },
         ...props,
         children: [
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             "div",
             {
               role: "status",
@@ -7648,7 +8033,7 @@ function BulkActionBar({
     );
   }
   if (count === 0 && idleContent !== void 0) {
-    return /* @__PURE__ */ jsx38(
+    return /* @__PURE__ */ jsx39(
       "div",
       {
         role: "status",
@@ -7665,7 +8050,7 @@ function BulkActionBar({
   if (count === 0 && emptyHint === void 0) {
     return null;
   }
-  const countLabel = /* @__PURE__ */ jsx38(
+  const countLabel = /* @__PURE__ */ jsx39(
     "span",
     {
       "data-slot": "bulk-action-bar-count",
@@ -7682,7 +8067,7 @@ function BulkActionBar({
       children: count > 0 ? `${count.toLocaleString("ko-KR")}${unit} \uC120\uD0DD\uB428` : emptyHint
     }
   );
-  const summarySlot = summary !== void 0 && summary !== null ? /* @__PURE__ */ jsx38(
+  const summarySlot = summary !== void 0 && summary !== null ? /* @__PURE__ */ jsx39(
     "span",
     {
       ref: setSummaryElement,
@@ -7716,7 +8101,7 @@ function BulkActionBar({
       children: compact ? compactSummary : summary
     }
   ) : null;
-  const actionGroup = /* @__PURE__ */ jsx38(
+  const actionGroup = /* @__PURE__ */ jsx39(
     "div",
     {
       "data-slot": "bulk-action-bar-actions",
@@ -7728,11 +8113,11 @@ function BulkActionBar({
         justifyContent: "flex-end",
         gap: 2
       },
-      children: actions.map((action) => /* @__PURE__ */ jsx38(ActionButton, { action }, action.key))
+      children: actions.map((action) => /* @__PURE__ */ jsx39(ActionButton, { action }, action.key))
     }
   );
   if (inline) {
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(
       "div",
       {
         role: "toolbar",
@@ -7743,7 +8128,7 @@ function BulkActionBar({
         style: { ...inlineStyle, ...style },
         ...props,
         children: [
-          /* @__PURE__ */ jsxs34(
+          /* @__PURE__ */ jsxs35(
             "div",
             {
               role: "status",
@@ -7761,7 +8146,7 @@ function BulkActionBar({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs34(
+          /* @__PURE__ */ jsxs35(
             "div",
             {
               "data-slot": "bulk-action-bar-controls",
@@ -7772,10 +8157,10 @@ function BulkActionBar({
                 gap: "var(--space-1)"
               },
               children: [
-                count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx38(Divider, {}) : null,
+                count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx39(Divider, {}) : null,
                 actionGroup,
-                /* @__PURE__ */ jsx38(Divider, {}),
-                /* @__PURE__ */ jsx38(ClearButton, { onClear })
+                /* @__PURE__ */ jsx39(Divider, {}),
+                /* @__PURE__ */ jsx39(ClearButton, { onClear })
               ]
             }
           ),
@@ -7784,7 +8169,7 @@ function BulkActionBar({
       }
     );
   }
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       role: "toolbar",
@@ -7799,7 +8184,7 @@ function BulkActionBar({
       style: { ...floatingStyle, ...style },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs34(
+        /* @__PURE__ */ jsxs35(
           "div",
           {
             role: "status",
@@ -7816,10 +8201,10 @@ function BulkActionBar({
             ]
           }
         ),
-        count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx38(Divider, {}) : null,
+        count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx39(Divider, {}) : null,
         actionGroup,
-        /* @__PURE__ */ jsx38(Divider, {}),
-        /* @__PURE__ */ jsx38(ClearButton, { onClear }),
+        /* @__PURE__ */ jsx39(Divider, {}),
+        /* @__PURE__ */ jsx39(ClearButton, { onClear }),
         trailingSlot
       ]
     }
@@ -7827,7 +8212,7 @@ function BulkActionBar({
 }
 
 // src/components/ui/confirm-dialog.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function ConfirmDialog({
   open,
   onOpenChange,
@@ -7842,7 +8227,7 @@ function ConfirmDialog({
   confirmDisabled,
   scrim
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     AlertDialog,
     {
       open,
@@ -7863,14 +8248,14 @@ function ConfirmDialog({
 
 // src/components/ui/separator.tsx
 import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Separator2({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     SeparatorPrimitive.Root,
     {
       "data-slot": "separator",
@@ -7887,13 +8272,13 @@ function Separator2({
 
 // src/components/ui/avatar.tsx
 import { Avatar as AvatarPrimitive } from "radix-ui";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function Avatar({
   className,
   size = "md",
   ...props
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     AvatarPrimitive.Root,
     {
       "data-slot": "avatar",
@@ -7914,7 +8299,7 @@ function AvatarImage({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     AvatarPrimitive.Image,
     {
       "data-slot": "avatar-image",
@@ -7939,7 +8324,7 @@ function AvatarFallback({
   ...props
 }) {
   const fallbackText = children ?? (name ? getAvatarFallbackText(name) : null);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     AvatarPrimitive.Fallback,
     {
       "data-slot": "avatar-fallback",
@@ -7958,7 +8343,7 @@ function AvatarFallback({
 
 // src/components/ui/sheet-drawer.tsx
 import { Maximize2Icon, Minimize2Icon } from "lucide-react";
-import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
 var expandButtonClassName = cn(
   "inline-flex cursor-pointer items-center justify-center gap-[var(--space-1)]",
   "rounded-[var(--radius-md)] text-text-tertiary transition-colors",
@@ -7993,7 +8378,7 @@ function SheetDrawer({
   const showExpandAction = Boolean(hasExpandedToggle || expandHref || onExpand);
   const resolvedExpandLabel = hasExpandedToggle && expanded ? collapseLabel : expandLabel;
   const ExpandActionIcon = hasExpandedToggle && expanded ? Minimize2Icon : Maximize2Icon;
-  const expandAction = showExpandAction ? hasExpandedToggle ? /* @__PURE__ */ jsxs35(
+  const expandAction = showExpandAction ? hasExpandedToggle ? /* @__PURE__ */ jsxs36(
     "button",
     {
       type: "button",
@@ -8004,14 +8389,14 @@ function SheetDrawer({
       className: expandButtonClassName,
       onClick: () => onExpandedChange(!expanded),
       children: [
-        /* @__PURE__ */ jsx42(ExpandActionIcon, { className: "size-[16px]" }),
-        /* @__PURE__ */ jsx42("span", { className: "hidden text-sm font-medium leading-normal lg:inline", children: resolvedExpandLabel })
+        /* @__PURE__ */ jsx43(ExpandActionIcon, { className: "size-[16px]" }),
+        /* @__PURE__ */ jsx43("span", { className: "hidden text-sm font-medium leading-normal lg:inline", children: resolvedExpandLabel })
       ]
     }
-  ) : expandHref ? /* @__PURE__ */ jsxs35("a", { href: expandHref, "aria-label": expandLabel, "data-slot": "sheet-drawer-expand", className: expandButtonClassName, children: [
-    /* @__PURE__ */ jsx42(ExpandActionIcon, { className: "size-[16px]" }),
-    /* @__PURE__ */ jsx42("span", { className: "hidden text-sm font-medium leading-normal lg:inline", children: expandLabel })
-  ] }) : /* @__PURE__ */ jsxs35(
+  ) : expandHref ? /* @__PURE__ */ jsxs36("a", { href: expandHref, "aria-label": expandLabel, "data-slot": "sheet-drawer-expand", className: expandButtonClassName, children: [
+    /* @__PURE__ */ jsx43(ExpandActionIcon, { className: "size-[16px]" }),
+    /* @__PURE__ */ jsx43("span", { className: "hidden text-sm font-medium leading-normal lg:inline", children: expandLabel })
+  ] }) : /* @__PURE__ */ jsxs36(
     "button",
     {
       type: "button",
@@ -8020,12 +8405,12 @@ function SheetDrawer({
       className: expandButtonClassName,
       onClick: onExpand,
       children: [
-        /* @__PURE__ */ jsx42(ExpandActionIcon, { className: "size-[16px]" }),
-        /* @__PURE__ */ jsx42("span", { className: "hidden text-sm font-medium leading-normal lg:inline", children: expandLabel })
+        /* @__PURE__ */ jsx43(ExpandActionIcon, { className: "size-[16px]" }),
+        /* @__PURE__ */ jsx43("span", { className: "hidden text-sm font-medium leading-normal lg:inline", children: expandLabel })
       ]
     }
   ) : void 0;
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     Sheet,
     {
       open,
@@ -8043,210 +8428,6 @@ function SheetDrawer({
   );
 }
 
-// src/components/ui/action-menu.tsx
-import * as React34 from "react";
-import { Dialog as DialogPrimitive4, Slot as Slot3 } from "radix-ui";
-import { Fragment as Fragment14, jsx as jsx43, jsxs as jsxs36 } 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"
-);
-var sheetRowDescriptionClassName = "block text-[12px] font-normal text-text-secondary group-disabled:text-text-disabled";
-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({
-  open,
-  onOpenChange,
-  title,
-  description,
-  closeLabel,
-  groups,
-  onOpenAutoFocus,
-  onCloseAutoFocus
-}) {
-  const pendingRef = React34.useRef(null);
-  const surfaceRef = React34.useRef(null);
-  const labelId = React34.useId();
-  const handleOpenChange = (nextOpen) => {
-    pendingRef.current = null;
-    onOpenChange(nextOpen);
-  };
-  const swipe = useSwipeDismiss({
-    enabled: OVERLAY_POLICY.menu.swipe,
-    onDismiss: () => handleOpenChange(false),
-    surfaceRef,
-    always: true
-  });
-  const handleSelect = (item) => {
-    onOpenChange(false);
-    pendingRef.current = item;
-  };
-  const handleOpenAutoFocus = (event) => {
-    onOpenAutoFocus?.(event);
-    const firstRow = surfaceRef.current?.querySelector('[data-slot="action-menu-item"]:enabled');
-    if (!firstRow) return;
-    event.preventDefault();
-    firstRow.focus();
-  };
-  const handleCloseAutoFocus = (event) => {
-    onCloseAutoFocus(event);
-    const item = pendingRef.current;
-    pendingRef.current = null;
-    item?.onSelect();
-  };
-  return /* @__PURE__ */ jsx43(DialogPrimitive4.Root, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs36(DialogPrimitive4.Portal, { children: [
-    /* @__PURE__ */ jsx43(OverlayScrimLayer, { kind: "menu" }),
-    /* @__PURE__ */ jsxs36(
-      DialogPrimitive4.Content,
-      {
-        ref: surfaceRef,
-        "data-slot": "action-menu-sheet",
-        className: overlayBoxClassName("menu"),
-        onOpenAutoFocus: handleOpenAutoFocus,
-        onCloseAutoFocus: handleCloseAutoFocus,
-        ...description ? {} : { "aria-describedby": void 0 },
-        children: [
-          /* @__PURE__ */ jsx43(OverlayGrabber, { always: true, ...swipe.handleProps }),
-          /* @__PURE__ */ jsx43(
-            OverlayHeader,
-            {
-              kind: "menu",
-              title,
-              description,
-              closeLabel,
-              dragHandleProps: swipe.handleProps
-            }
-          ),
-          /* @__PURE__ */ jsx43(OverlayBody, { kind: "menu", children: groups.map((group, index) => /* @__PURE__ */ jsxs36(React34.Fragment, { children: [
-            index > 0 ? /* @__PURE__ */ jsx43("div", { role: "separator", className: sheetGroupSeparatorClassName }) : null,
-            /* @__PURE__ */ jsxs36("div", { role: "group", "aria-labelledby": group.label ? `${labelId}-${index}` : void 0, children: [
-              group.label ? /* @__PURE__ */ jsx43("div", { id: `${labelId}-${index}`, className: sheetGroupLabelClassName, children: group.label }) : null,
-              group.items.map((item) => {
-                const Icon = item.icon;
-                return /* @__PURE__ */ jsxs36(
-                  "button",
-                  {
-                    type: "button",
-                    "data-slot": "action-menu-item",
-                    "data-destructive": item.destructive ? "" : void 0,
-                    className: sheetRowClassName,
-                    disabled: item.disabled,
-                    onClick: () => handleSelect(item),
-                    children: [
-                      Icon ? /* @__PURE__ */ jsx43(Icon, { "aria-hidden": true, size: 17, strokeWidth: 1.75, className: "shrink-0" }) : null,
-                      /* @__PURE__ */ jsxs36("span", { className: "min-w-0 flex-1 break-keep", children: [
-                        item.label,
-                        item.description ? /* @__PURE__ */ jsx43("span", { className: sheetRowDescriptionClassName, children: item.description }) : null
-                      ] })
-                    ]
-                  },
-                  item.id
-                );
-              })
-            ] })
-          ] }, group.id)) })
-        ]
-      }
-    )
-  ] }) });
-}
-var readPresentation = () => window.matchMedia?.(OVERLAY_DESKTOP_QUERY).matches ?? true ? "dropdown" : "sheet";
-var subscribeNothing = () => () => void 0;
-var useHydrated = () => React34.useSyncExternalStore(
-  subscribeNothing,
-  () => true,
-  () => false
-);
-function ActionMenu({
-  trigger,
-  title,
-  description,
-  open: openProp,
-  onOpenChange,
-  closeLabel,
-  items,
-  groups
-}) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React34.useState(false);
-  const hydrated = useHydrated();
-  const open = (openProp ?? uncontrolledOpen) && hydrated;
-  const [shown, setShown] = React34.useState({
-    open: false,
-    presentation: "dropdown"
-  });
-  let presentation = shown.presentation;
-  if (shown.open !== open) {
-    if (open) presentation = readPresentation();
-    setShown({ open, presentation });
-  }
-  const triggerRef = React34.useRef(null);
-  const pendingRef = React34.useRef(null);
-  const setOpen = (nextOpen) => {
-    if (nextOpen) pendingRef.current = null;
-    if (openProp === void 0) setUncontrolledOpen(nextOpen);
-    onOpenChange?.(nextOpen);
-  };
-  const menuGroups = groups ?? [{ id: "items", items: items ?? [] }];
-  const handleDropdownCloseAutoFocus = (event) => {
-    const item = pendingRef.current;
-    pendingRef.current = null;
-    if (!item) return;
-    event.preventDefault();
-    triggerRef.current?.focus();
-    item.onSelect();
-  };
-  const handleSheetCloseAutoFocus = (event) => {
-    event.preventDefault();
-    triggerRef.current?.focus();
-  };
-  const triggerLabel = trigger.props["aria-label"];
-  return /* @__PURE__ */ jsxs36(Fragment14, { children: [
-    /* @__PURE__ */ jsxs36(DropdownMenu, { open: open && presentation === "dropdown", onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx43(DropdownMenuTrigger, { asChild: true, "aria-expanded": open, children: /* @__PURE__ */ jsx43(Slot3.Root, { ref: triggerRef, children: trigger }) }),
-      /* @__PURE__ */ jsx43(DropdownMenuContent, { align: "end", onCloseAutoFocus: handleDropdownCloseAutoFocus, children: menuGroups.map((group, index) => /* @__PURE__ */ jsxs36(React34.Fragment, { children: [
-        index > 0 ? /* @__PURE__ */ jsx43(DropdownMenuSeparator, {}) : null,
-        /* @__PURE__ */ jsxs36(DropdownMenuGroup, { children: [
-          group.label ? /* @__PURE__ */ jsx43(DropdownMenuLabel, { children: group.label }) : null,
-          group.items.map((item) => {
-            const Icon = item.icon;
-            return /* @__PURE__ */ jsxs36(
-              DropdownMenuItem,
-              {
-                variant: item.destructive ? "destructive" : "default",
-                disabled: item.disabled,
-                onSelect: () => {
-                  pendingRef.current = item;
-                },
-                children: [
-                  Icon ? /* @__PURE__ */ jsx43(Icon, { "aria-hidden": true, size: 16, strokeWidth: 1.75 }) : null,
-                  item.label
-                ]
-              },
-              item.id
-            );
-          })
-        ] })
-      ] }, group.id)) })
-    ] }),
-    /* @__PURE__ */ jsx43(
-      ActionMenuSheet,
-      {
-        open: open && presentation === "sheet",
-        onOpenChange: setOpen,
-        title: title ?? /* @__PURE__ */ jsx43("span", { className: "sr-only", children: triggerLabel }),
-        description,
-        closeLabel,
-        groups: menuGroups,
-        onCloseAutoFocus: handleSheetCloseAutoFocus
-      }
-    )
-  ] });
-}
-
 // src/components/ui/action-sheet.tsx
 import { jsx as jsx44 } from "react/jsx-runtime";
 function ActionSheet({
@@ -8277,7 +8458,7 @@ function ActionSheet({
 import * as React35 from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var TONE = {
-  neutral: "bg-[var(--semantic-neutral-bg)] text-[var(--semantic-neutral-fg)]",
+  neutral: "bg-[var(--fill-on-bg,var(--semantic-neutral-bg))] text-[var(--semantic-neutral-fg)]",
   info: "bg-[var(--semantic-info-bg)] text-[var(--semantic-info-fg)]",
   success: "bg-[var(--semantic-success-bg)] text-[var(--semantic-success-fg)]",
   warning: "bg-[var(--semantic-warning-bg)] text-[var(--semantic-warning-fg)]",
@@ -8315,7 +8496,8 @@ var FG = {
   error: "var(--semantic-error-fg)"
 };
 var BG = {
-  neutral: "var(--bg-inset)",
+  // takes --fill-on-bg when an inset background sets it (see surface.ts)
+  neutral: "var(--fill-on-bg, var(--bg-inset))",
   info: "var(--semantic-info-bg)",
   success: "var(--semantic-success-bg)",
   warning: "var(--semantic-warning-bg)",
@@ -8384,7 +8566,7 @@ var TwoTierBadge = React36.forwardRef(
               style: {
                 borderLeft: `1px solid ${divider}`,
                 color: "var(--text-tertiary)",
-                background: strong ? "var(--bg-inset)" : "transparent"
+                background: strong ? BG.neutral : "transparent"
               },
               children: secondary
             }
@@ -8458,9 +8640,9 @@ StatusDot.displayName = "StatusDot";
 
 // src/components/ui/notification-badge.tsx
 import * as React39 from "react";
-import { cva as cva13 } from "class-variance-authority";
+import { cva as cva14 } from "class-variance-authority";
 import { jsx as jsx49 } from "react/jsx-runtime";
-var notificationBadgeVariants = cva13(
+var notificationBadgeVariants = cva14(
   [
     "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)]",
     "bg-[var(--semantic-error,var(--error))] text-[var(--error-contrast)]",
@@ -8524,9 +8706,9 @@ NotificationBadge.displayName = "NotificationBadge";
 
 // src/components/ui/empty-state.tsx
 import * as React40 from "react";
-import { cva as cva14 } from "class-variance-authority";
+import { cva as cva15 } from "class-variance-authority";
 import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
-var emptyStateBaseVariants = cva14(
+var emptyStateBaseVariants = cva15(
   [
     "flex flex-col items-center justify-center text-center",
     "text-foreground"
@@ -8539,16 +8721,82 @@ var emptyStateBaseVariants = cva14(
         lg: "gap-[var(--space-4)] px-[var(--space-8)] py-[var(--space-12)]"
       },
       bordered: {
-        true: "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
+        true: "mx-auto w-full max-w-[560px] rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
         false: ""
       }
     },
+    compoundVariants: [{ bordered: true, size: "md", className: "min-h-60" }],
     defaultVariants: {
       size: "md",
       bordered: false
     }
   }
 );
+var PAGE_FILL_QUERY = "(min-width: 768px)";
+var useIsomorphicLayoutEffect3 = typeof window === "undefined" ? React40.useEffect : React40.useLayoutEffect;
+function findScrollParent(node) {
+  for (let el = node.parentElement; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+    const { overflowY } = getComputedStyle(el);
+    if (overflowY === "auto" || overflowY === "scroll") return el;
+  }
+  return null;
+}
+function freeHeight(area) {
+  const rect = area.getBoundingClientRect();
+  const style = getComputedStyle(area);
+  const start = area === document.documentElement ? rect.top : rect.top + area.clientTop - area.scrollTop;
+  let end = start + parseFloat(style.paddingTop);
+  for (const child of Array.from(area.children)) {
+    const childStyle = getComputedStyle(child);
+    if (childStyle.display === "none" || childStyle.position === "absolute" || childStyle.position === "fixed") continue;
+    end = Math.max(end, child.getBoundingClientRect().bottom + parseFloat(childStyle.marginBottom));
+  }
+  return area.clientHeight - (end - start + parseFloat(style.paddingBottom));
+}
+function usePageFill(ref, enabled) {
+  useIsomorphicLayoutEffect3(() => {
+    const node = ref.current;
+    if (!enabled || !node) return;
+    const scroller = findScrollParent(node);
+    const parent = node.parentElement;
+    const media = typeof window.matchMedia === "function" ? window.matchMedia(PAGE_FILL_QUERY) : null;
+    let observer = null;
+    let frame = 0;
+    const fit = () => {
+      const previous = node.style.minHeight;
+      let next = "";
+      if (media?.matches ?? true) {
+        node.style.minHeight = "";
+        const free = freeHeight(scroller ?? document.scrollingElement ?? document.documentElement);
+        if (free > 0) next = `${Math.floor(node.getBoundingClientRect().height + free)}px`;
+      }
+      node.style.minHeight = next;
+      if (next !== previous && observer && parent && !frame) {
+        observer.unobserve(parent);
+        frame = requestAnimationFrame(() => {
+          frame = 0;
+          observer?.observe(parent);
+        });
+      }
+    };
+    fit();
+    if (typeof ResizeObserver === "function") {
+      observer = new ResizeObserver(fit);
+      if (scroller) observer.observe(scroller);
+      if (parent) observer.observe(parent);
+    }
+    if (!scroller) window.addEventListener("resize", fit);
+    media?.addEventListener?.("change", fit);
+    return () => {
+      observer?.disconnect();
+      observer = null;
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", fit);
+      media?.removeEventListener?.("change", fit);
+      node.style.minHeight = "";
+    };
+  }, [enabled]);
+}
 function getEmptyStateToneSurface(tone) {
   switch (tone) {
     case "muted":
@@ -8574,7 +8822,7 @@ function emptyStateVariants({
     className
   );
 }
-var emptyStateIconVariants = cva14(
+var emptyStateIconVariants = cva15(
   [
     "inline-flex items-center justify-center rounded-[var(--radius-full)]",
     "border border-[var(--border-subtle)] bg-[var(--bg-inset)] text-text-tertiary"
@@ -8592,7 +8840,7 @@ var emptyStateIconVariants = cva14(
     }
   }
 );
-var iconSize3 = {
+var iconSize2 = {
   sm: 18,
   md: 20,
   lg: 24
@@ -8609,10 +8857,13 @@ var EmptyState = React40.forwardRef(
     hint,
     action,
     bordered = false,
+    layout = "inline",
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
-    return /* @__PURE__ */ jsxs39(
+    const pageRef = React40.useRef(null);
+    usePageFill(pageRef, layout === "page");
+    const box = /* @__PURE__ */ jsxs39(
       "div",
       {
         ref,
@@ -8627,7 +8878,7 @@ var EmptyState = React40.forwardRef(
               "aria-hidden": "true",
               "data-slot": "empty-state-icon",
               className: emptyStateIconVariants({ size: resolvedSize }),
-              children: /* @__PURE__ */ jsx50(Icon, { size: iconSize3[resolvedSize], strokeWidth: 1.75 })
+              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: [
@@ -8660,6 +8911,17 @@ var EmptyState = React40.forwardRef(
         ]
       }
     );
+    if (layout !== "page") return box;
+    return /* @__PURE__ */ jsx50(
+      "div",
+      {
+        ref: pageRef,
+        "data-slot": "empty-state-page",
+        "data-layout": "page",
+        className: "flex w-full flex-col justify-start pt-[var(--space-12)] md:justify-center md:pt-0",
+        children: box
+      }
+    );
   }
 );
 EmptyState.displayName = "EmptyState";
@@ -8667,9 +8929,9 @@ EmptyState.displayName = "EmptyState";
 // src/components/ui/error-state.tsx
 import * as React41 from "react";
 import { AlertTriangle } from "lucide-react";
-import { cva as cva15 } from "class-variance-authority";
+import { cva as cva16 } from "class-variance-authority";
 import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
-var errorStateVariants = cva15(
+var errorStateVariants = cva16(
   [
     "flex flex-col items-center justify-center text-center",
     "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -8745,7 +9007,7 @@ var ErrorState = React41.forwardRef(
             }
           ) : null
         ] }),
-        onRetry ? /* @__PURE__ */ jsx51(Button, { size: "sm", variant: "secondary", onClick: onRetry, children: retryLabel }) : null
+        onRetry ? /* @__PURE__ */ jsx51(Button, { size: "sm", appearance: "outline", tone: "neutral", onClick: onRetry, children: retryLabel }) : null
       ]
     }
   )
@@ -8754,9 +9016,9 @@ ErrorState.displayName = "ErrorState";
 
 // src/components/ui/skeleton.tsx
 import * as React42 from "react";
-import { cva as cva16 } from "class-variance-authority";
+import { cva as cva17 } from "class-variance-authority";
 import { jsx as jsx52 } from "react/jsx-runtime";
-var skeletonVariants = cva16(
+var skeletonVariants = cva17(
   [
     // bg-inset: light #F1F2F4 reads on white surfaces (bg-raised was white = invisible);
     // dark value equals the old bg-raised (#16181D), so dark mode is unchanged.
@@ -8776,7 +9038,7 @@ var skeletonVariants = cva16(
     }
   }
 );
-var spinnerVariants = cva16(
+var spinnerVariants = cva17(
   [
     "inline-block shrink-0 animate-spin rounded-[var(--radius-full)] border-2",
     "border-[var(--border-subtle)] border-t-[var(--primary)]",
@@ -8907,8 +9169,8 @@ Spinner.displayName = "Spinner";
 
 // src/components/ui/pagination.tsx
 import * as React43 from "react";
-import { ChevronsLeft, ChevronLeft, ChevronRight as ChevronRight3, ChevronsRight } from "lucide-react";
-import { cva as cva17 } from "class-variance-authority";
+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";
@@ -8963,7 +9225,7 @@ function PageSizeSelect({
 
 // src/components/ui/pagination.tsx
 import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
-var paginationVariants = cva17(
+var paginationVariants = cva18(
   [
     "flex w-full flex-col gap-[var(--space-3)]",
     "text-sm text-text-secondary",
@@ -8981,7 +9243,7 @@ var paginationVariants = cva17(
     }
   }
 );
-var paginationControlVariants = cva17(
+var paginationControlVariants = cva18(
   [
     "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-md)] border",
     "border-transparent bg-transparent font-medium text-text-secondary",
@@ -9158,7 +9420,7 @@ var Pagination = React43.forwardRef(
                     page: Math.min(pageCount, currentPage + 1),
                     disabled: isLastPage,
                     size: resolvedSize,
-                    icon: ChevronRight3,
+                    icon: ChevronRight4,
                     onPageChange
                   }
                 ),
@@ -9184,15 +9446,16 @@ var Pagination = React43.forwardRef(
 Pagination.displayName = "Pagination";
 
 // src/components/ui/mode-toggle.tsx
-import { cva as cva18 } from "class-variance-authority";
+import { cva as cva19 } from "class-variance-authority";
 import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
-var modeToggleVariants = cva18(
+var modeToggleVariants = cva19(
   [
     "inline-flex items-center rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
-    "bg-[var(--bg-inset)] p-[2px]"
+    "bg-[var(--bg-inset)] p-[2px]",
+    insetMarkerContext
   ].join(" ")
 );
-var modeToggleItemVariants = cva18(
+var modeToggleItemVariants = cva19(
   [
     "inline-flex min-h-[28px] cursor-pointer items-center justify-center gap-[var(--space-1)]",
     "rounded-[calc(var(--radius-md)_-_2px)] px-[var(--space-3)] py-[var(--space-1)]",
@@ -9254,9 +9517,9 @@ function ModeToggle({
 
 // src/components/ui/action-footer.tsx
 import * as React44 from "react";
-import { cva as cva19 } from "class-variance-authority";
+import { cva as cva20 } from "class-variance-authority";
 import { jsx as jsx56, jsxs as jsxs44 } from "react/jsx-runtime";
-var actionFooterVariants = cva19(
+var actionFooterVariants = cva20(
   [
     // Below sm: two fixed rows — destructive actions (start) and status (end) on top, the main
     // actions filling the bottom row. The top row is omitted when both are absent. From sm: one
@@ -9281,7 +9544,7 @@ var actionFooterVariants = cva19(
     }
   }
 );
-var actionFooterStatusVariants = cva19(
+var actionFooterStatusVariants = cva20(
   [
     "col-start-2 flex min-w-0 items-center justify-self-end gap-[var(--space-2)]",
     "sm:ml-auto",
@@ -9300,8 +9563,9 @@ var actionFooterStatusVariants = cva19(
     }
   }
 );
-var destructiveVariants = /* @__PURE__ */ new Set(["danger", "destructive", "emergency"]);
-var primaryVariants = /* @__PURE__ */ new Set(["default", "primary"]);
+var actionStyle = (action) => resolveActionStyle(action.appearance, action.tone, "filled");
+var isDestructive = (action) => actionStyle(action).tone === "danger";
+var isPrimary = (action) => actionStyle(action).tone === "primary";
 function canRenderAction(action, permissions) {
   if (!action.permission) {
     return true;
@@ -9313,8 +9577,8 @@ function canRenderAction(action, permissions) {
 }
 function sortMainActions(actions) {
   return [...actions].sort((first, second) => {
-    const firstRank = primaryVariants.has(first.variant ?? "default") ? 1 : 0;
-    const secondRank = primaryVariants.has(second.variant ?? "default") ? 1 : 0;
+    const firstRank = isPrimary(first) ? 1 : 0;
+    const secondRank = isPrimary(second) ? 1 : 0;
     return firstRank - secondRank;
   });
 }
@@ -9330,20 +9594,28 @@ function getStatusLabel(status) {
   }
 }
 function renderAction(action, className) {
-  return /* @__PURE__ */ jsx56(
-    Button,
-    {
-      variant: action.variant,
-      size: "lg",
-      className: cn(footerButtonHitAreaClassName, className),
-      disabled: action.disabled,
-      loading: action.loading,
-      leadingIcon: action.leadingIcon,
-      onClick: action.onClick,
-      children: action.label
-    },
-    action.id ?? action.label
-  );
+  const key = action.id ?? action.label;
+  const common = {
+    className: cn(footerButtonHitAreaClassName, className),
+    disabled: action.disabled,
+    onClick: action.onClick
+  };
+  const style = actionStyle(action);
+  if (action.leadingIcon) {
+    return /* @__PURE__ */ jsx56(
+      IconButton,
+      {
+        ...common,
+        ...style,
+        size: "lg",
+        icon: action.leadingIcon,
+        label: action.label,
+        loading: action.loading
+      },
+      key
+    );
+  }
+  return /* @__PURE__ */ jsx56(Button, { ...common, ...style, size: "lg", loading: action.loading, children: action.label }, key);
 }
 var ActionFooter = React44.forwardRef(
   ({
@@ -9356,12 +9628,8 @@ var ActionFooter = React44.forwardRef(
     ...props
   }, ref) => {
     const visibleActions = actions.filter((action) => canRenderAction(action, permissions));
-    const destructiveActions = visibleActions.filter(
-      (action) => destructiveVariants.has(action.variant ?? "default")
-    );
-    const mainActions = sortMainActions(
-      visibleActions.filter((action) => !destructiveVariants.has(action.variant ?? "default"))
-    );
+    const destructiveActions = visibleActions.filter(isDestructive);
+    const mainActions = sortMainActions(visibleActions.filter((action) => !isDestructive(action)));
     return /* @__PURE__ */ jsxs44(
       "div",
       {
@@ -9420,7 +9688,7 @@ ActionFooter.displayName = "ActionFooter";
 
 // src/components/ui/toast.tsx
 import * as React45 from "react";
-import { cva as cva20 } from "class-variance-authority";
+import { cva as cva21 } from "class-variance-authority";
 import { jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
 var DOT3 = {
   default: "var(--neutral)",
@@ -9429,7 +9697,7 @@ var DOT3 = {
   info: "var(--info)",
   error: "var(--error)"
 };
-var toastVariants = cva20(
+var toastVariants = cva21(
   [
     "flex min-w-[280px] max-w-[420px] items-center",
     "gap-[11px] rounded-[10px] border border-[var(--border)]",
@@ -9451,7 +9719,7 @@ var toastVariants = cva20(
     defaultVariants: { variant: "default" }
   }
 );
-var toastViewportVariants = cva20(
+var toastViewportVariants = cva21(
   [
     "fixed bottom-[var(--space-6)] 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)]",
@@ -9629,7 +9897,8 @@ var ToastRoot = React45.forwardRef(
               {
                 "data-slot": "toast-action",
                 size: "xs",
-                variant: "secondary",
+                appearance: "outline",
+                tone: "neutral",
                 onClick: action.onClick,
                 children: action.label
               }
@@ -9682,10 +9951,10 @@ function ToastProvider({ children, maxToasts = 3, className, ...props }) {
 
 // src/components/ui/otp-field.tsx
 import * as React46 from "react";
-import { cva as cva21 } from "class-variance-authority";
+import { cva as cva22 } from "class-variance-authority";
 import { AlertCircle as AlertCircle4 } from "lucide-react";
-import { Fragment as Fragment15, jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
-var otpFieldVariants = cva21("flex w-full min-w-0 flex-col gap-[var(--space-3)]", {
+import { Fragment as Fragment16, jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
+var otpFieldVariants = cva22("flex w-full min-w-0 flex-col gap-[var(--space-3)]", {
   variants: {
     size: {
       default: "",
@@ -9696,7 +9965,7 @@ var otpFieldVariants = cva21("flex w-full min-w-0 flex-col gap-[var(--space-3)]"
     size: "default"
   }
 });
-var otpFieldGroupVariants = cva21("flex items-start gap-[var(--space-2)] pt-[var(--space-1)]", {
+var otpFieldGroupVariants = cva22("flex items-start gap-[var(--space-2)] pt-[var(--space-1)]", {
   variants: {
     size: {
       default: "",
@@ -9712,7 +9981,7 @@ var otpFieldGroupVariants = cva21("flex items-start gap-[var(--space-2)] pt-[var
     fluid: false
   }
 });
-var otpCellVariants = cva21(
+var otpCellVariants = cva22(
   [
     "flex items-center justify-center rounded-[var(--radius-md)] border",
     "border-[var(--border)] text-foreground",
@@ -9767,7 +10036,7 @@ var otpCellVariants = cva21(
     }
   }
 );
-var otpFieldMessageVariants = cva21("flex items-start gap-[var(--space-1)] text-xs leading-snug", {
+var otpFieldMessageVariants = cva22("flex items-start gap-[var(--space-1)] text-xs leading-snug", {
   variants: {
     state: {
       default: "text-text-tertiary",
@@ -10006,7 +10275,7 @@ var OTPField = React46.forwardRef(
               "data-slot": "otp-field-message",
               "data-kind": errorText ? "error" : "helper",
               className: otpFieldMessageVariants({ state: resolvedState }),
-              children: errorText ? /* @__PURE__ */ jsxs46(Fragment15, { children: [
+              children: errorText ? /* @__PURE__ */ jsxs46(Fragment16, { children: [
                 /* @__PURE__ */ jsx58(
                   AlertCircle4,
                   {
@@ -10042,9 +10311,9 @@ OTPField.displayName = "OTPField";
 // src/components/ui/search-field.tsx
 import * as React47 from "react";
 import { Search, X as X4 } from "lucide-react";
-import { cva as cva22 } from "class-variance-authority";
+import { cva as cva23 } from "class-variance-authority";
 import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
-var searchFieldVariants = cva22("relative flex w-full items-center", {
+var searchFieldVariants = cva23("relative flex w-full items-center", {
   variants: {
     size: {
       // Field-control scale follows Select: sm/md/lg = 30/32/36px. Pair with Button sm/md/lg.
@@ -10057,7 +10326,7 @@ var searchFieldVariants = cva22("relative flex w-full items-center", {
     size: "md"
   }
 });
-var searchFieldInputVariants = cva22(
+var searchFieldInputVariants = cva23(
   [
     "h-full w-full rounded-[var(--radius-md)] border",
     "border-[var(--border)]",
@@ -10100,7 +10369,7 @@ var searchFieldInputVariants = cva22(
     }
   }
 );
-var iconSize4 = {
+var iconSize3 = {
   sm: 14,
   md: 16,
   lg: 18
@@ -10155,7 +10424,7 @@ var SearchField = React47.forwardRef(
               "aria-hidden": "true",
               "data-slot": "search-field-icon",
               className: "pointer-events-none absolute left-[10px] top-1/2 -translate-y-1/2 text-text-tertiary",
-              size: iconSize4[resolvedSize],
+              size: iconSize3[resolvedSize],
               strokeWidth: resolvedSize === "sm" ? 2 : 1.75
             }
           ),
@@ -10200,9 +10469,9 @@ SearchField.displayName = "SearchField";
 
 // src/components/ui/checkbox-group.tsx
 import * as React48 from "react";
-import { cva as cva23 } from "class-variance-authority";
+import { cva as cva24 } from "class-variance-authority";
 import { jsx as jsx60 } from "react/jsx-runtime";
-var checkboxGroupVariants = cva23("gap-[var(--space-2)]", {
+var checkboxGroupVariants = cva24("gap-[var(--space-2)]", {
   variants: {
     appearance: {
       plain: "flex",
@@ -10302,11 +10571,11 @@ CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/ui/radio-group.tsx
 import * as React49 from "react";
-import { cva as cva24 } from "class-variance-authority";
+import { cva as cva25 } from "class-variance-authority";
 import { Circle } from "lucide-react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import { jsx as jsx61, jsxs as jsxs48 } from "react/jsx-runtime";
-var radioGroupVariants = cva24("gap-[var(--space-2)]", {
+var radioGroupVariants = cva25("gap-[var(--space-2)]", {
   variants: {
     appearance: {
       plain: "flex",
@@ -10331,7 +10600,7 @@ var radioGroupVariants = cva24("gap-[var(--space-2)]", {
     columns: "one"
   }
 });
-var radioVariants = cva24(
+var radioVariants = cva25(
   [
     "group w-full cursor-pointer text-left transition-colors motion-reduce:transition-none",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
@@ -10373,7 +10642,7 @@ var radioVariants = cva24(
     }
   }
 );
-var radioControlVariants = cva24(
+var radioControlVariants = cva25(
   [
     "flex size-[calc(var(--space-4)+var(--space-1))] shrink-0 items-center justify-center",
     "rounded-[var(--radius-full)] border border-[var(--border-strong)] bg-[var(--bg-surface)] text-transparent",
@@ -10607,13 +10876,13 @@ function Progress({
 
 // src/components/ui/tree-view.tsx
 import * as React50 from "react";
-import { ChevronRight as ChevronRight4 } from "lucide-react";
-import { cva as cva25 } from "class-variance-authority";
+import { ChevronRight as ChevronRight5 } from "lucide-react";
+import { cva as cva26 } from "class-variance-authority";
 import { jsx as jsx64, jsxs as jsxs50 } from "react/jsx-runtime";
-var treeViewVariants = cva25(
+var treeViewVariants = cva26(
   "m-0 list-none p-[var(--space-1)] text-body-sm text-foreground"
 );
-var treeItemRowVariants = cva25(
+var treeItemRowVariants = cva26(
   [
     "flex min-h-[32px] w-full cursor-pointer select-none items-center gap-[var(--space-2)]",
     "rounded-[var(--radius-sm)] py-[var(--space-2)] pr-[var(--space-3)]",
@@ -10824,7 +11093,7 @@ function TreeView({
                       },
                       className: "flex size-[var(--space-4)] shrink-0 items-center justify-center text-text-tertiary",
                       children: /* @__PURE__ */ jsx64(
-                        ChevronRight4,
+                        ChevronRight5,
                         {
                           "aria-hidden": "true",
                           "data-slot": "treeitem-chevron",
@@ -10872,7 +11141,7 @@ function TreeView({
 
 // src/components/branding/olun-logo.tsx
 import { OLUN_MASTER, OLUN_SYMBOL, OLUN_WORDMARK } from "@olundot/tokens/brand";
-import { Fragment as Fragment16, jsx as jsx65, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx65, jsxs as jsxs51 } from "react/jsx-runtime";
 var ACCENT_FILL = "var(--accent-pop)";
 var INK = { color: "var(--text-primary)" };
 var INK_TIGHT = { ...INK, display: "block", overflow: "visible" };
@@ -10882,7 +11151,7 @@ function symbolGeometry(size) {
 function SymbolCircles({ size }) {
   const { ring } = OLUN_SYMBOL;
   const g = symbolGeometry(size);
-  return /* @__PURE__ */ jsxs51(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs51(Fragment17, { children: [
     /* @__PURE__ */ jsx65(
       "circle",
       {