najm-kit 2.8.2 → 2.10.0

package/dist/{chunk-USZUOJMK.mjs → chunk-FDONJASN.mjs}

@@ -3,6 +3,76 @@ import * as React2 from 'react';
 import React2__default from 'react';
 import { jsx } from 'react/jsx-runtime';
 
+// src/components/Badge/status.ts
+var NAJM_STATUS_COLORS = {
+  active: "success",
+  approved: "success",
+  completed: "success",
+  confirmed: "success",
+  delivered: "success",
+  paid: "success",
+  published: "success",
+  succeeded: "success",
+  validated: "success",
+  verified: "success",
+  in_preparation: "warning",
+  in_progress: "warning",
+  out_for_delivery: "warning",
+  pending: "warning",
+  pending_email_verification: "warning",
+  pending_review: "warning",
+  processing: "warning",
+  submitted: "warning",
+  paused: "info",
+  purchased: "info",
+  scheduled: "info",
+  archived: "neutral",
+  cancelled: "neutral",
+  canceled: "neutral",
+  closed: "neutral",
+  draft: "neutral",
+  inactive: "neutral",
+  stopped: "neutral",
+  unknown: "neutral",
+  blocked: "destructive",
+  expired: "destructive",
+  failed: "destructive",
+  refunded: "destructive",
+  rejected: "destructive",
+  suspended: "destructive"
+};
+var NAJM_COLOR_TEXT_CLASSES = {
+  primary: "text-primary",
+  secondary: "text-secondary-foreground",
+  accent: "text-accent-foreground",
+  neutral: "text-muted-foreground",
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  destructive: "text-destructive"
+};
+function normalizeStatusToken(status) {
+  return status.trim().toLowerCase().replace(/[\s-]+/g, "_");
+}
+function lookup(map, status, normalized) {
+  if (!map) return void 0;
+  return map[status] ?? map[normalized];
+}
+function findStatusColor(status, statusMap) {
+  if (!status) return void 0;
+  const normalized = normalizeStatusToken(status);
+  return lookup(statusMap, status, normalized) ?? lookup(NAJM_STATUS_COLORS, status, normalized);
+}
+function resolveStatusColor(status, statusMap, fallback = "neutral") {
+  return findStatusColor(status, statusMap) ?? fallback;
+}
+function colorTextClass(color) {
+  return NAJM_COLOR_TEXT_CLASSES[color] ?? "text-foreground";
+}
+function statusTextClass(status, statusMap, fallback) {
+  const color = findStatusColor(status, statusMap) ?? fallback;
+  return color ? colorTextClass(color) : "";
+}
 var NTableDefaultsContext = React2__default.createContext({});
 function NTableDefaultsProvider({
   children,
@@ -190,12 +260,41 @@ function NajmDesignEditorProvider({
 }
 function noop() {
 }
+var NBadgeDefaultsContext = React2.createContext(null);
+function NBadgeDefaultsProvider({
+  defaults,
+  t,
+  children
+}) {
+  const value = React2.useMemo(
+    () => ({ defaults, t }),
+    [defaults, t]
+  );
+  return /* @__PURE__ */ jsx(NBadgeDefaultsContext.Provider, { value, children });
+}
+function useNBadgeDefaults() {
+  return React2.useContext(NBadgeDefaultsContext);
+}
+function resolveBadgeStatusLabel(status, defaults, t) {
+  if (!defaults) return void 0;
+  const normalized = normalizeStatusToken(status);
+  const literal = defaults.statusLabels?.[status] ?? defaults.statusLabels?.[normalized];
+  if (literal !== void 0) return literal;
+  const key = defaults.statusLabelKeys?.[status] ?? defaults.statusLabelKeys?.[normalized];
+  return key !== void 0 && t ? t(key) : void 0;
+}
+function mergeBadgeMaps(base, overrides) {
+  if (!base) return overrides;
+  if (!overrides) return base;
+  return { ...base, ...overrides };
+}
 function NajmUICore({
   children,
   className,
   t,
   paginationKeyPrefix = DEFAULT_PAGINATION_KEY_PREFIX,
-  tableDefaults
+  tableDefaults,
+  badgeDefaults
 }) {
   const { theme } = useNajmTheme();
   const design = useNajmDesignEditor()?.design ?? EMPTY_DESIGN;
@@ -211,7 +310,7 @@ function NajmUICore({
       config: design,
       mode: theme,
       className: cn("min-h-full", className),
-      children: /* @__PURE__ */ jsx(NTableDefaultsProvider, { value: defaults, children })
+      children: /* @__PURE__ */ jsx(NTableDefaultsProvider, { value: defaults, children: /* @__PURE__ */ jsx(NBadgeDefaultsProvider, { defaults: badgeDefaults, t, children }) })
     }
   );
 }
@@ -223,6 +322,7 @@ function NajmUIProvider({
   t,
   paginationKeyPrefix,
   tableDefaults,
+  badgeDefaults,
   initialTheme,
   initialTimeZone,
   onThemeChange,
@@ -237,6 +337,7 @@ function NajmUIProvider({
       t,
       paginationKeyPrefix,
       tableDefaults,
+      badgeDefaults,
       children
     }
   ) });
@@ -254,4 +355,63 @@ function NajmUIProvider({
   );
 }
 
-export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone, useResolvedPaginationLabels };
+// src/lib/imageSource.ts
+var INLINE_SOURCE = /^(?:data|blob):/i;
+function withSrcVersion(src, version) {
+  if (version === null || version === void 0 || version === "") return src;
+  if (INLINE_SOURCE.test(src)) return src;
+  const separator = src.includes("?") ? "&" : "?";
+  return `${src}${separator}v=${encodeURIComponent(String(version))}`;
+}
+function normalizeImageSources(candidates, version) {
+  const sources = [];
+  for (const candidate of candidates) {
+    const trimmed = candidate?.trim();
+    if (!trimmed) continue;
+    const stamped = withSrcVersion(trimmed, version);
+    if (!sources.includes(stamped)) sources.push(stamped);
+  }
+  return sources;
+}
+function selectImageSource(sources, failed) {
+  return sources.find((source) => !failed.includes(source));
+}
+var NO_FAILURES = [];
+function useImageChain(sources) {
+  const key = JSON.stringify(sources);
+  const [state, setState] = React2.useState(() => ({
+    key,
+    failed: NO_FAILURES,
+    loaded: null
+  }));
+  const fresh = { key, failed: NO_FAILURES, loaded: null };
+  const current = state.key === key ? state : fresh;
+  if (state.key !== key) setState(fresh);
+  const active = selectImageSource(sources, current.failed);
+  const markLoaded = React2.useCallback(() => {
+    if (active === void 0) return;
+    setState(
+      (prev) => prev.key !== key || prev.loaded === active ? prev : { ...prev, loaded: active }
+    );
+  }, [key, active]);
+  const markFailed = React2.useCallback(() => {
+    if (active === void 0) return;
+    setState((prev) => {
+      if (prev.key !== key || prev.failed.includes(active)) return prev;
+      return {
+        ...prev,
+        failed: [...prev.failed, active],
+        loaded: prev.loaded === active ? null : prev.loaded
+      };
+    });
+  }, [key, active]);
+  return {
+    src: active ?? sources[sources.length - 1],
+    exhausted: sources.length > 0 && active === void 0,
+    loaded: active !== void 0 && current.loaded === active,
+    markLoaded,
+    markFailed
+  };
+}
+
+export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NAJM_COLOR_TEXT_CLASSES, NAJM_STATUS_COLORS, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, colorTextClass, findStatusColor, mergeBadgeMaps, normalizeImageSources, normalizeStatusToken, resolveBadgeStatusLabel, resolveStatusColor, statusTextClass, useImageChain, useNBadgeDefaults, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone, useResolvedPaginationLabels };

package/dist/{chunk-GHMR45H3.mjs → chunk-HML2JZXT.mjs}

@@ -1,4 +1,4 @@
-import { useNajmPreferencesContext } from './chunk-USZUOJMK.mjs';
+import { useNajmPreferencesContext } from './chunk-FDONJASN.mjs';
 import { humanizeToken, DEFAULT_PLACEHOLDER, formatRelativeTime, formatTime, formatDateTime, formatDate, formatPercent, formatNumber, formatCurrency } from './chunk-JABLSOQN.mjs';
 import * as React2 from 'react';
 import { createContext, useContext, useMemo, useState, useCallback } from 'react';

package/dist/chunk-JUYT2ISO.mjs

@@ -0,0 +1,404 @@
+import { useNajmComponentStyle, cn } from './chunk-KVZACF4G.mjs';
+import { resolveVariantAlias, resolveRadiusValue } from './chunk-TFHWLE7N.mjs';
+import * as React2 from 'react';
+import React2__default, { createContext, useContext } from 'react';
+import * as LucideIcons from 'lucide-react';
+import { LoaderCircleIcon } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { OverlayScrollbars } from 'overlayscrollbars';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+
+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 (React2__default.isValidElement(icon)) {
+    return React2__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";
+
+// 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 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 = React2.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] = React2.useState(false);
+    const isLoading = loading || pending;
+    const isDisabled = disabled || disabledWhileLoading && isLoading;
+    const Comp = asChild ? Slot : "button";
+    const handleClick = React2.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 ? React2.Children.only(children) : null;
+    const childContent = asChild && React2.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 && React2.isValidElement(child) ? React2.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;
+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 = React2.useRef(null);
+  const viewportRef = React2.useRef(null);
+  React2.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 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);
+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) }) }) });
+}
+
+export { Button, NButton, NIcon, NTableJson, NajmScroll, TableStoreContext, buttonVariants, inputBorderClasses, sidebarBorderClasses, surfaceBorderClasses, useNajmScrollViewport, useTableStore };