@mohasinac/appkit 2.8.1 → 2.8.3

package/dist/features/about/components/UnauthorizedView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack } from "../../../ui";
+import { Div, Heading, Text, Section, Stack } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { ShieldAlert, Home, LogIn } from "lucide-react";
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-rose-600 to-red-700 dark:from-rose-700 dark:to-red-800";
@@ -23,7 +23,7 @@ export async function UnauthorizedView({ heroBannerClass = DEFAULT_HERO_CLASS, }
             isPrimary: false,
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "unauthorizedview-div-218", children: [_jsx(Section, { className: `${heroBannerClass} text-white min-h-[60vh] flex flex-col items-center justify-center py-20 text-center`, children: _jsxs("div", { className: `${page.container.sm}`, "data-section": "unauthorizedview-div-219", children: [_jsx("div", { className: `w-20 h-20 rounded-2xl bg-white/20 ${flex.center} mx-auto mb-6`, "data-section": "unauthorizedview-div-220", children: _jsx(ShieldAlert, { className: "w-10 h-10 text-white" }) }), _jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white text-4xl", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-lg mx-auto text-lg mb-8", children: t("subtitle") }), _jsx("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "unauthorizedview-div-221", children: LINKS.map(({ icon: Icon, label, href, isPrimary }) => (_jsx(TextLink, { href: href, className: isPrimary
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white min-h-[60vh] flex flex-col items-center justify-center py-20 text-center`, children: _jsxs(Div, { className: `${page.container.sm}`, children: [_jsx(Div, { className: `w-20 h-20 rounded-2xl bg-white/20 ${flex.center} mx-auto mb-6`, children: _jsx(ShieldAlert, { className: "w-10 h-10 text-white" }) }), _jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white text-4xl", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-lg mx-auto text-lg mb-8", children: t("subtitle") }), _jsx(Div, { className: `${flex.center} gap-4 flex-wrap`, children: LINKS.map(({ icon: Icon, label, href, isPrimary }) => (_jsx(TextLink, { href: href, className: isPrimary
                                     ? "bg-white text-rose-700 font-semibold px-6 py-2.5 rounded-xl hover:bg-white/90 transition-colors"
-                                    : "border border-white/40 text-white px-6 py-2.5 rounded-xl hover:bg-white/10 transition-colors", children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx(Icon, { className: "w-4 h-4" }), label] }) }, href))) })] }) }), _jsx("div", { className: `${page.container.sm} py-10`, "data-section": "unauthorizedview-div-222", children: _jsxs(Section, { className: `rounded-2xl p-6 text-center border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(Heading, { level: 2, className: "mb-2 text-base", children: t("helpTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm mb-3", children: t("helpText") }), _jsxs(Stack, { gap: "sm", className: "flex-row flex-wrap justify-center gap-4", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), variant: "muted", className: "text-sm", children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", className: "text-sm", children: t("contact") })] })] }) })] }));
+                                    : "border border-white/40 text-white px-6 py-2.5 rounded-xl hover:bg-white/10 transition-colors", children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx(Icon, { className: "w-4 h-4" }), label] }) }, href))) })] }) }), _jsx(Div, { className: `${page.container.sm} py-10`, children: _jsxs(Section, { className: `rounded-2xl p-6 text-center border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(Heading, { level: 2, className: "mb-2 text-base", children: t("helpTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm mb-3", children: t("helpText") }), _jsxs(Stack, { gap: "sm", className: "flex-row flex-wrap justify-center gap-4", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), variant: "muted", className: "text-sm", children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", className: "text-sm", children: t("contact") })] })] }) })] }));
 }

package/dist/features/account/components/AddressBook.js

@@ -8,7 +8,7 @@ export function AddressCard({ address, onEdit, onDelete, onSetDefault, labels =
     const line2 = "line2" in address && address.line2
         ? address.line2
         : address.addressLine2;
-    return (_jsxs(Div, { surface: "card", padding: "sm", className: "relative", children: [address.isDefault && (_jsx(Span, { className: "absolute right-3 top-3 rounded-full bg-success-surface px-2 py-0.5 text-xs font-medium text-success", children: labels.defaultBadge ?? "Default" })), address.label && (_jsx(Text, { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-zinc-400", children: address.label })), _jsx(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: line1 }), line2 && _jsx(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: line2 }), _jsxs(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: [address.city, ", ", address.state, " ", address.postalCode] }), _jsx(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: address.country }), address.phone && (_jsx(Text, { className: "mt-1 text-sm text-neutral-500 dark:text-zinc-400", children: address.phone })), _jsxs(Div, { className: `mt-3 flex ${THEME_CONSTANTS.spacing.gap.xs}`, children: [onEdit && (_jsx(Button, { onClick: () => onEdit(address), variant: "ghost", size: "sm", className: "text-xs font-medium text-primary hover:underline", children: labels.edit ?? "Edit" })), onDelete && (_jsx(Button, { onClick: () => onDelete(address.id), variant: "ghost", size: "sm", className: "text-xs font-medium text-error hover:underline", children: labels.delete ?? "Delete" })), !address.isDefault && onSetDefault && (_jsx(Button, { onClick: () => onSetDefault(address.id), variant: "outline", size: "sm", className: "ml-auto text-xs font-medium", children: labels.setDefault ?? "Set default" }))] })] }));
+    return (_jsxs(Div, { surface: "card", padding: "sm", className: "relative", children: [address.isDefault && (_jsx(Span, { size: "xs", weight: "medium", className: "absolute right-3 top-3 rounded-full bg-success-surface px-2 py-0.5 text-success", children: labels.defaultBadge ?? "Default" })), address.label && (_jsx(Text, { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-zinc-400", children: address.label })), _jsx(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: line1 }), line2 && _jsx(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: line2 }), _jsxs(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: [address.city, ", ", address.state, " ", address.postalCode] }), _jsx(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: address.country }), address.phone && (_jsx(Text, { className: "mt-1 text-sm text-neutral-500 dark:text-zinc-400", children: address.phone })), _jsxs(Div, { className: `mt-3 flex ${THEME_CONSTANTS.spacing.gap.xs}`, children: [onEdit && (_jsx(Button, { onClick: () => onEdit(address), variant: "ghost", size: "sm", className: "text-xs font-medium text-primary hover:underline", children: labels.edit ?? "Edit" })), onDelete && (_jsx(Button, { onClick: () => onDelete(address.id), variant: "ghost", size: "sm", className: "text-xs font-medium text-error hover:underline", children: labels.delete ?? "Delete" })), !address.isDefault && onSetDefault && (_jsx(Button, { onClick: () => onSetDefault(address.id), variant: "outline", size: "sm", className: "ml-auto text-xs font-medium", children: labels.setDefault ?? "Set default" }))] })] }));
 }
 export function AddressBook({ addresses, onEdit, onDelete, onSetDefault, onAdd, emptyLabel = "No saved addresses", addLabel = "Add Address", }) {
     return (_jsxs(Div, { className: "space-y-4", children: [addresses.length === 0 && (_jsx(Text, { className: "text-sm text-neutral-500 dark:text-zinc-400", children: emptyLabel })), _jsx(Div, { className: `grid ${THEME_CONSTANTS.spacing.gap.md} sm:grid-cols-2`, children: addresses.map((addr) => (_jsx(AddressCard, { address: addr, onEdit: onEdit, onDelete: onDelete, onSetDefault: onSetDefault }, addr.id))) }), onAdd && (_jsxs(Button, { onClick: onAdd, variant: "outline", className: "mt-2 rounded-lg border border-dashed border-neutral-300 dark:border-slate-600 px-4 py-3 text-sm font-medium text-neutral-500 dark:text-zinc-400 transition hover:border-neutral-400 dark:hover:border-slate-500 hover:text-neutral-700 dark:hover:text-zinc-200", children: ["+ ", addLabel] }))] }));

package/dist/features/account/components/AddressForm.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Checkbox, FormField, FormGroup } from "../../../ui";
+import { Button, Checkbox, Div, FormField, FormGroup } from "../../../ui";
 import { useFormShellState } from "../../../ui/forms";
 import { THEME_CONSTANTS } from "../../../tokens";
 const DEFAULT_LABELS = {
@@ -74,5 +74,5 @@ export function AddressForm({ initialData, onSubmit, onCancel, isLoading = false
         }
         await onSubmit(formData);
     };
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(FormField, { label: mergedLabels.label, name: "label", type: "text", value: formData.label, onChange: (value) => handleChange("label", value), placeholder: mergedPlaceholders.label, required: true }), _jsx(FormField, { label: mergedLabels.fullName, name: "fullName", type: "text", value: formData.fullName, onChange: (value) => handleChange("fullName", value), placeholder: mergedPlaceholders.fullName, required: true, error: shellCtx.errors["fullName"] }), _jsx(FormField, { label: mergedLabels.phone, name: "phone", type: "tel", value: formData.phone, onChange: (value) => handleChange("phone", value), placeholder: mergedPlaceholders.phone, required: true, error: shellCtx.errors["phone"] }), _jsx(FormField, { label: mergedLabels.addressLine1, name: "addressLine1", type: "text", value: formData.addressLine1, onChange: (value) => handleChange("addressLine1", value), placeholder: mergedPlaceholders.addressLine1, required: true, error: shellCtx.errors["addressLine1"] }), _jsx(FormField, { label: mergedLabels.addressLine2, name: "addressLine2", type: "text", value: formData.addressLine2, onChange: (value) => handleChange("addressLine2", value), placeholder: mergedPlaceholders.addressLine2 }), _jsxs(FormGroup, { columns: 3, children: [_jsx(FormField, { label: mergedLabels.city, name: "city", type: "text", value: formData.city, onChange: (value) => handleChange("city", value), placeholder: mergedPlaceholders.city, required: true, error: shellCtx.errors["city"] }), _jsx(FormField, { label: mergedLabels.state, name: "state", type: "text", value: formData.state, onChange: (value) => handleChange("state", value), placeholder: mergedPlaceholders.state, required: true, error: shellCtx.errors["state"] }), _jsx(FormField, { label: mergedLabels.postalCode, name: "postalCode", type: "text", value: formData.postalCode, onChange: (value) => handleChange("postalCode", value), placeholder: mergedPlaceholders.postalCode, required: true, error: shellCtx.errors["postalCode"] })] }), _jsx(FormField, { label: mergedLabels.country, name: "country", type: "text", value: formData.country, onChange: (value) => handleChange("country", value), placeholder: mergedPlaceholders.country, required: true }), _jsx(Checkbox, { checked: formData.isDefault, onChange: (e) => handleChange("isDefault", e.target.checked), label: mergedLabels.setDefault }), _jsxs("div", { className: `flex items-center justify-start ${THEME_CONSTANTS.spacing.gap.xs} pt-2`, "data-section": "addressform-div-223", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isLoading, children: mergedLabels.cancel }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading, children: isLoading ? mergedLabels.loading : effectiveSubmitLabel })] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(FormField, { label: mergedLabels.label, name: "label", type: "text", value: formData.label, onChange: (value) => handleChange("label", value), placeholder: mergedPlaceholders.label, required: true }), _jsx(FormField, { label: mergedLabels.fullName, name: "fullName", type: "text", value: formData.fullName, onChange: (value) => handleChange("fullName", value), placeholder: mergedPlaceholders.fullName, required: true, error: shellCtx.errors["fullName"] }), _jsx(FormField, { label: mergedLabels.phone, name: "phone", type: "tel", value: formData.phone, onChange: (value) => handleChange("phone", value), placeholder: mergedPlaceholders.phone, required: true, error: shellCtx.errors["phone"] }), _jsx(FormField, { label: mergedLabels.addressLine1, name: "addressLine1", type: "text", value: formData.addressLine1, onChange: (value) => handleChange("addressLine1", value), placeholder: mergedPlaceholders.addressLine1, required: true, error: shellCtx.errors["addressLine1"] }), _jsx(FormField, { label: mergedLabels.addressLine2, name: "addressLine2", type: "text", value: formData.addressLine2, onChange: (value) => handleChange("addressLine2", value), placeholder: mergedPlaceholders.addressLine2 }), _jsxs(FormGroup, { columns: 3, children: [_jsx(FormField, { label: mergedLabels.city, name: "city", type: "text", value: formData.city, onChange: (value) => handleChange("city", value), placeholder: mergedPlaceholders.city, required: true, error: shellCtx.errors["city"] }), _jsx(FormField, { label: mergedLabels.state, name: "state", type: "text", value: formData.state, onChange: (value) => handleChange("state", value), placeholder: mergedPlaceholders.state, required: true, error: shellCtx.errors["state"] }), _jsx(FormField, { label: mergedLabels.postalCode, name: "postalCode", type: "text", value: formData.postalCode, onChange: (value) => handleChange("postalCode", value), placeholder: mergedPlaceholders.postalCode, required: true, error: shellCtx.errors["postalCode"] })] }), _jsx(FormField, { label: mergedLabels.country, name: "country", type: "text", value: formData.country, onChange: (value) => handleChange("country", value), placeholder: mergedPlaceholders.country, required: true }), _jsx(Checkbox, { checked: formData.isDefault, onChange: (e) => handleChange("isDefault", e.target.checked), label: mergedLabels.setDefault }), _jsxs(Div, { className: `flex items-center justify-start ${THEME_CONSTANTS.spacing.gap.xs} pt-2`, children: [_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isLoading, children: mergedLabels.cancel }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading, children: isLoading ? mergedLabels.loading : effectiveSubmitLabel })] })] }));
 }

package/dist/features/account/components/AddressInlineSelect.d.ts

@@ -0,0 +1,24 @@
+type OwnerType = "user" | "store";
+interface BaseProps {
+    ownerType: OwnerType;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Show the "+ Create new address" drawer. Defaults to true. */
+    allowCreate?: boolean;
+    drawerTitle?: string;
+    /** Fires after a new address is created and auto-selected. */
+    onCreated?: (id: string) => void;
+}
+interface SingleProps extends BaseProps {
+    multiple?: false;
+    value: string;
+    onChange: (id: string) => void;
+}
+interface MultiProps extends BaseProps {
+    multiple: true;
+    value: string[];
+    onChange: (ids: string[]) => void;
+}
+export type AddressInlineSelectProps = SingleProps | MultiProps;
+export declare function AddressInlineSelect(props: AddressInlineSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/account/components/AddressInlineSelect.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { PaginatedSelect } from "../../../ui/components/PaginatedSelect";
+import { apiClient } from "../../../http";
+import { ACCOUNT_ENDPOINTS, SELLER_ENDPOINTS, } from "../../../constants/api-endpoints";
+import { AddressForm } from "./AddressForm";
+function endpointFor(ownerType) {
+    return ownerType === "store"
+        ? SELLER_ENDPOINTS.STORE_ADDRESSES
+        : ACCOUNT_ENDPOINTS.ADDRESSES;
+}
+function formatLabel(addr) {
+    const parts = [addr.label, addr.fullName, addr.city, addr.state].filter(Boolean);
+    return parts.length > 0 ? parts.join(" — ") : (addr.id ?? "Address");
+}
+function makeLoader(ownerType) {
+    return async (query, _page) => {
+        const raw = await apiClient.get(endpointFor(ownerType));
+        const list = Array.isArray(raw) ? raw : (raw?.data ?? []);
+        const all = list.map((addr) => ({
+            value: String(addr.id ?? ""),
+            label: formatLabel(addr),
+        }));
+        const q = query.trim().toLowerCase();
+        const items = q
+            ? all.filter((a) => a.label.toLowerCase().includes(q))
+            : all;
+        return { items, hasMore: false };
+    };
+}
+function CreateAddressForm({ ownerType, onCreated, onCancel, }) {
+    const [saving, setSaving] = useState(false);
+    const handleSubmit = useCallback(async (data) => {
+        setSaving(true);
+        try {
+            const result = await apiClient.post(endpointFor(ownerType), { ...data, isDefault: data.isDefault ?? false });
+            const id = String(result?.id ?? "");
+            if (!id)
+                return;
+            onCreated({
+                value: id,
+                label: formatLabel({
+                    id,
+                    label: data.label,
+                    fullName: data.fullName,
+                    city: data.city,
+                    state: data.state,
+                }),
+            });
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [ownerType, onCreated]);
+    return (_jsx(AddressForm, { onSubmit: handleSubmit, onCancel: onCancel, isLoading: saving, submitLabel: "Save" }));
+}
+export function AddressInlineSelect(props) {
+    const { ownerType, placeholder = "Select an address…", disabled, allowCreate = true, drawerTitle, onCreated, } = props;
+    const loader = useMemo(() => makeLoader(ownerType), [ownerType]);
+    const renderCreateForm = allowCreate
+        ? ({ onCreated: optCreated, onCancel, }) => (_jsx(CreateAddressForm, { ownerType: ownerType, onCreated: (opt) => {
+                optCreated(opt);
+                onCreated?.(opt.value);
+            }, onCancel: onCancel }))
+        : undefined;
+    const sharedCreate = allowCreate
+        ? {
+            createLabel: "address",
+            drawerTitle: drawerTitle ?? "Add address",
+            renderCreateForm,
+        }
+        : {};
+    if (props.multiple) {
+        return (_jsx(PaginatedSelect, { multiple: true, value: props.value, onChange: (v) => props.onChange(v), loadOptions: loader, placeholder: placeholder, disabled: disabled, ...sharedCreate }));
+    }
+    return (_jsx(PaginatedSelect, { value: props.value || null, onChange: (v) => props.onChange(v ?? ""), loadOptions: loader, placeholder: placeholder, disabled: disabled, ...sharedCreate }));
+}

package/dist/features/account/components/AddressSelectorCreate.d.ts

@@ -11,6 +11,7 @@ export interface AddressSelectorCreateProps {
     label?: string;
     labels?: Partial<AddressSelectorCreateLabels>;
     onCreated?: (id: string) => void;
+    /** Retained for backward-compat; AddressInlineSelect surfaces errors internally. */
     onCreateError?: () => void;
 }
-export declare function AddressSelectorCreate({ value, onChange, disabled, label, labels, onCreated, onCreateError, }: AddressSelectorCreateProps): import("react/jsx-runtime").JSX.Element;
+export declare function AddressSelectorCreate({ value, onChange, disabled, label, labels, onCreated, }: AddressSelectorCreateProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/account/components/AddressSelectorCreate.js

@@ -1,41 +1,14 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { Button, Label, Select, SideDrawer } from "../../../ui";
-import { useAddressSelector } from "../hooks/useAddressSelector";
-import { AddressForm } from "./AddressForm";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div, Label } from "../../../ui";
+import { AddressInlineSelect } from "./AddressInlineSelect";
 const DEFAULT_LABELS = {
     addAddress: "Add Address",
     save: "Save",
     pickupAddress: "Address",
     selectAddress: "Select an address",
 };
-export function AddressSelectorCreate({ value, onChange, disabled = false, label, labels, onCreated, onCreateError, }) {
+export function AddressSelectorCreate({ value, onChange, disabled = false, label, labels, onCreated, }) {
     const mergedLabels = { ...DEFAULT_LABELS, ...labels };
-    const [drawerOpen, setDrawerOpen] = useState(false);
-    const { addresses, isLoading, createAddress: mutate, isSaving, } = useAddressSelector({
-        onCreated: (id) => {
-            setDrawerOpen(false);
-            onChange(id);
-            onCreated?.(id);
-        },
-        onCreateError,
-    });
-    const handleAddressSubmit = useCallback(async (data) => {
-        await mutate(data);
-    }, [mutate]);
-    const formatLabel = (addr) => {
-        const parts = [addr.label, addr.fullName, addr.city, addr.state].filter(Boolean);
-        return parts.join(" - ");
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-section": "addressselectorcreate-div-224", children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs("div", { className: `flex items-center ${THEME_CONSTANTS.spacing.gap.xs}`, "data-section": "addressselectorcreate-div-225", children: [_jsx("div", { className: "flex-1", "data-section": "addressselectorcreate-div-226", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? mergedLabels.pickupAddress, options: [
-                                        { value: "", label: mergedLabels.selectAddress },
-                                        ...addresses.map((addr) => ({
-                                            value: addr.id,
-                                            label: formatLabel(addr),
-                                        })),
-                                    ] }) }), !disabled && (_jsxs(Button, { variant: "outline", size: "sm", type: "button", onClick: () => setDrawerOpen(true), "aria-haspopup": "dialog", children: ["+ ", mergedLabels.addAddress] }))] })] }), _jsx(SideDrawer, { isOpen: drawerOpen, onClose: () => setDrawerOpen(false), title: mergedLabels.addAddress, mode: "create", children: _jsx(AddressForm, { onSubmit: handleAddressSubmit, onCancel: () => setDrawerOpen(false), isLoading: isSaving, submitLabel: mergedLabels.save, labels: {
-                        save: mergedLabels.save,
-                    } }) })] }));
+    return (_jsxs(Div, { children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsx(AddressInlineSelect, { ownerType: "user", value: value, onChange: onChange, disabled: disabled, allowCreate: !disabled, placeholder: mergedLabels.selectAddress, drawerTitle: mergedLabels.addAddress, onCreated: onCreated })] }));
 }

package/dist/features/account/components/AddressesIndexListing.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useAddresses } from "../hooks/useAddresses";
-import { ListingFilterDrawer, ListingToolbar, Text } from "../../../ui";
+import { Div, ListingFilterDrawer, ListingToolbar, Text } from "../../../ui";
 import { AddressBook } from "./AddressBook";
 import { AddressFilters } from "./AddressFilters";
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
@@ -73,6 +73,6 @@ export function AddressesIndexListing({ onAdd, onEdit, onDelete, }) {
             activeOnly: table.get("activeOnly") === "true" || undefined,
         },
     });
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by address, postcode or label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, view: view, onViewChange: (v) => { if (v === "table")
-                    return; setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx("div", { className: "px-3 sm:px-4", children: isLoading ? (_jsx("div", { className: "grid sm:grid-cols-2 gap-4", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 animate-pulse p-4 space-y-2", children: [_jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" })] }, i))) })) : addresses.length === 0 ? (_jsx(Text, { className: "py-8 text-center text-sm text-zinc-500 dark:text-zinc-400", children: table.get(TABLE_KEYS.QUERY) ? `No addresses matching "${table.get(TABLE_KEYS.QUERY)}"` : "No saved addresses." })) : (_jsx(AddressBook, { addresses: addresses, onEdit: onEdit, onDelete: onDelete, onAdd: onAdd })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(AddressFilters, { table: pendingTable }) })] }));
+    return (_jsxs(Div, { className: "space-y-4", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by address, postcode or label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, view: view, onViewChange: (v) => { if (v === "table")
+                    return; setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { className: "px-3 sm:px-4", children: isLoading ? (_jsx(Div, { className: "grid sm:grid-cols-2 gap-4", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 animate-pulse p-4 space-y-2", children: [_jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" })] }, i))) })) : addresses.length === 0 ? (_jsx(Text, { className: "py-8 text-center text-sm text-zinc-500 dark:text-zinc-400", children: table.get(TABLE_KEYS.QUERY) ? `No addresses matching "${table.get(TABLE_KEYS.QUERY)}"` : "No saved addresses." })) : (_jsx(AddressBook, { addresses: addresses, onEdit: onEdit, onDelete: onDelete, onAdd: onAdd })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(AddressFilters, { table: pendingTable }) })] }));
 }

package/dist/features/account/components/ChatWindow.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Heading, Row, Span } from "../../../ui";
 import { THEME_CONSTANTS } from "../../../tokens";
+const CLS_DOT_ON = "bg-emerald-500";
 export function ChatWindow({ labels = {}, isConnected = true, isLoading = false, error, renderLoadingIndicator, renderMessages, renderInput, className = "", }) {
-    return (_jsxs(Div, { className: className, children: [_jsxs(Row, { justify: "between", className: "pb-3 border-b border-neutral-200 dark:border-neutral-700 mb-3", children: [_jsxs(Row, { className: THEME_CONSTANTS.spacing.gap.xs, children: [labels.title && _jsx(Heading, { level: 4, children: labels.title }), _jsx(Span, { className: `w-2 h-2 rounded-full ${isConnected ? "bg-emerald-500" : "bg-zinc-400"}`, "aria-label": isConnected ? labels.connected : labels.disconnected })] }), isLoading && (renderLoadingIndicator?.() ?? null)] }), error ?? null, renderMessages(), renderInput()] }));
+    return (_jsxs(Div, { className: className, children: [_jsxs(Row, { justify: "between", className: "pb-3 border-b border-neutral-200 dark:border-neutral-700 mb-3", children: [_jsxs(Row, { className: THEME_CONSTANTS.spacing.gap.xs, children: [labels.title && _jsx(Heading, { level: 4, children: labels.title }), _jsx(Span, { className: `w-2 h-2 rounded-full ${isConnected ? CLS_DOT_ON : "bg-zinc-400"}`, "aria-label": isConnected ? labels.connected : labels.disconnected })] }), isLoading && (renderLoadingIndicator?.() ?? null)] }), error ?? null, renderMessages(), renderInput()] }));
 }

package/dist/features/account/components/NotificationBell.js

@@ -1,11 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
-import { Button, Heading, Li, Row, Spinner, Span, Text, TextLink, Ul, } from "../../../ui";
+import { Button, Heading, Li, Div, Row, Spinner, Span, Text, TextLink, Ul, } from "../../../ui";
 import { useClickOutside, useMessage } from "../../../react";
 import { formatRelativeTime } from "../../../utils";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { useNotifications } from "../hooks/useNotifications";
+const __O = {
+    hidden: "overflow-hidden",
+    yAuto: "overflow-y-auto",
+};
+const CLS_UNREAD_BADGE = "absolute -top-1 -right-1 bg-red-500 text-white min-w-[20px] h-5 px-1.5 flex items-center justify-center rounded-full shadow-md";
+const CLS_UNREAD_PILL = "ml-2 bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 px-2 py-0.5 rounded-full";
 const DEFAULT_ICONS = {
     order_placed: "🛍️",
     order_confirmed: "✅",
@@ -67,7 +73,7 @@ export function NotificationBell({ limit = 10, viewAllHref, labels, icons, rende
     }, [handleMarkRead, setIsOpen]);
     const renderActionLink = renderLink ??
         ((props) => (_jsx(TextLink, { href: props.href, onClick: props.onClick, className: props.className, children: props.children })));
-    return (_jsxs("div", { className: "relative", ref: dropdownRef, "data-section": "notificationbell-div-227", children: [renderBellButton({ hideOnMobile, buttonClassName, labels, unreadCount, handleToggle, isOpen }), isOpen && renderNotificationDropdown({
+    return (_jsxs(Div, { className: "relative", ref: dropdownRef, children: [renderBellButton({ hideOnMobile, buttonClassName, labels, unreadCount, handleToggle, isOpen }), isOpen && renderNotificationDropdown({
                 dropdownClassName, labels, unreadCount, isMarkingAll, handleMarkAllRead,
                 isLoading, notifications: notifications, notificationIcons,
                 handleMarkRead, handleMarkReadAndClose, renderActionLink, viewAllHref,
@@ -76,17 +82,17 @@ export function NotificationBell({ limit = 10, viewAllHref, labels, icons, rende
 }
 function renderBellButton(props) {
     const { hideOnMobile, buttonClassName, labels, unreadCount, handleToggle, isOpen } = props;
-    return (_jsxs(Button, { onClick: handleToggle, className: `${hideOnMobile ? "hidden md:flex" : "flex"} p-2.5 md:p-3 rounded-xl transition-colors relative text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-white ${buttonClassName}`, "aria-label": labels.title, "aria-expanded": isOpen, children: [_jsx("svg", { className: "w-6 h-6 md:w-7 md:h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), unreadCount > 0 && (_jsx(Span, { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs min-w-[20px] h-5 px-1.5 flex items-center justify-center rounded-full font-semibold shadow-md", children: unreadCount > 99 ? "99+" : unreadCount }))] }));
+    return (_jsxs(Button, { onClick: handleToggle, className: `${hideOnMobile ? "hidden md:flex" : "flex"} p-2.5 md:p-3 rounded-xl transition-colors relative text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-white ${buttonClassName}`, "aria-label": labels.title, "aria-expanded": isOpen, children: [_jsx("svg", { className: "w-6 h-6 md:w-7 md:h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), unreadCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_UNREAD_BADGE, children: unreadCount > 99 ? "99+" : unreadCount }))] }));
 }
 function renderNotificationDropdown(props) {
     const { dropdownClassName, labels, unreadCount, isMarkingAll, handleMarkAllRead, isLoading, notifications, notificationIcons, handleMarkRead, handleMarkReadAndClose, renderActionLink, viewAllHref, setIsOpen } = props;
-    return (_jsxs("div", { className: `absolute right-0 top-full mt-2 w-80 sm:w-96 rounded-xl shadow-2xl border border-zinc-200 bg-white dark:border-slate-800 dark:bg-slate-950 z-50 overflow-hidden ${dropdownClassName}`, "data-section": "notificationbell-div-228", children: [_jsxs(Row, { justify: "between", gap: "none", className: "px-4 py-3 border-b border-zinc-200 dark:border-slate-800", children: [_jsxs(Heading, { level: 3, className: "font-semibold text-zinc-900 dark:text-white", children: [labels.title, unreadCount > 0 && _jsxs(Span, { className: "ml-2 text-xs bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 px-2 py-0.5 rounded-full font-medium", children: [unreadCount, " ", labels.unread] })] }), unreadCount > 0 && (_jsx(Button, { onClick: handleMarkAllRead, disabled: isMarkingAll, className: "text-xs text-primary hover:underline font-medium disabled:opacity-50", children: isMarkingAll ? labels.loading : labels.markAllRead }))] }), _jsx("div", { className: "max-h-96 overflow-y-auto", "data-section": "notificationbell-div-229", children: renderNotificationListContent({ isLoading, notifications, notificationIcons, labels, handleMarkRead, handleMarkReadAndClose, renderActionLink }) }), viewAllHref && (_jsx("div", { className: "px-4 py-3 border-t border-zinc-200 dark:border-slate-800 text-center", "data-section": "notificationbell-div-234", children: renderActionLink({ href: viewAllHref, onClick: () => setIsOpen(false), className: "text-sm text-primary hover:underline font-medium", children: labels.viewAll }) }))] }));
+    return (_jsxs(Div, { className: `absolute right-0 top-full mt-2 w-80 sm:w-96 rounded-xl shadow-2xl border border-zinc-200 bg-white dark:border-slate-800 dark:bg-slate-950 z-50 ${__O.hidden} ${dropdownClassName}`, children: [_jsxs(Row, { justify: "between", gap: "none", className: "px-4 py-3 border-b border-zinc-200 dark:border-slate-800", children: [_jsxs(Heading, { level: 3, className: "font-semibold text-zinc-900 dark:text-white", children: [labels.title, unreadCount > 0 && _jsxs(Span, { size: "xs", weight: "medium", className: CLS_UNREAD_PILL, children: [unreadCount, " ", labels.unread] })] }), unreadCount > 0 && (_jsx(Button, { onClick: handleMarkAllRead, disabled: isMarkingAll, className: "text-xs text-primary hover:underline font-medium disabled:opacity-50", children: isMarkingAll ? labels.loading : labels.markAllRead }))] }), _jsx(Div, { className: `max-h-96 ${__O.yAuto}`, children: renderNotificationListContent({ isLoading, notifications, notificationIcons, labels, handleMarkRead, handleMarkReadAndClose, renderActionLink }) }), viewAllHref && (_jsx(Div, { className: "px-4 py-3 border-t border-zinc-200 dark:border-slate-800 text-center", children: renderActionLink({ href: viewAllHref, onClick: () => setIsOpen(false), className: "text-sm text-primary hover:underline font-medium", children: labels.viewAll }) }))] }));
 }
 function renderNotificationListContent(props) {
     const { isLoading, notifications, notificationIcons, labels, handleMarkRead, handleMarkReadAndClose, renderActionLink } = props;
     if (isLoading)
-        return _jsx("div", { className: "flex items-center justify-center py-10", "data-section": "notificationbell-div-230", children: _jsx(Spinner, { size: "md" }) });
+        return _jsx(Div, { className: "flex items-center justify-center py-10", children: _jsx(Spinner, { size: "md" }) });
     if (notifications.length === 0)
-        return (_jsxs("div", { className: "flex flex-col items-center justify-center py-10 px-4 text-center", "data-section": "notificationbell-div-231", children: [_jsx("svg", { className: "w-12 h-12 text-zinc-300 dark:text-zinc-600 mb-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), _jsx(Text, { className: "font-medium text-zinc-900 dark:text-white", children: labels.empty }), _jsx(Text, { size: "sm", className: "mt-1 text-zinc-500 dark:text-zinc-400", children: labels.emptyDesc })] }));
-    return (_jsx(Ul, { children: notifications.map((notification) => (_jsxs(Li, { className: `group flex items-start gap-3 px-4 py-3 border-b border-zinc-200 dark:border-slate-800 last:border-0 transition-colors hover:bg-zinc-50 dark:hover:bg-slate-900 ${!notification.isRead ? "bg-primary/5 dark:bg-primary/10" : ""}`, children: [_jsx(Span, { className: "text-xl flex-shrink-0 mt-0.5", children: notificationIcons[notification.type] ?? "🔔" }), _jsxs("div", { className: "flex-1 min-w-0", "data-section": "notificationbell-div-232", children: [_jsxs("div", { className: `flex items-start justify-between ${THEME_CONSTANTS.spacing.gap.xs}`, "data-section": "notificationbell-div-233", children: [_jsxs(Text, { size: "sm", className: "font-medium text-zinc-900 dark:text-white leading-tight", children: [notification.title, !notification.isRead && _jsx(Span, { className: "ml-1.5 inline-block w-2 h-2 rounded-full bg-primary flex-shrink-0 align-middle" })] }), _jsx(Span, { className: "text-xs text-zinc-500 dark:text-zinc-400 flex-shrink-0", children: formatRelativeTime(notification.createdAt) })] }), _jsx(Text, { size: "sm", className: `text-zinc-600 dark:text-zinc-300 mt-0.5 ${THEME_CONSTANTS.utilities.textClamp2}`, children: notification.message }), _jsxs(Row, { gap: "3", className: "mt-1.5", children: [notification.actionUrl && renderActionLink({ href: notification.actionUrl, onClick: () => { void handleMarkReadAndClose(notification); }, className: "text-xs text-primary hover:underline font-medium", children: notification.actionLabel ?? labels.viewAction }), !notification.isRead && _jsx(Button, { variant: "ghost", onClick: () => void handleMarkRead(notification.id), className: "text-xs text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:underline p-0 h-auto", children: labels.markRead })] })] })] }, notification.id))) }));
+        return (_jsxs(Div, { className: "flex flex-col items-center justify-center py-10 px-4 text-center", children: [_jsx("svg", { className: "w-12 h-12 text-zinc-300 dark:text-zinc-600 mb-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), _jsx(Text, { className: "font-medium text-zinc-900 dark:text-white", children: labels.empty }), _jsx(Text, { size: "sm", className: "mt-1 text-zinc-500 dark:text-zinc-400", children: labels.emptyDesc })] }));
+    return (_jsx(Ul, { children: notifications.map((notification) => (_jsxs(Li, { className: `group flex items-start gap-3 px-4 py-3 border-b border-zinc-200 dark:border-slate-800 last:border-0 transition-colors hover:bg-zinc-50 dark:hover:bg-slate-900 ${!notification.isRead ? "bg-primary/5 dark:bg-primary/10" : ""}`, children: [_jsx(Span, { size: "xl", className: "flex-shrink-0 mt-0.5", children: notificationIcons[notification.type] ?? "🔔" }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Div, { className: `flex items-start justify-between ${THEME_CONSTANTS.spacing.gap.xs}`, children: [_jsxs(Text, { size: "sm", className: "font-medium text-zinc-900 dark:text-white leading-tight", children: [notification.title, !notification.isRead && _jsx(Span, { className: "ml-1.5 inline-block w-2 h-2 rounded-full bg-primary flex-shrink-0 align-middle" })] }), _jsx(Span, { size: "xs", className: "text-zinc-500 dark:text-zinc-400 flex-shrink-0", children: formatRelativeTime(notification.createdAt) })] }), _jsx(Text, { size: "sm", className: `text-zinc-600 dark:text-zinc-300 mt-0.5 ${THEME_CONSTANTS.utilities.textClamp2}`, children: notification.message }), _jsxs(Row, { gap: "3", className: "mt-1.5", children: [notification.actionUrl && renderActionLink({ href: notification.actionUrl, onClick: () => { void handleMarkReadAndClose(notification); }, className: "text-xs text-primary hover:underline font-medium", children: notification.actionLabel ?? labels.viewAction }), !notification.isRead && _jsx(Button, { variant: "ghost", onClick: () => void handleMarkRead(notification.id), className: "text-xs text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:underline p-0 h-auto", children: labels.markRead })] })] })] }, notification.id))) }));
 }

package/dist/features/account/components/NotificationPreferencesPanel.js

@@ -3,6 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from "react";
 import { Stack, Row, Text, Button, Div, useToast } from "../../../ui";
 import { useSiteSettings } from "../../../core/hooks/useSiteSettings";
+const __O = {
+    hidden: "overflow-hidden",
+};
 // ─── type-row config ────────────────────────────────────────────────────────
 const TYPE_ROWS = [
     { key: "orderUpdates", label: "Order updates", description: "Placed, shipped, delivered, cancelled, refunded" },
@@ -28,7 +31,7 @@ function ToggleRow({ label, description, checked, onChange, disabled, }) {
 }
 // ─── Section card ───────────────────────────────────────────────────────────
 function SectionCard({ title, children }) {
-    return (_jsxs(Div, { className: "rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] overflow-hidden", children: [_jsx(Div, { className: "px-4 py-3 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-alt,var(--appkit-color-surface))]", children: _jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)]", children: title }) }), _jsx(Div, { className: "px-4", children: children })] }));
+    return (_jsxs(Div, { className: `rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden}`, children: [_jsx(Div, { className: "px-4 py-3 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-alt,var(--appkit-color-surface))]", children: _jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)]", children: title }) }), _jsx(Div, { className: "px-4", children: children })] }));
 }
 export function NotificationPreferencesPanel({ fetchUrl = "/api/user/notification-preferences", saveUrl = "/api/user/notification-preferences", onSave, }) {
     const { showToast } = useToast();

package/dist/features/account/components/UserOffersPanel.js

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState, useTransition } from "react";
 import { Alert, Badge, Button, Div, Heading, LoginRequiredModal, Spinner, Text } from "../../../ui";
 import { isAuthError } from "../../../utils/auth-error";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+const CLS_COUNTER_AMOUNT = "text-sm font-semibold text-blue-600 dark:text-blue-400";
 function formatRupees(amount) {
     if (amount === undefined || amount === null)
         return "—";
@@ -56,7 +57,7 @@ function BuyerOfferCard({ offer, onAcceptCounter, onWithdraw, onCheckout, onUpda
             }
         });
     }
-    return (_jsxs(Div, { surface: "card", padding: "sm", className: "space-y-3", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 flex-wrap", children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: "font-semibold text-sm text-zinc-900 dark:text-zinc-100 truncate", children: offer.productTitle ?? "Unknown Product" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: relativeTime(offer.createdAt) })] }), _jsx(Badge, { variant: statusVariant(offer.status), className: "shrink-0 capitalize text-xs", children: offer.status })] }), _jsxs(Div, { className: "flex gap-4 flex-wrap", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 uppercase tracking-wide", children: "Listed" }), _jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: formatRupees(offer.listedPrice) })] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 uppercase tracking-wide", children: "Your Offer" }), _jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: formatRupees(offer.offerAmount) })] }), offer.counterAmount != null && (_jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 uppercase tracking-wide", children: "Seller Counter" }), _jsx(Text, { className: "text-sm font-semibold text-blue-600 dark:text-blue-400", children: formatRupees(offer.counterAmount) })] })), offer.lockedPrice != null && (_jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 uppercase tracking-wide", children: "Agreed Price" }), _jsx(Text, { className: "text-sm font-semibold text-success", children: formatRupees(offer.lockedPrice) })] }))] }), offer.sellerNote && (_jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 italic", children: ["Seller note: \"", offer.sellerNote, "\""] })), offer.status === "countered" && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Text, { className: "text-xs text-info font-medium", children: ["Seller countered at ", formatRupees(offer.counterAmount), ". Accept or withdraw your offer."] }), _jsxs(Div, { className: "flex gap-2 flex-wrap", children: [_jsx(Button, { size: "sm", variant: "primary", onClick: () => act(() => onAcceptCounter(offer.id), { status: "accepted", lockedPrice: offer.counterAmount }), disabled: isPending, children: isPending ? "Accepting…" : `Accept ${formatRupees(offer.counterAmount)}` }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setConfirming("withdraw"), disabled: isPending, className: "text-error border border-error/20", children: "Withdraw" })] })] })), offer.status === "accepted" && onCheckout && (_jsx(Button, { size: "sm", variant: "primary", onClick: () => act(() => onCheckout(offer.id), { status: "paid" }), disabled: isPending, children: isPending ? "Processing…" : "Checkout at Agreed Price" })), offer.status === "pending" && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setConfirming("withdraw"), disabled: isPending, className: "text-error border border-error/20 text-xs", children: "Withdraw Offer" })), confirming === "withdraw" && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => act(() => onWithdraw(offer.id), { status: "withdrawn" }), disabled: isPending, className: "text-error border border-error/20", children: isPending ? "Withdrawing…" : "Confirm Withdraw" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setConfirming(null), disabled: isPending, children: "Cancel" })] })), error && _jsx(Alert, { variant: "error", children: _jsx(Text, { className: "text-xs", children: error }) })] }));
+    return (_jsxs(Div, { surface: "card", padding: "sm", className: "space-y-3", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 flex-wrap", children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: "font-semibold text-sm text-zinc-900 dark:text-zinc-100 truncate", children: offer.productTitle ?? "Unknown Product" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: relativeTime(offer.createdAt) })] }), _jsx(Badge, { variant: statusVariant(offer.status), className: "shrink-0 capitalize text-xs", children: offer.status })] }), _jsxs(Div, { className: "flex gap-4 flex-wrap", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 uppercase tracking-wide", children: "Listed" }), _jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: formatRupees(offer.listedPrice) })] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 uppercase tracking-wide", children: "Your Offer" }), _jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: formatRupees(offer.offerAmount) })] }), offer.counterAmount != null && (_jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 uppercase tracking-wide", children: "Seller Counter" }), _jsx(Text, { className: CLS_COUNTER_AMOUNT, children: formatRupees(offer.counterAmount) })] })), offer.lockedPrice != null && (_jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400 uppercase tracking-wide", children: "Agreed Price" }), _jsx(Text, { className: "text-sm font-semibold text-success", children: formatRupees(offer.lockedPrice) })] }))] }), offer.sellerNote && (_jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 italic", children: ["Seller note: \"", offer.sellerNote, "\""] })), offer.status === "countered" && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Text, { className: "text-xs text-info font-medium", children: ["Seller countered at ", formatRupees(offer.counterAmount), ". Accept or withdraw your offer."] }), _jsxs(Div, { className: "flex gap-2 flex-wrap", children: [_jsx(Button, { size: "sm", variant: "primary", onClick: () => act(() => onAcceptCounter(offer.id), { status: "accepted", lockedPrice: offer.counterAmount }), disabled: isPending, children: isPending ? "Accepting…" : `Accept ${formatRupees(offer.counterAmount)}` }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setConfirming("withdraw"), disabled: isPending, className: "text-error border border-error/20", children: "Withdraw" })] })] })), offer.status === "accepted" && onCheckout && (_jsx(Button, { size: "sm", variant: "primary", onClick: () => act(() => onCheckout(offer.id), { status: "paid" }), disabled: isPending, children: isPending ? "Processing…" : "Checkout at Agreed Price" })), offer.status === "pending" && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setConfirming("withdraw"), disabled: isPending, className: "text-error border border-error/20 text-xs", children: "Withdraw Offer" })), confirming === "withdraw" && (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => act(() => onWithdraw(offer.id), { status: "withdrawn" }), disabled: isPending, className: "text-error border border-error/20", children: isPending ? "Withdrawing…" : "Confirm Withdraw" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setConfirming(null), disabled: isPending, children: "Cancel" })] })), error && _jsx(Alert, { variant: "error", children: _jsx(Text, { className: "text-xs", children: error }) })] }));
 }
 export function UserOffersPanel({ fetchEndpoint = "/api/user/offers", onAcceptCounter, onWithdraw, onCheckout, className = "", }) {
     const [offers, setOffers] = useState([]);

package/dist/features/account/components/UserSidebar.js

@@ -4,9 +4,13 @@ import { useState, useCallback, useEffect } from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ConfirmDeleteModal, Li, Nav, Span, Ul } from "../../../ui";
+import { ConfirmDeleteModal, Div, Li, Nav, Span, Ul } from "../../../ui";
 import { BottomSheet } from "../../layout/BottomSheet";
 import { SidebarCollapseToggle } from "../../../_internal/client/features/layout/SidebarCollapseToggle";
+const __O = {
+    hidden: "overflow-hidden",
+    yAuto: "overflow-y-auto",
+};
 function isNavItemActive(item, activeHref) {
     return activeHref === item.href || activeHref.startsWith(item.href + "/");
 }
@@ -23,7 +27,7 @@ function NavLink({ item, isActive, onClick }) {
     const linkClass = `flex items-center gap-2.5 rounded-lg px-3 py-2 text-[0.8125rem] font-medium leading-tight transition-colors ${isActive
         ? "bg-primary-50 dark:bg-primary-900/25 text-primary-700 dark:text-primary-300"
         : "text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-zinc-900 dark:hover:text-zinc-100"}`;
-    return (_jsxs(_Fragment, { children: [_jsxs(Link, { href: item.href, onClick: handleClick, className: linkClass, children: [item.icon && _jsx(Span, { className: "shrink-0 text-base opacity-70", children: item.icon }), _jsx(Span, { className: "flex-1 truncate", children: item.label })] }), showConfirm && item.confirm && (_jsx(ConfirmDeleteModal, { isOpen: true, title: item.confirm.title ?? "Confirm", message: item.confirm.message, confirmText: "Continue", variant: "warning", onConfirm: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Link, { href: item.href, onClick: handleClick, className: linkClass, children: [item.icon && _jsx(Span, { size: "base", className: "shrink-0 opacity-70", children: item.icon }), _jsx(Span, { className: "flex-1 truncate", children: item.label })] }), showConfirm && item.confirm && (_jsx(ConfirmDeleteModal, { isOpen: true, title: item.confirm.title ?? "Confirm", message: item.confirm.message, confirmText: "Continue", variant: "warning", onConfirm: () => {
                     setShowConfirm(false);
                     onClick?.();
                     window.location.href = item.href;
@@ -51,13 +55,13 @@ function DrawerContent({ groups, items, activeHref, onItemClick, }) {
     return (_jsx(Nav, { "aria-label": "User navigation", className: "py-2", children: groups.map((group) => {
             const isOpen = openGroups[group.title] ?? false;
             const hasActive = group.items.some((i) => activeHref === i.href || activeHref.startsWith(i.href + "/"));
-            return (_jsxs("div", { className: "mb-0.5", children: [_jsxs("button", { type: "button", onClick: () => toggle(group.title), className: `flex w-full items-center justify-between px-4 py-2 text-[0.6875rem] font-semibold uppercase tracking-widest transition-colors ${hasActive && !isOpen
+            return (_jsxs(Div, { className: "mb-0.5", children: [_jsxs("button", { type: "button", onClick: () => toggle(group.title), className: `flex w-full items-center justify-between px-4 py-2 text-[0.6875rem] font-semibold uppercase tracking-widest transition-colors ${hasActive && !isOpen
                             ? "text-primary-600 dark:text-primary-400"
                             : "text-zinc-400 dark:text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"}`, children: [_jsx("span", { children: group.title }), _jsx("svg", { className: `w-3 h-3 transition-transform duration-150 ${isOpen ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M19 9l-7 7-7-7" }) })] }), isOpen && (_jsx(Ul, { className: "space-y-0.5 px-3 pb-1", children: group.items.map((item) => (_jsx(Li, { children: _jsx(NavLink, { item: item, isActive: isNavItemActive(item, activeHref), onClick: onItemClick }) }, item.href))) }))] }, group.title));
         }) }));
 }
 function DrawerPanel({ title, onClose, children, }) {
-    return (_jsxs("div", { className: "hidden md:block", children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40 backdrop-blur-sm", onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 right-0 z-50 h-full w-64 bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-700 flex flex-col shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3.5 border-b border-zinc-100 dark:border-slate-800 shrink-0", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-400 dark:text-zinc-400", children: title }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "flex items-center justify-center w-7 h-7 rounded-md text-zinc-400 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: children })] })] }));
+    return (_jsxs(Div, { className: "hidden md:block", children: [_jsx(Div, { className: "fixed inset-0 z-40 bg-black/40 backdrop-blur-sm", onClick: onClose, "aria-hidden": "true" }), _jsxs(Div, { role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 right-0 z-50 h-full w-64 bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-700 flex flex-col shadow-2xl", children: [_jsxs(Div, { className: "flex items-center justify-between px-4 py-3.5 border-b border-zinc-100 dark:border-slate-800 shrink-0", children: [_jsx(Span, { size: "xs", weight: "semibold", className: "uppercase tracking-widest text-zinc-400 dark:text-zinc-400", children: title }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "flex items-center justify-center w-7 h-7 rounded-md text-zinc-400 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: children })] })] }));
 }
 export function UserSidebar({ items, groups, mobileOpen = false, onCloseMobile, desktopOpen = false, onToggle, variant = "overlay" }) {
     const pathname = usePathname();
@@ -73,15 +77,15 @@ export function UserSidebar({ items, groups, mobileOpen = false, onCloseMobile,
     // ── Persistent sidebar variant (desktop left slide-over, mobile bottom-sheet) ──────
     if (variant === "sidebar") {
         const handleToggle = onToggle ?? close;
-        return (_jsxs(_Fragment, { children: [desktopOpen && (_jsx("div", { className: "hidden md:block fixed inset-0 bg-black/40 backdrop-blur-[2px] z-30", onClick: handleToggle, "aria-hidden": "true" })), _jsxs("div", { className: "hidden md:flex fixed left-0 z-40 transition-transform duration-300", style: {
+        return (_jsxs(_Fragment, { children: [desktopOpen && (_jsx(Div, { className: "hidden md:block fixed inset-0 bg-black/40 backdrop-blur-[2px] z-30", onClick: handleToggle, "aria-hidden": "true" })), _jsxs(Div, { className: "hidden md:flex fixed left-0 z-40 transition-transform duration-300", style: {
                         top: "var(--header-height, 3.5rem)",
                         height: "calc(100vh - var(--header-height, 3.5rem))",
                         width: "13rem",
                         transform: desktopOpen ? "translateX(0)" : "translateX(calc(-100% + 1.25rem))",
-                    }, children: [_jsxs("div", { className: "flex-1 bg-white dark:bg-slate-900 border-r border-zinc-200 dark:border-slate-800 flex flex-col overflow-hidden shadow-xl", children: [_jsx("div", { className: "px-4 py-3.5 border-b border-zinc-100 dark:border-slate-800 shrink-0", children: _jsx("span", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-400 dark:text-zinc-400", children: "My Account" }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname }) })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle })] }), _jsx("div", { className: "md:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: "My Account", children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }) }) })] }));
+                    }, children: [_jsxs(Div, { surface: "default", className: `flex-1 border-r border-zinc-200 dark:border-slate-800 flex flex-col ${__O.hidden} shadow-xl`, children: [_jsx(Div, { className: "px-4 py-3.5 border-b border-zinc-100 dark:border-slate-800 shrink-0", children: _jsx(Span, { size: "xs", weight: "semibold", className: "uppercase tracking-widest text-zinc-400 dark:text-zinc-400", children: "My Account" }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname }) })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle })] }), _jsx(Div, { className: "md:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: "My Account", children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }) }) })] }));
     }
     // ── Overlay variant (default) — portal on desktop, bottom-sheet on mobile ─
     const content = (_jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }));
     return (_jsxs(_Fragment, { children: [mounted && mobileOpen &&
-                createPortal(_jsx(DrawerPanel, { title: "My Account", onClose: close, children: content }), document.body), _jsx("div", { className: "md:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: "My Account", children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }) }) })] }));
+                createPortal(_jsx(DrawerPanel, { title: "My Account", onClose: close, children: content }), document.body), _jsx(Div, { className: "md:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: "My Account", children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }) }) })] }));
 }

package/dist/features/account/components/UserSupportView.js

@@ -2,9 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Div, FormActions, Select, SideDrawer, Text, useToast, } from "../../../ui";
+import { Button, Div, FormActions, Label, Select, SideDrawer, Span, Text, Ul, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { SUPPORT_ENDPOINTS } from "../../../constants/api-endpoints";
+const __P = {
+    p3: "p-3",
+    p4: "p-4",
+};
+const __O = {
+    yAuto: "overflow-y-auto",
+};
 // --- Constants ---------------------------------------------------------------
 const CLS_INPUT = "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary-500";
 const CATEGORY_OPTIONS = [
@@ -24,6 +31,8 @@ const CATEGORY_OPTIONS = [
     { label: "Appeal a ban (unban request)", value: "unban_request" },
     { label: "General", value: "general" },
 ];
+const CLS_MSG_USER = "bg-zinc-50 border border-zinc-200 dark:bg-zinc-900/40 dark:border-zinc-700";
+const CLS_MSG_STAFF = "bg-blue-50 border border-blue-200 dark:bg-blue-900/20 dark:border-blue-800";
 const STATUS_BADGE = {
     open: "bg-info-surface text-info",
     in_progress: "bg-warning-surface text-warning",
@@ -94,15 +103,15 @@ export function UserSupportView(_props) {
 }
 function renderTicketListArea(props) {
     const { isLoading, error, tickets, setSelectedTicket, setDetailOpen } = props;
-    return (_jsxs(_Fragment, { children: [isLoading && (_jsx(Div, { className: "space-y-3", children: [1, 2, 3].map((i) => _jsx("div", { className: "h-16 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" }, i)) })), error && (_jsx(Div, { className: "rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: "Failed to load support tickets." })), !isLoading && tickets.length === 0 && (_jsx(Div, { className: "rounded-xl border border-zinc-200 bg-zinc-50 px-6 py-10 text-center dark:border-zinc-700 dark:bg-zinc-900/40", children: _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "You haven't opened any support tickets yet." }) })), _jsx("ul", { className: "space-y-3", children: tickets.map((ticket) => (_jsx("li", { children: _jsx("button", { type: "button", className: "w-full rounded-xl border border-zinc-200 bg-white p-4 text-left shadow-sm hover:border-primary-300 transition-colors dark:border-zinc-700 dark:bg-zinc-900", onClick: () => { setSelectedTicket(ticket); setDetailOpen(true); }, children: _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100 truncate", children: ticket.subject }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [ticket.category.replace(/_/g, " "), ticket.orderId ? ` · Order: ${ticket.orderId}` : ""] })] }), _jsx("span", { className: `shrink-0 inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_BADGE[ticket.status] ?? STATUS_BADGE.open}`, children: ticket.status.replace(/_/g, " ") })] }) }) }, ticket.id))) })] }));
+    return (_jsxs(_Fragment, { children: [isLoading && (_jsx(Div, { className: "space-y-3", children: [1, 2, 3].map((i) => _jsx(Div, { className: "h-16 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" }, i)) })), error && (_jsx(Div, { className: "rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: "Failed to load support tickets." })), !isLoading && tickets.length === 0 && (_jsx(Div, { className: "rounded-xl border border-zinc-200 bg-zinc-50 px-6 py-10 text-center dark:border-zinc-700 dark:bg-zinc-900/40", children: _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "You haven't opened any support tickets yet." }) })), _jsx(Ul, { className: "space-y-3", children: tickets.map((ticket) => (_jsx("li", { children: _jsx(Button, { variant: "ghost", type: "button", className: "w-full rounded-xl border border-zinc-200 bg-white p-4 text-left shadow-sm hover:border-primary-300 transition-colors dark:border-zinc-700 dark:bg-zinc-900", onClick: () => { setSelectedTicket(ticket); setDetailOpen(true); }, children: _jsxs(Div, { className: "flex items-start justify-between gap-2", children: [_jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100 truncate", children: ticket.subject }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [ticket.category.replace(/_/g, " "), ticket.orderId ? ` · Order: ${ticket.orderId}` : ""] })] }), _jsx(Span, { size: "xs", weight: "medium", className: `shrink-0 inline-flex rounded-full px-2.5 py-0.5 ${STATUS_BADGE[ticket.status] ?? STATUS_BADGE.open}`, children: ticket.status.replace(/_/g, " ") })] }) }) }, ticket.id))) })] }));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderNewTicketDrawer(props) {
     const { newTicketOpen, setNewTicketOpen, newCategory, setNewCategory, newSubject, setNewSubject, newOrderId, setNewOrderId, newDescription, setNewDescription, createMutation } = props;
-    return (_jsx(SideDrawer, { isOpen: newTicketOpen, onClose: () => setNewTicketOpen(false), title: "Open a support ticket", children: _jsxs(Div, { className: "flex flex-col gap-4 p-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: newCategory, onValueChange: setNewCategory }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Subject" }), _jsx("input", { type: "text", value: newSubject, onChange: (e) => setNewSubject(e.target.value), placeholder: "Brief description of the issue", className: CLS_INPUT })] }), newCategory === "order_issue" && (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Order ID" }), _jsx("input", { type: "text", value: newOrderId, onChange: (e) => setNewOrderId(e.target.value), placeholder: "e.g. order-3-20260508-a1b2c3", className: CLS_INPUT })] })), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Description" }), _jsx("textarea", { value: newDescription, onChange: (e) => setNewDescription(e.target.value), rows: 4, placeholder: "Describe the issue in detail\u2026", className: CLS_INPUT })] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => setNewTicketOpen(false), children: "Cancel" }), _jsx(Button, { type: "button", isLoading: createMutation.isPending, disabled: !newSubject.trim() || !newDescription.trim() || createMutation.isPending, onClick: () => createMutation.mutate(), children: "Submit ticket" })] })] }) }));
+    return (_jsx(SideDrawer, { isOpen: newTicketOpen, onClose: () => setNewTicketOpen(false), title: "Open a support ticket", children: _jsxs(Div, { className: `flex flex-col gap-4 ${__P.p4}`, children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: newCategory, onValueChange: setNewCategory }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Subject" }), _jsx("input", { type: "text", value: newSubject, onChange: (e) => setNewSubject(e.target.value), placeholder: "Brief description of the issue", className: CLS_INPUT })] }), newCategory === "order_issue" && (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Order ID" }), _jsx("input", { type: "text", value: newOrderId, onChange: (e) => setNewOrderId(e.target.value), placeholder: "e.g. order-3-20260508-a1b2c3", className: CLS_INPUT })] })), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Description" }), _jsx("textarea", { value: newDescription, onChange: (e) => setNewDescription(e.target.value), rows: 4, placeholder: "Describe the issue in detail\u2026", className: CLS_INPUT })] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => setNewTicketOpen(false), children: "Cancel" }), _jsx(Button, { type: "button", isLoading: createMutation.isPending, disabled: !newSubject.trim() || !newDescription.trim() || createMutation.isPending, onClick: () => createMutation.mutate(), children: "Submit ticket" })] })] }) }));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderTicketDetailDrawer(props) {
     const { detailOpen, setDetailOpen, selectedTicket, replyBody, setReplyBody, replyMutation } = props;
-    return (_jsx(SideDrawer, { isOpen: detailOpen, onClose: () => setDetailOpen(false), title: selectedTicket?.subject ?? "Ticket", children: selectedTicket && (_jsxs(Div, { className: "flex flex-col gap-4 p-4", children: [_jsxs(Div, { className: "flex flex-wrap gap-2", children: [_jsx("span", { className: `inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${STATUS_BADGE[selectedTicket.status] ?? STATUS_BADGE.open}`, children: selectedTicket.status.replace(/_/g, " ") }), _jsx("span", { className: "rounded-full bg-zinc-100 px-2.5 py-1 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", children: selectedTicket.category.replace(/_/g, " ") }), selectedTicket.orderId && _jsxs("span", { className: "rounded-full bg-zinc-100 px-2.5 py-1 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", children: ["Order: ", selectedTicket.orderId] })] }), selectedTicket.description && (_jsxs(Div, { className: "rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-900/40", children: [_jsx(Text, { className: "mb-1 text-xs font-semibold text-zinc-500 uppercase tracking-wide", children: "Your description" }), _jsx(Text, { className: "whitespace-pre-wrap text-sm text-zinc-700 dark:text-zinc-200", children: selectedTicket.description })] })), (selectedTicket.messages ?? []).length > 0 && (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide", children: "Messages" }), _jsx("div", { className: "space-y-2 max-h-72 overflow-y-auto", children: (selectedTicket.messages ?? []).map((msg, i) => (_jsxs("div", { className: `rounded-lg p-3 text-sm ${msg.authorRole === "user" ? "bg-zinc-50 border border-zinc-200 dark:bg-zinc-900/40 dark:border-zinc-700" : "bg-blue-50 border border-blue-200 dark:bg-blue-900/20 dark:border-blue-800"}`, children: [_jsxs("div", { className: "mb-1 flex items-center gap-2 text-xs text-zinc-400 dark:text-zinc-400", children: [_jsx("span", { className: "font-medium text-zinc-600 dark:text-zinc-300", children: ROLE_LABEL[msg.authorRole ?? "user"] ?? msg.authorRole }), msg.createdAt && _jsx("span", { children: new Date(msg.createdAt).toLocaleString() })] }), _jsx(Text, { className: "whitespace-pre-wrap text-zinc-700 dark:text-zinc-200", children: msg.body })] }, msg.id ?? i))) })] })), selectedTicket.status !== "closed" && selectedTicket.status !== "resolved" && (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Reply" }), _jsx("textarea", { value: replyBody, onChange: (e) => setReplyBody(e.target.value), rows: 3, placeholder: "Add a message to your ticket\u2026", className: CLS_INPUT }), _jsx(Button, { type: "button", variant: "primary", size: "sm", isLoading: replyMutation.isPending, disabled: !replyBody.trim() || replyMutation.isPending, onClick: () => replyMutation.mutate(), children: "Send reply" })] }))] })) }));
+    return (_jsx(SideDrawer, { isOpen: detailOpen, onClose: () => setDetailOpen(false), title: selectedTicket?.subject ?? "Ticket", children: selectedTicket && (_jsxs(Div, { className: `flex flex-col gap-4 ${__P.p4}`, children: [_jsxs(Div, { className: "flex flex-wrap gap-2", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex rounded-full px-2.5 py-1 ${STATUS_BADGE[selectedTicket.status] ?? STATUS_BADGE.open}`, children: selectedTicket.status.replace(/_/g, " ") }), _jsx(Span, { size: "xs", className: "rounded-full bg-zinc-100 px-2.5 py-1 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", children: selectedTicket.category.replace(/_/g, " ") }), selectedTicket.orderId && _jsxs(Span, { size: "xs", className: "rounded-full bg-zinc-100 px-2.5 py-1 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", children: ["Order: ", selectedTicket.orderId] })] }), selectedTicket.description && (_jsxs(Div, { className: `rounded-lg border border-zinc-200 bg-zinc-50 ${__P.p3} dark:border-zinc-700 dark:bg-zinc-900/40`, children: [_jsx(Text, { className: "mb-1 text-xs font-semibold text-zinc-500 uppercase tracking-wide", children: "Your description" }), _jsx(Text, { className: "whitespace-pre-wrap text-sm text-zinc-700 dark:text-zinc-200", children: selectedTicket.description })] })), (selectedTicket.messages ?? []).length > 0 && (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide", children: "Messages" }), _jsx(Div, { className: `space-y-2 max-h-72 ${__O.yAuto}`, children: (selectedTicket.messages ?? []).map((msg, i) => (_jsxs(Div, { className: `rounded-lg ${__P.p3} text-sm ${msg.authorRole === "user" ? CLS_MSG_USER : CLS_MSG_STAFF}`, children: [_jsxs(Div, { className: "mb-1 flex items-center gap-2 text-xs text-zinc-400 dark:text-zinc-400", children: [_jsx(Span, { weight: "medium", className: "text-zinc-600 dark:text-zinc-300", children: ROLE_LABEL[msg.authorRole ?? "user"] ?? msg.authorRole }), msg.createdAt && _jsx(Span, { children: new Date(msg.createdAt).toLocaleString() })] }), _jsx(Text, { className: "whitespace-pre-wrap text-zinc-700 dark:text-zinc-200", children: msg.body })] }, msg.id ?? i))) })] })), selectedTicket.status !== "closed" && selectedTicket.status !== "resolved" && (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Reply" }), _jsx("textarea", { value: replyBody, onChange: (e) => setReplyBody(e.target.value), rows: 3, placeholder: "Add a message to your ticket\u2026", className: CLS_INPUT }), _jsx(Button, { type: "button", variant: "primary", size: "sm", isLoading: replyMutation.isPending, disabled: !replyBody.trim() || replyMutation.isPending, onClick: () => replyMutation.mutate(), children: "Send reply" })] }))] })) }));
 }

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

@@ -8,6 +8,8 @@ export { AddressSelectorCreate } from "./AddressSelectorCreate";
 export { NotificationBell } from "./NotificationBell";
 export type { NotificationBellLabels, NotificationBellProps, NotificationBellRenderLinkProps, } from "./NotificationBell";
 export type { AddressSelectorCreateProps, AddressSelectorCreateLabels, } from "./AddressSelectorCreate";
+export { AddressInlineSelect } from "./AddressInlineSelect";
+export type { AddressInlineSelectProps } from "./AddressInlineSelect";
 export { UserAccountHubView } from "./UserAccountHubView";
 export type { UserAccountHubViewProps, UserAccountHubViewLabels, } from "./UserAccountHubView";
 export { ProfileView } from "./ProfileView";

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

@@ -3,6 +3,7 @@ export { AddressCard, AddressBook } from "./AddressBook";
 export { AddressForm } from "./AddressForm";
 export { AddressSelectorCreate } from "./AddressSelectorCreate";
 export { NotificationBell } from "./NotificationBell";
+export { AddressInlineSelect } from "./AddressInlineSelect";
 export { UserAccountHubView } from "./UserAccountHubView";
 export { ProfileView } from "./ProfileView";
 export { UserSettingsView } from "./UserSettingsView";

package/dist/features/account/hooks/useAccount.d.ts

@@ -5,9 +5,9 @@ interface UseProfileOptions {
     endpoint?: string;
 }
 export declare function useProfile(userId: string, opts?: UseProfileOptions): {
-    profile: UserProfile | undefined;
+    profile: NoInfer<UserProfile> | undefined;
     isLoading: boolean;
     error: Error | null;
-    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<UserProfile, Error>>;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<NoInfer<UserProfile>, Error>>;
 };
 export {};