@mohasinac/appkit 2.2.0 → 2.3.1

package/dist/ui/components/ListingLayout.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import "client-only";
 /**
  * ListingLayout
  *
@@ -8,22 +7,23 @@ import "client-only";
  * and user. Provides a sticky toolbar with search, sort, view-toggle, filter
  * sidebar (desktop), filter overlay (mobile), and bulk-action bar.
  *
- *  ┌──────────────────────────────────────────────────────────────────┐
+ *  ┌------------------------------------------------------------------┐
  *  │ [headerSlot — PageHeader / Heading + subtitle]                  │
- *  ├──────────────────────────────────────────────────────────────────┤
+ *  ├------------------------------------------------------------------┤
  *  │ [statusTabsSlot — status filter tabs]                           │
- *  ├──────────────────────────────────────────────────────────────────┤
- *  │ STICKY ─────────────────────────────────────────────────────── │
+ *  ├------------------------------------------------------------------┤
+ *  │ STICKY ------------------------------------------------------- │
  *  │ [Filters] [searchSlot] [viewToggle] [sortSlot] [acts] [page]   │
- *  ├──────────┬───────────────────────────────────────────────────────┤
+ *  ├----------┬-------------------------------------------------------┤
  *  │ Filters  │  [activeFiltersSlot — chips]                         │
  *  │ (sidebar)│  [DataTable / ProductGrid / card list — children]    │
- *  └──────────┴───────────────────────────────────────────────────────┘
+ *  └----------┴-------------------------------------------------------┘
  */
-import { useState, useEffect, useRef } from "react";
+import { useState } from "react";
 import { Aside, Nav } from "./Semantic";
 import { Text, Span } from "./Typography";
 import { Button } from "./Button";
+import { Drawer } from "./Drawer";
 import { BulkActionBar } from "./BulkActionBar";
 const DEFAULT_LABELS = {
     filtersTitle: "Filters",
@@ -34,40 +34,12 @@ const DEFAULT_LABELS = {
     hideFilters: "Hide filters",
     filterActiveCount: (count) => `${count} active`,
 };
-export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount = 0, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount = 0, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard = false, defaultSidebarOpen = false, className = "", loading = false, errorSlot, labels, }) {
+export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount = 0, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount = 0, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard = false, defaultSidebarOpen = false, filterPendingCount, className = "", loading = false, errorSlot, labels, }) {
     const l = { ...DEFAULT_LABELS, ...labels };
     const [sidebarOpen, setSidebarOpen] = useState(defaultSidebarOpen);
     const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
-    const mobileOverlayRef = useRef(null);
     const hasFilter = Boolean(filterContent);
     const panelTitle = filterTitle ?? l.filtersTitle;
-    // Close mobile overlay on Escape key
-    useEffect(() => {
-        if (!mobileFilterOpen)
-            return;
-        const handle = (e) => {
-            if (e.key === "Escape")
-                setMobileFilterOpen(false);
-        };
-        document.addEventListener("keydown", handle);
-        return () => document.removeEventListener("keydown", handle);
-    }, [mobileFilterOpen]);
-    // Lock body scroll while mobile filter is open
-    useEffect(() => {
-        if (mobileFilterOpen) {
-            const w = window.innerWidth - document.documentElement.clientWidth;
-            document.body.style.overflow = "hidden";
-            document.body.style.paddingRight = `${w}px`;
-        }
-        else {
-            document.body.style.overflow = "";
-            document.body.style.paddingRight = "";
-        }
-        return () => {
-            document.body.style.overflow = "";
-            document.body.style.paddingRight = "";
-        };
-    }, [mobileFilterOpen]);
     const handleMobileApply = () => {
         onFilterApply?.();
         setMobileFilterOpen(false);
@@ -82,24 +54,24 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: [headerSlot, statusTabsSlot && (_jsx("div", { className: "appkit-listing-layout__status-tabs", children: statusTabsSlot })), _jsxs("div", { className: [
+            .join(" "), children: [headerSlot, statusTabsSlot && (_jsx("div", { className: "appkit-listing-layout__status-tabs", "data-section": "listinglayout-div-539", children: statusTabsSlot })), _jsxs("div", { className: [
                     "appkit-listing-layout__toolbar",
                     isDashboard
                         ? "appkit-listing-layout__toolbar--dashboard"
                         : "appkit-listing-layout__toolbar--page",
-                ].join(" "), children: [_jsxs("div", { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--desktop", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSidebarOpen((prev) => !prev), "aria-label": sidebarOpen ? l.hideFilters : l.showFilters, "aria-expanded": sidebarOpen, className: [
+                ].join(" "), "data-section": "listinglayout-div-540", children: [_jsxs("div", { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--desktop", "data-section": "listinglayout-div-541", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSidebarOpen((prev) => !prev), "aria-label": sidebarOpen ? l.hideFilters : l.showFilters, "aria-expanded": sidebarOpen, className: [
                                     "appkit-listing-layout__filter-btn",
                                     sidebarOpen ? "appkit-listing-layout__filter-btn--active" : "",
-                                ].join(" "), children: [_jsx(FilterIcon, {}), l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "appkit-listing-layout__filter-badge", "aria-label": l.filterActiveCount(filterActiveCount), children: filterActiveCount }))] })), searchSlot && (_jsx("div", { className: "appkit-listing-layout__search", children: searchSlot })), _jsxs("div", { className: "appkit-listing-layout__toolbar-actions", children: [sortSlot, viewToggleSlot && (_jsx("div", { className: "appkit-listing-layout__view-toggle-wrap", children: viewToggleSlot })), actionsSlot] }), toolbarPaginationSlot && (_jsx("div", { className: "appkit-listing-layout__toolbar-pagination", children: toolbarPaginationSlot }))] }), _jsxs("div", { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--mobile", children: [_jsxs("div", { className: "appkit-listing-layout__mobile-row-1", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setMobileFilterOpen(true), "aria-label": l.filtersTitle, className: [
+                                ].join(" "), children: [_jsx(FilterIcon, {}), l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "appkit-listing-layout__filter-badge", "aria-label": l.filterActiveCount(filterActiveCount), children: filterActiveCount }))] })), searchSlot && (_jsx("div", { className: "appkit-listing-layout__search", "data-section": "listinglayout-div-542", children: searchSlot })), _jsxs("div", { className: "appkit-listing-layout__toolbar-actions", "data-section": "listinglayout-div-543", children: [sortSlot, viewToggleSlot && (_jsx("div", { className: "appkit-listing-layout__view-toggle-wrap", "data-section": "listinglayout-div-544", children: viewToggleSlot })), actionsSlot] }), toolbarPaginationSlot && (_jsx("div", { className: "appkit-listing-layout__toolbar-pagination", "data-section": "listinglayout-div-545", children: toolbarPaginationSlot }))] }), _jsxs("div", { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--mobile", "data-section": "listinglayout-div-546", children: [_jsxs("div", { className: "appkit-listing-layout__mobile-row-1", "data-section": "listinglayout-div-547", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setMobileFilterOpen(true), "aria-label": l.filtersTitle, className: [
                                             "appkit-listing-layout__filter-btn",
                                             filterActiveCount > 0
                                                 ? "appkit-listing-layout__filter-btn--active"
                                                 : "",
-                                        ].join(" "), children: [_jsx(FilterIcon, {}), l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "appkit-listing-layout__filter-badge", "aria-label": l.filterActiveCount(filterActiveCount), children: filterActiveCount }))] })), searchSlot && (_jsx("div", { className: "appkit-listing-layout__search", children: searchSlot }))] }), (sortSlot || viewToggleSlot || actionsSlot) && (_jsx("div", { className: "appkit-listing-layout__mobile-row-2", children: _jsxs("div", { className: "appkit-listing-layout__mobile-row-2__inner", children: [sortSlot, viewToggleSlot, actionsSlot] }) }))] }), selectedCount > 0 && (_jsx("div", { className: "appkit-listing-layout__bulk-bar", children: _jsx(BulkActionBar, { selectedCount: selectedCount, onClearSelection: onClearSelection, actions: bulkActionItems, labels: {
+                                        ].join(" "), children: [_jsx(FilterIcon, {}), l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "appkit-listing-layout__filter-badge", "aria-label": l.filterActiveCount(filterActiveCount), children: filterActiveCount }))] })), searchSlot && (_jsx("div", { className: "appkit-listing-layout__search", "data-section": "listinglayout-div-548", children: searchSlot }))] }), (sortSlot || viewToggleSlot || actionsSlot) && (_jsx("div", { className: "appkit-listing-layout__mobile-row-2", "data-section": "listinglayout-div-549", children: _jsxs("div", { className: "appkit-listing-layout__mobile-row-2__inner", "data-section": "listinglayout-div-550", children: [sortSlot, viewToggleSlot, actionsSlot] }) }))] }), selectedCount > 0 && (_jsx("div", { className: "appkit-listing-layout__bulk-bar", "data-section": "listinglayout-div-551", children: _jsx(BulkActionBar, { selectedCount: selectedCount, onClearSelection: onClearSelection, actions: bulkActionItems, labels: {
                                 selected: l.filtersTitle, // placeholder — callers provide proper labels
                                 apply: l.applyFilters,
                                 clearSelection: l.clearAll,
-                            } }) }))] }), _jsxs("div", { className: "appkit-listing-layout__body", children: [hasFilter && (_jsx(Aside, { "aria-label": panelTitle, className: [
+                            } }) }))] }), _jsxs("div", { className: "appkit-listing-layout__body", "data-section": "listinglayout-div-552", children: [hasFilter && (_jsx(Aside, { "aria-label": panelTitle, className: [
                             "appkit-listing-layout__sidebar",
                             isDashboard
                                 ? "appkit-listing-layout__sidebar--dashboard"
@@ -107,14 +79,20 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                             sidebarOpen
                                 ? "appkit-listing-layout__sidebar--open"
                                 : "appkit-listing-layout__sidebar--collapsed",
-                        ].join(" "), children: _jsxs("div", { className: "appkit-listing-layout__sidebar-panel", children: [_jsxs("div", { className: "appkit-listing-layout__sidebar-header", children: [_jsx(Text, { weight: "semibold", size: "sm", children: panelTitle }), filterActiveCount > 0 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onFilterClear, className: "text-xs text-primary hover:text-primary/80 hover:underline p-0 h-auto leading-none font-medium", children: l.clearAll }))] }), _jsx("div", { className: "appkit-listing-layout__sidebar-facets", children: filterContent }), _jsx("div", { className: "appkit-listing-layout__sidebar-footer", children: _jsx(Button, { type: "button", variant: "primary", className: "w-full rounded-xl", size: "sm", onClick: onFilterApply, children: l.applyFilters }) })] }) })), _jsxs("div", { className: "appkit-listing-layout__content", children: [activeFiltersSlot, errorSlot ? (errorSlot) : (_jsxs(_Fragment, { children: [children, paginationSlot && (_jsx("div", { className: "appkit-listing-layout__pagination", children: paginationSlot }))] }))] })] }), toolbarPaginationSlot && (_jsx(Nav, { "aria-label": "Pagination", className: [
+                        ].join(" "), children: _jsxs("div", { className: "appkit-listing-layout__sidebar-panel", "data-section": "listinglayout-div-553", children: [_jsxs("div", { className: "appkit-listing-layout__sidebar-header", "data-section": "listinglayout-div-554", children: [_jsx(Text, { weight: "semibold", size: "sm", children: panelTitle }), filterActiveCount > 0 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onFilterClear, className: "text-xs text-primary hover:text-primary/80 hover:underline p-0 h-auto leading-none font-medium", children: l.clearAll }))] }), _jsx("div", { className: "appkit-listing-layout__sidebar-facets", "data-section": "listinglayout-div-555", children: filterContent }), _jsx("div", { className: "appkit-listing-layout__sidebar-footer", "data-section": "listinglayout-div-556", children: _jsx(Button, { type: "button", variant: "primary", className: "w-full rounded-xl", size: "sm", onClick: onFilterApply, children: filterPendingCount != null && filterPendingCount > 0
+                                            ? `${l.applyFilters} (${filterPendingCount})`
+                                            : l.applyFilters }) })] }) })), _jsxs("div", { className: "appkit-listing-layout__content", "data-section": "listinglayout-div-557", children: [activeFiltersSlot, resultCountSlot && (_jsx("div", { className: "appkit-listing-layout__result-count", "data-section": "listinglayout-div-558", children: resultCountSlot })), errorSlot ? (errorSlot) : (_jsxs(_Fragment, { children: [children, paginationSlot && (_jsx("div", { className: "appkit-listing-layout__pagination", "data-section": "listinglayout-div-559", children: paginationSlot }))] }))] })] }), toolbarPaginationSlot && (_jsx(Nav, { "aria-label": "Pagination", className: [
                     "appkit-listing-layout__mobile-pagination",
                     isDashboard
                         ? "appkit-listing-layout__mobile-pagination--dashboard"
                         : selectedCount > 0
                             ? "appkit-listing-layout__mobile-pagination--bulk"
                             : "appkit-listing-layout__mobile-pagination--default",
-                ].join(" "), children: toolbarPaginationSlot })), hasFilter && mobileFilterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-listing-layout__mobile-overlay-backdrop", onClick: () => setMobileFilterOpen(false), "aria-hidden": "true" }), _jsxs("div", { ref: mobileOverlayRef, className: "appkit-listing-layout__mobile-overlay", role: "dialog", "aria-modal": "true", "aria-label": panelTitle, children: [_jsxs("div", { className: "appkit-listing-layout__mobile-overlay-header", children: [_jsxs(Text, { weight: "semibold", children: [panelTitle, filterActiveCount > 0 && (_jsx(Span, { className: "ml-2 inline-flex items-center justify-center w-5 h-5 text-[11px] font-bold rounded-full bg-primary text-white", children: filterActiveCount }))] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setMobileFilterOpen(false), "aria-label": l.close, className: "appkit-listing-layout__close-btn", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("div", { className: "appkit-listing-layout__mobile-overlay-facets", children: filterContent }), _jsxs("div", { className: "appkit-listing-layout__mobile-overlay-footer", children: [_jsx(Button, { type: "button", variant: "secondary", className: "flex-1 rounded-xl", onClick: () => onFilterClear?.(), children: l.clearAll }), _jsx(Button, { type: "button", variant: "primary", className: "flex-1 rounded-xl", onClick: handleMobileApply, children: l.applyFilters })] })] })] }))] }));
+                ].join(" "), children: toolbarPaginationSlot })), hasFilter && (_jsx(Drawer, { isOpen: mobileFilterOpen, onClose: () => setMobileFilterOpen(false), side: "bottom", title: filterActiveCount > 0
+                    ? `${panelTitle} (${filterActiveCount})`
+                    : panelTitle, footer: _jsxs("div", { className: "appkit-listing-layout__mobile-overlay-footer", "data-section": "listinglayout-div-560", children: [_jsx(Button, { type: "button", variant: "secondary", className: "flex-1 rounded-xl", onClick: () => onFilterClear?.(), children: l.clearAll }), _jsx(Button, { type: "button", variant: "primary", className: "flex-1 rounded-xl", onClick: handleMobileApply, children: filterPendingCount != null && filterPendingCount > 0
+                                ? `${l.applyFilters} (${filterPendingCount})`
+                                : l.applyFilters })] }), children: filterContent }))] }));
 }
 function FilterIcon() {
     return (_jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z" }) }));

package/dist/ui/components/ListingLayout.style.css

@@ -1,6 +1,6 @@
 /* appkit/src/ui/components/ListingLayout.style.css */
 
-/* ── Root ──────────────────────────────────────────── */
+/* -- Root -------------------------------------------- */
 
 .appkit-listing-layout {
   width: 100%;
@@ -23,7 +23,7 @@
   }
 }
 
-/* ── Status tabs ───────────────────────────────────── */
+/* -- Status tabs ------------------------------------- */
 
 .appkit-listing-layout__status-tabs {
   overflow-x: auto;
@@ -40,7 +40,7 @@
   }
 }
 
-/* ── Sticky toolbar ────────────────────────────────── */
+/* -- Sticky toolbar ---------------------------------- */
 
 .appkit-listing-layout__toolbar {
   position: sticky;
@@ -83,7 +83,7 @@
   }
 }
 
-/* ── Toolbar rows ──────────────────────────────────── */
+/* -- Toolbar rows ------------------------------------ */
 
 .appkit-listing-layout__toolbar-row--desktop {
   display: none;
@@ -153,7 +153,7 @@
   }
 }
 
-/* ── Mobile toolbar rows ───────────────────────────── */
+/* -- Mobile toolbar rows ----------------------------- */
 
 .appkit-listing-layout__mobile-row-1 {
   display: flex;
@@ -177,7 +177,7 @@
   padding-bottom: 1px;
 }
 
-/* ── Filter button ─────────────────────────────────── */
+/* -- Filter button ----------------------------------- */
 
 .appkit-listing-layout__filter-btn {
   flex-shrink: 0;
@@ -216,7 +216,7 @@
   }
 }
 
-/* ── Filter badge ──────────────────────────────────── */
+/* -- Filter badge ------------------------------------ */
 
 .appkit-listing-layout__filter-badge {
   display: inline-flex;
@@ -238,7 +238,7 @@
   margin-left: 0.5rem;
 }
 
-/* ── Bulk action bar ───────────────────────────────── */
+/* -- Bulk action bar --------------------------------- */
 
 .appkit-listing-layout__bulk-bar {
   display: none;
@@ -259,7 +259,7 @@
   }
 }
 
-/* ── Body (sidebar + content) ──────────────────────── */
+/* -- Body (sidebar + content) ------------------------ */
 
 .appkit-listing-layout__body {
   display: flex;
@@ -273,7 +273,7 @@
   }
 }
 
-/* ── Desktop filter sidebar ────────────────────────── */
+/* -- Desktop filter sidebar -------------------------- */
 
 .appkit-listing-layout__sidebar {
   display: none;
@@ -317,7 +317,7 @@
   pointer-events: none;
 }
 
-/* ── Sidebar panel card ────────────────────────────── */
+/* -- Sidebar panel card ------------------------------ */
 
 .appkit-listing-layout__sidebar-panel {
   width: 15rem;
@@ -376,7 +376,7 @@
   }
 }
 
-/* ── Main content ──────────────────────────────────── */
+/* -- Main content ------------------------------------ */
 
 .appkit-listing-layout__content {
   flex: 1;
@@ -390,7 +390,7 @@
   padding-top: 0.5rem;
 }
 
-/* ── Mobile sticky pagination bar ─────────────────── */
+/* -- Mobile sticky pagination bar ------------------- */
 
 .appkit-listing-layout__mobile-pagination {
   position: fixed;
@@ -428,7 +428,7 @@
 .appkit-listing-layout__mobile-pagination--default   { bottom: 3.5rem; }
 .appkit-listing-layout__mobile-pagination--bulk      { bottom: 7rem; }
 
-/* ── Mobile filter overlay ─────────────────────────── */
+/* -- Mobile filter overlay --------------------------- */
 
 .appkit-listing-layout__mobile-overlay-backdrop {
   position: fixed;
@@ -504,7 +504,7 @@
   }
 }
 
-/* ── Close button in mobile overlay ───────────────── */
+/* -- Close button in mobile overlay ----------------- */
 
 .appkit-listing-layout__close-btn {
   border-radius: 9999px;

package/dist/ui/components/ListingViewShell.d.ts

@@ -1,4 +1,3 @@
-import "client-only";
 /**
  * ListingViewShell
  *
@@ -33,6 +32,6 @@ export interface ListingViewShellProps extends Omit<ListingLayoutProps, "childre
     renderModal?: () => ReactNode;
     /** When provided, the entire layout is replaced with this view (detail/edit mode). */
     detailView?: ReactNode;
-    children: ReactNode;
+    children?: ReactNode;
 }
 export declare function ListingViewShell({ overlays, renderDrawer, renderConfirmModal, renderModal, detailView, children, portal, isDashboard, ...listingProps }: ListingViewShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/ListingViewShell.js

@@ -1,9 +1,7 @@
-"use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { ListingLayout } from "./ListingLayout";
 export function ListingViewShell({ overlays, renderDrawer, renderConfirmModal, renderModal, detailView, children, portal, isDashboard, ...listingProps }) {
-    const effectiveIsDashboard = isDashboard ?? (portal === "admin" || portal === "seller" || portal === undefined ? true : false);
+    const effectiveIsDashboard = isDashboard ?? (portal === "admin" || portal === "seller");
     if (detailView) {
         return _jsx(_Fragment, { children: detailView });
     }

package/dist/ui/components/Menu.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, } from "./Dropdown";
 export function Menu(props) {

package/dist/ui/components/Modal.d.ts

@@ -1,4 +1,3 @@
-import "client-only";
 import React from "react";
 export interface ModalProps {
     isOpen?: boolean;

package/dist/ui/components/Modal.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import React from "react";
 import { createPortal } from "react-dom";
 import { Heading } from "./Typography";
@@ -65,9 +64,9 @@ export function Modal({ isOpen, open, onClose, title, children, size = "md", sho
     if (!visible || typeof document === "undefined") {
         return null;
     }
-    return createPortal(_jsxs("div", { className: "appkit-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, onKeyDown: handleKeyDown, children: [_jsx("div", { className: "appkit-modal__backdrop", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { ref: panelRef, tabIndex: -1, className: ["appkit-modal__panel", SIZE_CLASSES[size], className]
+    return createPortal(_jsxs("div", { className: "appkit-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, onKeyDown: handleKeyDown, "data-section": "modal-div-561", children: [_jsx("div", { className: "appkit-modal__backdrop", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { ref: panelRef, tabIndex: -1, className: ["appkit-modal__panel", SIZE_CLASSES[size], className]
                     .filter(Boolean)
-                    .join(" "), children: [(title || showCloseButton) && (_jsxs("div", { className: "appkit-modal__header", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] }), document.body);
+                    .join(" "), "data-section": "modal-div-562", children: [(title || showCloseButton) && (_jsxs("div", { className: "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] }), document.body);
 }
 export function ModalFooter({ children, className = "", }) {
     return (_jsx("div", { className: [
@@ -75,5 +74,5 @@ export function ModalFooter({ children, className = "", }) {
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: children }));
+            .join(" "), "data-section": "modal-div-565", children: children }));
 }

package/dist/ui/components/NavigationLoader.d.ts

@@ -0,0 +1,29 @@
+export interface NavigationLoaderProps {
+    /**
+     * Spinner variant shown during navigation.
+     * @default "pokeball"
+     */
+    spinnerVariant?: "primary" | "white" | "current" | "pokeball";
+    /** Label read by screen readers. @default "Loading page…" */
+    label?: string;
+    /**
+     * Safety valve: hides the overlay if the route never settles.
+     * @default 15000 (ms)
+     */
+    timeoutMs?: number;
+    /** Additional className on the overlay div. */
+    className?: string;
+}
+/**
+ * NavigationLoader
+ *
+ * Renders a full-screen overlay with a spinner during any client-side
+ * navigation (Link clicks, router.push, back/forward).
+ *
+ * Strategy:
+ *  - Start: intercept `history.pushState` + `popstate`
+ *  - End:   `usePathname()` changing means React has settled
+ *
+ * Mount once at the app shell level (e.g. inside LayoutShellClient).
+ */
+export declare function NavigationLoader({ spinnerVariant, label, timeoutMs, className, }: NavigationLoaderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/components/NavigationLoader.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { Spinner } from "./Spinner";
+/**
+ * NavigationLoader
+ *
+ * Renders a full-screen overlay with a spinner during any client-side
+ * navigation (Link clicks, router.push, back/forward).
+ *
+ * Strategy:
+ *  - Start: intercept `history.pushState` + `popstate`
+ *  - End:   `usePathname()` changing means React has settled
+ *
+ * Mount once at the app shell level (e.g. inside LayoutShellClient).
+ */
+export function NavigationLoader({ spinnerVariant = "pokeball", label = "Loading page…", timeoutMs = 15000, className = "", }) {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [visible, setVisible] = useState(false);
+    const [elapsed, setElapsed] = useState(0);
+    const safetyTimer = useRef(null);
+    const showTimer = useRef(null);
+    const startTime = useRef(null);
+    const tickTimer = useRef(null);
+    const pendingUrl = useRef(null);
+    const visibleRef = useRef(false);
+    const activeRef = useRef(false);
+    const currentUrl = `${pathname ?? ""}?${searchParams?.toString() ?? ""}`;
+    const prevUrl = useRef(currentUrl);
+    useEffect(() => {
+        visibleRef.current = visible;
+    }, [visible]);
+    // Hide once the route URL (path + query/hash) has settled in React.
+    useEffect(() => {
+        if (currentUrl !== prevUrl.current) {
+            prevUrl.current = currentUrl;
+            activeRef.current = false;
+            visibleRef.current = false;
+            setVisible(false);
+            if (showTimer.current) {
+                clearTimeout(showTimer.current);
+                showTimer.current = null;
+            }
+            if (safetyTimer.current)
+                clearTimeout(safetyTimer.current);
+            if (tickTimer.current)
+                clearInterval(tickTimer.current);
+            startTime.current = null;
+            pendingUrl.current = null;
+        }
+    }, [currentUrl]);
+    useEffect(() => {
+        function showOverlay(nextKey) {
+            if (activeRef.current || visibleRef.current)
+                return;
+            if (showTimer.current)
+                return;
+            activeRef.current = true;
+            if (nextKey && pendingUrl.current === nextKey)
+                return;
+            pendingUrl.current = nextKey ?? pendingUrl.current;
+            // Defer to next macrotask to avoid updates during router insertion effects.
+            showTimer.current = setTimeout(() => {
+                showTimer.current = null;
+                visibleRef.current = true;
+                startTime.current = performance.now();
+                setElapsed(0);
+                if (tickTimer.current)
+                    clearInterval(tickTimer.current);
+                tickTimer.current = setInterval(() => {
+                    setElapsed(Math.floor((performance.now() - startTime.current) / 100) / 10);
+                }, 100);
+                setVisible(true);
+                if (safetyTimer.current)
+                    clearTimeout(safetyTimer.current);
+                safetyTimer.current = setTimeout(() => {
+                    activeRef.current = false;
+                    visibleRef.current = false;
+                    setVisible(false);
+                    if (tickTimer.current)
+                        clearInterval(tickTimer.current);
+                    startTime.current = null;
+                    pendingUrl.current = null;
+                }, timeoutMs);
+            }, 0);
+        }
+        function shouldShowForNextUrl(next) {
+            // No target URL means history state mutation only, not navigation.
+            if (!next)
+                return false;
+            try {
+                const href = typeof next === "string" ? next : next.toString();
+                const nextUrl = new URL(href, window.location.href);
+                const nextKey = `${nextUrl.pathname}?${nextUrl.searchParams.toString()}`;
+                const liveUrl = new URL(window.location.href);
+                const liveKey = `${liveUrl.pathname}?${liveUrl.searchParams.toString()}`;
+                if (nextKey === liveKey)
+                    return false;
+                if (pendingUrl.current && nextKey === pendingUrl.current)
+                    return false;
+                return true;
+            }
+            catch {
+                return true;
+            }
+        }
+        const origPush = history.pushState.bind(history);
+        history.pushState = (...args) => {
+            const next = args[2];
+            if (shouldShowForNextUrl(next)) {
+                try {
+                    const href = typeof next === "string" ? next : next?.toString() ?? "";
+                    const nextUrl = new URL(href, window.location.href);
+                    showOverlay(`${nextUrl.pathname}?${nextUrl.searchParams.toString()}`);
+                }
+                catch {
+                    showOverlay();
+                }
+            }
+            return origPush(...args);
+        };
+        function onPopState() {
+            showOverlay();
+        }
+        window.addEventListener("popstate", onPopState);
+        return () => {
+            history.pushState = origPush;
+            window.removeEventListener("popstate", onPopState);
+            if (showTimer.current)
+                clearTimeout(showTimer.current);
+            if (safetyTimer.current)
+                clearTimeout(safetyTimer.current);
+            if (tickTimer.current)
+                clearInterval(tickTimer.current);
+            activeRef.current = false;
+            visibleRef.current = false;
+            startTime.current = null;
+            pendingUrl.current = null;
+        };
+    }, [timeoutMs]);
+    if (!visible)
+        return null;
+    return (_jsxs("div", { role: "status", "aria-label": label, className: `appkit-nav-loader ${className}`, "data-section": "navigationloader-div-566", children: [_jsx(Spinner, { size: "xl", variant: spinnerVariant, label: label }), _jsxs("span", { className: "appkit-nav-loader__timer", "aria-hidden": "true", children: [elapsed.toFixed(1), "s"] })] }));
+}

package/dist/ui/components/NavigationLoader.style.css

@@ -0,0 +1,19 @@
+.appkit-nav-loader {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+}
+
+.appkit-nav-loader__timer {
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  color: rgba(255, 255, 255, 0.75);
+  letter-spacing: 0.04em;
+}

package/dist/ui/components/Pagination.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DEFAULT_PAGINATION_CONFIG } from "../../contracts";
 function getPageNumbers(currentPage, totalPages, maxVisible) {

package/dist/ui/components/PasswordStrengthIndicator.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Li, Ul } from "./Semantic";
 import { Row } from "./Layout";
@@ -31,5 +30,5 @@ export function PasswordStrengthIndicator({ password, minLength = 8, showRequire
             : strength <= 75
                 ? "bg-yellow-500"
                 : "bg-green-500";
-    return (_jsxs("div", { className: "appkit-password-strength", "aria-live": "polite", "aria-atomic": "true", children: [_jsxs(Row, { gap: "sm", className: "mb-2", children: [_jsx("div", { className: "appkit-password-strength__track", children: _jsx("div", { className: `appkit-password-strength__fill ${strengthColor}`, style: { width: `${strength}%` }, role: "progressbar", "aria-valuenow": Math.round(strength), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Password strength: ${strengthLabel}` }) }), _jsx(Span, { className: "appkit-password-strength__label", children: strengthLabel })] }), showRequirements ? (_jsx(Ul, { className: "appkit-password-strength__requirements", children: requirements.map((req) => (_jsxs(Li, { className: `appkit-password-strength__requirement ${req.met ? "appkit-password-strength__requirement--met" : ""}`, children: [_jsx(Span, { className: "sr-only", children: req.met ? "Met: " : "Not met: " }), req.label] }, req.label))) })) : null] }));
+    return (_jsxs("div", { className: "appkit-password-strength", "aria-live": "polite", "aria-atomic": "true", "data-section": "passwordstrengthindicator-div-567", children: [_jsxs(Row, { gap: "sm", className: "mb-2", children: [_jsx("div", { className: "appkit-password-strength__track", "data-section": "passwordstrengthindicator-div-568", children: _jsx("div", { className: `appkit-password-strength__fill ${strengthColor}`, style: { width: `${strength}%` }, role: "progressbar", "aria-valuenow": Math.round(strength), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Password strength: ${strengthLabel}` }) }), _jsx(Span, { className: "appkit-password-strength__label", children: strengthLabel })] }), showRequirements ? (_jsx(Ul, { className: "appkit-password-strength__requirements", children: requirements.map((req) => (_jsxs(Li, { className: `appkit-password-strength__requirement ${req.met ? "appkit-password-strength__requirement--met" : ""}`, children: [_jsx(Span, { className: "sr-only", children: req.met ? "Met: " : "Not met: " }), req.label] }, req.label))) })) : null] }));
 }

package/dist/ui/components/PriceDisplay.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Span } from "./Typography";
 import { Row } from "./Layout";

package/dist/ui/components/Progress.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Span } from "./Typography";
 export function Progress({ value, max = 100, variant = "primary", size = "md", label, showValue = false, className = "", }) {
@@ -14,7 +13,7 @@ export function Progress({ value, max = 100, variant = "primary", size = "md", l
         warning: "appkit-progress__bar--warning",
         error: "appkit-progress__bar--error",
     };
-    return (_jsxs("div", { className: `appkit-progress ${className}`, children: [(label || showValue) && (_jsxs("div", { className: "appkit-progress__meta", children: [label && _jsx(Span, { className: "appkit-progress__label", children: label }), showValue && (_jsxs(Span, { className: "appkit-progress__value", children: [Math.round(percentage), "%"] }))] })), _jsx("div", { className: `appkit-progress__track ${sizeClasses[size]}`, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label || `Progress: ${Math.round(percentage)}%`, children: _jsx("div", { className: `appkit-progress__bar ${variantClasses[variant]}`, style: { width: `${percentage}%` } }) })] }));
+    return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-569", children: [(label || showValue) && (_jsxs("div", { className: "appkit-progress__meta", "data-section": "progress-div-570", children: [label && _jsx(Span, { className: "appkit-progress__label", children: label }), showValue && (_jsxs(Span, { className: "appkit-progress__value", children: [Math.round(percentage), "%"] }))] })), _jsx("div", { className: `appkit-progress__track ${sizeClasses[size]}`, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label || `Progress: ${Math.round(percentage)}%`, "data-section": "progress-div-571", children: _jsx("div", { className: `appkit-progress__bar ${variantClasses[variant]}`, style: { width: `${percentage}%` } }) })] }));
 }
 export function IndeterminateProgress({ variant = "primary", size = "md", label, className = "", }) {
     const sizeClasses = {
@@ -28,5 +27,5 @@ export function IndeterminateProgress({ variant = "primary", size = "md", label,
         warning: "appkit-progress__bar--warning",
         error: "appkit-progress__bar--error",
     };
-    return (_jsxs("div", { className: `appkit-progress ${className}`, children: [label && (_jsx(Span, { className: "appkit-progress__label appkit-progress__label--block", children: label })), _jsx("div", { className: `appkit-progress__track appkit-progress__track--indeterminate ${sizeClasses[size]}`, role: "progressbar", "aria-label": label || "Loading...", children: _jsx("div", { className: `appkit-progress__bar appkit-progress__bar--indeterminate ${variantClasses[variant]}`, style: { width: "40%" } }) })] }));
+    return (_jsxs("div", { className: `appkit-progress ${className}`, "data-section": "progress-div-572", children: [label && (_jsx(Span, { className: "appkit-progress__label appkit-progress__label--block", children: label })), _jsx("div", { className: `appkit-progress__track appkit-progress__track--indeterminate ${sizeClasses[size]}`, role: "progressbar", "aria-label": label || "Loading...", "data-section": "progress-div-573", children: _jsx("div", { className: `appkit-progress__bar appkit-progress__bar--indeterminate ${variantClasses[variant]}`, style: { width: "40%" } }) })] }));
 }

package/dist/ui/components/Radio.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label, Span, Text } from "./Typography";
 const UI_RADIO = {
@@ -29,7 +28,7 @@ const UI_RADIO = {
 };
 export function RadioGroup({ name, options, value, onChange, label, error, orientation = "vertical", variant = "toggle", required = false, }) {
     const stackClass = UI_RADIO.stack[orientation];
-    return (_jsxs("div", { className: UI_RADIO.group, children: [label && (_jsx(Label, { className: "mb-2 block", required: required, children: label })), _jsx("div", { className: stackClass, role: "radiogroup", "aria-label": typeof label === "string" ? label : undefined, children: options.map((option) => {
+    return (_jsxs("div", { className: UI_RADIO.group, "data-section": "radio-div-574", children: [label && (_jsx(Label, { className: "mb-2 block", required: required, children: label })), _jsx("div", { className: stackClass, role: "radiogroup", "aria-label": typeof label === "string" ? label : undefined, "data-section": "radio-div-575", children: options.map((option) => {
                     const selected = option.value === value;
                     if (variant === "classic") {
                         return (_jsxs(Label, { className: [

package/dist/ui/components/RatingDisplay.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Span } from "./Typography";
 import { classNames } from "../style.helper";
@@ -9,7 +8,7 @@ const sizeClass = {
 };
 export function RatingDisplay({ rating, maxRating = 5, size = "sm", showValue = false, className, }) {
     const starSize = sizeClass[size];
-    return (_jsxs("div", { className: classNames("appkit-rating-display", className), children: [_jsx("div", { className: "appkit-rating-display__stars", children: Array.from({ length: maxRating }, (_, i) => i + 1).map((star) => (_jsx("svg", { className: classNames(starSize, star <= rating
+    return (_jsxs("div", { className: classNames("appkit-rating-display", className), "data-section": "ratingdisplay-div-576", children: [_jsx("div", { className: "appkit-rating-display__stars", "data-section": "ratingdisplay-div-577", children: Array.from({ length: maxRating }, (_, i) => i + 1).map((star) => (_jsx("svg", { className: classNames(starSize, star <= rating
                         ? "appkit-rating-display__star appkit-rating-display__star--active"
                         : "appkit-rating-display__star appkit-rating-display__star--inactive"), fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, star))) }), showValue && (_jsx(Span, { className: "appkit-rating-display__value", children: rating.toFixed(1) }))] }));
 }