@mohasinac/appkit 4.52.2 → 4.52.3

package/dist/.build-stamp.json

@@ -1,8 +1,8 @@
 {
   "stampVersion": 1,
-  "version": "4.52.2",
-  "head": "797172e6302080e045fb4ec752483fc0f7f09968",
+  "version": "4.52.3",
+  "head": "22b37a38962d4c3dd484539154eae60f5c523161",
   "branch": "main",
-  "dirty": false,
-  "builtAt": "2026-10-14T23:59:51.686Z"
+  "dirty": true,
+  "builtAt": "2026-10-15T01:16:10.361Z"
 }

package/dist/features/layout/AppLayoutShell.js

@@ -200,5 +200,12 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
                             // main-to-footer — it never clears the bottom of the page, which is
                             // what the fixed nav + tier actually overlap. That reservation now
                             // lives on the footer's own padding-bottom.
-                            className: "w-full flex-1 flex flex-col", 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, {})] }) }));
+                            //
+                            // The TOP tier is the mirror image and does belong here: at `lg` the
+                            // chrome tier hangs under the header as a fixed bar, so without this
+                            // it would cover the first rows of the page. `--top-chrome-height`
+                            // 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, {})] }) }));
 }

package/dist/features/layout/BackToTop.js

@@ -4,7 +4,7 @@ import Link from "next/link.js";
 import { usePathname } from "next/navigation.js";
 import { useEffect, useState } from "react";
 import { ChevronUp, X } from "lucide-react";
-import { Button, Div } from "../../ui/index.js";
+import { Div, IconButton } from "../../ui/index.js";
 import { useHandMode } from "../../_internal/client/hand-mode/index.js";
 /**
  * BackToTop — floating scroll-to-top button.
@@ -49,7 +49,7 @@ export function BackToTop({ threshold = 400, ariaLabel = "Back to top", classNam
     const handleDismiss = () => {
         setDismissed(true);
     };
-    return (_jsxs(Div, { layout: "flex", align: "center", gap: "1", className: `fixed bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem)+var(--bottom-chrome-height,0px)+var(--appkit-space-4))] transition-[bottom] duration-300 ease-out ${hand === "left" ? "left-4" : "right-4"} z-[var(--appkit-z-back-to-top)] ${className}`, children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-label": ariaLabel, onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }), className: "flex items-center justify-center w-10 h-10 rounded-full bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] shadow-md text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface)] dark:hover:bg-slate-700 transition-colors", children: _jsx(ChevronUp, { className: "w-5 h-5", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-label": "Hide back-to-top button", onClick: handleDismiss, className: "flex items-center justify-center w-6 h-6 rounded-full bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] shadow-md text-[var(--appkit-color-text-faint)] hover:text-[var(--appkit-color-text)] transition-colors", children: _jsx(X, { className: "w-3 h-3", "aria-hidden": "true" }) })] }));
+    return (_jsxs(Div, { layout: "flex", align: "center", gap: "1", className: `fixed bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem)+var(--bottom-chrome-height,0px)+var(--appkit-space-4))] transition-[bottom] duration-300 ease-out ${hand === "left" ? "left-4" : "right-4"} z-[var(--appkit-z-back-to-top)] ${className}`, children: [_jsx(IconButton, { type: "button", variant: "outline", size: "touch", rounded: "full", "aria-label": ariaLabel, onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }), icon: _jsx(ChevronUp, { "aria-hidden": "true" }) }), _jsx(IconButton, { type: "button", variant: "outline", size: "sm", rounded: "full", "aria-label": "Hide back-to-top button", onClick: handleDismiss, icon: _jsx(X, { "aria-hidden": "true" }) })] }));
 }
 /** SkipToMain — visually hidden link that becomes visible on focus for keyboard users. */
 export function SkipToMain({ mainId = "main-content" }) {

package/dist/features/layout/BottomActions.js

@@ -44,10 +44,13 @@ const DESKTOP_REVEAL_SCROLL_PX = 400;
 // ─── Sub-components ───────────────────────────────────────────────────────────
 function BulkPickerPanel({ bulkActions, selectedActionId, pickerOpen, onSelect, }) {
     return (_jsx(Div, { role: "listbox", "aria-label": "Bulk actions", className: [
-            "absolute bottom-full left-0 right-0 overflow-hidden",
+            // Flips with the tier — see InfoPanel for why.
+            "absolute left-0 right-0 overflow-hidden",
+            "bottom-full lg:bottom-auto lg:top-full",
             BOTTOM_NAV_BG,
-            "border-t border-zinc-200/80 border-[var(--appkit-color-border)]/80",
+            "border-t lg:border-t-0 lg:border-b border-[var(--appkit-color-border)]/80",
             "shadow-[0_-8px_24px_rgba(0,0,0,0.10)] dark:shadow-[0_-8px_24px_rgba(0,0,0,0.35)]",
+            "lg:shadow-[0_8px_24px_rgba(0,0,0,0.10)] dark:lg:shadow-[0_8px_24px_rgba(0,0,0,0.35)]",
             "transition-[max-height,opacity] duration-200 ease-out",
             pickerOpen ? "max-h-64 opacity-100" : "max-h-0 opacity-0 pointer-events-none",
         ]
@@ -78,10 +81,16 @@ function BulkPickerPanel({ bulkActions, selectedActionId, pickerOpen, onSelect,
  */
 function InfoPanel({ id, open, children, }) {
     return (_jsx(Div, { id: id, className: [
-            "absolute bottom-full left-0 right-0 overflow-hidden",
+            // Opens UPWARD from a bottom-edge bar, DOWNWARD from a desktop bar
+            // hanging under the header — a panel must always expand into the
+            // screen, never off it. Border and shadow flip with it, or the sheet
+            // is lit from the wrong side and reads as detached from its bar.
+            "absolute left-0 right-0 overflow-hidden",
+            "bottom-full lg:bottom-auto lg:top-full",
             BOTTOM_NAV_BG,
-            "border-t border-zinc-200/80 border-[var(--appkit-color-border)]/80",
+            "border-t lg:border-t-0 lg:border-b border-[var(--appkit-color-border)]/80",
             "shadow-[0_-8px_24px_rgba(0,0,0,0.10)] dark:shadow-[0_-8px_24px_rgba(0,0,0,0.35)]",
+            "lg:shadow-[0_8px_24px_rgba(0,0,0,0.10)] dark:lg:shadow-[0_8px_24px_rgba(0,0,0,0.35)]",
             "transition-[max-height,opacity] duration-200 ease-out",
             open ? "max-h-[60vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none",
         ]
@@ -273,7 +282,13 @@ export default function BottomActions() {
             .filter(Boolean)
             .join(" "), "data-section": "bottomactions-div-401", children: [isBulkMode && (_jsx(BulkPickerPanel, { bulkActions: bulkActions, selectedActionId: selectedActionId, pickerOpen: pickerOpen, onSelect: (id) => { setSelectedActionId(id); setPickerOpen(false); } })), hasInfoPanel && !isBulkMode && (_jsx(InfoPanel, { id: infoPanelId, open: infoOpen, children: infoPanel })), _jsx(Div, { className: `grid transition-[grid-template-rows] duration-300 ease-out ${isVisible ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`, children: _jsx(Div, { overflow: "hidden", className: "min-h-0", children: _jsxs(Div, { className: [
                             BOTTOM_NAV_BG,
+                            // Cast away from the edge the bar is welded to: upward from the
+                            // bottom edge, downward from under the header.
                             "shadow-[0_-4px_20px_rgba(0,0,0,0.08)] dark:shadow-[0_-4px_20px_rgba(0,0,0,0.30)]",
+                            "lg:shadow-[0_4px_20px_rgba(0,0,0,0.08)] dark:lg:shadow-[0_4px_20px_rgba(0,0,0,0.30)]",
+                            // A hairline on the side facing the page, so the bar reads as
+                            // chrome rather than as a floating slab.
+                            "lg:border-b lg:border-[var(--appkit-color-border)]/80",
                             isVisible ? "" : "pointer-events-none",
                         ]
                             .filter(Boolean)

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

@@ -2,33 +2,4 @@ import React from "react";
 export interface BottomChromeProps {
     children: React.ReactNode;
 }
-/**
- * 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 declare function BottomChrome({ children }: BottomChromeProps): React.JSX.Element;

package/dist/features/layout/BottomChrome.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Div } from "../../ui/index.js";
 import { BOTTOM_CHROME_SLOT_ID } from "../../ui/components/bottom-chrome-slot.js";
 /**
@@ -28,28 +28,93 @@ import { BOTTOM_CHROME_SLOT_ID } from "../../ui/components/bottom-chrome-slot.js
  *     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.
+ *     panels are `absolute bottom-full` on mobile / `top-full` on desktop —
+ *     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.
+ *
+ * ── The tier CHANGES ENDS at `lg` ──────────────────────────────────────────
+ *
+ * Below `lg` it is the bottom edge, as described above. At `lg` and up it hangs
+ * from under the sticky header instead, and publishes its height as
+ * `--top-chrome-height` rather than `--bottom-chrome-height`.
+ *
+ * A full-width action bar welded to the bottom of a desktop window is a mobile
+ * pattern on a screen that has neither a thumb zone nor a tab bar to stack
+ * above — it reads as a browser download bar, and it is the furthest point on
+ * screen from the content it acts on. Under the header it sits where the eye
+ * already is and where the page's own chrome lives.
+ *
+ * Consumers therefore read whichever end they care about, and the two are
+ * mutually exclusive by construction (see `write()`).
+ */
+/**
+ * The breakpoint at which the tier moves from the bottom edge to under the
+ * header. 64rem is Tailwind's `lg` — the same line `BottomNavbar` disappears
+ * at, so the tier changes ends exactly when the thing it was stacking above
+ * stops existing.
  */
+const DESKTOP_QUERY = "(min-width: 64rem)";
 export function BottomChrome({ children }) {
     const ref = useRef(null);
+    const [isDesktop, setIsDesktop] = useState(false);
+    // Matched in JS as well as in CSS because the MEASUREMENT has to know which
+    // variable to publish — a media query alone can move the box but cannot tell
+    // the ResizeObserver which end of the screen it ended up at.
+    useEffect(() => {
+        const mq = window.matchMedia(DESKTOP_QUERY);
+        const sync = () => setIsDesktop(mq.matches);
+        sync();
+        mq.addEventListener("change", sync);
+        return () => mq.removeEventListener("change", sync);
+    }, []);
     useEffect(() => {
         const root = document.documentElement;
         const el = ref.current;
         if (!el)
             return;
-        const write = () => root.style.setProperty("--bottom-chrome-height", `${el.offsetHeight}px`);
+        /*
+         * 🛑 EXACTLY ONE of the two variables carries the height; the other is
+         * pinned to 0. They are not interchangeable and must never both be live:
+         * `--bottom-chrome-height` is clearance at the BOTTOM of the viewport
+         * (BackToTop floats above it, the footer reserves it) and
+         * `--top-chrome-height` is clearance at the TOP (content is pushed down by
+         * it). Publishing a real height to both would make every consumer reserve
+         * the bar twice — a gap the size of the bar at the end of every page on
+         * desktop, which is exactly the "looks ugly" symptom one tier up.
+         */
+        const write = () => {
+            const h = `${el.offsetHeight}px`;
+            root.style.setProperty("--top-chrome-height", isDesktop ? h : "0px");
+            root.style.setProperty("--bottom-chrome-height", isDesktop ? "0px" : h);
+        };
         const observer = new ResizeObserver(write);
         observer.observe(el);
         write();
         return () => {
             observer.disconnect();
             root.style.setProperty("--bottom-chrome-height", "0px");
+            root.style.setProperty("--top-chrome-height", "0px");
         };
-    }, []);
+    }, [isDesktop]);
     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] }));
+        //
+        // Desktop pins the tier directly beneath the sticky header rather than to
+        // the bottom edge. A full-width bar welded to the bottom of a 1440px
+        // window is a mobile pattern borrowed onto a screen that has no thumb
+        // zone and no tab bar to sit above — on desktop the action row belongs
+        // with the page chrome, where the eye already is. `--header-height` is
+        // published by AppLayoutShell and already accounts for the announcement
+        // banner, so this needs no second measurement.
+        //
+        // 🛑 The child's `flex-col` ORDER is reversed on desktop: at the bottom
+        // edge the portalled slot must stack above the CTA row, and once the tier
+        // hangs from the top the same visual ordering is the other way round.
+        className: [
+            "fixed left-0 right-0 z-[var(--appkit-z-bottom-nav)] pointer-events-none",
+            "bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem))]",
+            "lg:bottom-auto lg:top-[var(--header-height,0px)] lg:flex-col-reverse",
+        ].join(" "), children: [_jsx(Div, { id: BOTTOM_CHROME_SLOT_ID, className: "contents" }), children] }));
 }

package/dist/features/products/components/ProductFeaturesSelector.d.ts

@@ -6,8 +6,45 @@ export interface ProductFeaturesSelectorProps {
     onChange: (next: string[]) => void;
     /** Determines which platform features are eligible. */
     productType: ProductFeatureProductType;
-    /** Store ID — when present, store-scope features are also loaded. */
+    /** Store ID — when present, store-scope features are also loaded, and the
+     *  picker can create new store-scope badges inline. */
     storeId?: string;
     disabled?: boolean;
 }
+/**
+ * Feature-badge picker.
+ *
+ * 🛑 A SEARCHABLE MULTI-SELECT, not a checkbox grid. This rendered every
+ * eligible badge as a two-column grid of bordered checkbox rows — on the real
+ * catalogue that is a wall of ~20+ tiles a seller has to read end-to-end to
+ * find "Sealed", and it grew every time an admin added a badge. CLAUDE.md's
+ * rule is explicit and this was the clearest violation of it left: anything
+ * over five options is a `<PaginatedSelect>`, because a long list nobody can
+ * search is a list nobody reads.
+ *
+ * Three things the conversion had to preserve, all of which the grid did by
+ * accident and a naive swap would have lost:
+ *
+ *   - THE SCOPE DISTINCTION. Platform badges are curated and shared; store
+ *     badges are the seller's own. The grid showed them under two headings.
+ *     `PaginatedSelect` has no option grouping, so the scope rides in the
+ *     option label as a suffix — visible in the list AND in the selected chip,
+ *     which is strictly more information than the heading gave (a chip used to
+ *     say nothing about where its badge came from).
+ *   - THE SELECTION CEILING. `MAX_FEATURES_PER_PRODUCT` was enforced by
+ *     disabling every unchecked row at the limit. A multi-select has no such
+ *     affordance, so the cap is enforced in `handleChange` — which also makes
+ *     it correct for a value arriving over the limit from an older document,
+ *     where the old code could only show a banner and hope.
+ *   - THE DESCRIPTION. Each row carried one. It is folded into the label after
+ *     an em-dash so it stays searchable: typing "factory" now finds "Sealed",
+ *     whose description is the only place that word appears.
+ *
+ * Create is wired only when `storeId` is present, and only to the STORE-scope
+ * endpoint. `POST /api/admin/features` is `ROLES_ADMIN_ONLY` +
+ * `admin:categories:write`, so offering it to a seller would be a control that
+ * 403s — worse than an absent one. A seller creating a badge is creating their
+ * own, which is exactly what `POST /api/store/features` does (it sets
+ * `storeId` server-side rather than trusting the body).
+ */
 export declare function ProductFeaturesSelector({ value, onChange, productType, storeId, disabled, }: ProductFeaturesSelectorProps): React.JSX.Element;

package/dist/features/products/components/ProductFeaturesSelector.js

@@ -1,37 +1,88 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { useQuery } from "@tanstack/react-query";
-import { Checkbox, Div, Grid, Heading, Label, Stack, Text } from "../../../ui/index.js";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Div, Heading, Stack, Text } from "../../../ui/index.js";
+import { PaginatedSelect } from "../../../ui/components/PaginatedSelect.js";
 import { apiClient } from "../../../http/index.js";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { ADMIN_ENDPOINTS, SELLER_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { PRODUCT_FEATURE_QUERY_STALE_MS } from "../constants/product-features.constants.js";
 import { MAX_FEATURES_PER_PRODUCT, } from "../schemas/product-features.js";
-const SECTION_LABEL_CLASS = "text-[var(--appkit-font-size-2xs,11px)] font-semibold uppercase tracking-wide text-[var(--appkit-color-text-muted)] mb-2";
-const ROW_BASE_CLASS = "flex items-start gap-[var(--appkit-space-2)] rounded-lg border px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-xs)] cursor-pointer transition-colors";
-const ROW_CHECKED_CLASS = "border-primary bg-primary/5 dark:bg-primary/10";
-const ROW_DISABLED_CLASS = "border-[var(--appkit-color-border)] opacity-50 cursor-not-allowed";
-const ROW_DEFAULT_CLASS = "border-[var(--appkit-color-border)] hover:bg-surface-hover";
 const OVER_LIMIT_BANNER_CLASS = "rounded-lg border border-error/20 bg-error-surface px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-xs)] text-error";
 const EMPTY_STATE_CLASS = "rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-3)] py-[var(--appkit-space-4)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] text-left";
+/** Inline-create form for a store-scope badge. Mirrors productFeatureStoreCreateSchema's required fields. */
+const CREATE_FIELDS = [
+    {
+        name: "label",
+        label: "Badge label",
+        type: "text",
+        required: true,
+        placeholder: "e.g. Hand-inspected",
+        helperText: "Shown on product cards and the detail page.",
+    },
+    {
+        name: "description",
+        label: "Description",
+        type: "textarea",
+        placeholder: "What this badge promises the buyer.",
+    },
+    {
+        name: "icon",
+        label: "Icon",
+        type: "text",
+        required: true,
+        defaultValue: "star",
+        helperText: "A Lucide icon name, e.g. star, shield, package.",
+    },
+];
 function applyProductType(list, productType) {
     if (productType === "all")
         return list;
     return list.filter((f) => f.productTypes.includes("all") || f.productTypes.includes(productType));
 }
-function rowClass(checked, cantSelect) {
-    if (checked)
-        return `${ROW_BASE_CLASS} ${ROW_CHECKED_CLASS}`;
-    if (cantSelect)
-        return `${ROW_BASE_CLASS} ${ROW_DISABLED_CLASS}`;
-    return `${ROW_BASE_CLASS} ${ROW_DEFAULT_CLASS}`;
-}
 function unwrapItems(res) {
     const body = res?.data ??
         res;
     return body?.items ?? [];
 }
+/**
+ * Feature-badge picker.
+ *
+ * 🛑 A SEARCHABLE MULTI-SELECT, not a checkbox grid. This rendered every
+ * eligible badge as a two-column grid of bordered checkbox rows — on the real
+ * catalogue that is a wall of ~20+ tiles a seller has to read end-to-end to
+ * find "Sealed", and it grew every time an admin added a badge. CLAUDE.md's
+ * rule is explicit and this was the clearest violation of it left: anything
+ * over five options is a `<PaginatedSelect>`, because a long list nobody can
+ * search is a list nobody reads.
+ *
+ * Three things the conversion had to preserve, all of which the grid did by
+ * accident and a naive swap would have lost:
+ *
+ *   - THE SCOPE DISTINCTION. Platform badges are curated and shared; store
+ *     badges are the seller's own. The grid showed them under two headings.
+ *     `PaginatedSelect` has no option grouping, so the scope rides in the
+ *     option label as a suffix — visible in the list AND in the selected chip,
+ *     which is strictly more information than the heading gave (a chip used to
+ *     say nothing about where its badge came from).
+ *   - THE SELECTION CEILING. `MAX_FEATURES_PER_PRODUCT` was enforced by
+ *     disabling every unchecked row at the limit. A multi-select has no such
+ *     affordance, so the cap is enforced in `handleChange` — which also makes
+ *     it correct for a value arriving over the limit from an older document,
+ *     where the old code could only show a banner and hope.
+ *   - THE DESCRIPTION. Each row carried one. It is folded into the label after
+ *     an em-dash so it stays searchable: typing "factory" now finds "Sealed",
+ *     whose description is the only place that word appears.
+ *
+ * Create is wired only when `storeId` is present, and only to the STORE-scope
+ * endpoint. `POST /api/admin/features` is `ROLES_ADMIN_ONLY` +
+ * `admin:categories:write`, so offering it to a seller would be a control that
+ * 403s — worse than an absent one. A seller creating a badge is creating their
+ * own, which is exactly what `POST /api/store/features` does (it sets
+ * `storeId` server-side rather than trusting the body).
+ */
 export function ProductFeaturesSelector({ value, onChange, productType, storeId, disabled, }) {
+    const queryClient = useQueryClient();
     const platformQuery = useQuery({
         queryKey: ["product-features", "platform", "active"],
         queryFn: async () => unwrapItems(await apiClient.get(`${ADMIN_ENDPOINTS.PRODUCT_FEATURES}?scope=platform&isActive=true`)),
@@ -45,28 +96,76 @@ export function ProductFeaturesSelector({ value, onChange, productType, storeId,
     });
     const platformFeatures = applyProductType(platformQuery.data ?? [], productType);
     const storeFeatures = applyProductType(storeQuery.data ?? [], productType);
-    const selectedSet = React.useMemo(() => new Set(value), [value]);
+    const options = React.useMemo(() => {
+        const toOption = (f, scopeSuffix) => ({
+            value: f.id,
+            // Description folded in so it is searchable — see the docstring.
+            label: f.description
+                ? `${f.label} — ${f.description} ${scopeSuffix}`
+                : `${f.label} ${scopeSuffix}`,
+        });
+        return [
+            ...platformFeatures.map((f) => toOption(f, "(platform)")),
+            ...storeFeatures.map((f) => toOption(f, "(your store)")),
+        ];
+    }, [platformFeatures, storeFeatures]);
     const atLimit = value.length >= MAX_FEATURES_PER_PRODUCT;
     const overLimit = value.length > MAX_FEATURES_PER_PRODUCT;
-    const toggle = (id) => {
+    /*
+     * 🛑 The cap is applied to the INCOMING array, not to a per-row disabled
+     * state. Truncating keeps the earliest selections, which is what a user who
+     * has just exceeded the limit expects (the one they clicked last is the one
+     * that fails), and it also silently repairs an over-limit value loaded from
+     * an older document instead of blocking save behind a banner.
+     */
+    const handleChange = (next) => {
         if (disabled)
             return;
-        if (selectedSet.has(id)) {
-            onChange(value.filter((v) => v !== id));
-            return;
-        }
-        if (atLimit)
-            return;
-        onChange([...value, id]);
-    };
-    const renderRow = (f) => {
-        const checked = selectedSet.has(f.id);
-        const cantSelect = !checked && atLimit;
-        return (_jsxs(Label, { className: rowClass(checked, cantSelect), children: [_jsx(Checkbox, { bare: true, className: "mt-0.5", checked: checked, disabled: disabled || cantSelect, onChange: () => toggle(f.id), "aria-label": f.label }), _jsxs(Div, { className: "flex-1", children: [_jsx(Text, { as: "span", className: "block", color: "primary", weight: "medium", children: f.label }), f.description && (_jsx(Text, { as: "span", className: "block mt-0.5", color: "muted", children: f.description }))] })] }, f.id));
+        onChange(next.length > MAX_FEATURES_PER_PRODUCT
+            ? next.slice(0, MAX_FEATURES_PER_PRODUCT)
+            : next);
     };
-    const hasAny = platformQuery.isLoading ||
-        storeQuery.isLoading ||
-        platformFeatures.length > 0 ||
-        storeFeatures.length > 0;
-    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Feature badges" }), _jsxs(Text, { size: "xs", color: "muted", children: ["Selected: ", value.length, " of ", MAX_FEATURES_PER_PRODUCT, ". Badges appear on product cards and detail pages."] })] }), overLimit && (_jsxs(Div, { className: OVER_LIMIT_BANNER_CLASS, children: ["Too many features selected \u2014 remove", " ", value.length - MAX_FEATURES_PER_PRODUCT, " before saving."] })), platformFeatures.length > 0 && (_jsxs(Div, { children: [_jsx(Div, { className: SECTION_LABEL_CLASS, children: "Platform features" }), _jsx(Grid, { cols: "halves", gap: "xs", children: platformFeatures.map(renderRow) })] })), storeFeatures.length > 0 && (_jsxs(Div, { children: [_jsx(Div, { className: SECTION_LABEL_CLASS, children: "Store custom features" }), _jsx(Grid, { cols: "halves", gap: "xs", children: storeFeatures.map(renderRow) })] })), !hasAny && (_jsx(Div, { className: EMPTY_STATE_CLASS, children: "No applicable feature badges available." }))] }));
+    /*
+     * Create is wired ONLY for a seller editing their own store, and only to the
+     * store-scope route — see the component docstring for why offering the admin
+     * one here would be a control that 403s.
+     *
+     * Extracted rather than written inline so the submit handler sits at a
+     * readable brace depth; it was five levels deep inside the JSX spread.
+     */
+    const createBadge = React.useCallback(async (values) => {
+        const created = await apiClient.post(SELLER_ENDPOINTS.FEATURES, {
+            label: String(values.label ?? "").trim(),
+            description: values.description ? String(values.description).trim() : undefined,
+            icon: String(values.icon ?? "star").trim(),
+            // Scoped to the type being edited; "all" would quietly widen the badge
+            // to every listing type the seller owns.
+            productTypes: [productType],
+            category: "custom",
+            isActive: true,
+            displayOrder: 0,
+        });
+        const doc = created?.data ??
+            created;
+        // Refetch so the new badge becomes a real option rather than a one-off
+        // chip that disappears on the next render.
+        await queryClient.invalidateQueries({
+            queryKey: ["product-features", "store", "active", storeId],
+        });
+        return { value: doc.id, label: doc.label };
+    }, [productType, queryClient, storeId]);
+    const createProps = storeId
+        ? {
+            createLabel: "Create a badge for my store",
+            drawerTitle: "New store feature badge",
+            createSubmitLabel: "Create badge",
+            createFields: CREATE_FIELDS,
+            onCreateSubmit: createBadge,
+        }
+        : {};
+    const isLoading = platformQuery.isLoading || (!!storeId && storeQuery.isLoading);
+    const hasAny = isLoading || options.length > 0;
+    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Feature badges" }), _jsxs(Text, { size: "xs", color: "muted", children: ["Selected: ", value.length, " of ", MAX_FEATURES_PER_PRODUCT, ". Badges appear on product cards and detail pages."] })] }), overLimit && (_jsxs(Div, { className: OVER_LIMIT_BANNER_CLASS, children: ["Too many features selected \u2014 remove", " ", value.length - MAX_FEATURES_PER_PRODUCT, " before saving."] })), hasAny ? (_jsx(PaginatedSelect, { multiple: true, value: value, onChange: handleChange, options: options, disabled: disabled, ariaLabel: "Feature badges", placeholder: atLimit
+                    ? `All ${MAX_FEATURES_PER_PRODUCT} badge slots used`
+                    : "Search feature badges…", searchPlaceholder: "Search badges by name or description\u2026", noResultsText: "No matching feature badge.", ...createProps })) : (_jsx(Div, { className: EMPTY_STATE_CLASS, children: "No applicable feature badges available." }))] }));
 }

package/dist/features/tester/seed-data/authored/design-ux__action-bar-placement.d.ts

@@ -0,0 +1,2 @@
+import type { AuthoredCase } from "./_types";
+export declare const authored: Record<string, AuthoredCase>;

package/dist/features/tester/seed-data/authored/design-ux__action-bar-placement.js

@@ -0,0 +1,89 @@
+/*
+ * WHY: Authored six-part procedures for the design-ux/action-bar-placement page.
+ * WHAT: 6 case(s), keyed by full checklist id.
+ *
+ * @tag domain:tester
+ * @tag layer:seed
+ * @tag pattern:none
+ * @tag access:server-only
+ * @tag consumers:seed-data/authored/index.ts
+ * @tag sideEffects:none
+ */
+export const authored = {
+    "checklist-design-ux-action-bar-placement-back-to-top-dismiss-visible": {
+        roles: ["guest"],
+        startPage: "/products",
+        steps: [
+            "Open /products and scroll down more than about 400 pixels.",
+            "Look at the floating controls in the bottom corner of the window.",
+            "Click the smaller of the two controls.",
+            "Navigate to /auctions and scroll past 400 pixels again.",
+        ],
+        expectedBehaviour: "The dismiss control is an icon button sized as a true square, so its glyph has room to render. Dismissal is in-memory and resets on route change, so it never hides the control for the rest of the session.",
+        expectedUiState: "TWO round controls are visible: a larger one showing an upward chevron, and a smaller one showing a clearly visible ✕. The prior symptom was the smaller control rendering as an EMPTY outlined pill — present and clickable, with no ✕ inside it, because its content box computed to zero width. After clicking the ✕, both controls disappear.",
+        endResult: "On /auctions both controls are back after scrolling. Nothing is persisted — a reload also brings them back.",
+    },
+    "checklist-design-ux-action-bar-placement-action-bar-top-on-desktop": {
+        roles: ["guest"],
+        startPage: "/products",
+        steps: [
+            "Maximise the browser window so it is wider than about 1024 pixels.",
+            "Open any product detail page from /products.",
+            "Look immediately below the site header.",
+            "Scroll the page down and watch the bar.",
+        ],
+        expectedBehaviour: "At `lg` and up the chrome tier is pinned under the header rather than to the bottom edge, and its shadow is cast downward onto the page.",
+        expectedUiState: "The full-width action bar sits directly beneath the header with no gap, and stays there while the page scrolls. Its drop shadow falls DOWNWARD. It must NOT be at the bottom of the window — that was the prior behaviour at every width.",
+        endResult: "Nothing persists; this is layout only. The bar stays under the header for the whole visit at this width.",
+    },
+    "checklist-design-ux-action-bar-placement-action-bar-bottom-on-mobile": {
+        roles: ["guest"],
+        startPage: "/products",
+        steps: [
+            "On the same product detail page, narrow the browser window to phone width (under about 1024 pixels), or switch to device emulation.",
+            "Look at the bottom of the window.",
+            "Slowly widen the window back past the 1024-pixel line, then narrow it again.",
+        ],
+        expectedBehaviour: "One component serves both layouts, switching on a media query, so the bar must move between the two positions rather than being duplicated or dropped.",
+        expectedUiState: "At phone width the action bar is at the BOTTOM, stacked immediately above the bottom navigation bar, with its shadow falling UPWARD. While resizing across the breakpoint the bar moves cleanly from one end to the other — it is never visible in BOTH places at once, and never disappears entirely at any width.",
+        endResult: "No state is written. The bar's position always matches the current window width, including after a reload at either width.",
+    },
+    "checklist-design-ux-action-bar-placement-action-bar-no-content-overlap": {
+        roles: ["guest"],
+        startPage: "/products",
+        steps: [
+            "At desktop width, open a product detail page that shows an action bar.",
+            "Read the very first line of page content under the header.",
+            "Now open a page with no action bar at all, such as /about.",
+            "Look at the space immediately under the header.",
+        ],
+        expectedBehaviour: "The bar is fixed, so it is out of flow and would cover content unless space is reserved. `<Main>` reserves exactly the published tier height, which is zero when no bar exists — so the reservation appears and disappears with the bar rather than being a constant allowance.",
+        expectedUiState: "With a bar present, the first heading and first row of content are fully visible and not clipped behind it. On /about, with no bar, there is NO empty band under the header — the content starts where it always did.",
+        endResult: "Nothing persists. Navigating between a page with a bar and one without must not leave a residual gap on the page that has none.",
+    },
+    "checklist-design-ux-action-bar-placement-action-bar-panels-open-into-screen": {
+        roles: ["admin"],
+        startPage: "/admin/products",
+        steps: [
+            "Sign in as admin@letitrip.in / TempPass123! and open /admin/products at desktop width.",
+            "Tick the checkboxes on two rows to enter bulk mode.",
+            "Open the bulk action-type picker on the bar.",
+            "Narrow the window to phone width and open the same picker again.",
+        ],
+        expectedBehaviour: "The panel is positioned against the bar, so its open direction must follow whichever screen edge the bar is attached to. Opening away from the screen would put the panel partly or wholly out of view.",
+        expectedUiState: "At desktop width the picker expands DOWNWARD over the page content, below the bar. At phone width it expands UPWARD from the bar. In both cases the whole panel is on screen and scrollable, and no part of it is cut off by the window edge.",
+        endResult: "Closing the picker leaves the bulk selection intact. Clearing the selection removes the bar and the panel together.",
+    },
+    "checklist-design-ux-action-bar-placement-back-to-top-clears-the-bar": {
+        roles: ["guest"],
+        startPage: "/products",
+        steps: [
+            "At phone width, open a product detail page with an action bar and scroll past 400 pixels.",
+            "Look at the vertical gap between the back-to-top control and the action bar.",
+            "Slowly widen the window past the desktop breakpoint, watching the control.",
+        ],
+        expectedBehaviour: "The back-to-top offset is expressed against the measured tier rather than against any individual bar, so it tracks the bar's height automatically — and when the tier moves to the top on desktop, the bottom measurement collapses to zero and the control settles lower.",
+        expectedUiState: "At phone width the control floats clear ABOVE the action bar, which itself sits above the bottom navigation — none of the three overlap. As the window widens past the breakpoint the control moves DOWN into the space the bar vacated. At no point during the resize do the control and any bar overlap.",
+        endResult: "Position is derived from layout alone and nothing is stored; reloading at either width reproduces the same spacing.",
+    },
+};

package/dist/features/tester/seed-data/authored/design-ux__feature-badge-picker.d.ts

@@ -0,0 +1,2 @@
+import type { AuthoredCase } from "./_types";
+export declare const authored: Record<string, AuthoredCase>;