@mohasinac/appkit 2.2.0 → 2.3.1

package/dist/features/layout/FooterLayout.js

@@ -3,10 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { useState } from "react";
 import { ChevronDown } from "lucide-react";
-import { BlockFooter, Button, Div, Heading, Li, Row, Span, Text, Ul, } from "../../ui";
+import { BlockFooter, Div, Heading, Li, Row, Span, Text, Ul, } from "../../ui";
 export function FooterLayout({ brandName, brandDescription, socialLinks, linkGroups, copyrightText, madeInText, newsletterSlot, newsletterEnabled = true, showTrustBar = false, trustBarItems = [], id = "footer", }) {
     const [openGroups, setOpenGroups] = useState({});
     const toggleGroup = (idx) => setOpenGroups((prev) => ({ ...prev, [idx]: !prev[idx] }));
     const visibleTrustItems = trustBarItems.filter((item) => item.visible !== false);
-    return (_jsxs(BlockFooter, { id: id, className: "bg-zinc-50 dark:bg-slate-900 border-t border-zinc-200 dark:border-slate-800", children: [showTrustBar && visibleTrustItems.length > 0 && (_jsx(Div, { className: "border-b border-zinc-200 dark:border-slate-800 py-6", children: _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsx(Row, { as: "ul", wrap: true, justify: "center", gap: "lg", className: "lg:gap-10", children: visibleTrustItems.map((item, i) => (_jsx(Li, { children: _jsxs(Row, { gap: "sm", className: "text-sm min-w-[160px]", children: [_jsx(Span, { className: "flex-shrink-0 text-primary-600 dark:text-secondary-400", children: item.icon }), _jsxs(Span, { children: [_jsx(Span, { className: "font-semibold text-zinc-900 dark:text-zinc-100", children: item.label }), item.subtitle && (_jsx(Span, { className: "text-zinc-500 dark:text-zinc-400 text-xs", children: item.subtitle }))] })] }) }, item.id ?? String(i)))) }) }) })), _jsxs(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] py-10 lg:py-14", children: [_jsxs(Div, { className: "grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-16", children: [_jsxs(Div, { className: "lg:col-span-2 space-y-4", children: [_jsx(Heading, { level: 5, className: "text-zinc-900 dark:text-zinc-100", children: brandName }), _jsx(Text, { className: "text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-sm", children: brandDescription }), socialLinks.length > 0 && (_jsx(Row, { as: Ul, gap: "sm", children: socialLinks.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, "aria-label": link.ariaLabel, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-9 h-9 rounded-full border border-zinc-200 dark:border-slate-700 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:border-zinc-300 dark:hover:border-slate-600 transition-colors", children: link.icon }) }, link.platform))) })), newsletterEnabled && newsletterSlot && (_jsx(Div, { className: "pt-2", children: newsletterSlot }))] }), _jsx(Div, { className: "lg:col-span-3 grid grid-cols-1 sm:grid-cols-3 gap-0 sm:gap-8", children: linkGroups.map((group, idx) => (_jsxs(Div, { children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => toggleGroup(idx), className: "sm:hidden flex items-center justify-between w-full py-3 border-b border-zinc-200 dark:border-slate-800 text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: [group.heading, _jsx(ChevronDown, { className: `w-4 h-4 transition-transform duration-200 ${openGroups[idx] ? "rotate-180" : ""}` })] }), _jsx(Ul, { className: `sm:hidden overflow-hidden transition-all duration-200 ${openGroups[idx] ? "max-h-96 py-3" : "max-h-0"} space-y-2.5`, children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors", children: link.label }) }, link.href))) }), _jsxs(Div, { className: "hidden sm:block", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 mb-3", children: group.heading }), _jsx(Ul, { className: "space-y-2.5", children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors", children: link.label }) }, link.href))) })] })] }, idx))) })] }), _jsxs(Div, { className: "mt-10 pt-6 border-t border-zinc-200 dark:border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-zinc-600 dark:text-zinc-400", children: [_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: copyrightText }), madeInText && (_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: madeInText }))] })] })] }));
+    return (_jsxs(BlockFooter, { id: id, className: "bg-zinc-50 dark:bg-slate-950 border-t border-zinc-200 dark:border-slate-800", children: [showTrustBar && visibleTrustItems.length > 0 && (_jsx(Div, { className: "border-b border-zinc-100 dark:border-slate-800 py-8", children: _jsx(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px]", children: _jsx(Row, { as: "ul", wrap: true, justify: "center", gap: "lg", className: "lg:gap-10", children: visibleTrustItems.map((item, i) => (_jsx(Li, { children: _jsxs(Row, { gap: "sm", className: "text-sm min-w-[160px]", children: [_jsx(Span, { className: "flex-shrink-0 text-primary-600 dark:text-secondary-400 w-5 h-5", children: item.icon }), _jsxs(Span, { children: [_jsx(Span, { className: "font-bold text-zinc-900 dark:text-zinc-100 block text-sm", children: item.label }), item.subtitle && (_jsx(Span, { className: "text-zinc-500 dark:text-zinc-400 text-xs block", children: item.subtitle }))] })] }) }, item.id ?? String(i)))) }) }) })), _jsxs(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] py-10 lg:py-14", children: [_jsxs(Div, { className: "grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-16", children: [_jsxs(Div, { className: "lg:col-span-2 space-y-4", children: [_jsx(Heading, { level: 5, className: "text-zinc-900 dark:text-zinc-50 font-bold text-xl", children: brandName }), _jsx(Text, { className: "text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-sm", children: brandDescription }), socialLinks.length > 0 && (_jsx(Row, { as: Ul, gap: "sm", children: socialLinks.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, "aria-label": link.ariaLabel, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-9 h-9 rounded-full border border-zinc-200 dark:border-slate-700 text-zinc-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary hover:border-primary/40 dark:hover:border-secondary/40 transition-colors", children: link.icon }) }, link.platform))) })), newsletterEnabled && newsletterSlot && (_jsx(Div, { className: "pt-2", children: newsletterSlot }))] }), _jsx(Div, { className: `lg:col-span-3 grid grid-cols-1 gap-0 lg:gap-8 ${linkGroups.length <= 3 ? "lg:grid-cols-3" :
+                                    linkGroups.length === 4 ? "lg:grid-cols-4" :
+                                        "lg:grid-cols-5"}`, children: linkGroups.map((group, idx) => (_jsxs(Div, { children: [_jsxs("button", { type: "button", onClick: () => toggleGroup(idx), className: "flex w-full items-center justify-between border-b border-zinc-200 py-3 text-left text-sm font-semibold text-zinc-800 transition-colors hover:text-zinc-950 dark:border-slate-800 dark:text-zinc-100 dark:hover:text-white lg:hidden", "aria-expanded": !!openGroups[idx], children: [group.heading, _jsx(ChevronDown, { className: `w-4 h-4 transition-transform duration-200 ${openGroups[idx] ? "rotate-180" : ""}` })] }), _jsx(Ul, { className: `lg:hidden overflow-hidden transition-all duration-200 ${openGroups[idx] ? "max-h-96 py-3" : "max-h-0"} space-y-2.5`, children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-sm text-zinc-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) }), _jsxs(Div, { className: "hidden lg:block", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 mb-3", children: group.heading }), _jsx(Ul, { className: "space-y-2.5", children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-sm text-zinc-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) })] })] }, idx))) })] }), _jsxs(Div, { className: "mt-10 pt-6 border-t border-zinc-200 dark:border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-zinc-600 dark:text-zinc-400", children: [_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: copyrightText }), madeInText && (_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: madeInText }))] })] })] }));
 }

package/dist/features/layout/LayoutClient.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 export function LayoutClient({ children, providers = [], renderShell, }) {
     const withProviders = providers.reduceRight((acc, Provider) => _jsx(Provider, { children: acc }), children);

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

@@ -1,4 +1,3 @@
-import "client-only";
 import { type ReactNode } from "react";
 export interface ListingLayoutLabels {
     filtersTitle?: string;

package/dist/features/layout/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";
 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, }) {

package/dist/features/layout/LocaleSwitcher.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Select } from "../../ui";
 /**

package/dist/features/layout/NavItem.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { Row, Span } from "../../ui";
@@ -10,12 +9,12 @@ export function NavItem({ href, label, icon, isActive = false, variant = "horizo
     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",
+                "relative flex h-full w-full flex-col items-center justify-center gap-1 py-1 text-center 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 })] }));
+                .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 whitespace-nowrap", labelClassName].join(" "), children: label })] }));
     }
     if (highlighted) {
         return (_jsxs(Link, { href: href, className: [

package/dist/features/layout/NavbarLayout.js

@@ -3,10 +3,10 @@ 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"
+        ? "border border-primary-400/40 dark:border-secondary-400/30 text-primary-700 dark:text-secondary-400 bg-primary-50/80 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";
+            ? "bg-primary-50 dark:bg-secondary-900/20 text-primary-800 dark:text-secondary-300 font-semibold px-3 border-b-2 border-primary dark:border-secondary rounded-none pb-[6px]"
+            : "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-950 dark:hover:text-white 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 })] }));
 }
 /**
@@ -19,5 +19,5 @@ export function NavbarLayout({ items, activeHref, id = "main-navbar", ariaLabel
     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))) }) }) }));
+    return (_jsx(Nav, { id: id, "aria-label": ariaLabel, className: "hidden lg:block bg-white/95 dark:bg-slate-950/95 backdrop-blur-md border-b border-zinc-100 dark:border-slate-800", 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", 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.js

@@ -1,4 +1,3 @@
-"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";

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

@@ -1,10 +1,12 @@
 import type { TitleBarLayoutProps } from "./TitleBarLayout";
-export interface TitleBarProps extends Omit<TitleBarLayoutProps, "cartCount" | "hasDashboardNav" | "onOpenDashboardNav"> {
+export interface TitleBarProps extends Omit<TitleBarLayoutProps, "cartCount" | "hasDashboardNav" | "onToggleDashboardNav"> {
     /**
      * When true, hides the dashboard nav PanelLeft button so that nested
      * admin/seller/user layouts can own their sidebar controls exclusively.
      */
     suppressDashboardNav?: boolean;
+    /** Optional hook invoked immediately before toggling the dashboard nav drawer. */
+    onBeforeToggleDashboardNav?: () => void;
 }
 /**
  * TitleBar � domain shell over TitleBarLayout.
@@ -15,4 +17,4 @@ export interface TitleBarProps extends Omit<TitleBarLayoutProps, "cartCount" | "
  * 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;
+export declare function TitleBar({ suppressDashboardNav, onBeforeToggleDashboardNav, ...rest }: TitleBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/TitleBar.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCartCount } from "../cart/hooks/useCartCount";
 import { useDashboardNav } from "./DashboardNavContext";
@@ -12,8 +11,13 @@ import { TitleBarLayout } from "./TitleBarLayout";
  * Wrap with `DashboardNavProvider` at the app root to enable the
  * dashboard nav button in nested admin/seller/user routes.
  */
-export function TitleBar({ suppressDashboardNav, ...rest }) {
+export function TitleBar({ suppressDashboardNav, onBeforeToggleDashboardNav, ...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 }));
+    const { hasNav: hasDashboardNav, toggleNav: toggleDashboardNav } = useDashboardNav();
+    return (_jsx(TitleBarLayout, { ...rest, cartCount: cartCount, hasDashboardNav: suppressDashboardNav ? false : hasDashboardNav, onToggleDashboardNav: suppressDashboardNav
+            ? undefined
+            : () => {
+                onBeforeToggleDashboardNav?.();
+                toggleDashboardNav();
+            }, hideSidebarToggle: rest.hideSidebarToggle ?? suppressDashboardNav }));
 }

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

@@ -16,6 +16,8 @@ export interface TitleBarLayoutProps {
     brandShortName?: string;
     logoHref: string;
     promotionsHref?: string;
+    /** Href for the compare page/drawer. When provided, renders a Compare icon button. */
+    compareHref?: string;
     cartHref?: string;
     cartCount?: number;
     profileHref?: string;
@@ -32,8 +34,8 @@ export interface TitleBarLayoutProps {
     onToggleTheme?: () => void;
     /** Whether a dashboard section has registered a secondary navigation drawer. */
     hasDashboardNav?: boolean;
-    /** Callback to open the registered dashboard navigation drawer. */
-    onOpenDashboardNav?: () => void;
+    /** Callback to toggle the registered dashboard navigation drawer. */
+    onToggleDashboardNav?: () => void;
     /** Hide the public sidebar toggle button when nested layouts own navigation. */
     hideSidebarToggle?: boolean;
     id?: string;
@@ -45,4 +47,4 @@ export interface TitleBarLayoutProps {
  * 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;
+export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, logoHref, promotionsHref, compareHref, cartHref, cartCount, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/layout/TitleBarLayout.js

@@ -1,4 +1,3 @@
-"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";
@@ -9,9 +8,9 @@ import { BlockHeader, Button, Div, Row, Span } from "../../ui";
  * 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 = "", }) {
+export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, logoHref, promotionsHref, compareHref, cartHref, cartCount = 0, profileHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav = false, onToggleDashboardNav, 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
+    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-white/95 dark:bg-slate-950/95 backdrop-blur-md border-b border-zinc-100 dark:border-slate-800 shadow-sm ${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-14", children: [_jsxs(Row, { gap: "3", children: [hasDashboardNav && onToggleDashboardNav && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Toggle dashboard navigation", onClick: onToggleDashboardNav, className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 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-xl tracking-tight text-zinc-900 dark:text-zinc-50 hover:text-primary dark:hover:text-secondary transition-colors", 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 && (_jsxs(Link, { href: promotionsHref, "aria-label": "Today's deals", className: "hidden lg:flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-primary-100 text-primary-700 dark:bg-secondary-900/40 dark:text-secondary-400 hover:bg-primary-200 dark:hover:bg-secondary-900/60 transition-colors border border-primary-200/60 dark:border-secondary-700/40", children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.37.86.58 1.41.58.55 0 1.05-.21 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z" }) }), "Today's Deals"] })), compareHref && (_jsx(Link, { href: compareHref, "aria-label": "Compare items", className: "hidden lg:flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 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: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) }) })), _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-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 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-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 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-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 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 }))] })), !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-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 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" })) }) })), 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" }) })) }))] })] }) })] }));
+                                        : "Sign in", className: "flex items-center justify-center w-9 h-9 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 dark:hover:text-secondary-400 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/index.d.ts

@@ -26,6 +26,8 @@ export { ListingLayout } from "./ListingLayout";
 export type { ListingLayoutProps, ListingLayoutLabels } from "./ListingLayout";
 export { LayoutClient } from "./LayoutClient";
 export type { LayoutClientProps, LayoutProvider } from "./LayoutClient";
+export { AppLayoutShell } from "./AppLayoutShell";
+export type { AppLayoutShellProps } from "./AppLayoutShell";
 export { BottomActionsProvider, useBottomActionsContext, } from "./BottomActionsContext";
 export type { BottomAction, BottomBulkConfig, BottomActionsState, } from "./BottomActionsContext";
 export { useBottomActions } from "./hooks/useBottomActions";

package/dist/features/layout/index.js

@@ -14,6 +14,7 @@ export { LocaleSwitcher } from "./LocaleSwitcher";
 export { BackToTop, SkipToMain } from "./BackToTop";
 export { ListingLayout } from "./ListingLayout";
 export { LayoutClient } from "./LayoutClient";
+export { AppLayoutShell } from "./AppLayoutShell";
 export { BottomActionsProvider, useBottomActionsContext, } from "./BottomActionsContext";
 export { useBottomActions } from "./hooks/useBottomActions";
 export { default as BottomActions } from "./BottomActions";

package/dist/features/loyalty/components/CoinsDisplay.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Span, Text } from "../../../ui";
 export function CoinsBadge({ coins, className }) {

package/dist/features/loyalty/hooks/useLoyaltyBalance.js

@@ -1,4 +1,3 @@
-"use client";
 import { useQuery } from "@tanstack/react-query";
 import { LOYALTY_ENDPOINTS } from "../../../constants/api-endpoints";
 export function useLoyaltyBalance(uid, opts) {

package/dist/features/loyalty/schemas/index.d.ts

@@ -9,12 +9,12 @@ export declare const coinHistoryEntrySchema: z.ZodObject<{
     orderId: z.ZodOptional<z.ZodString>;
     timestamp: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    reason: "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit" | "expiry";
+    reason: "expiry" | "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit";
     delta: number;
     orderId?: string | undefined;
     timestamp?: string | undefined;
 }, {
-    reason: "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit" | "expiry";
+    reason: "expiry" | "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit";
     delta: number;
     orderId?: string | undefined;
     timestamp?: string | undefined;
@@ -38,12 +38,12 @@ export declare const loyaltyBalanceSchema: z.ZodObject<{
         orderId: z.ZodOptional<z.ZodString>;
         timestamp: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        reason: "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit" | "expiry";
+        reason: "expiry" | "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit";
         delta: number;
         orderId?: string | undefined;
         timestamp?: string | undefined;
     }, {
-        reason: "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit" | "expiry";
+        reason: "expiry" | "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit";
         delta: number;
         orderId?: string | undefined;
         timestamp?: string | undefined;
@@ -52,7 +52,7 @@ export declare const loyaltyBalanceSchema: z.ZodObject<{
     uid: string;
     hcCoins: number;
     coinHistory?: {
-        reason: "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit" | "expiry";
+        reason: "expiry" | "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit";
         delta: number;
         orderId?: string | undefined;
         timestamp?: string | undefined;
@@ -61,7 +61,7 @@ export declare const loyaltyBalanceSchema: z.ZodObject<{
     uid: string;
     hcCoins?: number | undefined;
     coinHistory?: {
-        reason: "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit" | "expiry";
+        reason: "expiry" | "redemption" | "order_reward" | "referral" | "review_reward" | "manual_credit" | "manual_debit";
         delta: number;
         orderId?: string | undefined;
         timestamp?: string | undefined;

package/dist/features/loyalty/server.d.ts

@@ -3,5 +3,4 @@
  *
  * Server-only entry point for loyalty repositories.
  */
-import "server-only";
 export { LoyaltyRepository } from "./repository/loyalty.repository";

package/dist/features/loyalty/server.js

@@ -3,5 +3,4 @@
  *
  * Server-only entry point for loyalty repositories.
  */
-import "server-only";
 export { LoyaltyRepository } from "./repository/loyalty.repository";

package/dist/features/media/AvatarUpload.js

@@ -128,6 +128,6 @@ export function AvatarUpload({ currentPhotoURL, currentCropData, userId, display
             fileInputRef.current.value = "";
     };
     const hasPending = pendingCropData !== null && pendingUploadFile !== null;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-start gap-6", children: [_jsx("div", { className: "shrink-0", children: _jsx(AvatarDisplay, { cropData: hasPending ? pendingCropData : cropData, size: "2xl", className: `border-4 ${hasPending ? "border-primary/60 ring-2 ring-primary/20" : "border-zinc-200 dark:border-slate-700"}`, displayName: displayName }) }), _jsxs("div", { className: "flex-1 space-y-3", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: "JPG, PNG, WEBP or GIF up to 10MB." }), isUploading ? (_jsx(Progress, { value: 50, variant: "primary", size: "sm", label: t.uploading })) : null, hasPending && !isUploading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Text, { variant: "secondary", className: "text-xs text-primary", children: t.readyToSave }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", onClick: handleConfirmSave, size: "sm", children: t.saveAvatar }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: handleCancelPending, children: t.cancelChange })] })] })) : null, !hasPending && !isUploading ? (_jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), size: "sm", children: previewUrl ? t.changePhoto : t.chooseImage }), previewUrl ? (_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: handleRemovePhoto, children: t.removePhoto })) : null] })) : null, _jsx(Input, { ref: fileInputRef, bare: true, type: "file", accept: "image/jpeg,image/png,image/webp,image/gif", onChange: handleFileSelect, className: "hidden", "aria-label": t.changePhoto })] })] }), uploadApiError ? (_jsx(Alert, { variant: "error", children: uploadApiError.message })) : null] }), showCropModal && tempImageUrl ? (_jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: tempImageUrl, onClose: handleCropCancel, onSave: handleCropSave, initialCropData: cropData || undefined })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-4", "data-section": "avatarupload-div-404", children: [_jsxs("div", { className: "flex items-start gap-6", "data-section": "avatarupload-div-405", children: [_jsx("div", { className: "shrink-0", "data-section": "avatarupload-div-406", children: _jsx(AvatarDisplay, { cropData: hasPending ? pendingCropData : cropData, size: "2xl", className: `border-4 ${hasPending ? "border-primary/60 ring-2 ring-primary/20" : "border-zinc-200 dark:border-slate-700"}`, displayName: displayName }) }), _jsxs("div", { className: "flex-1 space-y-3", "data-section": "avatarupload-div-407", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: "JPG, PNG, WEBP or GIF up to 10MB." }), isUploading ? (_jsx(Progress, { value: 50, variant: "primary", size: "sm", label: t.uploading })) : null, hasPending && !isUploading ? (_jsxs("div", { className: "space-y-2", "data-section": "avatarupload-div-408", children: [_jsx(Text, { variant: "secondary", className: "text-xs text-primary", children: t.readyToSave }), _jsxs("div", { className: "flex gap-3", "data-section": "avatarupload-div-409", children: [_jsx(Button, { type: "button", onClick: handleConfirmSave, size: "sm", children: t.saveAvatar }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: handleCancelPending, children: t.cancelChange })] })] })) : null, !hasPending && !isUploading ? (_jsxs("div", { className: "flex gap-3", "data-section": "avatarupload-div-410", children: [_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), size: "sm", children: previewUrl ? t.changePhoto : t.chooseImage }), previewUrl ? (_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: handleRemovePhoto, children: t.removePhoto })) : null] })) : null, _jsx(Input, { ref: fileInputRef, bare: true, type: "file", accept: "image/jpeg,image/png,image/webp,image/gif", onChange: handleFileSelect, className: "hidden", "aria-label": t.changePhoto })] })] }), uploadApiError ? (_jsx(Alert, { variant: "error", children: uploadApiError.message })) : null] }), showCropModal && tempImageUrl ? (_jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: tempImageUrl, onClose: handleCropCancel, onSave: handleCropSave, initialCropData: cropData || undefined })) : null] }));
 }
 export default AvatarUpload;

package/dist/features/media/MediaImage.d.ts

@@ -11,6 +11,8 @@ export interface MediaImageProps {
     size?: MediaImageSize;
     /** Pass `true` for above-the-fold hero / banner images to skip lazy loading. */
     priority?: boolean;
+    /** Override browser loading strategy when needed (`eager` for LCP images). */
+    loading?: "lazy" | "eager";
     /** CSS object-fit applied to the underlying img element. Defaults to `'cover'`. */
     objectFit?: "cover" | "contain";
     /**
@@ -24,5 +26,5 @@ export interface MediaImageProps {
      */
     className?: string;
 }
-export declare function MediaImage({ src, alt, size, priority, objectFit, fallback, className, }: MediaImageProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaImage({ src, alt, size, priority, loading, objectFit, fallback, className, }: MediaImageProps): import("react/jsx-runtime").JSX.Element;
 export default MediaImage;

package/dist/features/media/MediaImage.js

@@ -6,8 +6,12 @@ import { Div, Span } from "../../ui";
 const SIZE_HINTS = {
     thumbnail: "(max-width: 640px) 80px, (max-width: 1024px) 96px, 112px",
     card: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw",
-    hero: "100vw",
-    banner: "100vw",
+    // Use a constrained fallback instead of unconditional 100vw to avoid
+    // the Next.js runtime warning when `fill` is used inside non-viewport
+    // width containers (cards, sliders). This still provides a helpful
+    // responsive hint while avoiding false-positive perf warnings.
+    hero: "(max-width: 768px) 100vw, 1200px",
+    banner: "(max-width: 768px) 100vw, 1200px",
     gallery: "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw",
     avatar: "(max-width: 640px) 48px, 56px",
 };
@@ -19,17 +23,17 @@ const FALLBACK_ICONS = {
     gallery: "📦",
     avatar: "👤",
 };
-export function MediaImage({ src, alt, size = "card", priority = false, objectFit = "cover", fallback, className, }) {
+export function MediaImage({ src, alt, size = "card", priority = false, loading, objectFit = "cover", fallback, className, }) {
     const [hasError, setHasError] = useState(false);
     const [isLoaded, setIsLoaded] = useState(false);
     const icon = fallback ?? FALLBACK_ICONS[size];
     const fitClass = objectFit === "contain" ? "object-contain" : "object-cover";
     if (!src || hasError) {
-        return (_jsx(Div, { className: `absolute inset-0 flex items-center justify-center bg-zinc-100 dark:bg-slate-800 text-zinc-400 text-4xl${className ? ` ${className}` : ""}`, role: "img", "aria-label": alt, children: _jsx(Span, { "aria-hidden": "true", children: icon }) }));
+        return (_jsx(Div, { className: `relative w-full h-full overflow-hidden flex items-center justify-center bg-zinc-100 dark:bg-slate-800 text-zinc-400 text-4xl${className ? ` ${className}` : ""}`, role: "img", "aria-label": alt, children: _jsx(Span, { "aria-hidden": "true", children: icon }) }));
     }
     const isSvg = src.toLowerCase().endsWith(".svg") ||
         src.includes("image/svg") ||
         /[./]svg(\?|$)/i.test(src);
-    return (_jsxs(Div, { className: `absolute inset-0 overflow-hidden${className ? ` ${className}` : ""}`, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 bg-zinc-200 dark:bg-slate-700 animate-pulse", "aria-hidden": "true" })), _jsx(Image, { src: src, alt: alt, fill: true, priority: priority, className: fitClass, sizes: SIZE_HINTS[size], onLoad: () => setIsLoaded(true), onError: () => setHasError(true), unoptimized: isSvg })] }));
+    return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${className ? ` ${className}` : ""}`, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 bg-zinc-200 dark:bg-slate-700 animate-pulse", "aria-hidden": "true" })), _jsx(Image, { src: src, alt: alt, fill: true, priority: priority, loading: loading ?? (priority ? "eager" : "lazy"), className: fitClass, sizes: SIZE_HINTS[size], onLoad: () => setIsLoaded(true), onError: () => setHasError(true), unoptimized: isSvg })] }));
 }
 export default MediaImage;

package/dist/features/media/MediaLightbox.d.ts

@@ -1,4 +1,3 @@
-import "client-only";
 export interface LightboxItem {
     src: string;
     alt: string;

package/dist/features/media/MediaLightbox.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useEffect, useCallback, useRef, useState } from "react";
 import { X, ZoomIn, ZoomOut, Maximize, Minimize, ChevronLeft, ChevronRight, RotateCcw, } from "lucide-react";
 import { MediaImage } from "./MediaImage";
@@ -26,7 +25,7 @@ function cn(...classes) {
 function IconBtn({ onClick, disabled, ariaLabel, ariaCurrent, className, children, }) {
     return (_jsx(Button, { type: "button", onClick: onClick, disabled: disabled, "aria-label": ariaLabel, "aria-current": ariaCurrent, className: cn("inline-flex items-center justify-center w-12 h-12 rounded-full bg-white/15 hover:bg-white/30 text-white border-0 active:scale-95 transition-colors disabled:opacity-30 disabled:cursor-not-allowed", className), children: children }));
 }
-// ─── MediaLightbox ────────────────────────────────────────────────────────────
+// --- MediaLightbox ------------------------------------------------------------
 export function MediaLightbox({ items, initialIndex = 0, isOpen, onClose, labels, }) {
     const L = { ...DEFAULT_LABELS, ...labels };
     const containerRef = useRef(null);

package/dist/features/media/components/MediaSlider.d.ts

@@ -1,3 +1,7 @@
+/**
+ * MediaSlider — lightweight range-input wrapper used internally by media editing modals.
+ * No external dependencies beyond React and Tailwind.
+ */
 export interface MediaSliderProps {
     value?: number;
     min?: number;

package/dist/features/media/components/MediaSlider.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function MediaSlider({ value, min = 0, max = 100, step = 1, onChange, onChangeEnd, className = "", }) {
     return (_jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => onChange?.(parseFloat(e.target.value)), onMouseUp: (e) => onChangeEnd?.(parseFloat(e.target.value)), onTouchEnd: (e) => onChangeEnd?.(parseFloat(e.target.value)), className: [

package/dist/features/media/hooks/useMedia.d.ts

@@ -1,3 +1,9 @@
+/**
+ * useMedia — upload/crop/trim hooks for @mohasinac/feat-media.
+ *
+ * Wraps @mohasinac/http apiClient via TanStack Query mutations.
+ * Endpoint paths can be overridden per call for non-standard deployments.
+ */
 import type { MediaFilenameContext } from "../../../utils/id-generators";
 export interface MediaUploadResult {
     url: string;

package/dist/features/media/hooks/useMedia.js

@@ -1,4 +1,3 @@
-"use client";
 /**
  * useMedia — upload/crop/trim hooks for @mohasinac/feat-media.
  *
@@ -8,7 +7,7 @@
 import { useMutation } from "@tanstack/react-query";
 import { apiClient } from "../../../http";
 import { MEDIA_ENDPOINTS } from "../../../constants/api-endpoints";
-// ─── Hooks ────────────────────────────────────────────────────────────────────
+// --- Hooks --------------------------------------------------------------------
 /**
  * useMediaUpload — uploads a file via FormData to /api/media/upload.
  *

package/dist/features/media/server.d.ts

@@ -1,2 +1 @@
-import "server-only";
 export { extractStoragePathFromUrl, finalizeStagedMediaUrl, finalizeStagedMediaField, finalizeStagedMediaArray, finalizeStagedMediaObject, finalizeStagedMediaObjectArray, } from "./finalize";

package/dist/features/media/server.js

@@ -1,2 +1 @@
-import "server-only";
 export { extractStoragePathFromUrl, finalizeStagedMediaUrl, finalizeStagedMediaField, finalizeStagedMediaArray, finalizeStagedMediaObject, finalizeStagedMediaObjectArray, } from "./finalize";

package/dist/features/media/types/index.d.ts

@@ -13,13 +13,13 @@ export declare const mediaFieldSchema: z.ZodObject<{
     alt: z.ZodOptional<z.ZodString>;
     thumbnailUrl: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    type: "video" | "image" | "file";
     url: string;
+    type: "video" | "image" | "file";
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
 }, {
-    type: "video" | "image" | "file";
     url: string;
+    type: "video" | "image" | "file";
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
 }>;

package/dist/features/orders/api/track/[trackingId]/route.d.ts

@@ -8,7 +8,6 @@
  * export { GET } from "@mohasinac/appkit/features/orders";
  * ```
  */
-import "server-only";
 import { NextResponse } from "next/server.js";
 export declare function GET(_request: Request, { params }: {
     params: {

package/dist/features/orders/api/track/[trackingId]/route.js

@@ -8,7 +8,6 @@
  * export { GET } from "@mohasinac/appkit/features/orders";
  * ```
  */
-import "server-only";
 import { NextResponse } from "next/server.js";
 import { getTrackingInfo } from "../../../actions/order-actions";
 export async function GET(_request, { params }) {

package/dist/features/orders/components/MarketplaceOrderCard.d.ts

@@ -1,4 +1,3 @@
-import "client-only";
 export interface MarketplaceOrderCardOrder {
     id: string;
     status: string;

package/dist/features/orders/components/MarketplaceOrderCard.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
 import { useCallback } from "react";
 import { Package } from "lucide-react";
 import { Button, Caption, Span, StatusBadge, Text, TextLink, } from "../../../ui";
@@ -46,7 +45,7 @@ export function MarketplaceOrderCard({ order, links, labels, className = "", var
     }, [orderId, isSelected, onSelect]);
     const isListVariant = variant === "list";
     const itemCount = order.items?.length ?? 0;
-    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl border border-zinc-200 bg-white transition-all duration-200 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 ${isSelected ? "ring-2 ring-primary-500 dark:ring-primary-400" : ""} ${className}`, children: [selectable && (_jsx(Button, { variant: "ghost", "aria-label": isSelected ? "Deselect order" : "Select order", "aria-pressed": isSelected, onClick: handleSelect, className: `absolute top-3 left-3 z-10 h-6 w-6 cursor-pointer rounded-md border-2 p-0 shadow-md transition-colors ${isSelected ? "border-primary bg-primary" : "border-zinc-400 bg-white/95 hover:border-primary dark:border-slate-500 dark:bg-slate-800/95"}`, children: isSelected && (_jsx("svg", { className: "h-3.5 w-3.5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })) })), _jsxs("div", { className: `flex gap-4 p-4 ${isListVariant ? "flex-row items-center justify-between" : "flex-col"}`, children: [_jsxs("div", { className: `flex items-start gap-3 ${selectable ? "pl-8" : ""} ${isListVariant ? "min-w-0 flex-1" : ""}`, children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-zinc-100 dark:bg-slate-800", children: _jsx(Package, { className: "h-5 w-5 text-zinc-500 dark:text-slate-400" }) }), _jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx(TextLink, { href: detailHref, className: "leading-tight", children: _jsx(Text, { weight: "semibold", className: "truncate", children: order.productTitle ?? shortId }) }), _jsxs(Caption, { className: "font-mono text-xs", children: [mergedLabels.orderNumber, " ", shortId] }), _jsxs(Caption, { className: "text-xs", children: [mergedLabels.placedOn, " ", formatDate(order.orderDate)] }), itemCount > 1 && (_jsxs(Caption, { className: "text-xs", children: [mergedLabels.items, ": ", _jsx(Span, { weight: "medium", children: itemCount })] }))] })] }), _jsxs("div", { className: `flex ${isListVariant ? "flex-shrink-0 items-center gap-4" : "flex-col gap-3"}`, children: [_jsxs("div", { className: `flex ${isListVariant ? "items-center gap-4" : "flex-wrap items-center justify-between gap-3"}`, children: [_jsx(StatusBadge, { status: status, label: statusLabel }), _jsx(Text, { weight: "semibold", className: "tabular-nums", children: formatCurrency(order.totalPrice, order.currency) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [(isShipped || isDelivered) &&
+    return (_jsxs("div", { className: `relative overflow-hidden rounded-xl border border-zinc-200 bg-white transition-all duration-200 hover:shadow-md dark:border-slate-800 dark:bg-slate-900 ${isSelected ? "ring-2 ring-primary-500 dark:ring-primary-400" : ""} ${className}`, "data-section": "marketplaceordercard-div-411", children: [selectable && (_jsx(Button, { variant: "ghost", "aria-label": isSelected ? "Deselect order" : "Select order", "aria-pressed": isSelected, onClick: handleSelect, className: `absolute top-3 left-3 z-10 h-6 w-6 cursor-pointer rounded-md border-2 p-0 shadow-md transition-colors ${isSelected ? "border-primary bg-primary" : "border-zinc-400 bg-white/95 hover:border-primary dark:border-slate-500 dark:bg-slate-800/95"}`, children: isSelected && (_jsx("svg", { className: "h-3.5 w-3.5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })) })), _jsxs("div", { className: `flex gap-4 p-4 ${isListVariant ? "flex-row items-center justify-between" : "flex-col"}`, "data-section": "marketplaceordercard-div-412", children: [_jsxs("div", { className: `flex items-start gap-3 ${selectable ? "pl-8" : ""} ${isListVariant ? "min-w-0 flex-1" : ""}`, "data-section": "marketplaceordercard-div-413", children: [_jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-zinc-100 dark:bg-slate-800", "data-section": "marketplaceordercard-div-414", children: _jsx(Package, { className: "h-5 w-5 text-zinc-500 dark:text-slate-400" }) }), _jsxs("div", { className: "min-w-0 space-y-1", "data-section": "marketplaceordercard-div-415", children: [_jsx(TextLink, { href: detailHref, className: "leading-tight", children: _jsx(Text, { weight: "semibold", className: "truncate", children: order.productTitle ?? shortId }) }), _jsxs(Caption, { className: "font-mono text-xs", children: [mergedLabels.orderNumber, " ", shortId] }), _jsxs(Caption, { className: "text-xs", children: [mergedLabels.placedOn, " ", formatDate(order.orderDate)] }), itemCount > 1 && (_jsxs(Caption, { className: "text-xs", children: [mergedLabels.items, ": ", _jsx(Span, { weight: "medium", children: itemCount })] }))] })] }), _jsxs("div", { className: `flex ${isListVariant ? "flex-shrink-0 items-center gap-4" : "flex-col gap-3"}`, "data-section": "marketplaceordercard-div-416", children: [_jsxs("div", { className: `flex ${isListVariant ? "items-center gap-4" : "flex-wrap items-center justify-between gap-3"}`, "data-section": "marketplaceordercard-div-417", children: [_jsx(StatusBadge, { status: status, label: statusLabel }), _jsx(Text, { weight: "semibold", className: "tabular-nums", children: formatCurrency(order.totalPrice, order.currency) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", "data-section": "marketplaceordercard-div-418", children: [(isShipped || isDelivered) &&
                                         trackHref &&
                                         order.trackingNumber && (_jsx(Button, { variant: "ghost", size: "sm", className: "min-w-0 flex-1 px-2 text-xs", onClick: () => navigate(trackHref), children: mergedLabels.trackOrder })), isDelivered && reviewHref && (_jsx(Button, { variant: "outline", size: "sm", className: "min-w-0 flex-1 px-2 text-xs", onClick: () => navigate(reviewHref), children: mergedLabels.writeReview })), _jsx(Button, { variant: "secondary", size: "sm", className: "min-w-0 flex-1 px-2 text-xs", onClick: () => navigate(detailHref), children: mergedLabels.viewOrder })] })] })] })] }));
 }

package/dist/features/orders/components/OrderFilters.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";