@nebutra/ui 0.2.1 → 0.2.3

package/dist/layout/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { Cross, Warning, External, Menu } from '@nebutra/icons';
-import * as React from 'react';
+import { Menu, Cross, Warning } from '@nebutra/icons';
+import * as React4 from 'react';
 import { createContext, useState, useEffect, useMemo, useCallback } from 'react';
 import { Dialog } from '@base-ui/react/dialog';
 import { cva } from 'class-variance-authority';
@@ -95,13 +95,34 @@ var primitiveFontWeight = {
   semibold: 600};
 var primitiveTransition = {
   duration: {
-    // standard state transitions (default)
-    reveal: 300},
+    // hover, focus, small state changes
+    flow: 200},
   easing: {
-    inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
-  }
+    default: "ease-out"}
 };
 
+// src/tokens/components/overlay.ts
+var overlayFocusRingClassName = "outline-none";
+var overlayZIndex = {
+  backdrop: 1040,
+  modal: 1050};
+var overlayTokens = {
+  motion: {
+    duration: primitiveTransition.duration.flow,
+    easing: primitiveTransition.easing.default}};
+var overlayClassNames = {
+  focusRing: overlayFocusRingClassName,
+  sheetBackdrop: [
+    "fixed inset-0 bg-[var(--sheet-overlay-background)] backdrop-blur-[var(--sheet-overlay-blur)]",
+    "transition-[opacity,backdrop-filter,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
+  ].join(" "),
+  sheetSurface: [
+    "fixed flex flex-col overflow-hidden border border-border bg-[var(--sheet-background)] text-foreground shadow-[var(--sheet-shadow)]",
+    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
+  ].join(" ")};
+
 // src/tokens/components/sheet.ts
 var sheetTokens = {
   inset: primitiveSpacing[3],
@@ -129,15 +150,16 @@ var sheetTokens = {
   surface: {
     background: "hsl(var(--popover))",
     shadow: "var(--elevation-xl)"
-  },
-  motion: {
-    duration: primitiveTransition.duration.reveal,
-    easing: primitiveTransition.easing.inOut
-  }
-};
+  }};
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// src/utils/primitive-props.ts
+function asPlainStyle(style) {
+  if (style == null || typeof style === "function") return {};
+  return style;
+}
 function getSheetStyle(style) {
   return {
     "--sheet-inset": `${sheetTokens.inset}px`,
@@ -158,9 +180,9 @@ function getSheetStyle(style) {
     "--sheet-overlay-blur": sheetTokens.overlay.blur,
     "--sheet-background": sheetTokens.surface.background,
     "--sheet-shadow": sheetTokens.surface.shadow,
-    "--sheet-duration": `${sheetTokens.motion.duration}ms`,
-    "--sheet-easing": sheetTokens.motion.easing,
-    ...style
+    "--sheet-duration": `${overlayTokens.motion.duration}ms`,
+    "--sheet-easing": overlayTokens.motion.easing,
+    ...asPlainStyle(style)
   };
 }
 function Sheet({ modal = "trap-focus", disablePointerDismissal = true, ...props }) {
@@ -175,199 +197,107 @@ function Sheet({ modal = "trap-focus", disablePointerDismissal = true, ...props
   );
 }
 Sheet.displayName = "Sheet";
-var SheetTrigger = React.forwardRef(
-  ({ asChild, children, ...props }, ref) => {
-    if (asChild && React.isValidElement(children)) {
-      return /* @__PURE__ */ jsx(
-        Dialog.Trigger,
-        {
-          ref,
-          "data-slot": "sheet-trigger",
-          ...props,
-          render: children
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(Dialog.Trigger, { ref, "data-slot": "sheet-trigger", ...props, children });
-  }
-);
-SheetTrigger.displayName = "SheetTrigger";
-var SheetClose = React.forwardRef(
-  ({ asChild, children, ...props }, ref) => {
-    if (asChild && React.isValidElement(children)) {
-      return /* @__PURE__ */ jsx(
-        Dialog.Close,
-        {
-          ref,
-          "data-slot": "sheet-close",
-          ...props,
-          render: children
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(Dialog.Close, { ref, "data-slot": "sheet-close", ...props, children });
+var SheetClose = ({
+  asChild,
+  children,
+  ref,
+  ...props
+}) => {
+  if (asChild && React4.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(
+      Dialog.Close,
+      {
+        ref,
+        "data-slot": "sheet-close",
+        ...props,
+        render: children
+      }
+    );
   }
-);
+  return /* @__PURE__ */ jsx(Dialog.Close, { ref, "data-slot": "sheet-close", ...props, children });
+};
 SheetClose.displayName = "SheetClose";
 function SheetPortal(props) {
   return /* @__PURE__ */ jsx(Dialog.Portal, { "data-slot": "sheet-portal", ...props });
 }
 SheetPortal.displayName = "SheetPortal";
-var SheetOverlay = React.forwardRef(
-  ({ className, style, ...props }, ref) => /* @__PURE__ */ jsx(
-    Dialog.Backdrop,
-    {
-      ref,
-      "data-slot": "sheet-overlay",
-      className: cn(
-        "fixed inset-0 z-50 bg-[var(--sheet-overlay-background)] backdrop-blur-[var(--sheet-overlay-blur)]",
-        "transition-[opacity,backdrop-filter,display] duration-[var(--sheet-duration)] ease-[var(--sheet-easing)]",
-        "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none",
-        className
-      ),
-      style: getSheetStyle(style),
-      ...props
-    }
-  )
-);
-SheetOverlay.displayName = "SheetOverlay";
-var sheetVariants = cva(
-  [
-    "fixed z-50 flex flex-col overflow-hidden border border-border bg-[var(--sheet-background)] text-foreground shadow-[var(--sheet-shadow)] outline-none",
-    "transition-[opacity,transform,display] duration-[var(--sheet-duration)] ease-[var(--sheet-easing)]",
-    "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
-  ].join(" "),
+var SheetOverlay = ({
+  className,
+  style,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Dialog.Backdrop,
   {
-    variants: {
-      side: {
-        top: "inset-x-[var(--sheet-inset)] top-[var(--sheet-inset)] max-h-[min(var(--sheet-edge-height),calc(100dvh_-_var(--sheet-inset)_-_var(--sheet-inset)))] rounded-[var(--sheet-radius)] data-ending-style:-translate-y-full data-starting-style:-translate-y-full",
-        bottom: "inset-x-[var(--sheet-inset)] bottom-[var(--sheet-inset)] max-h-[min(var(--sheet-edge-height),calc(100dvh_-_var(--sheet-inset)_-_var(--sheet-inset)))] rounded-[var(--sheet-radius)] data-ending-style:translate-y-full data-starting-style:translate-y-full",
-        left: "inset-y-[var(--sheet-inset)] left-[var(--sheet-inset)] h-[calc(100dvh_-_var(--sheet-inset)_-_var(--sheet-inset))] w-[min(var(--sheet-side-width),calc(100vw_-_var(--sheet-inset)_-_var(--sheet-inset)))] rounded-[var(--sheet-radius)] data-ending-style:-translate-x-full data-starting-style:-translate-x-full",
-        right: "inset-y-[var(--sheet-inset)] right-[var(--sheet-inset)] h-[calc(100dvh_-_var(--sheet-inset)_-_var(--sheet-inset))] w-[min(var(--sheet-side-width),calc(100vw_-_var(--sheet-inset)_-_var(--sheet-inset)))] rounded-[var(--sheet-radius)] data-ending-style:translate-x-full data-starting-style:translate-x-full"
-      }
-    },
-    defaultVariants: {
-      side: "right"
-    }
-  }
-);
-var SheetContent = React.forwardRef(
-  ({
-    side = "right",
-    className,
-    children,
-    overlay = true,
-    noOverlay = false,
-    showClose,
-    close,
-    style,
+    ref,
+    "data-slot": "sheet-overlay",
+    className: cn(overlayClassNames.sheetBackdrop, className),
+    style: { zIndex: overlayZIndex.backdrop, ...getSheetStyle(style) },
     ...props
-  }, ref) => {
-    const shouldRenderClose = close ?? showClose ?? true;
-    const shouldRenderOverlay = overlay && !noOverlay;
-    return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-      shouldRenderOverlay ? /* @__PURE__ */ jsx(SheetOverlay, {}) : null,
-      /* @__PURE__ */ jsxs(
-        Dialog.Popup,
-        {
-          ref,
-          "data-slot": "sheet-content",
-          className: cn(sheetVariants({ side }), className),
-          style: getSheetStyle(style),
-          ...props,
-          children: [
-            children,
-            shouldRenderClose ? /* @__PURE__ */ jsxs(
-              SheetClose,
-              {
-                "aria-label": "Close",
-                className: cn(
-                  "absolute right-[var(--sheet-close-offset)] top-[var(--sheet-close-offset)] inline-flex size-[var(--sheet-close-size)] items-center justify-center rounded-[var(--sheet-close-radius)] text-muted-foreground",
-                  "transition-[background-color,color,box-shadow] duration-[var(--sheet-duration)] ease-[var(--sheet-easing)] hover:bg-muted hover:text-foreground",
-                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none motion-reduce:transition-none"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(Cross, { "aria-hidden": "true", className: "size-[var(--sheet-close-icon-size)]" }),
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-                ]
-              }
-            ) : null
-          ]
-        }
-      )
-    ] });
   }
 );
-SheetContent.displayName = "SheetContent";
-var SheetHeader = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "sheet-header",
-      className: cn(
-        "grid gap-[var(--sheet-header-gap)] border-b border-border px-[var(--sheet-padding-x)] py-[var(--sheet-padding-y)] pr-[calc(var(--sheet-padding-x)_+_var(--sheet-close-size))] text-left",
-        className
-      ),
-      ...props
-    }
-  )
-);
-SheetHeader.displayName = "SheetHeader";
-var SheetBody = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "sheet-body",
-      className: cn(
-        "min-h-0 flex-1 overflow-y-auto overscroll-contain px-[var(--sheet-padding-x)] py-[var(--sheet-body-padding-y)]",
-        className
-      ),
-      ...props
-    }
-  )
-);
-SheetBody.displayName = "SheetBody";
-var SheetFooter = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "sheet-footer",
-      className: cn(
-        "mt-auto flex flex-col-reverse gap-[var(--sheet-footer-gap)] border-t border-border px-[var(--sheet-padding-x)] py-[var(--sheet-padding-y)] sm:flex-row sm:justify-end",
-        className
-      ),
-      ...props
-    }
-  )
-);
-SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    Dialog.Title,
-    {
-      ref,
-      "data-slot": "sheet-title",
-      className: cn("font-semibold text-base leading-6 text-foreground", className),
-      ...props
-    }
-  )
-);
-SheetTitle.displayName = "SheetTitle";
-var SheetDescription = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    Dialog.Description,
-    {
-      ref,
-      "data-slot": "sheet-description",
-      className: cn("text-muted-foreground text-sm leading-5", className),
-      ...props
+SheetOverlay.displayName = "SheetOverlay";
+var sheetVariants = cva(overlayClassNames.sheetSurface, {
+  variants: {
+    side: {
+      top: "inset-x-[var(--sheet-inset)] top-[var(--sheet-inset)] max-h-[min(var(--sheet-edge-height),calc(100dvh_-_var(--sheet-inset)_-_var(--sheet-inset)))] rounded-[var(--sheet-radius)] data-ending-style:-translate-y-full data-starting-style:-translate-y-full",
+      bottom: "inset-x-[var(--sheet-inset)] bottom-[var(--sheet-inset)] max-h-[min(var(--sheet-edge-height),calc(100dvh_-_var(--sheet-inset)_-_var(--sheet-inset)))] rounded-[var(--sheet-radius)] data-ending-style:translate-y-full data-starting-style:translate-y-full",
+      left: "inset-y-[var(--sheet-inset)] left-[var(--sheet-inset)] h-[calc(100dvh_-_var(--sheet-inset)_-_var(--sheet-inset))] w-[min(var(--sheet-side-width),calc(100vw_-_var(--sheet-inset)_-_var(--sheet-inset)))] rounded-[var(--sheet-radius)] data-ending-style:-translate-x-full data-starting-style:-translate-x-full",
+      right: "inset-y-[var(--sheet-inset)] right-[var(--sheet-inset)] h-[calc(100dvh_-_var(--sheet-inset)_-_var(--sheet-inset))] w-[min(var(--sheet-side-width),calc(100vw_-_var(--sheet-inset)_-_var(--sheet-inset)))] rounded-[var(--sheet-radius)] data-ending-style:translate-x-full data-starting-style:translate-x-full"
     }
-  )
-);
-SheetDescription.displayName = "SheetDescription";
+  },
+  defaultVariants: {
+    side: "right"
+  }
+});
+var SheetContent = ({
+  side = "right",
+  className,
+  children,
+  overlay = true,
+  noOverlay = false,
+  showClose,
+  close,
+  style,
+  ref,
+  ...props
+}) => {
+  const shouldRenderClose = close ?? showClose ?? true;
+  const shouldRenderOverlay = overlay && !noOverlay;
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    shouldRenderOverlay ? /* @__PURE__ */ jsx(SheetOverlay, {}) : null,
+    /* @__PURE__ */ jsxs(
+      Dialog.Popup,
+      {
+        ref,
+        "data-slot": "sheet-content",
+        className: cn(sheetVariants({ side }), className),
+        style: { zIndex: overlayZIndex.modal, ...getSheetStyle(style) },
+        ...props,
+        children: [
+          children,
+          shouldRenderClose ? /* @__PURE__ */ jsxs(
+            SheetClose,
+            {
+              "aria-label": "Close",
+              className: cn(
+                "absolute right-[var(--sheet-close-offset)] top-[var(--sheet-close-offset)] inline-flex size-[var(--sheet-close-size)] items-center justify-center rounded-[var(--sheet-close-radius)] text-muted-foreground",
+                "transition-[background-color,color,box-shadow] duration-[var(--motion-duration-micro)] ease-[var(--ease-out)] hover:bg-muted hover:text-foreground",
+                overlayClassNames.focusRing,
+                "disabled:pointer-events-none motion-reduce:transition-none"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Cross, { "aria-hidden": "true", className: "size-[var(--sheet-close-icon-size)]" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+};
+SheetContent.displayName = "SheetContent";
 var DEFAULT_SIDEBAR_WIDTH = 224;
 var DEFAULT_COLLAPSED_WIDTH = 52;
 var DEFAULT_HEADER_HEIGHT = 48;
@@ -382,32 +312,33 @@ function AppShell({
   onCollapsedChange,
   headerHeight = DEFAULT_HEADER_HEIGHT,
   contentClassName,
-  className
+  className,
+  overlay = false
 }) {
   const isControlled = collapsed !== void 0;
-  const [internalCollapsed] = React.useState(defaultCollapsed);
+  const [internalCollapsed] = React4.useState(defaultCollapsed);
   const isCollapsed = isControlled ? collapsed : internalCollapsed;
-  const lastReportedRef = React.useRef(isCollapsed);
-  React.useEffect(() => {
-    if (lastReportedRef.current !== isCollapsed) {
-      lastReportedRef.current = isCollapsed;
-      onCollapsedChange?.(isCollapsed);
-    }
-  }, [isCollapsed, onCollapsedChange]);
-  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [mobileOpen, setMobileOpen] = React4.useState(false);
   const railWidth = isCollapsed ? sidebarCollapsedWidth : sidebarWidth;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("relative flex min-h-screen w-full bg-background text-foreground", className),
+      "data-ui": "nebutra-app-shell",
+      className: cn(
+        "relative flex h-screen w-full overflow-hidden bg-background text-foreground",
+        className
+      ),
       children: [
         /* @__PURE__ */ jsx(
           "aside",
           {
             "aria-label": "Primary",
             className: cn(
-              "hidden shrink-0 overflow-hidden border-r border-neutral-4 bg-neutral-2/80 md:block",
-              "transition-[width] duration-200 ease-out"
+              "hidden h-screen overflow-hidden bg-sidebar text-sidebar-foreground md:block",
+              "transition-[width] duration-flow ease-out",
+              overlay ? "absolute inset-y-0 left-0 z-40" : "shrink-0",
+              railWidth > 0 && "border-r border-sidebar-border",
+              overlay && railWidth > 0 && "shadow-2xl"
             ),
             style: { width: railWidth },
             children: /* @__PURE__ */ jsx(
@@ -420,14 +351,23 @@ function AppShell({
             )
           }
         ),
-        /* @__PURE__ */ jsx(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-72 border-r border-neutral-4 bg-neutral-2 p-0", children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children: sidebar }) }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        overlay && !isCollapsed ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Collapse navigation",
+            onClick: () => onCollapsedChange?.(true),
+            className: "absolute inset-0 z-30 hidden cursor-default bg-foreground/20 backdrop-blur-[1px] md:block"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-72 border-r border-sidebar-border bg-sidebar p-0", children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children: sidebar }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
           header !== void 0 && /* @__PURE__ */ jsxs(
             "header",
             {
               className: cn(
-                "sticky top-0 z-30 flex items-center gap-2 border-b border-border",
-                "bg-background/85 px-3 backdrop-blur supports-[backdrop-filter]:bg-background/70 sm:px-4"
+                "sticky top-0 z-30 flex shrink-0 items-center gap-2 border-b border-border",
+                "bg-background/90 px-3 backdrop-blur-xl supports-[backdrop-filter]:bg-background/80 sm:px-4"
               ),
               style: { height: headerHeight },
               children: [
@@ -438,9 +378,9 @@ function AppShell({
                     "aria-label": "Open navigation menu",
                     onClick: () => setMobileOpen(true),
                     className: cn(
-                      "relative inline-flex size-8 items-center justify-center rounded-md text-foreground/80 after:absolute after:-inset-1.5 after:content-['']",
+                      "relative inline-flex size-8 items-center justify-center rounded-[var(--radius-md)] text-foreground/80 after:absolute after:-inset-1.5 after:content-['']",
                       "hover:bg-muted hover:text-foreground md:hidden",
-                      "focus:outline-none focus:ring-2 focus:ring-offset-1"
+                      "focus-visible:outline-none"
                     ),
                     children: /* @__PURE__ */ jsx(Menu, { className: "size-4", "aria-hidden": "true" })
                   }
@@ -449,16 +389,16 @@ function AppShell({
               ]
             }
           ),
-          header === void 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center border-b border-border bg-background px-4 py-2 md:hidden", children: /* @__PURE__ */ jsx(
+          header === void 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center border-b border-border bg-background px-4 py-2 md:hidden", children: /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               "aria-label": "Open navigation menu",
               onClick: () => setMobileOpen(true),
               className: cn(
-                "relative inline-flex size-8 items-center justify-center rounded-md text-foreground/80 after:absolute after:-inset-1.5 after:content-['']",
+                "relative inline-flex size-8 items-center justify-center rounded-[var(--radius-md)] text-foreground/80 after:absolute after:-inset-1.5 after:content-['']",
                 "hover:bg-muted hover:text-foreground",
-                "focus:outline-none focus:ring-2 focus:ring-offset-1"
+                "focus-visible:outline-none"
               ),
               children: /* @__PURE__ */ jsx(Menu, { className: "size-4", "aria-hidden": "true" })
             }
@@ -466,7 +406,10 @@ function AppShell({
           /* @__PURE__ */ jsx(
             "main",
             {
-              className: cn("w-full max-w-none px-3 py-4 sm:px-4 md:px-5 2xl:px-6", contentClassName),
+              className: cn(
+                "min-h-0 flex-1 overflow-y-auto w-full max-w-none px-3 py-4 sm:px-4 md:px-5 2xl:px-6",
+                contentClassName
+              ),
               children
             }
           )
@@ -480,7 +423,7 @@ function Card({ children, isInteractive = false, className }) {
     "div",
     {
       className: cn(
-        "rounded-lg border border-[color:var(--neutral-7)] bg-[color:var(--neutral-1)] p-4 text-[color:var(--neutral-12)] shadow-sm dark:border-white/10 dark:bg-black/40 dark:text-white",
+        "rounded-[var(--radius-lg)] border border-border bg-background p-4 text-foreground shadow-sm dark:bg-black/40",
         isInteractive && "cursor-pointer transition-shadow hover:shadow-md",
         className
       ),
@@ -579,23 +522,21 @@ function BrandMark({
           {
             "aria-hidden": "true",
             className: cn(
-              "pointer-events-none absolute rounded-full opacity-30 blur-2xl",
+              "pointer-events-none absolute rounded-full bg-brand-mark opacity-30 blur-2xl",
               sizes.halo
-            ),
-            style: { background: "var(--brand-gradient)" }
+            )
           }
         ),
         /* @__PURE__ */ jsx(
           "span",
           {
             className: cn(
-              "relative inline-flex items-center justify-center rounded-2xl",
+              "relative inline-flex items-center justify-center rounded-[var(--radius-2xl)]",
               sizes.box,
-              variant === "gradient" && "text-white shadow-sm",
-              variant === "soft" && "bg-blue-2 text-blue-11 dark:bg-blue-2/20 dark:text-blue-9",
-              variant === "outline" && "border border-neutral-7 bg-neutral-1 text-neutral-12 dark:border-white/10 dark:bg-white/[0.04] dark:text-white"
+              variant === "gradient" && "bg-brand-mark text-brand-mark-foreground shadow-sm",
+              variant === "soft" && "bg-brand-mark/10 text-brand-mark dark:bg-brand-mark/20",
+              variant === "outline" && "border border-border bg-background text-foreground"
             ),
-            style: variant === "gradient" ? { background: "var(--brand-gradient)" } : void 0,
             children: children ?? /* @__PURE__ */ jsx(DefaultGlyph, { className: sizes.glyph })
           }
         )
@@ -705,83 +646,85 @@ var emptyStateCssVars = (size) => ({
   "--empty-state-title-line-height": `${emptyStateTokens.typography.titleLineHeight}px`,
   "--empty-state-description-line-height": `${emptyStateTokens.typography.descriptionLineHeight}px`
 });
-var EmptyStateIcon = React.forwardRef(
-  ({ className, icon, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
+var EmptyStateIcon = ({
+  className,
+  icon,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "aria-hidden": "true",
+    className: cn(
+      "flex size-[var(--empty-state-icon-size)] shrink-0 items-center justify-center rounded-[var(--empty-state-icon-radius)] bg-muted",
+      className
+    ),
+    ...props,
+    children: icon
+  }
+);
+EmptyStateIcon.displayName = "EmptyState.Icon";
+var EmptyStateRoot = ({
+  className,
+  title,
+  description,
+  icon,
+  children,
+  action,
+  link,
+  style,
+  variant = "blank-slate",
+  size = "md",
+  align = "center",
+  live = false,
+  ref,
+  ...props
+}) => {
+  const actions = children ?? [action, link].filter(Boolean);
+  const hasActions = React4.Children.toArray(actions).length > 0;
+  return /* @__PURE__ */ jsx(
+    "section",
     {
       ref,
-      "aria-hidden": "true",
+      "aria-live": live ? "polite" : void 0,
       className: cn(
-        "flex size-[var(--empty-state-icon-size)] shrink-0 items-center justify-center rounded-[var(--empty-state-icon-radius)] bg-muted",
+        "flex min-h-[var(--empty-state-min-height)] w-full flex-col justify-center rounded-[var(--empty-state-radius)] px-[var(--empty-state-padding-x)] py-[var(--empty-state-padding-y)]",
+        variantClassName[variant],
+        align === "center" ? "items-center text-center" : "items-start text-left",
         className
       ),
+      style: { ...emptyStateCssVars(size), ...style },
       ...props,
-      children: icon
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex max-w-[var(--empty-state-content-max-width)] flex-col gap-[var(--empty-state-stack-gap)]",
+            align === "center" ? "items-center" : "items-start"
+          ),
+          children: [
+            icon ? /* @__PURE__ */ jsx("div", { className: cn("[&>div]:bg-muted", iconToneClassName[variant]), children: icon }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "space-y-[var(--empty-state-copy-gap)]", children: [
+              /* @__PURE__ */ jsx("h3", { className: "font-[var(--empty-state-title-weight)] text-[length:var(--empty-state-title-size)] leading-[var(--empty-state-title-line-height)] text-foreground", children: title }),
+              description ? /* @__PURE__ */ jsx("p", { className: "max-w-[var(--empty-state-description-max-width)] text-[length:var(--empty-state-description-size)] leading-[var(--empty-state-description-line-height)] text-muted-foreground", children: description }) : null
+            ] }),
+            hasActions ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex flex-wrap gap-[var(--empty-state-actions-gap)]",
+                  align === "center" ? "justify-center" : "justify-start"
+                ),
+                children: actions
+              }
+            ) : null
+          ]
+        }
+      )
     }
-  )
-);
-EmptyStateIcon.displayName = "EmptyState.Icon";
-var EmptyStateRoot = React.forwardRef(
-  ({
-    className,
-    title,
-    description,
-    icon,
-    children,
-    action,
-    link,
-    style,
-    variant = "blank-slate",
-    size = "md",
-    align = "center",
-    live = false,
-    ...props
-  }, ref) => {
-    const actions = children ?? [action, link].filter(Boolean);
-    const hasActions = React.Children.toArray(actions).length > 0;
-    return /* @__PURE__ */ jsx(
-      "section",
-      {
-        ref,
-        "aria-live": live ? "polite" : void 0,
-        className: cn(
-          "flex min-h-[var(--empty-state-min-height)] w-full flex-col justify-center rounded-[var(--empty-state-radius)] px-[var(--empty-state-padding-x)] py-[var(--empty-state-padding-y)]",
-          variantClassName[variant],
-          align === "center" ? "items-center text-center" : "items-start text-left",
-          className
-        ),
-        style: { ...emptyStateCssVars(size), ...style },
-        ...props,
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex max-w-[var(--empty-state-content-max-width)] flex-col gap-[var(--empty-state-stack-gap)]",
-              align === "center" ? "items-center" : "items-start"
-            ),
-            children: [
-              icon ? /* @__PURE__ */ jsx("div", { className: cn("[&>div]:bg-muted", iconToneClassName[variant]), children: icon }) : null,
-              /* @__PURE__ */ jsxs("div", { className: "space-y-[var(--empty-state-copy-gap)]", children: [
-                /* @__PURE__ */ jsx("h3", { className: "font-[var(--empty-state-title-weight)] text-[length:var(--empty-state-title-size)] leading-[var(--empty-state-title-line-height)] text-foreground", children: title }),
-                description ? /* @__PURE__ */ jsx("p", { className: "max-w-[var(--empty-state-description-max-width)] text-[length:var(--empty-state-description-size)] leading-[var(--empty-state-description-line-height)] text-muted-foreground", children: description }) : null
-              ] }),
-              hasActions ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-wrap gap-[var(--empty-state-actions-gap)]",
-                    align === "center" ? "justify-center" : "justify-start"
-                  ),
-                  children: actions
-                }
-              ) : null
-            ]
-          }
-        )
-      }
-    );
-  }
-);
+  );
+};
 EmptyStateRoot.displayName = "EmptyState.Root";
 var EmptyState = {
   Root: EmptyStateRoot,
@@ -818,18 +761,18 @@ function EmptyState2({
     }
   );
 }
-var Slot = React.forwardRef(
+var Slot = React4.forwardRef(
   ({ children, className, style, ...props }, ref) => {
-    const childArray = React.Children.toArray(children);
+    const childArray = React4.Children.toArray(children);
     const child = childArray.length === 1 ? childArray[0] : null;
-    if (child == null || !React.isValidElement(child)) {
+    if (child == null || !React4.isValidElement(child)) {
       return /* @__PURE__ */ jsx("span", { ref, className, style, ...props, children });
     }
     const childProps = child.props;
     const mergedRef = (node) => {
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
-      const childRef = child.ref;
+      const childRef = childProps.ref;
       if (typeof childRef === "function") childRef(node);
       else if (childRef && "current" in childRef) {
         childRef.current = node;
@@ -843,7 +786,7 @@ var Slot = React.forwardRef(
       className: mergedClass,
       style: { ...childProps.style, ...style }
     };
-    return React.cloneElement(
+    return React4.cloneElement(
       child,
       merged
     );
@@ -853,17 +796,18 @@ Slot.displayName = "Slot";
 var buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
-    "rounded-[var(--radius-md)] text-sm font-medium",
-    "transition-colors duration-150 ease-out",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "rounded-[var(--btn-default-radius,var(--radius-md))]",
+    "text-[length:var(--control-font-size-md,0.875rem)] font-[number:var(--font-weight-medium,500)]",
+    "transition-colors duration-micro ease-out",
     "disabled:pointer-events-none disabled:opacity-50",
     "aria-busy:cursor-wait"
   ].join(" "),
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        ink: "bg-[var(--neutral-12)] text-[var(--neutral-1)] ring-1 ring-inset ring-white/[0.04] hover:bg-[var(--neutral-11)] hover:-translate-y-px active:translate-y-0 transition-[transform,background-color] duration-150",
+        // Recipe-driven via packages/design/tokens/recipe.css (.btn-brand-default)
+        default: "btn-brand-default",
+        ink: "bg-[var(--neutral-12)] text-[var(--neutral-1)] ring-1 ring-inset ring-[color:var(--neutral-1)]/5 hover:bg-[var(--neutral-11)] hover:-translate-y-px active:translate-y-0 transition-[transform,background-color] duration-micro",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -873,34 +817,99 @@ var buttonVariants = cva(
         warning: "bg-warning text-warning-foreground hover:bg-warning/90"
       },
       size: {
-        tiny: "h-6 rounded-[var(--radius-sm)] px-2 text-[11px]",
-        // 24px
-        sm: "h-8 rounded-[var(--radius-sm)] px-3 text-xs",
-        // 32px
-        default: "h-10 px-4 py-2",
-        // 40px
-        lg: "h-12 rounded-[var(--radius-lg)] px-5 text-base",
-        // 48px
-        icon: "h-10 w-10"
-        // 40×40px (kept for backward compat)
+        tiny: "h-[var(--control-height-tiny,1.5rem)] rounded-[var(--radius-sm)] px-2 text-[length:var(--control-font-size-tiny,0.6875rem)]",
+        sm: "h-[var(--control-height-sm,2rem)] rounded-[var(--radius-sm)] px-3 text-[length:var(--control-font-size-sm,0.75rem)]",
+        default: "h-[var(--control-height-md,2.5rem)] px-[var(--btn-default-padding-x,1rem)] py-[var(--btn-default-padding-y,0.5rem)]",
+        lg: "h-[var(--control-height-lg,3rem)] rounded-[var(--radius-lg)] px-5 text-[length:var(--control-font-size-lg,1rem)]",
+        icon: "h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)]"
       },
       shape: {
         default: "",
-        square: "",
-        circle: ""
+        // Radius from --btn-default-radius / --radius-md — brand-switchable.
+        // Do not hardcode rounded-md here; a language must be able to retarget
+        // the corner treatment of every icon trigger at once.
+        square: "rounded-[var(--btn-default-radius,var(--radius-md))]",
+        // Pill radius token, not Tailwind rounded-full — same 9999px default,
+        // but a brand that ships a softer "circle" can override --radius-pill.
+        circle: "rounded-[var(--radius-pill,9999px)]",
+        pill: "rounded-[var(--radius-pill,9999px)]"
+      },
+      // Icon-only box size — orthogonal to `size` (which tunes text-button
+      // height/padding/font together) and to `shape` (which picks the
+      // corner treatment). Only takes effect combined with shape="square"
+      // or shape="circle" (see compoundVariants below); every other
+      // combination ignores it. 28/32/36 cover the icon-trigger sizes that
+      // actually occur in the app — 24/40/48 are already reachable via
+      // shape + size (tiny/default/lg). Heights read --control-height-icon-*
+      // so density-aware Brand Packages can scale them with the ladder.
+      iconSize: {
+        sm: "",
+        // 28px default
+        md: "",
+        // 32px default
+        lg: ""
+        // 36px default
       }
     },
     compoundVariants: [
-      // shape="square" — width = height, no horizontal padding
-      { shape: "square", size: "tiny", className: "w-6 px-0" },
-      { shape: "square", size: "sm", className: "w-8 px-0" },
-      { shape: "square", size: "default", className: "w-10 px-0" },
-      { shape: "square", size: "lg", className: "w-12 px-0" },
-      // shape="circle" — width = height + rounded-full
-      { shape: "circle", size: "tiny", className: "w-6 px-0 rounded-full" },
-      { shape: "circle", size: "sm", className: "w-8 px-0 rounded-full" },
-      { shape: "circle", size: "default", className: "w-10 px-0 rounded-full" },
-      { shape: "circle", size: "lg", className: "w-12 px-0 rounded-full" }
+      { shape: "square", size: "tiny", className: "w-[var(--control-height-tiny,1.5rem)] px-0" },
+      { shape: "square", size: "sm", className: "w-[var(--control-height-sm,2rem)] px-0" },
+      { shape: "square", size: "default", className: "w-[var(--control-height-md,2.5rem)] px-0" },
+      { shape: "square", size: "lg", className: "w-[var(--control-height-lg,3rem)] px-0" },
+      {
+        shape: "circle",
+        size: "tiny",
+        className: "w-[var(--control-height-tiny,1.5rem)] px-0"
+      },
+      {
+        shape: "circle",
+        size: "sm",
+        className: "w-[var(--control-height-sm,2rem)] px-0"
+      },
+      {
+        shape: "circle",
+        size: "default",
+        className: "w-[var(--control-height-md,2.5rem)] px-0"
+      },
+      {
+        shape: "circle",
+        size: "lg",
+        className: "w-[var(--control-height-lg,3rem)] px-0"
+      },
+      // iconSize wins over the size-driven box above — matched on shape +
+      // iconSize only, so it applies regardless of whatever `size` was
+      // passed (or left at its "default" fallback). Corner treatment stays
+      // on the shape variant (token-backed); only the box is set here.
+      {
+        shape: "square",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
+      }
     ],
     defaultVariants: {
       variant: "default",
@@ -921,7 +930,10 @@ function Spinner({ className }) {
     }
   );
 }
-function getIconSizeClass(size) {
+function getIconSizeClass(size, iconSize2) {
+  if (iconSize2 === "sm") return "[&>svg]:size-3.5";
+  if (iconSize2 === "md") return "[&>svg]:size-3.5";
+  if (iconSize2 === "lg") return "[&>svg]:size-4";
   switch (size) {
     case "tiny":
       return "[&>svg]:size-3";
@@ -936,7 +948,10 @@ function getIconSizeClass(size) {
       return "[&>svg]:size-4";
   }
 }
-function getSpinnerSizeClass(size) {
+function getSpinnerSizeClass(size, iconSize2) {
+  if (iconSize2 === "sm") return "size-3.5";
+  if (iconSize2 === "md") return "size-3.5";
+  if (iconSize2 === "lg") return "size-4";
   switch (size) {
     case "tiny":
       return "size-3";
@@ -954,101 +969,111 @@ function getSpinnerSizeClass(size) {
 var SHADOW_CLASSES = {
   sm: "shadow-sm",
   md: "shadow-md",
-  lg: "shadow-lg"
+  lg: "shadow-md"
 };
 function resolveShadowClass(shadow) {
   if (!shadow) return void 0;
   const level = shadow === true ? "md" : shadow;
   return SHADOW_CLASSES[level];
 }
-function ButtonContent({ loading, prefix, suffix, size, children }) {
-  const iconSizeClass = getIconSizeClass(size);
+function ButtonContent({ loading, prefix, suffix, size, iconSize: iconSize2, children }) {
+  const iconSizeClass = getIconSizeClass(size, iconSize2);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size) }),
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize2) }),
     prefix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: prefix }),
     children,
     suffix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: suffix })
   ] });
 }
-var Button = React.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    shape,
-    asChild = false,
-    loading = false,
-    disabled,
-    prefix,
-    suffix,
-    shadow,
-    children,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    const isDisabled = disabled ?? loading;
-    const shadowClass = resolveShadowClass(shadow);
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        className: cn(buttonVariants({ variant, size, shape }), shadowClass, className),
-        disabled: isDisabled,
-        "aria-busy": loading || void 0,
-        ...props,
-        children: asChild ? children : /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var ButtonLink = React.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    shape,
-    prefix,
-    suffix,
-    shadow,
-    loading = false,
-    children,
-    ...props
-  }, ref) => {
-    const shadowClass = resolveShadowClass(shadow);
-    const loadingProps = loading ? {
-      "aria-busy": "true",
-      "aria-disabled": "true",
-      tabIndex: -1
-    } : {};
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        ref,
-        className: cn(
-          buttonVariants({ variant, size, shape }),
-          shadowClass,
-          loading && "pointer-events-none opacity-50",
-          className
-        ),
-        ...loadingProps,
-        ...props,
-        children: /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
-      }
-    );
-  }
-);
-ButtonLink.displayName = "ButtonLink";
-var textSize = {
-  small: "text-xs",
-  medium: "text-sm",
-  large: "text-base"
+var Button = ({
+  className,
+  variant,
+  size,
+  shape,
+  iconSize: iconSize2,
+  asChild = false,
+  loading = false,
+  disabled,
+  prefix,
+  suffix,
+  shadow,
+  children,
+  ref,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "button";
+  const isDisabled = Boolean(disabled || loading);
+  const shadowClass = resolveShadowClass(shadow);
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn(buttonVariants({ variant, size, shape, iconSize: iconSize2 }), shadowClass, className),
+      disabled: isDisabled,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          prefix,
+          suffix,
+          size,
+          iconSize: iconSize2,
+          children
+        }
+      )
+    }
+  );
 };
-var iconSize = {
-  small: 12,
-  medium: 14,
-  large: 16
+Button.displayName = "Button";
+var ButtonLink = ({
+  className,
+  variant,
+  size,
+  shape,
+  iconSize: iconSize2,
+  prefix,
+  suffix,
+  shadow,
+  loading = false,
+  children,
+  ref,
+  ...props
+}) => {
+  const shadowClass = resolveShadowClass(shadow);
+  const loadingProps = loading ? {
+    "aria-busy": "true",
+    "aria-disabled": "true",
+    tabIndex: -1
+  } : {};
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref,
+      className: cn(
+        buttonVariants({ variant, size, shape, iconSize: iconSize2 }),
+        shadowClass,
+        loading && "pointer-events-none opacity-50",
+        className
+      ),
+      ...loadingProps,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          prefix,
+          suffix,
+          size,
+          iconSize: iconSize2,
+          children
+        }
+      )
+    }
+  );
 };
+ButtonLink.displayName = "ButtonLink";
 var surfaceSize = {
   small: "gap-2 rounded-[var(--radius-md)] p-3 text-sm",
   medium: "gap-3 rounded-[var(--radius-lg)] p-4 text-sm",
@@ -1065,133 +1090,91 @@ function getActionTarget(link) {
   }
   return {};
 }
-var ErrorMessage = React.forwardRef(
-  ({ children, label, size = "medium", error, className }, ref) => {
-    const sz = size;
-    const message = error?.message ?? children;
-    return /* @__PURE__ */ jsxs(
-      "span",
-      {
-        ref,
-        role: "alert",
-        className: cn("inline-flex items-center gap-1.5 text-destructive", textSize[sz], className),
-        children: [
-          /* @__PURE__ */ jsx(Warning, { size: iconSize[sz], "aria-hidden": "true", className: "shrink-0" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            label && /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
-              label,
-              ":\xA0"
-            ] }),
-            message,
-            error?.action && error.link && /* @__PURE__ */ jsxs(Fragment, { children: [
-              " ",
-              /* @__PURE__ */ jsxs(
-                "a",
-                {
-                  href: error.link,
-                  className: "underline underline-offset-2 hover:no-underline",
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  children: [
-                    error.action,
-                    /* @__PURE__ */ jsx(External, { size: 10, "aria-hidden": "true", className: "ml-0.5 inline" })
-                  ]
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-);
-ErrorMessage.displayName = "ErrorMessage";
-var ErrorSurface = React.forwardRef(
-  ({
-    children,
-    label,
-    showLabel = true,
-    title,
-    size = "medium",
-    error,
-    errorId,
-    errorIdLabel = "Request ID",
-    live = "polite",
-    action,
-    link,
-    onAction,
-    actionLoading = false,
-    className,
-    role,
-    ...props
-  }, ref) => {
-    const message = error?.message ?? children;
-    const resolvedTitle = title ?? error?.title;
-    const resolvedAction = action ?? error?.action;
-    const resolvedLink = link ?? error?.link;
-    const resolvedErrorId = errorId ?? error?.id;
-    const resolvedRole = role ?? (live === "assertive" ? "alert" : "status");
-    const ariaLive = live === "off" ? void 0 : live;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        role: resolvedRole,
-        "aria-live": ariaLive,
-        className: cn(
-          "flex w-full border border-destructive/25 bg-destructive/5 text-foreground",
-          surfaceSize[size],
-          className
+var ErrorSurface = ({
+  children,
+  label,
+  showLabel = true,
+  title,
+  size = "medium",
+  error,
+  errorId,
+  errorIdLabel = "Request ID",
+  live = "polite",
+  action,
+  link,
+  onAction,
+  actionLoading = false,
+  className,
+  role,
+  ref,
+  ...props
+}) => {
+  const message = error?.message ?? children;
+  const resolvedTitle = title ?? error?.title;
+  const resolvedAction = action ?? error?.action;
+  const resolvedLink = link ?? error?.link;
+  const resolvedErrorId = errorId ?? error?.id;
+  const resolvedRole = role ?? (live === "assertive" ? "alert" : "status");
+  const ariaLive = live === "off" ? void 0 : live;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: resolvedRole,
+      "aria-live": ariaLive,
+      className: cn(
+        "flex w-full border border-destructive/25 bg-destructive/5 text-foreground",
+        surfaceSize[size],
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-destructive/20 bg-background text-destructive",
+            children: /* @__PURE__ */ jsx(Warning, { size: surfaceIconSize[size] })
+          }
         ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          label && showLabel ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-normal text-destructive", children: label }) : null,
+          resolvedTitle ? /* @__PURE__ */ jsx("p", { className: "font-semibold leading-6 text-foreground", children: resolvedTitle }) : null,
+          message ? /* @__PURE__ */ jsx("p", { className: cn("leading-5 text-muted-foreground", resolvedTitle && "mt-1"), children: message }) : null,
+          resolvedErrorId ? /* @__PURE__ */ jsxs("details", { className: "mt-3 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none text-foreground", children: "Diagnostic details" }),
+            /* @__PURE__ */ jsxs("code", { className: "mt-2 block overflow-x-auto rounded-[var(--radius-sm)] border bg-background px-2 py-1 font-mono text-xs text-muted-foreground", children: [
+              errorIdLabel,
+              ": ",
+              resolvedErrorId,
+              error?.code ? ` (${error.code})` : ""
+            ] })
+          ] }) : null,
+          resolvedAction ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: resolvedLink ? /* @__PURE__ */ jsx(
+            ButtonLink,
             {
-              "aria-hidden": "true",
-              className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-destructive/20 bg-background text-destructive",
-              children: /* @__PURE__ */ jsx(Warning, { size: surfaceIconSize[size] })
+              href: resolvedLink,
+              size: "sm",
+              variant: "outline",
+              ...getActionTarget(resolvedLink),
+              children: resolvedAction
             }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            label && showLabel ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-normal text-destructive", children: label }) : null,
-            resolvedTitle ? /* @__PURE__ */ jsx("p", { className: "font-semibold leading-6 text-foreground", children: resolvedTitle }) : null,
-            message ? /* @__PURE__ */ jsx("p", { className: cn("leading-5 text-muted-foreground", resolvedTitle && "mt-1"), children: message }) : null,
-            resolvedErrorId ? /* @__PURE__ */ jsxs("details", { className: "mt-3 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none text-foreground", children: "Diagnostic details" }),
-              /* @__PURE__ */ jsxs("code", { className: "mt-2 block overflow-x-auto rounded-[var(--radius-sm)] border bg-background px-2 py-1 font-mono text-xs text-muted-foreground", children: [
-                errorIdLabel,
-                ": ",
-                resolvedErrorId,
-                error?.code ? ` (${error.code})` : ""
-              ] })
-            ] }) : null,
-            resolvedAction ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: resolvedLink ? /* @__PURE__ */ jsx(
-              ButtonLink,
-              {
-                href: resolvedLink,
-                size: "sm",
-                variant: "outline",
-                ...getActionTarget(resolvedLink),
-                children: resolvedAction
-              }
-            ) : /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                variant: "outline",
-                loading: actionLoading,
-                onClick: onAction,
-                children: resolvedAction
-              }
-            ) }) : null
-          ] })
-        ]
-      }
-    );
-  }
-);
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              loading: actionLoading,
+              onClick: onAction,
+              children: resolvedAction
+            }
+          ) }) : null
+        ] })
+      ]
+    }
+  );
+};
 ErrorSurface.displayName = "Error";
 function ErrorState({
   title = "Couldn\u2019t Load Resource",
@@ -1266,14 +1249,14 @@ function LoadingState({ message, size = "large" }) {
       "span",
       {
         className: cn(
-          "inline-block animate-spin rounded-full border-solid border-[color:var(--blue-9)] border-r-transparent align-[-0.125em]",
+          "inline-block animate-spin rounded-full border-solid border-primary border-r-transparent align-[-0.125em]",
           spinnerSize[size]
         ),
         role: "status",
         "aria-label": message ?? "Loading"
       }
     ),
-    message && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-[color:var(--neutral-11)] dark:text-white/70", children: message })
+    message && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: message })
   ] });
 }
 function PageHeader({ title, description, actions, className }) {
@@ -1286,8 +1269,8 @@ function PageHeader({ title, description, actions, className }) {
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-[color:var(--neutral-12)] dark:text-white", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[color:var(--neutral-11)] dark:text-white/70", children: description })
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
         ] }),
         actions && /* @__PURE__ */ jsx("div", { className: "mt-2 flex shrink-0 gap-2 sm:mt-0", children: actions })
       ]