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

package/dist/index.js

@@ -187,19 +187,38 @@ import { cva } from "class-variance-authority";
 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)]",
+  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",
   // Button `appearance="link"` only: the label color; the box and underline live in button.tsx.
@@ -440,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(
   [
@@ -657,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)]",
@@ -1915,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,
@@ -1925,6 +1944,8 @@ var Switch = React9.forwardRef(
     description,
     required,
     loading,
+    labelPlacement = "end",
+    fullWidth = false,
     disabled,
     id,
     ...props
@@ -1934,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";
@@ -2126,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
@@ -2173,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;
@@ -2181,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]);
@@ -2234,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"
@@ -2621,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"
@@ -2912,7 +2946,7 @@ var WizardLayout = React16.forwardRef(
                                               ) : null
                                             ]
                                           }
-                                        ) : /* @__PURE__ */ jsxs16(Fragment5, { children: [
+                                        ) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
                                           /* @__PURE__ */ jsx17(
                                             "span",
                                             {
@@ -2979,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: "",
@@ -2993,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: "",
@@ -3034,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",
@@ -3088,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)
@@ -3117,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) {
@@ -3188,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}`;
@@ -3246,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,
                         {
@@ -3302,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,
@@ -3355,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 })
         ] })
@@ -3437,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
@@ -3445,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
           ] })
@@ -3874,11 +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 pressedNeutralClassName = "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground";
-var iconButtonCva = cva9(
+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",
@@ -3932,7 +3971,7 @@ function iconButtonVariants(options) {
     ...resolveActionStyle(options?.appearance, options?.tone, "ghost")
   });
 }
-var iconButtonBadgeVariants = cva9(
+var iconButtonBadgeVariants = cva10(
   [
     "pointer-events-none absolute right-0 top-0 inline-flex",
     "olun-icon-button__badge",
@@ -4646,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);
 }
@@ -4740,7 +4779,7 @@ function StructuredDialog({
                 footerRow
               ]
             }
-          ) : /* @__PURE__ */ jsxs23(Fragment7, { children: [
+          ) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
             body,
             footerRow
           ] })
@@ -4941,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,
@@ -5005,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,
@@ -5080,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",
@@ -5105,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)]",
@@ -5137,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: {
@@ -5148,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)]",
@@ -5157,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",
@@ -5333,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",
@@ -5545,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",
@@ -5595,16 +5635,16 @@ FilterToolbar.displayName = "FilterToolbar";
 
 // src/components/ui/data-table.tsx
 import * as React33 from "react";
-import { ChevronDown as ChevronDown5, ChevronUp as ChevronUp2, ChevronsUpDown } from "lucide-react";
-import { cva as cva12 } from "class-variance-authority";
+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: {
@@ -5619,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",
@@ -5650,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)]",
@@ -5692,7 +5732,7 @@ var checkboxGroupItemVariants = cva11(
     }
   }
 );
-var checkboxGroupBoxVariants = cva11(
+var checkboxGroupBoxVariants = cva12(
   "mt-[2px]",
   {
     variants: {
@@ -6188,7 +6228,7 @@ import { ChevronRight as ChevronRight2, MoreVertical } from "lucide-react";
 // src/components/ui/action-menu.tsx
 import * as React31 from "react";
 import { Dialog as DialogPrimitive4, Slot as Slot3 } from "radix-ui";
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+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",
@@ -6346,7 +6386,7 @@ function ActionMenu({
     triggerRef.current?.focus();
   };
   const triggerLabel = trigger.props["aria-label"];
-  return /* @__PURE__ */ jsxs31(Fragment11, { children: [
+  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: [
@@ -6390,7 +6430,7 @@ function ActionMenu({
 }
 
 // src/components/ui/list-card.tsx
-import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+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 !== "");
 }
@@ -6477,7 +6517,7 @@ function ListCard({
       children: overlay && href != null ? React32.createElement(linkComponent ?? "a", { ...linkProps, href, className: overlayClassName }, title) : title
     }
   );
-  const content = /* @__PURE__ */ jsxs32(Fragment12, { children: [
+  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 ? (
@@ -6542,8 +6582,8 @@ function ListCard({
 }
 
 // src/components/ui/data-table.tsx
-import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs33 } 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"
@@ -6562,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",
@@ -6593,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) {
@@ -6665,7 +6705,7 @@ function MobileSortMenu({
         size: "sm",
         className: "ml-auto min-w-0",
         children: [
-          active && sortBy ? /* @__PURE__ */ jsxs33(Fragment13, { 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: [
@@ -6805,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) => {
@@ -6837,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__ */ jsxs33(
+  const opened = useOpenedOnce(expand?.expanded ?? false);
+  const dataRow = /* @__PURE__ */ jsxs33(
     "div",
     {
       "data-slot": "data-table-row",
@@ -6852,12 +6907,14 @@ 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__ */ jsx37("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx37(RowCheckbox, { row, rowId, columns, selected, onToggle }) }) : null,
@@ -6878,10 +6935,53 @@ function DataTableRowView({
             },
             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,
@@ -6896,6 +6996,7 @@ function DataTableMobileCardView({
   onToggle,
   onActivate,
   onRowContextMenu,
+  expand,
   getMobileCardContent,
   ariaPosInSet,
   ariaSetSize,
@@ -6904,12 +7005,27 @@ function DataTableMobileCardView({
   const linked = Boolean(LinkComponent && href);
   const content = getMobileCardContent(row);
   const navigable = linked || activatable;
+  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;
   let title = content.title;
-  if (linked && LinkComponent) {
+  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(
@@ -6923,7 +7039,7 @@ function DataTableMobileCardView({
       }
     );
   }
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       "data-slot": "data-table-mobile-card",
@@ -6941,20 +7057,42 @@ function DataTableMobileCardView({
         navigable ? rowLinkHostClass : null
       ),
       onContextMenu: (event) => onRowContextMenu?.(rowId, event),
-      children: /* @__PURE__ */ jsx37(
-        ListCard,
-        {
-          className: "px-[var(--space-4)] py-[var(--space-3)]",
-          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",
-          actions: content.actions
-        }
-      )
+      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
+      ]
     }
   );
 }
@@ -7262,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('[data-slot="data-table-row-link"]'))) ?? 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;
@@ -7294,6 +7432,10 @@ function DataTableInner({
   linkComponent,
   onRowClick,
   virtual,
+  renderExpanded,
+  getExpandLabel,
+  expandedIds,
+  onExpandedChange,
   skeletonRowCount = 8,
   "aria-label": ariaLabel = "\uB370\uC774\uD130 \uD14C\uC774\uBE14",
   ...props
@@ -7341,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);
   };
@@ -7386,7 +7544,7 @@ function DataTableInner({
     (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);
@@ -7403,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) => {
@@ -7521,7 +7686,8 @@ function DataTableInner({
                         },
                         column.key
                       );
-                    })
+                    }),
+                    expandable ? /* @__PURE__ */ jsx37("div", { role: "cell" }) : null
                   ]
                 }
               ),
@@ -7547,7 +7713,7 @@ function DataTableInner({
                   }
                 ) }) })
               ) : /* @__PURE__ */ jsx37("div", { ref: desktopListRef, role: "rowgroup", style: desktopSlice.style, children: desktopSlice.rows.map((row, index) => {
-                const itemProps = getItemProps(row);
+                const itemProps = getItemProps(row, "desktop", desktopSlice.start + index);
                 return /* @__PURE__ */ jsx37(
                   RowComponent,
                   {
@@ -7582,8 +7748,8 @@ 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;
+                const itemProps = getItemProps(row, "mobile", rowIndex);
                 return /* @__PURE__ */ jsx37(
                   CardComponent,
                   {
@@ -8292,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)]",
@@ -8330,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)",
@@ -8399,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
             }
@@ -8473,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)]",
@@ -8539,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"
@@ -8565,6 +8732,71 @@ var emptyStateBaseVariants = cva14(
     }
   }
 );
+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":
@@ -8590,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"
@@ -8625,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,
@@ -8676,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";
@@ -8683,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)]",
@@ -8770,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.
@@ -8792,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)]",
@@ -8923,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";
@@ -8979,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",
@@ -8997,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",
@@ -9174,7 +9420,7 @@ var Pagination = React43.forwardRef(
                     page: Math.min(pageCount, currentPage + 1),
                     disabled: isLastPage,
                     size: resolvedSize,
-                    icon: ChevronRight3,
+                    icon: ChevronRight4,
                     onPageChange
                   }
                 ),
@@ -9200,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)]",
@@ -9270,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
@@ -9297,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",
@@ -9441,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)",
@@ -9450,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)]",
@@ -9472,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)]",
@@ -9704,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 Fragment14, 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: "",
@@ -9718,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: "",
@@ -9734,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",
@@ -9789,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",
@@ -10028,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(Fragment14, { children: [
+              children: errorText ? /* @__PURE__ */ jsxs46(Fragment16, { children: [
                 /* @__PURE__ */ jsx58(
                   AlertCircle4,
                   {
@@ -10064,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.
@@ -10079,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)]",
@@ -10222,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",
@@ -10324,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",
@@ -10353,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)]",
@@ -10395,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",
@@ -10629,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)]",
@@ -10846,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",
@@ -10894,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 Fragment15, 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" };
@@ -10904,7 +11151,7 @@ function symbolGeometry(size) {
 function SymbolCircles({ size }) {
   const { ring } = OLUN_SYMBOL;
   const g = symbolGeometry(size);
-  return /* @__PURE__ */ jsxs51(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs51(Fragment17, { children: [
     /* @__PURE__ */ jsx65(
       "circle",
       {