@mohasinac/appkit 4.70.0 → 4.71.2

package/dist/features/seller/schemas/product-form.d.ts

@@ -90,10 +90,10 @@ export declare const productDraftSchema: z.ZodObject<{
     reservePrice: z.ZodOptional<z.ZodNumber>;
     buyNowPrice: z.ZodOptional<z.ZodNumber>;
     minBidIncrement: z.ZodOptional<z.ZodNumber>;
-    auctionEndDate: z.ZodOptional<z.ZodString>;
-    auctionShippingPaidBy: z.ZodOptional<z.ZodEnum<["winner", "seller"]>>;
+    collectorDropEndDate: z.ZodOptional<z.ZodString>;
+    collectorDropShippingPaidBy: z.ZodOptional<z.ZodEnum<["winner", "seller"]>>;
     autoExtendable: z.ZodOptional<z.ZodBoolean>;
-    auctionExtensionMinutes: z.ZodOptional<z.ZodNumber>;
+    collectorDropExtensionMinutes: z.ZodOptional<z.ZodNumber>;
     preOrderDeliveryDate: z.ZodOptional<z.ZodString>;
     preOrderDepositPercent: z.ZodOptional<z.ZodNumber>;
     preOrderMaxQuantity: z.ZodOptional<z.ZodNumber>;
@@ -181,10 +181,10 @@ export declare const productDraftSchema: z.ZodObject<{
     reservePrice: z.ZodOptional<z.ZodNumber>;
     buyNowPrice: z.ZodOptional<z.ZodNumber>;
     minBidIncrement: z.ZodOptional<z.ZodNumber>;
-    auctionEndDate: z.ZodOptional<z.ZodString>;
-    auctionShippingPaidBy: z.ZodOptional<z.ZodEnum<["winner", "seller"]>>;
+    collectorDropEndDate: z.ZodOptional<z.ZodString>;
+    collectorDropShippingPaidBy: z.ZodOptional<z.ZodEnum<["winner", "seller"]>>;
     autoExtendable: z.ZodOptional<z.ZodBoolean>;
-    auctionExtensionMinutes: z.ZodOptional<z.ZodNumber>;
+    collectorDropExtensionMinutes: z.ZodOptional<z.ZodNumber>;
     preOrderDeliveryDate: z.ZodOptional<z.ZodString>;
     preOrderDepositPercent: z.ZodOptional<z.ZodNumber>;
     preOrderMaxQuantity: z.ZodOptional<z.ZodNumber>;
@@ -272,10 +272,10 @@ export declare const productDraftSchema: z.ZodObject<{
     reservePrice: z.ZodOptional<z.ZodNumber>;
     buyNowPrice: z.ZodOptional<z.ZodNumber>;
     minBidIncrement: z.ZodOptional<z.ZodNumber>;
-    auctionEndDate: z.ZodOptional<z.ZodString>;
-    auctionShippingPaidBy: z.ZodOptional<z.ZodEnum<["winner", "seller"]>>;
+    collectorDropEndDate: z.ZodOptional<z.ZodString>;
+    collectorDropShippingPaidBy: z.ZodOptional<z.ZodEnum<["winner", "seller"]>>;
     autoExtendable: z.ZodOptional<z.ZodBoolean>;
-    auctionExtensionMinutes: z.ZodOptional<z.ZodNumber>;
+    collectorDropExtensionMinutes: z.ZodOptional<z.ZodNumber>;
     preOrderDeliveryDate: z.ZodOptional<z.ZodString>;
     preOrderDepositPercent: z.ZodOptional<z.ZodNumber>;
     preOrderMaxQuantity: z.ZodOptional<z.ZodNumber>;

package/dist/features/seller/schemas/product-form.js

@@ -92,15 +92,15 @@ export const productDraftSchema = z
      * with opposite requirements — see ProductDocument.sku.
      */
     sku: z.string().max(64).optional(),
-    // Auction
+    // Collector Drop
     startingBid: z.number().optional(),
     reservePrice: z.number().optional(),
     buyNowPrice: z.number().optional(),
     minBidIncrement: z.number().optional(),
-    auctionEndDate: z.string().optional(),
-    auctionShippingPaidBy: z.enum(["winner", "seller"]).optional(),
+    collectorDropEndDate: z.string().optional(),
+    collectorDropShippingPaidBy: z.enum(["winner", "seller"]).optional(),
     autoExtendable: z.boolean().optional(),
-    auctionExtensionMinutes: z.number().optional(),
+    collectorDropExtensionMinutes: z.number().optional(),
     // Pre-order
     preOrderDeliveryDate: z.string().optional(),
     preOrderDepositPercent: z.number().optional(),

package/dist/features/seller/schemas/seller-profile-firestore.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Seller Profile Firestore Document Types & Constants
+ *
+ * A SIDECAR to `users/{uid}`, keyed on the SAME Firebase Auth UID — not a
+ * parallel account. `users/{uid}` stays the one account record for every
+ * role (email, displayName, `role`, etc.); only the seller-specific fields
+ * that used to live mixed into that document move here.
+ *
+ * Owner's direct instruction: "also split the seller and user collections
+ * do not mix them together." Scoped via three parallel investigations
+ * before any code was touched (see the approved plan at
+ * C:\Users\mohsi\.claude\plans\swirling-watching-tiger.md) — the real
+ * finding was that `stores` is already the de facto seller business
+ * identity for almost everything (products/orders/payouts/reviews/offers/
+ * coupons all query by the store's SLUG, not a seller UID), so this is a
+ * narrow sidecar, not a redesign of how seller identity works.
+ *
+ * Migration strategy, owner-confirmed: no production data exists yet (all
+ * seed/test data) — single-source, no dual-write period, one backfill pass.
+ */
+import type { BaseDocument } from "../../../_internal/shared/types/base-document";
+import type { SellerShippingConfig, SellerPayoutDetails } from "../../auth/schemas/firestore";
+export interface SellerProfileDocument extends BaseDocument {
+    /** Same value as the id — the owning account's Firebase Auth UID. Kept as
+     * a real field (not just the doc id) so repository methods that take a
+     * full document never have to re-derive it. */
+    uid: string;
+    storeId?: string;
+    storeSlug?: string;
+    storeStatus?: "pending" | "approved" | "rejected";
+    shippingConfig?: SellerShippingConfig;
+    payoutDetails?: SellerPayoutDetails;
+}
+export declare const SELLER_PROFILE_COLLECTION: "sellerProfiles";
+export declare const SELLER_PROFILE_FIELDS: {
+    readonly ID: "id";
+    readonly UID: "uid";
+    readonly STORE_ID: "storeId";
+    readonly STORE_SLUG: "storeSlug";
+    readonly STORE_STATUS: "storeStatus";
+    readonly SHIPPING_CONFIG: "shippingConfig";
+    readonly PAYOUT_DETAILS: "payoutDetails";
+    readonly CREATED_AT: "createdAt";
+    readonly UPDATED_AT: "updatedAt";
+};
+export declare const SELLER_PROFILE_INDEXED_FIELDS: readonly ["uid", "storeId", "storeSlug", "storeStatus"];
+export type SellerProfileCreateInput = Pick<SellerProfileDocument, "uid"> & Partial<Pick<SellerProfileDocument, "storeId" | "storeSlug" | "storeStatus" | "shippingConfig" | "payoutDetails">>;
+export type SellerProfileUpdateInput = Partial<Pick<SellerProfileDocument, "storeId" | "storeSlug" | "storeStatus" | "shippingConfig" | "payoutDetails">>;

package/dist/features/seller/schemas/seller-profile-firestore.js

@@ -0,0 +1,38 @@
+/**
+ * Seller Profile Firestore Document Types & Constants
+ *
+ * A SIDECAR to `users/{uid}`, keyed on the SAME Firebase Auth UID — not a
+ * parallel account. `users/{uid}` stays the one account record for every
+ * role (email, displayName, `role`, etc.); only the seller-specific fields
+ * that used to live mixed into that document move here.
+ *
+ * Owner's direct instruction: "also split the seller and user collections
+ * do not mix them together." Scoped via three parallel investigations
+ * before any code was touched (see the approved plan at
+ * C:\Users\mohsi\.claude\plans\swirling-watching-tiger.md) — the real
+ * finding was that `stores` is already the de facto seller business
+ * identity for almost everything (products/orders/payouts/reviews/offers/
+ * coupons all query by the store's SLUG, not a seller UID), so this is a
+ * narrow sidecar, not a redesign of how seller identity works.
+ *
+ * Migration strategy, owner-confirmed: no production data exists yet (all
+ * seed/test data) — single-source, no dual-write period, one backfill pass.
+ */
+export const SELLER_PROFILE_COLLECTION = "sellerProfiles";
+export const SELLER_PROFILE_FIELDS = {
+    ID: "id",
+    UID: "uid",
+    STORE_ID: "storeId",
+    STORE_SLUG: "storeSlug",
+    STORE_STATUS: "storeStatus",
+    SHIPPING_CONFIG: "shippingConfig",
+    PAYOUT_DETAILS: "payoutDetails",
+    CREATED_AT: "createdAt",
+    UPDATED_AT: "updatedAt",
+};
+export const SELLER_PROFILE_INDEXED_FIELDS = [
+    "uid",
+    "storeId",
+    "storeSlug",
+    "storeStatus",
+];

package/dist/features/server-errors/schemas/index.d.ts

@@ -17,10 +17,10 @@ export declare const serverErrorFirestoreSchema: z.ZodObject<{
     bodyDigest: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     code: string;
-    message: string;
-    requestId: string;
     source: "function" | "vercel" | "client";
     id: string;
+    message: string;
+    requestId: string;
     occurredAt: number;
     route: string;
     stack?: string | undefined;
@@ -31,10 +31,10 @@ export declare const serverErrorFirestoreSchema: z.ZodObject<{
     bodyDigest?: string | undefined;
 }, {
     code: string;
-    message: string;
-    requestId: string;
     source: "function" | "vercel" | "client";
     id: string;
+    message: string;
+    requestId: string;
     occurredAt: number;
     route: string;
     stack?: string | undefined;

package/dist/features/shell/CommandPalette.d.ts

@@ -1,9 +1,31 @@
+/**
+ * A navigable link, or a direct boolean toggle resolved without leaving the
+ * palette — Phase 4B's "any listing type, category, brand… I can control it,
+ * but still simple steps" (overhaul brief). Discriminated so a caller cannot
+ * supply both `href` and `onToggle` and leave which one wins ambiguous.
+ *
+ * `description`/`keywords` on the nav variant are optional — Phase 9 widened
+ * this so the same `label`/`description`/`keywords` a nav item already
+ * carries for the sidebar search (`matchesNavQuery`) also ranks here, via
+ * `rankNavSearchResults` below, instead of the palette's own narrower
+ * label-only substring match.
+ */
+export type CommandPaletteItem = {
+    kind?: "nav";
+    href: string;
+    label: string;
+    description?: string;
+    keywords?: string[];
+} | {
+    kind: "toggle";
+    label: string;
+    isOn: boolean;
+    /** Resolves once the toggle has actually been saved — the palette shows the new state only then, never optimistically. */
+    onToggle: () => Promise<void>;
+};
 export interface CommandPaletteGroup {
     title: string;
-    items: {
-        href: string;
-        label: string;
-    }[];
+    items: CommandPaletteItem[];
 }
 export interface CommandPaletteProps {
     isOpen: boolean;
@@ -20,8 +42,35 @@ export interface CommandPaletteProps {
  * component owns only the search/filter/keyboard-nav/navigate behaviour.
  */
 export declare function CommandPalette({ isOpen, onClose, groups, placeholder }: CommandPaletteProps): import("react").JSX.Element;
+/**
+ * InlineNavSearch — the SAME ranked nav search as `CommandPalette`, rendered
+ * as an always-visible bar embedded in a page body instead of a `⌘K` popup.
+ * Reuses `rankNavSearchResults` and the `CommandPaletteGroup`/`Item` shapes
+ * directly — this is a second RENDERING of one search concern (inline vs.
+ * overlay), not a second search mechanism, the same relationship `Modal` has
+ * to an inline `Dialog`. Built for a dashboard landing page that wants one
+ * search bar at the top with zero clicks to reach it, rather than requiring
+ * `⌘K` or a header icon first.
+ */
+export declare function InlineNavSearch({ groups, placeholder }: {
+    groups: CommandPaletteGroup[];
+    placeholder?: string;
+}): import("react").JSX.Element;
 /**
  * useCommandPaletteHotkey — opens the palette on `⌘K`/`Ctrl+K` anywhere on
  * the page (ignored while typing in another input/textarea/contenteditable).
  */
 export declare function useCommandPaletteHotkey(onOpen: () => void): void;
+/**
+ * Owns the open-state + hotkey + render — the entire admin-only
+ * `AdminCommandPaletteMount` consumer file had no admin-specific logic at
+ * all, so Phase 4B (overhaul brief) folded it in here rather than writing
+ * two more near-identical copies for store/user (Rule of Three, hit on
+ * arrival rather than waited out). Each portal still supplies its own
+ * `groups` — already permission/entitlement-filtered by its layout — so
+ * this stays one render path with three different inputs, not three paths.
+ */
+export declare function CommandPaletteMount({ groups, placeholder, }: {
+    groups: CommandPaletteGroup[];
+    placeholder?: string;
+}): import("react").JSX.Element;

package/dist/features/shell/CommandPalette.js

@@ -9,6 +9,9 @@ import { Kbd } from "../../ui/components/Kbd.js";
 import { Modal } from "../../ui/components/Modal.js";
 import { Row, Stack } from "../../ui/components/Layout.js";
 import { Span, Text } from "../../ui/components/Typography.js";
+import { useToastSafe } from "../../ui/components/toast-context.js";
+import { normalizeError } from "../../errors/normalize.js";
+import { rankNavSearchResults } from "./searchNavItems.js";
 /**
  * CommandPalette — data-driven quick-jump search over a flat/grouped set of
  * links. Built for admin's 65-item / 10-group nav (no quick-jump previously
@@ -18,16 +21,17 @@ import { Span, Text } from "../../ui/components/Typography.js";
  */
 export function CommandPalette({ isOpen, onClose, groups, placeholder = "Jump to a page…" }) {
     const router = useRouter();
+    const toast = useToastSafe();
     const [query, setQuery] = useState("");
     const [activeIndex, setActiveIndex] = useState(0);
     const inputRef = useRef(null);
-    const flatItems = useMemo(() => groups.flatMap((g) => g.items.map((item) => ({ ...item, groupTitle: g.title }))), [groups]);
-    const results = useMemo(() => {
-        const q = query.trim().toLowerCase();
-        if (!q)
-            return flatItems;
-        return flatItems.filter((item) => item.label.toLowerCase().includes(q) || item.groupTitle.toLowerCase().includes(q));
-    }, [flatItems, query]);
+    const [togglingKey, setTogglingKey] = useState(null);
+    const flatItems = useMemo(() => groups.flatMap((g) => g.items.map((item) => ({
+        ...item,
+        groupTitle: g.title,
+        key: item.kind === "toggle" ? `${g.title}:${item.label}` : item.href,
+    }))), [groups]);
+    const results = useMemo(() => rankNavSearchResults(flatItems, query), [flatItems, query]);
     useEffect(() => {
         setActiveIndex(0);
     }, [query]);
@@ -44,6 +48,27 @@ export function CommandPalette({ isOpen, onClose, groups, placeholder = "Jump to
         onClose();
         router.push(href);
     }, [onClose, router]);
+    const runToggle = useCallback(async (item) => {
+        if (item.kind !== "toggle" || togglingKey)
+            return;
+        setTogglingKey(item.key);
+        try {
+            await item.onToggle();
+        }
+        catch (err) {
+            void normalizeError(err);
+            toast?.showToast(`Couldn't update "${item.label}" — please try again.`, "error");
+        }
+        finally {
+            setTogglingKey(null);
+        }
+    }, [togglingKey, toast]);
+    const activate = useCallback((item) => {
+        if (item.kind === "toggle")
+            void runToggle(item);
+        else
+            navigate(item.href);
+    }, [navigate, runToggle]);
     const handleKeyDown = useCallback((e) => {
         if (e.key === "Escape") {
             onClose();
@@ -64,14 +89,108 @@ export function CommandPalette({ isOpen, onClose, groups, placeholder = "Jump to
         e.preventDefault();
         const target = results[activeIndex];
         if (target)
-            navigate(target.href);
-    }, [results, activeIndex, navigate, onClose]);
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "lg", showCloseButton: false, children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Input, { ref: inputRef, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, "aria-label": placeholder, className: "flex-1", autoFocus: true }), _jsx(Kbd, { size: "sm", tone: "brand", children: "Esc" })] }), _jsx(Div, { className: "max-h-96", overflow: "y-auto", children: results.length === 0 ? (_jsxs(Text, { size: "sm", color: "muted", align: "center", paddingY: "lg", children: ["No matches for \u201C", query, "\u201D."] })) : (_jsx(Stack, { gap: "none", children: results.map((item, idx) => (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => navigate(item.href), onMouseEnter: () => setActiveIndex(idx), justify: "between", rounded: "md", paddingX: "sm", paddingY: "xs", className: [
+            activate(target);
+    }, [results, activeIndex, activate, onClose]);
+    /*
+     * 🛑 Phase 4B design-spike finding, 2026-11-03: the real gap against
+     * `cmdk` was never keyboard-nav (already present below) or async grouping
+     * (nothing here needs it — nav items are a small, already-loaded set) —
+     * it was ARIA. Arrow-key highlighting was PURELY VISUAL (a Tailwind class
+     * swap), with no `role`/`aria-activedescendant` wiring, so a screen
+     * reader user pressing ArrowDown got no announcement of which result was
+     * now selected. That is a real, demonstrated accessibility gap and the
+     * actual reason this item named `cmdk` as a candidate — but the fix is
+     * the standard ARIA 1.2 combobox-with-listbox-popup pattern added to the
+     * EXISTING component, not a library swap: adopting `cmdk` would still
+     * need every `onToggle` integration, group-title rendering and the
+     * `InlineNavSearch` second rendering re-built on top of it for a problem
+     * that `role`/`aria-activedescendant` already solves. `cmdk` is not
+     * adopted.
+     */
+    const listboxId = "command-palette-listbox";
+    const activeId = results[activeIndex] ? `${listboxId}-${activeIndex}` : undefined;
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "lg", showCloseButton: false, children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Input, { ref: inputRef, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, "aria-label": placeholder, role: "combobox", "aria-expanded": results.length > 0, "aria-controls": listboxId, "aria-activedescendant": activeId, autoComplete: "off", className: "flex-1", autoFocus: true }), _jsx(Kbd, { size: "sm", tone: "brand", children: "Esc" })] }), _jsx(Div, { className: "max-h-96", overflow: "y-auto", children: results.length === 0 ? (_jsxs(Text, { size: "sm", color: "muted", align: "center", paddingY: "lg", children: ["No matches for \u201C", query, "\u201D."] })) : (_jsx(Stack, { gap: "none", role: "listbox", id: listboxId, "aria-label": placeholder, children: results.map((item, idx) => (_jsxs(Button, { variant: "ghost", id: `${listboxId}-${idx}`, role: "option", "aria-selected": idx === activeIndex, type: "button", onClick: () => activate(item), onMouseEnter: () => setActiveIndex(idx), justify: "between", rounded: "md", paddingX: "sm", paddingY: "xs", disabled: item.kind === "toggle" && togglingKey === item.key, className: [
                                 "w-full text-left",
                                 idx === activeIndex
                                     ? "bg-[var(--appkit-color-primary-50)] text-[var(--appkit-color-primary-700)]"
                                     : "hover:bg-[var(--appkit-color-surface-elevated)]",
-                            ].join(" "), children: [_jsx(Span, { size: "sm", weight: idx === activeIndex ? "semibold" : "normal", children: item.label }), _jsx(Span, { size: "xs", color: "muted", children: item.groupTitle })] }, item.href))) })) })] }) }));
+                            ].join(" "), children: [_jsx(Span, { size: "sm", weight: idx === activeIndex ? "semibold" : "normal", children: item.label }), item.kind === "toggle" ? (_jsx(Span, { size: "xs", color: item.isOn ? "success" : "muted", children: togglingKey === item.key ? "Saving…" : item.isOn ? "On" : "Off" })) : (_jsx(Span, { size: "xs", color: "muted", children: item.groupTitle }))] }, item.key))) })) })] }) }));
+}
+/**
+ * InlineNavSearch — the SAME ranked nav search as `CommandPalette`, rendered
+ * as an always-visible bar embedded in a page body instead of a `⌘K` popup.
+ * Reuses `rankNavSearchResults` and the `CommandPaletteGroup`/`Item` shapes
+ * directly — this is a second RENDERING of one search concern (inline vs.
+ * overlay), not a second search mechanism, the same relationship `Modal` has
+ * to an inline `Dialog`. Built for a dashboard landing page that wants one
+ * search bar at the top with zero clicks to reach it, rather than requiring
+ * `⌘K` or a header icon first.
+ */
+export function InlineNavSearch({ groups, placeholder = "Search…" }) {
+    const router = useRouter();
+    const toast = useToastSafe();
+    const [query, setQuery] = useState("");
+    const [togglingKey, setTogglingKey] = useState(null);
+    // 🛑 Added 2026-11-03 (same 4B design-spike pass as CommandPalette's ARIA
+    // fix) — this rendering had NO keyboard navigation at all, mouse click
+    // only, unlike its overlay sibling. Same `rankNavSearchResults` results,
+    // same reason to keep arrow-key parity between the two renderings of one
+    // search concern.
+    const [activeIndex, setActiveIndex] = useState(0);
+    const flatItems = useMemo(() => groups.flatMap((g) => g.items.map((item) => ({
+        ...item,
+        groupTitle: g.title,
+        key: item.kind === "toggle" ? `${g.title}:${item.label}` : item.href,
+    }))), [groups]);
+    const results = useMemo(() => (query.trim() ? rankNavSearchResults(flatItems, query) : []), [flatItems, query]);
+    useEffect(() => {
+        setActiveIndex(0);
+    }, [query]);
+    const activate = useCallback(async (item) => {
+        if (item.kind === "toggle") {
+            if (togglingKey)
+                return;
+            setTogglingKey(item.key);
+            try {
+                await item.onToggle();
+            }
+            catch (err) {
+                void normalizeError(err);
+                toast?.showToast(`Couldn't update "${item.label}" — please try again.`, "error");
+            }
+            finally {
+                setTogglingKey(null);
+            }
+            return;
+        }
+        router.push(item.href);
+    }, [router, toast, togglingKey]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setActiveIndex((i) => Math.min(i + 1, results.length - 1));
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setActiveIndex((i) => Math.max(i - 1, 0));
+            return;
+        }
+        if (e.key !== "Enter")
+            return;
+        e.preventDefault();
+        const target = results[activeIndex];
+        if (target)
+            void activate(target);
+    }, [results, activeIndex, activate]);
+    const listboxId = "inline-nav-search-listbox";
+    const activeId = results[activeIndex] ? `${listboxId}-${activeIndex}` : undefined;
+    return (_jsxs(Div, { children: [_jsx(Input, { value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, "aria-label": placeholder, role: "combobox", "aria-expanded": results.length > 0, "aria-controls": listboxId, "aria-activedescendant": activeId, autoComplete: "off", className: "w-full" }), results.length > 0 && (_jsx(Div, { className: "mt-2 max-h-80", overflow: "y-auto", border: "default", rounded: "lg", surface: "elevated", shadow: "md", children: _jsx(Stack, { gap: "none", role: "listbox", id: listboxId, "aria-label": placeholder, children: results.map((item, idx) => (_jsxs(Button, { variant: "ghost", id: `${listboxId}-${idx}`, role: "option", "aria-selected": idx === activeIndex, type: "button", onClick: () => void activate(item), onMouseEnter: () => setActiveIndex(idx), justify: "between", rounded: "none", paddingX: "sm", paddingY: "xs", disabled: item.kind === "toggle" && togglingKey === item.key, className: [
+                            "w-full text-left",
+                            idx === activeIndex
+                                ? "bg-[var(--appkit-color-primary-50)] text-[var(--appkit-color-primary-700)]"
+                                : "hover:bg-[var(--appkit-color-surface-elevated)]",
+                        ].join(" "), children: [_jsx(Span, { size: "sm", weight: idx === activeIndex ? "semibold" : "normal", children: item.label }), item.kind === "toggle" ? (_jsx(Span, { size: "xs", color: item.isOn ? "success" : "muted", children: togglingKey === item.key ? "Saving…" : item.isOn ? "On" : "Off" })) : (_jsx(Span, { size: "xs", color: "muted", children: item.groupTitle }))] }, item.key))) }) }))] }));
 }
 /**
  * useCommandPaletteHotkey — opens the palette on `⌘K`/`Ctrl+K` anywhere on
@@ -96,3 +215,17 @@ export function useCommandPaletteHotkey(onOpen) {
         return () => window.removeEventListener("keydown", handler);
     }, [onOpen]);
 }
+/**
+ * Owns the open-state + hotkey + render — the entire admin-only
+ * `AdminCommandPaletteMount` consumer file had no admin-specific logic at
+ * all, so Phase 4B (overhaul brief) folded it in here rather than writing
+ * two more near-identical copies for store/user (Rule of Three, hit on
+ * arrival rather than waited out). Each portal still supplies its own
+ * `groups` — already permission/entitlement-filtered by its layout — so
+ * this stays one render path with three different inputs, not three paths.
+ */
+export function CommandPaletteMount({ groups, placeholder, }) {
+    const [open, setOpen] = useState(false);
+    useCommandPaletteHotkey(() => setOpen(true));
+    return (_jsx(CommandPalette, { isOpen: open, onClose: () => setOpen(false), groups: groups, placeholder: placeholder }));
+}

package/dist/features/shell/QuickFormDrawer.d.ts

@@ -1,20 +1,8 @@
 import { type ReactNode } from "react";
 import type { ZodType } from "zod";
 import type { FormFieldValue, FormValues } from "../../schemas/types";
-export type QuickFieldType = "text" | "number" | "select" | "toggle" | "date" | "textarea" | "email" | "url";
-export interface QuickFieldDef {
-    name: string;
-    label: string;
-    type: QuickFieldType;
-    options?: {
-        value: string;
-        label: string;
-    }[];
-    required?: boolean;
-    placeholder?: string;
-    helperText?: string;
-    defaultValue?: FormFieldValue;
-}
+import type { QuickFieldDef } from "../../ui/types/quick-field";
+export type { QuickFieldType, QuickFieldDef } from "../../ui/types/quick-field";
 export interface QuickFormDrawerProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/features/shell/SectionForm.js

@@ -10,7 +10,7 @@ import { Row, Stack } from "../../ui/components/Layout.js";
 import { Span } from "../../ui/components/Typography.js";
 import { FormShellContext } from "../../ui/forms/FormShell.js";
 import { LabelPlacementContext, } from "../../ui/forms/FieldLabel.js";
-import { useFormBottomActions } from "../layout/hooks/useFormBottomActions.js";
+import { useFormBottomActions } from "../../ui/forms/useFormBottomActions.js";
 import { useIsDesktop } from "../layout/useIsDesktop.js";
 import { useSectionState } from "../account/hooks/useCollapsedSections.js";
 import { FormSchemaContext } from "./FormShell.js";

package/dist/features/shell/SectionVisibilityGate.d.ts

@@ -0,0 +1,36 @@
+export interface SectionVisibilityGateProps {
+    /** Stable, hand-chosen surface id — same convention `useFieldVisibility` already uses for forms. One surface can gate several section keys at once. */
+    surfaceId: string;
+    /** Which key within that surface this section is gated by. */
+    sectionKey: string;
+    /** Server-rendered initial value (`getFieldVisibility(surfaceId)[sectionKey] !== false`) — required so a real visitor's first paint never shows a section that's about to be hidden client-side. */
+    initialVisible: boolean;
+    children: React.ReactNode;
+}
+/**
+ * The read-only-DISPLAY half of the field-visibility mechanism
+ * `useFieldVisibility.ts`'s own doc comment already promises:
+ * *"One mechanism covering BOTH a form INPUT field... AND a DISPLAY field
+ * on a read-only page... the CALLER decides whether a `false` gates an
+ * `<FieldInput>` render or a `<Text>` display row."* `build-sections.tsx`'s
+ * `fieldVisibility` option is the FORM half (wired into `StoreCreateForm`/
+ * the payout-method form); this is the DISPLAY half, for a whole rendered
+ * SECTION rather than a single field — same storage, same admin toggle
+ * shape, same "admin sees it dimmed in edit mode, everyone else never
+ * sees it when off" rule as `FieldVisibilityEditWrapper`.
+ *
+ * Deliberately generic — not PDP-specific — so the SAME component gates
+ * any "is this whole block of a page visible" decision site-wide, per the
+ * owner's own framing: "all of the whole website parts is made of
+ * widgets... enabled disabled with tags and content from the admin."
+ *
+ * Unlike `buildSectionsFromSchema`'s `fieldVisibility` option (which
+ * fetches nothing itself — the FORM already holds the whole map), this
+ * component calls `useFieldVisibility` directly per mount, since a page's
+ * sections aren't threaded through one shared options object the way a
+ * form's fields are. `useFieldVisibility`'s own fetch-on-mount path is
+ * skipped here because `initialVisible` is always supplied (SSR, not a
+ * `"use client"` page with no fetch opportunity) — same "pass `initial` to
+ * skip the fetch" contract `StoreCreateForm` could use but doesn't.
+ */
+export declare function SectionVisibilityGate({ surfaceId, sectionKey, initialVisible, children }: SectionVisibilityGateProps): import("react").JSX.Element | null;

package/dist/features/shell/SectionVisibilityGate.js

@@ -0,0 +1,46 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div } from "../../ui/components/Div.js";
+import { Icon } from "../../ui/components/Icon.js";
+import { IconButton } from "../../ui/components/IconButton.js";
+import { Row } from "../../ui/components/Layout.js";
+import { Text } from "../../ui/components/Typography.js";
+import { useEditMode } from "../../_internal/client/edit-mode/EditModeProvider.js";
+import { useFieldVisibility } from "./useFieldVisibility.js";
+/**
+ * The read-only-DISPLAY half of the field-visibility mechanism
+ * `useFieldVisibility.ts`'s own doc comment already promises:
+ * *"One mechanism covering BOTH a form INPUT field... AND a DISPLAY field
+ * on a read-only page... the CALLER decides whether a `false` gates an
+ * `<FieldInput>` render or a `<Text>` display row."* `build-sections.tsx`'s
+ * `fieldVisibility` option is the FORM half (wired into `StoreCreateForm`/
+ * the payout-method form); this is the DISPLAY half, for a whole rendered
+ * SECTION rather than a single field — same storage, same admin toggle
+ * shape, same "admin sees it dimmed in edit mode, everyone else never
+ * sees it when off" rule as `FieldVisibilityEditWrapper`.
+ *
+ * Deliberately generic — not PDP-specific — so the SAME component gates
+ * any "is this whole block of a page visible" decision site-wide, per the
+ * owner's own framing: "all of the whole website parts is made of
+ * widgets... enabled disabled with tags and content from the admin."
+ *
+ * Unlike `buildSectionsFromSchema`'s `fieldVisibility` option (which
+ * fetches nothing itself — the FORM already holds the whole map), this
+ * component calls `useFieldVisibility` directly per mount, since a page's
+ * sections aren't threaded through one shared options object the way a
+ * form's fields are. `useFieldVisibility`'s own fetch-on-mount path is
+ * skipped here because `initialVisible` is always supplied (SSR, not a
+ * `"use client"` page with no fetch opportunity) — same "pass `initial` to
+ * skip the fetch" contract `StoreCreateForm` could use but doesn't.
+ */
+export function SectionVisibilityGate({ surfaceId, sectionKey, initialVisible, children }) {
+    const { editMode } = useEditMode();
+    const initial = { [sectionKey]: initialVisible };
+    const { fields, setVisible } = useFieldVisibility(surfaceId, initial);
+    const visible = fields[sectionKey] !== false;
+    if (!editMode && !visible)
+        return null;
+    if (!editMode)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs(Div, { className: visible ? undefined : "opacity-50", children: [_jsxs(Row, { gap: "xs", align: "center", justify: "end", className: "mb-1", children: [!visible && (_jsx(Text, { size: "xs", color: "muted", children: "Hidden from the page" })), _jsx(IconButton, { "aria-label": visible ? `Hide the ${sectionKey} section` : `Show the ${sectionKey} section`, icon: _jsx(Icon, { name: visible ? "view" : "hide", size: "sm" }), size: "sm", variant: "ghost", onClick: () => setVisible(sectionKey, !visible) })] }), children] }));
+}

package/dist/features/shell/WizardFormSteps.d.ts

@@ -0,0 +1,7 @@
+import { type SectionFormProps } from "./SectionForm";
+import type { FormStep } from "./field-ui-meta";
+export interface WizardFormStepsProps<T extends object> extends SectionFormProps<T> {
+    /** Admin-authored wizard grouping. Empty = no wizard, renders like a bare `<SectionForm>`. */
+    steps: FormStep[];
+}
+export declare function WizardFormSteps<T extends object>({ steps, sections, ...rest }: WizardFormStepsProps<T>): import("react").JSX.Element;

package/dist/features/shell/WizardFormSteps.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * WHY: `steps?: {title, fields}[]` (3B item 1b's `SurfaceTemplate` proposal)
+ *      was specified and never implemented — `groupSectionsByStep`
+ *      (`build-sections.tsx`) partitions an already-built `SectionDef[]`;
+ *      this component is the missing RENDERER, gating navigation one page
+ *      at a time instead of `<SectionForm>`'s own ungated, all-sections
+ *      rendering.
+ * WHAT: A drop-in replacement for `<SectionForm>` that gates by step when
+ *       `steps` is non-empty, and renders EXACTLY `<SectionForm>`'s own
+ *       output when it is empty — the default for every surface until an
+ *       admin configures a wizard split.
+ *
+ * Deliberately NOT a change to `SectionForm.tsx` itself: that file has 25+
+ * existing callers, none of which know about steps. Wrapping it here means
+ * none of them had to change, and a bug in step-gating can never reach a
+ * caller that never asked for it.
+ *
+ * @tag domain:forms
+ * @tag layer:shared
+ * @tag pattern:slot-shell
+ * @tag access:client
+ * @tag consumers:surfaces with SurfaceTemplate steps configured
+ * @tag sideEffects:none
+ */
+import { useMemo, useState } from "react";
+import { Button } from "../../ui/components/Button.js";
+import { Row, Stack } from "../../ui/components/Layout.js";
+import { Span } from "../../ui/components/Typography.js";
+import { SectionForm } from "./SectionForm.js";
+import { groupSectionsByStep } from "./build-sections.js";
+export function WizardFormSteps({ steps, sections, ...rest }) {
+    const [currentStep, setCurrentStep] = useState(0);
+    const pages = useMemo(() => groupSectionsByStep(sections, steps), [sections, steps]);
+    // No real wizard — `groupSectionsByStep([], [])` style collapse, or a
+    // `steps` config whose every named field landed in one page. Render the
+    // exact `<SectionForm>` output every non-wizard caller already gets.
+    if (pages.length <= 1) {
+        return _jsx(SectionForm, { sections: sections, ...rest });
+    }
+    // A step index can outlive the config that produced it (an admin removes
+    // a step while someone else's browser tab is mid-wizard) — clamp rather
+    // than let `pages[currentStep]` be `undefined`.
+    const stepIndex = Math.min(currentStep, pages.length - 1);
+    const isLast = stepIndex === pages.length - 1;
+    const page = pages[stepIndex];
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Row, { gap: "sm", wrap: true, "aria-label": "Form steps", children: pages.map((p, i) => (_jsxs(Span, { size: "xs", weight: i === stepIndex ? "semibold" : "normal", color: i === stepIndex ? undefined : "muted", children: [p.title || `Step ${i + 1}`, i < pages.length - 1 ? " →" : ""] }, i))) }), _jsx(SectionForm, { ...rest, sections: page.sections, 
+                // The real submit row (Save/Cancel/Delete) only ever appears on the
+                // LAST page — every earlier page is gated by the Next button below,
+                // never by SectionForm's own bottom bar.
+                hideActions: !isLast, onSubmit: isLast ? rest.onSubmit : () => { } }), _jsxs(Row, { gap: "sm", justify: "between", children: [_jsx(Button, { variant: "outline", type: "button", disabled: stepIndex === 0, onClick: () => setCurrentStep((s) => Math.max(0, s - 1)), children: "Back" }), !isLast && (_jsx(Button, { variant: "primary", type: "button", onClick: () => setCurrentStep((s) => Math.min(pages.length - 1, s + 1)), children: "Next \u2192" }))] })] }));
+}