@mohasinac/appkit 4.27.0 → 4.28.0

package/dist/features/seller/components/SellerAddressesView.js

@@ -9,6 +9,8 @@ import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/const
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
 import { normalizeError } from "../../../errors/normalize";
+import { TextLink } from "../../../ui";
+import { ROUTES } from "../../../constants/index";
 const __O = {
     xAuto: "overflow-x-auto",
 };
@@ -141,7 +143,7 @@ export function SellerAddressesView({ apiBase = SELLER_ENDPOINTS.STORE_ADDRESSES
     const handleDelete = (addr) => setDeleteTargetAddr(addr);
     const set = (key, value) => setDraft((p) => ({ ...p, [key]: value }));
     const setField = (key) => (value) => set(key, value);
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(StickyToolbar, { offset: "header", tone: "default", border: true, padding: "md", children: _jsxs(Row, { justify: "between", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Heading, { level: 2, size: "base", weight: "semibold", color: "primary", children: "Pickup Addresses" }), _jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: "Manage your store's pickup and return locations" })] }), _jsxs(Button, { gap: "sm", size: "sm", onClick: openAdd, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "Add Address" })] })] }) }), _jsxs(Div, { paddingX: "x-md-lg", className: "max-w-2xl", padding: "y-lg", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), isLoading ? (_jsx(Row, { justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })) : addresses.length === 0 ? (_jsxs(Stack, { border: "default", className: "border-2 border-dashed", padding: "y-4xl", align: "center", gap: "3", rounded: "xl", children: [_jsx(MapPin, { className: "h-8 w-8 text-zinc-300 text-[var(--appkit-color-text-muted)]" }), _jsx(Text, { size: "sm", color: "muted", children: "No pickup addresses yet" }), _jsx(Button, { size: "sm", variant: "outline", onClick: openAdd, children: "Add your first address" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Row, { justify: "end", className: "mb-2", children: [_jsx(Button, { size: "sm", variant: listView === "table" ? "primary" : "ghost", onClick: () => setListView("table"), children: "Table" }), _jsx(Button, { size: "sm", variant: listView === "cards" ? "primary" : "ghost", onClick: () => setListView("cards"), children: "Cards" })] }), listView === "cards" ? (_jsx(Grid, { gap: "sm", children: addresses.map((addr) => (_jsx(Div, { className: deletingId === addr.id ? "opacity-50 pointer-events-none" : "", children: _jsx(AddressCard, { address: addr, onEdit: () => openEdit(addr), onDelete: () => handleDelete(addr) }) }, addr.id))) })) : (_jsx(Div, { className: `${__O.xAuto}`, rounded: "lg", border: "default", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { surface: "muted", children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Label" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Name" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "City" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Phone" }), _jsx(Th, { className: "text-right", padding: "sm", weight: "semibold", children: "Actions" })] }) }), _jsx(Tbody, { children: addresses.map((addr) => {
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(StickyToolbar, { offset: "header", tone: "default", border: true, padding: "md", children: _jsxs(Row, { justify: "between", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Heading, { level: 2, size: "base", weight: "semibold", color: "primary", children: "Pickup Addresses" }), _jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: "Manage your store's pickup and return locations" })] }), _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(TextLink, { href: String(ROUTES.STORE.ADDRESSES_NEW), children: "Open full page \u2192" }), _jsxs(Button, { gap: "sm", size: "sm", onClick: openAdd, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "Add Address" })] })] })] }) }), _jsxs(Div, { paddingX: "x-md-lg", className: "max-w-2xl", padding: "y-lg", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), isLoading ? (_jsx(Row, { justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })) : addresses.length === 0 ? (_jsxs(Stack, { border: "default", className: "border-2 border-dashed", padding: "y-4xl", align: "center", gap: "3", rounded: "xl", children: [_jsx(MapPin, { className: "h-8 w-8 text-[var(--appkit-color-text-muted)]" }), _jsx(Text, { size: "sm", color: "muted", children: "No pickup addresses yet" }), _jsx(Button, { size: "sm", variant: "outline", onClick: openAdd, children: "Add your first address" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Row, { justify: "end", className: "mb-2", children: [_jsx(Button, { size: "sm", variant: listView === "table" ? "primary" : "ghost", onClick: () => setListView("table"), children: "Table" }), _jsx(Button, { size: "sm", variant: listView === "cards" ? "primary" : "ghost", onClick: () => setListView("cards"), children: "Cards" })] }), listView === "cards" ? (_jsx(Grid, { gap: "sm", children: addresses.map((addr) => (_jsx(Div, { className: deletingId === addr.id ? "opacity-50 pointer-events-none" : "", children: _jsx(AddressCard, { address: addr, onEdit: () => openEdit(addr), onDelete: () => handleDelete(addr) }) }, addr.id))) })) : (_jsx(Div, { className: `${__O.xAuto}`, rounded: "lg", border: "default", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { surface: "muted", children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Label" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Name" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "City" }), _jsx(Th, { className: "text-left", padding: "sm", weight: "semibold", children: "Phone" }), _jsx(Th, { className: "text-right", padding: "sm", weight: "semibold", children: "Actions" })] }) }), _jsx(Tbody, { children: addresses.map((addr) => {
                                                 const isBanned = addr.banStatus === "banned";
                                                 return (_jsxs(Tr, { className: `border-t border-[var(--appkit-color-border)] ${deletingId === addr.id ? "opacity-50" : ""}`, children: [_jsx(Td, { padding: "sm", children: _jsxs(Row, { gap: "xs", align: "center", children: [_jsx(Span, { children: addr.label }), isBanned && _jsx(Badge, { variant: "danger", size: "sm", children: "Banned" })] }) }), _jsx(Td, { padding: "sm", children: addr.fullName }), _jsxs(Td, { padding: "sm", children: [addr.city, ", ", addr.state] }), _jsx(Td, { className: "tabular-nums", padding: "sm", children: addr.phone }), _jsx(Td, { className: "text-right", padding: "sm", children: isBanned ? (_jsx(Span, { size: "xs", color: "muted", title: "Contact support to resolve address ban", children: "Contact support" })) : (_jsxs(Row, { justify: "end", gap: "xs", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => openEdit(addr), children: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleDelete(addr), children: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label })] })) })] }, addr.id));
                                             }) })] }) }))] }))] }), _jsx(SideDrawer, { isOpen: drawerOpen, onClose: closeDrawer, title: editingId ? "Edit Address" : "Add Address", footer: _jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "outline", onClick: closeDrawer, className: "flex-1", children: "Cancel" }), _jsx(Button, { onClick: handleSave, disabled: saving, className: "flex-1", children: saving ? "Saving…" : editingId ? "Save Changes" : "Add Address" })] }), children: _jsxs(Stack, { gap: "md", padding: "y-2xs", children: [saveError && (_jsx(Div, { textSize: "sm", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: saveError })), _jsx(FieldInput, { name: "label", label: "Label *", hint: "e.g. Warehouse, Shop, Home", type: "text", value: draft.label, onChange: setField("label"), placeholder: "Warehouse", maxLength: 60 }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(FieldInput, { name: "fullName", label: "Full Name *", type: "text", value: draft.fullName, onChange: setField("fullName"), placeholder: "Ravi Kumar", maxLength: 100 }), _jsx(FieldInput, { name: "phone", label: "Phone *", type: "tel", value: draft.phone, onChange: setField("phone"), placeholder: "+91 98765 43210", maxLength: 20 })] }), _jsx(FieldInput, { name: "addressLine1", label: "Address Line 1 *", type: "text", value: draft.addressLine1, onChange: setField("addressLine1"), placeholder: "Shop 12, Main Market", maxLength: 200 }), _jsx(FieldInput, { name: "addressLine2", label: "Address Line 2", type: "text", value: draft.addressLine2, onChange: setField("addressLine2"), placeholder: "Building / Floor (optional)", maxLength: 200 }), _jsx(FieldInput, { name: "landmark", label: "Landmark", type: "text", value: draft.landmark, onChange: setField("landmark"), placeholder: "Near metro station (optional)", maxLength: 100 }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(FieldInput, { name: "city", label: "City *", type: "text", value: draft.city, onChange: setField("city"), placeholder: "Mumbai", maxLength: 100 }), _jsx(FieldInput, { name: "state", label: "State *", type: "text", value: draft.state, onChange: setField("state"), placeholder: "Maharashtra", maxLength: 100 })] }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(FieldInput, { name: "postalCode", label: "Postal Code *", type: "text", value: draft.postalCode, onChange: setField("postalCode"), placeholder: "400001", maxLength: 10 }), _jsx(FieldInput, { name: "country", label: "Country *", type: "text", value: draft.country, onChange: setField("country"), placeholder: "India", maxLength: 60 })] }), _jsx(FieldCheckbox, { name: "isDefault", label: "Set as default pickup address", checked: draft.isDefault, onChange: (c) => set("isDefault", c) })] }) }), deleteTargetAddr && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Address", message: `Delete address "${deleteTargetAddr.label}"? This cannot be undone.`, onConfirm: () => { deleteById(deleteTargetAddr.id); setDeleteTargetAddr(null); }, onClose: () => setDeleteTargetAddr(null), isDeleting: deletingId === deleteTargetAddr.id }))] }));

package/dist/features/seller/components/SellerBidsView.js

@@ -13,6 +13,8 @@ import { SELLER_BID_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue } from "../hooks/useSellerListingData";
 import { DataTable } from "../../admin/components/DataTable";
 import { DataListingView } from "../../admin/components/DataListingView";
+import { TextLink } from "../../../ui";
+import { ROUTES } from "../../../constants/index";
 const DEFAULT_SORT = "-bidDate";
 const SORT_OPTIONS = [
     { value: sortBy("bidDate", "DESC"), label: "Newest" },
@@ -141,5 +143,8 @@ export function SellerBidsView({ endpoint = SELLER_ENDPOINTS.BIDS }) {
         },
     };
     const detailBadge = detail ? bidStatusBadge(detail.status) : null;
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(RecordDetailModal, { isOpen: detail !== null, onClose: () => setDetail(null), title: detail?.productTitle || "Bid", badges: detailBadge ? [{ label: detailBadge.label }] : undefined, fields: detail ? buildBidDetailFields(detail, "seller") : undefined })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(RecordDetailModal, { isOpen: detail !== null, onClose: () => setDetail(null), title: detail?.productTitle || "Bid", badges: detailBadge ? [{ label: detailBadge.label }] : undefined, fields: detail ? buildBidDetailFields(detail, "seller") : undefined, footer: detail ? (
+                // The full page — a modal cannot be linked, bookmarked or reloaded
+                // into, which is the whole reason the page exists.
+                _jsx(TextLink, { href: String(ROUTES.STORE.BID_DETAIL(detail.id)), children: "Open full page \u2192" })) : undefined })] }));
 }

package/dist/features/seller/components/SellerSidebar.js

@@ -24,7 +24,7 @@ const CLS_NAV_ICON_ACTIVE = "text-warning dark:text-warning";
 function NavLink({ item, isActive, onClick }) {
     return (_jsxs(Link, { href: item.href, onClick: onClick, className: `flex items-center justify-end gap-[var(--appkit-space-2-5)] rounded-lg px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[0.8125rem] font-medium leading-tight transition-colors ${isActive
             ? CLS_NAV_ACTIVE
-            : "text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]/60 hover:text-zinc-800 hover:text-[var(--appkit-color-text-muted)]"}`, children: [item.icon && _jsx(Span, { size: "base", className: "shrink-0 opacity-60", children: item.icon }), _jsx(Span, { className: "truncate", children: item.label }), item.badge != null && item.badge > 0 && (_jsx(Span, { weight: "bold", className: CLS_NAV_BADGE, children: item.badge }))] }));
+            : "text-[var(--appkit-color-text-muted)] hover:bg-surface-hover hover:text-zinc-800 hover:text-[var(--appkit-color-text-muted)]"}`, children: [item.icon && _jsx(Span, { size: "base", className: "shrink-0 opacity-60", children: item.icon }), _jsx(Span, { className: "truncate", children: item.label }), item.badge != null && item.badge > 0 && (_jsx(Span, { weight: "bold", className: CLS_NAV_BADGE, children: item.badge }))] }));
 }
 function FlatContent({ items, activeHref, storeName, storeLogoURL, onItemClick, }) {
     const activeItem = findActiveNavItem(items, activeHref);

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

@@ -70,6 +70,26 @@ export interface SectionFormProps<T extends object = Record<string, JsonValue>>
      */
     onCancel?: () => void;
     cancelLabel?: string;
+    /**
+     * A destructive action for this record — almost always Delete.
+     *
+     * Added because an edit page nearly always has one and `SectionForm` had
+     * nowhere to put it, which left two bad options: hand-roll a row and pass
+     * `hideActions` (which ALSO silences the pinned mobile bar, since it is
+     * gated `bottomBar && !hideActions` — and that bar is the main reason to
+     * sectionise a short form), or render it outside the form, where every page
+     * invents its own placement.
+     *
+     * Rendered LEFT-aligned, opposite Save, so it is not adjacent to the
+     * primary action — a Delete beside Save is a misclick waiting to happen.
+     * `confirm` is expected to come from an ActionDef's `confirmation` config
+     * (Rule #7); this only carries the label and handler.
+     */
+    destructiveAction?: {
+        label: string;
+        onClick: () => void;
+        disabled?: boolean;
+    };
     /**
      * Publish Save/Cancel and the error sheet into the mobile bottom-chrome
      * tier. On by default: a SectionForm is a page-level form, which is exactly
@@ -109,5 +129,5 @@ export interface UseSectionFormNavResult<T extends object> {
 export declare function useSectionFormNav<T extends object = Record<string, JsonValue>>(sections: SectionDef<T>[], values?: T): UseSectionFormNavResult<T>;
 /** DOM id for a section panel — kept in one place so nav and render agree. */
 export declare function sectionAnchorId(id: string): string;
-export declare function SectionForm<T extends object = Record<string, JsonValue>>({ sections, values, onChange, onSubmit, submitLabel, isLoading, schema, openIds: controlledOpenIds, onOpenChange, expandMode, hideActions, onValidationChange, onCancel, cancelLabel, bottomBar, }: SectionFormProps<T>): import("react").JSX.Element;
+export declare function SectionForm<T extends object = Record<string, JsonValue>>({ sections, values, onChange, onSubmit, submitLabel, isLoading, schema, openIds: controlledOpenIds, onOpenChange, expandMode, hideActions, destructiveAction, onValidationChange, onCancel, cancelLabel, bottomBar, }: SectionFormProps<T>): import("react").JSX.Element;
 export default SectionForm;

package/dist/features/shell/SectionForm.js

@@ -4,7 +4,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "r
 import { Button } from "../../ui/components/Button";
 import { CollapsibleSection } from "../../ui/components/CollapsibleSection";
 import { Badge } from "../../ui/components/Badge";
-import { Row, Span, Stack } from "../../ui";
+import { Div, Row, Span, Stack } from "../../ui";
 import { FormShellContext } from "../../ui/forms/FormShell";
 import { useFormBottomActions } from "../layout/hooks/useFormBottomActions";
 import { FormSchemaContext } from "./FormShell";
@@ -55,7 +55,7 @@ export function useSectionFormNav(sections, values) {
 export function sectionAnchorId(id) {
     return `section-${id}`;
 }
-export function SectionForm({ sections, values, onChange, onSubmit, submitLabel = "Save", isLoading = false, schema, openIds: controlledOpenIds, onOpenChange, expandMode = "multi", hideActions = false, onValidationChange, onCancel, cancelLabel, bottomBar = true, }) {
+export function SectionForm({ sections, values, onChange, onSubmit, submitLabel = "Save", isLoading = false, schema, openIds: controlledOpenIds, onOpenChange, expandMode = "multi", hideActions = false, destructiveAction, onValidationChange, onCancel, cancelLabel, bottomBar = true, }) {
     const inheritedSchema = useContext(FormSchemaContext);
     /*
      * SectionForm deliberately does not OWN a FormShellContext (the owning view
@@ -124,6 +124,7 @@ export function SectionForm({ sections, values, onChange, onSubmit, submitLabel
         submitLabel,
         cancelLabel,
         isLoading,
+        destructiveAction,
         enabled: bottomBar && !hideActions,
     });
     const toggle = useCallback((id) => {
@@ -149,6 +150,17 @@ export function SectionForm({ sections, values, onChange, onSubmit, submitLabel
                         toggle(section.id); }, keepMounted: section.keepMounted, renderHeaderExtra: errorCount > 0
                         ? () => (_jsxs(Badge, { variant: "danger", children: [errorCount, " ", errorCount === 1 ? "issue" : "issues"] }))
                         : undefined, children: section.render({ values, onChange: handleFieldChange, errors: fieldErrors }) }, section.id));
-            }), !hideActions && (_jsx(Row, { justify: "end", paddingY: "y-sm", children: _jsx(Button, { variant: "primary", type: "submit", onClick: handleSubmit, isLoading: isLoading, disabled: isLoading, children: submitLabel }) }))] }));
+            }), !hideActions && (
+            /*
+             * `justify="between"` so a destructive action sits opposite Save
+             * rather than beside it. With no destructive action the empty <Div>
+             * still holds the left edge, keeping Save right-aligned.
+             *
+             * Cancel is rendered HERE as well as in the mobile bar. It used to
+             * exist only in the bar, so every page converted to SectionForm
+             * silently lost its Cancel button on desktop — found converting
+             * `store/categories/new`, which had one before.
+             */
+            _jsxs(Row, { justify: "between", align: "center", paddingY: "y-sm", gap: "sm", wrap: true, children: [_jsx(Div, { children: destructiveAction && (_jsx(Button, { variant: "danger", type: "button", onClick: destructiveAction.onClick, disabled: destructiveAction.disabled || isLoading, children: destructiveAction.label })) }), _jsxs(Row, { gap: "sm", children: [onCancel && (_jsx(Button, { variant: "ghost", type: "button", onClick: onCancel, disabled: isLoading, children: cancelLabel })), _jsx(Button, { variant: "primary", type: "submit", onClick: handleSubmit, isLoading: isLoading, disabled: isLoading, children: submitLabel })] })] }))] }));
 }
 export default SectionForm;

package/dist/features/shell/build-sections.js

@@ -165,7 +165,16 @@ export function buildSectionsFromSchema(schema, opts = {}) {
             // in-flight media upload. Inference sets this for every media field.
             keepMounted: sectionFields.some((f) => f.meta.sectionKeepMounted),
             fields: sectionFields.map((f) => f.name),
-            render: ({ values, onChange, errors }) => (_jsx(_Fragment, { children: packRows(sectionFields).map((row, i) => (_jsx(FormGroup, { columns: ROW_COLUMNS[row[0].meta.row ?? "pair"], children: row.map((field) => renderField(field, { values, onChange, errors }, opts)) }, `${sectionId}-row-${i}`))) })),
+            render: ({ values, onChange, errors }) => {
+                /*
+                 * Filtered per render, not once at build time — the predicate reads
+                 * the CURRENT values, so a field appears the moment its condition
+                 * becomes true. Rows are packed after filtering so a hidden field
+                 * does not leave a gap in a two-up row.
+                 */
+                const visible = sectionFields.filter((f) => !f.meta.when || f.meta.when(values));
+                return (_jsx(_Fragment, { children: packRows(visible).map((row, i) => (_jsx(FormGroup, { columns: ROW_COLUMNS[row[0].meta.row ?? "pair"], children: row.map((field) => renderField(field, { values, onChange, errors }, opts)) }, `${sectionId}-row-${i}`))) }));
+            },
         };
     });
 }

package/dist/features/shell/field-ui-meta.d.ts

@@ -1,4 +1,5 @@
 import type { ZodTypeAny } from "zod";
+import type { FormValues } from "../../schemas/types";
 /** How much of a row a field claims on desktop. Everything is 1-up on mobile. */
 export type FieldRow = "full" | "pair" | "third" | "quarter";
 /** Which input primitive renders the field, and its default row span. */
@@ -29,6 +30,26 @@ export interface FieldUiMeta {
      * which discards an in-flight media upload.
      */
     sectionKeepMounted?: boolean;
+    /**
+     * Render this field only when the predicate holds.
+     *
+     * `SectionDef` has had a section-level `when` since W0; this is the
+     * per-FIELD equivalent, and without it a whole class of form cannot be
+     * derived at all — a shipping config shows "Price per kg" for a flat rate,
+     * a payment method shows bank fields for a UPI account. Those pages were
+     * stuck hand-writing their fields.
+     *
+     * A predicate is a UI concern living on a schema that the ROUTE also parses.
+     * That is already true of every key here (`section`, `row`, `kind`), and the
+     * server ignores the registry entirely — annotations key a WeakMap, they are
+     * not part of the parsed shape.
+     *
+     * 🛑 Hiding a field does NOT relax its schema. A required field hidden by
+     * `when` still fails validation, invisibly. Pair it with `.optional()` plus
+     * a `superRefine` that requires it under the same condition — the way
+     * `supportTicketCreateSchema` handles `orderId` for `order_issue`.
+     */
+    when?: (values: FormValues) => boolean;
     /** Row span. Drives the `<FormGroup columns>` packing. */
     row?: FieldRow;
     /** Control kind. Picks the primitive and the default row span. */

package/dist/features/shipments/components/AdminShipmentLotItemsView.js

@@ -4,6 +4,8 @@ import React from "react";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import { Alert, Badge, Button, Div, FieldCheckbox, FieldInput, Grid, Heading, Modal, Pagination, Skeleton, Stack, Table, Thead, Tbody, Tr, Th, Td, Text, Textarea, } from "../../../ui";
 import { apiClient } from "../../../http";
+import { createShipmentItemSchema } from "../schemas/validation";
+import { ValidationError } from "../../../errors/validation-error";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { useShipmentItems } from "../hooks/useShipments";
@@ -42,12 +44,27 @@ export function AdminShipmentLotItemsView({ shipmentId, lotId }) {
     const [linkTarget, setLinkTarget] = React.useState(null);
     const addItemMutation = useApiMutation({
         successMessage: "Item added",
-        mutationFn: () => apiClient.post(ADMIN_ENDPOINTS.SHIPMENT_LOT_ITEMS(shipmentId, lotId), {
-            title,
-            quantity: Number(quantity),
-            isForSelfUse,
-            price: isForSelfUse ? undefined : Math.round(Number(priceRupees) * 100) / 100,
-        }),
+        mutationFn: () => {
+            /*
+             * `createShipmentItemSchema` already validated this route and had no
+             * client consumer, so its rule — a projected sale price is required
+             * unless the item is for self use — only ever surfaced as a 400 that
+             * named no field. `Number(priceRupees)` also yields NaN on a typo,
+             * which the schema rejects and the old payload sent.
+             */
+            const parsed = createShipmentItemSchema.safeParse({
+                title,
+                quantity: Number(quantity),
+                isForSelfUse,
+                price: isForSelfUse ? undefined : Math.round(Number(priceRupees) * 100) / 100,
+            });
+            if (!parsed.success) {
+                // ValidationError carries the issue list; a bare Error flattens it to
+                // one string and loses which field failed.
+                throw new ValidationError(parsed.error.issues[0]?.message ?? "Check the item details.", parsed.error.issues);
+            }
+            return apiClient.post(ADMIN_ENDPOINTS.SHIPMENT_LOT_ITEMS(shipmentId, lotId), parsed.data);
+        },
         onSuccess: () => {
             setTitle("");
             setQuantity("1");

package/dist/features/site-settings/components/ActionPermissionsManager.js

@@ -57,7 +57,7 @@ const CATEGORY_COLORS = {
     "Messaging": "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300",
     "Seller": "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
     "Orders": "bg-lime-100 text-lime-800 dark:bg-lime-900/30 dark:text-lime-300",
-    "Account": "bg-[var(--appkit-color-surface)] text-zinc-700 bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]",
+    "Account": "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]",
 };
 const ALL_ACTION_IDS = Object.values(ACTION_ID);
 export function ActionPermissionsManager({ initialConfig, onUpdate }) {

package/dist/features/store-extensions/repository/store-extensions.repositories.d.ts

@@ -1,15 +1,32 @@
 /**
  * S-STORE Extension Repositories
  *
- * 11 lightweight BaseRepository subclasses. None of these collections store
- * PII directly so no `createWithId` override is required (Pattern #9). Uses
- * the BaseRepository public API only: `findById`, `findBy`, `findAll`,
- * `create`, `update`, `delete`.
+ * 11 lightweight BaseRepository subclasses.
+ *
+ * This header used to claim "none of these collections store PII directly" —
+ * that was wrong: `PayoutMethodsRepository` holds `upiVpa`, `accountNumber` and
+ * `ifscCode`, which sat in cleartext because of it. It now declares `piiFields`
+ * and BaseRepository's write hooks encrypt them on every write path, so no
+ * per-method override is needed (which is the point of the hooks — Pattern #9
+ * described overrides that never existed).
+ *
+ * The other ten hold no PII and use the BaseRepository public API only.
  */
 import { BaseRepository } from "../../../providers/db-firebase";
+import type { DocumentSnapshot } from "firebase-admin/firestore";
 import { type AnalyticsAlertDocument, type AnalyticsCardDocument, type ItemRequestDocument, type ListingTemplateDocument, type ModerationQueueDocument, type PayoutMethodDocument, type ReportDocument, type ShippingConfigDocument, type StoreCategoryDocument, type StoreGoogleConfigDocument, type StoreWhatsAppConfigDocument } from "../schemas/firestore";
 export declare class PayoutMethodsRepository extends BaseRepository<PayoutMethodDocument> {
+    /**
+     * Bank/UPI details, encrypted at rest by BaseRepository's write hooks.
+     *
+     * This repository had no encryption at all. Nothing queries these by equality
+     * (`listByStore` filters on `storeId`), so no read path depended on their
+     * plaintext.
+     */
+    protected piiFields: readonly ["upiVpa", "accountNumber", "ifscCode"];
     constructor();
+    /** Decrypt on read so callers see the shape they wrote. */
+    protected mapDoc<D = PayoutMethodDocument>(snap: DocumentSnapshot): D;
     listByStore(storeId: string): Promise<{
         items: PayoutMethodDocument[];
     }>;

package/dist/features/store-extensions/repository/store-extensions.repositories.js

@@ -1,16 +1,36 @@
 /**
  * S-STORE Extension Repositories
  *
- * 11 lightweight BaseRepository subclasses. None of these collections store
- * PII directly so no `createWithId` override is required (Pattern #9). Uses
- * the BaseRepository public API only: `findById`, `findBy`, `findAll`,
- * `create`, `update`, `delete`.
+ * 11 lightweight BaseRepository subclasses.
+ *
+ * This header used to claim "none of these collections store PII directly" —
+ * that was wrong: `PayoutMethodsRepository` holds `upiVpa`, `accountNumber` and
+ * `ifscCode`, which sat in cleartext because of it. It now declares `piiFields`
+ * and BaseRepository's write hooks encrypt them on every write path, so no
+ * per-method override is needed (which is the point of the hooks — Pattern #9
+ * described overrides that never existed).
+ *
+ * The other ten hold no PII and use the BaseRepository public API only.
  */
 import { BaseRepository } from "../../../providers/db-firebase";
+import { decryptPiiFields } from "../../../security/pii-encrypt";
 import { ANALYTICS_ALERTS_COLLECTION, ANALYTICS_CARDS_COLLECTION, ITEM_REQUESTS_COLLECTION, LISTING_TEMPLATES_COLLECTION, MODERATION_QUEUE_COLLECTION, PAYOUT_METHODS_COLLECTION, REPORTS_COLLECTION, SHIPPING_CONFIGS_COLLECTION, STORE_CATEGORIES_COLLECTION, STORE_GOOGLE_CONFIG_COLLECTION, STORE_WHATSAPP_CONFIG_COLLECTION, } from "../schemas/firestore";
 export class PayoutMethodsRepository extends BaseRepository {
     constructor() {
         super(PAYOUT_METHODS_COLLECTION);
+        /**
+         * Bank/UPI details, encrypted at rest by BaseRepository's write hooks.
+         *
+         * This repository had no encryption at all. Nothing queries these by equality
+         * (`listByStore` filters on `storeId`), so no read path depended on their
+         * plaintext.
+         */
+        this.piiFields = ["upiVpa", "accountNumber", "ifscCode"];
+    }
+    /** Decrypt on read so callers see the shape they wrote. */
+    mapDoc(snap) {
+        const raw = super.mapDoc(snap);
+        return decryptPiiFields(raw, [...this.piiFields]);
     }
     async listByStore(storeId) {
         const items = await this.findBy("storeId", storeId);

package/dist/features/store-extensions/schemas/shipping-config-form.js

@@ -66,17 +66,30 @@ export const shippingConfigFormSchema = z
     method: annotate(shippingMethodSchema, {
         section: "basics", quick: true, order: 2, row: "pair",
     }),
+    /*
+     * Each rate field shows only for the method it belongs to. A flat-rate
+     * rule has no price-per-kg, and showing one invites a seller to fill in a
+     * number the checkout will never read.
+     *
+     * These pair with the `superRefine` below, which requires the field under
+     * the SAME condition — hiding a required field would otherwise fail
+     * validation invisibly.
+     */
     flatRate: annotate(amount("Flat rate").optional(), {
         section: "rates", sectionLabel: "Rates", order: 1, row: "pair",
+        when: (v) => v.method === "flat",
     }),
     pricePerKg: annotate(amount("Price per kg").optional(), {
         section: "rates", order: 2, row: "pair",
+        when: (v) => v.method === "weight",
     }),
     freeAbove: annotate(amount("Free above").optional(), {
         section: "rates", order: 3, row: "pair",
+        when: (v) => v.method === "free",
     }),
     expressSurcharge: annotate(amount("Express surcharge").optional(), {
         section: "rates", order: 4, row: "pair",
+        when: (v) => v.method === "express",
     }),
     estimatedDays: annotate(z.coerce.number().int("Estimated days must be a whole number.").min(0).max(365).optional(), { section: "rates", order: 5, row: "pair" }),
     isDefault: annotate(z.boolean(), {

package/dist/features/store-extensions/schemas/store-category-form.js

@@ -17,7 +17,7 @@
  * parses this: `storeId` is set from the session, never from the body, so a
  * caller cannot write a category into someone else's store by adding a field.
  *
- * `productIds` and `isActive` are deliberately absent: they are managed after
+ * `productIds` is deliberately absent: it is managed after
  * creation (assigning products, toggling visibility), not typed into the
  * create form, and the repository supplies their defaults.
  *

package/dist/features/stores/actions/store-query-actions.js

@@ -4,6 +4,7 @@
  * Public and seller-facing read functions for store listings, products,
  * auctions and reviews.  No auth — callers decide whether auth is needed.
  */
+import { cache } from "react";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { NotFoundError } from "../../../errors";
 import { filterTestDataForViewer, filterSingleTestData } from "../../../_internal/server/features/tester/visibility";
@@ -26,8 +27,31 @@ export async function listStores(params = {}, viewer) {
     const result = await storeRepository.listStores(model);
     return { ...result, items: filterTestDataForViewer(result.items, viewer) };
 }
+/**
+ * Request-scoped memo of the raw store fetch.
+ *
+ * CLAUDE.md § SSR Architecture requires `React.cache` on any data-fetch shared
+ * by a page and its `generateMetadata`. `stores/[storeSlug]/layout.tsx` awaits
+ * `getStoreBySlug` in BOTH — so every store page view was doing two identical
+ * Firestore reads.
+ *
+ * 🛑 The cache wraps the REPOSITORY call, not `getStoreBySlug`, and that is
+ * deliberate. `React.cache` memoises per argument list, and the two call sites
+ * pass different arguments — `getStoreBySlug(slug)` in `generateMetadata`,
+ * `getStoreBySlug(slug, viewer)` in the layout body. Wrapping the exported
+ * function would produce two cache entries and dedupe nothing.
+ *
+ * Making them match by reading the session in `generateMetadata` would be worse
+ * still: `getServerSessionUser()` is a dynamic API, and a dynamic API reached
+ * from metadata opts the route out of static rendering — the exact defect that
+ * made the whole site uncacheable (see `src/app/[locale]/layout.tsx`).
+ *
+ * So the read is cached on `storeSlug` alone and the viewer-specific
+ * `filterSingleTestData` is applied outside it, per caller.
+ */
+const fetchStoreBySlug = cache((storeSlug) => storeRepository.findBySlug(storeSlug));
 export async function getStoreBySlug(storeSlug, viewer) {
-    const store = await storeRepository.findBySlug(storeSlug);
+    const store = await fetchStoreBySlug(storeSlug);
     return filterSingleTestData(store, viewer);
 }
 export async function getStoreProducts(storeSlug, params = {}, viewer) {

package/dist/features/stores/components/InteractiveStoreCard.js

@@ -25,5 +25,5 @@ export function InteractiveStoreCard({ store, href, selectable, isSelected = fal
         ].join(" "), onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: !isSelected ? longPress.onTouchCancel : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => {
                     e.preventDefault();
                     onSelect(store.id, !isSelected);
-                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-video w-full ${__O.hidden} flex-shrink-0`, children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-20 select-none", size: "5xl", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-x-0 bottom-0 h-12" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: CLS_RATING_BADGE, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Stack, { paddingY: "b-md", className: "flex-1", padding: "x-md", children: [_jsx(Row, { className: "-mt-5 mb-2", align: "end", justify: "between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx(Div, { className: "relative h-10 w-10 border-2 border-white border-[var(--appkit-color-border-subtle)] bg-[var(--appkit-color-surface)]", rounded: "lg", shadow: "md", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "thumbnail", onError: () => setLogoBroken(true) }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", className: "h-10 w-10 border-2 border-white bg-primary/10 dark:bg-primary/20 text-primary", align: "center", justify: "center", rounded: "lg", shadow: "md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `group-hover:text-primary transition-colors`, truncate: true, size: "sm", weight: "bold", color: "primary", children: store.storeName }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-1 line-clamp-2 text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-1" })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { color: "muted", textSize: "xs", gap: "sm", className: "mt-2.5", wrap: true, children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Row, { border: "top-subtle", paddingY: "y-xs-tall", className: "mt-3", align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { size: "xs", color: "muted", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
+                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-video w-full ${__O.hidden} flex-shrink-0`, children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-20 select-none", size: "5xl", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-x-0 bottom-0 h-12" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: CLS_RATING_BADGE, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Stack, { paddingY: "b-md", className: "flex-1", padding: "x-md", children: [_jsx(Row, { className: "-mt-5 mb-2", align: "end", justify: "between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx(Div, { className: "relative h-10 w-10 border-2 border-[var(--appkit-color-border-subtle)] bg-[var(--appkit-color-surface)]", rounded: "lg", shadow: "md", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "thumbnail", onError: () => setLogoBroken(true) }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", className: "h-10 w-10 border-2 border-white bg-primary/10 dark:bg-primary/20 text-primary", align: "center", justify: "center", rounded: "lg", shadow: "md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `group-hover:text-primary transition-colors`, truncate: true, size: "sm", weight: "bold", color: "primary", children: store.storeName }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-1 line-clamp-2 text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-1" })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { color: "muted", textSize: "xs", gap: "sm", className: "mt-2.5", wrap: true, children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Row, { border: "top-subtle", paddingY: "y-xs-tall", className: "mt-3", align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { size: "xs", color: "muted", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
 }

package/dist/features/stores/components/StoreHeader.js

@@ -8,7 +8,7 @@ import { SellerTrustBadge } from "../../scams/components/SellerTrustBadge";
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_AVATAR = "-mt-8 h-16 w-16 rounded-xl border-2 border-white border-[var(--appkit-color-border-subtle)] bg-warning-surface dark:bg-warning-surface flex items-center justify-center text-warning dark:text-warning font-bold text-[length:var(--appkit-text-2xl)] shadow-sm";
+const CLS_AVATAR = "-mt-8 h-16 w-16 rounded-xl border-2 border-[var(--appkit-color-border-subtle)] bg-warning-surface dark:bg-warning-surface flex items-center justify-center text-warning dark:text-warning font-bold text-[length:var(--appkit-text-2xl)] shadow-sm";
 const CLS_STARS = "inline-flex items-center gap-[var(--appkit-space-1)] text-warning";
 const CLS_FOLLOW_BTN = "rounded-lg border border-warning px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium text-warning hover:bg-warning-surface transition-colors";
 const CLS_WARN_BANNER = "mt-3 rounded-lg bg-warning-surface dark:bg-warning-surface border border-warning dark:border-warning px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] text-warning dark:text-warning";

package/dist/features/stores/components/StoreNavTabs.js

@@ -1,8 +1,7 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useRouter } from "next/navigation";
-import { Button, Div, Select, TextLink } from "../../../ui";
-const CLS_ACTIVE_TAB = "border-primary text-primary";
+import { TabBarButton, TabBarShell, TabsNavSelect, TextLink } from "../../../ui";
 export function StoreNavTabs({ tabs, dropdownTabs = [], dropdownPlaceholder = "Browse listings", activeValue, onTabChange, renderTabBar, className = "", }) {
     const router = useRouter();
     const handleChange = (v) => onTabChange?.(v);
@@ -18,9 +17,22 @@ export function StoreNavTabs({ tabs, dropdownTabs = [], dropdownPlaceholder = "B
             router.push(tab.href);
         handleChange(tab.value);
     };
-    return (_jsxs(Div, { layout: "flex", gap: "2", align: "center", role: "tablist", border: "bottom", className: `overflow-x-auto ${className}`, children: [dropdownTabs.length > 0 && (_jsx(Select, { bare: true, "aria-label": dropdownPlaceholder, options: dropdownTabs.map((tab) => ({ value: tab.value, label: tab.label })), value: activeDropdownTab?.value ?? "", placeholder: activeDropdownTab ? undefined : dropdownPlaceholder, onValueChange: handleDropdownChange, className: `max-w-[12rem] flex-shrink-0 whitespace-nowrap ${activeDropdownTab ? CLS_ACTIVE_TAB : ""}` })), tabs.map((tab) => tab.href ? (_jsx(TextLink, { variant: "bare", href: tab.href, role: "tab", "aria-selected": activeValue === tab.value, paddingX: "md", paddingY: "xs", size: "sm", weight: "medium", className: `whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
-                    ? CLS_ACTIVE_TAB
-                    : "border-transparent text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)] hover:text-neutral-800 hover:text-[var(--appkit-color-text-muted)]"}`, children: tab.label }, tab.value)) : (_jsx(Button, { variant: "ghost", type: "button", role: "tab", "aria-selected": activeValue === tab.value, onClick: () => handleChange(tab.value), paddingX: "md", paddingY: "sm", textSize: "sm", weight: "medium", rounded: "none", className: `whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
-                    ? CLS_ACTIVE_TAB
-                    : "border-transparent text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)] hover:text-neutral-800 hover:text-[var(--appkit-color-text-muted)]"}`, children: tab.label }, tab.value)))] }));
+    /*
+     * The listing-type picker goes in `leading` — i.e. INSIDE the shell but
+     * OUTSIDE the role="tablist" element. It used to be a direct child of the
+     * tablist, which is invalid ARIA: a <select> is not a role="tab". Its old
+     * `max-w-[12rem] flex-shrink-0` sizing also went onto the inner <select>,
+     * the wrong element for sizing utilities (Root Cause #29); those now live
+     * on `.appkit-tabs-dropdown` in Tabs.style.css.
+     */
+    const leading = dropdownTabs.length > 0 ? (_jsx(TabsNavSelect, { ariaLabel: dropdownPlaceholder, options: dropdownTabs.map((tab) => ({ value: tab.value, label: tab.label })), value: activeDropdownTab?.value ?? "", placeholder: activeDropdownTab ? undefined : dropdownPlaceholder, selected: Boolean(activeDropdownTab), onValueChange: handleDropdownChange })) : undefined;
+    /*
+     * Triggers carry `.appkit-tabs-trigger` and NOTHING else — no padding /
+     * size / weight props, no conditional colour classes. `important: true` is
+     * set in both tailwind configs, so any surviving utility would beat the
+     * component CSS unconditionally. The old inactive string also contained
+     * contradictory duplicates (`hover:text-neutral-800` immediately overridden
+     * by `hover:text-…text-muted`), so hover had been a no-op.
+     */
+    return (_jsx(TabBarShell, { className: className, ariaLabel: "Store sections", leading: leading, activeKey: activeValue, children: tabs.map((tab) => tab.href ? (_jsx(TextLink, { variant: "bare", href: tab.href, role: "tab", "aria-selected": activeValue === tab.value, className: "appkit-tabs-trigger", children: tab.label }, tab.value)) : (_jsx(TabBarButton, { selected: activeValue === tab.value, onClick: () => handleChange(tab.value), children: tab.label }, tab.value))) }));
 }

package/dist/features/support/repository/support.repository.d.ts

@@ -1,5 +1,6 @@
 import { BaseRepository } from "../../../providers/db-firebase";
 import type { FirebaseSieveFields, FirebaseSieveResult, SieveModel } from "../../../providers/db-firebase";
+import type { DocumentSnapshot } from "firebase-admin/firestore";
 import { type SupportTicketDocument, type SupportTicketCreateInput, type SupportTicketUpdateInput, type TicketMessage, type TicketStatus } from "../schemas/firestore";
 import { type HistoryActor } from "../../../_internal/shared/history/index";
 /** Who/why for a write that lands in `statusHistory`. */
@@ -11,7 +12,18 @@ export interface TicketWriteContext {
 }
 export declare class SupportRepository extends BaseRepository<SupportTicketDocument> {
     static readonly SIEVE_FIELDS: FirebaseSieveFields;
+    /**
+     * Ticket PII, encrypted by BaseRepository's write hooks.
+     *
+     * `SUPPORT_TICKET_PII_FIELDS` existed but was only ever used to scrub status
+     * history — the documents themselves were never encrypted. Safe to enable:
+     * nothing queries these by equality (the admin list searches `subject`), so
+     * no read path depends on their plaintext.
+     */
+    protected piiFields: readonly ["userEmail", "userDisplayName", "assignedToName"];
     constructor();
+    /** Decrypt on read so callers see the shape they wrote. */
+    protected mapDoc<D = SupportTicketDocument>(snap: DocumentSnapshot): D;
     createTicket(input: SupportTicketCreateInput): Promise<SupportTicketDocument>;
     getUserTickets(userId: string, page?: number, pageSize?: number): Promise<FirebaseSieveResult<SupportTicketDocument>>;
     getTicketById(ticketId: string): Promise<SupportTicketDocument | null>;

package/dist/features/support/repository/support.repository.js

@@ -3,11 +3,26 @@ import { BaseRepository, prepareForFirestore, parseSieveDateValue, } from "../..
 import { normalizeError } from "../../../errors/normalize";
 import { DatabaseError } from "../../../errors";
 import { SUPPORT_TICKET_FIELDS } from "../../../constants/field-names";
+import { decryptPiiFields } from "../../../security/pii-encrypt";
 import { SUPPORT_TICKET_COLLECTION, SUPPORT_TICKET_PII_FIELDS, SUPPORT_TICKET_TRACKED_FIELDS, TicketStatusValues, ACTIVE_TICKET_STATUSES, } from "../schemas/firestore";
 import { withHistory } from "../../../_internal/shared/history/index";
 export class SupportRepository extends BaseRepository {
     constructor() {
         super(SUPPORT_TICKET_COLLECTION);
+        /**
+         * Ticket PII, encrypted by BaseRepository's write hooks.
+         *
+         * `SUPPORT_TICKET_PII_FIELDS` existed but was only ever used to scrub status
+         * history — the documents themselves were never encrypted. Safe to enable:
+         * nothing queries these by equality (the admin list searches `subject`), so
+         * no read path depends on their plaintext.
+         */
+        this.piiFields = SUPPORT_TICKET_PII_FIELDS;
+    }
+    /** Decrypt on read so callers see the shape they wrote. */
+    mapDoc(snap) {
+        const raw = super.mapDoc(snap);
+        return decryptPiiFields(raw, [...SUPPORT_TICKET_PII_FIELDS]);
     }
     async createTicket(input) {
         try {

package/dist/features/support/schemas/ticket-create-form.d.ts

@@ -0,0 +1,33 @@
+import { z } from "zod";
+import { type TicketCategory } from "./firestore";
+/**
+ * 🛑 `annotate()` must be the OUTERMOST call on each field — it keys a WeakMap
+ * by schema instance and every zod wrapper returns a new one.
+ */
+export declare const supportTicketCreateSchema: z.ZodEffects<z.ZodObject<{
+    category: z.ZodEnum<[TicketCategory, ...TicketCategory[]]>;
+    subject: z.ZodString;
+    description: z.ZodString;
+    orderId: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    category: TicketCategory;
+    description: string;
+    subject: string;
+    orderId?: string | undefined;
+}, {
+    category: TicketCategory;
+    description: string;
+    subject: string;
+    orderId?: string | undefined;
+}>, {
+    category: TicketCategory;
+    description: string;
+    subject: string;
+    orderId?: string | undefined;
+}, {
+    category: TicketCategory;
+    description: string;
+    subject: string;
+    orderId?: string | undefined;
+}>;
+export type SupportTicketCreateValues = z.infer<typeof supportTicketCreateSchema>;