@mohasinac/appkit 2.1.1 → 2.2.0

package/dist/features/layout/ListingLayout.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "client-only";
+import { useEffect, useRef, useState } from "react";
+import { Aside, Button, Div, Nav, Row, Span } from "../../ui";
+export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount = 0, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount = 0, toolbarPaginationSlot, paginationSlot, children, defaultSidebarOpen = false, className = "", errorSlot, isDashboard = false, labels, bulkActionBarSlot, }) {
+    const [sidebarOpen, setSidebarOpen] = useState(defaultSidebarOpen);
+    const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
+    const mobileOverlayRef = useRef(null);
+    const hasFilter = Boolean(filterContent);
+    const l = {
+        filtersTitle: labels?.filtersTitle ?? "Filters",
+        showFilters: labels?.showFilters ?? "Show filters",
+        hideFilters: labels?.hideFilters ?? "Hide filters",
+        clearAll: labels?.clearAll ?? "Clear all",
+        applyFilters: labels?.applyFilters ?? "Apply filters",
+        close: labels?.close ?? "Close",
+    };
+    const panelTitle = filterTitle ?? l.filtersTitle;
+    useEffect(() => {
+        if (!mobileFilterOpen)
+            return;
+        const handle = (e) => {
+            if (e.key === "Escape")
+                setMobileFilterOpen(false);
+        };
+        document.addEventListener("keydown", handle);
+        return () => document.removeEventListener("keydown", handle);
+    }, [mobileFilterOpen]);
+    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);
+    };
+    return (_jsxs(Div, { className: [
+            "w-full space-y-4",
+            toolbarPaginationSlot
+                ? selectedCount > 0
+                    ? "pb-28 md:pb-0"
+                    : "pb-12 md:pb-0"
+                : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [headerSlot, statusTabsSlot && (_jsx(Div, { className: "overflow-x-auto touch-pan-x -mx-4 px-4 md:-mx-6 md:px-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: statusTabsSlot })), _jsxs(Div, { className: [
+                    "sticky z-20 -mx-4 px-4 md:-mx-6 md:px-6",
+                    isDashboard ? "top-0" : "top-14 md:top-[120px]",
+                    "bg-white/80 dark:bg-slate-950/80 backdrop-blur-md",
+                    "border-b border-zinc-200/70 dark:border-slate-800/70",
+                    "shadow-[0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.2)]",
+                    "py-2.5",
+                ].join(" "), children: [_jsxs(Row, { className: "hidden md:flex gap-2 min-w-0", children: [hasFilter && (_jsxs(Button, { type: "button", onClick: () => setSidebarOpen((prev) => !prev), "aria-label": sidebarOpen ? l.hideFilters : l.showFilters, "aria-expanded": sidebarOpen, variant: "ghost", size: "sm", className: [
+                                    "hidden lg:flex flex-shrink-0 items-center gap-1.5",
+                                    "rounded-full h-8 px-3 text-sm font-medium",
+                                    "border transition-all duration-150",
+                                    sidebarOpen
+                                        ? "bg-primary/10 border-primary/30 text-primary dark:bg-primary/15 dark:border-primary/40"
+                                        : "border-zinc-200 dark:border-slate-700 text-zinc-600 dark:text-slate-300 hover:border-zinc-300 dark:hover:border-slate-600 hover:bg-zinc-50 dark:hover:bg-slate-800/60",
+                                ].join(" "), children: [l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-white", children: filterActiveCount }))] })), searchSlot && _jsx(Div, { className: "flex-1 min-w-0", children: searchSlot }), _jsxs(Row, { className: "gap-1.5 flex-shrink-0", children: [sortSlot, viewToggleSlot && (_jsx(Row, { className: "gap-0.5 rounded-full border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-0.5 shadow-sm", children: viewToggleSlot })), actionsSlot] }), toolbarPaginationSlot && (_jsx(Div, { className: "ml-auto flex-shrink-0 pl-3 border-l border-zinc-200/70 dark:border-slate-700/70", children: toolbarPaginationSlot }))] }), _jsxs(Div, { className: "flex flex-col gap-2 md:hidden", children: [_jsxs(Row, { className: "gap-2", children: [hasFilter && (_jsxs(Button, { type: "button", onClick: () => setMobileFilterOpen(true), "aria-label": l.filtersTitle, variant: "ghost", size: "sm", className: [
+                                            "flex-shrink-0 flex items-center gap-1.5",
+                                            "rounded-full h-9 px-3 text-sm font-medium",
+                                            "border border-zinc-200 dark:border-slate-700",
+                                            "text-zinc-600 dark:text-slate-300",
+                                            "hover:bg-zinc-50 dark:hover:bg-slate-800/60 transition-colors",
+                                            filterActiveCount > 0
+                                                ? "border-primary/40 bg-primary/5 text-primary"
+                                                : "",
+                                        ].join(" "), children: [l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-white", children: filterActiveCount }))] })), searchSlot && _jsx(Div, { className: "flex-1 min-w-0", children: searchSlot })] }), (sortSlot || viewToggleSlot || actionsSlot) && (_jsx(Div, { className: "flex items-stretch min-h-[44px] gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: _jsxs(Row, { className: "gap-2 flex-shrink-0 pb-px", children: [sortSlot, viewToggleSlot, actionsSlot] }) }))] }), selectedCount > 0 && bulkActionBarSlot && (_jsx(Div, { className: "hidden md:block pt-2 mt-2 border-t border-zinc-100 dark:border-slate-800", children: bulkActionBarSlot }))] }), _jsxs(Div, { className: "flex gap-4 lg:gap-6 items-start", children: [hasFilter && (_jsx(Aside, { "aria-label": panelTitle, className: [
+                            "hidden lg:block flex-shrink-0 self-start",
+                            isDashboard ? "sticky top-16" : "sticky top-[176px]",
+                            "transition-all duration-200 ease-in-out overflow-hidden",
+                            sidebarOpen
+                                ? "w-60 xl:w-64 2xl:w-72 opacity-100"
+                                : "w-0 opacity-0 pointer-events-none",
+                        ].join(" "), children: _jsxs(Div, { className: "w-60 xl:w-64 2xl:w-72 rounded-2xl overflow-hidden border border-zinc-200/80 dark:border-slate-700/60 bg-white dark:bg-slate-900 shadow-sm", children: [_jsxs(Row, { justify: "between", className: "px-4 py-3 border-b border-zinc-100 dark:border-slate-800", children: [_jsx(Div, { className: "font-semibold text-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: "px-3 pt-5 pb-3 max-h-[calc(100vh-15rem)] overflow-y-auto space-y-4", children: filterContent }), _jsx(Div, { className: "px-3 pb-3 pt-2 border-t border-zinc-100 dark:border-slate-800", children: _jsx(Button, { type: "button", variant: "primary", className: "w-full rounded-xl bg-primary text-white py-2 px-3", onClick: onFilterApply, children: l.applyFilters }) })] }) })), _jsxs(Div, { className: "flex-1 min-w-0 space-y-3", children: [activeFiltersSlot, errorSlot ? (errorSlot) : (_jsxs(_Fragment, { children: [children, paginationSlot && _jsx(Div, { className: "pt-2", children: paginationSlot })] }))] })] }), toolbarPaginationSlot && (_jsx(Nav, { "aria-label": "Pagination", className: [
+                    "fixed left-0 right-0 md:hidden",
+                    isDashboard
+                        ? "bottom-0"
+                        : selectedCount > 0
+                            ? "bottom-28"
+                            : "bottom-14",
+                    "z-[39]",
+                    "bg-white/95 dark:bg-slate-950/95 backdrop-blur-md",
+                    "shadow-[0_-2px_8px_rgba(0,0,0,0.06)] dark:shadow-[0_-2px_8px_rgba(0,0,0,0.20)]",
+                    "h-10 flex items-center justify-center px-3 overflow-x-auto pb-px",
+                    "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                ].join(" "), children: toolbarPaginationSlot })), hasFilter && mobileFilterOpen && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "fixed inset-0 z-40 bg-black/40 lg:hidden", onClick: () => setMobileFilterOpen(false), "aria-hidden": "true" }), _jsxs(Div, { ref: mobileOverlayRef, className: "fixed inset-0 z-50 flex flex-col lg:hidden bg-white dark:bg-slate-950", role: "dialog", "aria-modal": "true", "aria-label": panelTitle, children: [_jsxs(Row, { justify: "between", className: "px-4 py-3 border-b border-zinc-100 dark:border-slate-800 flex-shrink-0", children: [_jsxs(Div, { className: "font-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: "rounded-full w-8 h-8 p-0 flex items-center justify-center hover:bg-zinc-100 dark:hover:bg-slate-800", children: "x" })] }), _jsx(Div, { className: "flex-1 overflow-y-auto px-4 pt-6 pb-4 space-y-4", children: filterContent }), _jsxs(Div, { className: "flex-shrink-0 flex gap-3 px-4 py-4 border-t border-zinc-100 dark:border-slate-800 bg-white dark:bg-slate-950", children: [_jsx(Button, { type: "button", variant: "outline", className: "flex-1 rounded-xl bg-zinc-200 dark:bg-slate-700 py-2 px-3", onClick: () => {
+                                            onFilterClear?.();
+                                        }, children: l.clearAll }), _jsx(Button, { type: "button", variant: "primary", className: "flex-1 rounded-xl bg-primary text-white py-2 px-3", onClick: handleMobileApply, children: l.applyFilters })] })] })] }))] }));
+}

package/dist/features/layout/LocaleSwitcher.d.ts

@@ -0,0 +1,22 @@
+export interface LocaleSwitcherOption {
+    value: string;
+    label: string;
+}
+export interface LocaleSwitcherProps {
+    /** Currently active locale. */
+    locale: string;
+    /** Available locale options. */
+    options: LocaleSwitcherOption[];
+    /** Called when the user selects a different locale. */
+    onChange: (locale: string) => void;
+    /** ARIA label for the select element. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * LocaleSwitcher — generic locale selector.
+ *
+ * Renders a minimal `<select>` element. The parent is responsible for
+ * calling `router.replace` with the chosen locale (project-specific routing).
+ */
+export declare function LocaleSwitcher({ locale, options, onChange, ariaLabel, className, }: LocaleSwitcherProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/LocaleSwitcher.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select } from "../../ui";
+/**
+ * LocaleSwitcher — generic locale selector.
+ *
+ * Renders a minimal `<select>` element. The parent is responsible for
+ * calling `router.replace` with the chosen locale (project-specific routing).
+ */
+export function LocaleSwitcher({ locale, options, onChange, ariaLabel = "Switch language", className = "", }) {
+    return (_jsx(Select, { value: locale, onValueChange: onChange, options: options, "aria-label": ariaLabel, className: className }));
+}

package/dist/features/layout/MainNavbar.d.ts

@@ -0,0 +1,32 @@
+export interface MainNavbarItem {
+    /** Unique key used for filtering */
+    key: string;
+    /** Route href */
+    href: string;
+    /** Translated label */
+    label: string;
+    icon?: React.ReactNode;
+    highlighted?: boolean;
+}
+export interface MainNavbarProps {
+    /** Pre-translated nav items to display */
+    navItems: MainNavbarItem[];
+    /** Keys of items to hide (e.g. when shown in a sub-layout) */
+    hiddenNavItems?: string[];
+    /** When true, renders the navbar inline instead of sticky */
+    inline?: boolean;
+}
+/**
+ * MainNavbar — horizontal desktop navigation bar.
+ *
+ * Accepts pre-translated nav items from the consumer config and delegates
+ * rendering to the generic NavbarLayout primitive.
+ *
+ * @example
+ * ```tsx
+ * const t = useTranslations("nav");
+ * const items = MAIN_NAV_ITEMS.map(item => ({ ...item, label: t(item.key) }));
+ * <MainNavbar navItems={items} />
+ * ```
+ */
+export declare function MainNavbar({ navItems, hiddenNavItems, inline, }: MainNavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/MainNavbar.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+import { NavbarLayout } from "./NavbarLayout";
+/**
+ * MainNavbar — horizontal desktop navigation bar.
+ *
+ * Accepts pre-translated nav items from the consumer config and delegates
+ * rendering to the generic NavbarLayout primitive.
+ *
+ * @example
+ * ```tsx
+ * const t = useTranslations("nav");
+ * const items = MAIN_NAV_ITEMS.map(item => ({ ...item, label: t(item.key) }));
+ * <MainNavbar navItems={items} />
+ * ```
+ */
+export function MainNavbar({ navItems, hiddenNavItems = [], inline = false, }) {
+    const pathname = usePathname();
+    const items = navItems
+        .filter((item) => !hiddenNavItems.includes(item.key))
+        .map((item) => ({
+        href: item.href,
+        label: item.label,
+        icon: item.icon,
+        highlighted: item.highlighted,
+    }));
+    return _jsx(NavbarLayout, { items: items, activeHref: pathname, inline: inline });
+}

package/dist/features/layout/NavItem.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface NavItemProps {
+    href: string;
+    label: string;
+    icon: React.ReactNode;
+    isActive?: boolean;
+    variant?: "horizontal" | "vertical";
+    highlighted?: boolean;
+    className?: string;
+    activeClassName?: string;
+    inactiveClassName?: string;
+    iconClassName?: string;
+    labelClassName?: string;
+}
+/**
+ * NavItem — reusable navigation link with horizontal and vertical variants.
+ * Color and typography are controlled via className props from the consumer.
+ */
+export declare function NavItem({ href, label, icon, isActive, variant, highlighted, className, activeClassName, inactiveClassName, iconClassName, labelClassName, }: NavItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/NavItem.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Row, Span } from "../../ui";
+/**
+ * NavItem — reusable navigation link with horizontal and vertical variants.
+ * Color and typography are controlled via className props from the consumer.
+ */
+export function NavItem({ href, label, icon, isActive = false, variant = "horizontal", highlighted = false, className = "", activeClassName = "", inactiveClassName = "", iconClassName = "", labelClassName = "", }) {
+    const stateClass = isActive ? activeClassName : inactiveClassName;
+    if (variant === "vertical") {
+        return (_jsxs(Link, { href: href, className: [
+                "relative flex flex-col items-center gap-1 py-2 transition-colors",
+                stateClass,
+                className,
+            ]
+                .filter(Boolean)
+                .join(" "), children: [isActive && (_jsx(Span, { className: "absolute inset-0 rounded-t-xl bg-gradient-to-b from-primary/10 to-transparent pointer-events-none", "aria-hidden": true })), _jsx(Row, { className: ["relative", iconClassName].join(" "), children: icon }), _jsx(Span, { className: ["relative", labelClassName].join(" "), children: label })] }));
+    }
+    if (highlighted) {
+        return (_jsxs(Link, { href: href, className: [
+                "flex items-center gap-2 px-3 py-1 rounded-full border border-primary-700/30 dark:border-primary/30 bg-primary-700/5 dark:bg-primary/5 text-primary-700 dark:text-primary text-sm font-medium transition-all hover:bg-primary-700/10 dark:hover:bg-primary/10",
+                className,
+            ]
+                .filter(Boolean)
+                .join(" "), children: [_jsx(Row, { className: "flex-shrink-0", children: icon }), _jsx(Span, { className: "whitespace-nowrap", children: label })] }));
+    }
+    return (_jsxs(Link, { href: href, className: [
+            "flex items-center gap-2 px-3 py-2 md:px-4 md:py-2.5 lg:px-5 lg:py-3 rounded-lg text-sm md:text-base font-medium transition-all duration-200",
+            stateClass,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsx(Row, { className: ["flex-shrink-0", iconClassName].join(" "), children: icon }), _jsx(Span, { className: ["whitespace-nowrap", labelClassName].join(" "), children: label })] }));
+}

package/dist/features/layout/NavbarLayout.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface NavbarLayoutItem {
+    href: string;
+    label: string;
+    icon: React.ReactNode;
+    highlighted?: boolean;
+}
+export interface NavbarLayoutProps {
+    items: NavbarLayoutItem[];
+    activeHref: string;
+    id?: string;
+    ariaLabel?: string;
+    /**
+     * When true, renders as an inline flex row without an outer Nav wrapper or sticky bg.
+     * Used when slotted inside TitleBarLayout for the slim double-nav pattern.
+     */
+    inline?: boolean;
+    /** Render a custom nav item — defaults to an <a> anchor link. */
+    renderItem?: (item: NavbarLayoutItem, isActive: boolean) => React.ReactNode;
+}
+/**
+ * NavbarLayout — generic horizontal navigation bar shell.
+ *
+ * Zero domain imports. Receives all navigation items and the current
+ * active href as props. Hidden on mobile (visible md+).
+ */
+export declare function NavbarLayout({ items, activeHref, id, ariaLabel, inline, renderItem, }: NavbarLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/NavbarLayout.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Div, Li, Nav, Span, Ul } from "../../ui";
+function DefaultNavItem({ item, isActive, }) {
+    const activeClasses = item.highlighted
+        ? "border border-primary-500/30 dark:border-secondary-400/30 text-primary-600 dark:text-secondary-400 bg-primary-50/60 dark:bg-secondary-900/30 px-3"
+        : isActive
+            ? "bg-zinc-100 dark:bg-slate-800 text-zinc-900 dark:text-zinc-50 font-semibold px-3"
+            : "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors px-3";
+    return (_jsxs(Link, { href: item.href, "aria-current": isActive ? "page" : undefined, className: `flex items-center gap-1.5 py-2 text-sm rounded-lg font-medium transition-colors duration-150 ${activeClasses}`, children: [item.icon, _jsx(Span, { children: item.label })] }));
+}
+/**
+ * NavbarLayout — generic horizontal navigation bar shell.
+ *
+ * Zero domain imports. Receives all navigation items and the current
+ * active href as props. Hidden on mobile (visible md+).
+ */
+export function NavbarLayout({ items, activeHref, id = "main-navbar", ariaLabel = "Main navigation", inline = false, renderItem, }) {
+    if (inline) {
+        return (_jsx(Ul, { "aria-label": ariaLabel, className: "hidden xl:flex items-center gap-0.5 xl:gap-1", children: items.map((item) => (_jsx(Li, { children: renderItem ? (renderItem(item, activeHref === item.href)) : (_jsx(DefaultNavItem, { item: item, isActive: activeHref === item.href })) }, item.href))) }));
+    }
+    return (_jsx(Nav, { id: id, "aria-label": ariaLabel, className: "hidden xl:block bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80", children: _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsx(Ul, { className: "flex items-center gap-0.5 lg:gap-1 h-10 md:h-12", children: items.map((item) => (_jsx(Li, { children: renderItem ? (renderItem(item, activeHref === item.href)) : (_jsx(DefaultNavItem, { item: item, isActive: activeHref === item.href })) }, item.href))) }) }) }));
+}

package/dist/features/layout/SidebarLayout.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+export interface SidebarLayoutProps {
+    isOpen: boolean;
+    ariaLabel: string;
+    onClose: () => void;
+    /** Content pinned inside a fixed (non-scrolling) header strip */
+    header: React.ReactNode;
+    /** Scrollable body content */
+    children: React.ReactNode;
+    id?: string;
+}
+/**
+ * SidebarLayout — generic slide-out sidebar shell.
+ *
+ * Renders:
+ *  - Backdrop overlay when open (closes on click)
+ *  - Aside container with transform animation (right-side slide)
+ *  - Fixed header slot (no-scroll, pinned at top)
+ *  - Scrollable body slot (fills remaining height)
+ *
+ * Uses `forwardRef` so the parent can attach a swipe-detection ref
+ * to the rendered `aside` element.
+ */
+export declare const SidebarLayout: React.ForwardRefExoticComponent<SidebarLayoutProps & React.RefAttributes<HTMLElement>>;

package/dist/features/layout/SidebarLayout.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Aside, Div } from "../../ui";
+/**
+ * SidebarLayout — generic slide-out sidebar shell.
+ *
+ * Renders:
+ *  - Backdrop overlay when open (closes on click)
+ *  - Aside container with transform animation (right-side slide)
+ *  - Fixed header slot (no-scroll, pinned at top)
+ *  - Scrollable body slot (fills remaining height)
+ *
+ * Uses `forwardRef` so the parent can attach a swipe-detection ref
+ * to the rendered `aside` element.
+ */
+export const SidebarLayout = forwardRef(function SidebarLayout({ isOpen, ariaLabel, onClose, header, children, id = "secondary-sidebar" }, ref) {
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx(Div, { className: "fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[45] transition-opacity duration-300", onClick: onClose, "aria-hidden": "true" })), _jsxs(Aside, { ref: ref, id: id, "aria-label": ariaLabel, className: `
+            fixed inset-y-0 right-0
+            w-80
+            bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-800
+            shadow-2xl
+            transform duration-300 ease-in-out
+            z-50
+            ${isOpen ? "translate-x-0" : "translate-x-full"}
+            flex flex-col
+          `, children: [_jsx(Div, { className: "flex-shrink-0 px-6 py-5 border-b border-zinc-200 dark:border-slate-800 bg-zinc-50 dark:bg-slate-900/80", children: header }), _jsx(Div, { className: "flex-1 overflow-y-auto scrollbar-thin px-6 py-4", children: children })] })] }));
+});
+SidebarLayout.displayName = "SidebarLayout";

package/dist/features/layout/TitleBar.d.ts

@@ -0,0 +1,18 @@
+import type { TitleBarLayoutProps } from "./TitleBarLayout";
+export interface TitleBarProps extends Omit<TitleBarLayoutProps, "cartCount" | "hasDashboardNav" | "onOpenDashboardNav"> {
+    /**
+     * When true, hides the dashboard nav PanelLeft button so that nested
+     * admin/seller/user layouts can own their sidebar controls exclusively.
+     */
+    suppressDashboardNav?: boolean;
+}
+/**
+ * TitleBar � domain shell over TitleBarLayout.
+ *
+ * Reads `useCartCount` and `useDashboardNav` from appkit.
+ * Pass `user` from your consumer`s auth context.
+ *
+ * Wrap with `DashboardNavProvider` at the app root to enable the
+ * dashboard nav button in nested admin/seller/user routes.
+ */
+export declare function TitleBar({ suppressDashboardNav, ...rest }: TitleBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/TitleBar.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCartCount } from "../cart/hooks/useCartCount";
+import { useDashboardNav } from "./DashboardNavContext";
+import { TitleBarLayout } from "./TitleBarLayout";
+/**
+ * TitleBar � domain shell over TitleBarLayout.
+ *
+ * Reads `useCartCount` and `useDashboardNav` from appkit.
+ * Pass `user` from your consumer`s auth context.
+ *
+ * Wrap with `DashboardNavProvider` at the app root to enable the
+ * dashboard nav button in nested admin/seller/user routes.
+ */
+export function TitleBar({ suppressDashboardNav, ...rest }) {
+    const cartCount = useCartCount();
+    const { hasNav: hasDashboardNav, openNav: openDashboardNav } = useDashboardNav();
+    return (_jsx(TitleBarLayout, { ...rest, cartCount: cartCount, hasDashboardNav: suppressDashboardNav ? false : hasDashboardNav, onOpenDashboardNav: suppressDashboardNav ? undefined : openDashboardNav, hideSidebarToggle: rest.hideSidebarToggle ?? suppressDashboardNav }));
+}

package/dist/features/layout/TitleBarLayout.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+/** Minimal user shape required by the title bar. */
+export interface TitleBarUser {
+    displayName: string | null;
+    email: string | null;
+    photoURL: string | null;
+    /** Role string — used for display only. */
+    role?: string;
+}
+export interface TitleBarLayoutProps {
+    onToggleSidebar: () => void;
+    sidebarOpen: boolean;
+    onSearchToggle: () => void;
+    searchOpen: boolean;
+    brandName: string;
+    brandShortName?: string;
+    logoHref: string;
+    promotionsHref?: string;
+    cartHref?: string;
+    cartCount?: number;
+    profileHref?: string;
+    user?: TitleBarUser | null;
+    /** Slot rendered between the search button and profile link (e.g. NotificationBell). */
+    notificationSlot?: React.ReactNode;
+    /** Optional dev-only action slot rendered in the right-side action group. */
+    devSlot?: React.ReactNode;
+    /** Optional nav slot rendered between logo and right action icons (desktop only). */
+    navSlot?: React.ReactNode;
+    /** When set, renders a dismissable promo micro-strip above the header. */
+    promoStripText?: string;
+    isDark?: boolean;
+    onToggleTheme?: () => void;
+    /** Whether a dashboard section has registered a secondary navigation drawer. */
+    hasDashboardNav?: boolean;
+    /** Callback to open the registered dashboard navigation drawer. */
+    onOpenDashboardNav?: () => void;
+    /** Hide the public sidebar toggle button when nested layouts own navigation. */
+    hideSidebarToggle?: boolean;
+    id?: string;
+    className?: string;
+}
+/**
+ * TitleBarLayout — generic top sticky title-bar shell.
+ *
+ * Receives all domain data as props — zero domain imports.
+ * Domain shell reads useAuth() and SITE_CONFIG and passes values in.
+ */
+export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, logoHref, promotionsHref, cartHref, cartCount, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, hasDashboardNav, onOpenDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/TitleBarLayout.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import Link from "next/link";
+import { BlockHeader, Button, Div, Row, Span } from "../../ui";
+/**
+ * TitleBarLayout — generic top sticky title-bar shell.
+ *
+ * Receives all domain data as props — zero domain imports.
+ * Domain shell reads useAuth() and SITE_CONFIG and passes values in.
+ */
+export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, logoHref, promotionsHref, cartHref, cartCount = 0, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav = false, onOpenDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
+    void searchOpen;
+    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80 ${className}`, children: [promoStripText && (_jsx(Div, { className: "bg-gradient-to-r from-primary-700 to-blue-700 dark:from-secondary-700 dark:to-blue-700 text-white text-xs py-1 text-center font-medium", children: promoStripText })), _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsxs(Row, { justify: "between", gap: "none", className: "h-12", children: [_jsxs(Row, { gap: "3", children: [!hideSidebarToggle && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": sidebarOpen ? "Close menu" : "Open menu", "aria-expanded": sidebarOpen, "aria-controls": "secondary-sidebar", onClick: onToggleSidebar, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: sidebarOpen ? (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })) : (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })) }) })), hasDashboardNav && onOpenDashboardNav && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Open dashboard navigation", onClick: onOpenDashboardNav, className: "hidden md:flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }) })), _jsx(Link, { href: logoHref, className: "font-bold text-lg text-zinc-900 dark:text-zinc-50 hover:opacity-80 transition-opacity", children: brandShortName ? (_jsxs(_Fragment, { children: [_jsx(Span, { className: "md:hidden", children: brandShortName }), _jsx(Span, { className: "hidden md:inline", children: brandName })] })) : (brandName) })] }), navSlot && _jsx(Div, { className: "hidden md:flex", children: navSlot }), _jsxs(Row, { gap: "xs", children: [promotionsHref && (_jsx(Link, { href: promotionsHref, "aria-label": "Today's deals", className: "hidden lg:flex items-center px-2.5 py-1.5 rounded-lg text-xs font-semibold text-pink-600 dark:text-pink-400 hover:bg-pink-50 dark:hover:bg-pink-950/30 transition-colors", children: "Deals" })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Search", onClick: onSearchToggle, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" }) }) }), notificationSlot, devSlot, onToggleTheme && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", onClick: onToggleTheme, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: isDark ? (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m8.66-9h-1M4.34 12h-1m15.07-6.07-.71.71M6.34 17.66l-.71.71m12.73 0-.71-.71M6.34 6.34l-.71-.71M12 5a7 7 0 1 0 0 14A7 7 0 0 0 12 5z" }) })) : (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79z" }) })) })), cartHref && (_jsxs(Link, { href: cartHref, "aria-label": `Cart${cartCount > 0 ? `, ${cartCount} items` : ""}`, className: "relative flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }) }), cartCount > 0 && (_jsx(Span, { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-red-500 text-white text-[10px] font-bold leading-none", children: cartCount > 9 ? "9+" : cartCount }))] })), profileHref && (_jsx(Link, { href: profileHref, "aria-label": user
+                                        ? `Profile — ${user.displayName ?? user.email}`
+                                        : "Sign in", className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: user?.photoURL ? (_jsx(Image, { src: user.photoURL, alt: user.displayName ?? "Profile", width: 28, height: 28, className: "w-7 h-7 rounded-full object-cover" })) : (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z" }) })) }))] })] }) })] }));
+}

package/dist/features/layout/hooks/useBottomActions.d.ts

@@ -0,0 +1,7 @@
+import { type BottomAction, type BottomBulkConfig } from "../BottomActionsContext";
+export interface UseBottomActionsOptions {
+    actions?: BottomAction[];
+    bulk?: BottomBulkConfig;
+    infoLabel?: string;
+}
+export declare function useBottomActions(options?: UseBottomActionsOptions): void;

package/dist/features/layout/hooks/useBottomActions.js

@@ -0,0 +1,28 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { useBottomActionsContext, } from "../BottomActionsContext";
+export function useBottomActions(options = {}) {
+    const { setActions, setBulkConfig, setInfoLabel, clearAll } = useBottomActionsContext();
+    const actionsRef = useRef(options.actions ?? []);
+    actionsRef.current = options.actions ?? [];
+    const bulkRef = useRef(options.bulk);
+    bulkRef.current = options.bulk;
+    const actionKey = (options.actions ?? [])
+        .map(({ id, label, variant, badge, disabled, loading, grow }) => `${id}|${label}|${variant}|${badge}|${disabled}|${loading}|${grow}`)
+        .join(",");
+    const bulkCountKey = options.bulk
+        ? `${options.bulk.selectedCount}|${options.bulk.actions.map((a) => `${a.id}|${a.label}|${a.variant}|${a.badge}|${a.disabled}|${a.loading}|${a.grow}`).join(",")}`
+        : "";
+    useEffect(() => {
+        setActions(actionsRef.current);
+    }, [setActions, actionKey]);
+    useEffect(() => {
+        setBulkConfig(bulkRef.current);
+    }, [setBulkConfig, bulkCountKey]);
+    useEffect(() => {
+        setInfoLabel(options.infoLabel);
+    }, [setInfoLabel, options.infoLabel]);
+    useEffect(() => {
+        return () => clearAll();
+    }, [clearAll]);
+}