najm-kit 2.9.0 → 2.11.0

package/dist/index.mjs

@@ -1,11 +1,13 @@
 import { resolveAvatarSrc } from './chunk-BEGOH366.mjs';
 export { isPlaceholderAvatar, resolveAvatarSrc } from './chunk-BEGOH366.mjs';
-import { useResolvedFormDevTools, useNBranding } from './chunk-GHMR45H3.mjs';
-export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-GHMR45H3.mjs';
-import { useResolvedPaginationLabels } from './chunk-USZUOJMK.mjs';
-export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone } from './chunk-USZUOJMK.mjs';
-import { inputBorderClasses, Button, NIcon, NajmScroll, surfaceBorderClasses, useNajmScrollViewport, buttonVariants, NButton, useTableStore, TableStoreContext, sidebarBorderClasses, NTableJson } from './chunk-JUYT2ISO.mjs';
-export { Button, NButton, NIcon, NTableJson, NajmScroll, TableStoreContext, buttonVariants, inputBorderClasses, sidebarBorderClasses, surfaceBorderClasses, useTableStore } from './chunk-JUYT2ISO.mjs';
+import { NLoadingState, NErrorState, NEmptyState, useResolvedFormDevTools, useNBranding } from './chunk-2GFWF46W.mjs';
+export { FormDevToolsProvider, NBrandingProvider, NBrandingStateProvider, NEmptyState, NErrorState, NForbiddenState, NLoadingState, NNotFoundState, NPageLayout, NSpinner, NajmFormatProvider, buildFormFill, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext } from './chunk-2GFWF46W.mjs';
+import { normalizeImageSources, useImageChain, useNBadgeDefaults, mergeBadgeMaps, resolveStatusColor, resolveBadgeStatusLabel, colorTextClass, useResolvedPaginationLabels } from './chunk-EEBLEDNI.mjs';
+export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NAJM_COLOR_TEXT_CLASSES, NAJM_STATUS_COLORS, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, colorTextClass, findStatusColor, normalizeStatusToken, resolveStatusColor, statusTextClass, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone } from './chunk-EEBLEDNI.mjs';
+import { NajmScroll, useNajmScrollViewport, useTableStore, TableStoreContext, NTableJson } from './chunk-K7T7X6PX.mjs';
+export { NTableJson, NajmScroll, TableStoreContext, useTableStore } from './chunk-K7T7X6PX.mjs';
+import { inputBorderClasses, Button, NIcon, surfaceBorderClasses, buttonVariants, NButton, sidebarBorderClasses } from './chunk-XZL32HFR.mjs';
+export { Button, NButton, NIcon, buttonVariants, inputBorderClasses, sidebarBorderClasses, surfaceBorderClasses } from './chunk-XZL32HFR.mjs';
 import { useNajmComponentStyle, cn, NajmThemeContainerCtx, useNajmThemeMode, useNajmDesign, composePreset } from './chunk-KVZACF4G.mjs';
 export { NajmDesignProvider, NajmThemeProvider, cn, composePreset, resolvePreset, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode } from './chunk-KVZACF4G.mjs';
 export { DEFAULT_CARD_BREAKPOINT, DEFAULT_CARD_PAGINATION_KEY_PREFIX, buildCardPaginationLabels, createCardPagination, useCardViewport, useDesktopTableMode, useMediaQuery } from './chunk-OUS7OYVA.mjs';
@@ -15,11 +17,11 @@ export { DEFAULT_PLACEHOLDER, formatCurrency, formatDate, formatDateTime, format
 export { DEFAULT_MAX_PAGE_SIZE, DEFAULT_PAGE_SIZE, cleanQuery, createOffsetPagination, fetchOffsetPage, getPageIndex } from './chunk-2NX2VKS2.mjs';
 import { resolveRadiusValue, resolveVariantAlias, parseNajmDesignConfig } from './chunk-TFHWLE7N.mjs';
 export { NAJM_COMPONENT_NAMES, RADIUS_VALUE_MAP, defineNajmDesignConfig, defineNajmThemeConfig, parseNajmDesignConfig, parseNajmThemeConfig, resolveRadiusValue, resolveVariantAlias, stringifyNajmDesignConfig, stringifyNajmThemeConfig } from './chunk-TFHWLE7N.mjs';
-import * as React60 from 'react';
-import React60__default, { createContext, useRef, useMemo, useState, useEffect, useContext, useCallback, useLayoutEffect, isValidElement } from 'react';
+import * as React61 from 'react';
+import React61__default, { createContext, useRef, useMemo, useState, useEffect, useContext, useCallback, useLayoutEffect, isValidElement } from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, AlertTriangle, RefreshCw, X, XIcon, Menu, Search, SearchIcon, CheckIcon, ChevronUp, ChevronDownIcon, ChevronUpIcon, Eye, EyeOff, ChevronsUpDown, Check, CircleIcon, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, FileUp, Folder, UploadCloud, CheckCircle2, AlertCircle, Camera, Star, Globe, Clock, Trash2, Plus, Upload, Download, RotateCcw, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Copy, Scissors, LoaderCircleIcon, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
+import { ChevronDown, AlertTriangle, RefreshCw, X, XIcon, Menu, Search, SearchIcon, CheckIcon, ChevronUp, ChevronDownIcon, ChevronUpIcon, Eye, EyeOff, ChevronsUpDown, Check, CircleIcon, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, FileUp, Folder, UploadCloud, CheckCircle2, AlertCircle, Camera, Star, Globe, Clock, Trash2, Plus, Upload, Download, RotateCcw, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, Copy, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Scissors, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { HexColorPicker } from 'react-colorful';
@@ -51,6 +53,9 @@ import { FormProvider, Controller, useFormContext, useForm, useFieldArray } from
 import { zodResolver } from '@hookform/resolvers/zod';
 import { getExpandedRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getCoreRowModel, useReactTable, flexRender } from '@tanstack/react-table';
 
+// src/theme/focus.ts
+var focusRingClasses = "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50";
+var focusRingWithinClasses = "focus-visible:ring-[3px] focus-visible:ring-ring/50 has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50";
 function Tabs({
   className,
   variant = "pills",
@@ -134,7 +139,8 @@ function TabsTrigger({
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "inline-flex cursor-pointer items-center justify-center gap-1.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "inline-flex cursor-pointer items-center justify-center gap-1.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        focusRingClasses,
         triggerVariantMap[variant],
         className
       ),
@@ -143,7 +149,14 @@ function TabsTrigger({
   );
 }
 function TabsContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props });
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1", focusRingClasses, className),
+      ...props
+    }
+  );
 }
 
 // src/components/tabs/tabColors.ts
@@ -262,7 +275,7 @@ function NTabs({
 }
 var PORTAL_LAYER_STYLE_ID = "najm-kit-portal-layer-styles";
 function useNajmPortalLayerStyles() {
-  React60.useInsertionEffect(() => {
+  React61.useInsertionEffect(() => {
     if (typeof document === "undefined") return;
     if (document.getElementById(PORTAL_LAYER_STYLE_ID)) return;
     const style = document.createElement("style");
@@ -293,7 +306,7 @@ var tooltipContentVariants = cva(
   }
 );
 function TooltipContent({ className, sideOffset = 4, variant, children, ...props }) {
-  const container = React60.useContext(NajmThemeContainerCtx);
+  const container = React61.useContext(NajmThemeContainerCtx);
   useNajmPortalLayerStyles();
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     TooltipPrimitive.Content,
@@ -443,7 +456,7 @@ var ERROR_BORDER = "border !border-red-600";
 var FOCUS_INTERACTIVE_BASE = "border focus-within:border-primary";
 var HOVER_INTERACTIVE_BASE = "hover:border-primary";
 var STATIC_BASE = "border";
-var BaseInput = React60__default.forwardRef(
+var BaseInput = React61__default.forwardRef(
   ({ children, variant = "default", status = "default", bordered, borderColor, className, style, disabled = false, onHover, onClick, hasIcon, ...rest }, ref) => {
     const recipe = useNajmComponentStyle("input");
     const isGhost = variant === "ghost";
@@ -472,6 +485,13 @@ var BaseInput = React60__default.forwardRef(
         style: recipeRadius ? { borderRadius: recipeRadius, ...style } : style,
         className: cn(
           inputVariants({ variant, status, hasIcon, disabled }),
+          // The wrapper is what the user reads as "the field": the inner
+          // control is stripped of its own ring precisely so this element can
+          // carry the border. Until this was added, the border merely changed
+          // colour on focus — a 1px hue shift and nothing else — and the number
+          // fields and the multi-select trigger came out of the acceptance walk
+          // as tab stops with no visible indicator at all.
+          !isGhost && focusRingWithinClasses,
           !isGhost && borderClass,
           !isGhost && colorClass,
           className
@@ -495,7 +515,7 @@ function PopoverAnchor({ ...props }) {
   return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
-  const container = React60.useContext(NajmThemeContainerCtx);
+  const container = React61.useContext(NajmThemeContainerCtx);
   useNajmPortalLayerStyles();
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
@@ -604,7 +624,7 @@ function SwatchesColorPicker({
   hideSwatches = false
 }) {
   const inputRef = useRef(null);
-  const themeContainer = React60__default.useContext(NajmThemeContainerCtx);
+  const themeContainer = React61__default.useContext(NajmThemeContainerCtx);
   const resolvedValue = resolvePickerColor(value, themeContainer);
   return /* @__PURE__ */ jsxs(
     BaseInput,
@@ -674,7 +694,7 @@ function PopoverColorPicker({
   formats = DEFAULT_FORMATS,
   output = "preserve"
 }) {
-  const themeContainer = React60__default.useContext(NajmThemeContainerCtx);
+  const themeContainer = React61__default.useContext(NajmThemeContainerCtx);
   const resolvedValue = resolvePickerColor(value, themeContainer);
   const initialFormat = formats.includes(detectFormat(resolvedValue)) ? detectFormat(resolvedValue) : formats[0] ?? "hex";
   const [activeFormat, setActiveFormat] = useState(initialFormat);
@@ -835,8 +855,18 @@ function SegmentedControl({
 function Collapsible({ ...props }) {
   return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
-function CollapsibleTrigger2({ ...props }) {
-  return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props });
+function CollapsibleTrigger2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleTrigger,
+    {
+      "data-slot": "collapsible-trigger",
+      className: cn(focusRingClasses, className),
+      ...props
+    }
+  );
 }
 function CollapsibleContent2({ ...props }) {
   return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props });
@@ -931,7 +961,7 @@ function SheetClose({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
 }
 function SheetPortal({ ...props }) {
-  const container = React60.useContext(NajmThemeContainerCtx);
+  const container = React61.useContext(NajmThemeContainerCtx);
   return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", container: container ?? void 0, ...props });
 }
 function SheetOverlay({ className, ...props }) {
@@ -1080,7 +1110,7 @@ function DialogTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  const container = React60.useContext(NajmThemeContainerCtx);
+  const container = React61.useContext(NajmThemeContainerCtx);
   return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", container: container ?? void 0, ...props });
 }
 function DialogClose({ ...props }) {
@@ -1111,8 +1141,8 @@ function getDefaultPadding() {
   return window.matchMedia(MOBILE_PADDING_QUERY).matches ? "sm" : "md";
 }
 function useResponsivePadding(value) {
-  const [resolved, setResolved] = React60.useState(() => value ?? getDefaultPadding());
-  React60.useEffect(() => {
+  const [resolved, setResolved] = React61.useState(() => value ?? getDefaultPadding());
+  React61.useEffect(() => {
     if (value) {
       setResolved(value);
       return;
@@ -1126,9 +1156,18 @@ function useResponsivePadding(value) {
   }, [value]);
   return resolved;
 }
-function DialogContent({ className, children, padding, hideClose = false, ...props }) {
+function DialogContent({
+  className,
+  children,
+  padding,
+  hideClose = false,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  ...props
+}) {
   const resolvedPadding = useResponsivePadding(padding);
   const portalClassName = useNPortalScope();
+  const openerRef = React61.useRef(null);
   return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsxs("div", { className: portalClassName, children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
@@ -1136,6 +1175,22 @@ function DialogContent({ className, children, padding, hideClose = false, ...pro
       {
         "data-slot": "dialog-content",
         "data-padding": resolvedPadding,
+        onOpenAutoFocus: (event) => {
+          const active = document.activeElement;
+          openerRef.current = active instanceof HTMLElement && active !== document.body ? active : null;
+          onOpenAutoFocus?.(event);
+        },
+        onCloseAutoFocus: (event) => {
+          onCloseAutoFocus?.(event);
+          if (event.defaultPrevented) return;
+          const opener = openerRef.current;
+          setTimeout(() => {
+            if (!opener?.isConnected) return;
+            const active = document.activeElement;
+            const lost = !active || active === document.body || active === document.documentElement || !active.isConnected;
+            if (lost) opener.focus();
+          }, 0);
+        },
         className: cn(
           "bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 rounded-none lg:rounded-lg najm-border border-border shadow-lg duration-200",
           dialogPaddingMap[resolvedPadding],
@@ -1176,7 +1231,7 @@ var sizeClasses2 = {
   md: "h-8 w-8",
   lg: "h-10 w-10"
 };
-var IconButton = React60.forwardRef(
+var IconButton = React61.forwardRef(
   ({
     className,
     variant = "ghost",
@@ -1258,10 +1313,10 @@ function NPageHeaderTop({ children, className }) {
 }
 NPageHeaderTop.displayName = "NPageHeaderTop";
 function isPageHeaderSlot(child, slot) {
-  return React60__default.isValidElement(child) && child.type === slot;
+  return React61__default.isValidElement(child) && child.type === slot;
 }
 function getSlotElements(children, slot) {
-  const matches = React60__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
+  const matches = React61__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
   return matches.length > 0 ? matches : void 0;
 }
 var responsiveClasses = {
@@ -1674,8 +1729,8 @@ function NDialogSecondaryButton(_props) {
 function parseDirectDialogSlots(children) {
   const body = [];
   const parsed = {};
-  React60__default.Children.forEach(children, (child) => {
-    if (!React60__default.isValidElement(child)) {
+  React61__default.Children.forEach(children, (child) => {
+    if (!React61__default.isValidElement(child)) {
       body.push(child);
       return;
     }
@@ -1748,15 +1803,15 @@ var dialogVariants = cva(
 );
 var CONTENT_ACTIONS_SELECTOR = '[data-najm-dialog-actions="content"], [data-najm-wizard-form="true"]';
 function useContentOwnsActions() {
-  const [contentElement, setContentElement] = React60__default.useState(null);
-  const [contentOwnsActions, setContentOwnsActions] = React60__default.useState(false);
-  const contentElementRef = React60__default.useRef(null);
-  const handleContentElementRef = React60__default.useCallback((node) => {
+  const [contentElement, setContentElement] = React61__default.useState(null);
+  const [contentOwnsActions, setContentOwnsActions] = React61__default.useState(false);
+  const contentElementRef = React61__default.useRef(null);
+  const handleContentElementRef = React61__default.useCallback((node) => {
     if (contentElementRef.current === node) return;
     contentElementRef.current = node;
     setContentElement(node);
   }, []);
-  React60__default.useLayoutEffect(() => {
+  React61__default.useLayoutEffect(() => {
     if (!contentElement) {
       setContentOwnsActions((current) => current ? false : current);
       return;
@@ -2009,8 +2064,8 @@ function NDirectDialog({
   const resolvedHeaderClassName = cn(slots.header?.className, headerClassName);
   const resolvedTitleClassName = cn(slots.header?.titleClassName, titleClassName);
   const resolvedDescriptionClassName = cn(slots.description?.className, descriptionClassName);
-  const [internalOpen, setInternalOpen] = React60__default.useState(defaultOpen);
-  const [primaryLoading, setPrimaryLoading] = React60__default.useState(false);
+  const [internalOpen, setInternalOpen] = React61__default.useState(defaultOpen);
+  const [primaryLoading, setPrimaryLoading] = React61__default.useState(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
   const setOpen = (nextOpen) => {
@@ -2292,7 +2347,7 @@ function useDialog(store) {
         description: options.description,
         size: options.size || "sm",
         className: options.className,
-        render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) => React60__default.createElement(NDeleteDialog, {
+        render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) => React61__default.createElement(NDeleteDialog, {
           itemName: options.itemName,
           itemType: options.itemType,
           icon: options.icon,
@@ -2408,77 +2463,6 @@ function Checkbox({ className, ...props }) {
     }
   );
 }
-
-// src/components/Badge/status.ts
-var NAJM_STATUS_COLORS = {
-  active: "success",
-  approved: "success",
-  completed: "success",
-  confirmed: "success",
-  delivered: "success",
-  paid: "success",
-  published: "success",
-  succeeded: "success",
-  validated: "success",
-  verified: "success",
-  in_preparation: "warning",
-  in_progress: "warning",
-  out_for_delivery: "warning",
-  pending: "warning",
-  pending_email_verification: "warning",
-  pending_review: "warning",
-  processing: "warning",
-  submitted: "warning",
-  paused: "info",
-  purchased: "info",
-  scheduled: "info",
-  archived: "neutral",
-  cancelled: "neutral",
-  canceled: "neutral",
-  closed: "neutral",
-  draft: "neutral",
-  inactive: "neutral",
-  stopped: "neutral",
-  unknown: "neutral",
-  blocked: "destructive",
-  expired: "destructive",
-  failed: "destructive",
-  refunded: "destructive",
-  rejected: "destructive",
-  suspended: "destructive"
-};
-var NAJM_COLOR_TEXT_CLASSES = {
-  primary: "text-primary",
-  secondary: "text-secondary-foreground",
-  accent: "text-accent-foreground",
-  neutral: "text-muted-foreground",
-  info: "text-info",
-  success: "text-success",
-  warning: "text-warning",
-  destructive: "text-destructive"
-};
-function normalizeStatus(status) {
-  return status.trim().toLowerCase().replace(/[\s-]+/g, "_");
-}
-function lookup(map, status, normalized) {
-  if (!map) return void 0;
-  return map[status] ?? map[normalized];
-}
-function findStatusColor(status, statusMap) {
-  if (!status) return void 0;
-  const normalized = normalizeStatus(status);
-  return lookup(statusMap, status, normalized) ?? lookup(NAJM_STATUS_COLORS, status, normalized);
-}
-function resolveStatusColor(status, statusMap, fallback = "neutral") {
-  return findStatusColor(status, statusMap) ?? fallback;
-}
-function colorTextClass(color) {
-  return NAJM_COLOR_TEXT_CLASSES[color] ?? "text-foreground";
-}
-function statusTextClass(status, statusMap, fallback) {
-  const color = findStatusColor(status, statusMap) ?? fallback;
-  return color ? colorTextClass(color) : "";
-}
 var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -2588,29 +2572,37 @@ function Badge({
 }) {
   const Comp = asChild ? Slot : "span";
   const recipe = useNajmComponentStyle("badge");
+  const ambient = useNBadgeDefaults();
+  const statusDefaults = status ? ambient?.defaults : void 0;
+  const effectiveLook = look ?? statusDefaults?.look;
+  const effectiveShape = shape ?? statusDefaults?.shape;
+  const effectiveSize = size ?? statusDefaults?.size;
+  const effectiveShowIcon = showIcon ?? statusDefaults?.showIcon;
+  const effectiveStatusMap = mergeBadgeMaps(statusDefaults?.statusMap, statusMap);
+  const effectiveIconMap = mergeBadgeMaps(statusDefaults?.iconMap, iconMap);
   const aliased = resolveVariantAlias(
     recipe?.variants,
     variant ?? recipe?.defaultVariant ?? "default"
   );
   const effVariant = variant ?? aliased.variant ?? recipe?.defaultVariant;
-  const recipeRadius = shape === void 0 ? resolveRadiusValue(recipe?.radius) : void 0;
+  const recipeRadius = effectiveShape === void 0 ? resolveRadiusValue(recipe?.radius) : void 0;
   const recipeStyle = recipeRadius ? { borderRadius: recipeRadius, ...style } : style;
-  const resolvedColor = status ? resolveStatusColor(status, statusMap, color ?? "neutral") : color ?? "primary";
-  const resolvedLabel = label ?? (typeof children === "string" ? children : void 0) ?? (status ? humanizeToken(status) : void 0);
+  const resolvedColor = status ? resolveStatusColor(status, effectiveStatusMap, color ?? "neutral") : color ?? "primary";
+  const resolvedLabel = label ?? (typeof children === "string" ? children : void 0) ?? (status ? resolveBadgeStatusLabel(status, statusDefaults, ambient?.t) ?? humanizeToken(status) : void 0);
   const content = typeof children !== "string" && children ? children : resolvedLabel ?? children;
-  const resolvedIcon = icon ?? (resolvedColor ? iconMap?.[resolvedColor] : void 0);
-  const iconNode = renderIcon(showIcon ? resolvedIcon : icon);
-  const isMinimal = look === "minimal" || look === "text";
+  const resolvedIcon = icon ?? (resolvedColor ? effectiveIconMap?.[resolvedColor] : void 0);
+  const iconNode = renderIcon(effectiveShowIcon ? resolvedIcon : icon);
+  const isMinimal = effectiveLook === "minimal" || effectiveLook === "text";
   if (isMinimal) {
     const textColor = colorTextClass(resolvedColor);
-    const sizeClass = SIZE_TEXT_MAP[size ?? "md"] ?? "text-sm";
+    const sizeClass = SIZE_TEXT_MAP[effectiveSize ?? "md"] ?? "text-sm";
     return /* @__PURE__ */ jsxs(
       Comp,
       {
         "data-slot": "badge",
         className: cn(
           "inline-flex items-center gap-1.5 font-medium bg-transparent border-0",
-          look === "text" ? "px-0" : void 0,
+          effectiveLook === "text" ? "px-0" : void 0,
           textColor,
           sizeClass,
           className
@@ -2625,7 +2617,12 @@ function Badge({
       }
     );
   }
-  const classes = resolvedColor ? badgeColorVariants({ color: resolvedColor, look, size, shape }) : badgeVariants({ variant: effVariant });
+  const classes = resolvedColor ? badgeColorVariants({
+    color: resolvedColor,
+    look: effectiveLook,
+    size: effectiveSize,
+    shape: effectiveShape
+  }) : badgeVariants({ variant: effVariant });
   return /* @__PURE__ */ jsxs(Comp, { "data-slot": "badge", className: cn(classes, aliased.style?.className, className), style: recipeStyle, ...props, children: [
     iconPosition === "left" && iconNode,
     content,
@@ -2644,8 +2641,8 @@ function resolveIcon(icon) {
 }
 var MultiSelectInput = ({ ariaLabel, placeholder = "Select items...", value = [], onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, searchPlaceholder = "Search...", emptyMessage = "No items found.", maxDisplay = 3, showSearch = true }) => {
   const [open, setOpen] = useState(false);
-  const triggerRef = React60__default.useRef(null);
-  const pointerDismissedRef = React60__default.useRef(false);
+  const triggerRef = React61__default.useRef(null);
+  const pointerDismissedRef = React61__default.useRef(false);
   const shouldDisplayIcon = Boolean(icon) && showIcon && value.length === 0;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const handleSelect = (itemValue) => {
@@ -2761,7 +2758,7 @@ function SelectScrollDownButton({ className, ...props }) {
   return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" }) });
 }
 function SelectContent({ className, children, position = "popper", style, ...props }) {
-  const container = React60.useContext(NajmThemeContainerCtx);
+  const container = React61.useContext(NajmThemeContainerCtx);
   const recipe = useNajmComponentStyle("select");
   const contentSlot = recipe?.slots?.content;
   const borderWidth = contentSlot?.borderWidth ?? recipe?.borderWidth;
@@ -2844,9 +2841,9 @@ var SelectInput = ({ placeholder = "", ariaLabel, value, onChange, icon, showIco
     (item) => typeof item === "string" ? item === value : item.value === value
   );
   const displayLabel = typeof found === "string" ? found : found?.label ?? value;
-  const [open, setOpen] = React60__default.useState(false);
-  const triggerRef = React60__default.useRef(null);
-  const pointerDismissedRef = React60__default.useRef(false);
+  const [open, setOpen] = React61__default.useState(false);
+  const triggerRef = React61__default.useRef(null);
+  const pointerDismissedRef = React61__default.useRef(false);
   return /* @__PURE__ */ jsxs("div", { className: cn("group relative", className), children: [
     /* @__PURE__ */ jsxs(
       BaseInput,
@@ -3714,7 +3711,7 @@ function CollapsibleSection({
   children,
   disabled
 }) {
-  const [open, setOpen] = React60.useState(true);
+  const [open, setOpen] = React61.useState(true);
   const titleText = typeof title === "string" || typeof title === "number" ? String(title) : "Section";
   return /* @__PURE__ */ jsxs(
     Collapsible,
@@ -3734,7 +3731,8 @@ function CollapsibleSection({
             className: cn(
               "flex w-full items-center justify-between gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wide",
               "text-muted-foreground hover:text-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-md",
+              focusRingClasses,
+              "focus-visible:rounded-md",
               "disabled:pointer-events-none disabled:opacity-50"
             ),
             children: [
@@ -4032,7 +4030,7 @@ function TokenGroupSection({
   disabled,
   labels
 }) {
-  const [open, setOpen] = React60.useState(groupId === "surface" || groupId === "brand");
+  const [open, setOpen] = React61.useState(groupId === "surface" || groupId === "brand");
   const labelText = typeof label === "string" || typeof label === "number" ? String(label) : "Group";
   return /* @__PURE__ */ jsxs(
     Collapsible,
@@ -4052,7 +4050,8 @@ function TokenGroupSection({
             className: cn(
               "flex w-full items-center justify-between gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wide",
               "text-muted-foreground hover:text-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-md",
+              focusRingClasses,
+              "focus-visible:rounded-md",
               "disabled:pointer-events-none disabled:opacity-50"
             ),
             "aria-label": labelText,
@@ -4364,7 +4363,7 @@ function normalizeCode(value, numeric, length) {
   const normalized = numeric ? value.replace(/\D/g, "") : value.replace(/\s/g, "");
   return normalized.slice(0, length);
 }
-var OtpInput = React60__default.forwardRef(
+var OtpInput = React61__default.forwardRef(
   ({
     value,
     onChange,
@@ -4546,8 +4545,8 @@ var TextAreaInput = ({ value, onChange, placeholder = "", className = "", varian
 };
 var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", loading = false, loadingMessage = "Loading...", onSearchChange, shouldFilter = true, value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, allowFreeText = false }) => {
   const [open, setOpen] = useState(false);
-  const triggerRef = React60__default.useRef(null);
-  const pointerDismissedRef = React60__default.useRef(false);
+  const triggerRef = React61__default.useRef(null);
+  const pointerDismissedRef = React61__default.useRef(false);
   const [query, setQuery] = useState("");
   const normalizedItems = items.map((item) => typeof item === "string" ? { value: item, label: item } : item);
   const selectedItem = normalizedItems.find((item) => item.value === value);
@@ -5934,7 +5933,7 @@ function DropdownMenuSubContent({ className, children, style, ...props }) {
   );
 }
 function DropdownMenuContent({ className, children, sideOffset = 4, style, ...props }) {
-  const container = React60.useContext(NajmThemeContainerCtx);
+  const container = React61.useContext(NajmThemeContainerCtx);
   const surface = useDropdownSurfaceRecipe("content");
   const { hostRef, viewportRef } = useNajmScrollViewport();
   useNajmPortalLayerStyles();
@@ -6338,8 +6337,8 @@ function NSlider({
     return Array.isArray(v) ? [...v] : [v];
   };
   const initialRadix = toRadix(controlledValue ?? defaultValue);
-  const [internalValues, setInternalValues] = React60.useState(initialRadix);
-  const [active, setActive] = React60.useState(null);
+  const [internalValues, setInternalValues] = React61.useState(initialRadix);
+  const [active, setActive] = React61.useState(null);
   const currentValues = controlledValue !== void 0 ? toRadix(controlledValue) : internalValues;
   const handleRadix = (arr) => {
     setInternalValues(arr);
@@ -6496,13 +6495,13 @@ function NThemePresets({
   disabled = false,
   className
 }) {
-  const [saveOpen, setSaveOpen] = React60.useState(false);
-  const [name, setName] = React60.useState("");
-  const [pendingDelete, setPendingDelete] = React60.useState(
+  const [saveOpen, setSaveOpen] = React61.useState(false);
+  const [name, setName] = React61.useState("");
+  const [pendingDelete, setPendingDelete] = React61.useState(
     null
   );
-  const [busy, setBusy] = React60.useState(false);
-  const rows = React60.useMemo(
+  const [busy, setBusy] = React61.useState(false);
+  const rows = React61.useMemo(
     () => [
       ...savedDesign ? [
         {
@@ -6754,12 +6753,12 @@ function NThemeCustomizer({
 }) {
   const inheritedMode = useNajmThemeMode();
   const resolvedPreviewMode = previewMode ?? inheritedMode ?? value.theme.mode ?? "light";
-  const visibleTabs = React60.useMemo(() => buildTabs(tabs), [tabs]);
+  const visibleTabs = React61.useMemo(() => buildTabs(tabs), [tabs]);
   const firstTab = visibleTabs[0] ?? "theme";
-  const [activeTab, setActiveTab] = React60.useState(TAB_VALUE[firstTab]);
-  const [fileError, setFileError] = React60.useState(false);
-  const fileInputRef = React60.useRef(null);
-  React60.useEffect(() => {
+  const [activeTab, setActiveTab] = React61.useState(TAB_VALUE[firstTab]);
+  const [fileError, setFileError] = React61.useState(false);
+  const fileInputRef = React61.useRef(null);
+  React61.useEffect(() => {
     setActiveTab(TAB_VALUE[firstTab]);
   }, [firstTab]);
   const themeLabel = resolveLabel("themeTab", labels);
@@ -6771,7 +6770,7 @@ function NThemeCustomizer({
   const invalidThemeFileLabel = resolveLabel("invalidThemeFile", labels);
   const defaultOptionLabel = resolveLabel("defaultOption", labels);
   const colorSwatchFallbackLabel = resolveLabel("colorSwatchFallback", labels);
-  const tokenLabels = React60.useMemo(() => {
+  const tokenLabels = React61.useMemo(() => {
     const out = {};
     const knownTokens = [
       "background",
@@ -7575,7 +7574,7 @@ function Alert({
   );
 }
 var NAlert = Alert;
-var NativeSelect = React60.forwardRef(
+var NativeSelect = React61.forwardRef(
   ({ className, options, placeholder, value, ...props }, ref) => {
     const hasValue = value !== void 0 && value !== "";
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -7628,10 +7627,20 @@ function ScrollArea({ className, children, ...props }) {
     }
   ) });
 }
-function NImage({ src, fallback, alt = "", ...rest }) {
-  const [failed, setFailed] = useState(null);
-  const resolved = failed === src && fallback ? fallback : src;
-  return /* @__PURE__ */ jsx("img", { ...rest, alt, src: resolved, onError: () => setFailed(src) });
+function NImage({ src, fallback, alt = "", onError, ...rest }) {
+  const chain = useImageChain(normalizeImageSources([src, fallback]));
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...rest,
+      alt,
+      src: chain.src ?? src,
+      onError: (event) => {
+        chain.markFailed();
+        onError?.(event);
+      }
+    }
+  );
 }
 var avatarVariants = cva(
   "relative flex shrink-0 overflow-hidden",
@@ -7723,7 +7732,7 @@ function Avatar({
   ...props
 }) {
   const hasShortcut = src !== void 0 || fallback !== void 0;
-  const hasChildren = React60.Children.count(children) > 0;
+  const hasChildren = React61.Children.count(children) > 0;
   return /* @__PURE__ */ jsxs(
     AvatarPrimitive.Root,
     {
@@ -7817,9 +7826,9 @@ function AvatarGroup({ ring = true, className, children, ...props }) {
       "data-slot": "avatar-group",
       className: cn("flex -space-x-2", className),
       ...props,
-      children: ring ? React60.Children.map(children, (child) => {
-        if (React60.isValidElement(child) && child.type === Avatar) {
-          return React60.cloneElement(child, { ring: true, ...child.props });
+      children: ring ? React61.Children.map(children, (child) => {
+        if (React61.isValidElement(child) && child.type === Avatar) {
+          return React61.cloneElement(child, { ring: true, ...child.props });
         }
         return child;
       }) : children
@@ -7886,7 +7895,7 @@ function Swap({
   className,
   ...props
 }) {
-  const [internalChecked, setInternalChecked] = React60.useState(defaultChecked);
+  const [internalChecked, setInternalChecked] = React61.useState(defaultChecked);
   const isControlled = controlledChecked !== void 0 || controlledState !== void 0;
   const currentState = getDerivedState(
     isControlled ? controlledChecked ?? false : internalChecked,
@@ -7894,7 +7903,7 @@ function Swap({
   );
   const dataState = currentState === "indeterminate" ? "indeterminate" : currentState ? "on" : "off";
   const ariaPressed = currentState === "indeterminate" ? "mixed" : currentState;
-  const handleClick = React60.useCallback((event) => {
+  const handleClick = React61.useCallback((event) => {
     onClick?.(event);
     if (event.defaultPrevented) return;
     if (disabled) return;
@@ -8019,7 +8028,7 @@ var toneClasses = {
     ring: "border-primary/30"
   }
 };
-var StatusPill = React60.forwardRef(
+var StatusPill = React61.forwardRef(
   ({ className, tone = "neutral", pulse = false, label, ...props }, ref) => {
     const c = toneClasses[tone];
     return /* @__PURE__ */ jsxs(
@@ -8078,20 +8087,20 @@ function Toaster({ toastOptions, ...props }) {
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React60.createContext({});
+var FormFieldContext = React61.createContext({});
 var FormField = ({ ...props }) => /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 var useFormField = () => {
-  const fieldContext = React60.useContext(FormFieldContext);
-  const itemContext = React60.useContext(FormItemContext);
+  const fieldContext = React61.useContext(FormFieldContext);
+  const itemContext = React61.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
   const { id } = itemContext;
   return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState };
 };
-var FormItemContext = React60.createContext({});
+var FormItemContext = React61.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React60.useId();
+  const id = React61.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
@@ -8136,116 +8145,7 @@ function TableCell({ className, ...props }) {
 function TableCaption({ className, ...props }) {
   return /* @__PURE__ */ jsx("caption", { "data-slot": "table-caption", className: cn("text-muted-foreground mt-4 text-sm", className), ...props });
 }
-var Default = ({ className, ...props }) => /* @__PURE__ */ jsx(LoaderIcon, { className: cn("animate-spin", className), ...props });
-var Circle = ({ className, ...props }) => /* @__PURE__ */ jsx(LoaderCircleIcon, { className: cn("animate-spin", className), ...props });
-var Pinwheel = ({ className, ...props }) => /* @__PURE__ */ jsx(LoaderPinwheelIcon, { className: cn("animate-spin", className), ...props });
-var CircleFilled = ({ className, size = 24, ...props }) => /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
-  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rotate-180", children: /* @__PURE__ */ jsx(LoaderCircleIcon, { className: cn("animate-spin", className, "text-foreground opacity-20"), size, ...props }) }),
-  /* @__PURE__ */ jsx(LoaderCircleIcon, { className: cn("relative animate-spin", className), size, ...props })
-] });
-var Ellipsis = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs("svg", { height: size, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsx("title", { children: "Loading..." }),
-  /* @__PURE__ */ jsx("circle", { cx: "4", cy: "12", fill: "currentColor", r: "2", children: /* @__PURE__ */ jsx("animate", { attributeName: "cy", begin: "0;ellipsis3.end+0.25s", calcMode: "spline", dur: "0.6s", id: "ellipsis1", keySplines: ".33,.66,.66,1;.33,0,.66,.33", values: "12;6;12" }) }),
-  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", fill: "currentColor", r: "2", children: /* @__PURE__ */ jsx("animate", { attributeName: "cy", begin: "ellipsis1.begin+0.1s", calcMode: "spline", dur: "0.6s", keySplines: ".33,.66,.66,1;.33,0,.66,.33", values: "12;6;12" }) }),
-  /* @__PURE__ */ jsx("circle", { cx: "20", cy: "12", fill: "currentColor", r: "2", children: /* @__PURE__ */ jsx("animate", { attributeName: "cy", begin: "ellipsis1.begin+0.2s", calcMode: "spline", dur: "0.6s", id: "ellipsis3", keySplines: ".33,.66,.66,1;.33,0,.66,.33", values: "12;6;12" }) })
-] });
-var Ring = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs("svg", { height: size, stroke: "currentColor", viewBox: "0 0 44 44", width: size, xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsx("title", { children: "Loading..." }),
-  /* @__PURE__ */ jsxs("g", { fill: "none", fillRule: "evenodd", strokeWidth: "2", children: [
-    /* @__PURE__ */ jsxs("circle", { cx: "22", cy: "22", r: "1", children: [
-      /* @__PURE__ */ jsx("animate", { attributeName: "r", begin: "0s", calcMode: "spline", dur: "1.8s", keySplines: "0.165, 0.84, 0.44, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 20" }),
-      /* @__PURE__ */ jsx("animate", { attributeName: "stroke-opacity", begin: "0s", calcMode: "spline", dur: "1.8s", keySplines: "0.3, 0.61, 0.355, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 0" })
-    ] }),
-    /* @__PURE__ */ jsxs("circle", { cx: "22", cy: "22", r: "1", children: [
-      /* @__PURE__ */ jsx("animate", { attributeName: "r", begin: "-0.9s", calcMode: "spline", dur: "1.8s", keySplines: "0.165, 0.84, 0.44, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 20" }),
-      /* @__PURE__ */ jsx("animate", { attributeName: "stroke-opacity", begin: "-0.9s", calcMode: "spline", dur: "1.8s", keySplines: "0.3, 0.61, 0.355, 1", keyTimes: "0; 1", repeatCount: "indefinite", values: "1; 0" })
-    ] })
-  ] })
-] });
-var Bars = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs("svg", { height: size, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsx("title", { children: "Loading..." }),
-  /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "4", rx: "1", width: "4", x: "1", y: "10", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", begin: "0s", dur: "0.6s", keyTimes: "0;0.5;1", repeatCount: "indefinite", values: "1;0.3;1" }) }),
-  /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "4", rx: "1", width: "4", x: "10", y: "10", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", begin: "0.1s", dur: "0.6s", keyTimes: "0;0.5;1", repeatCount: "indefinite", values: "1;0.3;1" }) }),
-  /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "4", rx: "1", width: "4", x: "19", y: "10", children: /* @__PURE__ */ jsx("animate", { attributeName: "opacity", begin: "0.2s", dur: "0.6s", keyTimes: "0;0.5;1", repeatCount: "indefinite", values: "1;0.3;1" }) })
-] });
-var Infinite = ({ size = 24, ...props }) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    height: size,
-    preserveAspectRatio: "xMidYMid",
-    viewBox: "0 0 100 100",
-    width: size,
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("title", { children: "Loading..." }),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z",
-          fill: "none",
-          stroke: "currentColor",
-          strokeDasharray: "205.271142578125 51.317785644531256",
-          strokeLinecap: "round",
-          strokeWidth: "10",
-          style: { transform: "scale(0.8)", transformOrigin: "50px 50px" },
-          children: /* @__PURE__ */ jsx(
-            "animate",
-            {
-              attributeName: "stroke-dashoffset",
-              dur: "2s",
-              keyTimes: "0;1",
-              repeatCount: "indefinite",
-              values: "0;256.58892822265625"
-            }
-          )
-        }
-      )
-    ]
-  }
-);
-var spinnerVariants = {
-  default: Default,
-  circle: Circle,
-  pinwheel: Pinwheel,
-  "circle-filled": CircleFilled,
-  ellipsis: Ellipsis,
-  ring: Ring,
-  bars: Bars,
-  infinite: Infinite
-};
-function NSpinner({ variant = "default", size = 24, className, ...props }) {
-  const Component = spinnerVariants[variant] || Default;
-  return /* @__PURE__ */ jsx(Component, { className, size, ...props });
-}
-function NLoadingState({ label = "Loading...", className, fullScreen = false, spinnerVariant = "circle", spinnerSize = 32 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-3 py-8", fullScreen && "fixed inset-0 z-50 bg-background/80", className), children: [
-    /* @__PURE__ */ jsx(NSpinner, { variant: spinnerVariant, size: spinnerSize }),
-    label && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: label })
-  ] });
-}
-function NErrorState({ title = "Something went wrong", message, onRetry, retryLabel = "Try again", className, icon }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 py-8", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "text-destructive", children: icon || /* @__PURE__ */ jsx(AlertTriangle, { className: "h-10 w-10" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: title }),
-      message && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mt-1", children: message })
-    ] }),
-    onRetry && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onRetry, children: retryLabel })
-  ] });
-}
-function NEmptyState({ title = "No data", description, icon, action, className }) {
-  const iconContent = icon ? React60__default.isValidElement(icon) ? icon : React60__default.createElement(icon, { className: "h-8 w-8" }) : null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12", className), children: [
-    iconContent && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/50", children: iconContent }),
-    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mt-1", children: description })
-    ] }),
-    action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
-  ] });
-}
-var NErrorBoundary = class extends React60__default.Component {
+var NErrorBoundary = class extends React61__default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -8393,11 +8293,6 @@ function nameToColor(name) {
 function getInitials(name) {
   return name.split(" ").map((part) => part.charAt(0)).join("").toUpperCase().slice(0, 2);
 }
-function withVersion(src, version) {
-  if (!version || src.startsWith("data:") || src.startsWith("blob:")) return src;
-  const separator = src.includes("?") ? "&" : "?";
-  return `${src}${separator}v=${encodeURIComponent(String(version))}`;
-}
 function NAvatar({
   src,
   title,
@@ -8411,30 +8306,63 @@ function NAvatar({
   subtitle,
   meta,
   className,
-  classNames
+  classNames,
+  imageProps
 }) {
   const label = title || fallback || "";
   const imageVersion = srcVersion ?? version;
-  const resolvedSrc = resolveAvatarSrc(src, void 0);
-  const imageSrc = resolvedSrc ? withVersion(resolvedSrc, imageVersion) : fallbackSrc;
+  const sources = normalizeImageSources(
+    [resolveAvatarSrc(src, void 0), fallbackSrc],
+    imageVersion
+  );
+  const chain = useImageChain(sources);
   const { bg, text } = nameToColor(label);
   const hasText = Boolean(title || subtitle || meta);
   const fallbackText = fallback && !title ? fallback : label ? getInitials(label) : "?";
   const shapeClass = SHAPE_CLASSES[shape];
+  const {
+    onLoad: onImageLoad,
+    onError: onImageError,
+    loading: imageLoading,
+    ...restImageProps
+  } = imageProps ?? {};
+  const imageRef = React61__default.useRef(null);
+  const { markLoaded } = chain;
+  React61__default.useEffect(() => {
+    const element = imageRef.current;
+    if (element?.complete && element.naturalWidth > 0) markLoaded();
+  }, [chain.src, markLoaded]);
+  const showImage = Boolean(chain.src) && !chain.exhausted;
+  const showFallback = !showImage || !chain.loaded;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", classNames?.root, className), children: [
     /* @__PURE__ */ jsxs(
       Avatar,
       {
-        className: cn(SIZE_CLASSES[size], shapeClass, "flex justify-center items-center overflow-hidden", classNames?.avatar),
+        className: cn(SIZE_CLASSES[size], shapeClass, "flex justify-center items-center overflow-hidden bg-muted", classNames?.avatar),
         children: [
-          imageSrc && /* @__PURE__ */ jsx(
-            AvatarImage,
+          showImage && /* @__PURE__ */ jsx(
+            "img",
             {
-              src: imageSrc,
+              ...restImageProps,
+              ref: imageRef,
+              "data-slot": "avatar-image",
+              src: chain.src,
               alt: alt || label,
-              className: cn("object-cover", classNames?.image)
+              loading: imageLoading ?? "lazy",
+              className: cn("absolute inset-0 size-full object-cover", classNames?.image),
+              onLoad: (event) => {
+                markLoaded();
+                onImageLoad?.(event);
+              },
+              onError: (event) => {
+                chain.markFailed();
+                onImageError?.(event);
+              }
             }
           ),
+          showFallback && // Mounted by this component rather than by Radix's loading status:
+          // the status is driven by a preloader we deliberately do not use, so
+          // the visibility decision belongs here alongside the chain state.
           /* @__PURE__ */ jsx(
             AvatarFallback,
             {
@@ -8555,8 +8483,8 @@ function NCard({
   let footerClassName;
   let mediaSlot = null;
   const mainChildren = [];
-  React60__default.Children.forEach(children, (child) => {
-    if (!React60__default.isValidElement(child)) {
+  React61__default.Children.forEach(children, (child) => {
+    if (!React61__default.isValidElement(child)) {
       mainChildren.push(child);
       return;
     }
@@ -8732,7 +8660,7 @@ function truncateByCharacters(text, maxCharacters, suffix = "...") {
   const str = String(text);
   return str.length <= maxCharacters ? str : str.slice(0, maxCharacters) + suffix;
 }
-var CardDensityContext = React60__default.createContext("default");
+var CardDensityContext = React61__default.createContext("default");
 function NCardInfo({
   icon: Icon2,
   label,
@@ -8745,7 +8673,7 @@ function NCardInfo({
   className,
   ...props
 }) {
-  const inheritedDensity = React60__default.useContext(CardDensityContext);
+  const inheritedDensity = React61__default.useContext(CardDensityContext);
   const resolvedDensity = density ?? inheritedDensity;
   const isTruncated = typeof value === "string" && value.length > maxChars;
   const displayValue = isTruncated ? truncateByCharacters(value, maxChars) : value;
@@ -9994,7 +9922,7 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
       children: items.map((item) => {
         const Icon2 = item.icon;
         const hasSub = !!item.submenu?.length;
-        return /* @__PURE__ */ jsxs(React60__default.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React61__default.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border/60" }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -10395,6 +10323,224 @@ function FloatingSelectSegment({
     )) })
   ] });
 }
+var DEFAULT_COPY_LABEL = "Copy details";
+var DEFAULT_COPIED_LABEL = "Copied";
+var DEFAULT_COPY_ERROR_LABEL = "Copy failed";
+var DEFAULT_HEADER_ICON = "circle-check";
+var REVERT_MS = 2e3;
+function defaultCopyText(fields) {
+  return fields.map((f) => `${f.label}: ${f.value}`).join("\n");
+}
+function resolveClipboard() {
+  if (typeof navigator === "undefined") return null;
+  const clipboard = navigator.clipboard;
+  if (!clipboard || typeof clipboard.writeText !== "function") return null;
+  return { writeText: clipboard.writeText.bind(clipboard) };
+}
+function NCredentialsCard({
+  fields,
+  title,
+  description,
+  icon,
+  copyLabel = DEFAULT_COPY_LABEL,
+  copiedLabel = DEFAULT_COPIED_LABEL,
+  copyErrorLabel = DEFAULT_COPY_ERROR_LABEL,
+  copyText,
+  hideCopyAction = false,
+  onCopy,
+  onCopyError,
+  actions,
+  className,
+  classNames
+}) {
+  const [status, setStatus] = React61.useState("idle");
+  const revertTimer = React61.useRef(null);
+  const mountedRef = React61.useRef(true);
+  const requestTokenRef = React61.useRef(0);
+  React61.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (revertTimer.current) clearTimeout(revertTimer.current);
+      revertTimer.current = null;
+    };
+  }, []);
+  const scheduleRevert = React61.useCallback(() => {
+    if (revertTimer.current) clearTimeout(revertTimer.current);
+    revertTimer.current = setTimeout(() => {
+      revertTimer.current = null;
+      if (mountedRef.current) setStatus("idle");
+    }, REVERT_MS);
+  }, []);
+  const handleCopy = React61.useCallback(() => {
+    if (status === "pending") return;
+    if (revertTimer.current) {
+      clearTimeout(revertTimer.current);
+      revertTimer.current = null;
+    }
+    const token = ++requestTokenRef.current;
+    const isStale = () => !mountedRef.current || token !== requestTokenRef.current;
+    let text;
+    try {
+      text = (copyText ?? defaultCopyText)(fields);
+    } catch (error) {
+      if (isStale()) return;
+      setStatus("error");
+      onCopyError?.(error);
+      scheduleRevert();
+      return;
+    }
+    const clipboard = resolveClipboard();
+    if (!clipboard) {
+      if (isStale()) return;
+      setStatus("error");
+      onCopyError?.(new Error("Clipboard is not available in this context."));
+      scheduleRevert();
+      return;
+    }
+    setStatus("pending");
+    let promise;
+    try {
+      promise = clipboard.writeText(text);
+    } catch (error) {
+      if (isStale()) return;
+      setStatus("error");
+      onCopyError?.(error);
+      scheduleRevert();
+      return;
+    }
+    promise.then(
+      () => {
+        if (isStale()) return;
+        setStatus("success");
+        onCopy?.();
+        scheduleRevert();
+      },
+      (error) => {
+        if (isStale()) return;
+        setStatus("error");
+        onCopyError?.(error);
+        scheduleRevert();
+      }
+    );
+  }, [copyText, fields, onCopy, onCopyError, scheduleRevert, status]);
+  const showHeader = Boolean(title || description);
+  const showFields = fields.length > 0;
+  const showActions = !hideCopyAction || Boolean(actions);
+  const buttonLabel = status === "success" ? copiedLabel : status === "error" ? copyErrorLabel : copyLabel;
+  const headerIcon = icon ?? DEFAULT_HEADER_ICON;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col rounded-lg border bg-card p-5 shadow-sm",
+        classNames?.root,
+        className
+      ),
+      "data-testid": "credentials-card",
+      children: [
+        showHeader && /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3 mb-4", classNames?.header), children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex items-center justify-center w-10 h-10 rounded-full bg-muted shrink-0",
+              "data-testid": "credentials-card-header-icon",
+              children: /* @__PURE__ */ jsx(
+                NIcon,
+                {
+                  "aria-hidden": "true",
+                  icon: headerIcon,
+                  className: "w-5 h-5 text-muted-foreground"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+          ] })
+        ] }),
+        showFields && /* @__PURE__ */ jsx("dl", { className: cn("space-y-3", classNames?.list), "data-testid": "credentials-card-list", children: fields.map((field, index) => {
+          const useMono = field.mono ?? true;
+          const breakAll = field.breakAll ?? true;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-3 rounded-xl bg-background px-4 py-3",
+                classNames?.field
+              ),
+              "data-testid": "credentials-card-field",
+              children: [
+                field.icon && /* @__PURE__ */ jsx(
+                  NIcon,
+                  {
+                    "aria-hidden": "true",
+                    icon: field.icon,
+                    className: "w-4 h-4 text-muted-foreground shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: field.label }),
+                  /* @__PURE__ */ jsx(
+                    "dd",
+                    {
+                      dir: "auto",
+                      className: cn(
+                        "text-sm text-foreground font-semibold",
+                        useMono && "font-mono",
+                        breakAll && "break-all"
+                      ),
+                      children: field.value
+                    }
+                  )
+                ] })
+              ]
+            },
+            `${field.label}-${index}`
+          );
+        }) }),
+        showActions && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-5 flex justify-end gap-3 flex-wrap",
+              classNames?.actions
+            ),
+            "data-testid": "credentials-card-actions",
+            children: [
+              !hideCopyAction && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  leftIcon: status === "success" ? Check : status === "error" ? X : Copy,
+                  onClick: handleCopy,
+                  loading: status === "pending",
+                  disabledWhileLoading: true,
+                  "data-testid": "credentials-card-copy",
+                  children: buttonLabel
+                }
+              ),
+              actions
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-live": "polite",
+            role: "status",
+            className: "sr-only",
+            "data-testid": "credentials-card-status",
+            children: status === "success" ? copiedLabel : status === "error" ? copyErrorLabel : ""
+          }
+        )
+      ]
+    }
+  );
+}
+NCredentialsCard.displayName = "NCredentialsCard";
 function SearchField({ value, onChange, placeholder = "Search...", className }) {
   return /* @__PURE__ */ jsxs("div", { className: `relative ${className ?? ""}`, children: [
     /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }),
@@ -10466,19 +10612,19 @@ function Combobox({
   allowFreeText = false,
   disabled = false
 }) {
-  const [open, setOpen] = React60.useState(false);
-  const [query, setQuery] = React60.useState("");
-  const [highlight, setHighlight] = React60.useState(0);
-  const wrapperRef = React60.useRef(null);
-  const inputRef = React60.useRef(null);
-  const filtered = React60.useMemo(() => {
+  const [open, setOpen] = React61.useState(false);
+  const [query, setQuery] = React61.useState("");
+  const [highlight, setHighlight] = React61.useState(0);
+  const wrapperRef = React61.useRef(null);
+  const inputRef = React61.useRef(null);
+  const filtered = React61.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return options;
     return options.filter(
       (opt) => opt.label.toLowerCase().includes(q) || opt.value.toLowerCase().includes(q)
     );
   }, [options, query]);
-  React60.useEffect(() => {
+  React61.useEffect(() => {
     if (!open) return;
     const onClick = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
@@ -10489,7 +10635,7 @@ function Combobox({
     document.addEventListener("mousedown", onClick);
     return () => document.removeEventListener("mousedown", onClick);
   }, [open]);
-  React60.useEffect(() => {
+  React61.useEffect(() => {
     if (open) {
       setHighlight(0);
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -10497,7 +10643,7 @@ function Combobox({
       setQuery("");
     }
   }, [open]);
-  const selectedLabel = React60.useMemo(() => {
+  const selectedLabel = React61.useMemo(() => {
     const match = options.find((o) => o.value === value);
     return match?.label ?? value;
   }, [options, value]);
@@ -11871,8 +12017,8 @@ function useTable(effectiveViewModeOverride) {
         ...effectiveColumns,
         {
           id: "actions",
-          header: () => isMenuActions ? null : React60__default.createElement("div", { className: "flex w-full justify-start text-left" }, "Actions"),
-          cell: ({ row }) => React60__default.createElement(TableActionCell, { row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }),
+          header: () => isMenuActions ? null : React61__default.createElement("div", { className: "flex w-full justify-start text-left" }, "Actions"),
+          cell: ({ row }) => React61__default.createElement(TableActionCell, { row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }),
           enableSorting: false,
           enableHiding: false
         }
@@ -12136,10 +12282,10 @@ function EditableCell({ cell, onCellEdit }) {
   const columnId = cell.column.id;
   const editor = meta.editor || "text";
   const initial = cell.getValue();
-  const [editing, setEditing] = React60__default.useState(false);
-  const [value, setValue] = React60__default.useState(initial);
-  const [saving, setSaving] = React60__default.useState(false);
-  React60__default.useEffect(() => {
+  const [editing, setEditing] = React61__default.useState(false);
+  const [value, setValue] = React61__default.useState(initial);
+  const [saving, setSaving] = React61__default.useState(false);
+  React61__default.useEffect(() => {
     if (!editing) setValue(initial);
   }, [initial, editing]);
   const commit = async (next) => {
@@ -12310,7 +12456,7 @@ function NTableContent({ effectiveMode }) {
           const isExpanded = canExpand && row.getIsExpanded();
           const totalCols = row.getVisibleCells().length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0);
           const rowClassName = getRowClassName?.(row.original);
-          return /* @__PURE__ */ jsxs(React60__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React61__default.Fragment, { children: [
             /* @__PURE__ */ jsxs(
               TableRow,
               {
@@ -12569,7 +12715,7 @@ function NTableCardSkeleton({ surface }) {
 }
 function NTableLoadingSkeleton({ rows }) {
   const rawColumns = useTableStore.use.columns();
-  const responsiveColumns = React60__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
+  const responsiveColumns = React61__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
   const columns = responsiveColumns;
   const showCheckbox = useTableStore.use.showCheckbox();
   const headerClassName = useTableStore.use.headerClassName();
@@ -12692,19 +12838,19 @@ function useCardContinuation({
   rowCount,
   viewportRef
 }) {
-  const [internalPending, setInternalPending] = React60__default.useState(false);
-  const [internalError, setInternalError] = React60__default.useState(null);
-  const [announcement, setAnnouncement] = React60__default.useState("");
-  const [viewportReady, setViewportReady] = React60__default.useState(false);
-  const pendingRef = React60__default.useRef(false);
-  const previousRowCountRef = React60__default.useRef(rowCount);
-  const configRef = React60__default.useRef(config);
+  const [internalPending, setInternalPending] = React61__default.useState(false);
+  const [internalError, setInternalError] = React61__default.useState(null);
+  const [announcement, setAnnouncement] = React61__default.useState("");
+  const [viewportReady, setViewportReady] = React61__default.useState(false);
+  const pendingRef = React61__default.useRef(false);
+  const previousRowCountRef = React61__default.useRef(rowCount);
+  const configRef = React61__default.useRef(config);
   configRef.current = config;
   const enabled = Boolean(config);
   const pending = Boolean(config?.loadingMore || internalPending);
   const error = config?.loadMoreError ?? internalError;
   const hasNextPage = Boolean(config?.hasNextPage);
-  const load = React60__default.useCallback(async () => {
+  const load = React61__default.useCallback(async () => {
     const current = configRef.current;
     if (!current) return;
     if (pendingRef.current || current.loadingMore || !current.hasNextPage) return;
@@ -12729,13 +12875,13 @@ function useCardContinuation({
     load,
     { rootMargin: config?.rootMargin ?? DEFAULT_ROOT_MARGIN }
   );
-  React60__default.useLayoutEffect(() => {
+  React61__default.useLayoutEffect(() => {
     const node = viewportRef.current ?? null;
     scrollContainerRef.current = node;
     const ready = Boolean(node);
     setViewportReady((value) => value === ready ? value : ready);
   });
-  React60__default.useEffect(() => {
+  React61__default.useEffect(() => {
     const previous = previousRowCountRef.current;
     previousRowCountRef.current = rowCount;
     if (!configRef.current) return;
@@ -12745,10 +12891,10 @@ function useCardContinuation({
       configRef.current.itemsLoadedLabel?.(appended) ?? `${appended} more ${appended === 1 ? "item" : "items"} loaded.`
     );
   }, [rowCount]);
-  React60__default.useEffect(() => {
+  React61__default.useEffect(() => {
     if (!pending) doneLoading();
   }, [pending, doneLoading]);
-  React60__default.useEffect(() => {
+  React61__default.useEffect(() => {
     if (!enabled || !hasNextPage || error) return;
     return observe();
   }, [enabled, hasNextPage, error, observe, viewportReady, rowCount]);
@@ -12802,7 +12948,7 @@ function NTableCards({ effectiveMode }) {
   const cardPagination = useTableStore.use.cardPagination();
   const cardColumnCount = useTableStore.use.cardColumnCount();
   const surface = useTableSurfaceAppearance(bordered, borderColor);
-  const viewportRef = React60__default.useRef(null);
+  const viewportRef = React61__default.useRef(null);
   const continuationConfig = cardPagination.mode === "infinite" ? cardPagination : null;
   const continuation = useCardContinuation({
     config: continuationConfig,
@@ -13023,17 +13169,17 @@ function CardLoadMorePagination({
   bordered,
   className
 }) {
-  const [internalPending, setInternalPending] = React60__default.useState(false);
-  const [internalError, setInternalError] = React60__default.useState(null);
-  const [announcement, setAnnouncement] = React60__default.useState("");
-  const buttonRef = React60__default.useRef(null);
-  const pendingRef = React60__default.useRef(false);
-  const restoreFocusRef = React60__default.useRef(false);
-  const previousRowCountRef = React60__default.useRef(rowCount);
-  const errorId = React60__default.useId();
+  const [internalPending, setInternalPending] = React61__default.useState(false);
+  const [internalError, setInternalError] = React61__default.useState(null);
+  const [announcement, setAnnouncement] = React61__default.useState("");
+  const buttonRef = React61__default.useRef(null);
+  const pendingRef = React61__default.useRef(false);
+  const restoreFocusRef = React61__default.useRef(false);
+  const previousRowCountRef = React61__default.useRef(rowCount);
+  const errorId = React61__default.useId();
   const pending = Boolean(config.loadingMore || internalPending);
   const error = config.loadMoreError ?? internalError;
-  React60__default.useEffect(() => {
+  React61__default.useEffect(() => {
     const previous = previousRowCountRef.current;
     if (rowCount > previous) {
       const appended = rowCount - previous;
@@ -13043,7 +13189,7 @@ function CardLoadMorePagination({
     }
     previousRowCountRef.current = rowCount;
   }, [config.itemsLoadedLabel, rowCount]);
-  React60__default.useEffect(() => {
+  React61__default.useEffect(() => {
     if (pending || !restoreFocusRef.current) return;
     restoreFocusRef.current = false;
     const frame = requestAnimationFrame(() => buttonRef.current?.focus());
@@ -13113,9 +13259,9 @@ function CardLoadMorePagination({
 var navButtonClass = "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70";
 var chevronClass = "h-4 w-4 rtl:-scale-x-100";
 function useLowerBoundPageCountWarning(manualPagination, pageCount, pagination) {
-  const previous = React60__default.useRef(null);
-  const warned = React60__default.useRef(false);
-  React60__default.useEffect(() => {
+  const previous = React61__default.useRef(null);
+  const warned = React61__default.useRef(false);
+  React61__default.useEffect(() => {
     if (typeof console === "undefined") return;
     if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
     if (!manualPagination || pageCount === void 0 || !pagination) {
@@ -15005,7 +15151,7 @@ function NNavbar({
               (userMenuActions.length > 0 || onLogout) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
               userMenuActions.map((action) => {
                 const ActionIcon = action.icon;
-                return /* @__PURE__ */ jsxs(React60__default.Fragment, { children: [
+                return /* @__PURE__ */ jsxs(React61__default.Fragment, { children: [
                   action.separator && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
                   /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: action.onClick, className: "cursor-pointer", children: [
                     ActionIcon && /* @__PURE__ */ jsx(ActionIcon, { className: "h-4 w-4 mr-2" }),
@@ -15158,37 +15304,6 @@ function NCommandPalette({
     ] })
   ] });
 }
-function NPageLayout({
-  as: Comp = "main",
-  className,
-  style,
-  ...props
-}) {
-  const { layout } = useNajmDesign();
-  const pageGutter = layout?.pageGutter ?? "var(--page-gutter, 24px)";
-  const sectionGap = layout?.sectionGap ?? "var(--section-gap, 20px)";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      className: cn("flex min-w-0 flex-col", className),
-      style: {
-        /**
-         * Published so descendants can cancel the page padding exactly. A
-         * full-bleed child (a non-card NPageHeader) cannot guess these: the
-         * design config resolves them to literals, not to the `--page-gutter`
-         * / `--section-gap` fallbacks.
-         */
-        "--najm-page-gutter": pageGutter,
-        "--najm-section-gap": sectionGap,
-        gap: sectionGap,
-        paddingInline: pageGutter,
-        paddingBlock: sectionGap,
-        ...style
-      },
-      ...props
-    }
-  );
-}
 function NInspectorSheet({ open, onClose, title, children }) {
   useEffect(() => {
     const handleKey = (e) => {
@@ -15275,4 +15390,4 @@ function NGridItem({
   return /* @__PURE__ */ jsx("div", { className: itemClassName, ...props, children });
 }
 
-export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, AvatarGroup, AvatarImage, AvatarInput, AvatarStatus, Badge, BaseInput, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DEFAULT_THEME_FILE_NAME, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Indicator4 as Indicator, Input, Label2 as Label, LangInput, MultiSelectInput, NAJM_COLOR_TEXT_CLASSES, NAJM_SAVED_THEME_VALUE, NAJM_STATUS_COLORS, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBarChart, NBulkActionsBar, NCard, NCardAction, NCardFooter, NCardInfo, NCardMedia, NCardSection, NChartSkeleton, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NDonutCard, NEditorTabs, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NGrid, NGridItem, NImage, NIndicator, NInspectorSheet, NLineChart, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderCompactActions, NPageHeaderFilters, NPageHeaderTop, NPageLayout, NPieChart, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarBrand, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarMobile, NSidebarProvider, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, NStatusBreakdown, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NThemeCustomizer, NThemePresets, NUploader, NViewBody, NViewToggle, NativeSelect, NumberInput, OtpInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, SliderInput, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, TimeZoneInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buildPageItems, colorTextClass, createDialogStore, createTableStore, detectFormat, dialogVariants, filterResponsiveColumns, findStatusColor, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNChartColor, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, normalizeThemeFileName, parseColor, parseThemeFile, resolveHiddenBelowClass, resolveSlot, resolveStatusColor, sliderVariants, statusTextClass, stringifyThemeFile, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNSidebar, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useVariant, useVariantPreset };
+export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, AvatarGroup, AvatarImage, AvatarInput, AvatarStatus, Badge, BaseInput, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DEFAULT_THEME_FILE_NAME, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Indicator4 as Indicator, Input, Label2 as Label, LangInput, MultiSelectInput, NAJM_SAVED_THEME_VALUE, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBarChart, NBulkActionsBar, NCard, NCardAction, NCardFooter, NCardInfo, NCardMedia, NCardSection, NChartSkeleton, NCommandPalette, NConfirmDialog, NContextMenu, NCredentialsCard, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NDonutCard, NEditorTabs, NErrorBoundary, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NGrid, NGridItem, NImage, NIndicator, NInspectorSheet, NLineChart, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderCompactActions, NPageHeaderFilters, NPageHeaderTop, NPieChart, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarBrand, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarMobile, NSidebarProvider, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NStatCard, NStatCardSkeleton, NStatusBreakdown, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NThemeCustomizer, NThemePresets, NUploader, NViewBody, NViewToggle, NativeSelect, NumberInput, OtpInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, SliderInput, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, TimeZoneInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buildPageItems, createDialogStore, createTableStore, detectFormat, dialogVariants, filterResponsiveColumns, focusRingClasses, focusRingWithinClasses, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNChartColor, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, normalizeThemeFileName, parseColor, parseThemeFile, resolveHiddenBelowClass, resolveSlot, sliderVariants, stringifyThemeFile, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNSidebar, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useVariant, useVariantPreset };