@mohasinac/appkit 4.13.0 → 4.14.0

package/dist/features/layout/BottomChrome.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Div } from "../../ui";
+import { BOTTOM_CHROME_SLOT_ID } from "../../ui/components/bottom-chrome-slot";
+/**
+ * BottomChrome — the middle tier of the bottom edge.
+ *
+ * The bottom edge is three tiers: the nav bar is the floor, `BackToTop` is the
+ * ceiling, and *everything else* lives in here. This container is what makes
+ * that middle tier a single thing with a single height:
+ *
+ *   --keyboard-inset-height   useVisualViewportInset  (the on-screen keyboard)
+ *   --bottom-nav-height       BottomNavLayout         (the tab bar)
+ *   --bottom-chrome-height    THIS COMPONENT          (CTA row, pagination, …)
+ *      ↑ BackToTop floats above the sum of all three
+ *
+ * Because it is a flex column, its own `offsetHeight` IS the sum of whatever is
+ * inside it — a bar changing height, revealing on scroll, entering bulk mode,
+ * or being added years from now all just resize this box, and the one
+ * ResizeObserver below picks every case up. Consumers read one variable and
+ * never have to learn about individual bars. Publishing a separate var per bar
+ * was the alternative, and it fails the moment someone adds bar number three
+ * without also editing every consumer's `calc()`.
+ *
+ * Two constraints this container places on its children:
+ *   - A child must hide by COLLAPSING, not by transforming. `translate-y-full`
+ *     leaves layout height behind, so a hidden bar would still be reserved here
+ *     on every page that has no CTA. See BottomActions' grid-rows collapse.
+ *   - No `overflow: hidden` here, ever. BottomActions' bulk-picker and info
+ *     panels are `absolute bottom-full` — deliberately outside the flow (they
+ *     are transient tap-to-open overlays, not persistent bands, so they are
+ *     excluded from the published height) — and clipping would erase them.
+ */
+export function BottomChrome({ children }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const root = document.documentElement;
+        const el = ref.current;
+        if (!el)
+            return;
+        const write = () => root.style.setProperty("--bottom-chrome-height", `${el.offsetHeight}px`);
+        const observer = new ResizeObserver(write);
+        observer.observe(el);
+        write();
+        return () => {
+            observer.disconnect();
+            root.style.setProperty("--bottom-chrome-height", "0px");
+        };
+    }, []);
+    return (_jsxs(Div, { ref: ref, layout: "flex-col", 
+        // `pointer-events-none` so an empty tier never eats clicks meant for the
+        // page underneath; every child re-enables with `pointer-events-auto`.
+        className: "fixed left-0 right-0 bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem))] z-[var(--appkit-z-bottom-nav)] pointer-events-none", children: [_jsx(Div, { id: BOTTOM_CHROME_SLOT_ID, className: "contents" }), children] }));
+}

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

@@ -15,5 +15,11 @@ export interface BottomNavLayoutProps {
  * `--bottom-nav-height: 4rem` to `:root` (sub-`lg` only — the nav itself is
  * `lg:hidden`). Sticky CTAs read `var(--bottom-nav-height, 0px)` to position
  * themselves above the navbar so they don't get clipped.
+ *
+ * Hand mode: the item strip carries `appkit-hand-mirror`, so slot order
+ * reverses in left-hand mode (CSS-only via `[data-hand]` — applies on the
+ * first paint, no flash). This deliberately covers BOTH bottom bars: the
+ * public `BottomNavbar` and `DashboardLayoutClient`'s `dashboard-bottom-navbar`
+ * both render through here, and they must behave identically.
  */
 export declare function BottomNavLayout({ ariaLabel, children, id, className, }: BottomNavLayoutProps): React.JSX.Element;

package/dist/features/layout/BottomNavLayout.js

@@ -13,6 +13,12 @@ import { useVisualViewportInset } from "../../react/hooks/useVisualViewportInset
  * `--bottom-nav-height: 4rem` to `:root` (sub-`lg` only — the nav itself is
  * `lg:hidden`). Sticky CTAs read `var(--bottom-nav-height, 0px)` to position
  * themselves above the navbar so they don't get clipped.
+ *
+ * Hand mode: the item strip carries `appkit-hand-mirror`, so slot order
+ * reverses in left-hand mode (CSS-only via `[data-hand]` — applies on the
+ * first paint, no flash). This deliberately covers BOTH bottom bars: the
+ * public `BottomNavbar` and `DashboardLayoutClient`'s `dashboard-bottom-navbar`
+ * both render through here, and they must behave identically.
  */
 export function BottomNavLayout({ ariaLabel, children, id = "bottom-navbar", className, }) {
     const isKeyboardOpen = useVisualViewportInset();
@@ -37,5 +43,5 @@ export function BottomNavLayout({ ariaLabel, children, id = "bottom-navbar", cla
             root.style.setProperty("--bottom-nav-height", "0px");
         };
     }, [isKeyboardOpen]);
-    return (_jsx(Nav, { id: id, "aria-label": ariaLabel, "aria-hidden": isKeyboardOpen, className: `fixed bottom-0 left-0 right-0 lg:hidden z-[var(--appkit-z-bottom-nav)] bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-t border-[var(--appkit-color-border)] shadow-2xl pb-[env(safe-area-inset-bottom,0px)] transition-transform duration-200 ease-out ${isKeyboardOpen ? "translate-y-full pointer-events-none" : "translate-y-0"}${className ? ` ${className}` : ""}`, children: _jsx(Ul, { className: "flex items-stretch h-16", children: children }) }));
+    return (_jsx(Nav, { id: id, "aria-label": ariaLabel, "aria-hidden": isKeyboardOpen, className: `fixed bottom-0 left-0 right-0 lg:hidden z-[var(--appkit-z-bottom-nav)] bg-[color-mix(in_srgb,var(--appkit-color-bg)_90%,transparent)] backdrop-blur-md border-t border-[var(--appkit-color-border)] shadow-2xl pb-[env(safe-area-inset-bottom,0px)] transition-transform duration-200 ease-out ${isKeyboardOpen ? "translate-y-full pointer-events-none" : "translate-y-0"}${className ? ` ${className}` : ""}`, children: _jsx(Ul, { className: "appkit-hand-mirror flex items-stretch h-16", children: children }) }));
 }

package/dist/features/layout/BottomNavbar.js

@@ -6,7 +6,20 @@ import { BottomNavLayout } from "./BottomNavLayout";
 import { NavItem } from "./NavItem";
 import { useWishlistCount } from "../wishlist/hooks/useWishlistCount";
 import { useCartCount } from "../cart/hooks/useCartCount";
-const CLS_COUNT_BADGE = "absolute -right-2 -top-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--appkit-color-error)] px-[var(--appkit-space-1)] leading-none text-[var(--appkit-color-text-on-primary)]";
+/** Badge counter class for the cart/wishlist slots.
+ *
+ * Horizontal offset comes from `.appkit-hand-badge` + the `--lg` (0.5rem) size
+ * modifier (HandMode.style.css), NOT a `-right-2` utility — the badge hugs the
+ * icon's outer top corner, which is top-left in left-hand mode. Do not re-add
+ * `-right-2`: Tailwind runs with `important: true`, so the utility would beat
+ * the unlayered rule and the badge would silently stop mirroring.
+ *
+ * Colours use the `-solid`/`-on-solid` overlay pair (Root Cause #67), matching
+ * TitleBarLayout's `countBadge`. The previous `bg-[var(--appkit-color-error)]` +
+ * `text-[var(--appkit-color-text-on-primary)]` used the theme-INVERTING ink
+ * token as a fill, which audit-status-color-pairs can't see through arbitrary
+ * -value syntax. */
+const CLS_COUNT_BADGE = "appkit-hand-badge appkit-hand-badge--lg absolute -top-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-solid px-[var(--appkit-space-1)] leading-none text-error-on-solid";
 /**
  * BottomNavbar � mobile bottom navigation bar (5 slots: home, shop, search, cart, profile).
  *
@@ -36,6 +49,6 @@ export function BottomNavbar({ user, userId, homeHref, shopHref, cartHref, wishl
         const visibleItems = navItems.slice(0, cartHref ? 3 : 4);
         return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [visibleItems.map((item) => (_jsx(Li, { className: "flex-1", children: _jsx(NavItem, { href: item.href, label: item.label, icon: item.icon ?? defaultIcon, isActive: pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href + "/")), variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }, item.key))), cartHref && (_jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": cartCount > 0 ? `${labels.cart}, ${cartCount} items` : labels.cart, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), cartCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: cartCount > 9 ? "9+" : cartCount }))] }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) })), _jsx(Li, { className: "flex-1", children: _jsxs("button", { type: "button", onClick: onMoreToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.more, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }), _jsx(Span, { className: labelClassName, children: labels.more })] }) })] }));
     }
-    return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [_jsx(Li, { className: "flex-1 w-1/5", children: _jsx(NavItem, { href: homeHref, label: labels.home, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), isActive: pathname === homeHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", children: _jsx(NavItem, { href: shopHref, label: labels.products, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), isActive: pathname === shopHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", children: _jsxs("button", { type: "button", onClick: onSearchToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.search, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.search })] }) }), _jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": cartCount > 0 ? `${labels.cart}, ${cartCount} items` : labels.cart, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), cartCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: cartCount > 9 ? "9+" : cartCount }))] }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) }), wishlistHref && (_jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: wishlistHref, variant: "none", className: `${slotClassName} ${pathname === wishlistHref ? activeClassName : inactiveClassName}`, "aria-label": wishlistCount > 0 ? `${labels.wishlist}, ${wishlistCount} items` : labels.wishlist, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0z" }) }), wishlistCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: wishlistCount > 9 ? "9+" : wishlistCount }))] }), _jsx(Span, { className: labelClassName, children: labels.wishlist })] }) })), _jsx(Li, { className: "flex-1", children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `${slotClassName} ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": labels.profile, children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata ||
+    return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [_jsx(Li, { className: "flex-1", children: _jsx(NavItem, { href: homeHref, label: labels.home, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), isActive: pathname === homeHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", children: _jsx(NavItem, { href: shopHref, label: labels.products, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), isActive: pathname === shopHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", children: _jsxs("button", { type: "button", onClick: onSearchToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.search, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.search })] }) }), _jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": cartCount > 0 ? `${labels.cart}, ${cartCount} items` : labels.cart, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), cartCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: cartCount > 9 ? "9+" : cartCount }))] }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) }), wishlistHref && (_jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: wishlistHref, variant: "none", className: `${slotClassName} ${pathname === wishlistHref ? activeClassName : inactiveClassName}`, "aria-label": wishlistCount > 0 ? `${labels.wishlist}, ${wishlistCount} items` : labels.wishlist, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0z" }) }), wishlistCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: wishlistCount > 9 ? "9+" : wishlistCount }))] }), _jsx(Span, { className: labelClassName, children: labels.wishlist })] }) })), _jsx(Li, { className: "flex-1", children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `${slotClassName} ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": labels.profile, children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata ||
                                 (user.photoURL ? { url: user.photoURL, position: { x: 50, y: 50 }, zoom: 1 } : null), size: "sm", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && (_jsx(Span, { className: `text-[7px] uppercase leading-none ${getRoleBadgeClass ? getRoleBadgeClass(user.role) : "text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)]"}`, weight: "semibold", children: user.role }))] })) : (_jsx(NavItem, { href: loginHref, label: labels.profile, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), isActive: pathname === loginHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName })) })] }));
 }

package/dist/features/layout/FooterLayout.js

@@ -8,7 +8,17 @@ 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-[var(--appkit-color-bg)] border-t border-[var(--appkit-color-border-subtle)]", children: [showTrustBar && visibleTrustItems.length > 0 && (_jsx(Div, { border: "subtle", className: "border-b", padding: "y-xl", children: _jsx(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: _jsx(Row, { as: "ul", wrap: true, justify: "center", gap: "lg", className: "lg:gap-[var(--appkit-space-10)]", children: visibleTrustItems.map((item, i) => (_jsx(Li, { children: _jsxs(Row, { textSize: "sm", gap: "sm", className: "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: "block", color: "primary", children: item.label }), item.subtitle && (_jsx(Span, { size: "xs", className: "block", color: "muted", weight: "medium", children: item.subtitle }))] })] }) }, item.id ?? String(i)))) }) }) })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px] lg:py-[var(--appkit-space-14)]", padding: "y-2xl", children: [_jsxs(Div, { className: "grid grid-cols-1 lg:grid-cols-5 gap-[var(--appkit-space-10)] lg:gap-[var(--appkit-space-16)]", children: [_jsxs(Stack, { className: "lg:col-span-2", gap: "md", children: [_jsx(Heading, { level: 5, size: "xl", weight: "bold", color: "primary", children: brandName }), _jsx(Text, { className: "leading-relaxed max-w-sm", color: "muted", size: "sm", weight: "medium", 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-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] 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, { padding: "t-xs", children: newsletterSlot }))] }), _jsx(Div, { className: `lg:col-span-3 grid grid-cols-1 gap-[var(--appkit-space-0)] lg:gap-[var(--appkit-space-8)] ${linkGroups.length <= 3 ? "lg:grid-cols-3" :
+    return (_jsxs(BlockFooter, { id: id, 
+        // The footer is the last thing on the page, so it is what the fixed bottom
+        // chrome actually covers — the copyright and bottom-links rows used to sit
+        // under the nav bar and CTA tier, unreadable. <Main> carried a margin for
+        // this, but <Main> is a SIBLING before the footer, so that only ever opened
+        // a gap between the two and never cleared the page's own end.
+        //
+        // Padding here rather than on the scroll container so the footer's own
+        // background continues behind the translucent chrome — otherwise scrolling
+        // to the end shows a band of bare page background under the nav.
+        className: "bg-[var(--appkit-color-bg)] border-t border-[var(--appkit-color-border-subtle)] pb-[calc(var(--bottom-nav-height,4rem)+var(--bottom-chrome-height,0px))]", children: [showTrustBar && visibleTrustItems.length > 0 && (_jsx(Div, { border: "subtle", className: "border-b", padding: "y-xl", children: _jsx(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: _jsx(Row, { as: "ul", wrap: true, justify: "center", gap: "lg", className: "lg:gap-[var(--appkit-space-10)]", children: visibleTrustItems.map((item, i) => (_jsx(Li, { children: _jsxs(Row, { textSize: "sm", gap: "sm", className: "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: "block", color: "primary", children: item.label }), item.subtitle && (_jsx(Span, { size: "xs", className: "block", color: "muted", weight: "medium", children: item.subtitle }))] })] }) }, item.id ?? String(i)))) }) }) })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px] lg:py-[var(--appkit-space-14)]", padding: "y-2xl", children: [_jsxs(Div, { className: "grid grid-cols-1 lg:grid-cols-5 gap-[var(--appkit-space-10)] lg:gap-[var(--appkit-space-16)]", children: [_jsxs(Stack, { className: "lg:col-span-2", gap: "md", children: [_jsx(Heading, { level: 5, size: "xl", weight: "bold", color: "primary", children: brandName }), _jsx(Text, { className: "leading-relaxed max-w-sm", color: "muted", size: "sm", weight: "medium", 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-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] 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, { padding: "t-xs", children: newsletterSlot }))] }), _jsx(Div, { className: `lg:col-span-3 grid grid-cols-1 gap-[var(--appkit-space-0)] lg:gap-[var(--appkit-space-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: "w-full justify-between border-b py-[var(--appkit-space-3)] text-left text-[length:var(--appkit-text-sm)] font-semibold transition-colors border-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text)] hover:text-primary dark:hover:text-secondary 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-[var(--appkit-space-3)]" : "max-h-0"} space-y-2.5`, children: group.links.map((link) => (_jsx(Li, { children: _jsx(Link, { href: link.href, className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) }), _jsxs(Div, { className: "hidden lg:block", children: [_jsx(Text, { className: "tracking-wider mb-3", color: "muted", size: "xs", weight: "bold", transform: "uppercase", 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-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary transition-colors", children: link.label }) }, link.href))) })] })] }, idx))) })] }), _jsxs(Stack, { direction: "sm-row", color: "muted", textSize: "xs", justify: "between", border: "default", className: "mt-10 border-t border-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]", padding: "t-lg", align: "center", gap: "3", children: [_jsx(Text, { size: "xs", color: "muted", weight: "medium", 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-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] hover:text-primary dark:hover:text-secondary transition-colors underline-offset-2 hover:underline", children: link.label }) }, link.href))) }) })), madeInText && (_jsx(Text, { size: "xs", color: "muted", weight: "medium", children: madeInText }))] })] })] }));
 }

package/dist/features/layout/NavbarLayout.js

@@ -51,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 justify-center gap-[var(--appkit-space-0-5)] xl:gap-[var(--appkit-space-1)] w-full", 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, { border: "subtle", id: id, "aria-label": ariaLabel, className: "hidden lg:block bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b", children: _jsxs(Row, { className: "container mx-auto sm:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)] max-w-[1920px] h-10", padding: "x-md", align: "center", children: [_jsxs(Div, { className: `relative flex-1 ${__O.hidden}`, children: [canScrollLeft && (_jsx(NavbarChevron, { direction: "left", onClick: () => scroll("left") })), _jsx(Ul, { ref: scrollRef, className: "flex items-center justify-center gap-[var(--appkit-space-0-5)] lg:gap-[var(--appkit-space-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(NavbarChevron, { direction: "right", onClick: () => scroll("right") }))] }), rightSlot && _jsx(Div, { className: "shrink-0 ml-2", children: rightSlot })] }) }));
+    return (_jsx(Nav, { border: "subtle", id: id, "aria-label": ariaLabel, className: "hidden lg:block bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b", children: _jsxs(Row, { className: "container mx-auto sm:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)] max-w-[1920px] h-10", padding: "x-md", align: "center", reverse: "hand", children: [_jsxs(Div, { className: `relative flex-1 ${__O.hidden}`, children: [canScrollLeft && (_jsx(NavbarChevron, { direction: "left", onClick: () => scroll("left") })), _jsx(Ul, { ref: scrollRef, className: "flex items-center justify-center gap-[var(--appkit-space-0-5)] lg:gap-[var(--appkit-space-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(NavbarChevron, { direction: "right", onClick: () => scroll("right") }))] }), rightSlot && _jsx(Div, { className: "shrink-0", children: rightSlot })] }) }));
 }

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

@@ -64,6 +64,13 @@ export interface TitleBarLayoutProps {
  *  TB1 (h-14, all screens): wordmark (+ mark on mobile) | centred mark (md+) | [secondary actions lg+] | search | deals | theme | hamburger
  *  TB2 (h-10, below lg only): wishlist | cart | profile  — mirrors what TB1 hides below lg
  *
+ * Hand mode: both rows carry `reverse="hand"`, so in left-hand mode the whole
+ * bar mirrors — wordmark to the right edge, action cluster (hamburger
+ * outermost) to the left. Purely CSS via `[data-hand]`, so it lands on the
+ * first paint and this file stays server-safe (no `useHandMode()`, no
+ * `"use client"`). The centred mark and the brand lockup deliberately do not
+ * flip; see their inline notes.
+ *
  * Receives all domain data as props — zero domain imports.
  */
 export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, unreadNotificationCount, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): React.JSX.Element;

package/dist/features/layout/TitleBarLayout.js

@@ -3,8 +3,14 @@ import Link from "next/link";
 import { Avatar, BlockHeader, Button, Div, Row, Section, SiteLogo, SiteMark, Span } from "../../ui";
 /** Shared icon-button class for all action buttons in the title bar. */
 const iconBtn = "flex items-center justify-center w-9 h-9 rounded-lg text-[var(--appkit-color-text-muted)] hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-[var(--appkit-color-surface-elevated)] dark:hover:text-secondary-400 transition-colors";
-/** Badge counter class for wishlist/cart counts. */
-const countBadge = "absolute -top-0.5 -right-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-error-solid text-error-on-solid text-[10px] font-bold leading-none";
+/** Badge counter class for wishlist/cart counts.
+ *
+ * The horizontal offset lives in `.appkit-hand-badge` (HandMode.style.css), NOT
+ * in a `-right-*` utility — the badge hugs the icon's outer top corner, which
+ * is top-left in left-hand mode. Do not re-add `-right-0.5`: Tailwind runs with
+ * `important: true`, so the utility would beat the unlayered rule and the badge
+ * would silently stop mirroring. The vertical `-top-0.5` is hand-neutral and stays. */
+const countBadge = "appkit-hand-badge absolute -top-0.5 flex items-center justify-center w-4 h-4 rounded-full bg-error-solid text-error-on-solid text-[10px] font-bold leading-none";
 /**
  * TitleBarLayout — generic top sticky title-bar shell.
  *
@@ -12,6 +18,13 @@ const countBadge = "absolute -top-0.5 -right-0.5 flex items-center justify-cente
  *  TB1 (h-14, all screens): wordmark (+ mark on mobile) | centred mark (md+) | [secondary actions lg+] | search | deals | theme | hamburger
  *  TB2 (h-10, below lg only): wishlist | cart | profile  — mirrors what TB1 hides below lg
  *
+ * Hand mode: both rows carry `reverse="hand"`, so in left-hand mode the whole
+ * bar mirrors — wordmark to the right edge, action cluster (hamburger
+ * outermost) to the left. Purely CSS via `[data-hand]`, so it lands on the
+ * first paint and this file stays server-safe (no `useHandMode()`, no
+ * `"use client"`). The centred mark and the brand lockup deliberately do not
+ * flip; see their inline notes.
+ *
  * Receives all domain data as props — zero domain imports.
  */
 export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, unreadNotificationCount = 0, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
@@ -30,10 +43,20 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
     const wishlistEl = wishlistHref ? (_jsxs(Link, { href: wishlistHref, "aria-label": `Wishlist${wishlistCount > 0 ? `, ${wishlistCount} items` : ""}`, className: `relative ${iconBtn}`, "data-tour": "nav-wishlist", 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.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0z" }) }), wishlistCount > 0 && (_jsx(Span, { className: countBadge, children: wishlistCount > 9 ? "9+" : wishlistCount }))] })) : null;
     const cartEl = cartHref ? (_jsxs(Link, { href: cartHref, "aria-label": `Cart${cartCount > 0 ? `, ${cartCount} items` : ""}`, className: `relative ${iconBtn}`, "data-tour": "nav-cart", 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: countBadge, children: cartCount > 9 ? "9+" : cartCount }))] })) : null;
     const profileEl = profileHref ? (_jsx(Link, { href: profileHref, "aria-label": user ? `Profile — ${user.displayName ?? user.email}` : "Sign in", className: `relative ${iconBtn}`, "data-tour": "nav-profile", children: _jsx(Avatar, { src: user?.photoURL ?? undefined, name: user?.displayName ?? user?.email ?? undefined, alt: user?.displayName ?? "Profile", size: "sm" }) })) : null;
-    const authButtonsEl = !user && (loginHref || registerHref) ? (_jsxs(Row, { gap: "xs", className: "hidden lg:flex", children: [loginHref && (_jsx(Link, { href: loginHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:text-primary-700 dark:hover:text-secondary-400 transition-colors rounded-lg hover:bg-primary-50 dark:hover:bg-[var(--appkit-color-surface-elevated)]", children: "Sign in" })), registerHref && (_jsx(Link, { href: registerHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-semibold rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors btn-glow shadow-sm", children: "Register" }))] })) : null;
+    const authButtonsEl = !user && (loginHref || registerHref) ? (
+    // Mirrors with TB1 so Register (the primary CTA) keeps the outer, more
+    // reachable edge instead of ending up tucked inside after the flip.
+    _jsxs(Row, { gap: "xs", reverse: "hand", className: "hidden lg:flex", children: [loginHref && (_jsx(Link, { href: loginHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:text-primary-700 dark:hover:text-secondary-400 transition-colors rounded-lg hover:bg-primary-50 dark:hover:bg-[var(--appkit-color-surface-elevated)]", children: "Sign in" })), registerHref && (_jsx(Link, { href: registerHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-semibold rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors btn-glow shadow-sm", children: "Register" }))] })) : null;
     const hasTb2 = !!(notificationsEl || wishlistEl || cartEl || profileEl);
     // ── Render ───────────────────────────────────────────────────────────────────
-    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b border-[var(--appkit-color-border-subtle)] shadow-sm ${className}`, children: [promoStripText && (_jsx(Section, { color: "inverse", tone: "accent-banner", className: "text-[length:var(--appkit-text-xs)] text-center font-medium", padding: "y-2xs", children: promoStripText })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: [_jsxs(Row, { justify: "between", gap: "none", className: "relative h-14", children: [_jsx(Row, { gap: "3", children: _jsxs(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: [_jsx(Div, { className: "flex md:hidden", children: _jsx(SiteMark, { title: brandShortName ?? brandName, size: "sm" }) }), _jsx(SiteLogo, { title: brandName, size: "md" })] }) }), _jsx(Row, { className: "hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2", align: "center", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteMark, { src: siteLogoUrl, title: brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", children: [devSlot, navSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), user
+    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b border-[var(--appkit-color-border-subtle)] shadow-sm ${className}`, children: [promoStripText && (_jsx(Section, { color: "inverse", tone: "accent-banner", className: "text-[length:var(--appkit-text-xs)] text-center font-medium", padding: "y-2xs", children: promoStripText })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: [_jsxs(Row, { justify: "between", gap: "none", reverse: "hand", className: "relative h-14", children: [_jsx(Row, { gap: "3", children: _jsxs(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: [_jsx(Div, { className: "flex md:hidden", children: _jsx(SiteMark, { title: brandShortName ?? brandName, size: "sm" }) }), _jsx(SiteLogo, { title: brandName, size: "md" })] }) }), _jsx(Row, { className: "hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2", align: "center", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteMark, { src: siteLogoUrl, title: brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", reverse: "hand", children: [devSlot, navSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), user
                                         ? profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })
-                                        : authButtonsEl ?? (profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })), searchBtn, promotionsEl, tourBtn, themeBtn, hamburgerBtn] })] }), hasTb2 && (_jsxs(Row, { border: "subtle", as: "nav", "aria-label": "Account actions", justify: "end", gap: "xs", className: "flex lg:hidden h-10 border-t px-[var(--appkit-space-1)]", children: [notificationsEl, wishlistEl, cartEl, profileEl] }))] })] }));
+                                        : authButtonsEl ?? (profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })), searchBtn, promotionsEl, tourBtn, themeBtn, hamburgerBtn] })] }), hasTb2 && (
+                    // `justify="end"` is CORRECT alongside `reverse="hand"` — do not
+                    // "fix" it to "start". `row-reverse` inverts the main axis, so
+                    // main-end IS the left edge: flex-end already packs this row left in
+                    // left-hand mode, in mirrored order (profile leftmost). Adding a raw
+                    // `justify-start` className would also trip audit-inline-styles'
+                    // RAW_JUSTIFY_ON_ROW.
+                    _jsxs(Row, { border: "subtle", as: "nav", "aria-label": "Account actions", justify: "end", gap: "xs", reverse: "hand", className: "flex lg:hidden h-10 border-t px-[var(--appkit-space-1)]", children: [notificationsEl, wishlistEl, cartEl, profileEl] }))] })] }));
 }

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

@@ -31,6 +31,8 @@ export type { BottomAction, BottomBulkConfig, BottomActionsState, BottomActionsD
 export { useBottomActions } from "./hooks/useBottomActions";
 export type { UseBottomActionsOptions } from "./hooks/useBottomActions";
 export { default as BottomActions } from "./BottomActions";
+export { BottomChrome } from "./BottomChrome";
+export type { BottomChromeProps } from "./BottomChrome";
 export { BottomNavbar } from "./BottomNavbar";
 export type { BottomNavbarProps } from "./BottomNavbar";
 export { MainNavbar } from "./MainNavbar";

package/dist/features/layout/index.js

@@ -17,6 +17,7 @@ export { AppLayoutShell } from "./AppLayoutShell";
 export { BottomActionsProvider, useBottomActionsContext, } from "./BottomActionsContext";
 export { useBottomActions } from "./hooks/useBottomActions";
 export { default as BottomActions } from "./BottomActions";
+export { BottomChrome } from "./BottomChrome";
 export { BottomNavbar } from "./BottomNavbar";
 export { MainNavbar } from "./MainNavbar";
 export { TitleBar } from "./TitleBar";

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

@@ -7,6 +7,8 @@
 export interface LotterySlot {
     slotNumber: number;
     name: string;
+    /** Prize photo. Public — rendered in the prize collage on the lottery detail page. */
+    image?: string;
     price: number;
     weight: number;
     isBooked: boolean;
@@ -18,6 +20,7 @@ export interface LotterySlot {
 export interface ClientLotterySlot {
     slotNumber: number;
     name: string;
+    image?: string;
     isBooked: boolean;
     bookedByUserLotteryNumber?: number;
     bookedByDisplayName?: string;

package/dist/features/media/MediaPickerModal.js

@@ -126,7 +126,11 @@ export function MediaPickerModal({ isOpen, onClose, onSelect, accept = "image/*"
                                     const isImage = (f.contentType ?? "").startsWith("image/");
                                     const isSelected = selectedExisting === f.downloadURL;
                                     return (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setSelectedExisting(f.downloadURL), className: [
-                                            "rounded-lg border overflow-hidden text-left transition p-[var(--appkit-space-0)] h-auto",
+                                            // `flex-col items-stretch` — without it the thumbnail and the
+                                            // filename lay out as row siblings inside `.appkit-button__content`
+                                            // and the square tile shrinks to a fraction of its width
+                                            // (Root Cause #68).
+                                            "flex-col items-stretch rounded-lg border overflow-hidden text-left transition p-[var(--appkit-space-0)] h-auto",
                                             isSelected
                                                 ? "border-primary-500 ring-2 ring-primary-300"
                                                 : "border-[var(--appkit-color-border)]",

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

@@ -116,8 +116,8 @@ export declare const conversationFirestoreSchema: z.ZodObject<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
     storeId: string;
-    storeName: string;
     buyerId: string;
+    storeName: string;
     lastMessageAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
@@ -149,8 +149,8 @@ export declare const conversationFirestoreSchema: z.ZodObject<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
     storeId: string;
-    storeName: string;
     buyerId: string;
+    storeName: string;
     lastMessageAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { type OrderScope } from "../constants/order-scope";
+export declare function OrderScopeTabs({ className }: {
+    className?: string;
+}): React.JSX.Element;
+export interface OrderScopeState {
+    scope: OrderScope;
+    /** Spread into `ListingViewConfig.buildExtraParams`'s return value. */
+    extraParams: {
+        orderScope: OrderScope;
+    };
+    /** Assign to `ListingViewConfig.renderAboveContent`. */
+    renderAboveContent: () => React.ReactNode;
+}
+/**
+ * Same seam as `useAvailabilityScope`: `buildExtraParams`, not `filterKeys`.
+ * Registering the scope as a filter key would inflate the filter-drawer badge
+ * for a tab selection and let the drawer's Clear button silently reset it.
+ */
+export declare function useOrderScope(): OrderScopeState;

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

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs, TabsList, TabsTrigger } from "../../../ui";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { TABLE_KEYS } from "../../../constants/table-keys";
+import { ORDER_SCOPE_TABS, ORDER_SCOPE_VALUES, isOrderScope, } from "../constants/order-scope";
+export function OrderScopeTabs({ className }) {
+    const table = useUrlTable();
+    const raw = table.get(TABLE_KEYS.ORDER_SCOPE);
+    const active = isOrderScope(raw) ? raw : ORDER_SCOPE_VALUES.ACTIVE;
+    return (_jsx(Tabs, { value: active, 
+        // A single `set` — `useUrlTable.set` already resets the page, and a
+        // follow-up `setPage` would read stale searchParams and overwrite this
+        // update (Root Cause #13).
+        onChange: (next) => table.set(TABLE_KEYS.ORDER_SCOPE, next), className: className, children: _jsx(TabsList, { children: ORDER_SCOPE_TABS.map((tab) => (_jsx(TabsTrigger, { value: tab.id, children: tab.label }, tab.id))) }) }));
+}
+/**
+ * Same seam as `useAvailabilityScope`: `buildExtraParams`, not `filterKeys`.
+ * Registering the scope as a filter key would inflate the filter-drawer badge
+ * for a tab selection and let the drawer's Clear button silently reset it.
+ */
+export function useOrderScope() {
+    const table = useUrlTable();
+    const raw = table.get(TABLE_KEYS.ORDER_SCOPE);
+    const scope = isOrderScope(raw) ? raw : ORDER_SCOPE_VALUES.ACTIVE;
+    return {
+        scope,
+        extraParams: { orderScope: scope },
+        renderAboveContent: () => _jsx(OrderScopeTabs, {}),
+    };
+}

package/dist/features/orders/constants/order-scope.d.ts

@@ -0,0 +1,48 @@
+import type { OrderStatus } from "../types/index";
+import { OrderStatusValues } from "../schemas/firestore";
+export declare const ORDER_SCOPE_VALUES: {
+    /** Still moving — someone (buyer, seller or admin) has something to do. */
+    readonly ACTIVE: "active";
+    /** Terminal — delivered, cancelled, refunded or returned. */
+    readonly CLOSED: "closed";
+    /** No lifecycle predicate. */
+    readonly ALL: "all";
+};
+export type OrderScope = (typeof ORDER_SCOPE_VALUES)[keyof typeof ORDER_SCOPE_VALUES];
+export declare function isOrderScope(value: string): value is OrderScope;
+/**
+ * The statuses a scope covers, or `undefined` for "all" (no filter).
+ *
+ * Emitted as a pipe-joined OR-group, which the Firebase Sieve adapter upgrades
+ * to a single Firestore "in" query — no fan-out, and it reuses the existing
+ * (status, createdAt) composite index.
+ */
+export declare function statusesForScope(scope: OrderScope): OrderStatus[] | undefined;
+/**
+ * Tab definitions for the scope bar.
+ *
+ * NOT registered in `audit-filter-tab-enums.mjs`'s REGISTRY, and deliberately
+ * so — the same reasoning its header gives for `ADMIN_ORDER_PAYMENT_REVIEW_TABS`
+ * and `ADMIN_CART_OWNERSHIP_TABS`. These ids are a DERIVED grouping, not values
+ * any Firestore field holds, so there is no backing enum to compare them
+ * against. `STATUS_SCOPE` above is what keeps them honest instead, at compile
+ * time.
+ */
+export declare const ORDER_SCOPE_TABS: readonly {
+    id: OrderScope;
+    label: string;
+}[];
+/**
+ * Fold the lifecycle scope into a caller-supplied Sieve filter string.
+ *
+ * Shared by all three order list routes rather than written three times —
+ * partly for the usual reason, but mostly because of the guard: if `filters`
+ * already carries a `status==` clause, the scope must NOT add a second one.
+ * Two equality clauses on one field are AND-ed by Sieve, and no document can
+ * satisfy both, so the list would silently return zero rows (the failure mode
+ * documented in Root Cause #59). An explicit status wins; the scope only fills
+ * the gap when the caller named none.
+ */
+export declare function mergeOrderScopeFilter(filters: string | undefined | null, scopeParam: string | undefined | null): string | undefined;
+/** Re-exported for callers that need the raw values alongside the scope. */
+export { OrderStatusValues };

package/dist/features/orders/constants/order-scope.js

@@ -0,0 +1,111 @@
+/*
+ * WHY: Filtering orders meant picking one of seven individual statuses, on
+ *      every order dashboard. The overwhelmingly common questions — "what still
+ *      needs someone to act on it" and "what is finished" — had no answer at
+ *      all, and the per-view status arrays had drifted from the real union
+ *      anyway (`SELLER_ORDER_STATUS_TABS` omitted `confirmed`, a status the
+ *      seller's own Update-Status dropdown could SET, so a seller could put an
+ *      order into a state they could then never filter for).
+ *
+ * WHAT: A lifecycle scope — Active / Closed / All — that groups the nine real
+ *       statuses. The buyer, seller and admin order lists all render the same
+ *       three tabs, and the detailed status chips remain underneath as the
+ *       drill-down.
+ *
+ * EXPORTS: ORDER_SCOPE_VALUES, OrderScope, isOrderScope, statusesForScope,
+ *          ORDER_SCOPE_TABS
+ *
+ * @tag domain:orders
+ * @tag layer:constants
+ * @tag pattern:none
+ * @tag access:isomorphic
+ * @tag consumers:AdminOrdersView,SellerOrdersView,UserOrdersView,api/user/orders
+ * @tag sideEffects:none
+ */
+import { OrderStatusValues } from "../schemas/firestore";
+export const ORDER_SCOPE_VALUES = {
+    /** Still moving — someone (buyer, seller or admin) has something to do. */
+    ACTIVE: "active",
+    /** Terminal — delivered, cancelled, refunded or returned. */
+    CLOSED: "closed",
+    /** No lifecycle predicate. */
+    ALL: "all",
+};
+export function isOrderScope(value) {
+    return Object.values(ORDER_SCOPE_VALUES).includes(value);
+}
+/**
+ * Every status belongs to exactly one scope.
+ *
+ * `Record<OrderStatus, …>` on purpose: adding a tenth status is then a COMPILE
+ * error rather than a status that silently belongs to neither tab and
+ * disappears from both (Root Cause #61).
+ */
+const STATUS_SCOPE = {
+    pending: "active",
+    confirmed: "active",
+    processing: "active",
+    shipped: "active",
+    // Deliberately ACTIVE: a return request is the seller's next action item,
+    // not a finished order. Grouping it under Closed would bury exactly the
+    // rows a seller most needs to see.
+    return_requested: "active",
+    delivered: "closed",
+    cancelled: "closed",
+    refunded: "closed",
+    returned: "closed",
+};
+/**
+ * The statuses a scope covers, or `undefined` for "all" (no filter).
+ *
+ * Emitted as a pipe-joined OR-group, which the Firebase Sieve adapter upgrades
+ * to a single Firestore "in" query — no fan-out, and it reuses the existing
+ * (status, createdAt) composite index.
+ */
+export function statusesForScope(scope) {
+    if (scope === ORDER_SCOPE_VALUES.ALL)
+        return undefined;
+    return Object.keys(STATUS_SCOPE).filter((status) => STATUS_SCOPE[status] === scope);
+}
+/**
+ * Tab definitions for the scope bar.
+ *
+ * NOT registered in `audit-filter-tab-enums.mjs`'s REGISTRY, and deliberately
+ * so — the same reasoning its header gives for `ADMIN_ORDER_PAYMENT_REVIEW_TABS`
+ * and `ADMIN_CART_OWNERSHIP_TABS`. These ids are a DERIVED grouping, not values
+ * any Firestore field holds, so there is no backing enum to compare them
+ * against. `STATUS_SCOPE` above is what keeps them honest instead, at compile
+ * time.
+ */
+export const ORDER_SCOPE_TABS = [
+    { id: ORDER_SCOPE_VALUES.ACTIVE, label: "Active" },
+    { id: ORDER_SCOPE_VALUES.CLOSED, label: "Closed" },
+    { id: ORDER_SCOPE_VALUES.ALL, label: "All" },
+];
+/**
+ * Fold the lifecycle scope into a caller-supplied Sieve filter string.
+ *
+ * Shared by all three order list routes rather than written three times —
+ * partly for the usual reason, but mostly because of the guard: if `filters`
+ * already carries a `status==` clause, the scope must NOT add a second one.
+ * Two equality clauses on one field are AND-ed by Sieve, and no document can
+ * satisfy both, so the list would silently return zero rows (the failure mode
+ * documented in Root Cause #59). An explicit status wins; the scope only fills
+ * the gap when the caller named none.
+ */
+export function mergeOrderScopeFilter(filters, scopeParam) {
+    const existing = (filters ?? "").trim();
+    if (!scopeParam || !isOrderScope(scopeParam))
+        return existing || undefined;
+    if (/(^|,)\s*status\s*==/.test(existing))
+        return existing || undefined;
+    const statuses = statusesForScope(scopeParam);
+    if (!statuses?.length)
+        return existing || undefined;
+    // A pipe-joined OR-group on ONE field — the Firebase Sieve adapter upgrades
+    // it to a single Firestore "in" query rather than several.
+    const clause = `status==${statuses.join("|")}`;
+    return existing ? `${existing},${clause}` : clause;
+}
+/** Re-exported for callers that need the raw values alongside the scope. */
+export { OrderStatusValues };