najm-kit 2.7.0 → 2.7.2

package/dist/adapters/app.mjs

@@ -1,33 +1,66 @@
 'use client';
-import { NBrandingProvider } from '../chunk-IGUQGT3G.mjs';
-import { NajmNextUIProvider } from '../chunk-4MRUJ2ZO.mjs';
-import '../chunk-7F65QM43.mjs';
-import '../chunk-YBM5CTE6.mjs';
+import { NBrandingStateProvider, NajmFormatProvider } from '../chunk-QOP7L6RD.mjs';
+import { NajmNextUIProvider } from '../chunk-IRFFSAO2.mjs';
+import '../chunk-USZUOJMK.mjs';
+import '../chunk-KVZACF4G.mjs';
 import * as React from 'react';
 import { I18nProvider, useTranslation } from 'najm-i18n/react';
 import { jsx } from 'react/jsx-runtime';
 
 var DEFAULT_LANGUAGE_ENDPOINT = "/api/ui-language";
-function NajmAppUI({ children, branding, ...props }) {
-  const { t } = useTranslation();
+function NajmAppUI({
+  children,
+  branding,
+  initialBranding,
+  currency,
+  locale,
+  locales,
+  formatPlaceholder,
+  ...props
+}) {
+  const { t, language } = useTranslation();
+  const resolved = locale ?? locales?.[language] ?? language;
   return /* @__PURE__ */ jsx(NajmNextUIProvider, { t, ...props, children: /* @__PURE__ */ jsx(
-    NBrandingProvider,
+    NBrandingStateProvider,
     {
-      appName: branding?.appName,
-      logoExpanded: branding?.logoExpanded,
-      logoCollapsed: branding?.logoCollapsed,
-      children
+      branding,
+      initialBranding,
+      children: /* @__PURE__ */ jsx(
+        NajmFormatProvider,
+        {
+          locale: resolved,
+          currency,
+          placeholder: formatPlaceholder,
+          children
+        }
+      )
     }
   ) });
 }
-function NajmAppNoI18n({ children, branding, ...props }) {
+function NajmAppNoI18n({
+  children,
+  branding,
+  initialBranding,
+  currency,
+  locale,
+  locales,
+  formatPlaceholder,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(NajmNextUIProvider, { ...props, children: /* @__PURE__ */ jsx(
-    NBrandingProvider,
+    NBrandingStateProvider,
     {
-      appName: branding?.appName,
-      logoExpanded: branding?.logoExpanded,
-      logoCollapsed: branding?.logoCollapsed,
-      children
+      branding,
+      initialBranding,
+      children: /* @__PURE__ */ jsx(
+        NajmFormatProvider,
+        {
+          locale: locale ?? "en",
+          currency,
+          placeholder: formatPlaceholder,
+          children
+        }
+      )
     }
   ) });
 }
@@ -36,6 +69,8 @@ function NajmAppProvider({
   initialLanguage,
   defaultLanguage,
   languageEndpoint = DEFAULT_LANGUAGE_ENDPOINT,
+  appName,
+  initialBranding,
   ...props
 }) {
   const persistLanguage = React.useCallback(
@@ -54,7 +89,8 @@ function NajmAppProvider({
     },
     [languageEndpoint]
   );
-  if (!translations) return /* @__PURE__ */ jsx(NajmAppNoI18n, { ...props });
+  const seeded = appName ? { appName, ...initialBranding } : initialBranding;
+  if (!translations) return /* @__PURE__ */ jsx(NajmAppNoI18n, { ...props, initialBranding: seeded });
   return /* @__PURE__ */ jsx(
     I18nProvider,
     {
@@ -62,7 +98,7 @@ function NajmAppProvider({
       initialLanguage: initialLanguage ?? defaultLanguage ?? "en",
       defaultLanguage,
       onLanguageChange: persistLanguage,
-      children: /* @__PURE__ */ jsx(NajmAppUI, { ...props })
+      children: /* @__PURE__ */ jsx(NajmAppUI, { ...props, initialBranding: seeded })
     }
   );
 }

package/dist/adapters/next.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
-import { N as NajmUIProviderProps } from '../NajmUIProvider-BsCoDjHH.js';
+import { N as NajmUIProviderProps } from '../NajmUIProvider-ClpHD-55.js';
+import '../paginationLabels-CY2PvbMj.js';
 
 interface NextLinkAdapterProps extends Record<string, any> {
     href: string;

package/dist/adapters/next.mjs

@@ -1,3 +1,3 @@
-export { NajmNextUIProvider, NextLinkAdapter, useNextNavigationAdapter } from '../chunk-4MRUJ2ZO.mjs';
-import '../chunk-7F65QM43.mjs';
-import '../chunk-YBM5CTE6.mjs';
+export { NajmNextUIProvider, NextLinkAdapter, useNextNavigationAdapter } from '../chunk-IRFFSAO2.mjs';
+import '../chunk-USZUOJMK.mjs';
+import '../chunk-KVZACF4G.mjs';

package/dist/{chunk-4DLRXB2W.mjs → chunk-6OOBAEH2.mjs}

@@ -1,6 +1,4 @@
-import { useNajmComponentStyle } from './chunk-YBM5CTE6.mjs';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { useNajmComponentStyle, cn } from './chunk-KVZACF4G.mjs';
 import * as React2 from 'react';
 import React2__default, { createContext, useContext } from 'react';
 import * as LucideIcons from 'lucide-react';
@@ -11,9 +9,6 @@ import { cva } from 'class-variance-authority';
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 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("");
 }
@@ -829,4 +824,4 @@ function NTableJson() {
   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, NAJM_COMPONENT_NAMES, NButton, NIcon, NTableJson, NajmScroll, RADIUS_VALUE_MAP, TableStoreContext, buttonVariants, cn, defineNajmDesignConfig, defineNajmThemeConfig, inputBorderClasses, parseNajmDesignConfig, parseNajmThemeConfig, resolveRadiusValue, resolveVariantAlias, sidebarBorderClasses, stringifyNajmDesignConfig, stringifyNajmThemeConfig, surfaceBorderClasses, useNajmScrollViewport, useTableStore };
+export { Button, NAJM_COMPONENT_NAMES, NButton, NIcon, NTableJson, NajmScroll, RADIUS_VALUE_MAP, TableStoreContext, buttonVariants, defineNajmDesignConfig, defineNajmThemeConfig, inputBorderClasses, parseNajmDesignConfig, parseNajmThemeConfig, resolveRadiusValue, resolveVariantAlias, sidebarBorderClasses, stringifyNajmDesignConfig, stringifyNajmThemeConfig, surfaceBorderClasses, useNajmScrollViewport, useTableStore };

package/dist/chunk-7J7DWGKB.mjs

@@ -0,0 +1,93 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+// src/hooks/useMediaQuery.ts
+function useMediaQuery(query, serverSnapshot = false) {
+  const subscribe = useCallback(
+    (onStoreChange) => {
+      const media = window.matchMedia(query);
+      media.addEventListener("change", onStoreChange);
+      return () => media.removeEventListener("change", onStoreChange);
+    },
+    [query]
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => serverSnapshot
+  );
+}
+var DEFAULT_CARD_BREAKPOINT = 1024;
+function useCardViewport(breakpoint = DEFAULT_CARD_BREAKPOINT) {
+  return useMediaQuery(`(max-width: ${breakpoint - 1}px)`);
+}
+function useDesktopTableMode(breakpoint = DEFAULT_CARD_BREAKPOINT) {
+  return useMediaQuery(`(min-width: ${breakpoint}px)`) ? "table" : "cards";
+}
+
+// src/components/table/cardPagination.ts
+var DEFAULT_CARD_PAGINATION_KEY_PREFIX = "common.pagination";
+function buildCardPaginationLabels(t, prefix = DEFAULT_CARD_PAGINATION_KEY_PREFIX) {
+  return {
+    loadMoreError: t(`${prefix}.loadMoreError`),
+    retryLabel: t(`${prefix}.retryLoadMore`),
+    itemsLoaded: (count) => t(`${prefix}.itemsLoaded`, { count })
+  };
+}
+function createCardPagination(state, labels = {}) {
+  const mode = state.mode ?? (state.cardViewport ? "infinite" : "paged");
+  if (mode === "paged") return { mode: "paged" };
+  if (mode === "all") return { mode: "all" };
+  return {
+    mode: "infinite",
+    hasNextPage: state.hasNextPage,
+    loadingMore: state.loadingMore,
+    loadMoreError: state.loadMoreError ? labels.loadMoreError : void 0,
+    onLoadMore: state.onLoadMore,
+    retryLabel: labels.retryLabel,
+    loadMoreErrorLabel: labels.loadMoreError,
+    itemsLoadedLabel: labels.itemsLoaded
+  };
+}
+
+// src/lib/pagination.ts
+var DEFAULT_PAGE_SIZE = 25;
+var DEFAULT_MAX_PAGE_SIZE = 100;
+function toApiPage(result) {
+  return Array.isArray(result) ? { rows: result, total: null } : result;
+}
+function createOffsetPagination(pageIndex = 0, pageSize = DEFAULT_PAGE_SIZE, { maxLimit = DEFAULT_MAX_PAGE_SIZE } = {}) {
+  const safePageIndex = Math.max(0, Math.trunc(pageIndex));
+  const safePageSize = Math.min(maxLimit, Math.max(1, Math.trunc(pageSize)));
+  return { limit: safePageSize, offset: safePageIndex * safePageSize };
+}
+function getPageIndex({ limit, offset }) {
+  return Math.floor(Math.max(0, offset) / Math.max(1, limit));
+}
+async function fetchOffsetPage(fetchPage, pagination, { maxLimit = DEFAULT_MAX_PAGE_SIZE } = {}) {
+  const requestedLimit = Math.min(maxLimit, Math.max(1, pagination.limit));
+  const probeLimit = requestedLimit < maxLimit ? requestedLimit + 1 : requestedLimit;
+  const page = toApiPage(
+    await fetchPage({ limit: probeLimit, offset: pagination.offset })
+  );
+  const rows = page.rows.slice(0, requestedLimit);
+  const nextOffset = pagination.offset + rows.length;
+  if (page.total !== null) {
+    return {
+      rows,
+      hasNextPage: nextOffset < page.total,
+      nextOffset,
+      total: page.total
+    };
+  }
+  const hasNextPage = page.rows.length > requestedLimit || probeLimit === requestedLimit && page.rows.length === requestedLimit && toApiPage(await fetchPage({ limit: 1, offset: nextOffset })).rows.length > 0;
+  return { rows, hasNextPage, nextOffset, total: null };
+}
+function cleanQuery(query) {
+  return Object.fromEntries(
+    Object.entries(query).filter(
+      ([, value]) => value !== void 0 && value !== null && value !== ""
+    )
+  );
+}
+
+export { DEFAULT_CARD_BREAKPOINT, DEFAULT_CARD_PAGINATION_KEY_PREFIX, DEFAULT_MAX_PAGE_SIZE, DEFAULT_PAGE_SIZE, buildCardPaginationLabels, cleanQuery, createCardPagination, createOffsetPagination, fetchOffsetPage, getPageIndex, useCardViewport, useDesktopTableMode, useMediaQuery };

package/dist/{chunk-4MRUJ2ZO.mjs → chunk-IRFFSAO2.mjs}

@@ -1,4 +1,4 @@
-import { NajmUIProvider } from './chunk-7F65QM43.mjs';
+import { NajmUIProvider } from './chunk-USZUOJMK.mjs';
 import React from 'react';
 import { useRouter } from 'next/navigation';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-YBM5CTE6.mjs → chunk-KVZACF4G.mjs}

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 // src/theme/presets/modes.ts
 var lightMode = {
@@ -301,6 +303,9 @@ function NajmThemeProvider({
     }
   ) }) }) }) });
 }
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 var NajmDesignContext = React.createContext({
   components: {}
 });
@@ -363,4 +368,4 @@ function NajmDesignProvider({
   ) : children }) });
 }
 
-export { NajmDesignProvider, NajmThemeContainerCtx, NajmThemeProvider, composePreset, resolvePreset, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode };
+export { NajmDesignProvider, NajmThemeContainerCtx, NajmThemeProvider, cn, composePreset, resolvePreset, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode };

package/dist/chunk-QOP7L6RD.mjs

@@ -0,0 +1,218 @@
+import { useNajmPreferencesContext } from './chunk-USZUOJMK.mjs';
+import * as React from 'react';
+import { createContext, useContext, useMemo, useState, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function normalizeBranding(input) {
+  if (!input) return {};
+  const value = {};
+  const expanded = input.logoExpanded ?? input.sidebarLogoExpandedPath;
+  const collapsed = input.logoCollapsed ?? input.sidebarLogoCollapsedPath;
+  if (input.appName !== void 0) value.appName = input.appName;
+  if (input.logoFallback !== void 0) value.logoFallback = input.logoFallback;
+  if (input.logoHref !== void 0) value.logoHref = input.logoHref;
+  if (expanded !== void 0) value.logoExpanded = expanded;
+  if (collapsed !== void 0) value.logoCollapsed = collapsed;
+  return value;
+}
+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 NBrandingEditorContext = createContext(null);
+function useNBrandingEditor() {
+  return useContext(NBrandingEditorContext);
+}
+function NBrandingStateProvider({
+  children,
+  branding,
+  initialBranding
+}) {
+  const [state, setState] = useState(
+    () => normalizeBranding(initialBranding ?? branding)
+  );
+  const setBranding = useCallback((patch) => {
+    const marks = normalizeBranding(patch);
+    setState((current) => ({ ...current, ...marks }));
+  }, []);
+  const controlled = useMemo(
+    () => branding ? normalizeBranding(branding) : void 0,
+    [branding]
+  );
+  const resolved = controlled ?? state;
+  const editor = useMemo(
+    () => ({ branding: resolved, setBranding: branding ? noop : setBranding }),
+    [resolved, branding, setBranding]
+  );
+  return /* @__PURE__ */ jsx(NBrandingEditorContext.Provider, { value: editor, children: /* @__PURE__ */ jsx(NBrandingProvider, { ...resolved, children }) });
+}
+function noop() {
+}
+
+// src/format/format.ts
+var DEFAULT_PLACEHOLDER = "\u2014";
+var numberFormats = /* @__PURE__ */ new Map();
+var dateFormats = /* @__PURE__ */ new Map();
+function numberFormat(locale, options) {
+  const key = `${locale}|${options ? JSON.stringify(options) : ""}`;
+  let format = numberFormats.get(key);
+  if (!format) {
+    format = new Intl.NumberFormat(locale, options);
+    numberFormats.set(key, format);
+  }
+  return format;
+}
+function dateFormat(locale, options) {
+  const key = `${locale}|${JSON.stringify(options)}`;
+  let format = dateFormats.get(key);
+  if (!format) {
+    format = new Intl.DateTimeFormat(locale, options);
+    dateFormats.set(key, format);
+  }
+  return format;
+}
+function minorUnitScale(locale, currency) {
+  const digits = numberFormat(locale, { style: "currency", currency }).resolvedOptions().maximumFractionDigits ?? 2;
+  return 10 ** digits;
+}
+function toDate(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function isBlank(value) {
+  return value === null || value === void 0 || value === "";
+}
+function formatCurrency(minorUnits, { locale, currency, placeholder = DEFAULT_PLACEHOLDER }) {
+  if (!currency) {
+    throw new Error(
+      "formatCurrency requires a `currency`. Set it on NajmFormatProvider or pass it here."
+    );
+  }
+  if (minorUnits === null || minorUnits === void 0) return placeholder;
+  if (!Number.isSafeInteger(minorUnits)) return placeholder;
+  return numberFormat(locale, {
+    style: "currency",
+    currency
+  }).format(minorUnits / minorUnitScale(locale, currency));
+}
+function formatNumber(value, { locale, placeholder = DEFAULT_PLACEHOLDER }, options) {
+  if (value === null || value === void 0 || !Number.isFinite(value)) {
+    return placeholder;
+  }
+  return numberFormat(locale, options).format(value);
+}
+function formatPercent(value, config, fractionDigits = 0) {
+  return formatNumber(value, config, {
+    style: "percent",
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits
+  });
+}
+function formatDate(value, {
+  locale,
+  timeZone,
+  placeholder = DEFAULT_PLACEHOLDER
+}, options = { dateStyle: "medium" }) {
+  if (isBlank(value)) return placeholder;
+  const date = toDate(value);
+  if (!date) return placeholder;
+  return dateFormat(locale, { ...options, timeZone }).format(date);
+}
+function formatDateTime(value, config, options = {
+  dateStyle: "short",
+  timeStyle: "short"
+}) {
+  return formatDate(value, config, options);
+}
+function formatTime(value, config) {
+  return formatDate(value, config, { timeStyle: "short" });
+}
+var RELATIVE_UNITS = [
+  ["year", 31536e6],
+  ["month", 2592e6],
+  ["day", 864e5],
+  ["hour", 36e5],
+  ["minute", 6e4],
+  ["second", 1e3]
+];
+function formatRelativeTime(value, { locale, placeholder = DEFAULT_PLACEHOLDER }, now = Date.now()) {
+  if (isBlank(value)) return placeholder;
+  const date = toDate(value);
+  if (!date) return placeholder;
+  const elapsed = date.getTime() - (now instanceof Date ? now.getTime() : now);
+  const format = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  for (const [unit, ms] of RELATIVE_UNITS) {
+    if (Math.abs(elapsed) >= ms) {
+      return format.format(Math.trunc(elapsed / ms), unit);
+    }
+  }
+  return format.format(0, "second");
+}
+function humanizeToken(value) {
+  return value.trim().replace(/[_-]+/g, " ").replace(/\s+/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+var NajmFormatContext = React.createContext(
+  null
+);
+function NajmFormatProvider({
+  children,
+  locale,
+  currency,
+  timeZone,
+  placeholder = DEFAULT_PLACEHOLDER
+}) {
+  const preferences = useNajmPreferencesContext();
+  const resolvedTimeZone = timeZone ?? preferences?.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const value = React.useMemo(() => {
+    const config = {
+      locale,
+      timeZone: resolvedTimeZone,
+      currency,
+      placeholder
+    };
+    return {
+      locale,
+      timeZone: resolvedTimeZone,
+      currency,
+      placeholder,
+      config,
+      money: (minorUnits) => formatCurrency(minorUnits, config),
+      number: (value_, options) => formatNumber(value_, config, options),
+      percent: (value_, digits) => formatPercent(value_, config, digits),
+      date: (value_, options) => formatDate(value_, config, options),
+      dateTime: (value_) => formatDateTime(value_, config),
+      time: (value_) => formatTime(value_, config),
+      relativeTime: (value_) => formatRelativeTime(value_, config),
+      humanize: humanizeToken
+    };
+  }, [locale, resolvedTimeZone, currency, placeholder]);
+  return /* @__PURE__ */ jsx(NajmFormatContext.Provider, { value, children });
+}
+function useNajmFormatContext() {
+  return React.useContext(NajmFormatContext);
+}
+function useNajmFormat() {
+  const value = React.useContext(NajmFormatContext);
+  if (!value) {
+    throw new Error(
+      "useNajmFormat must be rendered under a NajmFormatProvider or NajmAppProvider."
+    );
+  }
+  return value;
+}
+
+export { DEFAULT_PLACEHOLDER, NBrandingProvider, NBrandingStateProvider, NajmFormatProvider, formatCurrency, formatDate, formatDateTime, formatNumber, formatPercent, formatRelativeTime, formatTime, humanizeToken, normalizeBranding, useNBranding, useNBrandingEditor, useNajmFormat, useNajmFormatContext };

package/dist/{chunk-7F65QM43.mjs → chunk-USZUOJMK.mjs}

@@ -1,4 +1,4 @@
-import { NajmDesignProvider } from './chunk-YBM5CTE6.mjs';
+import { NajmDesignProvider, cn } from './chunk-KVZACF4G.mjs';
 import * as React2 from 'react';
 import React2__default from 'react';
 import { jsx } from 'react/jsx-runtime';
@@ -23,6 +23,17 @@ function useResolvedPaginationLabels(own) {
 }
 var NajmPreferencesContext = React2.createContext(null);
 var DEFAULT_TIME_ZONE = "UTC";
+function isValidTimeZone(value) {
+  try {
+    new Intl.DateTimeFormat(void 0, { timeZone: value });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function defaultNormalizeTimeZone(value) {
+  return isValidTimeZone(value) ? value : DEFAULT_TIME_ZONE;
+}
 function applyTheme(theme) {
   if (typeof document === "undefined") return;
   document.documentElement.classList.toggle("dark", theme === "dark");
@@ -37,11 +48,11 @@ function NajmPreferencesProvider({
   initialTimeZone = DEFAULT_TIME_ZONE,
   onThemeChange,
   onTimeZoneChange,
-  normalizeTimeZone
+  normalizeTimeZone = defaultNormalizeTimeZone
 }) {
   const [theme, setThemeState] = React2.useState(initialTheme);
   const [timeZone, setTimeZoneState] = React2.useState(
-    () => normalizeTimeZone ? normalizeTimeZone(initialTimeZone) : initialTimeZone
+    () => normalizeTimeZone(initialTimeZone)
   );
   const onThemeChangeRef = React2.useRef(onThemeChange);
   const onTimeZoneChangeRef = React2.useRef(onTimeZoneChange);
@@ -61,7 +72,7 @@ function NajmPreferencesProvider({
     await onThemeChangeRef.current?.(next);
   }, []);
   const setTimeZone = React2.useCallback(async (next) => {
-    const normalized = normalizeRef.current ? normalizeRef.current(next) : next;
+    const normalized = normalizeRef.current(next);
     setTimeZoneState(normalized);
     applyTimeZone(normalized);
     await onTimeZoneChangeRef.current?.(normalized);
@@ -119,26 +130,95 @@ var EMPTY_DESIGN = Object.freeze({
   theme: {},
   components: {}
 });
+var NajmDesignEditorContext = React2.createContext(null);
+function useNajmDesignEditor() {
+  return React2.useContext(NajmDesignEditorContext);
+}
+function cloneDesign(design) {
+  return structuredClone(design);
+}
+function NajmDesignEditorProvider({
+  children,
+  design,
+  initialDesign
+}) {
+  const [state, setState] = React2.useState(() => ({
+    committed: initialDesign ?? design ?? EMPTY_DESIGN,
+    draft: null
+  }));
+  const beginDraft = React2.useCallback(() => {
+    setState(
+      (current) => current.draft ? current : { ...current, draft: cloneDesign(current.committed) }
+    );
+  }, []);
+  const setDraft = React2.useCallback((next) => {
+    setState((current) => ({ ...current, draft: cloneDesign(next) }));
+  }, []);
+  const cancelDraft = React2.useCallback(() => {
+    setState(
+      (current) => current.draft === null ? current : { ...current, draft: null }
+    );
+  }, []);
+  const setCommitted = React2.useCallback((next) => {
+    setState({ committed: next, draft: null });
+  }, []);
+  const value = React2.useMemo(() => {
+    if (design) {
+      return {
+        design,
+        committed: design,
+        draft: null,
+        hasDraft: false,
+        beginDraft: noop,
+        setDraft: noop,
+        cancelDraft: noop,
+        setCommitted: noop
+      };
+    }
+    return {
+      design: state.draft ?? state.committed,
+      committed: state.committed,
+      draft: state.draft,
+      hasDraft: state.draft !== null,
+      beginDraft,
+      setDraft,
+      cancelDraft,
+      setCommitted
+    };
+  }, [design, state, beginDraft, setDraft, cancelDraft, setCommitted]);
+  return /* @__PURE__ */ jsx(NajmDesignEditorContext.Provider, { value, children });
+}
+function noop() {
+}
 function NajmUICore({
   children,
-  design = EMPTY_DESIGN,
   className,
   t,
   paginationKeyPrefix = DEFAULT_PAGINATION_KEY_PREFIX,
   tableDefaults
 }) {
   const { theme } = useNajmTheme();
+  const design = useNajmDesignEditor()?.design ?? EMPTY_DESIGN;
   const defaults = React2.useMemo(() => {
     const translated = t ? buildPaginationLabels(t, paginationKeyPrefix) : void 0;
     const overrides = tableDefaults?.paginationLabels;
     const paginationLabels = translated || overrides ? { ...translated, ...overrides } : void 0;
     return { ...tableDefaults, paginationLabels };
   }, [t, paginationKeyPrefix, tableDefaults]);
-  return /* @__PURE__ */ jsx(NajmDesignProvider, { config: design, mode: theme, className, children: /* @__PURE__ */ jsx(NTableDefaultsProvider, { value: defaults, children }) });
+  return /* @__PURE__ */ jsx(
+    NajmDesignProvider,
+    {
+      config: design,
+      mode: theme,
+      className: cn("min-h-full", className),
+      children: /* @__PURE__ */ jsx(NTableDefaultsProvider, { value: defaults, children })
+    }
+  );
 }
 function NajmUIProvider({
   children,
   design,
+  initialDesign,
   className,
   t,
   paginationKeyPrefix,
@@ -150,17 +230,16 @@ function NajmUIProvider({
   normalizeTimeZone
 }) {
   const outerPreferences = useNajmPreferencesContext();
-  const core = /* @__PURE__ */ jsx(
+  const core = /* @__PURE__ */ jsx(NajmDesignEditorProvider, { design, initialDesign, children: /* @__PURE__ */ jsx(
     NajmUICore,
     {
-      design,
       className,
       t,
       paginationKeyPrefix,
       tableDefaults,
       children
     }
-  );
+  ) });
   if (outerPreferences) return core;
   return /* @__PURE__ */ jsx(
     NajmPreferencesProvider,
@@ -175,4 +254,4 @@ function NajmUIProvider({
   );
 }
 
-export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, NTableDefaultsProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, useNTableDefaults, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone, useResolvedPaginationLabels };
+export { DEFAULT_PAGINATION_KEY_PREFIX, DEFAULT_TIME_ZONE, EMPTY_DESIGN, NTableDefaultsProvider, NajmDesignEditorProvider, NajmPreferencesProvider, NajmUIProvider, buildPaginationLabels, useNTableDefaults, useNajmDesignEditor, useNajmPreferencesContext, useNajmTheme, useNajmTimeZone, useResolvedPaginationLabels };