@mohasinac/appkit 2.8.2 → 2.8.4

package/dist/features/layout/AppLayoutShell.js

@@ -28,6 +28,7 @@ const DEFAULT_LIGHT_BG = {
 };
 const CLS_STAT_BOX = "flex flex-col items-center gap-1 p-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg text-center";
 const CLS_STAT_LABEL = "text-xs text-zinc-500 dark:text-zinc-400";
+const CLS_LOGOUT_BTN = "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-950/30 dark:hover:text-red-300";
 const DEFAULT_DARK_BG = {
     type: "color",
     value: "#030712",
@@ -91,7 +92,7 @@ function SidebarContent({ sidebarItems, sidebarSections, sidebarPrimaryActions,
                         action.variant === "outline"
                             ? "border border-zinc-300 text-zinc-700 hover:bg-zinc-50 dark:border-slate-700 dark:text-zinc-100 dark:hover:bg-slate-800"
                             : "bg-primary text-white hover:bg-primary-600 dark:bg-primary dark:hover:bg-primary-600 btn-glow",
-                    ].join(" "), children: action.label }, `${action.href}-${action.label}`))) })), isAuthenticated && (_jsx(CollapsibleNavGroup, { title: labels.sectionTitle, children: _jsxs(Ul, { className: "space-y-0.5", children: [_jsx(Li, { children: _jsx(TextLink, { href: profileHref, variant: "none", className: navItemClass, children: labels.profile }) }), userOrdersHref && (_jsx(Li, { children: _jsx(TextLink, { href: userOrdersHref, variant: "none", className: navItemClass, children: labels.orders }) })), userWishlistHref && (_jsx(Li, { children: _jsx(TextLink, { href: userWishlistHref, variant: "none", className: navItemClass, children: labels.wishlist }) })), userSettingsHref && (_jsx(Li, { children: _jsx(TextLink, { href: userSettingsHref, variant: "none", className: navItemClass, children: labels.settings }) }))] }) })), isAuthenticated && user?.stats && (_jsxs(Div, { className: "grid grid-cols-2 gap-2", children: [user.stats.totalOrders != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.totalOrders }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Orders" })] })), user.stats.reviewsCount != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.reviewsCount }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Reviews" })] })), user.stats.auctionsWon != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.auctionsWon }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Auctions Won" })] })), user.stats.itemsSold != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.itemsSold }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Items Sold" })] }))] })), isAuthenticated && isAdminOrSeller && (adminHref || resolvedStoreHref) && (_jsx(CollapsibleNavGroup, { title: labels.dashboardSectionTitle, children: _jsxs(Ul, { className: "space-y-0.5", children: [adminHref && role === "admin" && (_jsx(Li, { children: _jsx(TextLink, { href: adminHref, variant: "none", className: navItemClass, children: labels.adminDashboard }) })), resolvedStoreHref && isAdminOrSeller && (_jsx(Li, { children: _jsx(TextLink, { href: resolvedStoreHref, variant: "none", className: navItemClass, children: labels.storeDashboard }) }))] }) })), normalizedSections.map((section, sectionIndex) => (_jsx(CollapsibleSidebarSection, { section: section, navItemClass: navItemClass }, `sidebar-section-${sectionIndex}`))), (sidebarLocaleSlot || showThemeToggleInSidebar || (isAuthenticated && onLogout)) && (_jsxs(Div, { className: "border-t border-zinc-200 pt-4 space-y-3 dark:border-slate-800", children: [sidebarLocaleSlot, showThemeToggleInSidebar && (_jsxs("button", { type: "button", onClick: toggleTheme, className: "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-primary-50 hover:text-primary-800 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-secondary-300", children: [_jsx("span", { "aria-hidden": "true", children: theme === "dark" ? "☀️" : "🌙" }), theme === "dark" ? "Light mode" : "Dark mode"] })), isAuthenticated && onLogout && (_jsx("button", { type: "button", onClick: () => { onLogout(); onAfterLogout(); }, className: "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-950/30 dark:hover:text-red-300", children: labels.logout }))] }))] }));
+                    ].join(" "), children: action.label }, `${action.href}-${action.label}`))) })), isAuthenticated && (_jsx(CollapsibleNavGroup, { title: labels.sectionTitle, children: _jsxs(Ul, { className: "space-y-0.5", children: [_jsx(Li, { children: _jsx(TextLink, { href: profileHref, variant: "none", className: navItemClass, children: labels.profile }) }), userOrdersHref && (_jsx(Li, { children: _jsx(TextLink, { href: userOrdersHref, variant: "none", className: navItemClass, children: labels.orders }) })), userWishlistHref && (_jsx(Li, { children: _jsx(TextLink, { href: userWishlistHref, variant: "none", className: navItemClass, children: labels.wishlist }) })), userSettingsHref && (_jsx(Li, { children: _jsx(TextLink, { href: userSettingsHref, variant: "none", className: navItemClass, children: labels.settings }) }))] }) })), isAuthenticated && user?.stats && (_jsxs(Div, { className: "grid grid-cols-2 gap-2", children: [user.stats.totalOrders != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.totalOrders }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Orders" })] })), user.stats.reviewsCount != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.reviewsCount }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Reviews" })] })), user.stats.auctionsWon != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.auctionsWon }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Auctions Won" })] })), user.stats.itemsSold != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "text-lg font-bold text-zinc-900 dark:text-zinc-100 leading-none", children: user.stats.itemsSold }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Items Sold" })] }))] })), isAuthenticated && isAdminOrSeller && (adminHref || resolvedStoreHref) && (_jsx(CollapsibleNavGroup, { title: labels.dashboardSectionTitle, children: _jsxs(Ul, { className: "space-y-0.5", children: [adminHref && role === "admin" && (_jsx(Li, { children: _jsx(TextLink, { href: adminHref, variant: "none", className: navItemClass, children: labels.adminDashboard }) })), resolvedStoreHref && isAdminOrSeller && (_jsx(Li, { children: _jsx(TextLink, { href: resolvedStoreHref, variant: "none", className: navItemClass, children: labels.storeDashboard }) }))] }) })), normalizedSections.map((section, sectionIndex) => (_jsx(CollapsibleSidebarSection, { section: section, navItemClass: navItemClass }, `sidebar-section-${sectionIndex}`))), (sidebarLocaleSlot || showThemeToggleInSidebar || (isAuthenticated && onLogout)) && (_jsxs(Div, { className: "border-t border-zinc-200 pt-4 space-y-3 dark:border-slate-800", children: [sidebarLocaleSlot, showThemeToggleInSidebar && (_jsxs("button", { type: "button", onClick: toggleTheme, className: "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-zinc-700 transition-colors hover:bg-primary-50 hover:text-primary-800 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-secondary-300", children: [_jsx("span", { "aria-hidden": "true", children: theme === "dark" ? "☀️" : "🌙" }), theme === "dark" ? "Light mode" : "Dark mode"] })), isAuthenticated && onLogout && (_jsx("button", { type: "button", onClick: () => { onLogout(); onAfterLogout(); }, className: CLS_LOGOUT_BTN, children: labels.logout }))] }))] }));
 }
 // ─── Main component ────────────────────────────────────────────────────────────
 export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarSections, sidebarPrimaryActions, sidebarTitle = "Navigation", hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle = false, suppressDashboardNav = false, hideSidebarToggle = false, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar = false, sidebarProfileLabels, eventBannerSlot, contentClassName, lightBackground = DEFAULT_LIGHT_BG, darkBackground = DEFAULT_DARK_BG, }) {

package/dist/features/layout/BackToTop.js

@@ -21,5 +21,5 @@ export function BackToTop({ threshold = 400, ariaLabel = "Back to top", classNam
 }
 /** SkipToMain — visually hidden link that becomes visible on focus for keyboard users. */
 export function SkipToMain({ mainId = "main-content" }) {
-    return (_jsx(Link, { href: `#${mainId}`, className: "sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:rounded-lg focus:bg-white dark:focus:bg-slate-900 focus:text-zinc-900 dark:focus:text-zinc-100 focus:shadow-lg focus:ring-2 focus:ring-primary-500 focus:outline-none text-sm font-medium", children: "Skip to main content" }));
+    return (_jsx(Link, { href: `#${mainId}`, className: "sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[var(--appkit-z-toast)] focus:px-4 focus:py-2 focus:rounded-lg focus:bg-white dark:focus:bg-slate-900 focus:text-zinc-900 dark:focus:text-zinc-100 focus:shadow-lg focus:ring-2 focus:ring-primary-500 focus:outline-none text-sm font-medium", children: "Skip to main content" }));
 }

package/dist/features/layout/BottomActions.js

@@ -1,42 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * BottomActions Component
- *
- * A fixed-bottom mobile action bar rendered **above** BottomNavbar (bottom-14).
- * Reads from `BottomActionsContext` — features register their actions via the
- * `useBottomActions` hook; this component just renders whatever is registered.
- *
- * Two modes:
- *  - **Page mode** — shows registered page-level actions inline (Add to Cart,
- *    Buy Now, Place Bid, Proceed to Checkout, etc.) with an optional info label.
- *  - **Bulk mode** — activates when `bulk.selectedCount > 0`; shows:
- *      • Selection count pill on the left (tap to deselect all)
- *      • An upward-opening type-picker dropdown (middle, flex-1) — tap to
- *        choose WHICH action to run; the chosen label is always visible.
- *      • An "Apply" submit button on the right — executes the selected action,
- *        styled with the selected action's variant (danger = red, etc.).
- *
- * Layout rules:
- *  - Hidden on lg+ screens (`lg:hidden`) — desktop shows inline action panels.
- *  - The bar slides up with a 300 ms ease-out transition; `pointer-events-none`
- *    while off-screen.
- *
- * @component
- * @example
- * // Automatically rendered by LayoutClient — no manual usage required.
- * // Features use `useBottomActions` to register their actions.
- */
 import { useState, useRef, useEffect } from "react";
 import { X, ChevronUp, ChevronDown, Check } from "lucide-react";
 import { useBottomActionsContext } from "./BottomActionsContext";
 import { useClickOutside } from "../../react";
-import { Row, Span, Text, Button } from "../../ui";
+import { Div, Row, Span, Text, Button } from "../../ui";
 // Token values inlined from @mohasinac/appkit/tokens
 const BOTTOM_NAV_BG = "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80";
 const Z_BOTTOM_ACTIONS = "z-40";
 const BOTTOM_NAV_HEIGHT = "h-14";
 const FLEX_CENTER = "flex items-center justify-center";
+const CLS_COUNT_BADGE = "bg-red-500 text-white";
 // ─── Sub-components ───────────────────────────────────────────────────────────
 function BulkPickerPanel({ bulkActions, selectedActionId, pickerOpen, onSelect, }) {
     return (_jsx("div", { role: "listbox", "aria-label": "Bulk actions", className: [
@@ -75,7 +49,7 @@ function PageActionsRow({ pageActions, dispatchAction, }) {
                     isIconOnly ? "px-0 justify-center" : "",
                 ]
                     .filter(Boolean)
-                    .join(" "), children: [action.icon && (_jsx(Span, { className: ["flex-shrink-0", action.label ? "mr-1.5" : ""].join(" "), "aria-hidden": "true", children: action.icon })), action.label && _jsx(Span, { className: "truncate leading-none", children: action.label }), action.badge !== undefined && (_jsx(Span, { className: `absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] bg-red-500 text-white text-[10px] font-bold rounded-full ${FLEX_CENTER} px-1 pointer-events-none select-none`, "aria-hidden": "true", children: action.badge }))] }, action.id));
+                    .join(" "), children: [action.icon && (_jsx(Span, { className: ["flex-shrink-0", action.label ? "mr-1.5" : ""].join(" "), "aria-hidden": "true", children: action.icon })), action.label && _jsx(Span, { className: "truncate leading-none", children: action.label }), action.badge !== undefined && (_jsx(Span, { className: `absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] ${CLS_COUNT_BADGE} text-[10px] font-bold rounded-full ${FLEX_CENTER} px-1 pointer-events-none select-none`, "aria-hidden": "true", children: action.badge }))] }, action.id));
         }) }));
 }
 export default function BottomActions() {
@@ -126,7 +100,7 @@ export default function BottomActions() {
             isVisible ? "translate-y-0" : "translate-y-full pointer-events-none",
         ]
             .filter(Boolean)
-            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), isBulkMode && (_jsx("div", { className: "h-[3px] w-full bg-gradient-to-r from-primary-600 via-secondary-400 to-primary-600 dark:from-primary-600 dark:via-primary-400 dark:to-primary-600" })), infoLabel && !isBulkMode && (_jsx("div", { className: "px-4 pt-2 pb-0 border-b border-zinc-100/80 dark:border-slate-800/80", "data-section": "bottomactions-div-403", children: _jsx(Text, { className: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 leading-5 truncate", children: infoLabel }) })), _jsx(Row, { className: `gap-2 px-3 ${BOTTOM_NAV_HEIGHT}`, children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline-flex items-center gap-1.5 flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded-full pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { className: "text-xs font-semibold tabular-nums whitespace-nowrap leading-none", children: bulk.noun
+            .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-gradient-to-r from-primary-600 via-secondary-400 to-primary-600 dark:from-primary-600 dark:via-primary-400 dark:to-primary-600" })), infoLabel && !isBulkMode && (_jsx(Div, { className: "px-4 pt-2 pb-0 border-b border-zinc-100/80 dark:border-slate-800/80", children: _jsx(Text, { className: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 leading-5 truncate", children: infoLabel }) })), _jsx(Row, { className: `gap-2 px-3 ${BOTTOM_NAV_HEIGHT}`, children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline-flex items-center gap-1.5 flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded-full pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
                                         ? `${bulk.selectedCount} ${bulk.noun}`
                                         : `${bulk.selectedCount} selected` })] }), bulkActions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
                                 "flex-1 min-w-0 h-10 flex items-center gap-2 px-3 rounded-lg border text-sm font-medium transition-colors",

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

@@ -1,39 +1,3 @@
-/**
- * BottomActionsContext
- *
- * Provides a context for registering page-level mobile action bars.
- * Features call `useBottomActions` to push actions; the `<BottomActions>`
- * layout component reads this context and renders the bar above BottomNavbar.
- *
- * Supports two modes:
- *  - Page mode: primary page actions (Add to Cart, Buy Now, Place Bid, etc.)
- *  - Bulk mode: activated when `bulk.selectedCount > 0` — shows selection
- *    count + custom bulk action buttons (Delete, Archive, Export, etc.)
- *
- * @example — product detail page
- * ```tsx
- * useBottomActions({
- *   actions: [
- *     { id: "wishlist", icon: <Heart className="w-4 h-4" />, label: t("wishlist"), variant: "ghost", grow: false, onClick: handleWishlist },
- *     { id: "cart",    label: t("addToCart"), variant: "outline", onClick: handleAddToCart },
- *     { id: "buy",     label: t("buyNow"),    variant: "primary", onClick: handleBuyNow },
- *   ],
- * });
- * ```
- *
- * @example — admin listing with bulk select
- * ```tsx
- * useBottomActions({
- *   bulk: {
- *     selectedCount: selectedIds.length,
- *     onClearSelection: () => setSelectedIds([]),
- *     actions: [
- *       { id: "delete", label: t("bulkDelete", { count: selectedIds.length }), variant: "danger", onClick: handleBulkDelete },
- *     ],
- *   },
- * });
- * ```
- */
 import React from "react";
 import type { ButtonProps } from "../../ui";
 export interface BottomAction {

package/dist/features/layout/BottomActionsContext.js

@@ -1,41 +1,5 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * BottomActionsContext
- *
- * Provides a context for registering page-level mobile action bars.
- * Features call `useBottomActions` to push actions; the `<BottomActions>`
- * layout component reads this context and renders the bar above BottomNavbar.
- *
- * Supports two modes:
- *  - Page mode: primary page actions (Add to Cart, Buy Now, Place Bid, etc.)
- *  - Bulk mode: activated when `bulk.selectedCount > 0` — shows selection
- *    count + custom bulk action buttons (Delete, Archive, Export, etc.)
- *
- * @example — product detail page
- * ```tsx
- * useBottomActions({
- *   actions: [
- *     { id: "wishlist", icon: <Heart className="w-4 h-4" />, label: t("wishlist"), variant: "ghost", grow: false, onClick: handleWishlist },
- *     { id: "cart",    label: t("addToCart"), variant: "outline", onClick: handleAddToCart },
- *     { id: "buy",     label: t("buyNow"),    variant: "primary", onClick: handleBuyNow },
- *   ],
- * });
- * ```
- *
- * @example — admin listing with bulk select
- * ```tsx
- * useBottomActions({
- *   bulk: {
- *     selectedCount: selectedIds.length,
- *     onClearSelection: () => setSelectedIds([]),
- *     actions: [
- *       { id: "delete", label: t("bulkDelete", { count: selectedIds.length }), variant: "danger", onClick: handleBulkDelete },
- *     ],
- *   },
- * });
- * ```
- */
 import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
 const EMPTY = { actions: [] };
 const BottomActionsContext = createContext(null);

package/dist/features/layout/BottomNavItem.js

@@ -23,5 +23,5 @@ export function BottomNavItem({ href, label, icon, badge, isActive = false, clas
     // Consumer projects may swap for next/link if preferred.
     return (_jsx(Li, { className: "flex-1", children: _jsxs("a", { href: href, "aria-label": label, "aria-current": isActive ? "page" : undefined, className: `relative flex flex-col items-center justify-center gap-0.5 h-full w-full min-h-[44px] transition-colors ${isActive
                 ? "text-primary-600 dark:text-secondary-400"
-                : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"}${className ? ` ${className}` : ""}`, children: [_jsxs(Span, { className: "relative", children: [icon, badge != null && badge > 0 && (_jsx(Span, { "aria-label": `${badge} items`, className: "absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold bg-secondary-500 text-white flex items-center justify-center leading-none", children: badge > 99 ? "99+" : badge }))] }), _jsx(Span, { className: "text-[10px] font-medium leading-none", children: label })] }) }));
+                : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"}${className ? ` ${className}` : ""}`, children: [_jsxs(Span, { className: "relative", children: [icon, badge != null && badge > 0 && (_jsx(Span, { "aria-label": `${badge} items`, className: "absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold bg-secondary-500 text-white flex items-center justify-center leading-none", children: badge > 99 ? "99+" : badge }))] }), _jsx(Span, { weight: "medium", className: "text-[10px] leading-none", children: label })] }) }));
 }

package/dist/features/layout/BottomSheet.js

@@ -2,6 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useCallback } from "react";
 import { Button, Div, Row, Span } from "../../ui";
+const __O = {
+    yAuto: "overflow-y-auto",
+};
 /**
  * BottomSheet — mobile-first drawer that slides up from the bottom.
  *
@@ -35,5 +38,5 @@ export function BottomSheet({ open, onClose, title, children, className, maxHeig
     }, [open, handleEscape]);
     if (!open)
         return null;
-    return (_jsxs(Div, { className: "fixed inset-0 z-50 lg:hidden", role: "presentation", children: [_jsx(Div, { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", "aria-hidden": "true", onClick: onClose }), _jsxs(Div, { role: "dialog", "aria-modal": "true", "aria-label": title, className: `absolute bottom-0 inset-x-0 flex flex-col rounded-t-2xl bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 shadow-2xl ${maxHeight} animate-slide-up${className ? ` ${className}` : ""}`, children: [_jsxs(Row, { justify: "between", className: "px-4 py-3 border-b border-zinc-100 dark:border-zinc-800 shrink-0", children: [_jsx(Div, { className: "absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-600" }), title && (_jsx(Span, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-100 mt-2", children: title })), _jsx(Button, { type: "button", onClick: onClose, "aria-label": "Close", className: "ml-auto mt-2 p-1.5 rounded-lg text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:text-zinc-200 dark:hover:bg-zinc-800 transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx(Div, { className: "flex-1 overflow-y-auto overscroll-contain pb-[env(safe-area-inset-bottom)]", children: children })] })] }));
+    return (_jsxs(Div, { className: "fixed inset-0 z-50 lg:hidden", role: "presentation", children: [_jsx(Div, { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", "aria-hidden": "true", onClick: onClose }), _jsxs(Div, { role: "dialog", "aria-modal": "true", "aria-label": title, className: `absolute bottom-0 inset-x-0 flex flex-col rounded-t-2xl bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 shadow-2xl ${maxHeight} animate-slide-up${className ? ` ${className}` : ""}`, children: [_jsxs(Row, { justify: "between", className: "px-4 py-3 border-b border-zinc-100 dark:border-zinc-800 shrink-0", children: [_jsx(Div, { className: "absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-600" }), title && (_jsx(Span, { size: "sm", weight: "semibold", className: "text-zinc-800 dark:text-zinc-100 mt-2", children: title })), _jsx(Button, { type: "button", onClick: onClose, "aria-label": "Close", className: "ml-auto mt-2 p-1.5 rounded-lg text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:text-zinc-200 dark:hover:bg-zinc-800 transition-colors min-h-[44px] min-w-[44px] flex items-center justify-center", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx(Div, { className: `flex-1 ${__O.yAuto} overscroll-contain pb-[env(safe-area-inset-bottom)]`, children: children })] })] }));
 }

package/dist/features/layout/FooterLayout.js

@@ -8,7 +8,7 @@ export function FooterLayout({ brandName, brandDescription, socialLinks, linkGro
     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-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" :
+    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, { size: "sm", weight: "bold", className: "text-zinc-900 dark:text-zinc-100 block", children: item.label }), item.subtitle && (_jsx(Span, { size: "xs", className: "text-zinc-500 dark:text-zinc-400 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", variant: "ghost", 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 }), bottomLinks.length > 0 && (_jsx("nav", { "aria-label": "Site utilities", children: _jsx(Ul, { className: "flex flex-wrap items-center gap-x-4 gap-y-1 justify-center", children: bottomLinks.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-xs text-zinc-500 dark:text-zinc-400 hover:text-primary dark:hover:text-secondary transition-colors underline-offset-2 hover:underline", children: link.label }) }, link.href))) }) })), madeInText && (_jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: madeInText }))] })] })] }));
 }

package/dist/features/layout/NavbarLayout.js

@@ -3,6 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback } from "react";
 import Link from "next/link";
 import { Div, Li, Nav, Span, Ul } from "../../ui";
+const __O = {
+    hidden: "overflow-hidden",
+};
 function DefaultNavItem({ item, isActive, }) {
     const activeClasses = item.highlighted
         ? "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 transition-colors duration-150"
@@ -48,5 +51,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 lg:block bg-white/95 dark:bg-slate-950/95 backdrop-blur-md border-b border-zinc-100 dark:border-slate-800", children: _jsxs(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] flex items-center h-10", children: [_jsxs(Div, { className: "relative flex-1 overflow-hidden", children: [canScrollLeft && (_jsx("button", { type: "button", onClick: () => scroll("left"), "aria-label": "Scroll navigation left", className: `${chevronBtn} left-0 bg-gradient-to-r`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) })), _jsx("ul", { ref: scrollRef, className: "flex items-center gap-0.5 lg:gap-1 overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: items.map((item) => (_jsx("li", { className: "shrink-0", children: renderItem ? (renderItem(item, activeHref === item.href)) : (_jsx(DefaultNavItem, { item: item, isActive: activeHref === item.href })) }, item.href))) }), canScrollRight && (_jsx("button", { type: "button", onClick: () => scroll("right"), "aria-label": "Scroll navigation right", className: `${chevronBtn} right-0 bg-gradient-to-l`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) }))] }), rightSlot && _jsx(Div, { className: "shrink-0 ml-2", children: rightSlot })] }) }));
+    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: _jsxs(Div, { className: "container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1920px] flex items-center h-10", children: [_jsxs(Div, { className: `relative flex-1 ${__O.hidden}`, children: [canScrollLeft && (_jsx("button", { type: "button", onClick: () => scroll("left"), "aria-label": "Scroll navigation left", className: `${chevronBtn} left-0 bg-gradient-to-r`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) })), _jsx("ul", { ref: scrollRef, className: "flex items-center gap-0.5 lg:gap-1 overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: items.map((item) => (_jsx("li", { className: "shrink-0", children: renderItem ? (renderItem(item, activeHref === item.href)) : (_jsx(DefaultNavItem, { item: item, isActive: activeHref === item.href })) }, item.href))) }), canScrollRight && (_jsx("button", { type: "button", onClick: () => scroll("right"), "aria-label": "Scroll navigation right", className: `${chevronBtn} right-0 bg-gradient-to-l`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) }))] }), rightSlot && _jsx(Div, { className: "shrink-0 ml-2", children: rightSlot })] }) }));
 }

package/dist/features/layout/SidebarLayout.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Aside, Div } from "../../ui";
+const __O = {
+    yAuto: "overflow-y-auto",
+};
 /**
  * SidebarLayout — generic slide-out sidebar shell.
  *
@@ -14,7 +17,7 @@ import { Aside, Div } from "../../ui";
  * 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: `
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx(Div, { className: "fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[var(--appkit-z-overlay)] 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
@@ -23,6 +26,6 @@ export const SidebarLayout = forwardRef(function SidebarLayout({ isOpen, ariaLab
             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 })] })] }));
+          `, 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 ${__O.yAuto} scrollbar-thin px-6 py-4`, children: children })] })] }));
 });
 SidebarLayout.displayName = "SidebarLayout";

package/dist/features/live/components/LiveItemFilters.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";
 import { AsyncFacetSection } from "../../filters/AsyncFacetSection";
 import { RangeFilter } from "../../filters/RangeFilter";
-import { Div } from "../../../ui";
+import { Div, Label } from "../../../ui";
 const SEX_OPTIONS = [
     { value: "male", label: "Male" },
     { value: "female", label: "Female" },
@@ -20,5 +20,5 @@ export function LiveItemFilters({ table, categoryOptions = [], loadCategoryOptio
         : [];
     const selectedSex = table.get("liveSex") ? [table.get("liveSex")] : [];
     const selectedTransport = table.get("liveTransportMethod") ? [table.get("liveTransportMethod")] : [];
-    return (_jsxs(Div, { children: [loadCategoryOptions ? (_jsx(AsyncFacetSection, { title: "Category", loadOptions: loadCategoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), defaultCollapsed: false })) : categoryOptions.length > 0 ? (_jsx(FilterFacetSection, { title: "Category", options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: true, defaultCollapsed: categoryOptions.length > 6 })) : null, _jsxs("div", { className: "border-t border-[var(--appkit-color-border)] pt-4 mt-4", children: [_jsx("label", { className: "block text-sm font-medium text-[var(--appkit-color-text)] mb-2", children: "Species / Animal" }), _jsx("input", { type: "text", value: table.get("species") || "", onChange: (e) => table.set("species", e.target.value), placeholder: "e.g. Axolotl, Parrot", className: "w-full rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-[var(--appkit-color-text-faint)] focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)]" })] }), _jsxs("div", { className: "border-t border-[var(--appkit-color-border)] pt-4 mt-4", children: [_jsx("label", { className: "block text-sm font-medium text-[var(--appkit-color-text)] mb-2", children: "Jurisdiction (state/UT)" }), _jsx("input", { type: "text", value: table.get("jurisdiction") || "", onChange: (e) => table.set("jurisdiction", e.target.value), placeholder: "e.g. Maharashtra", className: "w-full rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-[var(--appkit-color-text-faint)] focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)]" })] }), _jsx(FilterFacetSection, { title: "Sex", options: SEX_OPTIONS, selected: selectedSex, onChange: (vals) => table.set("liveSex", vals[0] ?? ""), searchable: false, selectionMode: "single", defaultCollapsed: false }), _jsx(FilterFacetSection, { title: "Transport Method", options: TRANSPORT_OPTIONS, selected: selectedTransport, onChange: (vals) => table.set("liveTransportMethod", vals[0] ?? ""), searchable: false, selectionMode: "single", defaultCollapsed: false }), _jsx(RangeFilter, { title: "Price", minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 200000, step: 100, minPlaceholder: "Min price", maxPlaceholder: "Max price", defaultCollapsed: false })] }));
+    return (_jsxs(Div, { children: [loadCategoryOptions ? (_jsx(AsyncFacetSection, { title: "Category", loadOptions: loadCategoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), defaultCollapsed: false })) : categoryOptions.length > 0 ? (_jsx(FilterFacetSection, { title: "Category", options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: true, defaultCollapsed: categoryOptions.length > 6 })) : null, _jsxs(Div, { className: "border-t border-[var(--appkit-color-border)] pt-4 mt-4", children: [_jsx(Label, { className: "block text-sm font-medium text-[var(--appkit-color-text)] mb-2", children: "Species / Animal" }), _jsx("input", { type: "text", value: table.get("species") || "", onChange: (e) => table.set("species", e.target.value), placeholder: "e.g. Axolotl, Parrot", className: "w-full rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-[var(--appkit-color-text-faint)] focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)]" })] }), _jsxs(Div, { className: "border-t border-[var(--appkit-color-border)] pt-4 mt-4", children: [_jsx(Label, { className: "block text-sm font-medium text-[var(--appkit-color-text)] mb-2", children: "Jurisdiction (state/UT)" }), _jsx("input", { type: "text", value: table.get("jurisdiction") || "", onChange: (e) => table.set("jurisdiction", e.target.value), placeholder: "e.g. Maharashtra", className: "w-full rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-[var(--appkit-color-text-faint)] focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)]" })] }), _jsx(FilterFacetSection, { title: "Sex", options: SEX_OPTIONS, selected: selectedSex, onChange: (vals) => table.set("liveSex", vals[0] ?? ""), searchable: false, selectionMode: "single", defaultCollapsed: false }), _jsx(FilterFacetSection, { title: "Transport Method", options: TRANSPORT_OPTIONS, selected: selectedTransport, onChange: (vals) => table.set("liveTransportMethod", vals[0] ?? ""), searchable: false, selectionMode: "single", defaultCollapsed: false }), _jsx(RangeFilter, { title: "Price", minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 200000, step: 100, minPlaceholder: "Min price", maxPlaceholder: "Max price", defaultCollapsed: false })] }));
 }

package/dist/features/live/components/LiveItemsIndexListing.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { BulkActionBar, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Text, useToast } from "../../../ui";
+import { BulkActionBar, Div, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Text, useToast } from "../../../ui";
 import { usePendingTable } from "../../../react/hooks/usePendingTable";
 import { useAuthGate } from "../../../react/hooks/useAuthGate";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
@@ -18,6 +18,12 @@ import { InteractiveProductCard } from "../../products/components/InteractivePro
 import { LiveItemFilters } from "./LiveItemFilters";
 import { ACTION_ID } from "../../products/constants/action-defs";
 import { useBottomActions } from "../../layout";
+const __P = {
+    p3: "p-3",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
 const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
 const SORT_OPTIONS = [
     { value: sortBy(PRODUCT_FIELDS.CREATED_AT), label: "Newest First" },
@@ -103,7 +109,7 @@ export function LiveItemsIndexListing({ initialData }) {
         }
     }
     useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [] } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search live items\u2026", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: (e) => { if (e.key === "Enter")
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search live items\u2026", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: (e) => { if (e.key === "Enter")
                     commitSearch(); }, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: (v) => { if (v !== "table")
-                    setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: products.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) })) : products.length === 0 ? (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No live item listings found." })) : (_jsx("div", { className: view === "list" ? "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800" : gridClass, children: products.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.LIVE_DETAIL(product.id)), variant: view === "list" ? "list" : "grid", isWishlisted: wishlistActions.isWishlisted(product.id), onToggleWishlist: handleToggleWishlist, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(LiveItemFilters, { table: pendingTable, categoryOptions: categoryOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                    setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: products.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [] }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `rounded-xl border border-zinc-100 dark:border-slate-700 ${__O.hidden} animate-pulse`, children: [_jsx(Div, { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs(Div, { className: `${__P.p3} space-y-2`, children: [_jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" })] })] }, i))) })) : products.length === 0 ? (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No live item listings found." })) : (_jsx(Div, { className: view === "list" ? "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800" : gridClass, children: products.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.LIVE_DETAIL(product.id)), variant: view === "list" ? "list" : "grid", isWishlisted: wishlistActions.isWishlisted(product.id), onToggleWishlist: handleToggleWishlist, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(LiveItemFilters, { table: pendingTable, categoryOptions: categoryOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

package/dist/features/live/components/LiveItemsListView.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { productRepository } from "../../../repositories";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
@@ -16,18 +17,18 @@ function buildLiveFilters(params) {
     const minPrice = sp(params, "minPrice");
     const maxPrice = sp(params, "maxPrice");
     if (minPrice)
-        parts.push(`price>=${minPrice}`);
+        parts.push(sieveFilter("price", SIEVE_OP.GTE, minPrice));
     if (maxPrice)
-        parts.push(`price<=${maxPrice}`);
+        parts.push(sieveFilter("price", SIEVE_OP.LTE, maxPrice));
     const species = sp(params, "species");
     if (species)
-        parts.push(`liveSpecies==${species}`);
+        parts.push(sieveFilter("liveSpecies", SIEVE_OP.EQ, species));
     const liveSex = sp(params, "liveSex");
     if (liveSex)
-        parts.push(`liveSex==${liveSex}`);
+        parts.push(sieveFilter("liveSex", SIEVE_OP.EQ, liveSex));
     const transport = sp(params, "liveTransportMethod");
     if (transport)
-        parts.push(`liveTransportMethod==${transport}`);
+        parts.push(sieveFilter("liveTransportMethod", SIEVE_OP.EQ, transport));
     return parts.join(",");
 }
 export async function LiveItemsListView({ searchParams = {} }) {

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Span, Text } from "../../../ui";
+const CLS_COIN_PILL = "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-800";
+const CLS_COIN_TOTAL = "text-3xl font-bold text-amber-600";
 export function CoinsBadge({ coins, className }) {
-    return (_jsxs(Span, { className: `inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-800 ${className ?? ""}`, children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83E\uDE99" }), coins.toLocaleString()] }));
+    return (_jsxs(Span, { className: `${CLS_COIN_PILL} ${className ?? ""}`, children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83E\uDE99" }), coins.toLocaleString()] }));
 }
 export function CoinsDisplay({ coins, label = "HC Coins" }) {
-    return (_jsxs(Div, { className: "flex flex-col items-center gap-1", children: [_jsx(Text, { className: "text-3xl font-bold text-amber-600", children: coins.toLocaleString() }), _jsx(Text, { className: "text-sm text-gray-500", children: label })] }));
+    return (_jsxs(Div, { className: "flex flex-col items-center gap-1", children: [_jsx(Text, { className: CLS_COIN_TOTAL, children: coins.toLocaleString() }), _jsx(Text, { className: "text-sm text-gray-500", children: label })] }));
 }

package/dist/features/media/AvatarUpload.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Alert, Button, Input, Progress, Text, useToast } from "../../ui";
+import { Alert, Button, Div, Input, Progress, Text, useToast } from "../../ui";
 import { useMediaUpload } from "./hooks/useMedia";
 import { ImageCropModal } from "./modals/ImageCropModal";
 import { AvatarDisplay } from "../../ui/components/AvatarDisplay";
@@ -106,6 +106,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", "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/*", 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", 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/*", 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/MediaLightbox.js

@@ -4,6 +4,7 @@ import { useEffect, useCallback, useRef, useState } from "react";
 import { X, ZoomIn, ZoomOut, Maximize, Minimize, ChevronLeft, ChevronRight, RotateCcw, } from "lucide-react";
 import { MediaImage } from "./MediaImage";
 import { Button, Div, Span } from "../../ui";
+const CLS_CLOSE_HOVER = "hover:!bg-red-500/50";
 const MIN_ZOOM = 1;
 const MAX_ZOOM = 4;
 const ZOOM_STEP = 0.5;
@@ -27,7 +28,7 @@ function IconBtn({ onClick, disabled, ariaLabel, ariaCurrent, className, childre
 }
 // --- Controls bar sub-components ---------------------------------------------
 function LightboxControlsBar({ items, index, zoom, isFullscreen, L, goPrev, goNext, zoomIn, zoomOut, resetZoom, toggleFullscreen, onClose, }) {
-    return (_jsxs(Div, { className: "flex items-center justify-center gap-1.5 px-4 py-3 bg-black/85 backdrop-blur-sm shrink-0 border-t border-white/10 flex-wrap", children: [items.length > 1 && (_jsx(IconBtn, { onClick: (e) => { e.stopPropagation(); goPrev(); }, ariaLabel: L.prevImage, children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsx(IconBtn, { onClick: zoomOut, disabled: zoom <= MIN_ZOOM, ariaLabel: L.zoomOut, children: _jsx(ZoomOut, { className: "w-7 h-7" }) }), _jsxs(Span, { className: "text-white/70 w-14 text-center tabular-nums text-xs", children: [Math.round(zoom * 100), "%"] }), _jsx(IconBtn, { onClick: zoomIn, disabled: zoom >= MAX_ZOOM, ariaLabel: L.zoomIn, children: _jsx(ZoomIn, { className: "w-7 h-7" }) }), zoom > 1 && (_jsx(IconBtn, { onClick: resetZoom, ariaLabel: L.resetZoom, children: _jsx(RotateCcw, { className: "w-7 h-7" }) })), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsxs(Span, { className: "text-white/60 w-12 text-center tabular-nums text-xs", children: [index + 1, " / ", items.length] }), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsx(IconBtn, { onClick: toggleFullscreen, ariaLabel: isFullscreen ? L.exitFullscreen : L.enterFullscreen, children: isFullscreen ? _jsx(Minimize, { className: "w-6 h-6" }) : _jsx(Maximize, { className: "w-6 h-6" }) }), _jsx(IconBtn, { onClick: onClose, ariaLabel: L.close, className: "hover:!bg-red-500/50", children: _jsx(X, { className: "w-7 h-7" }) }), items.length > 1 && (_jsx(IconBtn, { onClick: (e) => { e.stopPropagation(); goNext(); }, ariaLabel: L.nextImage, children: _jsx(ChevronRight, { className: "w-7 h-7" }) }))] }));
+    return (_jsxs(Div, { className: "flex items-center justify-center gap-1.5 px-4 py-3 bg-black/85 backdrop-blur-sm shrink-0 border-t border-white/10 flex-wrap", children: [items.length > 1 && (_jsx(IconBtn, { onClick: (e) => { e.stopPropagation(); goPrev(); }, ariaLabel: L.prevImage, children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsx(IconBtn, { onClick: zoomOut, disabled: zoom <= MIN_ZOOM, ariaLabel: L.zoomOut, children: _jsx(ZoomOut, { className: "w-7 h-7" }) }), _jsxs(Span, { size: "xs", className: "text-white/70 w-14 text-center tabular-nums", children: [Math.round(zoom * 100), "%"] }), _jsx(IconBtn, { onClick: zoomIn, disabled: zoom >= MAX_ZOOM, ariaLabel: L.zoomIn, children: _jsx(ZoomIn, { className: "w-7 h-7" }) }), zoom > 1 && (_jsx(IconBtn, { onClick: resetZoom, ariaLabel: L.resetZoom, children: _jsx(RotateCcw, { className: "w-7 h-7" }) })), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsxs(Span, { size: "xs", className: "text-white/60 w-12 text-center tabular-nums", children: [index + 1, " / ", items.length] }), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsx(IconBtn, { onClick: toggleFullscreen, ariaLabel: isFullscreen ? L.exitFullscreen : L.enterFullscreen, children: isFullscreen ? _jsx(Minimize, { className: "w-6 h-6" }) : _jsx(Maximize, { className: "w-6 h-6" }) }), _jsx(IconBtn, { onClick: onClose, ariaLabel: L.close, className: CLS_CLOSE_HOVER, children: _jsx(X, { className: "w-7 h-7" }) }), items.length > 1 && (_jsx(IconBtn, { onClick: (e) => { e.stopPropagation(); goNext(); }, ariaLabel: L.nextImage, children: _jsx(ChevronRight, { className: "w-7 h-7" }) }))] }));
 }
 function LightboxThumbnailStrip({ items, index, onSelect, resetZoom, L, }) {
     return (_jsx(Div, { className: "flex gap-2 px-4 py-3 bg-black/70 backdrop-blur-sm overflow-x-auto shrink-0 justify-center", style: { paddingBottom: "calc(0.75rem + env(safe-area-inset-bottom, 0px))" }, children: items.map((item, i) => (_jsx(Button, { type: "button", onClick: () => { onSelect(i); resetZoom(); }, "aria-label": L.imageThumbnail(i + 1), "aria-current": i === index ? "true" : undefined, className: cn("relative shrink-0 w-14 h-14 p-0 overflow-hidden rounded-lg border-2 transition-all active:scale-95", i === index ? "border-white opacity-100" : "border-transparent opacity-40 hover:opacity-75"), children: _jsx(MediaImage, { src: item.src, alt: item.alt, size: "thumbnail" }) }, i))) }));
@@ -222,7 +223,7 @@ export function MediaLightbox({ items, initialIndex = 0, isOpen, onClose, labels
     if (!isOpen || items.length === 0)
         return null;
     const current = items[index];
-    return (_jsxs(Div, { ref: containerRef, className: "fixed inset-0 z-[9999] bg-black/95 flex flex-col", role: "dialog", "aria-modal": "true", "aria-label": L.lightboxTitle, children: [_jsx(Div, { ref: imageAreaRef, className: "flex-1 relative overflow-hidden select-none", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: {
+    return (_jsxs(Div, { ref: containerRef, className: "fixed inset-0 z-[var(--appkit-z-tooltip)] bg-black/95 flex flex-col", role: "dialog", "aria-modal": "true", "aria-label": L.lightboxTitle, children: [_jsx(Div, { ref: imageAreaRef, className: "flex-1 relative overflow-hidden select-none", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: {
                     cursor: zoom > 1 ? (isDragging ? "grabbing" : "grab") : "default",
                     touchAction: "none",
                 }, onClick: (e) => {

package/dist/features/media/modals/VideoThumbnailSelector.js

@@ -9,6 +9,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import { useTranslations } from "next-intl";
 import { Alert, Button, Div, Modal, Row, Span, Spinner, Text, } from "../../../ui";
+const __O = {
+    hidden: "overflow-hidden",
+};
 export function VideoThumbnailSelector({ isOpen, videoUrl, onClose, onSelect, onUpload, }) {
     const t = useTranslations("mediaEditor");
     const [isCapturing, setIsCapturing] = useState(false);
@@ -47,5 +50,5 @@ export function VideoThumbnailSelector({ isOpen, videoUrl, onClose, onSelect, on
             setIsCapturing(false);
         }
     };
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("thumbnailTitle"), size: "lg", children: _jsxs(Div, { className: "space-y-4", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: t("thumbnailInstruction") }), _jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg bg-black", children: _jsx("video", { ref: videoRef, src: videoUrl, className: "absolute inset-0 w-full h-full object-contain", controls: true, preload: "metadata" }) }), _jsx("canvas", { ref: canvasRef, className: "hidden", "aria-hidden": "true" }), error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "end", className: "gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, disabled: isCapturing, children: t("thumbnailSkip") }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleCapture, disabled: isCapturing, children: isCapturing ? (_jsxs(Span, { className: "flex items-center gap-2", children: [_jsx(Spinner, { size: "sm" }), t("thumbnailCapturing")] })) : (t("thumbnailCapture")) })] })] }) }));
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("thumbnailTitle"), size: "lg", children: _jsxs(Div, { className: "space-y-4", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: t("thumbnailInstruction") }), _jsx(Div, { className: `relative aspect-video ${__O.hidden} rounded-lg bg-black`, children: _jsx("video", { ref: videoRef, src: videoUrl, className: "absolute inset-0 w-full h-full object-contain", controls: true, preload: "metadata" }) }), _jsx("canvas", { ref: canvasRef, className: "hidden", "aria-hidden": "true" }), error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "end", className: "gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, disabled: isCapturing, children: t("thumbnailSkip") }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleCapture, disabled: isCapturing, children: isCapturing ? (_jsxs(Span, { className: "flex items-center gap-2", children: [_jsx(Spinner, { size: "sm" }), t("thumbnailCapturing")] })) : (t("thumbnailCapture")) })] })] }) }));
 }

package/dist/features/media/modals/VideoTrimModal.js

@@ -69,5 +69,5 @@ export function VideoTrimModal({ isOpen, videoUrl, onClose, onSave, endpoint, })
         medium: t("trimQualityMedium"),
         high: t("trimQualityHigh"),
     };
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("trimTitle"), size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: t("trimInstruction") }), _jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg bg-black", children: _jsx("video", { ref: videoRef, src: videoUrl, className: "absolute inset-0 w-full h-full object-contain", controls: true, onLoadedMetadata: handleLoadedMetadata }) }), duration > 0 && (_jsxs(_Fragment, { children: [_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", children: t("trimStart") }), _jsx(Span, { className: "text-sm font-mono tabular-nums", children: formatTime(startTime) })] }), _jsx(MediaSlider, { value: startTime, min: 0, max: duration, step: 0.1, onChange: handleStartChange })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", children: t("trimEnd") }), _jsx(Span, { className: "text-sm font-mono tabular-nums", children: formatTime(endTime) })] }), _jsx(MediaSlider, { value: endTime, min: 0, max: duration, step: 0.1, onChange: handleEndChange })] }), _jsx(Text, { size: "xs", variant: "secondary", children: t("trimDuration", { duration: (endTime - startTime).toFixed(1) }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", children: t("trimQuality") }), _jsx(Div, { className: "flex gap-2", children: ["low", "medium", "high"].map((q) => (_jsx(Button, { type: "button", variant: quality === q ? "primary" : "outline", size: "sm", onClick: () => setQuality(q), disabled: isPending, children: qualityLabels[q] }, q))) })] })] })), error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "end", className: "gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, disabled: isPending, children: t("trimSkip") }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleTrim, disabled: isPending || duration === 0, children: isPending ? t("trimming") : t("trimSave") })] })] }) }));
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: t("trimTitle"), size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsx(Text, { variant: "secondary", className: "text-xs", children: t("trimInstruction") }), _jsx(Div, { className: "relative aspect-video overflow-hidden rounded-lg bg-black", children: _jsx("video", { ref: videoRef, src: videoUrl, className: "absolute inset-0 w-full h-full object-contain", controls: true, onLoadedMetadata: handleLoadedMetadata }) }), duration > 0 && (_jsxs(_Fragment, { children: [_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", children: t("trimStart") }), _jsx(Span, { size: "sm", className: "font-mono tabular-nums", children: formatTime(startTime) })] }), _jsx(MediaSlider, { value: startTime, min: 0, max: duration, step: 0.1, onChange: handleStartChange })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "sm", children: t("trimEnd") }), _jsx(Span, { size: "sm", className: "font-mono tabular-nums", children: formatTime(endTime) })] }), _jsx(MediaSlider, { value: endTime, min: 0, max: duration, step: 0.1, onChange: handleEndChange })] }), _jsx(Text, { size: "xs", variant: "secondary", children: t("trimDuration", { duration: (endTime - startTime).toFixed(1) }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", children: t("trimQuality") }), _jsx(Div, { className: "flex gap-2", children: ["low", "medium", "high"].map((q) => (_jsx(Button, { type: "button", variant: quality === q ? "primary" : "outline", size: "sm", onClick: () => setQuality(q), disabled: isPending, children: qualityLabels[q] }, q))) })] })] })), error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "end", className: "gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, disabled: isPending, children: t("trimSkip") }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleTrim, disabled: isPending || duration === 0, children: isPending ? t("trimming") : t("trimSave") })] })] }) }));
 }

package/dist/features/media/upload/CameraCapture.js

@@ -53,7 +53,7 @@ export default function CameraCapture({ mode, facingMode = "environment", onCapt
     };
     const showPhotoButton = mode === "photo" || mode === "both";
     const showVideoButton = mode === "video" || mode === "both";
-    return (_jsxs(Div, { className: `relative rounded-xl overflow-hidden bg-black ${className ?? ""}`, children: [_jsx("video", { ref: camera.videoRef, autoPlay: true, muted: true, playsInline: true, className: "w-full aspect-video object-cover" }), isStarting && (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center bg-black/60", children: _jsxs(Div, { className: "flex flex-col items-center gap-2", children: [_jsx(Spinner, {}), _jsx(Span, { className: "text-white text-sm", children: t("starting") })] }) })), camera.error && (_jsx(Div, { className: "absolute top-2 left-2 right-2", children: _jsx(Alert, { variant: "error", children: camera.error }) })), !isStarting && !camera.error && camera.isActive && (_jsxs(Div, { className: "absolute bottom-0 left-0 right-0 p-3 bg-black/40 flex items-center justify-center gap-3", children: [showPhotoButton && (_jsx(Button, { variant: "secondary", onClick: handleTakePhoto, "aria-label": t("takePhoto"), disabled: camera.isCapturing, children: t("takePhoto") })), showVideoButton && (_jsx(Button, { variant: camera.isCapturing ? "danger" : "secondary", onClick: camera.isCapturing
+    return (_jsxs(Div, { className: `relative rounded-xl overflow-hidden bg-black ${className ?? ""}`, children: [_jsx("video", { ref: camera.videoRef, autoPlay: true, muted: true, playsInline: true, className: "w-full aspect-video object-cover" }), isStarting && (_jsx(Div, { className: "absolute inset-0 flex items-center justify-center bg-black/60", children: _jsxs(Div, { className: "flex flex-col items-center gap-2", children: [_jsx(Spinner, {}), _jsx(Span, { size: "sm", className: "text-white", children: t("starting") })] }) })), camera.error && (_jsx(Div, { className: "absolute top-2 left-2 right-2", children: _jsx(Alert, { variant: "error", children: camera.error }) })), !isStarting && !camera.error && camera.isActive && (_jsxs(Div, { className: "absolute bottom-0 left-0 right-0 p-3 bg-black/40 flex items-center justify-center gap-3", children: [showPhotoButton && (_jsx(Button, { variant: "secondary", onClick: handleTakePhoto, "aria-label": t("takePhoto"), disabled: camera.isCapturing, children: t("takePhoto") })), showVideoButton && (_jsx(Button, { variant: camera.isCapturing ? "danger" : "secondary", onClick: camera.isCapturing
                             ? handleStopRecording
                             : () => camera.startRecording(), "aria-label": camera.isCapturing ? t("stopRecording") : t("startRecording"), children: camera.isCapturing ? t("stopRecording") : t("startRecording") })), hasMultipleCameras && (_jsx(Button, { variant: "outline", onClick: () => void camera.switchCamera(), "aria-label": t("flipCamera"), disabled: camera.isCapturing, children: t("flipCamera") }))] }))] }));
 }

package/dist/features/media/upload/ImageUpload.js

@@ -15,6 +15,9 @@ import { MediaImage } from "../MediaImage";
 import { ImageCropModal } from "../modals/ImageCropModal";
 import { ImageEditor } from "../modals/ImageEditor";
 import CameraCapture from "./CameraCapture";
+const __O = {
+    hidden: "overflow-hidden",
+};
 function formatFileSize(bytes) {
     if (bytes < 1024 * 1024)
         return `${(bytes / 1024).toFixed(1)}KB`;
@@ -162,7 +165,7 @@ export function ImageUpload({ currentImage, onUpload, onChange, accept = "image/
             fileInputRef.current.value = "";
         onChange?.("");
     };
-    return (_jsxs(Div, { className: "space-y-3", children: [label && (_jsx(Label, { className: "block text-sm font-medium text-zinc-600 dark:text-zinc-400", children: label })), _jsx(Div, { className: "relative", children: preview ? (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Div, { className: "relative h-32 max-w-xs mx-auto overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700", children: [_jsx(MediaImage, { src: preview, alt: "Preview", size: "card" }), uploading && progress > 0 && (_jsx(Div, { className: "absolute inset-x-0 bottom-0", children: _jsx(Progress, { value: progress, size: "sm" }) }))] }), !uploading && (_jsxs(Row, { wrap: true, gap: "sm", children: [(enableCrop || enableAdvancedCrop) && (_jsx(Button, { type: "button", onClick: () => openEditor(preview), variant: "secondary", size: "sm", children: tMediaEditor("editImage") })), _jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), variant: "outline", size: "sm", children: tUpload("change") }), _jsx(Button, { type: "button", onClick: handleRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] })) : (_jsxs(_Fragment, { children: [showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: "photo", facingMode: "environment", onCapture: handleCameraCapture, onError: setError })), !showCamera && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { gap: "sm", className: "flex-wrap", children: [showFileInput && (_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), disabled: uploading, variant: "outline", size: "sm", children: uploading ? tUpload("uploading") : tUpload("clickToUpload") })), captureSource !== "file-only" && isCameraSupported && (_jsx(Button, { type: "button", onClick: () => setCaptureMode("camera"), disabled: uploading, variant: "ghost", size: "sm", children: t("switchToCamera") })), captureSource !== "file-only" && !isCameraSupported && (_jsx(Button, { type: "button", onClick: () => mobileCaptureRef.current?.click(), disabled: uploading, variant: "ghost", size: "sm", children: t("switchToCamera") }))] }), _jsxs(Text, { size: "xs", variant: "secondary", children: [accept === "image/*"
+    return (_jsxs(Div, { className: "space-y-3", children: [label && (_jsx(Label, { className: "block text-sm font-medium text-zinc-600 dark:text-zinc-400", children: label })), _jsx(Div, { className: "relative", children: preview ? (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Div, { className: `relative h-32 max-w-xs mx-auto ${__O.hidden} rounded-lg border border-zinc-200 dark:border-zinc-700`, children: [_jsx(MediaImage, { src: preview, alt: "Preview", size: "card" }), uploading && progress > 0 && (_jsx(Div, { className: "absolute inset-x-0 bottom-0", children: _jsx(Progress, { value: progress, size: "sm" }) }))] }), !uploading && (_jsxs(Row, { wrap: true, gap: "sm", children: [(enableCrop || enableAdvancedCrop) && (_jsx(Button, { type: "button", onClick: () => openEditor(preview), variant: "secondary", size: "sm", children: tMediaEditor("editImage") })), _jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), variant: "outline", size: "sm", children: tUpload("change") }), _jsx(Button, { type: "button", onClick: handleRemove, variant: "danger", size: "sm", children: tUpload("remove") })] }))] })) : (_jsxs(_Fragment, { children: [showCamera && isCameraSupported && (_jsx(CameraCapture, { mode: "photo", facingMode: "environment", onCapture: handleCameraCapture, onError: setError })), !showCamera && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { gap: "sm", className: "flex-wrap", children: [showFileInput && (_jsx(Button, { type: "button", onClick: () => fileInputRef.current?.click(), disabled: uploading, variant: "outline", size: "sm", children: uploading ? tUpload("uploading") : tUpload("clickToUpload") })), captureSource !== "file-only" && isCameraSupported && (_jsx(Button, { type: "button", onClick: () => setCaptureMode("camera"), disabled: uploading, variant: "ghost", size: "sm", children: t("switchToCamera") })), captureSource !== "file-only" && !isCameraSupported && (_jsx(Button, { type: "button", onClick: () => mobileCaptureRef.current?.click(), disabled: uploading, variant: "ghost", size: "sm", children: t("switchToCamera") }))] }), _jsxs(Text, { size: "xs", variant: "secondary", children: [accept === "image/*"
                                             ? `JPG PNG GIF WebP`
                                             : accept.split(",").map((a) => a.split("/")[1]?.toUpperCase() ?? a).join(" "), " ", "\u2014 max ", maxSizeMB, "MB"] })] }))] })) }), _jsx("input", { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-input" }), showCamera && !isCameraSupported && (_jsx("input", { ref: mobileCaptureRef, type: "file", accept: "image/*", capture: "environment", onChange: handleFileChange, className: "hidden", "aria-hidden": "true", "data-testid": "media-upload-capture-input" })), helperText && !error && (_jsx(Text, { variant: "secondary", size: "xs", children: helperText })), error && _jsx(Alert, { variant: "error", children: error }), uploading && (_jsxs(Row, { className: "gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { size: "sm", variant: "secondary", children: tUpload("uploadingProgress", { progress }) })] })), cropPreviewUrl && !enableAdvancedCrop && (_jsx(ImageCropModal, { isOpen: showCropModal, imageUrl: cropPreviewUrl, onClose: handleCropClose, onSave: handleCropSave })), cropPreviewUrl && enableAdvancedCrop && (_jsx(ImageEditor, { isOpen: showAdvancedEditor, imageUrl: cropPreviewUrl, onClose: handleAdvancedEditorClose, onSave: handleAdvancedEditorSave, aspectRatio: cropAspectRatio }))] }));
 }