@mohasinac/appkit 4.52.5 → 4.53.0

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

@@ -11,6 +11,13 @@ export declare const ALL_EVENT_TYPES: EventType[];
  */
 export declare const EVENT_TYPE_LABELS: Record<EventType, string>;
 export type RaffleType = "top_n_scorers" | "top_n_participants" | "open_raffle" | "spin_wheel";
+/**
+ * A spin prize as STORED on the event document. `weight` IS the odds and
+ * `couponId` is an internal document id — neither may reach a browser.
+ *
+ * Authored by the admin editor, read by `assignSpinPrize`. For anything that
+ * renders, use `DisplaySpinPrize` below.
+ */
 export interface SpinPrize {
     id: string;
     label: string;
@@ -18,6 +25,27 @@ export interface SpinPrize {
     weight: number;
     isActive: boolean;
 }
+/**
+ * A spin prize as a VIEW may see it: what it is, not what it is worth.
+ *
+ * 🛑 This exists because `SpinWheelView.prizes` was typed `SpinPrize[]`, which
+ * made `weight` and `couponId` REQUIRED of every caller — so handing the public
+ * wheel the full stored prize, odds included, was the only way to satisfy the
+ * compiler. The participate page duly cast the stored array straight into a
+ * `"use client"` prop and published the odds of every wheel (Root Cause #70).
+ *
+ * A rendering surface that demands the secret will be given the secret. The
+ * structural subset is the fix: `SpinPrize` is assignable to this, so the admin
+ * editor keeps passing stored prizes, while a client payload narrowed by
+ * `toClientSpinPrize` now satisfies it too — and re-adding `weight` to a
+ * client-bound type becomes a deliberate act rather than the path of least
+ * resistance.
+ */
+export interface DisplaySpinPrize {
+    id: string;
+    label: string;
+    isActive?: boolean;
+}
 export type EventStatus = "draft" | "active" | "paused" | "ended" | "cancelled";
 export declare const ALL_EVENT_STATUSES: EventStatus[];
 /** Dashboard display labels — see `EVENT_TYPE_LABELS`. */
@@ -172,6 +200,15 @@ export interface SpinResultEntry {
     spinPrizeId?: string;
     spinPrizeTitle?: string;
     spinWonAt?: string;
+    /**
+     * The coupon code the spin awarded, for the caller's OWN results only.
+     *
+     * 🛑 `getEventSpinResults` — the PUBLIC masked feed of everyone's recent
+     * spins — must never populate this. A coupon code is a bearer token: anyone
+     * who can read it can redeem it. Only `getUserSpinResultsForEvent`, which
+     * takes a `userId` the server supplies from a verified session, sets it.
+     */
+    spinPrizeCouponCode?: string;
 }
 export interface EventListResponse {
     items: EventItem[];

package/dist/features/faq/repository/faqs.repository.js

@@ -20,7 +20,7 @@ export class FAQsRepository {
         const result = await this.repo.findAll({
             filters: `isActive==true,category==${category}`,
             sort: "order",
-            perPage: 100,
+            pageSize: 100,
         });
         return result.data;
     }

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

@@ -140,18 +140,21 @@ export declare const faqListParamsSchema: z.ZodObject<{
     homepage: z.ZodOptional<z.ZodBoolean>;
     q: z.ZodOptional<z.ZodString>;
     page: z.ZodOptional<z.ZodNumber>;
+    pageSize: z.ZodOptional<z.ZodNumber>;
     perPage: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
     page?: number | undefined;
     q?: string | undefined;
-    perPage?: number | undefined;
+    pageSize?: number | undefined;
     category?: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | undefined;
+    perPage?: number | undefined;
     homepage?: boolean | undefined;
 }, {
     page?: number | undefined;
     q?: string | undefined;
-    perPage?: number | undefined;
+    pageSize?: number | undefined;
     category?: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | undefined;
+    perPage?: number | undefined;
     homepage?: boolean | undefined;
 }>;
 export * from "./firestore";

package/dist/features/faq/schemas/index.js

@@ -57,6 +57,12 @@ export const faqListParamsSchema = z.object({
     homepage: z.coerce.boolean().optional(),
     q: z.string().optional(),
     page: z.coerce.number().optional(),
+    pageSize: z.coerce.number().optional(),
+    /*
+     * Accepted, never emitted — a link built before the `perPage` → `pageSize`
+     * rename. Same deliberate back-compat as `blogListParamsSchema`: this is a
+     * PUBLIC query parameter, so dropping it would 400 somebody's bookmark.
+     */
     perPage: z.coerce.number().optional(),
 });
 export * from "./firestore.js";

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

@@ -54,7 +54,6 @@ export interface FAQListParams {
     tags?: string[];
     showOnHomepage?: boolean;
     page?: number;
-    perPage?: number;
     pageSize?: number;
     sorts?: string;
 }

package/dist/features/grouped/components/GroupedListingEditorView.js

@@ -38,7 +38,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation.js";
-import { Stack, Text, useToast } from "../../../ui/index.js";
+import { EmptyState, Stack, Text, useToast } from "../../../ui/index.js";
 import { FieldSelect, FormShellContext, FormErrorSummary, applyZodIssues, useFormShellState, } from "../../../ui/forms/index.js";
 import { SectionForm, useSectionFormNav } from "../../shell/index.js";
 import { buildSectionsFromSchema } from "../../shell/build-sections.js";
@@ -134,7 +134,6 @@ export function GroupedListingEditorView({ scope, groupId, fixedStoreId, onSaved
     });
     React.useEffect(() => {
         validate(values);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [values, validate]);
     const handleSubmit = async () => {
         const parsed = groupedListingFormSchema.safeParse(values);
@@ -183,6 +182,22 @@ export function GroupedListingEditorView({ scope, groupId, fixedStoreId, onSaved
     if (isEdit && existing.isLoading) {
         return _jsx(Text, { color: "muted", children: "Loading\u2026" });
     }
+    /*
+     * 🛑 LOADING and MISSING are different states, and collapsing them is the
+     * defect `audit-admin-detail-notfound` exists for.
+     *
+     * Without this branch, an invented `groupId` fell through to the form below
+     * with every field at its empty default — a complete, saveable editor for a
+     * record that does not exist. `/admin/grouped-listings/zzzznope/edit` looked
+     * ready to Save, and the admin PATCH it would call is the one that used to
+     * silently drop every key but `productIds` (see this file's page header).
+     *
+     * Only reached once the query has SETTLED, so a slow fetch still shows
+     * "Loading…" rather than flashing "not found" at a record that is on its way.
+     */
+    if (isEdit && !existing.isLoading && !existing.data) {
+        return (_jsx(EmptyState, { title: "Grouped listing not found", description: "This group may have been deleted, or the link may be wrong." }));
+    }
     return (_jsxs(Stack, { gap: "md", children: [needsStorePicker ? (_jsx(FieldSelect, { name: "storeId", label: "Store", required: true, value: storeId, onChange: setStoreId, options: [
                     { value: "", label: "Select a store…" },
                     ...(stores.data ?? []).map((s) => ({

package/dist/features/homepage/api/carousel/[id]/route.js

@@ -88,7 +88,7 @@ export const carouselItemPATCH = createRouteHandler({
         if (patch.active === true && !slide.active) {
             const active = await repo.findAll({
                 filters: "active==true",
-                perPage: MAX_ACTIVE_SLIDES + 1,
+                pageSize: MAX_ACTIVE_SLIDES + 1,
             });
             if (active.data.length >= MAX_ACTIVE_SLIDES) {
                 return NextResponse.json({

package/dist/features/homepage/api/carousel/route.js

@@ -59,7 +59,7 @@ export async function GET(request) {
             const result = await repo.findAll({
                 sort: "order",
                 order: "asc",
-                perPage: 100,
+                pageSize: 100,
             });
             slides = result.data;
         }
@@ -68,7 +68,7 @@ export async function GET(request) {
                 filters: "active==true",
                 sort: "order",
                 order: "asc",
-                perPage: MAX_ACTIVE_SLIDES,
+                pageSize: MAX_ACTIVE_SLIDES,
             });
             slides = result.data.slice(0, MAX_ACTIVE_SLIDES);
         }
@@ -129,7 +129,7 @@ export const carouselPOST = createRouteHandler({
         // Guard: max 5 active slides
         const active = await repo.findAll({
             filters: "active==true",
-            perPage: MAX_ACTIVE_SLIDES + 1,
+            pageSize: MAX_ACTIVE_SLIDES + 1,
         });
         const incoming = body;
         if (incoming.active !== false && active.data.length >= MAX_ACTIVE_SLIDES) {
@@ -141,7 +141,7 @@ export const carouselPOST = createRouteHandler({
         const existing = await repo.findAll({
             sort: "order",
             order: "desc",
-            perPage: 1,
+            pageSize: 1,
         });
         const maxOrder = existing.data[0]?.order ?? -1;
         const now = new Date().toISOString();

package/dist/features/homepage/api/route.js

@@ -61,7 +61,7 @@ export async function GET(request) {
             filters: filterParts.join(",") || undefined,
             sort: "order",
             order: "asc",
-            perPage: 50,
+            pageSize: 50,
         });
         const sections = result.data.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
         const res = NextResponse.json({ success: true, data: sections });
@@ -124,7 +124,7 @@ export const POST = createRouteHandler({
         const existing = await repo.findAll({
             sort: "order",
             order: "desc",
-            perPage: 1,
+            pageSize: 1,
         });
         const maxOrder = existing.data[0]?.order ?? -1;
         const now = new Date().toISOString();

package/dist/features/homepage/api/sections/route.js

@@ -33,7 +33,7 @@ export async function GET(request) {
             filters,
             sort,
             page,
-            perPage: pageSize,
+            pageSize: pageSize,
         });
         const totalPages = Math.max(1, Math.ceil(result.total / pageSize));
         return NextResponse.json({

package/dist/features/homepage/components/AnnouncementBar.d.ts

@@ -11,13 +11,5 @@ export interface AnnouncementBarProps {
     className?: string;
     /** Called when the user dismisses — consumer wires this to a server action to persist. */
     onDismiss?: (hash: string) => void;
-    /**
-     * Renders as a translucent, backdrop-blurred strip pinned to the top edge
-     * of the nearest positioned ancestor, instead of the default full-bleed
-     * in-flow bar. Used on the homepage to overlay the banner over the first
-     * section (e.g. the Welcome hero) rather than pushing it down with extra
-     * vertical space.
-     */
-    overlay?: boolean;
 }
-export declare function AnnouncementBar({ message, link, className, onDismiss, overlay }: AnnouncementBarProps): React.JSX.Element | null;
+export declare function AnnouncementBar({ message, link, className, onDismiss }: AnnouncementBarProps): React.JSX.Element | null;

package/dist/features/homepage/components/AnnouncementBar.js

@@ -38,7 +38,7 @@ function saveLocalDismissal(message) {
         void normalizeError(_err); /* quota exceeded — ignore */
     }
 }
-export function AnnouncementBar({ message, link, className = "", onDismiss, overlay = false }) {
+export function AnnouncementBar({ message, link, className = "", onDismiss }) {
     const { user } = useAuth();
     const bannerHash = hashBannerMessage(message);
     const userAlreadyDismissed = !!user?.dismissedBannerHash && user.dismissedBannerHash === bannerHash;
@@ -56,32 +56,26 @@ export function AnnouncementBar({ message, link, className = "", onDismiss, over
     if (dismissed)
         return null;
     /*
-     * 🛑 THE OVERLAY IS md AND UP ONLY — IT PAINTED OVER THE HERO HEADING ON
-     * EVERY PHONE WIDTH.
+     * 🛑 THE `overlay` PROP IS GONE — DO NOT REINTRODUCE IT.
      *
-     * `absolute` reserves no space, which is the whole point of the overlay: the
-     * hero's own top padding is sized to sit a ONE-LINE banner over it. A real
-     * announcement wraps on a narrow screen, grows downward, and there is
-     * nothing to stop it.
-     *
-     * Measured on production against the live announcement, against the <h1>:
+     * It rendered this bar `absolute inset-x-0 top-0` over the homepage's first
+     * section, which reserves no space by design. A banner that reserves no space
+     * paints on whatever is beneath it the moment it is taller than the padding
+     * someone sized for it. Measured on production against the hero <h1>:
      *
      *   320px → 30px overlap      768px → 10px clear
      *   390px → 10px overlap     1280px → 10px clear
      *   430px → 10px overlap
      *
-     * So it was every phone width and no tablet or desktop width — which is why
-     * it survived: the breakpoints people check it at are the ones where the
-     * message still fits on one line.
+     * That was patched once by making the overlay `md:` and up, which fixed the
+     * phone widths and left the mechanism in place — a one-line message at a
+     * width nobody checks is one long announcement away from the same bug.
      *
-     * Below `md` it is an ordinary in-flow bar that pushes the hero down, with a
-     * SOLID background (the translucent + blur treatment only reads as
-     * deliberate when there is artwork behind it). From `md` up, the designed
-     * overlay is unchanged.
+     * The bar now renders in normal flow, portalled above the sticky header via
+     * `TopBannerPortal`. It pushes the page down by exactly its own height at
+     * every width, so there is nothing to overlap and no breakpoint to tune.
      */
-    const positionCls = overlay
-        ? "relative md:absolute inset-x-0 top-0 z-20 bg-primary-700 md:bg-primary-700/85 md:backdrop-blur-sm"
-        : "relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-primary-700";
+    const positionCls = "relative w-full bg-primary-700";
     return (_jsx(Div, { className: `${positionCls} transition-opacity duration-200 ${mounted ? "opacity-100" : "opacity-0"} ${className}`, role: "banner", children: _jsx(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: _jsxs(Row, { textWeight: "medium", textSize: "sm", className: "relative text-left text-white", padding: "y-xs", align: "center", justify: "start", children: [link ? (_jsx(TextLink, { href: link, className: "text-white underline", children: message })) : (_jsx(Span, { children: message })), _jsx(IconButton, { type: "button", onClick: () => {
                             saveLocalDismissal(message);
                             onDismiss?.(bannerHash);

package/dist/features/homepage/components/MarketplaceHomepageView.js

@@ -2,6 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import { Div, Main } from "../../../ui/index.js";
+// Deep import, not the `ui` barrel and not `@mohasinac/appkit/client`: this is a
+// Server Component, so a runtime value from the client entry would arrive as a
+// client-reference proxy (Root Cause #76). Rendering it as JSX is the supported
+// boundary; importing it from its defining module is Root Cause #18.
+import { TopBannerPortal } from "../../../ui/components/TopBannerPortal.js";
 import { carouselRepository } from "../../../repositories/index.js";
 // Both are React.cache wrappers around a single repository call, shared with
 // other readers in the same request tree (the locale layout for settings,
@@ -185,5 +190,5 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
             : undefined,
     };
     const carouselSlides = toCarouselSlides(slides);
-    return (_jsx(Main, { children: _jsxs(Div, { className: "relative", children: [showAnnouncement ? (_jsx(AnnouncementBar, { overlay: true, message: announcementMessage, link: siteSettings?.announcementBar?.link, onDismiss: onBannerDismiss })) : null, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems, carouselSlides, liveStats, sectionData, brand))] }) }));
+    return (_jsx(Main, { children: _jsxs(Div, { className: "relative", children: [showAnnouncement ? (_jsx(TopBannerPortal, { children: _jsx(AnnouncementBar, { message: announcementMessage, link: siteSettings?.announcementBar?.link, onDismiss: onBannerDismiss }) })) : null, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems, carouselSlides, liveStats, sectionData, brand))] }) }));
 }

package/dist/features/homepage/components/index.d.ts

@@ -50,8 +50,6 @@ export { WhatsAppCommunitySection } from "./WhatsAppCommunitySection";
 export { HomepageSkeleton } from "./HomepageSkeleton";
 export type { FeaturedResultItem, FeaturedResultsSectionProps, } from "./FeaturedResultsSection";
 export { FeaturedResultsSection } from "./FeaturedResultsSection";
-export type { HowItWorksInfoStep, HowItWorksInfoDetail, HowItWorksInfoViewProps, } from "./HowItWorksInfoView";
-export { HowItWorksInfoView } from "./HowItWorksInfoView";
 export type { AnnouncementBarProps } from "./AnnouncementBar";
 export { AnnouncementBar, hashBannerMessage } from "./AnnouncementBar";
 export type { ShopByCategorySectionProps } from "./ShopByCategorySection";

package/dist/features/homepage/components/index.js

@@ -25,7 +25,6 @@ export { TrustIndicatorsSection } from "./TrustIndicatorsSection.js";
 export { WhatsAppCommunitySection } from "./WhatsAppCommunitySection.js";
 export { HomepageSkeleton } from "./HomepageSkeleton.js";
 export { FeaturedResultsSection } from "./FeaturedResultsSection.js";
-export { HowItWorksInfoView } from "./HowItWorksInfoView.js";
 export { AnnouncementBar, hashBannerMessage } from "./AnnouncementBar.js";
 export { ShopByCategorySection } from "./ShopByCategorySection.js";
 export { FeaturedProductsSection } from "./FeaturedProductsSection.js";

package/dist/features/homepage/repository/homepage.repository.js

@@ -6,7 +6,7 @@ export class HomepageSectionsRepository {
         return this.repo.findAll({
             filters: "isVisible==true",
             sort: "order",
-            perPage: 50,
+            pageSize: 50,
             ...query,
         });
     }

package/dist/features/homepage/schemas/firestore.d.ts

@@ -651,6 +651,12 @@ export interface EventRafflesSectionConfig {
     title?: string;
     subtitle?: string;
     maxItems?: number;
+    /**
+     * Which prize-event types the strip spans. The two concrete values are
+     * `EventType` members, matched against the `type` field — see
+     * `EventRafflesSection` for why `hasRaffle` was the wrong field and what it
+     * silently did instead.
+     */
     raffleType?: "raffle" | "spin_wheel" | "all";
     showEntryCount?: boolean;
     showCountdown?: boolean;

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

@@ -184,15 +184,15 @@ export declare const carouselCardSchema: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         title?: string | undefined;
         description?: string | undefined;
-        textAlign?: "center" | "left" | "right" | undefined;
         textColor?: string | undefined;
+        textAlign?: "center" | "left" | "right" | undefined;
         subtitle?: string | undefined;
         eyebrow?: string | undefined;
     }, {
         title?: string | undefined;
         description?: string | undefined;
-        textAlign?: "center" | "left" | "right" | undefined;
         textColor?: string | undefined;
+        textAlign?: "center" | "left" | "right" | undefined;
         subtitle?: string | undefined;
         eyebrow?: string | undefined;
     }>>;
@@ -251,8 +251,8 @@ export declare const carouselCardSchema: z.ZodObject<{
     content?: {
         title?: string | undefined;
         description?: string | undefined;
-        textAlign?: "center" | "left" | "right" | undefined;
         textColor?: string | undefined;
+        textAlign?: "center" | "left" | "right" | undefined;
         subtitle?: string | undefined;
         eyebrow?: string | undefined;
     } | undefined;
@@ -292,8 +292,8 @@ export declare const carouselCardSchema: z.ZodObject<{
     content?: {
         title?: string | undefined;
         description?: string | undefined;
-        textAlign?: "center" | "left" | "right" | undefined;
         textColor?: string | undefined;
+        textAlign?: "center" | "left" | "right" | undefined;
         subtitle?: string | undefined;
         eyebrow?: string | undefined;
     } | undefined;
@@ -524,15 +524,15 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
         }, "strip", z.ZodTypeAny, {
             title?: string | undefined;
             description?: string | undefined;
-            textAlign?: "center" | "left" | "right" | undefined;
             textColor?: string | undefined;
+            textAlign?: "center" | "left" | "right" | undefined;
             subtitle?: string | undefined;
             eyebrow?: string | undefined;
         }, {
             title?: string | undefined;
             description?: string | undefined;
-            textAlign?: "center" | "left" | "right" | undefined;
             textColor?: string | undefined;
+            textAlign?: "center" | "left" | "right" | undefined;
             subtitle?: string | undefined;
             eyebrow?: string | undefined;
         }>>;
@@ -591,8 +591,8 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
         content?: {
             title?: string | undefined;
             description?: string | undefined;
-            textAlign?: "center" | "left" | "right" | undefined;
             textColor?: string | undefined;
+            textAlign?: "center" | "left" | "right" | undefined;
             subtitle?: string | undefined;
             eyebrow?: string | undefined;
         } | undefined;
@@ -632,8 +632,8 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
         content?: {
             title?: string | undefined;
             description?: string | undefined;
-            textAlign?: "center" | "left" | "right" | undefined;
             textColor?: string | undefined;
+            textAlign?: "center" | "left" | "right" | undefined;
             subtitle?: string | undefined;
             eyebrow?: string | undefined;
         } | undefined;
@@ -771,8 +771,8 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
         content?: {
             title?: string | undefined;
             description?: string | undefined;
-            textAlign?: "center" | "left" | "right" | undefined;
             textColor?: string | undefined;
+            textAlign?: "center" | "left" | "right" | undefined;
             subtitle?: string | undefined;
             eyebrow?: string | undefined;
         } | undefined;
@@ -880,8 +880,8 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
         content?: {
             title?: string | undefined;
             description?: string | undefined;
-            textAlign?: "center" | "left" | "right" | undefined;
             textColor?: string | undefined;
+            textAlign?: "center" | "left" | "right" | undefined;
             subtitle?: string | undefined;
             eyebrow?: string | undefined;
         } | undefined;

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

@@ -8,6 +8,17 @@ export interface AppLayoutShellSidebarLink {
     label: string;
     /** Optional icon rendered before the label (emoji string or ReactNode). */
     icon?: React.ReactNode;
+    /**
+     * Sub-links, rendered indented beneath this one.
+     *
+     * 🛑 This mirrors the top navbar's dropdown, and it exists for the same
+     * reason the navbar's does: the sidebar and the mobile sheet are built from
+     * the SAME nav items, so a parent that gained children in the navbar would
+     * otherwise silently lose every one of them here — the merge would read as a
+     * deletion on exactly the surface phones use. One level only, matching
+     * `NavbarLayoutItem`.
+     */
+    children?: AppLayoutShellSidebarLink[];
 }
 export interface AppLayoutShellSidebarSection {
     title?: string;

package/dist/features/layout/AppLayoutShell.js

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 // owns the singleton; nesting another would risk Turbopack chunk-splitting.
 // The actual 2.8.8 SSR crash was a peer-dep duplicate fixed by the
 // scripts/dedupe-peer-deps.mjs postinstall hook (see scripts/ and CLAUDE.md #19).
+import { ChevronDown } from "lucide-react";
 import { AvatarDisplay, BackgroundRenderer, Div, Li, Main, Row, Span, Stack, Text, TextLink, Ul, UnsavedChangesModal } from "../../ui/index.js";
 // Role indicator dots — distinct hues per role tier.
 const ROLE_DOT_BG_CLASS = {
@@ -18,7 +19,7 @@ import { useAuth } from "../../react/contexts/SessionContext.js";
 import { useVisualViewportInset } from "../../react/hooks/useVisualViewportInset.js";
 import { isBuyerUser } from "../auth/role-predicates.js";
 import { NavbarWithSettings } from "./NavbarWithSettings.js";
-import BottomActions from "./BottomActions.js";
+import SideActionDock from "./SideActionDock.js";
 import { BottomChrome } from "./BottomChrome.js";
 import { AutoBreadcrumbs } from "./AutoBreadcrumbs.js";
 import { BottomNavbar } from "./BottomNavbar.js";
@@ -27,6 +28,7 @@ import { SidebarLayout } from "./SidebarLayout.js";
 import { TitleBar } from "./TitleBar.js";
 import { BackToTop } from "./BackToTop.js";
 import { useDashboardNav } from "./DashboardNavContext.js";
+import { TOP_BANNER_SLOT_ID } from "../../ui/components/top-banner-slot.js";
 import { usePathname } from "next/navigation.js";
 import { findActiveNavItem } from "../../_internal/client/features/layout/navActive.js";
 import { OVERLAY_FALLBACK_COLOR, SEED_DARK_BG as DEFAULT_DARK_BG, SEED_LIGHT_BG as DEFAULT_LIGHT_BG } from "./background-seed-defaults.js";
@@ -44,8 +46,64 @@ function CollapsibleNavGroup({ title, hasActive = false, children, }) {
     }, [hasActive]);
     return (_jsxs(Stack, { gap: "none", className: "", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-[var(--appkit-space-1)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-semibold uppercase tracking-wider text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)] transition-colors", children: [_jsx(Span, { children: title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""} shrink-0`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), open && _jsx(Stack, { gap: "none", className: "", children: children })] }));
 }
+/**
+ * Flatten a sidebar section's links for active-item resolution.
+ *
+ * 🛑 Children MUST be in here. `findActiveNavItem` picks the longest prefix
+ * match, so leaving them out means a page that is only reachable as a child —
+ * /auctions under "Products" — marks nothing at all, the same lost-your-place
+ * bug the navbar's own comment documents.
+ */
+function flattenSidebarLinks(items) {
+    return items.flatMap((item) => [item, ...(item.children ?? [])]);
+}
+/**
+ * A sidebar link that owns sub-links: FIRST tap expands, SECOND tap follows.
+ *
+ * 🛑 The second tap is what keeps this a link rather than a folder. A parent
+ * that only ever toggles makes its own page unreachable from the sidebar — the
+ * catalogue index would be the one shop page you could not open from the menu
+ * that lists the shop. So the destination is the parent's own href, falling
+ * back to its first child when the parent is a grouping with no page of its
+ * own, and `preventDefault` applies only on the expanding tap.
+ *
+ * It differs from the navbar on purpose: there, hover already reveals the menu,
+ * so a click can navigate immediately. A sidebar has no hover, and a thumb has
+ * no caret small enough to aim at reliably — the tap has to do both jobs, in
+ * order.
+ */
+function SidebarParentLink({ item, activeItem, activeHref, navItemClass, navItemActiveClass, }) {
+    const children = item.children ?? [];
+    const containsActive = !!activeItem && children.some((child) => child.href === activeItem.href);
+    const [expanded, setExpanded] = useState(containsActive);
+    // The sidebar stays mounted across client-side navigation, so the lazy
+    // initial state above only ever fires once — re-open when the route moves
+    // into this group.
+    useEffect(() => {
+        if (containsActive)
+            setExpanded(true);
+    }, [containsActive]);
+    const isActive = activeItem?.href === item.href;
+    const target = item.href || children[0]?.href || "#";
+    return (_jsxs(Li, { children: [_jsxs(TextLink, { href: target, variant: "none", className: isActive ? navItemActiveClass : navItemClass, "aria-current": isActive ? "page" : undefined, "aria-expanded": expanded, onClick: (e) => {
+                    if (expanded)
+                        return;
+                    e.preventDefault();
+                    setExpanded(true);
+                }, children: [item.icon && (_jsx(Span, { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label, _jsx(ChevronDown, { className: `ms-auto w-3.5 h-3.5 shrink-0 opacity-70 transition-transform duration-200 ${expanded ? "rotate-180" : ""}`, "aria-hidden": "true" })] }), expanded && (_jsx(SidebarSectionLinks, { items: children, activeHref: activeHref, activeItem: activeItem, navItemClass: navItemClass, navItemActiveClass: navItemActiveClass, nested: true }))] }));
+}
+/** One sidebar link plus its indented sub-links. */
+function SidebarSectionLinks({ items, activeHref, activeItem, navItemClass, navItemActiveClass, nested = false, }) {
+    return (_jsx(Ul, { spacing: "2xs", className: nested ? "ps-[var(--appkit-space-6)]" : undefined, children: items.map((item) => {
+            const isActive = activeItem?.href === item.href;
+            if (item.children && item.children.length > 0) {
+                return (_jsx(SidebarParentLink, { item: item, activeItem: activeItem, activeHref: activeHref, navItemClass: navItemClass, navItemActiveClass: navItemActiveClass }, `${item.href}-${item.label}`));
+            }
+            return (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: isActive ? navItemActiveClass : navItemClass, "aria-current": isActive ? "page" : undefined, children: [item.icon && (_jsx(Span, { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label] }) }, `${item.href}-${item.label}`));
+        }) }));
+}
 function CollapsibleSidebarSection({ section, navItemClass, navItemActiveClass, activeHref, }) {
-    const activeItem = findActiveNavItem(section.items, activeHref);
+    const activeItem = findActiveNavItem(flattenSidebarLinks(section.items), activeHref);
     const hasActive = !!activeItem;
     const [open, setOpen] = useState((section.defaultOpen ?? false) || hasActive);
     // Re-sync whenever the route changes — the sidebar stays mounted across
@@ -56,15 +114,9 @@ function CollapsibleSidebarSection({ section, navItemClass, navItemActiveClass,
     }, [hasActive]);
     const hasTitle = !!section.title;
     if (!hasTitle) {
-        return (_jsx(Ul, { spacing: "2xs", children: section.items.map((item) => {
-                const isActive = activeItem?.href === item.href;
-                return (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: isActive ? navItemActiveClass : navItemClass, "aria-current": isActive ? "page" : undefined, children: [item.icon && (_jsx(Span, { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label] }) }, `${item.href}-${item.label}`));
-            }) }));
+        return (_jsx(SidebarSectionLinks, { items: section.items, activeHref: activeHref, activeItem: activeItem, navItemClass: navItemClass, navItemActiveClass: navItemActiveClass }));
     }
-    return (_jsxs(Stack, { gap: "none", className: "", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-[var(--appkit-space-1)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-semibold uppercase tracking-wider text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)] transition-colors", children: [_jsx(Span, { children: section.title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""} shrink-0`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(Ul, { spacing: "2xs", children: section.items.map((item) => {
-                    const isActive = activeItem?.href === item.href;
-                    return (_jsx(Li, { children: _jsxs(TextLink, { href: item.href, variant: "none", className: isActive ? navItemActiveClass : navItemClass, "aria-current": isActive ? "page" : undefined, children: [item.icon && (_jsx(Span, { className: "flex-shrink-0 w-5 text-center", "aria-hidden": "true", children: item.icon })), item.label] }) }, `${item.href}-${item.label}`));
-                }) }))] }));
+    return (_jsxs(Stack, { gap: "none", className: "", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center justify-between px-[var(--appkit-space-1)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-semibold uppercase tracking-wider text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)] transition-colors", children: [_jsx(Span, { children: section.title }), _jsx("svg", { className: `w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""} shrink-0`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(SidebarSectionLinks, { items: section.items, activeHref: activeHref, activeItem: activeItem, navItemClass: navItemClass, navItemActiveClass: navItemActiveClass }))] }));
 }
 /** Sidebar header when a user is logged in — avatar + display name + close button. */
 function SidebarUserHeader({ user, onClose, }) {
@@ -194,7 +246,7 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
             opacity: darkBackground.overlay?.opacity ?? 0,
         },
     };
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { className: "min-h-screen w-full overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, messagesHref: messagesHref, unreadMessageCount: unreadMessageCount, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(NavbarWithSettings, { navItems: navItems, hiddenNavItems: hiddenNavItems, permissions: authUser?.permissions }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot), eventBannerSlot] }), _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { layout: "flex", className: "relative w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsx(SidebarUserHeader, { user: user, onClose: () => setSidebarOpen(false) })) : (_jsx(SidebarGuestHeader, { sidebarTitle: sidebarTitle, onClose: () => setSidebarOpen(false) })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", 
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { className: "min-h-screen w-full overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsx(Div, { id: TOP_BANNER_SLOT_ID, className: "w-full" }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, messagesHref: messagesHref, unreadMessageCount: unreadMessageCount, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(NavbarWithSettings, { navItems: navItems, hiddenNavItems: hiddenNavItems, permissions: authUser?.permissions }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot), eventBannerSlot] }), _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { layout: "flex", className: "relative w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsx(SidebarUserHeader, { user: user, onClose: () => setSidebarOpen(false) })) : (_jsx(SidebarGuestHeader, { sidebarTitle: sidebarTitle, onClose: () => setSidebarOpen(false) })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", 
                             // No bottom-chrome clearance here on purpose. FooterLayout is a
                             // SIBLING rendered after <Main>, so a margin here only gaps
                             // main-to-footer — it never clears the bottom of the page, which is
@@ -207,5 +259,5 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
                             // is 0 below `lg` and 0 whenever no bar is published, so this
                             // reserves exactly nothing until there is something to reserve —
                             // which is why it can be unconditional rather than route-gated.
-                            className: "w-full flex-1 flex flex-col pt-[var(--top-chrome-height,0px)] transition-[padding-top] duration-300 ease-out", children: _jsx(Div, { padding: "y-lg", className: `flex-1 ${contentClassName ?? "mx-auto w-full max-w-screen-xl px-[var(--appkit-space-5)] md:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]"}`, children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomChrome, { children: _jsx(BottomActions, {}) }), showBottomNav && (_jsx(BottomNavbar, { user: user, userId: userId, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, wishlistHref: wishlistHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: handleTogglePublicSidebar })), _jsx(UnsavedChangesModal, {})] }) }));
+                            className: "w-full flex-1 flex flex-col pt-[var(--top-chrome-height,0px)] transition-[padding-top] duration-300 ease-out", children: _jsx(Div, { padding: "y-lg", className: `flex-1 ${contentClassName ?? "mx-auto w-full max-w-screen-xl px-[var(--appkit-space-5)] md:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]"}`, children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomChrome, { children: null }), _jsx(SideActionDock, {}), showBottomNav && (_jsx(BottomNavbar, { user: user, userId: userId, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, wishlistHref: wishlistHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: handleTogglePublicSidebar })), _jsx(UnsavedChangesModal, {})] }) }));
 }