najm-kit 2.6.2 → 2.6.4

package/dist/index.mjs

@@ -1,12 +1,14 @@
-import * as React from 'react';
-import React__default, { createContext, useRef, useMemo, useContext, useState, useEffect, useCallback, useLayoutEffect } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { useResolvedPaginationLabels } from './chunk-JZJCQBOH.mjs';
+export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, NTableDefaultsProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, useNTableDefaults, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone } from './chunk-JZJCQBOH.mjs';
+import { resolveRadiusValue, inputBorderClasses, cn, Button, NIcon, NajmScroll, surfaceBorderClasses, useNajmScrollViewport, resolveVariantAlias, buttonVariants, NButton, parseNajmDesignConfig, useTableStore, TableStoreContext, sidebarBorderClasses, NTableJson } from './chunk-4DLRXB2W.mjs';
+export { Button, NAJM_COMPONENT_NAMES, NButton, NIcon, NTableJson, NajmScroll, RADIUS_VALUE_MAP, TableStoreContext, buttonVariants, cn, defineNajmDesignConfig, defineNajmThemeConfig, inputBorderClasses, parseNajmDesignConfig, parseNajmThemeConfig, resolveRadiusValue, resolveVariantAlias, sidebarBorderClasses, stringifyNajmDesignConfig, stringifyNajmThemeConfig, surfaceBorderClasses, useTableStore } from './chunk-4DLRXB2W.mjs';
+import { useNajmComponentStyle, NajmThemeContainerCtx, useNajmThemeMode, useNajmDesign, composePreset } from './chunk-YBM5CTE6.mjs';
+export { NajmDesignProvider, NajmThemeProvider, composePreset, resolvePreset, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode } from './chunk-YBM5CTE6.mjs';
+import * as React60 from 'react';
+import React60__default, { createContext, useRef, useMemo, useState, useEffect, useContext, useCallback, useLayoutEffect, isValidElement } from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as LucideIcons from 'lucide-react';
-import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, 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, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
+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 * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { HexColorPicker } from 'react-colorful';
@@ -15,10 +17,9 @@ import { converter, parse, formatHsl, formatRgb, formatHex } from 'culori';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { Command as Command$1 } from 'cmdk';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { OverlayScrollbars } from 'overlayscrollbars';
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { create } from 'zustand';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Slot } from '@radix-ui/react-slot';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -39,310 +40,6 @@ 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/provider.tsx
-
-// src/theme/presets/modes.ts
-var lightMode = {
-  background: "oklch(1 0 0)",
-  foreground: "oklch(0.1445 0 0)",
-  card: "oklch(1 0 0)",
-  "card-foreground": "oklch(0.1445 0 0)",
-  popover: "oklch(1 0 0)",
-  "popover-foreground": "oklch(0.1445 0 0)",
-  secondary: "oklch(0.9703 0 0)",
-  "secondary-foreground": "oklch(0.2044 0 0)",
-  tertiary: "oklch(0.9676 0.007 247.897)",
-  "tertiary-foreground": "oklch(0.3138 0.0453 249.447)",
-  muted: "oklch(0.9703 0 0)",
-  "muted-foreground": "oklch(0.5555 0 0)",
-  accent: "oklch(0.9703 0 0)",
-  "accent-foreground": "oklch(0.2044 0 0)",
-  destructive: "oklch(0.6368 0.2078 25.326)",
-  "destructive-foreground": "oklch(0.9848 0 0)",
-  border: "oklch(0.9219 0 0)",
-  input: "oklch(0.9219 0 0)",
-  radius: "0.5rem",
-  sidebar: "oklch(0.985 0 0)",
-  "sidebar-foreground": "oklch(0.1445 0 0)",
-  "sidebar-primary": "oklch(0.2228 0.0043 286.044)",
-  "sidebar-primary-foreground": "oklch(0.9848 0 0)",
-  "sidebar-accent": "oklch(0.9703 0 0)",
-  "sidebar-accent-foreground": "oklch(0.2044 0 0)",
-  "sidebar-border": "oklch(0.9219 0 0)",
-  "sidebar-ring": "oklch(0.2228 0.0043 286.044)"
-};
-var darkMode = {
-  background: "oklch(0.1417 0.0044 285.819)",
-  foreground: "oklch(0.9683 0.0014 286.375)",
-  card: "oklch(0.1872 0.0066 285.748)",
-  "card-foreground": "oklch(0.9683 0.0014 286.375)",
-  popover: "oklch(0.1872 0.0066 285.748)",
-  "popover-foreground": "oklch(0.9683 0.0014 286.375)",
-  secondary: "oklch(0.2313 0.007 285.839)",
-  "secondary-foreground": "oklch(0.9203 0.0034 286.332)",
-  tertiary: "oklch(0.3138 0.0453 249.447)",
-  "tertiary-foreground": "oklch(0.8529 0.0324 248.208)",
-  muted: "oklch(0.2313 0.007 285.839)",
-  "muted-foreground": "oklch(0.6255 0.0171 285.896)",
-  accent: "oklch(0.2313 0.007 285.839)",
-  "accent-foreground": "oklch(0.9683 0.0014 286.375)",
-  destructive: "oklch(0.6356 0.2082 25.378)",
-  "destructive-foreground": "oklch(1 0 0)",
-  border: "oklch(0.262 0.0085 285.799)",
-  input: "oklch(0.262 0.0085 285.799)",
-  radius: "0.5rem",
-  sidebar: "oklch(0.205 0 0)",
-  "sidebar-foreground": "oklch(0.9683 0.0014 286.375)",
-  "sidebar-primary": "oklch(0.4865 0.2423 291.866)",
-  "sidebar-primary-foreground": "oklch(0.9848 0 0)",
-  "sidebar-accent": "oklch(0.2313 0.007 285.839)",
-  "sidebar-accent-foreground": "oklch(0.9683 0.0014 286.375)",
-  "sidebar-border": "oklch(0.262 0.0085 285.799)",
-  "sidebar-ring": "oklch(0.4865 0.2423 291.866)"
-};
-
-// src/theme/presets/accents.ts
-var accents = {
-  neutral: {
-    primary: "oklch(0.2228 0.0043 286.044)",
-    "primary-foreground": "oklch(0.9848 0 0)",
-    ring: "oklch(0.2228 0.0043 286.044)",
-    accent: "oklch(0.2747 0.006 286.001)",
-    "accent-foreground": "oklch(0.9848 0 0)",
-    "sidebar-primary": "oklch(0.2228 0.0043 286.044)",
-    "sidebar-ring": "oklch(0.2228 0.0043 286.044)"
-  },
-  emerald: {
-    primary: "oklch(0.6902 0.1481 162.368)",
-    "primary-foreground": "oklch(1 0 0)",
-    ring: "oklch(0.6902 0.1481 162.368)",
-    accent: "oklch(0.3519 0.0714 164.26)",
-    "accent-foreground": "oklch(0.9131 0.0924 171.145)",
-    "sidebar-primary": "oklch(0.6902 0.1481 162.368)",
-    "sidebar-ring": "oklch(0.6902 0.1481 162.368)"
-  },
-  green: {
-    primary: "oklch(0.7205 0.192 149.493)",
-    "primary-foreground": "oklch(1 0 0)",
-    ring: "oklch(0.7205 0.192 149.493)",
-    accent: "oklch(0.333 0.0811 150.922)",
-    "accent-foreground": "oklch(0.8958 0.096 156.121)",
-    "sidebar-primary": "oklch(0.7205 0.192 149.493)",
-    "sidebar-ring": "oklch(0.7205 0.192 149.493)"
-  },
-  slate: {
-    primary: "oklch(0.6227 0.0463 256.82)",
-    "primary-foreground": "oklch(1 0 0)",
-    ring: "oklch(0.6227 0.0463 256.82)",
-    accent: "oklch(0.3115 0.0245 256.824)",
-    "accent-foreground": "oklch(0.8784 0.0141 256.711)",
-    "sidebar-primary": "oklch(0.6227 0.0463 256.82)",
-    "sidebar-ring": "oklch(0.6227 0.0463 256.82)"
-  },
-  blue: {
-    primary: "oklch(0.6261 0.1859 259.596)",
-    "primary-foreground": "oklch(1 0 0)",
-    ring: "oklch(0.6261 0.1859 259.596)",
-    accent: "oklch(0.2941 0.1092 259.917)",
-    "accent-foreground": "oklch(0.8064 0.0902 259.76)",
-    "sidebar-primary": "oklch(0.6261 0.1859 259.596)",
-    "sidebar-ring": "oklch(0.6261 0.1859 259.596)"
-  },
-  violet: {
-    primary: "oklch(0.4865 0.2423 291.866)",
-    "primary-foreground": "oklch(1 0 0)",
-    ring: "oklch(0.6016 0.2214 292.234)",
-    accent: "oklch(0.2467 0.109 294.41)",
-    "accent-foreground": "oklch(0.7817 0.1036 301.636)",
-    "sidebar-primary": "oklch(0.4865 0.2423 291.866)",
-    "sidebar-ring": "oklch(0.6016 0.2214 292.234)"
-  }
-};
-
-// src/theme/presets/compose.ts
-function lightAccentFromPrimary(primary = "") {
-  const m = primary.trim().match(/^oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)$/i);
-  if (!m) return { accent: "oklch(0.95 0 0)", "accent-foreground": "oklch(0.42 0 0)" };
-  const c = Number(m[2]);
-  const h = Number(m[3]);
-  const tint = Math.min(c, 0.05);
-  const fg = Math.min(c, 0.12);
-  return {
-    accent: `oklch(0.95 ${tint} ${h})`,
-    "accent-foreground": `oklch(0.42 ${fg} ${h})`
-  };
-}
-function composePreset(mode, accent) {
-  const base = mode === "dark" ? darkMode : lightMode;
-  const accentTokens = accents[accent];
-  if (mode === "light") {
-    const { accent: _a, "accent-foreground": _af, ...brandTokens } = accentTokens;
-    return { ...base, ...brandTokens, ...lightAccentFromPrimary(brandTokens.primary) };
-  }
-  return { ...base, ...accentTokens };
-}
-var PRESET_MAP = {
-  light: { mode: "light", accent: "neutral" },
-  dark: { mode: "dark", accent: "neutral" },
-  "dark-emerald": { mode: "dark", accent: "emerald" },
-  "dark-green": { mode: "dark", accent: "green" },
-  "dark-slate": { mode: "dark", accent: "slate" },
-  "dark-blue": { mode: "dark", accent: "blue" },
-  "dark-violet": { mode: "dark", accent: "violet" }
-};
-function resolvePreset(preset) {
-  const { mode, accent } = PRESET_MAP[preset];
-  return composePreset(mode, accent);
-}
-var ACCENT_KEYS = /* @__PURE__ */ new Set([
-  "primary",
-  "primary-foreground",
-  "ring",
-  "accent",
-  "accent-foreground",
-  "sidebar-primary",
-  "sidebar-ring"
-]);
-function tokensToStyle(tokens, accentOnly) {
-  const style = {};
-  for (const [key, value] of Object.entries(tokens)) {
-    if (value && (!accentOnly || ACCENT_KEYS.has(key))) {
-      style[`--${key}`] = value;
-    }
-  }
-  return style;
-}
-var RADIUS_TOKENS = [
-  "--radius-xs",
-  "--radius-sm",
-  "--radius-md",
-  "--radius-lg",
-  "--radius-xl",
-  "--radius-2xl",
-  "--radius-3xl",
-  "--radius-4xl"
-];
-function radiusToStyle(radius) {
-  const style = { "--radius": radius };
-  for (const key of RADIUS_TOKENS) style[key] = "var(--radius)";
-  return style;
-}
-function resolveThemeTokens({
-  preset,
-  mode,
-  accent,
-  explicitTokens,
-  configTokens,
-  configMode,
-  overrides
-}) {
-  if (explicitTokens) return explicitTokens;
-  const tokenMode = mode ?? configMode;
-  const modeOverrides = tokenMode ? overrides?.[tokenMode] : void 0;
-  const tokensMatchMode2 = !configMode || !tokenMode || configMode === tokenMode;
-  const scopedTokens = tokensMatchMode2 ? configTokens : void 0;
-  if (preset) {
-    return { ...resolvePreset(preset), ...scopedTokens ?? {}, ...modeOverrides ?? {} };
-  }
-  if (tokenMode) {
-    return {
-      ...composePreset(tokenMode, accent ?? "neutral"),
-      ...scopedTokens ?? {},
-      ...modeOverrides ?? {}
-    };
-  }
-  if (scopedTokens || modeOverrides) return { ...scopedTokens ?? {}, ...modeOverrides ?? {} };
-  return null;
-}
-var NajmThemeDepthContext = React.createContext(0);
-var NajmThemeModeContext = React.createContext(void 0);
-function useNajmThemeMode() {
-  return React.useContext(NajmThemeModeContext);
-}
-var NajmThemeContainerCtx = React.createContext(null);
-var DEFAULT_APPEARANCE = {};
-var NajmAppearanceContext = React.createContext(DEFAULT_APPEARANCE);
-function useNajmAppearance() {
-  return React.useContext(NajmAppearanceContext);
-}
-function NajmThemeProvider({
-  config,
-  preset,
-  mode,
-  accent,
-  tokens,
-  accentOnly,
-  appearance,
-  radius,
-  className,
-  asChild,
-  children
-}) {
-  const depth = React.useContext(NajmThemeDepthContext);
-  const parentMode = React.useContext(NajmThemeModeContext);
-  const parentAppearance = React.useContext(NajmAppearanceContext);
-  const effectivePreset = preset ?? config?.preset;
-  const effectiveMode = mode ?? config?.mode;
-  const effectiveAccent = accent ?? config?.accent;
-  const effectiveAccentOnly = accentOnly ?? config?.accentOnly;
-  const effectiveRadius = radius ?? config?.radius;
-  const effectiveBorderWidth = appearance?.borderWidth ?? config?.appearance?.borderWidth;
-  const resolved = React.useMemo(() => {
-    return resolveThemeTokens({
-      preset: effectivePreset,
-      mode: effectiveMode,
-      accent: effectiveAccent,
-      explicitTokens: tokens,
-      configTokens: config?.tokens,
-      configMode: config?.mode,
-      overrides: config?.overrides
-    });
-  }, [
-    effectivePreset,
-    effectiveMode,
-    effectiveAccent,
-    tokens,
-    config?.tokens,
-    config?.mode,
-    config?.overrides
-  ]);
-  const style = React.useMemo(
-    () => {
-      const tokenStyle = resolved ? tokensToStyle(resolved, effectiveAccentOnly) : void 0;
-      const radiusStyle = effectiveRadius !== void 0 ? radiusToStyle(effectiveRadius) : void 0;
-      const borderWidthStyle = effectiveBorderWidth !== void 0 ? { "--border-width": effectiveBorderWidth } : void 0;
-      if (!tokenStyle && !radiusStyle && !borderWidthStyle) return void 0;
-      return { ...tokenStyle, ...radiusStyle, ...borderWidthStyle };
-    },
-    [resolved, effectiveAccentOnly, effectiveRadius, effectiveBorderWidth]
-  );
-  const Comp = asChild ? Slot : "div";
-  const [container, setContainer] = React.useState(null);
-  const containerRef = React.useRef(null);
-  const handleContainerRef = React.useCallback((node) => {
-    if (containerRef.current === node) return;
-    containerRef.current = node;
-    setContainer(node);
-  }, []);
-  const resolvedAppearance = React.useMemo(
-    () => ({ ...parentAppearance, ...config?.appearance ?? {}, ...appearance ?? {} }),
-    [parentAppearance, config?.appearance, appearance]
-  );
-  return /* @__PURE__ */ jsx(NajmThemeDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(NajmThemeModeContext.Provider, { value: effectiveMode ?? parentMode, children: /* @__PURE__ */ jsx(NajmAppearanceContext.Provider, { value: resolvedAppearance, children: /* @__PURE__ */ jsx(NajmThemeContainerCtx.Provider, { value: container, children: /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref: handleContainerRef,
-      suppressHydrationWarning: true,
-      "data-najm-theme": effectivePreset ?? `${effectiveMode ?? "light"}-${effectiveAccent ?? "neutral"}`,
-      className,
-      style,
-      children
-    }
-  ) }) }) }) });
-}
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function Tabs({
   className,
   variant = "pills",
@@ -445,77 +142,6 @@ var TAB_COLORS = {
   card: { list: "bg-card", active: "bg-muted" },
   ghost: { list: "bg-transparent", active: "bg-accent" }
 };
-function toPascalCase(value) {
-  return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[\s_-]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
-}
-function isImageSource(value) {
-  return value.startsWith("/") || value.startsWith("./") || value.startsWith("../") || value.startsWith("http://") || value.startsWith("https://") || value.startsWith("data:image/") || /\.(avif|gif|jpe?g|png|svg|webp)(\?.*)?$/i.test(value);
-}
-function isComponentSource(value) {
-  return typeof value === "function" || Boolean(value && typeof value === "object" && "$$typeof" in value);
-}
-var NIcon = ({
-  icon = "circle",
-  size = 24,
-  alt = "",
-  className,
-  style,
-  onClick,
-  ...rest
-}) => {
-  const dimensionStyle = {
-    width: size,
-    height: size,
-    ...style
-  };
-  if (React__default.isValidElement(icon)) {
-    return React__default.cloneElement(icon, {
-      className: cn(className, icon.props.className),
-      onClick,
-      ...rest
-    });
-  }
-  if (icon && typeof icon === "object" && "src" in icon) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        alt: icon.alt ?? alt,
-        className: cn("inline-block shrink-0 object-contain", className),
-        src: icon.src,
-        style: dimensionStyle,
-        onClick,
-        ...rest
-      }
-    );
-  }
-  if (isComponentSource(icon)) {
-    const IconComponent = icon;
-    return /* @__PURE__ */ jsx(IconComponent, { size, className, onClick, style, ...rest });
-  }
-  if (typeof icon === "string") {
-    if (isImageSource(icon)) {
-      return /* @__PURE__ */ jsx(
-        "img",
-        {
-          alt,
-          className: cn("inline-block shrink-0 object-contain", className),
-          src: icon,
-          style: dimensionStyle,
-          onClick,
-          ...rest
-        }
-      );
-    }
-    const pascalCaseIcon = toPascalCase(icon);
-    if (LucideIcons[pascalCaseIcon]) {
-      const LucideIcon = LucideIcons[pascalCaseIcon];
-      return /* @__PURE__ */ jsx(LucideIcon, { size, className, onClick, style, ...rest });
-    }
-    return null;
-  }
-  return null;
-};
-NIcon.displayName = "NIcon";
 function hexToRgb(hex) {
   const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return m ? { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16) } : { r: 0, g: 0, b: 0 };
@@ -625,7 +251,7 @@ function NTabs({
 }
 var PORTAL_LAYER_STYLE_ID = "najm-kit-portal-layer-styles";
 function useNajmPortalLayerStyles() {
-  React.useInsertionEffect(() => {
+  React60.useInsertionEffect(() => {
     if (typeof document === "undefined") return;
     if (document.getElementById(PORTAL_LAYER_STYLE_ID)) return;
     const style = document.createElement("style");
@@ -656,7 +282,7 @@ var tooltipContentVariants = cva(
   }
 );
 function TooltipContent({ className, sideOffset = 4, variant, children, ...props }) {
-  const container = React.useContext(NajmThemeContainerCtx);
+  const container = React60.useContext(NajmThemeContainerCtx);
   useNajmPortalLayerStyles();
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     TooltipPrimitive.Content,
@@ -774,704 +400,8 @@ function NEditorTabs({
     }
   );
 }
-
-// src/theme/borders.ts
-var SURFACE_BORDER_CLASSES = {
-  all: "najm-border border-border",
-  top: "najm-border-t border-border",
-  right: "najm-border-r border-border",
-  bottom: "najm-border-b border-border",
-  left: "najm-border-l border-border"
-};
-var SIDEBAR_BORDER_CLASSES = {
-  all: "najm-border border-sidebar-border",
-  top: "najm-border-t border-sidebar-border",
-  right: "najm-border-r border-sidebar-border",
-  bottom: "najm-border-b border-sidebar-border",
-  left: "najm-border-l border-sidebar-border"
-};
-var BORDER_RESET_CLASSES = {
-  all: "border-0",
-  top: "border-t-0",
-  right: "border-r-0",
-  bottom: "border-b-0",
-  left: "border-l-0"
-};
-function surfaceBorderClasses(bordered = true, side = "all") {
-  return bordered === false ? BORDER_RESET_CLASSES[side] : SURFACE_BORDER_CLASSES[side];
-}
-function sidebarBorderClasses(bordered = true, side = "all") {
-  return bordered === false ? BORDER_RESET_CLASSES[side] : SIDEBAR_BORDER_CLASSES[side];
-}
-function inputBorderClasses(bordered = true) {
-  return bordered === false ? "border-0" : "najm-border border-input";
-}
-var NajmDesignContext = React.createContext({
-  components: {}
-});
-function useNajmDesign() {
-  return React.useContext(NajmDesignContext);
-}
-function useNajmComponentStyle(name) {
-  const { components } = useNajmDesign();
-  return components[name];
-}
-var SCALE_FACTOR = {
-  compact: "0.95",
-  default: "1",
-  comfortable: "1.05"
-};
-function typographyToStyle(t) {
-  const style = {};
-  if (t.fontSans) style["--font-sans"] = t.fontSans;
-  if (t.fontHeading) style["--font-heading"] = t.fontHeading;
-  if (t.fontMono) style["--font-mono"] = t.fontMono;
-  if (t.baseSize) style["--font-size-base"] = t.baseSize;
-  if (t.lineHeight) style["--line-height-base"] = t.lineHeight;
-  if (t.letterSpacing) style["--letter-spacing-base"] = t.letterSpacing;
-  if (t.scale) style["--font-scale"] = SCALE_FACTOR[t.scale];
-  return style;
-}
-function layoutToStyle(layout) {
-  const style = {};
-  if (layout.pageGutter) style["--page-gutter"] = layout.pageGutter;
-  if (layout.sectionGap) style["--section-gap"] = layout.sectionGap;
-  return style;
-}
-function NajmDesignProvider({
-  config,
-  mode,
-  className,
-  children
-}) {
-  const contextValue = React.useMemo(
-    () => ({ components: config.components ?? {}, typography: config.typography, layout: config.layout }),
-    [config.components, config.typography, config.layout]
-  );
-  const typographyStyle = React.useMemo(
-    () => config.typography ? typographyToStyle(config.typography) : void 0,
-    [config.typography]
-  );
-  const layoutStyle = React.useMemo(
-    () => config.layout ? layoutToStyle(config.layout) : void 0,
-    [config.layout]
-  );
-  const providerStyle = React.useMemo(
-    () => ({ ...layoutStyle ?? {}, ...typographyStyle ?? {} }),
-    [layoutStyle, typographyStyle]
-  );
-  return /* @__PURE__ */ jsx(NajmDesignContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(NajmThemeProvider, { config: config.theme, mode, className, children: layoutStyle || typographyStyle ? (
-    // `display: contents` lets design CSS variables cascade to
-    // children without introducing a layout box that would break height
-    // chains (e.g. h-full) in the consuming app.
-    /* @__PURE__ */ jsx("div", { style: { display: "contents", ...providerStyle }, "data-najm-design-vars": "", children })
-  ) : children }) });
-}
-
-// src/theme/design-types.ts
-var NAJM_COMPONENT_NAMES = [
-  "button",
-  "badge",
-  "card",
-  "table",
-  "tabs",
-  "dialog",
-  "alert",
-  "sidebar",
-  "pageHeader",
-  "input",
-  "select",
-  "dropdown",
-  "sheet",
-  "popover",
-  "tooltip",
-  "progress",
-  "avatar"
-];
-var RADIUS_VALUE_MAP = {
-  none: "0",
-  xs: "var(--radius-xs)",
-  sm: "var(--radius-sm)",
-  md: "var(--radius-md)",
-  lg: "var(--radius-lg)",
-  xl: "var(--radius-xl)",
-  full: "9999px"
-};
-function resolveRadiusValue(radius) {
-  if (!radius || radius === "inherit") return void 0;
-  return RADIUS_VALUE_MAP[radius] ?? radius;
-}
-
-// src/theme/config.ts
-var MODES = ["light", "dark"];
-var ACCENTS = ["neutral", "emerald", "green", "slate", "blue", "violet"];
-var PRESETS = ["light", "dark", "dark-emerald", "dark-green", "dark-slate", "dark-blue", "dark-violet"];
-var TOKEN_KEYS = [
-  "background",
-  "foreground",
-  "card",
-  "card-foreground",
-  "popover",
-  "popover-foreground",
-  "primary",
-  "primary-foreground",
-  "secondary",
-  "secondary-foreground",
-  "tertiary",
-  "tertiary-foreground",
-  "muted",
-  "muted-foreground",
-  "accent",
-  "accent-foreground",
-  "destructive",
-  "destructive-foreground",
-  "border",
-  "input",
-  "ring",
-  "sidebar",
-  "sidebar-foreground",
-  "sidebar-primary",
-  "sidebar-primary-foreground",
-  "sidebar-accent",
-  "sidebar-accent-foreground",
-  "sidebar-border",
-  "sidebar-ring",
-  "chart-1",
-  "chart-2",
-  "chart-3",
-  "chart-4",
-  "chart-5",
-  "radius"
-];
-var ROOT_KEYS = /* @__PURE__ */ new Set([
-  "preset",
-  "mode",
-  "accent",
-  "tokens",
-  "overrides",
-  "accentOnly",
-  "appearance",
-  "radius"
-]);
-var TOKEN_KEY_SET = new Set(TOKEN_KEYS);
-var MODE_KEY_SET = new Set(MODES);
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function assertKnownKeys(value, keys, path) {
-  const unknown = Object.keys(value).find((key) => !keys.has(key));
-  if (unknown) throw new TypeError(`Unknown ${path} property: ${unknown}`);
-}
-function optionalEnum(value, values, path) {
-  if (value === void 0) return void 0;
-  if (typeof value !== "string" || !values.includes(value)) {
-    throw new TypeError(`${path} must be one of: ${values.join(", ")}`);
-  }
-  return value;
-}
-function optionalString(value, path) {
-  if (value === void 0) return void 0;
-  if (typeof value !== "string" || value.trim() === "") {
-    throw new TypeError(`${path} must be a non-empty string`);
-  }
-  return value;
-}
-function parseTokens(value) {
-  if (value === void 0) return void 0;
-  if (!isRecord(value)) throw new TypeError("theme.tokens must be an object");
-  assertKnownKeys(value, TOKEN_KEY_SET, "theme.tokens");
-  const tokens = {};
-  for (const key of TOKEN_KEYS) {
-    const token = optionalString(value[key], `theme.tokens.${key}`);
-    if (token !== void 0) tokens[key] = token;
-  }
-  return tokens;
-}
-function parseOverrides(value) {
-  if (value === void 0) return void 0;
-  if (!isRecord(value)) throw new TypeError("theme.overrides must be an object");
-  assertKnownKeys(value, MODE_KEY_SET, "theme.overrides");
-  const overrides = {};
-  for (const mode of MODES) {
-    const entry = value[mode];
-    if (entry === void 0) continue;
-    overrides[mode] = parseTokens(entry) ?? {};
-  }
-  return overrides;
-}
-function defineNajmThemeConfig(config) {
-  return config;
-}
-function parseNajmThemeConfig(input) {
-  let value = input;
-  if (typeof input === "string") {
-    try {
-      value = JSON.parse(input);
-    } catch (error) {
-      throw new TypeError(`Invalid theme JSON: ${error.message}`);
-    }
-  }
-  if (!isRecord(value)) throw new TypeError("Theme config must be an object");
-  assertKnownKeys(value, ROOT_KEYS, "theme");
-  let appearance;
-  if (value.appearance !== void 0) {
-    if (!isRecord(value.appearance)) throw new TypeError("theme.appearance must be an object");
-    assertKnownKeys(value.appearance, /* @__PURE__ */ new Set(["borderWidth"]), "theme.appearance");
-    appearance = {
-      borderWidth: optionalString(
-        value.appearance.borderWidth,
-        "theme.appearance.borderWidth"
-      )
-    };
-  }
-  const accentOnly = value.accentOnly;
-  if (accentOnly !== void 0 && typeof accentOnly !== "boolean") {
-    throw new TypeError("theme.accentOnly must be a boolean");
-  }
-  const parsedAccentOnly = typeof accentOnly === "boolean" ? accentOnly : void 0;
-  const config = {};
-  const preset = optionalEnum(value.preset, PRESETS, "theme.preset");
-  const mode = optionalEnum(value.mode, MODES, "theme.mode");
-  const accent = optionalEnum(value.accent, ACCENTS, "theme.accent");
-  const tokens = parseTokens(value.tokens);
-  const overrides = parseOverrides(value.overrides);
-  const radius = optionalString(value.radius, "theme.radius");
-  if (preset !== void 0) config.preset = preset;
-  if (mode !== void 0) config.mode = mode;
-  if (accent !== void 0) config.accent = accent;
-  if (tokens !== void 0) config.tokens = tokens;
-  if (overrides !== void 0) config.overrides = overrides;
-  if (parsedAccentOnly !== void 0) config.accentOnly = parsedAccentOnly;
-  if (appearance !== void 0) config.appearance = appearance;
-  if (radius !== void 0) config.radius = radius;
-  return config;
-}
-function stringifyNajmThemeConfig(config, space = 2) {
-  return JSON.stringify(config, null, space);
-}
-
-// src/theme/design-config.ts
-var ROOT_KEYS2 = /* @__PURE__ */ new Set(["version", "theme", "typography", "components", "layout"]);
-var TYPOGRAPHY_KEYS = /* @__PURE__ */ new Set([
-  "fontSans",
-  "fontHeading",
-  "fontMono",
-  "baseSize",
-  "scale",
-  "lineHeight",
-  "letterSpacing"
-]);
-var LAYOUT_KEYS = /* @__PURE__ */ new Set(["pageGutter", "sectionGap"]);
-var COMPONENT_KEYS = /* @__PURE__ */ new Set([
-  "card",
-  "showSectionLabels",
-  "showSectionSeparators",
-  "expandedWidth",
-  "collapsedWidth",
-  "mobileWidth",
-  "defaultVariant",
-  "defaultSize",
-  "density",
-  "headerColor",
-  "headerTextColor",
-  "borderColor",
-  "radius",
-  "borderWidth",
-  "slots",
-  "variants"
-]);
-var SLOT_KEYS = /* @__PURE__ */ new Set(["className", "radius", "borderWidth", "padding", "paddingTop"]);
-var VARIANT_KEYS = /* @__PURE__ */ new Set(["use", "className", "tokens"]);
-var COMPONENT_NAME_SET = new Set(NAJM_COMPONENT_NAMES);
-var DENSITIES = /* @__PURE__ */ new Set(["compact", "default", "comfortable"]);
-var SCALES = /* @__PURE__ */ new Set(["compact", "default", "comfortable"]);
-var RESPONSIVE_BREAKPOINTS = /* @__PURE__ */ new Set(["base", "sm", "md", "lg", "xl", "2xl"]);
-function isRecord2(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function assertKnownKeys2(value, keys, path) {
-  const unknown = Object.keys(value).find((key) => !keys.has(key));
-  if (unknown) throw new TypeError(`Unknown ${path} property: ${unknown}`);
-}
-function optionalString2(value, path) {
-  if (value === void 0) return void 0;
-  if (typeof value !== "string") {
-    throw new TypeError(`${path} must be a string`);
-  }
-  return value;
-}
-function optionalBoolean(value, path) {
-  if (value === void 0) return void 0;
-  if (typeof value !== "boolean") {
-    throw new TypeError(`${path} must be a boolean`);
-  }
-  return value;
-}
-function optionalResponsiveNumber(value, path) {
-  if (value === void 0) return void 0;
-  if (typeof value === "number") return value;
-  if (!isRecord2(value)) throw new TypeError(`${path} must be a number or breakpoint object`);
-  const unknown = Object.keys(value).find((key) => !RESPONSIVE_BREAKPOINTS.has(key));
-  if (unknown) throw new TypeError(`Unknown ${path} breakpoint: ${unknown}`);
-  const parsed = {};
-  for (const [breakpoint, width] of Object.entries(value)) {
-    if (typeof width !== "number") {
-      throw new TypeError(`${path}.${breakpoint} must be a number`);
-    }
-    parsed[breakpoint] = width;
-  }
-  return parsed;
-}
-function optionalEnum2(value, values, path) {
-  if (value === void 0) return void 0;
-  if (typeof value !== "string" || !values.has(value)) {
-    throw new TypeError(`${path} must be one of: ${[...values].join(", ")}`);
-  }
-  return value;
-}
-function parseTypography(value) {
-  if (value === void 0) return void 0;
-  if (!isRecord2(value)) throw new TypeError("typography must be an object");
-  assertKnownKeys2(value, TYPOGRAPHY_KEYS, "typography");
-  const cfg = {};
-  const fontSans = optionalString2(value.fontSans, "typography.fontSans");
-  const fontHeading = optionalString2(value.fontHeading, "typography.fontHeading");
-  const fontMono = optionalString2(value.fontMono, "typography.fontMono");
-  const baseSize = optionalString2(value.baseSize, "typography.baseSize");
-  const scale = optionalEnum2(value.scale, SCALES, "typography.scale");
-  const lineHeight = optionalString2(value.lineHeight, "typography.lineHeight");
-  const letterSpacing = optionalString2(value.letterSpacing, "typography.letterSpacing");
-  if (fontSans !== void 0) cfg.fontSans = fontSans;
-  if (fontHeading !== void 0) cfg.fontHeading = fontHeading;
-  if (fontMono !== void 0) cfg.fontMono = fontMono;
-  if (baseSize !== void 0) cfg.baseSize = baseSize;
-  if (scale !== void 0) cfg.scale = scale;
-  if (lineHeight !== void 0) cfg.lineHeight = lineHeight;
-  if (letterSpacing !== void 0) cfg.letterSpacing = letterSpacing;
-  return cfg;
-}
-function parseLayout(value) {
-  if (value === void 0) return void 0;
-  if (!isRecord2(value)) throw new TypeError("layout must be an object");
-  assertKnownKeys2(value, LAYOUT_KEYS, "layout");
-  const cfg = {};
-  const pageGutter = optionalString2(value.pageGutter, "layout.pageGutter");
-  const sectionGap = optionalString2(value.sectionGap, "layout.sectionGap");
-  if (pageGutter !== void 0) cfg.pageGutter = pageGutter;
-  if (sectionGap !== void 0) cfg.sectionGap = sectionGap;
-  return cfg;
-}
-function parseVariant(value, path) {
-  if (!isRecord2(value)) throw new TypeError(`${path} must be an object`);
-  assertKnownKeys2(value, VARIANT_KEYS, path);
-  const variant = {};
-  const use = optionalString2(value.use, `${path}.use`);
-  const className = optionalString2(value.className, `${path}.className`);
-  if (use !== void 0) variant.use = use;
-  if (className !== void 0) variant.className = className;
-  if (value.tokens !== void 0) {
-    if (!isRecord2(value.tokens)) throw new TypeError(`${path}.tokens must be an object`);
-    variant.tokens = value.tokens;
-  }
-  return variant;
-}
-function parseComponentStyle(value, path) {
-  if (!isRecord2(value)) throw new TypeError(`${path} must be an object`);
-  assertKnownKeys2(value, COMPONENT_KEYS, path);
-  const cfg = {};
-  const card = optionalBoolean(value.card, `${path}.card`);
-  const showSectionLabels = optionalBoolean(value.showSectionLabels, `${path}.showSectionLabels`);
-  const showSectionSeparators = optionalBoolean(value.showSectionSeparators, `${path}.showSectionSeparators`);
-  const expandedWidth = optionalResponsiveNumber(value.expandedWidth, `${path}.expandedWidth`);
-  const collapsedWidth = optionalResponsiveNumber(value.collapsedWidth, `${path}.collapsedWidth`);
-  const mobileWidth = optionalResponsiveNumber(value.mobileWidth, `${path}.mobileWidth`);
-  const defaultVariant = optionalString2(value.defaultVariant, `${path}.defaultVariant`);
-  const defaultSize = optionalString2(value.defaultSize, `${path}.defaultSize`);
-  const density = optionalEnum2(value.density, DENSITIES, `${path}.density`);
-  const headerColor = optionalString2(value.headerColor, `${path}.headerColor`);
-  const headerTextColor = optionalString2(value.headerTextColor, `${path}.headerTextColor`);
-  const borderColor = optionalString2(value.borderColor, `${path}.borderColor`);
-  const radius = optionalString2(value.radius, `${path}.radius`);
-  const borderWidth = optionalString2(value.borderWidth, `${path}.borderWidth`);
-  if (card !== void 0) cfg.card = card;
-  if (showSectionLabels !== void 0) cfg.showSectionLabels = showSectionLabels;
-  if (showSectionSeparators !== void 0) cfg.showSectionSeparators = showSectionSeparators;
-  if (expandedWidth !== void 0) cfg.expandedWidth = expandedWidth;
-  if (collapsedWidth !== void 0) cfg.collapsedWidth = collapsedWidth;
-  if (mobileWidth !== void 0) cfg.mobileWidth = mobileWidth;
-  if (defaultVariant !== void 0) cfg.defaultVariant = defaultVariant;
-  if (defaultSize !== void 0) cfg.defaultSize = defaultSize;
-  if (density !== void 0) cfg.density = density;
-  if (headerColor !== void 0) cfg.headerColor = headerColor;
-  if (headerTextColor !== void 0) cfg.headerTextColor = headerTextColor;
-  if (borderColor !== void 0) cfg.borderColor = borderColor;
-  if (radius !== void 0) cfg.radius = radius;
-  if (borderWidth !== void 0) cfg.borderWidth = borderWidth;
-  if (value.slots !== void 0) {
-    if (!isRecord2(value.slots)) throw new TypeError(`${path}.slots must be an object`);
-    const slots = {};
-    for (const [slotName, slotValue] of Object.entries(value.slots)) {
-      if (!isRecord2(slotValue)) throw new TypeError(`${path}.slots.${slotName} must be an object`);
-      assertKnownKeys2(slotValue, SLOT_KEYS, `${path}.slots.${slotName}`);
-      slots[slotName] = slotValue;
-    }
-    cfg.slots = slots;
-  }
-  if (value.variants !== void 0) {
-    if (!isRecord2(value.variants)) throw new TypeError(`${path}.variants must be an object`);
-    const variants = {};
-    for (const [variantName, variantValue] of Object.entries(value.variants)) {
-      variants[variantName] = parseVariant(variantValue, `${path}.variants.${variantName}`);
-    }
-    cfg.variants = variants;
-  }
-  return cfg;
-}
-function parseComponents(value) {
-  if (value === void 0) return void 0;
-  if (!isRecord2(value)) throw new TypeError("components must be an object");
-  const unknown = Object.keys(value).find((key) => !COMPONENT_NAME_SET.has(key));
-  if (unknown) throw new TypeError(`Unknown component name: ${unknown}`);
-  const components = {};
-  for (const [name, cfg] of Object.entries(value)) {
-    components[name] = parseComponentStyle(cfg, `components.${name}`);
-  }
-  return components;
-}
-function defineNajmDesignConfig(config) {
-  return config;
-}
-function parseNajmDesignConfig(input) {
-  let value = input;
-  if (typeof input === "string") {
-    try {
-      value = JSON.parse(input);
-    } catch (error) {
-      throw new TypeError(`Invalid design JSON: ${error.message}`);
-    }
-  }
-  if (!isRecord2(value)) throw new TypeError("Design config must be an object");
-  if (!("version" in value) && !("theme" in value)) {
-    return {
-      version: 1,
-      theme: parseNajmThemeConfig(value)
-    };
-  }
-  assertKnownKeys2(value, ROOT_KEYS2, "design");
-  if (value.version !== void 0 && value.version !== 1) {
-    throw new TypeError("design.version must be 1");
-  }
-  if (value.theme === void 0) throw new TypeError("design.theme is required");
-  const config = {
-    version: 1,
-    theme: parseNajmThemeConfig(value.theme)
-  };
-  const typography = parseTypography(value.typography);
-  if (typography !== void 0) config.typography = typography;
-  const components = parseComponents(value.components);
-  if (components !== void 0) config.components = components;
-  const layout = parseLayout(value.layout);
-  if (layout !== void 0) config.layout = layout;
-  return config;
-}
-function stringifyNajmDesignConfig(config, space = 2) {
-  return JSON.stringify(config, null, space);
-}
-function resolveVariantAlias(variants, variant) {
-  if (!variants) return { variant };
-  const seen = /* @__PURE__ */ new Set();
-  let current = variant;
-  let style = variants[current];
-  while (style?.use && !seen.has(current)) {
-    seen.add(current);
-    const next = style.use;
-    if (seen.has(next)) break;
-    current = next;
-    style = variants[current];
-  }
-  return { variant: current, style };
-}
-var buttonVariants = cva(
-  [
-    "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium outline-none transition-all",
-    "disabled:pointer-events-none disabled:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
-    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
-        outline: "border border-input bg-transparent text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        tertiary: "bg-tertiary text-tertiary-foreground shadow-xs hover:bg-tertiary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "h-auto p-0 text-primary underline-offset-4 hover:underline",
-        success: "bg-emerald-600 text-white shadow-xs hover:bg-emerald-700",
-        warning: "bg-amber-400 text-slate-950 shadow-xs hover:bg-amber-500",
-        info: "bg-sky-600 text-white shadow-xs hover:bg-sky-700",
-        soft: "bg-primary/10 text-primary shadow-none hover:bg-primary/15",
-        subtle: "bg-muted text-foreground shadow-none hover:bg-muted/80",
-        plain: "bg-transparent shadow-none hover:bg-transparent"
-      },
-      size: {
-        "2xs": "h-5 gap-1 px-1.5 text-[11px] [&_svg:not([class*='size-'])]:size-3",
-        xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        md: "h-9 px-4 py-2 has-[>svg]:px-3",
-        lg: "h-10 px-6 has-[>svg]:px-4",
-        xl: "h-12 px-8 text-base [&_svg:not([class*='size-'])]:size-5",
-        "2xl": "h-14 px-10 text-base [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-9",
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10 [&_svg:not([class*='size-'])]:size-5",
-        "icon-xl": "size-12 [&_svg:not([class*='size-'])]:size-5"
-      },
-      rounded: {
-        none: "rounded-none",
-        sm: "rounded-sm",
-        default: "rounded-md",
-        md: "rounded-md",
-        lg: "rounded-lg",
-        xl: "rounded-xl",
-        "2xl": "rounded-2xl",
-        full: "rounded-full"
-      },
-      fullWidth: {
-        true: "w-full",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      rounded: "default",
-      fullWidth: false
-    }
-  }
-);
-function isPromiseLike(value) {
-  return Boolean(value && typeof value.then === "function");
-}
-var defaultLoader = /* @__PURE__ */ jsx(LoaderCircleIcon, { "aria-hidden": "true", className: "animate-spin" });
-function renderIcon(icon) {
-  if (!icon) return null;
-  return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
-}
-var Button = React.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    rounded,
-    fullWidth,
-    asChild = false,
-    loading = false,
-    autoLoading = true,
-    disabledWhileLoading = true,
-    loadingText,
-    loader = defaultLoader,
-    loaderPosition = "left",
-    leftIcon,
-    rightIcon,
-    bordered,
-    disabled,
-    children,
-    onClick,
-    style,
-    ...props
-  }, ref) => {
-    const recipe = useNajmComponentStyle("button");
-    const aliased = resolveVariantAlias(
-      recipe?.variants,
-      variant ?? recipe?.defaultVariant ?? "default"
-    );
-    const effVariant = variant ?? aliased.variant ?? recipe?.defaultVariant;
-    const effSize = size ?? recipe?.defaultSize;
-    const recipeRadius = rounded === void 0 ? resolveRadiusValue(recipe?.radius) : void 0;
-    const recipeStyle = recipeRadius ? { borderRadius: recipeRadius } : void 0;
-    const [pending, setPending] = React.useState(false);
-    const isLoading = loading || pending;
-    const isDisabled = disabled || disabledWhileLoading && isLoading;
-    const Comp = asChild ? Slot : "button";
-    const handleClick = React.useCallback(
-      (event) => {
-        if (isDisabled) {
-          event.preventDefault();
-          return;
-        }
-        const result = onClick?.(event);
-        if (autoLoading && isPromiseLike(result)) {
-          setPending(true);
-          void result.then(
-            () => setPending(false),
-            () => setPending(false)
-          );
-        }
-      },
-      [autoLoading, isDisabled, onClick]
-    );
-    const child = asChild ? React.Children.only(children) : null;
-    const childContent = asChild && React.isValidElement(child) ? child.props.children : children;
-    const content = loadingText && isLoading ? loadingText : childContent;
-    const loaderNode = isLoading ? loader : null;
-    const leftIconNode = renderIcon(leftIcon);
-    const rightIconNode = renderIcon(rightIcon);
-    const showCenteredLoader = Boolean(loaderNode && loaderPosition === "center");
-    const renderedContent = showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("span", { className: "invisible inline-flex items-center gap-2", children: [
-        leftIconNode,
-        content,
-        rightIconNode
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 inline-flex items-center justify-center", children: loaderNode })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      loaderNode && loaderPosition === "left" ? loaderNode : leftIconNode,
-      content,
-      loaderNode && loaderPosition === "right" ? loaderNode : rightIconNode
-    ] });
-    const renderedChild = asChild && React.isValidElement(child) ? React.cloneElement(child, void 0, renderedContent) : renderedContent;
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        "data-slot": "button",
-        "data-loading": isLoading || void 0,
-        "data-disabled": isDisabled || void 0,
-        "data-bordered": effVariant === "outline" ? "true" : bordered === false ? "false" : bordered ? "true" : void 0,
-        "aria-busy": isLoading || void 0,
-        "aria-disabled": asChild && isDisabled ? true : void 0,
-        disabled: !asChild ? isDisabled : void 0,
-        style: recipeStyle ? { ...recipeStyle, ...style } : style,
-        className: cn(
-          buttonVariants({ variant: effVariant, size: effSize, rounded, fullWidth }),
-          aliased.style?.className,
-          // Outline buttons always carry an input-style border.
-          effVariant === "outline" && inputBorderClasses(true),
-          // Filled/ghost/plain/link/success/warning/info/soft/subtle buttons only get a
-          // border when the consumer explicitly opts in via `bordered`. Global theming
-          // should not outline every filled button.
-          effVariant !== "outline" && bordered === true && cn(
-            "border",
-            "border-muted-foreground"
-          ),
-          className
-        ),
-        onClick: handleClick,
-        ...props,
-        children: renderedChild
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var NButton = Button;
 var NO_SHADE = /* @__PURE__ */ new Set(["black", "white"]);
-var PRESETS2 = {
+var PRESETS = {
   muted: "border-muted-foreground",
   primary: "border-primary",
   accent: "border-accent",
@@ -1502,7 +432,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 = React__default.forwardRef(
+var BaseInput = React60__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";
@@ -1517,7 +447,7 @@ var BaseInput = React__default.forwardRef(
         borderClass = ERROR_BORDER;
       } else if (hasExplicitColor) {
         borderClass = `${STATIC_BASE} ${FOCUS_INTERACTIVE_BASE} ${HOVER_INTERACTIVE_BASE}`;
-        colorClass = PRESETS2[borderColor] ?? (NO_SHADE.has(borderColor) ? `border-${borderColor}` : `border-${borderColor}-600`);
+        colorClass = PRESETS[borderColor] ?? (NO_SHADE.has(borderColor) ? `border-${borderColor}` : `border-${borderColor}-600`);
       } else {
         const restingBorderClass = inputBorderClasses(isBordered);
         borderClass = isBordered ? `${STATIC_BASE} ${restingBorderClass} [&:not(:focus-within):not([data-state=open]):hover]:border-input focus-within:border-ring data-[state=open]:border-ring` : restingBorderClass;
@@ -1554,7 +484,7 @@ function PopoverAnchor({ ...props }) {
   return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
-  const container = React.useContext(NajmThemeContainerCtx);
+  const container = React60.useContext(NajmThemeContainerCtx);
   useNajmPortalLayerStyles();
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
@@ -1663,7 +593,7 @@ function SwatchesColorPicker({
   hideSwatches = false
 }) {
   const inputRef = useRef(null);
-  const themeContainer = React__default.useContext(NajmThemeContainerCtx);
+  const themeContainer = React60__default.useContext(NajmThemeContainerCtx);
   const resolvedValue = resolvePickerColor(value, themeContainer);
   return /* @__PURE__ */ jsxs(
     BaseInput,
@@ -1733,7 +663,7 @@ function PopoverColorPicker({
   formats = DEFAULT_FORMATS,
   output = "preserve"
 }) {
-  const themeContainer = React__default.useContext(NajmThemeContainerCtx);
+  const themeContainer = React60__default.useContext(NajmThemeContainerCtx);
   const resolvedValue = resolvePickerColor(value, themeContainer);
   const initialFormat = formats.includes(detectFormat(resolvedValue)) ? detectFormat(resolvedValue) : formats[0] ?? "hex";
   const [activeFormat, setActiveFormat] = useState(initialFormat);
@@ -1990,7 +920,7 @@ function SheetClose({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
 }
 function SheetPortal({ ...props }) {
-  const container = React.useContext(NajmThemeContainerCtx);
+  const container = React60.useContext(NajmThemeContainerCtx);
   return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", container: container ?? void 0, ...props });
 }
 function SheetOverlay({ className, ...props }) {
@@ -2052,89 +982,6 @@ function SheetTitle({ className, ...props }) {
 function SheetDescription({ className, ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-muted-foreground text-sm", className), ...props });
 }
-function assignRef(ref, node) {
-  if (!ref) return;
-  if (typeof ref === "function") ref(node);
-  else ref.current = node;
-}
-function applyViewportLayout(node, axis) {
-  node.style.width = "100%";
-  node.style.height = "100%";
-  node.style.minWidth = "0";
-  node.style.minHeight = "0";
-  node.style.overflowX = axis === "x" || axis === "both" ? "auto" : "hidden";
-  node.style.overflowY = axis === "y" || axis === "both" ? "auto" : "hidden";
-}
-function najmScrollOptions(axis, autoHide, options) {
-  return {
-    scrollbars: { theme: "os-theme-najm", autoHide, autoHideDelay: 500, clickScroll: true },
-    overflow: {
-      x: axis === "x" || axis === "both" ? "scroll" : "hidden",
-      y: axis === "y" || axis === "both" ? "scroll" : "hidden"
-    },
-    ...options
-  };
-}
-function useNajmScrollViewport({
-  axis = "y",
-  autoHide = "never",
-  options
-} = {}) {
-  const hostRef = React.useRef(null);
-  const viewportRef = React.useRef(null);
-  React.useEffect(() => {
-    const target = hostRef.current;
-    const viewport = viewportRef.current;
-    if (!target || !viewport) return;
-    const instance = OverlayScrollbars(
-      { target, elements: { viewport } },
-      najmScrollOptions(axis, autoHide, options)
-    );
-    const containWheel = (event) => event.stopPropagation();
-    viewport.addEventListener("wheel", containWheel, { passive: true });
-    return () => {
-      viewport.removeEventListener("wheel", containWheel);
-      instance.destroy();
-    };
-  }, [axis, autoHide, options]);
-  return { hostRef, viewportRef };
-}
-function NajmScroll({ className, axis = "y", autoHide = "never", viewportRef, events, options, element, children, style, ...props }) {
-  return /* @__PURE__ */ jsx(
-    OverlayScrollbarsComponent,
-    {
-      className: cn(className),
-      style: {
-        ...style,
-        overflow: "hidden",
-        minHeight: 0,
-        minWidth: 0
-      },
-      element,
-      defer: true,
-      options: najmScrollOptions(axis, autoHide, options || void 0),
-      events: {
-        ...events,
-        initialized: (instance, ...rest) => {
-          const viewport = instance.elements().viewport;
-          applyViewportLayout(viewport, axis);
-          assignRef(viewportRef, viewport);
-          events?.initialized?.(instance, ...rest);
-        },
-        updated: (instance, ...rest) => {
-          applyViewportLayout(instance.elements().viewport, axis);
-          events?.updated?.(instance, ...rest);
-        },
-        destroyed: (instance, ...rest) => {
-          assignRef(viewportRef, null);
-          events?.destroyed?.(instance, ...rest);
-        }
-      },
-      ...props,
-      children
-    }
-  );
-}
 var PortalScopeContext = createContext(void 0);
 function NPortalScopeProvider({ className, children }) {
   return /* @__PURE__ */ jsx(PortalScopeContext.Provider, { value: className, children });
@@ -2222,7 +1069,7 @@ function DialogTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  const container = React.useContext(NajmThemeContainerCtx);
+  const container = React60.useContext(NajmThemeContainerCtx);
   return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", container: container ?? void 0, ...props });
 }
 function DialogClose({ ...props }) {
@@ -2253,8 +1100,8 @@ function getDefaultPadding() {
   return window.matchMedia(MOBILE_PADDING_QUERY).matches ? "sm" : "md";
 }
 function useResponsivePadding(value) {
-  const [resolved, setResolved] = React.useState(() => value ?? getDefaultPadding());
-  React.useEffect(() => {
+  const [resolved, setResolved] = React60.useState(() => value ?? getDefaultPadding());
+  React60.useEffect(() => {
     if (value) {
       setResolved(value);
       return;
@@ -2318,7 +1165,7 @@ var sizeClasses2 = {
   md: "h-8 w-8",
   lg: "h-10 w-10"
 };
-var IconButton = React.forwardRef(
+var IconButton = React60.forwardRef(
   ({
     className,
     variant = "ghost",
@@ -2400,10 +1247,10 @@ function NPageHeaderTop({ children, className }) {
 }
 NPageHeaderTop.displayName = "NPageHeaderTop";
 function isPageHeaderSlot(child, slot) {
-  return React__default.isValidElement(child) && child.type === slot;
+  return React60__default.isValidElement(child) && child.type === slot;
 }
 function getSlotElements(children, slot) {
-  const matches = React__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
+  const matches = React60__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
   return matches.length > 0 ? matches : void 0;
 }
 var responsiveClasses = {
@@ -2666,11 +1513,11 @@ function createDialogStore() {
         dialog.resolve?.(result);
         set((state) => ({ dialogs: state.dialogs.slice(0, -1) }));
       };
-      const handler2 = dialog.primaryButton?.onClick ?? dialog.primaryButton?.onConfirm;
-      if (handler2 && result != null) {
+      const handler = dialog.primaryButton?.onClick ?? dialog.primaryButton?.onConfirm;
+      if (handler && result != null) {
         get().setPrimaryLoading(true);
         try {
-          await handler2(result);
+          await handler(result);
           closeCurrentDialog();
         } finally {
           get().setPrimaryLoading(false);
@@ -2757,11 +1604,11 @@ function createDialogStore() {
       const { dialogs, setPrimaryLoading, closeDialog } = get();
       const dialog = dialogs.find((d) => d.id === dialogId);
       if (!dialog?.primaryButton) return;
-      const handler2 = dialog.primaryButton.onClick ?? dialog.primaryButton.onConfirm;
-      if (handler2) {
+      const handler = dialog.primaryButton.onClick ?? dialog.primaryButton.onConfirm;
+      if (handler) {
         setPrimaryLoading(true);
         try {
-          await handler2(data);
+          await handler(data);
           closeDialog(dialogId, data);
         } finally {
           setPrimaryLoading(false);
@@ -2777,9 +1624,9 @@ function createDialogStore() {
         closeDialog(dialogId, null);
         return;
       }
-      const handler2 = dialog.secondaryButton.onClick ?? dialog.secondaryButton.onConfirm;
-      if (handler2) {
-        await handler2(data);
+      const handler = dialog.secondaryButton.onClick ?? dialog.secondaryButton.onConfirm;
+      if (handler) {
+        await handler(data);
       }
       closeDialog(dialogId, null);
     },
@@ -2816,8 +1663,8 @@ function NDialogSecondaryButton(_props) {
 function parseDirectDialogSlots(children) {
   const body = [];
   const parsed = {};
-  React__default.Children.forEach(children, (child) => {
-    if (!React__default.isValidElement(child)) {
+  React60__default.Children.forEach(children, (child) => {
+    if (!React60__default.isValidElement(child)) {
       body.push(child);
       return;
     }
@@ -2890,15 +1737,15 @@ var dialogVariants = cva(
 );
 var CONTENT_ACTIONS_SELECTOR = '[data-najm-dialog-actions="content"], [data-najm-wizard-form="true"]';
 function useContentOwnsActions() {
-  const [contentElement, setContentElement] = React__default.useState(null);
-  const [contentOwnsActions, setContentOwnsActions] = React__default.useState(false);
-  const contentElementRef = React__default.useRef(null);
-  const handleContentElementRef = React__default.useCallback((node) => {
+  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) => {
     if (contentElementRef.current === node) return;
     contentElementRef.current = node;
     setContentElement(node);
   }, []);
-  React__default.useLayoutEffect(() => {
+  React60__default.useLayoutEffect(() => {
     if (!contentElement) {
       setContentOwnsActions((current) => current ? false : current);
       return;
@@ -3151,8 +1998,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] = React__default.useState(defaultOpen);
-  const [primaryLoading, setPrimaryLoading] = React__default.useState(false);
+  const [internalOpen, setInternalOpen] = React60__default.useState(defaultOpen);
+  const [primaryLoading, setPrimaryLoading] = React60__default.useState(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
   const setOpen = (nextOpen) => {
@@ -3434,7 +2281,7 @@ function useDialog(store) {
         description: options.description,
         size: options.size || "sm",
         className: options.className,
-        render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) => React__default.createElement(NDeleteDialog, {
+        render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) => React60__default.createElement(NDeleteDialog, {
           itemName: options.itemName,
           itemType: options.itemType,
           icon: options.icon,
@@ -3639,7 +2486,7 @@ var SIZE_TEXT_MAP = {
   md: "text-sm",
   lg: "text-base"
 };
-function renderIcon2(icon) {
+function renderIcon(icon) {
   if (!icon) return null;
   return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
 }
@@ -3675,7 +2522,7 @@ function Badge({
   const resolvedLabel = label ?? (typeof children === "string" ? children : void 0) ?? status;
   const content = typeof children !== "string" && children ? children : resolvedLabel ?? children;
   const resolvedIcon = icon ?? (resolvedColor ? iconMap?.[resolvedColor] : void 0);
-  const iconNode = renderIcon2(showIcon ? resolvedIcon : icon);
+  const iconNode = renderIcon(showIcon ? resolvedIcon : icon);
   const isMinimal = look === "minimal" || look === "text";
   if (isMinimal) {
     const textColor = COLOR_TEXT_MAP[resolvedColor ?? ""] ?? "text-foreground";
@@ -3720,8 +2567,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 = React__default.useRef(null);
-  const pointerDismissedRef = React__default.useRef(false);
+  const triggerRef = React60__default.useRef(null);
+  const pointerDismissedRef = React60__default.useRef(false);
   const shouldDisplayIcon = Boolean(icon) && showIcon && value.length === 0;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const handleSelect = (itemValue) => {
@@ -3837,7 +2684,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 = React.useContext(NajmThemeContainerCtx);
+  const container = React60.useContext(NajmThemeContainerCtx);
   const recipe = useNajmComponentStyle("select");
   const contentSlot = recipe?.slots?.content;
   const borderWidth = contentSlot?.borderWidth ?? recipe?.borderWidth;
@@ -3920,9 +2767,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] = React__default.useState(false);
-  const triggerRef = React__default.useRef(null);
-  const pointerDismissedRef = React__default.useRef(false);
+  const [open, setOpen] = React60__default.useState(false);
+  const triggerRef = React60__default.useRef(null);
+  const pointerDismissedRef = React60__default.useRef(false);
   return /* @__PURE__ */ jsxs("div", { className: cn("group relative", className), children: [
     /* @__PURE__ */ jsxs(
       BaseInput,
@@ -4790,7 +3637,7 @@ function CollapsibleSection({
   children,
   disabled
 }) {
-  const [open, setOpen] = React.useState(true);
+  const [open, setOpen] = React60.useState(true);
   const titleText = typeof title === "string" || typeof title === "number" ? String(title) : "Section";
   return /* @__PURE__ */ jsxs(
     Collapsible,
@@ -5108,7 +3955,7 @@ function TokenGroupSection({
   disabled,
   labels
 }) {
-  const [open, setOpen] = React.useState(groupId === "surface" || groupId === "brand");
+  const [open, setOpen] = React60.useState(groupId === "surface" || groupId === "brand");
   const labelText = typeof label === "string" || typeof label === "number" ? String(label) : "Group";
   return /* @__PURE__ */ jsxs(
     Collapsible,
@@ -5440,7 +4287,7 @@ function normalizeCode(value, numeric, length) {
   const normalized = numeric ? value.replace(/\D/g, "") : value.replace(/\s/g, "");
   return normalized.slice(0, length);
 }
-var OtpInput = React__default.forwardRef(
+var OtpInput = React60__default.forwardRef(
   ({
     value,
     onChange,
@@ -5622,8 +4469,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 = React__default.useRef(null);
-  const pointerDismissedRef = React__default.useRef(false);
+  const triggerRef = React60__default.useRef(null);
+  const pointerDismissedRef = React60__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);
@@ -7010,7 +5857,7 @@ function DropdownMenuSubContent({ className, children, style, ...props }) {
   );
 }
 function DropdownMenuContent({ className, children, sideOffset = 4, style, ...props }) {
-  const container = React.useContext(NajmThemeContainerCtx);
+  const container = React60.useContext(NajmThemeContainerCtx);
   const surface = useDropdownSurfaceRecipe("content");
   const { hostRef, viewportRef } = useNajmScrollViewport();
   useNajmPortalLayerStyles();
@@ -7414,8 +6261,8 @@ function NSlider({
     return Array.isArray(v) ? [...v] : [v];
   };
   const initialRadix = toRadix(controlledValue ?? defaultValue);
-  const [internalValues, setInternalValues] = React.useState(initialRadix);
-  const [active, setActive] = React.useState(null);
+  const [internalValues, setInternalValues] = React60.useState(initialRadix);
+  const [active, setActive] = React60.useState(null);
   const currentValues = controlledValue !== void 0 ? toRadix(controlledValue) : internalValues;
   const handleRadix = (arr) => {
     setInternalValues(arr);
@@ -7572,13 +6419,13 @@ function NThemePresets({
   disabled = false,
   className
 }) {
-  const [saveOpen, setSaveOpen] = React.useState(false);
-  const [name, setName] = React.useState("");
-  const [pendingDelete, setPendingDelete] = React.useState(
+  const [saveOpen, setSaveOpen] = React60.useState(false);
+  const [name, setName] = React60.useState("");
+  const [pendingDelete, setPendingDelete] = React60.useState(
     null
   );
-  const [busy, setBusy] = React.useState(false);
-  const rows = React.useMemo(
+  const [busy, setBusy] = React60.useState(false);
+  const rows = React60.useMemo(
     () => [
       ...savedDesign ? [
         {
@@ -7830,12 +6677,12 @@ function NThemeCustomizer({
 }) {
   const inheritedMode = useNajmThemeMode();
   const resolvedPreviewMode = previewMode ?? inheritedMode ?? value.theme.mode ?? "light";
-  const visibleTabs = React.useMemo(() => buildTabs(tabs), [tabs]);
+  const visibleTabs = React60.useMemo(() => buildTabs(tabs), [tabs]);
   const firstTab = visibleTabs[0] ?? "theme";
-  const [activeTab, setActiveTab] = React.useState(TAB_VALUE[firstTab]);
-  const [fileError, setFileError] = React.useState(false);
-  const fileInputRef = React.useRef(null);
-  React.useEffect(() => {
+  const [activeTab, setActiveTab] = React60.useState(TAB_VALUE[firstTab]);
+  const [fileError, setFileError] = React60.useState(false);
+  const fileInputRef = React60.useRef(null);
+  React60.useEffect(() => {
     setActiveTab(TAB_VALUE[firstTab]);
   }, [firstTab]);
   const themeLabel = resolveLabel("themeTab", labels);
@@ -7847,7 +6694,7 @@ function NThemeCustomizer({
   const invalidThemeFileLabel = resolveLabel("invalidThemeFile", labels);
   const defaultOptionLabel = resolveLabel("defaultOption", labels);
   const colorSwatchFallbackLabel = resolveLabel("colorSwatchFallback", labels);
-  const tokenLabels = React.useMemo(() => {
+  const tokenLabels = React60.useMemo(() => {
     const out = {};
     const knownTokens = [
       "background",
@@ -8178,7 +7025,7 @@ function parseShortcut(shortcut) {
     key: parts.find((p) => !["ctrl", "shift", "alt", "cmd", "meta"].includes(p)) || ""
   };
 }
-function useKeyboard(shortcut, handler2, options = {}) {
+function useKeyboard(shortcut, handler, options = {}) {
   const { enabled = true, preventDefault = false, ignoreInputs = true, scopeRef } = options;
   const callback = useCallback(
     (e) => {
@@ -8195,10 +7042,10 @@ function useKeyboard(shortcut, handler2, options = {}) {
       const keyMatch = parsed.key ? e.key.toLowerCase() === parsed.key : true;
       if (ctrlMatch && shiftMatch && altMatch && metaMatch && keyMatch) {
         if (preventDefault) e.preventDefault();
-        handler2(e);
+        handler(e);
       }
     },
-    [shortcut, handler2, enabled, preventDefault, ignoreInputs, scopeRef]
+    [shortcut, handler, enabled, preventDefault, ignoreInputs, scopeRef]
   );
   useEffect(() => {
     document.addEventListener("keydown", callback);
@@ -8217,13 +7064,13 @@ function useClickOutside(ref, options) {
   const { enabled = true, onClickOutside } = options;
   useEffect(() => {
     if (!enabled) return;
-    const handler2 = (e) => {
+    const handler = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
         onClickOutside();
       }
     };
-    document.addEventListener("mousedown", handler2);
-    return () => document.removeEventListener("mousedown", handler2);
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
   }, [enabled, ref, onClickOutside]);
 }
 function useDebouncedValue(value, delay) {
@@ -8651,7 +7498,7 @@ function Alert({
   );
 }
 var NAlert = Alert;
-var NativeSelect = React.forwardRef(
+var NativeSelect = React60.forwardRef(
   ({ className, options, placeholder, value, ...props }, ref) => {
     const hasValue = value !== void 0 && value !== "";
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -8704,6 +7551,29 @@ 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) });
+}
+var NBrandingContext = createContext(null);
+function useNBranding() {
+  return useContext(NBrandingContext);
+}
+function NBrandingProvider({
+  children,
+  appName,
+  logoExpanded,
+  logoCollapsed,
+  logoFallback,
+  logoHref
+}) {
+  const value = useMemo(
+    () => ({ appName, logoExpanded, logoCollapsed, logoFallback, logoHref }),
+    [appName, logoExpanded, logoCollapsed, logoFallback, logoHref]
+  );
+  return /* @__PURE__ */ jsx(NBrandingContext.Provider, { value, children });
+}
 var avatarVariants = cva(
   "relative flex shrink-0 overflow-hidden",
   {
@@ -8794,7 +7664,7 @@ function Avatar({
   ...props
 }) {
   const hasShortcut = src !== void 0 || fallback !== void 0;
-  const hasChildren = React.Children.count(children) > 0;
+  const hasChildren = React60.Children.count(children) > 0;
   return /* @__PURE__ */ jsxs(
     AvatarPrimitive.Root,
     {
@@ -8888,9 +7758,9 @@ function AvatarGroup({ ring = true, className, children, ...props }) {
       "data-slot": "avatar-group",
       className: cn("flex -space-x-2", className),
       ...props,
-      children: ring ? React.Children.map(children, (child) => {
-        if (React.isValidElement(child) && child.type === Avatar) {
-          return React.cloneElement(child, { ring: true, ...child.props });
+      children: ring ? React60.Children.map(children, (child) => {
+        if (React60.isValidElement(child) && child.type === Avatar) {
+          return React60.cloneElement(child, { ring: true, ...child.props });
         }
         return child;
       }) : children
@@ -8957,7 +7827,7 @@ function Swap({
   className,
   ...props
 }) {
-  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+  const [internalChecked, setInternalChecked] = React60.useState(defaultChecked);
   const isControlled = controlledChecked !== void 0 || controlledState !== void 0;
   const currentState = getDerivedState(
     isControlled ? controlledChecked ?? false : internalChecked,
@@ -8965,7 +7835,7 @@ function Swap({
   );
   const dataState = currentState === "indeterminate" ? "indeterminate" : currentState ? "on" : "off";
   const ariaPressed = currentState === "indeterminate" ? "mixed" : currentState;
-  const handleClick = React.useCallback((event) => {
+  const handleClick = React60.useCallback((event) => {
     onClick?.(event);
     if (event.defaultPrevented) return;
     if (disabled) return;
@@ -9090,7 +7960,7 @@ var toneClasses = {
     ring: "border-primary/30"
   }
 };
-var StatusPill = React.forwardRef(
+var StatusPill = React60.forwardRef(
   ({ className, tone = "neutral", pulse = false, label, ...props }, ref) => {
     const c = toneClasses[tone];
     return /* @__PURE__ */ jsxs(
@@ -9149,20 +8019,20 @@ function Toaster({ toastOptions, ...props }) {
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React.createContext({});
+var FormFieldContext = React60.createContext({});
 var FormField = ({ ...props }) => /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 var useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
+  const fieldContext = React60.useContext(FormFieldContext);
+  const itemContext = React60.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 = React.createContext({});
+var FormItemContext = React60.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React.useId();
+  const id = React60.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 }) {
@@ -9306,7 +8176,7 @@ function NErrorState({ title = "Something went wrong", message, onRetry, retryLa
   ] });
 }
 function NEmptyState({ title = "No data", description, icon, action, className }) {
-  const iconContent = icon ? React__default.isValidElement(icon) ? icon : React__default.createElement(icon, { className: "h-8 w-8" }) : null;
+  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: [
@@ -9316,7 +8186,7 @@ function NEmptyState({ title = "No data", description, icon, action, className }
     action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
   ] });
 }
-var NErrorBoundary = class extends React__default.Component {
+var NErrorBoundary = class extends React60__default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -9628,8 +8498,8 @@ function NCard({
   let footerClassName;
   let mediaSlot = null;
   const mainChildren = [];
-  React__default.Children.forEach(children, (child) => {
-    if (!React__default.isValidElement(child)) {
+  React60__default.Children.forEach(children, (child) => {
+    if (!React60__default.isValidElement(child)) {
       mainChildren.push(child);
       return;
     }
@@ -9805,7 +8675,7 @@ function truncateByCharacters(text, maxCharacters, suffix = "...") {
   const str = String(text);
   return str.length <= maxCharacters ? str : str.slice(0, maxCharacters) + suffix;
 }
-var CardDensityContext = React__default.createContext("default");
+var CardDensityContext = React60__default.createContext("default");
 function NCardInfo({
   icon: Icon2,
   label,
@@ -9818,7 +8688,7 @@ function NCardInfo({
   className,
   ...props
 }) {
-  const inheritedDensity = React__default.useContext(CardDensityContext);
+  const inheritedDensity = React60__default.useContext(CardDensityContext);
   const resolvedDensity = density ?? inheritedDensity;
   const isTruncated = typeof value === "string" && value.length > maxChars;
   const displayValue = isTruncated ? truncateByCharacters(value, maxChars) : value;
@@ -11067,7 +9937,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(React__default.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React60__default.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border/60" }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -11539,19 +10409,19 @@ function Combobox({
   allowFreeText = false,
   disabled = false
 }) {
-  const [open, setOpen] = React.useState(false);
-  const [query, setQuery] = React.useState("");
-  const [highlight, setHighlight] = React.useState(0);
-  const wrapperRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const filtered = React.useMemo(() => {
+  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 q = query.trim().toLowerCase();
     if (!q) return options;
     return options.filter(
       (opt) => opt.label.toLowerCase().includes(q) || opt.value.toLowerCase().includes(q)
     );
   }, [options, query]);
-  React.useEffect(() => {
+  React60.useEffect(() => {
     if (!open) return;
     const onClick = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
@@ -11562,7 +10432,7 @@ function Combobox({
     document.addEventListener("mousedown", onClick);
     return () => document.removeEventListener("mousedown", onClick);
   }, [open]);
-  React.useEffect(() => {
+  React60.useEffect(() => {
     if (open) {
       setHighlight(0);
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -11570,7 +10440,7 @@ function Combobox({
       setQuery("");
     }
   }, [open]);
-  const selectedLabel = React.useMemo(() => {
+  const selectedLabel = React60.useMemo(() => {
     const match = options.find((o) => o.value === value);
     return match?.label ?? value;
   }, [options, value]);
@@ -11710,14 +10580,14 @@ function NFormInner({ schema, defaultValues, onSubmit, form: externalForm, varia
   }, [devTools, form]);
   useEffect(() => {
     if (!devTools?.enabled) return;
-    const handler2 = (e) => {
+    const handler = (e) => {
       if (e.key === "F8") {
         e.preventDefault();
         handleFill();
       }
     };
-    document.addEventListener("keydown", handler2);
-    return () => document.removeEventListener("keydown", handler2);
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
   }, [devTools?.enabled, handleFill]);
   useEffect(() => {
     const proc = globalThis.process;
@@ -12334,16 +11204,6 @@ function WizardForm({
     }
   );
 }
-var TableStoreContext = createContext(null);
-var useTableStore = { use: {} };
-var handler = {
-  get: (_, prop) => () => {
-    const store = useContext(TableStoreContext);
-    if (!store) throw new Error("useTableStore must be used within NTable");
-    return store.use[prop]();
-  }
-};
-useTableStore.use = new Proxy({}, handler);
 var actionButtonClass = (bordered, danger) => cn(
   "flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-transparent text-muted-foreground transition-colors",
   danger ? "hover:border-red-200 hover:bg-red-50 hover:text-red-500" : "hover:border-border hover:bg-muted hover:text-foreground",
@@ -12921,8 +11781,8 @@ function useTable(effectiveViewModeOverride) {
         ...effectiveColumns,
         {
           id: "actions",
-          header: () => isMenuActions ? null : React__default.createElement("div", { className: "flex w-full justify-start text-left" }, "Actions"),
-          cell: ({ row }) => React__default.createElement(TableActionCell, { row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }),
+          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 }),
           enableSorting: false,
           enableHiding: false
         }
@@ -13186,10 +12046,10 @@ function EditableCell({ cell, onCellEdit }) {
   const columnId = cell.column.id;
   const editor = meta.editor || "text";
   const initial = cell.getValue();
-  const [editing, setEditing] = React__default.useState(false);
-  const [value, setValue] = React__default.useState(initial);
-  const [saving, setSaving] = React__default.useState(false);
-  React__default.useEffect(() => {
+  const [editing, setEditing] = React60__default.useState(false);
+  const [value, setValue] = React60__default.useState(initial);
+  const [saving, setSaving] = React60__default.useState(false);
+  React60__default.useEffect(() => {
     if (!editing) setValue(initial);
   }, [initial, editing]);
   const commit = async (next) => {
@@ -13360,7 +12220,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(React__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React60__default.Fragment, { children: [
             /* @__PURE__ */ jsxs(
               TableRow,
               {
@@ -13619,7 +12479,7 @@ function NTableCardSkeleton({ surface }) {
 }
 function NTableLoadingSkeleton({ rows }) {
   const rawColumns = useTableStore.use.columns();
-  const responsiveColumns = React__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
+  const responsiveColumns = React60__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
   const columns = responsiveColumns;
   const showCheckbox = useTableStore.use.showCheckbox();
   const headerClassName = useTableStore.use.headerClassName();
@@ -13742,19 +12602,19 @@ function useCardContinuation({
   rowCount,
   viewportRef
 }) {
-  const [internalPending, setInternalPending] = React__default.useState(false);
-  const [internalError, setInternalError] = React__default.useState(null);
-  const [announcement, setAnnouncement] = React__default.useState("");
-  const [viewportReady, setViewportReady] = React__default.useState(false);
-  const pendingRef = React__default.useRef(false);
-  const previousRowCountRef = React__default.useRef(rowCount);
-  const configRef = React__default.useRef(config);
+  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);
   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 = React__default.useCallback(async () => {
+  const load = React60__default.useCallback(async () => {
     const current = configRef.current;
     if (!current) return;
     if (pendingRef.current || current.loadingMore || !current.hasNextPage) return;
@@ -13779,13 +12639,13 @@ function useCardContinuation({
     load,
     { rootMargin: config?.rootMargin ?? DEFAULT_ROOT_MARGIN }
   );
-  React__default.useLayoutEffect(() => {
+  React60__default.useLayoutEffect(() => {
     const node = viewportRef.current ?? null;
     scrollContainerRef.current = node;
     const ready = Boolean(node);
     setViewportReady((value) => value === ready ? value : ready);
   });
-  React__default.useEffect(() => {
+  React60__default.useEffect(() => {
     const previous = previousRowCountRef.current;
     previousRowCountRef.current = rowCount;
     if (!configRef.current) return;
@@ -13795,10 +12655,10 @@ function useCardContinuation({
       configRef.current.itemsLoadedLabel?.(appended) ?? `${appended} more ${appended === 1 ? "item" : "items"} loaded.`
     );
   }, [rowCount]);
-  React__default.useEffect(() => {
+  React60__default.useEffect(() => {
     if (!pending) doneLoading();
   }, [pending, doneLoading]);
-  React__default.useEffect(() => {
+  React60__default.useEffect(() => {
     if (!enabled || !hasNextPage || error) return;
     return observe();
   }, [enabled, hasNextPage, error, observe, viewportReady, rowCount]);
@@ -13852,7 +12712,7 @@ function NTableCards({ effectiveMode }) {
   const cardPagination = useTableStore.use.cardPagination();
   const cardColumnCount = useTableStore.use.cardColumnCount();
   const surface = useTableSurfaceAppearance(bordered, borderColor);
-  const viewportRef = React__default.useRef(null);
+  const viewportRef = React60__default.useRef(null);
   const continuationConfig = cardPagination.mode === "infinite" ? cardPagination : null;
   const continuation = useCardContinuation({
     config: continuationConfig,
@@ -14067,41 +12927,23 @@ function page(pageIndex) {
 function range(from, to) {
   return Array.from({ length: to - from + 1 }, (_, index) => page(from + index));
 }
-var NTableDefaultsContext = React__default.createContext({});
-function NTableDefaultsProvider({
-  children,
-  value
-}) {
-  return /* @__PURE__ */ jsx(NTableDefaultsContext.Provider, { value, children });
-}
-function useNTableDefaults() {
-  return React__default.useContext(NTableDefaultsContext);
-}
-function useResolvedPaginationLabels(own) {
-  const defaults = useNTableDefaults();
-  const inherited = defaults.paginationLabels;
-  return React__default.useMemo(
-    () => ({ ...inherited, ...own }),
-    [inherited, own]
-  );
-}
 function CardLoadMorePagination({
   config,
   rowCount,
   bordered,
   className
 }) {
-  const [internalPending, setInternalPending] = React__default.useState(false);
-  const [internalError, setInternalError] = React__default.useState(null);
-  const [announcement, setAnnouncement] = React__default.useState("");
-  const buttonRef = React__default.useRef(null);
-  const pendingRef = React__default.useRef(false);
-  const restoreFocusRef = React__default.useRef(false);
-  const previousRowCountRef = React__default.useRef(rowCount);
-  const errorId = React__default.useId();
+  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 pending = Boolean(config.loadingMore || internalPending);
   const error = config.loadMoreError ?? internalError;
-  React__default.useEffect(() => {
+  React60__default.useEffect(() => {
     const previous = previousRowCountRef.current;
     if (rowCount > previous) {
       const appended = rowCount - previous;
@@ -14111,7 +12953,7 @@ function CardLoadMorePagination({
     }
     previousRowCountRef.current = rowCount;
   }, [config.itemsLoadedLabel, rowCount]);
-  React__default.useEffect(() => {
+  React60__default.useEffect(() => {
     if (pending || !restoreFocusRef.current) return;
     restoreFocusRef.current = false;
     const frame = requestAnimationFrame(() => buttonRef.current?.focus());
@@ -14181,9 +13023,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 = React__default.useRef(null);
-  const warned = React__default.useRef(false);
-  React__default.useEffect(() => {
+  const previous = React60__default.useRef(null);
+  const warned = React60__default.useRef(false);
+  React60__default.useEffect(() => {
     if (typeof console === "undefined") return;
     if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
     if (!manualPagination || pageCount === void 0 || !pagination) {
@@ -14652,21 +13494,6 @@ function NTableHeader() {
     ] })
   ] });
 }
-function formatJsonValue(value) {
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value ?? null, null, 2) ?? String(value);
-  } catch {
-    return String(value);
-  }
-}
-function NTableJson() {
-  const viewMode = useTableStore.use.viewMode();
-  const renderJson = useTableStore.use.renderJson();
-  const jsonValue = useTableStore.use.jsonValue();
-  if (viewMode !== "json") return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx(NajmScroll, { axis: "both", className: "h-full min-h-0 rounded-md border border-border bg-muted/40", children: /* @__PURE__ */ jsx("pre", { className: "p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) }) });
-}
 function TableStateSlot({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "flex min-h-64 flex-1 items-center justify-center", children });
 }
@@ -14721,9 +13548,9 @@ function TableLayout(props) {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia("(max-width: 639px)");
     setIsMobile(mql.matches);
-    const handler2 = (e) => setIsMobile(e.matches);
-    mql.addEventListener("change", handler2);
-    return () => mql.removeEventListener("change", handler2);
+    const handler = (e) => setIsMobile(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
   }, []);
   const effectiveMode = (() => {
     if (viewMode === "json") return "json";
@@ -15340,42 +14167,45 @@ function NSidebarHeader({ children, collapsed, className, classNames }) {
     className
   ), children });
 }
-function NSidebarLogo({
-  icon,
-  title,
-  subtitle,
-  onClick,
-  collapsed = false
-}) {
-  if (!icon && !title && !subtitle) return null;
-  const IconNode = React__default.isValidElement(icon) ? icon : typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon ? React__default.createElement(icon, { className: "h-6 w-6 text-sidebar-primary" }) : icon;
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: cn(
-        "flex items-center gap-2.5  text-left",
-        onClick && "cursor-pointer hover:opacity-80 transition-opacity"
-      ),
-      children: [
-        IconNode && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "size-10 rounded-lg bg-sidebar-primary/10 flex items-center justify-center shrink-0",
-              collapsed && "ml-[calc((var(--rail,4rem)-var(--sidebar-edge-width,0px))/2-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem)-var(--spacing,0.25rem))]"
-            ),
-            children: IconNode
-          }
+var COLLAPSED_BOX = "size-8 shrink-0 overflow-hidden rounded-lg";
+var EXPANDED_MARK_BOX = "h-10 w-32";
+var EXPANDED_CHIP_BOX = "size-10 shrink-0 rounded-lg";
+var CHIP_SKIN = "bg-sidebar-primary/10";
+var FIT = "[&_img]:size-full [&_img]:object-contain";
+function NSidebarBrand({ logo, collapsed, linkComponent: Link, className }) {
+  const source = collapsed ? logo.collapsed ?? logo.expanded : logo.expanded;
+  const showText = !collapsed && (logo.title || logo.subtitle);
+  const isChip = logo.variant === "chip";
+  if (!source && !showText) return null;
+  const image = typeof source === "string" ? /* @__PURE__ */ jsx(NImage, { src: source, fallback: logo.fallback, alt: logo.alt ?? "", "aria-hidden": logo.alt ? void 0 : true }) : source;
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    image ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "flex items-center justify-center",
+          collapsed ? COLLAPSED_BOX : isChip ? EXPANDED_CHIP_BOX : EXPANDED_MARK_BOX,
+          isChip && CHIP_SKIN,
+          FIT,
+          className
         ),
-        !collapsed && (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col ", children: [
-          title && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-sidebar-foreground leading-tight truncate", children: title }),
-          subtitle && /* @__PURE__ */ jsx("span", { className: "text-xs text-sidebar-foreground/60 leading-tight truncate", children: subtitle })
-        ] })
-      ]
-    }
+        children: image
+      }
+    ) : null,
+    showText ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+      logo.title ? /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold leading-tight text-sidebar-foreground", children: logo.title }) : null,
+      logo.subtitle ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs leading-tight text-sidebar-foreground/60", children: logo.subtitle }) : null
+    ] }) : null
+  ] });
+  const wrapper = cn(
+    "flex min-w-0 items-center gap-2.5 text-left",
+    !collapsed && !showText && !isChip && "mx-auto"
   );
+  const interactive = "cursor-pointer transition-opacity hover:opacity-80";
+  if (logo.href && Link) return /* @__PURE__ */ jsx(Link, { href: logo.href, className: cn(wrapper, interactive), children: inner });
+  if (logo.href) return /* @__PURE__ */ jsx("a", { href: logo.href, className: cn(wrapper, interactive), children: inner });
+  if (logo.onClick) return /* @__PURE__ */ jsx("button", { type: "button", onClick: logo.onClick, className: cn(wrapper, interactive), children: inner });
+  return /* @__PURE__ */ jsx("div", { className: wrapper, children: inner });
 }
 function defaultIsActive(item, activePath) {
   if (item.href) return activePath === item.href;
@@ -15674,6 +14504,10 @@ function NSidebarMobile({
     )
   ] });
 }
+var LOGO_OBJECT_KEYS = ["expanded", "collapsed", "fallback", "alt", "href", "title", "subtitle"];
+function isSidebarLogoObject(value) {
+  return typeof value === "object" && value !== null && !isValidElement(value) && !Array.isArray(value) && LOGO_OBJECT_KEYS.some((key) => key in value);
+}
 function buildGroups(items) {
   const groups = [];
   for (const item of items) {
@@ -15776,10 +14610,6 @@ function NSidebar({
   expandLabel = "Expand",
   hamburgerClassName,
   showHamburgerButton = false,
-  logoIcon,
-  logoTitle,
-  logoSubtitle,
-  onLogoClick,
   onSettings,
   settingsLabel,
   onLogout,
@@ -15790,6 +14620,7 @@ function NSidebar({
   const [_mobileOpen, _setMobileOpen] = useState(defaultMobileOpen);
   const [_collapsed, _setCollapsed] = useState(defaultCollapsed);
   const sidebar = useNSidebar();
+  const branding = useNBranding();
   const isMobileControlled = mobileOpenProp !== void 0;
   const isCollapsedControlled = collapsedProp !== void 0;
   const mobileOpen = isMobileControlled ? mobileOpenProp : sidebar?.mobileOpen ?? _mobileOpen;
@@ -15882,11 +14713,36 @@ function NSidebar({
   const effectiveShowSectionSeparators = showSectionSeparators ?? recipe?.showSectionSeparators ?? false;
   const contentSlot = recipe?.slots?.content;
   const contentStyle = contentSlot?.paddingTop ? { paddingTop: contentSlot.paddingTop } : void 0;
-  const desktopDefaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed: desktopCollapsed }) : null;
-  const mobileDefaultLogoContent = logoIcon || logoTitle || logoSubtitle ? /* @__PURE__ */ jsx(NSidebarLogo, { icon: logoIcon, title: logoTitle, subtitle: logoSubtitle, onClick: onLogoClick, collapsed: false }) : null;
-  const renderLogo = (isMobile) => typeof logo === "function" ? logo({ collapsed: isMobile ? false : desktopCollapsed, isMobile }) : logo;
-  const desktopHeaderContent = renderLogo(false) ?? desktopDefaultLogoContent;
-  const mobileHeaderContent = renderLogo(true) ?? mobileDefaultLogoContent;
+  const brandingLogo = useMemo(() => {
+    if (!branding?.logoExpanded && !branding?.logoCollapsed) return null;
+    return {
+      expanded: branding.logoExpanded,
+      collapsed: branding.logoCollapsed,
+      fallback: branding.logoFallback,
+      href: branding.logoHref,
+      alt: branding.appName
+    };
+  }, [branding]);
+  const brandNode = (value, isCollapsed) => /* @__PURE__ */ jsx(
+    NSidebarBrand,
+    {
+      logo: value,
+      collapsed: isCollapsed,
+      linkComponent,
+      className: classNames?.sidebarLogo
+    }
+  );
+  const renderLogo = (isMobile) => {
+    const isCollapsed = isMobile ? false : desktopCollapsed;
+    if (typeof logo === "function") return logo({ collapsed: isCollapsed, isMobile });
+    if (isSidebarLogoObject(logo)) {
+      return brandNode({ ...logo, alt: logo.alt ?? branding?.appName }, isCollapsed);
+    }
+    if (logo === void 0) return brandingLogo ? brandNode(brandingLogo, isCollapsed) : void 0;
+    return logo;
+  };
+  const desktopHeaderContent = renderLogo(false);
+  const mobileHeaderContent = renderLogo(true);
   const contentProps = {
     groups,
     activePath,
@@ -16059,7 +14915,7 @@ function NNavbar({
               (userMenuActions.length > 0 || onLogout) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
               userMenuActions.map((action) => {
                 const ActionIcon = action.icon;
-                return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+                return /* @__PURE__ */ jsxs(React60__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" }),
@@ -16126,11 +14982,11 @@ function NAppShell({
     [onNavigate]
   );
   useEffect(() => {
-    const handler2 = (e) => {
+    const handler = (e) => {
       if (e.key === "Escape") setMobileOpen(false);
     };
-    document.addEventListener("keydown", handler2);
-    return () => document.removeEventListener("keydown", handler2);
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-screen overflow-hidden", classNames?.root), children: [
     /* @__PURE__ */ jsx(
@@ -16329,4 +15185,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, Button, 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_COMPONENT_NAMES, NAJM_SAVED_THEME_VALUE, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBarChart, NBulkActionsBar, NButton, 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, NIcon, NIndicator, NInspectorSheet, NLineChart, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderCompactActions, NPageHeaderFilters, NPageHeaderTop, NPageLayout, NPieChart, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarLogo, NSidebarMobile, NSidebarProvider, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, NStatusBreakdown, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableDefaultsProvider, NTableHeader, NTableJson, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NThemeCustomizer, NThemePresets, NUploader, NViewBody, NViewToggle, NajmDesignProvider, NajmScroll, NajmThemeProvider, NativeSelect, NumberInput, OtpInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RADIUS_VALUE_MAP, 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, TableStoreContext, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, TimeZoneInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buildPageItems, buttonVariants, cn, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, filterResponsiveColumns, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNChartColor, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, inputBorderClasses, normalizeThemeFileName, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, parseThemeFile, resolveHiddenBelowClass, resolvePreset, resolveRadiusValue, resolveSlot, resolveVariantAlias, sidebarBorderClasses, sliderVariants, stringifyNajmDesignConfig, stringifyNajmThemeConfig, stringifyThemeFile, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNSidebar, useNTableDefaults, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, 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, NBrandingProvider, 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, createDialogStore, createTableStore, detectFormat, dialogVariants, filterResponsiveColumns, 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, useNBranding, useNForm, useNPortalScope, useNSidebar, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useVariant, useVariantPreset };