@mohasinac/appkit 3.0.3 → 3.0.4

package/dist/features/categories/components/CategoryGrid.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 import { Div, Row, Span, Stack, Text } from "../../../ui";
+import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv";
 const __P = {
     p3: "p-3",
 };
@@ -11,7 +12,7 @@ const __O = {
 const CLS_FEATURED_DOT = "absolute left-2 top-2 rounded-full bg-warning-surface p-1 leading-none";
 export function CategoryCard({ category, href, onClick, className = "", }) {
     const productCount = category.metrics?.productCount ?? category.productCount ?? 0;
-    const inner = (_jsxs(Stack, { className: "h-full", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-[4/3] w-full ${__O.hidden} flex-shrink-0`, children: [category.display?.coverImage ? (_jsx(Div, { role: "img", "aria-label": category.name, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${category.display.coverImage})` } })) : category.display?.color ? (_jsx(Div, { className: "h-full w-full opacity-80", style: { backgroundColor: category.display.color } })) : null, category.display?.icon && (_jsx(Row, { textSize: "4xl", className: "absolute inset-0", align: "center", justify: "center", children: category.display.icon })), category.isFeatured && (_jsx(Span, { size: "xs", className: CLS_FEATURED_DOT, children: "\u2605" }))] }), _jsxs(Stack, { className: `flex-1 ${__P.p3}.5`, children: [_jsx(Text, { color: "inverse", className: `leading-snug text-neutral-900 dark:text-neutral-100 dark:`, truncate: 2, size: "sm", weight: "semibold", children: category.name }), category.description && (_jsx(Text, { className: `mt-1 flex-1`, color: "muted", truncate: 2, size: "xs", children: category.description })), _jsxs(Row, { className: "mt-2", align: "center", justify: "between", gap: "sm", children: [_jsxs(Text, { size: "xs", color: "faint", children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }), _jsxs(Span, { layout: "inline-flex", gap: "xs", size: "xs", weight: "medium", border: "default", className: "group-hover:bg-primary group-hover:border-primary group-hover:text-white transition-colors", rounded: "md", padding: "pill-sm-tall", color: "muted", children: ["Browse ", _jsx(ArrowRight, { className: "h-3 w-3" })] })] })] })] }));
+    const inner = (_jsxs(Stack, { className: "h-full", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-[4/3] w-full ${__O.hidden} flex-shrink-0`, children: [category.display?.coverImage ? (_jsx("img", { src: category.display.coverImage, alt: category.name, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" })) : category.display?.color ? (_jsx(DynamicBgDiv, { color: category.display.color, className: "h-full w-full opacity-80" })) : null, category.display?.icon && (_jsx(Row, { textSize: "4xl", className: "absolute inset-0", align: "center", justify: "center", children: category.display.icon })), category.isFeatured && (_jsx(Span, { size: "xs", className: CLS_FEATURED_DOT, children: "\u2605" }))] }), _jsxs(Stack, { className: `flex-1 ${__P.p3}.5`, children: [_jsx(Text, { color: "inverse", className: `leading-snug text-neutral-900 dark:text-neutral-100 dark:`, truncate: 2, size: "sm", weight: "semibold", children: category.name }), category.description && (_jsx(Text, { className: `mt-1 flex-1`, color: "muted", truncate: 2, size: "xs", children: category.description })), _jsxs(Row, { className: "mt-2", align: "center", justify: "between", gap: "sm", children: [_jsxs(Text, { size: "xs", color: "faint", children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }), _jsxs(Span, { layout: "inline-flex", gap: "xs", size: "xs", weight: "medium", border: "default", className: "group-hover:bg-primary group-hover:border-primary group-hover:text-white transition-colors", rounded: "md", padding: "pill-sm-tall", color: "muted", children: ["Browse ", _jsx(ArrowRight, { className: "h-3 w-3" })] })] })] })] }));
     const cardClass = `group relative flex flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 shadow-sm transition hover:shadow-md h-full ${className}`;
     if (href) {
         return (_jsx(Link, { href: href, className: cardClass, children: inner }));

package/dist/features/categories/components/CategoryTableColumns.js

@@ -1,10 +1,13 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Row, Span, StatusBadge } from "../../../ui";
 import { MediaImage } from "../../media";
+import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv";
 const __O = {
     hidden: "overflow-hidden",
 };
 const CLS_DELETE_BTN = "text-error hover:text-error dark:text-error";
+const TIER_PL = ["pl-0", "pl-5", "pl-10", "pl-[60px]"];
 const DEFAULT_LABELS = {
     colName: "Name",
     colSlug: "Slug",
@@ -22,13 +25,13 @@ export function getCategoryTableColumns(onEdit, onDelete, labels = {}) {
             {
                 key: "image",
                 header: "",
-                render: (cat) => (_jsx(Div, { className: `relative w-9 h-9 ${__O.hidden} flex-shrink-0`, rounded: "default", children: cat.display?.coverImage ? (_jsx(MediaImage, { src: cat.display.coverImage, alt: "", size: "thumbnail", className: "w-full h-full object-cover" })) : (_jsx(Row, { textSize: "base", className: "w-full h-full", align: "center", justify: "center", style: { backgroundColor: cat.display?.color ?? "var(--appkit-color-text-faint)", color: "var(--appkit-color-text-on-primary)" }, children: cat.display?.icon ?? "🗂️" })) })),
+                render: (cat) => (_jsx(Div, { className: `relative w-9 h-9 ${__O.hidden} flex-shrink-0`, rounded: "default", children: cat.display?.coverImage ? (_jsx(MediaImage, { src: cat.display.coverImage, alt: "", size: "thumbnail", className: "w-full h-full object-cover" })) : (_jsx(DynamicBgDiv, { color: cat.display?.color ?? "var(--appkit-color-text-faint)", className: "w-full h-full flex items-center justify-center text-base text-[var(--appkit-color-text-on-primary)]", children: cat.display?.icon ?? "🗂️" })) })),
             },
             {
                 key: "name",
                 header: L.colName,
                 sortable: true,
-                render: (cat) => (_jsxs(Div, { style: { paddingLeft: `${cat.tier * 20}px` }, children: [cat.name, cat.tier > 0 && (_jsxs(Span, { size: "xs", className: "ml-2", color: "faint", children: ["(Tier ", cat.tier, ")"] }))] })),
+                render: (cat) => (_jsxs(Div, { className: TIER_PL[Math.min(cat.tier, 3)], children: [cat.name, cat.tier > 0 && (_jsxs(Span, { size: "xs", className: "ml-2", color: "faint", children: ["(Tier ", cat.tier, ")"] }))] })),
             },
             {
                 key: "slug",

package/dist/features/categories/components/CategoryTree.js

@@ -7,7 +7,8 @@ function CategoryTreeNode({ item, children = [], activeId, onSelect, depth = 0,
     const hasChildren = children.length > 0;
     const isActive = item.id === activeId;
     const [expanded, setExpanded] = useState(true);
-    const indent = depth * 16;
+    const DEPTH_PL = ["pl-2", "pl-6", "pl-10", "pl-14", "pl-[72px]"];
+    const depthPl = DEPTH_PL[Math.min(depth, 4)];
     return (_jsxs(Div, { children: [_jsxs(Row, { textWeight: "semibold", textSize: "sm", role: "treeitem", "aria-expanded": hasChildren ? expanded : undefined, "aria-selected": isActive, tabIndex: 0, onKeyDown: (e) => {
                     if (e.key === "Enter" || e.key === " ") {
                         if (hasChildren)
@@ -19,7 +20,7 @@ function CategoryTreeNode({ item, children = [], activeId, onSelect, depth = 0,
                     if (hasChildren)
                         setExpanded((p) => !p);
                     onSelect?.(item);
-                }, className: `cursor-pointer py-1.5 transition select-none ${isActive ? "bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400" : "text-neutral-700 hover:bg-neutral-50 dark:text-zinc-300 dark:hover:bg-zinc-800"}`, align: "center", gap: "xs", padding: "x-xs", rounded: "md", style: { paddingLeft: `${8 + indent}px` }, children: [hasChildren && (_jsx(Span, { size: "xs", "aria-hidden": "true", className: `transition-transform duration-150 ${expanded ? "rotate-90" : ""}`, color: "faint", children: "\u25B6" })), !hasChildren && _jsx(Span, { className: "w-3" }), item.display?.icon && (_jsx(Span, { size: "base", "aria-hidden": "true", className: "flex-shrink-0", children: item.display.icon })), _jsx(Text, { className: "flex-1 truncate", children: item.name }), item.metrics && (_jsx(Span, { size: "xs", className: "ml-auto flex-shrink-0 tabular-nums", color: "faint", children: item.metrics.productCount }))] }), hasChildren && expanded && (_jsx(Div, { role: "group", children: children.map((child) => (_jsx(CategoryTreeNode, { item: child, activeId: activeId, onSelect: onSelect, depth: depth + 1 }, child.id))) }))] }));
+                }, className: `cursor-pointer py-1.5 transition select-none ${depthPl} ${isActive ? "bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400" : "text-neutral-700 hover:bg-neutral-50 dark:text-zinc-300 dark:hover:bg-zinc-800"}`, align: "center", gap: "xs", padding: "x-xs", rounded: "md", children: [hasChildren && (_jsx(Span, { size: "xs", "aria-hidden": "true", className: `transition-transform duration-150 ${expanded ? "rotate-90" : ""}`, color: "faint", children: "\u25B6" })), !hasChildren && _jsx(Span, { className: "w-3" }), item.display?.icon && (_jsx(Span, { size: "base", "aria-hidden": "true", className: "flex-shrink-0", children: item.display.icon })), _jsx(Text, { className: "flex-1 truncate", children: item.name }), item.metrics && (_jsx(Span, { size: "xs", className: "ml-auto flex-shrink-0 tabular-nums", color: "faint", children: item.metrics.productCount }))] }), hasChildren && expanded && (_jsx(Div, { role: "group", children: children.map((child) => (_jsx(CategoryTreeNode, { item: child, activeId: activeId, onSelect: onSelect, depth: depth + 1 }, child.id))) }))] }));
 }
 /**
  * CategoryTree — hierarchical expandable navigation for categories.

package/dist/features/categories/components/ConcernCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Heading, Text } from "../../../ui";
 export function ConcernCard({ concern, onClick, className = "", }) {
-    return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), className: `group flex flex-col items-center gap-3 rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 text-center shadow-sm transition hover:border-primary dark:hover:border-primary-400 hover:shadow-md ${className}`, children: [concern.display?.coverImage && (_jsx(Div, { role: "img", "aria-label": concern.name, className: "h-16 w-16 bg-center bg-cover", rounded: "full", style: { backgroundImage: `url(${concern.display.coverImage})` } })), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-neutral-900 dark:text-neutral-100 group-hover:text-primary dark:group-hover:text-primary-400", size: "sm", weight: "semibold", children: concern.name }), concern.description && (_jsx(Text, { className: `mt-1`, color: "muted", truncate: 2, size: "xs", children: concern.description }))] })] }));
+    return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), className: `group flex flex-col items-center gap-3 rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4 text-center shadow-sm transition hover:border-primary dark:hover:border-primary-400 hover:shadow-md ${className}`, children: [concern.display?.coverImage && (_jsx("img", { src: concern.display.coverImage, alt: concern.name, className: "h-16 w-16 object-cover rounded-full" })), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-neutral-900 dark:text-neutral-100 group-hover:text-primary dark:group-hover:text-primary-400", size: "sm", weight: "semibold", children: concern.name }), concern.description && (_jsx(Text, { className: `mt-1`, color: "muted", truncate: 2, size: "xs", children: concern.description }))] })] }));
 }

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

@@ -746,16 +746,16 @@ export declare const categoryListParamsSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     type?: "category" | "brand" | "collection" | "concern" | undefined;
     featured?: boolean | undefined;
-    q?: string | undefined;
     page?: number | undefined;
+    q?: string | undefined;
     perPage?: number | undefined;
     parentId?: string | undefined;
     tier?: number | undefined;
 }, {
     type?: "category" | "brand" | "collection" | "concern" | undefined;
     featured?: boolean | undefined;
-    q?: string | undefined;
     page?: number | undefined;
+    q?: string | undefined;
     perPage?: number | undefined;
     parentId?: string | undefined;
     tier?: number | undefined;

package/dist/features/checkout/components/CheckoutStepper.js

@@ -6,6 +6,6 @@ export function CheckoutStepper({ steps, current }) {
     return (_jsx(Nav, { "aria-label": "Checkout steps", layout: "flex", gap: "xs", children: steps.map((step, idx) => {
             const isDone = idx < currentIdx;
             const isActive = step.id === current;
-            return (_jsxs(React.Fragment, { children: [_jsxs(Row, { gap: "2.5", children: [_jsx(Span, { layout: "flex", color: "inverse", className: `h-6 w-6 justify-center ${isDone ? "bg-success " : isActive ? "bg-neutral-900 " : "bg-neutral-200 dark:bg-slate-700 text-neutral-500 dark:text-zinc-400"}`, rounded: "full", size: "xs", weight: "semibold", children: isDone ? "✓" : idx + 1 }), _jsx(Span, { className: `${isActive ? "text-neutral-900 dark:text-zinc-100" : isDone ? "text-neutral-500 dark:text-zinc-400" : "text-zinc-400 dark:text-zinc-400"}`, size: "sm", weight: "medium", children: step.label })] }), idx < steps.length - 1 && (_jsx(Span, { className: "h-px flex-1 bg-neutral-200" }))] }, step.id));
+            return (_jsxs(React.Fragment, { children: [_jsxs(Row, { gap: "2.5", children: [_jsx(Span, { layout: "flex", color: "inverse", className: `h-6 w-6 justify-[center] ${isDone ? "bg-success " : isActive ? "bg-neutral-900 " : "bg-neutral-200 dark:bg-[var(--appkit-color-surface-elevated)] text-neutral-500 dark:text-[var(--appkit-color-text-faint)]"}`, rounded: "full", size: "xs", weight: "semibold", children: isDone ? "✓" : idx + 1 }), _jsx(Span, { className: `${isActive ? "text-neutral-900 dark:text-[var(--appkit-color-text)]" : isDone ? "text-neutral-500 dark:text-[var(--appkit-color-text-faint)]" : "text-[var(--appkit-color-text-faint)]"}`, size: "sm", weight: "medium", children: step.label })] }), idx < steps.length - 1 && (_jsx(Span, { className: "h-px flex-1 bg-neutral-200" }))] }, step.id));
         }) }));
 }

package/dist/features/collections/components/CollectionCard.js

@@ -3,7 +3,7 @@ import { Div, Heading, Text, TextLink } from "../../../ui";
 import { LAYOUT } from "../../../tokens";
 const CLS_PLACEHOLDER = "w-full";
 export function CollectionCard({ collection, href }) {
-    return (_jsxs(TextLink, { rounded: "xl", href: href, className: "group relative block overflow-hidden bg-gray-100 dark:bg-slate-800 transition-shadow hover:shadow-lg", children: [collection.image ? (_jsx(Div, { role: "img", "aria-label": collection.title, className: `${LAYOUT.cardHeight.md} w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105`, style: { backgroundImage: `url(${collection.image})` } })) : (_jsx(Div, { surface: "muted", className: `${LAYOUT.cardHeight.md} ${CLS_PLACEHOLDER}` })), _jsxs(Div, { surface: "default", padding: "sm", children: [_jsx(Heading, { level: 3, className: "text-gray-900", weight: "semibold", children: collection.title }), collection.subtitle && (_jsx(Text, { className: "mt-1 text-gray-500", size: "sm", children: collection.subtitle })), collection.productCount !== undefined && (_jsxs(Text, { className: "mt-2 text-gray-400", size: "xs", children: [collection.productCount, " ", collection.productCount === 1 ? "item" : "items"] }))] })] }));
+    return (_jsxs(TextLink, { rounded: "xl", href: href, shadow: "hover-lg", className: "group relative block overflow-hidden bg-gray-100 dark:bg-[var(--appkit-color-surface-elevated)] transition", children: [collection.image ? (_jsx(Div, { className: `${LAYOUT.cardHeight.md} w-full`, overflow: "hidden", children: _jsx("img", { src: collection.image, alt: collection.title, className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Div, { surface: "muted", className: `${LAYOUT.cardHeight.md} ${CLS_PLACEHOLDER}` })), _jsxs(Div, { surface: "default", padding: "sm", children: [_jsx(Heading, { level: 3, className: "text-gray-900", weight: "semibold", children: collection.title }), collection.subtitle && (_jsx(Text, { className: "mt-1 text-gray-500", size: "sm", children: collection.subtitle })), collection.productCount !== undefined && (_jsxs(Text, { className: "mt-2 text-gray-400", size: "xs", children: [collection.productCount, " ", collection.productCount === 1 ? "item" : "items"] }))] })] }));
 }
 export function CollectionGrid({ collections, getHref }) {
     return (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: collections.map((c) => (_jsx(CollectionCard, { collection: c, href: getHref(c.slug) }, c.slug))) }));

package/dist/features/contact/components/ContactPageView.js

@@ -9,31 +9,31 @@ async function submitContact(data) {
     await apiClient.post("/api/contact", data);
 }
 export function ContactPageView() {
-    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", className: "space-y-8", children: [_jsxs(Stack, { gap: "3", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "semibold", color: "primary", children: "Contact Us" }), _jsx(Text, { color: "muted", children: "Questions, support requests, or partnership inquiries." })] }), _jsx(AdSlot, { id: "detail-below-gallery", className: "mb-2" }), _jsxs(Div, { layout: "grid", gap: "6", className: "grid-cols-12", children: [_jsx(Div, { className: "col-span-12 lg:col-span-8", children: _jsx(ContactForm, { onSubmit: submitContact, labels: {
-                                        title: "Send us a message",
-                                        nameLabel: "Your Name",
-                                        emailLabel: "Email Address",
-                                        subjectLabel: "Subject",
-                                        messageLabel: "Message",
-                                        submitButton: "Send Message",
-                                    } }) }), _jsx(Div, { className: "col-span-12 lg:col-span-4", children: _jsx(ContactInfoSidebar, { infoItems: [
-                                        {
-                                            icon: "📧",
-                                            label: "Email",
-                                            value: "support@letitrip.in",
-                                            href: "mailto:support@letitrip.in",
-                                        },
-                                        {
-                                            icon: "💬",
-                                            label: "WhatsApp",
-                                            value: "+91 70000 00000",
-                                            href: "https://wa.me/917000000000",
-                                        },
-                                    ], labels: {
-                                        title: "Support",
-                                        businessHoursLabel: "Business Hours",
-                                        businessHoursValue: "Mon-Sat · 10:00 AM - 7:00 PM IST",
-                                        responseTimeLabel: "Response Time",
-                                        responseTimeValue: "Usually within 24 hours",
-                                    } }) })] }), _jsx(AdSlot, { id: "detail-below-price" })] }) }) }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "section", children: [_jsxs(Stack, { gap: "3", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "semibold", color: "primary", children: "Contact Us" }), _jsx(Text, { color: "muted", children: "Questions, support requests, or partnership inquiries." })] }), _jsx(AdSlot, { id: "detail-below-gallery", className: "mb-2" }), _jsxs(Div, { layout: "grid", gap: "6", className: "grid-cols-12", children: [_jsx(Div, { className: "col-span-12 lg:col-span-8", children: _jsx(ContactForm, { onSubmit: submitContact, labels: {
+                                            title: "Send us a message",
+                                            nameLabel: "Your Name",
+                                            emailLabel: "Email Address",
+                                            subjectLabel: "Subject",
+                                            messageLabel: "Message",
+                                            submitButton: "Send Message",
+                                        } }) }), _jsx(Div, { className: "col-span-12 lg:col-span-4", children: _jsx(ContactInfoSidebar, { infoItems: [
+                                            {
+                                                icon: "📧",
+                                                label: "Email",
+                                                value: "support@letitrip.in",
+                                                href: "mailto:support@letitrip.in",
+                                            },
+                                            {
+                                                icon: "💬",
+                                                label: "WhatsApp",
+                                                value: "+91 70000 00000",
+                                                href: "https://wa.me/917000000000",
+                                            },
+                                        ], labels: {
+                                            title: "Support",
+                                            businessHoursLabel: "Business Hours",
+                                            businessHoursValue: "Mon-Sat · 10:00 AM - 7:00 PM IST",
+                                            responseTimeLabel: "Response Time",
+                                            responseTimeValue: "Usually within 24 hours",
+                                        } }) })] }), _jsx(AdSlot, { id: "detail-below-price" })] }) }) }) }));
 }

package/dist/features/contact/email.js

@@ -16,7 +16,7 @@ import { normalizeError } from "../../errors/normalize";
 import { getProviders } from "../../contracts";
 import { serverLogger } from "../../monitoring";
 import { currentYear, formatCurrency, formatDateTime, nowMs, } from "../../utils";
-import { EmailButton, EmailContainer, EmailDivider, EmailDoc, EmailFooter, EmailHeader, EmailLink, EmailRow, } from "../email/primitives";
+import { EmailBold, EmailButton, EmailContainer, EmailDivider, EmailDoc, EmailFooter, EmailHeader, EmailLink, EmailRow, } from "../email/primitives";
 function getSiteName() {
     return process.env.NEXT_PUBLIC_SITE_NAME?.trim() || "App";
 }
@@ -96,7 +96,7 @@ export async function sendPasswordResetEmailWithLink(email, resetLink) {
 }
 function renderOrderItems(items, productTitle, quantity, currency) {
     if (items && items.length > 1) {
-        return (_jsxs(_Fragment, { children: [_jsxs("p", { style: { ...PARA_STYLE, fontWeight: 600 }, children: ["Items (", items.length, ")"] }), items.map((item, idx) => (_jsxs("p", { style: PARA_STYLE, children: [item.productTitle, " \u00D7 ", item.quantity, " \u2014", " ", _jsx("strong", { children: formatCurrency(item.totalPrice, currency) })] }, item.productId ?? idx)))] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("p", { style: { ...PARA_STYLE, fontWeight: 600 }, children: ["Items (", items.length, ")"] }), items.map((item, idx) => (_jsxs("p", { style: PARA_STYLE, children: [item.productTitle, " \u00D7 ", item.quantity, " \u2014", " ", _jsx(EmailBold, { children: formatCurrency(item.totalPrice, currency) })] }, item.productId ?? idx)))] }));
     }
     return (_jsxs(_Fragment, { children: [_jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Product:" }), " ", _jsx("span", { style: VALUE_STYLE, children: productTitle })] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Quantity:" }), " ", _jsx("span", { style: VALUE_STYLE, children: quantity })] })] }));
 }
@@ -162,7 +162,7 @@ export async function sendDigitalCodeClaimedEmail(params) {
     const siteUrl = getSiteUrl();
     const { to, userName, productTitle, orderId } = params;
     const orderUrl = `${siteUrl}/user/orders/view/${orderId}`;
-    const html = `<!DOCTYPE html>${renderToStaticMarkup(_jsx(EmailDoc, { title: "Your digital code is ready", children: _jsxs(EmailContainer, { children: [_jsx(EmailHeader, { brandName: siteName, children: "Your Digital Code Is Ready \uD83D\uDD11" }), _jsxs(EmailRow, { children: [_jsxs("p", { style: PARA_STYLE, children: ["Hi ", userName, ","] }), _jsxs("p", { style: PARA_STYLE, children: ["Your digital code for ", _jsx("strong", { children: productTitle }), " has been assigned to your order and is ready to reveal."] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Order ID:" }), " ", _jsx("span", { style: VALUE_STYLE, children: orderId })] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Product:" }), " ", _jsx("span", { style: VALUE_STYLE, children: productTitle })] }), _jsx(EmailDivider, { spacing: "md" }), _jsx(EmailButton, { href: orderUrl, children: "Reveal your code" }), _jsxs("p", { style: { ...PARA_STYLE, color: "#71717a" }, children: ["For security, the code is only shown inside your ", siteName, " ", "account."] })] }), _jsx(EmailFooter, { copyright: `© ${currentYear()} ${siteName}. All rights reserved.` })] }) }))}`;
+    const html = `<!DOCTYPE html>${renderToStaticMarkup(_jsx(EmailDoc, { title: "Your digital code is ready", children: _jsxs(EmailContainer, { children: [_jsx(EmailHeader, { brandName: siteName, children: "Your Digital Code Is Ready \uD83D\uDD11" }), _jsxs(EmailRow, { children: [_jsxs("p", { style: PARA_STYLE, children: ["Hi ", userName, ","] }), _jsxs("p", { style: PARA_STYLE, children: ["Your digital code for ", _jsx(EmailBold, { children: productTitle }), " has been assigned to your order and is ready to reveal."] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Order ID:" }), " ", _jsx("span", { style: VALUE_STYLE, children: orderId })] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Product:" }), " ", _jsx("span", { style: VALUE_STYLE, children: productTitle })] }), _jsx(EmailDivider, { spacing: "md" }), _jsx(EmailButton, { href: orderUrl, children: "Reveal your code" }), _jsxs("p", { style: { ...PARA_STYLE, color: "#71717a" }, children: ["For security, the code is only shown inside your ", siteName, " ", "account."] })] }), _jsx(EmailFooter, { copyright: `© ${currentYear()} ${siteName}. All rights reserved.` })] }) }))}`;
     try {
         const { error } = await sendConfiguredEmail({
             to,
@@ -190,7 +190,7 @@ export async function sendSiteSettingsChangedEmail(params) {
         return { success: false };
     const settingsUrl = `${siteUrl}/admin/site-settings`;
     const timestamp = formatDateTime(nowMs());
-    const html = `<!DOCTYPE html>${renderToStaticMarkup(_jsx(EmailDoc, { title: "Site settings changed", children: _jsxs(EmailContainer, { children: [_jsx(EmailHeader, { brandName: siteName, children: "Site Settings Changed \u2699\uFE0F" }), _jsxs(EmailRow, { children: [_jsxs("p", { style: PARA_STYLE, children: [_jsx("strong", { children: changedByEmail }), " has updated the following site settings:"] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Changed fields:" }), " ", _jsx("span", { style: VALUE_STYLE, children: changedFields.join(", ") })] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Changed by:" }), " ", _jsx("span", { style: VALUE_STYLE, children: changedByEmail })] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Timestamp:" }), " ", _jsx("span", { style: VALUE_STYLE, children: timestamp })] }), _jsx(EmailDivider, { spacing: "md" }), _jsx(EmailButton, { href: settingsUrl, children: "View settings" })] }), _jsx(EmailFooter, { copyright: `© ${currentYear()} ${siteName}. Automated notification — do not reply.` })] }) }))}`;
+    const html = `<!DOCTYPE html>${renderToStaticMarkup(_jsx(EmailDoc, { title: "Site settings changed", children: _jsxs(EmailContainer, { children: [_jsx(EmailHeader, { brandName: siteName, children: "Site Settings Changed \u2699\uFE0F" }), _jsxs(EmailRow, { children: [_jsxs("p", { style: PARA_STYLE, children: [_jsx(EmailBold, { children: changedByEmail }), " has updated the following site settings:"] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Changed fields:" }), " ", _jsx("span", { style: VALUE_STYLE, children: changedFields.join(", ") })] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Changed by:" }), " ", _jsx("span", { style: VALUE_STYLE, children: changedByEmail })] }), _jsxs("p", { style: PARA_STYLE, children: [_jsx("span", { style: LABEL_STYLE, children: "Timestamp:" }), " ", _jsx("span", { style: VALUE_STYLE, children: timestamp })] }), _jsx(EmailDivider, { spacing: "md" }), _jsx(EmailButton, { href: settingsUrl, children: "View settings" })] }), _jsx(EmailFooter, { copyright: `© ${currentYear()} ${siteName}. Automated notification — do not reply.` })] }) }))}`;
     try {
         const { data, error } = await sendConfiguredEmail({
             to: adminEmails,

package/dist/features/copilot/components/AdminCopilotView.js

@@ -16,11 +16,11 @@ const LBL_CONVERSATION_ID = "Conversation ID";
 const CLS_ERROR_TEXT = "text-center text-sm text-error";
 function MessageBubble({ msg }) {
     const isUser = msg.role === "user";
-    return (_jsx(Div, { layout: "flex", justify: isUser ? "end" : "start", children: _jsxs(Div, { textSize: "sm", className: `max-w-[80%] py-2.5 ${isUser ? "bg-primary text-white rounded-tr-sm" : "bg-neutral-100 dark:bg-slate-700 text-neutral-900 dark:text-neutral-100 rounded-tl-sm"}`, padding: "x-md", rounded: "2xl", children: [_jsx(Text, { className: "whitespace-pre-wrap leading-relaxed", size: "sm", children: msg.content }), msg.durationMs ? (_jsxs(Span, { size: "xs", className: "mt-1 block opacity-60", children: [(msg.durationMs / 1000).toFixed(1), "s"] })) : null] }) }));
+    return (_jsx(Div, { layout: "flex", justify: isUser ? "end" : "start", children: _jsxs(Div, { textSize: "sm", className: `max-w-[80%] py-[0.625rem] ${isUser ? "bg-primary text-white" : "bg-neutral-100 dark:bg-[var(--appkit-color-surface-elevated)] text-neutral-900 dark:text-neutral-100"}`, padding: "x-md", style: { borderRadius: isUser ? "1.5rem 0.125rem 1.5rem 1.5rem" : "0.125rem 1.5rem 1.5rem 1.5rem" }, children: [_jsx(Text, { className: "whitespace-pre-wrap leading-relaxed", size: "sm", children: msg.content }), msg.durationMs ? (_jsxs(Span, { size: "xs", className: "mt-1 block opacity-60", children: [(msg.durationMs / 1000).toFixed(1), "s"] })) : null] }) }));
 }
 function renderCopilotChatPanel(props) {
     const { messages, conversationId, isLoading, error, input, setInput, labels, messagesEndRef, handleSubmit } = props;
-    return (_jsxs(Stack, { className: "border border-neutral-200 h-[calc(100vh-300px)]", surface: "default", rounded: "xl", children: [_jsx(Div, { border: "bottom", className: __P.p3, children: _jsxs(Text, { className: "text-neutral-500 dark:text-neutral-400", size: "xs", weight: "medium", children: [labels?.conversationId ?? LBL_CONVERSATION_ID, ": ", conversationId] }) }), _jsxs(Stack, { className: `flex-1 ${__O.yAuto} ${__P.p4}`, gap: "md", children: [messages.length === 0 ? (_jsxs(Stack, { justify: "center", className: "h-full text-center", align: "center", children: [_jsx(Text, { weight: "medium", children: labels?.noMessages ?? "No messages yet" }), _jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: labels?.noMessagesDesc ?? "Ask anything to get started" })] })) : null, messages.map((msg) => _jsx(MessageBubble, { msg: msg }, msg.id)), isLoading ? (_jsx(Row, { justify: "start", children: _jsx(Div, { paddingY: "y-xs-tall", surface: "muted", className: "rounded-tl-sm", padding: "x-md", rounded: "2xl", children: _jsx(Span, { size: "sm", className: "opacity-60 animate-pulse", children: "Thinking..." }) }) })) : null, error ? _jsx(Text, { className: CLS_ERROR_TEXT, children: labels?.errorLabel ?? "An error occurred. Please try again." }) : null, _jsx(Div, { ref: messagesEndRef })] }), _jsx(Div, { border: "top", className: __P.p3, children: _jsxs("form", { onSubmit: handleSubmit, className: "flex gap-2", children: [_jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: labels?.inputPlaceholder ?? "Ask anything...", disabled: isLoading, className: "flex-1 h-10 rounded-lg border border-neutral-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 text-sm outline-none focus:ring-2 ring-primary/20 transition disabled:opacity-60" }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading || !input.trim(), className: "shrink-0", children: isLoading ? labels?.sendingButton ?? "Sending..." : labels?.sendButton ?? "Send" })] }) })] }));
+    return (_jsxs(Stack, { className: "border border-neutral-200 h-[calc(100vh-300px)]", surface: "default", rounded: "xl", children: [_jsx(Div, { border: "bottom", className: __P.p3, children: _jsxs(Text, { className: "text-neutral-500 dark:text-neutral-400", size: "xs", weight: "medium", children: [labels?.conversationId ?? LBL_CONVERSATION_ID, ": ", conversationId] }) }), _jsxs(Stack, { className: `flex-1 ${__O.yAuto} ${__P.p4}`, gap: "md", children: [messages.length === 0 ? (_jsxs(Stack, { justify: "center", className: "h-full text-center", align: "center", children: [_jsx(Text, { weight: "medium", children: labels?.noMessages ?? "No messages yet" }), _jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: labels?.noMessagesDesc ?? "Ask anything to get started" })] })) : null, messages.map((msg) => _jsx(MessageBubble, { msg: msg }, msg.id)), isLoading ? (_jsx(Row, { justify: "start", children: _jsx(Div, { paddingY: "y-xs-tall", surface: "muted", className: "", padding: "x-md", style: { borderRadius: "0.125rem 1.5rem 1.5rem 1.5rem" }, children: _jsx(Span, { size: "sm", className: "opacity-60 animate-pulse", children: "Thinking..." }) }) })) : null, error ? _jsx(Text, { className: CLS_ERROR_TEXT, children: labels?.errorLabel ?? "An error occurred. Please try again." }) : null, _jsx(Div, { ref: messagesEndRef })] }), _jsx(Div, { border: "top", className: __P.p3, children: _jsxs("form", { onSubmit: handleSubmit, className: "flex gap-2", children: [_jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: labels?.inputPlaceholder ?? "Ask anything...", disabled: isLoading, className: "flex-1 h-10 rounded-lg border border-neutral-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 text-sm outline-none focus:ring-2 ring-primary/20 transition disabled:opacity-60" }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading || !input.trim(), className: "shrink-0", children: isLoading ? labels?.sendingButton ?? "Sending..." : labels?.sendButton ?? "Send" })] }) })] }));
 }
 function renderCopilotHistoryPanel(props) {
     const { historyQuery, conversationInput, setConversationInput, loadConversation, labels } = props;
@@ -49,7 +49,7 @@ export function AdminCopilotView({ endpoint, historyEndpoint = "/api/copilot/his
     };
     return (_jsx(StackedViewShell, { portal: "admin", title: labels.title ?? "AI Copilot", className: className, sections: [
             renderHeader ? (renderHeader(startNewConversation)) : (_jsxs(Row, { align: "center", justify: "between", gap: "3", children: [_jsx(Heading, { level: 2, children: labels.title ?? "AI Copilot" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: startNewConversation, children: labels.newConversation ?? "New Conversation" })] })),
-            _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-1 lg:grid-cols-[2fr,1fr]", children: [_jsxs(Stack, { className: "border border-neutral-200 h-[calc(100vh-300px)]", surface: "default", rounded: "xl", children: [_jsx(Div, { border: "bottom", className: __P.p3, children: _jsxs(Text, { className: "text-neutral-500 dark:text-neutral-400", size: "xs", weight: "medium", children: [labels.conversationId ?? LBL_CONVERSATION_ID, ": ", conversationId] }) }), _jsxs(Stack, { className: `flex-1 ${__O.yAuto} ${__P.p4}`, gap: "md", children: [messages.length === 0 ? (_jsxs(Stack, { justify: "center", className: "h-full text-center", align: "center", children: [_jsx(Text, { weight: "medium", children: labels.noMessages ?? "No messages yet" }), _jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: labels.noMessagesDesc ?? "Ask anything to get started" })] })) : null, messages.map((msg) => (_jsx(MessageBubble, { msg: msg }, msg.id))), isLoading ? (_jsx(Row, { justify: "start", children: _jsx(Div, { paddingY: "y-xs-tall", surface: "muted", className: "rounded-tl-sm", padding: "x-md", rounded: "2xl", children: _jsx(Span, { size: "sm", className: "opacity-60 animate-pulse", children: "Thinking..." }) }) })) : null, error ? (_jsx(Text, { className: CLS_ERROR_TEXT, children: labels.errorLabel ?? "An error occurred. Please try again." })) : null, _jsx(Div, { ref: messagesEndRef })] }), _jsx(Div, { border: "top", className: __P.p3, children: _jsxs("form", { onSubmit: handleSubmit, className: "flex gap-2", children: [_jsx("input", { type: "text", value: input, onChange: (event) => setInput(event.target.value), placeholder: labels.inputPlaceholder ?? "Ask anything...", disabled: isLoading, className: "flex-1 h-10 rounded-lg border border-neutral-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 text-sm outline-none focus:ring-2 ring-primary/20 transition disabled:opacity-60" }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading || !input.trim(), className: "shrink-0", children: isLoading ? labels.sendingButton ?? "Sending..." : labels.sendButton ?? "Send" })] }) })] }), _jsxs(Stack, { surface: "card", padding: "sm", gap: "3", children: [_jsx(Heading, { level: 3, size: "sm", weight: "semibold", children: labels.historyTitle ?? "Conversation History" }), _jsxs("form", { className: "space-y-2", onSubmit: (event) => {
+            _jsxs(Div, { layout: "grid", gap: "4", className: "grid-cols-1 lg:grid-cols-[2fr,1fr]", children: [_jsxs(Stack, { className: "border border-neutral-200 h-[calc(100vh-300px)]", surface: "default", rounded: "xl", children: [_jsx(Div, { border: "bottom", className: __P.p3, children: _jsxs(Text, { className: "text-neutral-500 dark:text-neutral-400", size: "xs", weight: "medium", children: [labels.conversationId ?? LBL_CONVERSATION_ID, ": ", conversationId] }) }), _jsxs(Stack, { className: `flex-1 ${__O.yAuto} ${__P.p4}`, gap: "md", children: [messages.length === 0 ? (_jsxs(Stack, { justify: "center", className: "h-full text-center", align: "center", children: [_jsx(Text, { weight: "medium", children: labels.noMessages ?? "No messages yet" }), _jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: labels.noMessagesDesc ?? "Ask anything to get started" })] })) : null, messages.map((msg) => (_jsx(MessageBubble, { msg: msg }, msg.id))), isLoading ? (_jsx(Row, { justify: "start", children: _jsx(Div, { paddingY: "y-xs-tall", surface: "muted", className: "", padding: "x-md", style: { borderRadius: "0.125rem 1.5rem 1.5rem 1.5rem" }, children: _jsx(Span, { size: "sm", className: "opacity-60 animate-pulse", children: "Thinking..." }) }) })) : null, error ? (_jsx(Text, { className: CLS_ERROR_TEXT, children: labels.errorLabel ?? "An error occurred. Please try again." })) : null, _jsx(Div, { ref: messagesEndRef })] }), _jsx(Div, { border: "top", className: __P.p3, children: _jsxs("form", { onSubmit: handleSubmit, className: "flex gap-2", children: [_jsx("input", { type: "text", value: input, onChange: (event) => setInput(event.target.value), placeholder: labels.inputPlaceholder ?? "Ask anything...", disabled: isLoading, className: "flex-1 h-10 rounded-lg border border-neutral-200 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 text-sm outline-none focus:ring-2 ring-primary/20 transition disabled:opacity-60" }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading || !input.trim(), className: "shrink-0", children: isLoading ? labels.sendingButton ?? "Sending..." : labels.sendButton ?? "Send" })] }) })] }), _jsxs(Stack, { surface: "card", padding: "sm", gap: "3", children: [_jsx(Heading, { level: 3, size: "sm", weight: "semibold", children: labels.historyTitle ?? "Conversation History" }), _jsxs("form", { className: "space-y-2", onSubmit: (event) => {
                                     event.preventDefault();
                                     if (!conversationInput.trim())
                                         return;

package/dist/features/email/primitives.d.ts

@@ -87,4 +87,8 @@ export interface EmailFooterProps {
     contactEmail?: string;
     unsubscribeUrl?: string;
 }
+/** Inline bold span for email bodies — uses inline fontWeight because email clients ignore CSS classes. */
+export declare function EmailBold({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function EmailFooter({ copyright, contactEmail, unsubscribeUrl, }: EmailFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/email/primitives.js

@@ -112,6 +112,10 @@ export function EmailDivider({ spacing = "md" }) {
                     margin: 0,
                 } }) }) }));
 }
+/** Inline bold span for email bodies — uses inline fontWeight because email clients ignore CSS classes. */
+export function EmailBold({ children }) {
+    return _jsx("span", { style: { fontWeight: 700 }, children: children });
+}
 export function EmailFooter({ copyright, contactEmail, unsubscribeUrl, }) {
     return (_jsx("tr", { children: _jsxs("td", { align: "center", style: {
                 padding: "16px 32px 24px",

package/dist/features/events/components/EventCard.js

@@ -31,6 +31,6 @@ export function EventCard({ event, labels = {}, onParticipate, className = "", s
     const msLeft = endsAt.getTime() - now.getTime();
     const daysLeft = Math.max(0, Math.ceil(msLeft / (1000 * 60 * 60 * 24)));
     const detailHref = String(ROUTES.PUBLIC.EVENT_DETAIL(event.slug ?? event.id));
-    return (_jsxs(Article, { border: "default", className: `group relative flex h-full ${LAYOUT.cardHeight.event} flex-col overflow-hidden rounded-xl bg-white shadow-sm transition-shadow hover:shadow-md dark:bg-slate-900 ${isSelected ? "border-primary outline outline-2 outline-primary" : " "} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(event.id, !isSelected); }, label: isSelected ? "Deselect event" : "Select event", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl ? (_jsx(Div, { className: `aspect-video ${__O.hidden}`, children: _jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${event.coverImageUrl})` } }) })) : (_jsx(Row, { surface: "muted", className: "aspect-video", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-40", size: "5xl", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { className: "mb-2", align: "start", justify: "between", gap: "sm", children: [_jsx(Span, { size: "lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "text-gray-900 leading-snug mb-1 group-hover:text-primary transition-colors", size: "base", weight: "semibold", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mb-3 line-clamp-3 text-sm text-zinc-600 dark:text-zinc-400" }), _jsxs(Row, { color: "muted", textSize: "xs", className: "mb-3 mt-auto", align: "center", justify: "between", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
-                                daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\uD83D\uDC65 ", event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { rounded: "lg", type: "button", onClick: () => onParticipate(event), className: "w-full bg-primary py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { rounded: "lg", paddingX: "sm", paddingY: "xs", href: detailHref, className: "inline-flex w-full items-center justify-center gap-1.5 border border-zinc-300 transition-colors hover:bg-zinc-100 dark:border-slate-600 dark:hover:bg-slate-800", color: "primary", size: "sm", weight: "medium", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
+    return (_jsxs(Article, { border: "default", rounded: "xl", shadow: "hover-md", className: `group relative h-full ${LAYOUT.cardHeight.event} overflow-hidden bg-[var(--appkit-color-surface)] ${isSelected ? "border-primary outline outline-2 outline-primary" : " "} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(event.id, !isSelected); }, label: isSelected ? "Deselect event" : "Select event", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl ? (_jsx(Div, { className: `aspect-video ${__O.hidden}`, children: _jsx("img", { src: event.coverImageUrl, alt: safeTitle, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Row, { surface: "muted", className: "aspect-video", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-40", size: "5xl", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { className: "mb-2", align: "start", justify: "between", gap: "sm", children: [_jsx(Span, { size: "lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "text-gray-900 leading-snug mb-1 group-hover:text-primary transition-colors", size: "base", weight: "semibold", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mb-3 line-clamp-3 text-sm text-zinc-600 dark:text-zinc-400" }), _jsxs(Row, { color: "muted", textSize: "xs", className: "mb-3 mt-auto", align: "center", justify: "between", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
+                                daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\uD83D\uDC65 ", event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { rounded: "lg", type: "button", onClick: () => onParticipate(event), className: "w-full bg-primary py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { rounded: "lg", paddingX: "sm", paddingY: "xs", href: detailHref, layout: "inline-flex", align: "center", justify: "center", gap: "xs", className: "w-full border border-[var(--appkit-color-border)] transition-colors hover:bg-[var(--appkit-color-bg)]", color: "primary", size: "sm", weight: "medium", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
 }

package/dist/features/events/components/EventOfferCard.js

@@ -28,5 +28,5 @@ export function EventOfferCard({ couponCode, offerDescription, title = "Exclusiv
             /* clipboard unavailable — leave button as-is */
         }
     };
-    return (_jsx(Div, { className: `${__P.p6}`, rounded: "2xl", border: "default", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, weight: "semibold", size: "2xl", children: title }), offerDescription ? (_jsx(Text, { size: "sm", color: "muted", children: offerDescription })) : null] }), _jsxs(Row, { surface: "muted", padding: "inline", align: "center", gap: "3", rounded: "lg", children: [_jsx(Code, { className: "flex-1 font-bold", size: "base", color: "primary", children: couponCode }), _jsx(Button, { type: "button", variant: "outline", onClick: copyCode, children: copied ? "Copied!" : "Copy code" })] }), _jsx(Div, { children: _jsx(Link, { href: href, children: _jsx(Button, { variant: "primary", children: "Apply at checkout" }) }) })] }) }));
+    return (_jsx(Div, { className: `${__P.p6}`, rounded: "2xl", border: "default", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, weight: "semibold", size: "2xl", children: title }), offerDescription ? (_jsx(Text, { size: "sm", color: "muted", children: offerDescription })) : null] }), _jsxs(Row, { surface: "muted", padding: "inline", align: "center", gap: "3", rounded: "lg", children: [_jsx(Code, { className: "flex-1", weight: "bold", size: "base", color: "primary", children: couponCode }), _jsx(Button, { type: "button", variant: "outline", onClick: copyCode, children: copied ? "Copied!" : "Copy code" })] }), _jsx(Div, { children: _jsx(Link, { href: href, children: _jsx(Button, { variant: "primary", children: "Apply at checkout" }) }) })] }) }));
 }

package/dist/features/events/components/EventRaffleEntryForm.js

@@ -38,5 +38,5 @@ export function EventRaffleEntryForm({ eventId: _eventId, prizeLabel, raffleType
             : raffleType === "top_n_participants"
                 ? `Earliest ${topN ?? "N"} entries qualify.`
                 : "Spin the wheel to claim your prize.";
-    return (_jsxs(Stack, { className: `${__P.p6}`, gap: "md", rounded: "2xl", border: "default", children: [prizeLabel ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Badge, { variant: "warning", children: "Prize" }), _jsx(Heading, { level: 2, weight: "bold", size: "2xl", children: prizeLabel })] })) : null, _jsx(Text, { size: "sm", color: "muted", children: eligibilityCopy }), submitted ? (_jsx(Div, { textSize: "sm", color: "success", surface: "success-surface", padding: "inline", rounded: "lg", children: "You're in. Check the leaderboard for results." })) : overLimit ? (_jsxs(Div, { textSize: "sm", color: "warning", surface: "warning-surface", padding: "inline", rounded: "lg", children: ["You've used all ", maxEntriesPerUser, " entry slot", maxEntriesPerUser === 1 ? "" : "s", " for this raffle."] })) : (_jsxs(Form, { onSubmit: handleSubmit, className: "space-y-3", children: [_jsx(FieldTextarea, { name: "message", label: "Message", hint: "optional \u2014 share why you'd like to win", value: message, onChange: setMessage, rows: 3, maxLength: 500, placeholder: "Share why you'd like to win", disabled: busy }), _jsx(Button, { type: "submit", variant: "primary", disabled: busy, children: busy ? "Submitting…" : "Enter raffle" })] }))] }));
+    return (_jsxs(Stack, { className: `${__P.p6}`, gap: "md", rounded: "2xl", border: "default", children: [prizeLabel ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Badge, { variant: "warning", children: "Prize" }), _jsx(Heading, { level: 2, weight: "bold", size: "2xl", children: prizeLabel })] })) : null, _jsx(Text, { size: "sm", color: "muted", children: eligibilityCopy }), submitted ? (_jsx(Div, { textSize: "sm", color: "success", surface: "success-surface", padding: "inline", rounded: "lg", children: "You're in. Check the leaderboard for results." })) : overLimit ? (_jsxs(Div, { textSize: "sm", color: "warning", surface: "warning-surface", padding: "inline", rounded: "lg", children: ["You've used all ", maxEntriesPerUser, " entry slot", maxEntriesPerUser === 1 ? "" : "s", " for this raffle."] })) : (_jsxs(Form, { onSubmit: handleSubmit, className: "space-y-[0.75rem]", children: [_jsx(FieldTextarea, { name: "message", label: "Message", hint: "optional \u2014 share why you'd like to win", value: message, onChange: setMessage, rows: 3, maxLength: 500, placeholder: "Share why you'd like to win", disabled: busy }), _jsx(Button, { type: "submit", variant: "primary", disabled: busy, children: busy ? "Submitting…" : "Enter raffle" })] }))] }));
 }

package/dist/features/events/components/EventRaffleWinnerView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Article, ClaimCouponButton, Div, Heading, Span, Text, TextLink } from "../../../ui";
+import { Article, ClaimCouponButton, Div, Heading, Row, Span, Stack, Text, TextLink } from "../../../ui";
 const __P = {
     p4: "p-4",
 };
@@ -20,5 +20,5 @@ export function EventRaffleWinnerView({ event, currentUserIsWinner, labels }) {
     if (!event.raffleWinnerUserId) {
         return (_jsx(Div, { className: "border-dashed text-center", border: "strong", paddingY: "y-2xl", paddingX: "x-lg", rounded: "xl", children: _jsx(Text, { color: "muted", children: l.notDrawnYet }) }));
     }
-    return (_jsxs(Article, { className: "space-y-4", children: [_jsxs(Heading, { level: 2, size: "xl", weight: "semibold", color: "primary", children: ["\uD83C\uDF9F\uFE0F ", l.heading] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsxs(Div, { children: [_jsx(Text, { className: CLS_LABEL, children: l.winnerLabel }), _jsx(Text, { className: CLS_WINNER_NAME, children: event.raffleWinnerDisplayName?.trim() || l.anonymous })] }), event.rafflePrize ? (_jsxs(Div, { children: [_jsx(Text, { className: CLS_LABEL, children: l.prizeLabel }), _jsx(Text, { className: "mt-1", color: "primary", size: "base", children: event.rafflePrize })] })) : null, currentUserIsWinner && event.rafflePrizeCouponCode ? (_jsx(Div, { padding: "t-xs", children: _jsx(ClaimCouponButton, { couponCode: event.rafflePrizeCouponCode, source: "raffle", size: "sm" }) })) : null, _jsxs(Div, { layout: "flex", textSize: "sm", className: "flex-wrap gap-x-6 gap-y-2", color: "muted", padding: "t-xs", children: [typeof event.raffleEntryCount === "number" ? (_jsxs(Span, { children: [l.poolLabel, ":", " ", _jsx(Span, { weight: "medium", color: "primary", children: event.raffleEntryCount })] })) : null, event.raffleTriggeredAt ? (_jsx(Span, { children: new Date(event.raffleTriggeredAt).toLocaleString() })) : null] })] }), event.raffleGithubFunctionUrl ? (_jsxs(Div, { textSize: "sm", className: `${__P.p4}`, rounded: "lg", border: "default", children: [_jsx(Text, { weight: "medium", color: "primary", children: l.fairnessLabel }), _jsx(TextLink, { href: event.raffleGithubFunctionUrl, className: "mt-1 block break-all text-primary-600 dark:text-primary-400 hover:underline", children: event.raffleGithubFunctionUrl })] })) : null] }));
+    return (_jsx(Article, { children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Heading, { level: 2, size: "xl", weight: "semibold", color: "primary", children: ["\uD83C\uDF9F\uFE0F ", l.heading] }), _jsxs(Div, { className: CLS_PANEL, children: [_jsxs(Div, { children: [_jsx(Text, { className: CLS_LABEL, children: l.winnerLabel }), _jsx(Text, { className: CLS_WINNER_NAME, children: event.raffleWinnerDisplayName?.trim() || l.anonymous })] }), event.rafflePrize ? (_jsxs(Div, { children: [_jsx(Text, { className: CLS_LABEL, children: l.prizeLabel }), _jsx(Text, { className: "mt-1", color: "primary", size: "base", children: event.rafflePrize })] })) : null, currentUserIsWinner && event.rafflePrizeCouponCode ? (_jsx(Div, { padding: "t-xs", children: _jsx(ClaimCouponButton, { couponCode: event.rafflePrizeCouponCode, source: "raffle", size: "sm" }) })) : null, _jsxs(Row, { wrap: true, textSize: "sm", className: "gap-x-6 gap-y-2", color: "muted", padding: "t-xs", children: [typeof event.raffleEntryCount === "number" ? (_jsxs(Span, { children: [l.poolLabel, ":", " ", _jsx(Span, { weight: "medium", color: "primary", children: event.raffleEntryCount })] })) : null, event.raffleTriggeredAt ? (_jsx(Span, { children: new Date(event.raffleTriggeredAt).toLocaleString() })) : null] })] }), event.raffleGithubFunctionUrl ? (_jsxs(Div, { textSize: "sm", className: `${__P.p4}`, rounded: "lg", border: "default", children: [_jsx(Text, { weight: "medium", color: "primary", children: l.fairnessLabel }), _jsx(TextLink, { href: event.raffleGithubFunctionUrl, className: "mt-1 block break-all text-primary-600 dark:text-primary-400 hover:underline", children: event.raffleGithubFunctionUrl })] })) : null] }) }));
 }

package/dist/features/events/components/EventSaleBanner.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { Div, Heading, Section, Span, Stack, Text } from "../../../ui";

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

@@ -414,14 +414,14 @@ export declare const eventListParamsSchema: z.ZodObject<{
     status?: "draft" | "ended" | "active" | "paused" | undefined;
     type?: "offer" | "feedback" | "sale" | "poll" | "survey" | undefined;
     sort?: string | undefined;
-    q?: string | undefined;
     page?: number | undefined;
+    q?: string | undefined;
     perPage?: number | undefined;
 }, {
     status?: "draft" | "ended" | "active" | "paused" | undefined;
     type?: "offer" | "feedback" | "sale" | "poll" | "survey" | undefined;
     sort?: string | undefined;
-    q?: string | undefined;
     page?: number | undefined;
+    q?: string | undefined;
     perPage?: number | undefined;
 }>;

package/dist/features/faq/components/ContactCTA.js

@@ -6,5 +6,5 @@ const __P = {
 const CLS_CONTACT_CARD = "flex items-center gap-3 rounded-lg border border-zinc-100 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 px-4 py-3 hover:border-primary/40 transition-colors";
 const CLS_CONTACT_LABEL = "text-xs text-zinc-500 dark:text-zinc-400";
 export function ContactCTA({ email, phone, contactHref, labels, }) {
-    return (_jsxs(Card, { variant: "outlined", padding: "lg", className: "text-center dark:bg-slate-800/60", children: [_jsx(Row, { className: "mb-6", justify: "center", children: _jsx(Div, { className: `bg-primary/10 ${__P.p8}`, rounded: "full", children: _jsx("svg", { className: "h-12 w-12 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }) }) }), _jsx(Heading, { level: 2, className: "mb-3", size: "2xl", weight: "semibold", children: labels?.title ?? "Need More Help?" }), _jsx(Text, { className: "mx-auto mb-6 max-w-2xl", color: "muted", children: labels?.description ?? "Our support team is here to help you." }), _jsxs(Div, { layout: "grid", gap: "4", className: "mb-8 grid-cols-1 md:grid-cols-3", children: [_jsxs(TextLink, { href: `mailto:${email}`, variant: "none", className: CLS_CONTACT_CARD, children: [_jsx(Text, { className: CLS_CONTACT_LABEL, children: labels?.emailUs ?? "Email Us" }), _jsx(Text, { size: "xs", color: "muted", children: email })] }), _jsxs(TextLink, { href: `tel:${phone}`, variant: "none", className: CLS_CONTACT_CARD, children: [_jsx(Text, { className: CLS_CONTACT_LABEL, children: labels?.callUs ?? "Call Us" }), _jsx(Text, { size: "xs", color: "muted", children: phone })] }), _jsxs(TextLink, { href: contactHref, className: CLS_CONTACT_CARD, children: [_jsx(Text, { className: CLS_CONTACT_LABEL, children: labels?.contactForm ?? "Contact Form" }), _jsx(Text, { size: "xs", color: "muted", children: labels?.submitRequest ?? "Submit a request" })] })] }), _jsxs(TextLink, { rounded: "xl", href: contactHref, className: "inline-flex items-center gap-2 bg-primary p-6 text-white transition-colors hover:bg-primary/90", weight: "medium", children: [_jsx(Span, { children: labels?.contactTeam ?? "Contact Team" }), _jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] })] }));
+    return (_jsxs(Card, { variant: "outlined", padding: "lg", className: "text-center", children: [_jsx(Row, { className: "mb-6", justify: "center", children: _jsx(Div, { className: `bg-primary/10 ${__P.p8}`, rounded: "full", children: _jsx("svg", { className: "h-12 w-12 text-primary", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }) }) }), _jsx(Heading, { level: 2, className: "mb-3", size: "2xl", weight: "semibold", children: labels?.title ?? "Need More Help?" }), _jsx(Text, { className: "mx-auto mb-6 max-w-2xl", color: "muted", children: labels?.description ?? "Our support team is here to help you." }), _jsxs(Div, { layout: "grid", gap: "4", className: "mb-8 grid-cols-1 md:grid-cols-3", children: [_jsxs(TextLink, { href: `mailto:${email}`, variant: "none", className: CLS_CONTACT_CARD, children: [_jsx(Text, { className: CLS_CONTACT_LABEL, children: labels?.emailUs ?? "Email Us" }), _jsx(Text, { size: "xs", color: "muted", children: email })] }), _jsxs(TextLink, { href: `tel:${phone}`, variant: "none", className: CLS_CONTACT_CARD, children: [_jsx(Text, { className: CLS_CONTACT_LABEL, children: labels?.callUs ?? "Call Us" }), _jsx(Text, { size: "xs", color: "muted", children: phone })] }), _jsxs(TextLink, { href: contactHref, className: CLS_CONTACT_CARD, children: [_jsx(Text, { className: CLS_CONTACT_LABEL, children: labels?.contactForm ?? "Contact Form" }), _jsx(Text, { size: "xs", color: "muted", children: labels?.submitRequest ?? "Submit a request" })] })] }), _jsxs(TextLink, { rounded: "xl", href: contactHref, layout: "inline-flex", align: "center", gap: "sm", className: "bg-primary p-[1.5rem] text-white transition-colors hover:bg-primary/90", weight: "medium", children: [_jsx(Span, { children: labels?.contactTeam ?? "Contact Team" }), _jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] })] }));
 }

package/dist/features/faq/components/FAQAccordion.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button, Div, RichText, Row, Span, Text } from "../../../ui";
 function FAQAccordionItem({ faq, isOpen, onToggle, renderExpandedFooter, }) {
-    return (_jsxs(Div, { className: "border-b border-neutral-200 last:border-0", children: [_jsxs(Button, { variant: "ghost", onClick: onToggle, "aria-expanded": isOpen, className: "w-full justify-between gap-4 py-4 text-left text-sm font-medium text-neutral-900 dark:text-zinc-100 transition hover:text-primary", children: [_jsx(Span, { children: faq.question }), _jsx(Span, { className: `flex-shrink-0 transition-transform ${isOpen ? "rotate-180" : ""}`, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), isOpen && (_jsxs(Div, { textSize: "sm", className: "text-neutral-600 dark:text-neutral-400", padding: "b-md", children: [faq.tags && faq.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-3", children: faq.tags.map((tag) => (_jsx(Span, { className: "bg-neutral-100 dark:bg-neutral-800 py-1 text-neutral-600 dark:text-neutral-400", rounded: "md", padding: "x-xs", size: "xs", children: tag }, tag))) })), faq.answer.format === "html" ? (_jsx(RichText, { html: faq.answer.text, className: "prose-sm" })) : (_jsx(Text, { className: "whitespace-pre-line", children: faq.answer.text })), renderExpandedFooter?.(faq)] }))] }));
+    return (_jsxs(Div, { className: "border-b border-neutral-200 last:border-0", children: [_jsxs(Button, { variant: "ghost", onClick: onToggle, "aria-expanded": isOpen, className: "w-full justify-[space-between] gap-[1rem] py-[1rem] text-left text-[0.875rem] font-[500] text-neutral-900 dark:text-[var(--appkit-color-text)] transition hover:text-primary", children: [_jsx(Span, { children: faq.question }), _jsx(Span, { className: `flex-shrink-0 transition-transform ${isOpen ? "rotate-180" : ""}`, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), isOpen && (_jsxs(Div, { textSize: "sm", className: "text-neutral-600 dark:text-neutral-400", padding: "b-md", children: [faq.tags && faq.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-3", children: faq.tags.map((tag) => (_jsx(Span, { className: "bg-neutral-100 dark:bg-neutral-800 py-[0.25rem] text-neutral-600 dark:text-neutral-400", rounded: "md", padding: "x-xs", size: "xs", children: tag }, tag))) })), faq.answer.format === "html" ? (_jsx(RichText, { html: faq.answer.text, className: "prose-sm" })) : (_jsx(Text, { className: "whitespace-pre-line", children: faq.answer.text })), renderExpandedFooter?.(faq)] }))] }));
 }
 export function FAQAccordion({ faqs, className = "", renderExpandedFooter, labels, }) {
     const [openId, setOpenId] = useState(null);
@@ -13,5 +13,5 @@ export function FAQAccordion({ faqs, className = "", renderExpandedFooter, label
     return (_jsx(Div, { surface: "card", className: `divide-y divide-neutral-100 dark:divide-slate-700 ${className}`, padding: "x-md", children: faqs.map((faq) => (_jsx(FAQAccordionItem, { faq: faq, isOpen: openId === faq.id, onToggle: () => setOpenId(openId === faq.id ? null : faq.id), renderExpandedFooter: renderExpandedFooter }, faq.id))) }));
 }
 export function FAQCategoryTabs({ categories, active, onSelect, labels = {}, }) {
-    return (_jsxs(Row, { wrap: true, gap: "sm", className: "scrollbar-none", children: [_jsx(Button, { onClick: () => onSelect(null), className: `rounded-full px-4 py-1.5 text-sm font-medium transition ${!active ? "bg-neutral-900 text-white" : "bg-neutral-100 dark:bg-slate-800 text-neutral-600 dark:text-zinc-300 hover:bg-neutral-200 dark:hover:bg-slate-700"}`, children: labels.all ?? "All" }), categories.map((cat) => (_jsx(Button, { onClick: () => onSelect(cat), className: `whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium capitalize transition ${active === cat ? "bg-neutral-900 text-white" : "bg-neutral-100 dark:bg-slate-800 text-neutral-600 dark:text-zinc-300 hover:bg-neutral-200 dark:hover:bg-slate-700"}`, children: labels[cat] ?? cat.replace(/_/g, " ") }, cat)))] }));
+    return (_jsxs(Row, { wrap: true, gap: "sm", className: "scrollbar-none", children: [_jsx(Button, { onClick: () => onSelect(null), className: `rounded-[9999px] px-[1rem] py-[0.375rem] text-[0.875rem] font-[500] transition ${!active ? "bg-neutral-900 text-white" : "bg-neutral-100 dark:bg-slate-800 text-[var(--appkit-color-text-muted)] dark:text-[var(--appkit-color-text-faint)] hover:bg-neutral-200 dark:hover:bg-slate-700"}`, children: labels.all ?? "All" }), categories.map((cat) => (_jsx(Button, { onClick: () => onSelect(cat), className: `whitespace-nowrap rounded-[9999px] px-[1rem] py-[0.375rem] text-[0.875rem] font-[500] capitalize transition ${active === cat ? "bg-neutral-900 text-white" : "bg-neutral-100 dark:bg-slate-800 text-[var(--appkit-color-text-muted)] dark:text-[var(--appkit-color-text-faint)] hover:bg-neutral-200 dark:hover:bg-slate-700"}`, children: labels[cat] ?? cat.replace(/_/g, " ") }, cat)))] }));
 }

package/dist/features/faq/components/FAQCategorySidebar.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, Div, Heading, Row, Span, Text, TextLink } from "../../../ui";
 export function FAQCategorySidebar({ selectedCategory, onCategorySelect, categoryCounts, categories, allFaqsHref = "/faqs", categoryHref, contactHref, labels, }) {
     const totalCount = Object.values(categoryCounts).reduce((sum, count) => sum + count, 0);
-    return (_jsxs(Card, { variant: "outlined", padding: "lg", className: "dark:bg-slate-800/60", children: [_jsx(Heading, { level: 2, className: "mb-6", size: "lg", weight: "semibold", children: labels?.title ?? "Categories" }), _jsx(TextLink, { rounded: "lg", href: allFaqsHref, onClick: () => onCategorySelect?.("all"), className: `mb-3 block w-full p-4 text-left transition-colors ${selectedCategory === "all" ? "bg-primary/10 text-zinc-900 dark:text-zinc-100" : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-slate-700"}`, children: _jsxs(Row, { justify: "between", children: [_jsxs(Row, { gap: "3", children: [_jsx(Span, { size: "2xl", children: "FAQ" }), _jsx(Span, { size: "sm", weight: "medium", children: labels?.allFaqs ?? "All FAQs" })] }), _jsx(Span, { size: "xs", color: "muted", children: totalCount })] }) }), _jsx(Div, { border: "default", className: "mt-4 border-t", padding: "t-md", children: categories.map((category) => {
+    return (_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Heading, { level: 2, className: "mb-6", size: "lg", weight: "semibold", children: labels?.title ?? "Categories" }), _jsx(TextLink, { rounded: "lg", href: allFaqsHref, onClick: () => onCategorySelect?.("all"), className: `mb-3 block w-full p-4 text-left transition-colors ${selectedCategory === "all" ? "bg-primary/10 text-zinc-900 dark:text-zinc-100" : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-slate-700"}`, children: _jsxs(Row, { justify: "between", children: [_jsxs(Row, { gap: "3", children: [_jsx(Span, { size: "2xl", children: "FAQ" }), _jsx(Span, { size: "sm", weight: "medium", children: labels?.allFaqs ?? "All FAQs" })] }), _jsx(Span, { size: "xs", color: "muted", children: totalCount })] }) }), _jsx(Div, { border: "default", className: "mt-4 border-t", padding: "t-md", children: categories.map((category) => {
                     const isSelected = selectedCategory === category.key;
                     const count = categoryCounts[category.key] || 0;
                     return (_jsxs(TextLink, { rounded: "lg", href: categoryHref(category.key), onClick: () => onCategorySelect?.(category.key), className: `mb-3 block w-full p-4 text-left transition-colors ${isSelected ? "bg-primary/10 text-zinc-900 dark:text-zinc-100" : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-slate-700"}`, children: [_jsxs(Row, { justify: "between", className: "mb-1", children: [_jsxs(Row, { gap: "3", children: [category.icon ? (_jsx(Span, { size: "2xl", children: category.icon })) : null, _jsx(Span, { size: "sm", children: category.label })] }), _jsx(Span, { size: "xs", color: "muted", children: count })] }), isSelected && category.description ? (_jsx(Text, { className: "ml-11", color: "muted", size: "xs", children: category.description })) : null] }, category.key));
-                }) }), contactHref ? (_jsxs(Div, { border: "default", className: "border-t", padding: "t-lg", children: [_jsx(Text, { className: "mb-3", color: "muted", size: "sm", children: labels?.stillHaveQuestions ?? "Still have questions?" }), _jsx(TextLink, { rounded: "lg", href: contactHref, className: "block bg-primary p-4 text-center text-white transition-colors hover:bg-primary/90", weight: "medium", children: labels?.contactSupport ?? "Contact Support" })] })) : null] }));
+                }) }), contactHref ? (_jsxs(Div, { border: "default", className: "border-t", padding: "t-lg", children: [_jsx(Text, { className: "mb-3", color: "muted", size: "sm", children: labels?.stillHaveQuestions ?? "Still have questions?" }), _jsx(TextLink, { rounded: "lg", href: contactHref, className: "block bg-primary p-[1rem] text-center text-white transition-colors hover:bg-primary/90", weight: "medium", children: labels?.contactSupport ?? "Contact Support" })] })) : null] }));
 }

package/dist/features/faq/components/FAQHelpfulButtons.js

@@ -41,11 +41,11 @@ export function FAQHelpfulButtons({ faqId, initialHelpful, initialNotHelpful, on
     return (_jsxs(Div, { className: `${__P.p6}`, rounded: "lg", surface: "subtle", children: [_jsx(Text, { className: "mb-3", color: "muted", size: "sm", children: userVote
                     ? (labels?.thanksForFeedback ?? "Thanks for your feedback")
                     : (labels?.wasThisHelpful ?? "Was this helpful?") }), _jsxs(Row, { gap: "3", children: [_jsxs(Button, { variant: "ghost", onClick: () => handleVote(true), disabled: isPending || userVote !== null, className: `flex-1 gap-2 rounded-lg p-4 transition-all ${userVote === "helpful"
-                            ? "bg-green-600 text-white"
+                            ? "bg-success text-white"
                             : userVote
                                 ? "cursor-not-allowed bg-zinc-200 text-zinc-500 opacity-50 dark:bg-slate-600 dark:text-zinc-400"
                                 : "bg-white text-zinc-800 hover:bg-green-50 dark:bg-slate-800 dark:text-zinc-100 dark:hover:bg-green-900/20"}`, children: [_jsx(Span, { size: "sm", children: labels?.yes ?? "Yes" }), _jsxs(Span, { size: "sm", color: "muted", children: ["(", helpful, ")"] })] }), _jsxs(Button, { variant: "ghost", onClick: () => handleVote(false), disabled: isPending || userVote !== null, className: `flex-1 gap-2 rounded-lg p-4 transition-all ${userVote === "not-helpful"
-                            ? "bg-red-600 text-white"
+                            ? "bg-error text-white"
                             : userVote
                                 ? "cursor-not-allowed bg-zinc-200 text-zinc-500 opacity-50 dark:bg-slate-600 dark:text-zinc-400"
                                 : "bg-white text-zinc-800 hover:bg-red-50 dark:bg-slate-800 dark:text-zinc-100 dark:hover:bg-red-900/20"}`, children: [_jsx(Span, { size: "sm", children: labels?.no ?? "No" }), _jsxs(Span, { size: "sm", color: "muted", children: ["(", notHelpful, ")"] })] })] })] }));

package/dist/features/faq/components/RelatedFAQs.js

@@ -4,5 +4,5 @@ export function RelatedFAQs({ relatedFAQs, hrefForFaq, labels, }) {
     if (!relatedFAQs || relatedFAQs.length === 0) {
         return null;
     }
-    return (_jsxs(Card, { variant: "outlined", padding: "lg", className: "dark:bg-slate-800/60", children: [_jsx(Heading, { level: 3, className: "mb-4", size: "lg", weight: "semibold", children: labels?.title ?? "Related Questions" }), _jsx(Stack, { gap: "3", children: relatedFAQs.map((faq) => (_jsx(TextLink, { rounded: "lg", href: hrefForFaq ? hrefForFaq(faq) : `/faqs#${faq.id}`, className: "group block bg-zinc-100 p-4 transition-colors hover:bg-zinc-200 dark:bg-slate-700 dark:hover:bg-slate-600", children: _jsxs(Row, { align: "start", gap: "3", children: [_jsx("svg", { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-zinc-500 dark:text-zinc-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx(Text, { className: "transition-colors group-hover:text-primary", color: "primary", size: "sm", children: faq.question }), _jsx("svg", { className: "ml-auto mt-0.5 h-4 w-4 flex-shrink-0 text-zinc-500 opacity-0 transition-opacity group-hover:opacity-100 dark:text-zinc-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }) }, faq.id))) })] }));
+    return (_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Heading, { level: 3, className: "mb-4", size: "lg", weight: "semibold", children: labels?.title ?? "Related Questions" }), _jsx(Stack, { gap: "3", children: relatedFAQs.map((faq) => (_jsx(TextLink, { rounded: "lg", href: hrefForFaq ? hrefForFaq(faq) : `/faqs#${faq.id}`, className: "group block bg-[var(--appkit-color-surface-elevated)] p-[1rem] transition-colors hover:bg-[var(--appkit-color-border-subtle)]", children: _jsxs(Row, { align: "start", gap: "3", children: [_jsx("svg", { className: "mt-0.5 h-5 w-5 flex-shrink-0 text-zinc-500 dark:text-zinc-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx(Text, { className: "transition-colors group-hover:text-primary", color: "primary", size: "sm", children: faq.question }), _jsx("svg", { className: "ml-auto mt-0.5 h-4 w-4 flex-shrink-0 text-zinc-500 opacity-0 transition-opacity group-hover:opacity-100 dark:text-zinc-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }) }, faq.id))) })] }));
 }

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

@@ -143,14 +143,14 @@ export declare const faqListParamsSchema: z.ZodObject<{
     perPage: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
     category?: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | undefined;
-    q?: string | undefined;
     page?: number | undefined;
+    q?: string | undefined;
     perPage?: number | undefined;
     homepage?: boolean | undefined;
 }, {
     category?: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | undefined;
-    q?: string | undefined;
     page?: number | undefined;
+    q?: string | undefined;
     perPage?: number | undefined;
     homepage?: boolean | undefined;
 }>;

package/dist/features/filters/AsyncFacetSection.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Button, Div, Input, Row, Span, Stack, Text } from "../../ui";
 import { cn } from "./filterUtils";
-const CLS_BADGE_COUNT = "inline-flex items-center justify-center w-5 h-5 rounded-full bg-success-surface dark:bg-success-surface text-success dark:text-success ring-1 ring-emerald-600/20 dark:ring-emerald-400/20";
+const CLS_BADGE_COUNT = "inline-flex items-center justify-center w-5 h-5 rounded-full bg-success-surface dark:bg-success-surface text-success dark:text-success ring-1 ring-success/20";
 const CLS_CLEAR_ICON = "inline-flex items-center justify-center w-5 h-5 p-0 text-zinc-500 dark:text-zinc-400 hover:text-error dark:hover:text-error hover:bg-zinc-100 dark:hover:bg-slate-700 transition-colors rounded-full";
 /**
  * AsyncFacetSection — collapsible filter section that loads options from the API
@@ -62,6 +62,6 @@ export function AsyncFacetSection({ title, selected, onChange, loadOptions, sele
         .slice(0, 3);
     return (_jsxs(Div, { className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: () => setCollapsed((c) => !c), variant: "ghost", size: "sm", className: "flex-1 justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !collapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { size: "xs", className: CLS_BADGE_COUNT, children: selected.length }))] }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", collapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: CLS_CLEAR_ICON, "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), collapsed && hasValue && (_jsxs(Row, { wrap: true, gap: "xs", className: "mt-2", children: [selectedLabels.map((label) => (_jsx(Span, { layout: "inline-flex", size: "xs", border: "default", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: label }, label))), selected.length > 3 && (_jsxs(Span, { layout: "inline-flex", size: "xs", rounded: "full", padding: "pill-xs", color: "faint", children: ["+", selected.length - 3, " more"] }))] })), _jsx(Div, { className: "mt-2", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: query, onChange: (e) => handleQueryChange(e.target.value), className: "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" }) }), !collapsed && (_jsxs(Stack, { className: "mt-3", gap: "xs", children: [options.map((opt) => {
                         const isSelected = selected.includes(opt.value);
-                        return (_jsxs(Row, { gap: "2.5", className: "cursor-pointer group", padding: "y-2xs", children: [_jsx("input", { type: selectionMode === "single" ? "radio" : "checkbox", checked: isSelected, onChange: () => toggle(opt.value), "aria-label": opt.label, className: "flex-shrink-0 w-4 h-4 rounded border-zinc-300 dark:border-slate-600 cursor-pointer text-primary-600 dark:text-secondary-500" }), _jsx(Span, { size: "sm", className: "flex-1 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors truncate", color: "muted", children: opt.label }), opt.count !== undefined && (_jsx(Span, { size: "xs", className: "tabular-nums flex-shrink-0", color: "faint", children: opt.count }))] }, opt.value));
-                    }), options.length === 0 && !loading && (_jsx(Text, { paddingY: "2xs", color: "faint", size: "xs", children: "No results" })), loading && (_jsx(Text, { paddingY: "2xs", className: "animate-pulse", color: "faint", size: "xs", children: "Loading\u2026" })), hasMore && !loading && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", textSize: "xs", textColor: "faint", className: "w-full text-left hover:text-zinc-600 dark:hover:text-zinc-300 py-1", onClick: () => void load(query, page + 1), children: "Load more\u2026" }))] }))] }));
+                        return (_jsxs(Row, { gap: "2.5", className: "cursor-pointer group", padding: "y-2xs", children: [_jsx("input", { type: selectionMode === "single" ? "radio" : "checkbox", checked: isSelected, onChange: () => toggle(opt.value), "aria-label": opt.label, className: "flex-shrink-0 w-4 h-4 rounded border-zinc-300 dark:border-slate-600 cursor-pointer text-primary-600 dark:text-secondary-500" }), _jsx(Span, { size: "sm", className: "flex-1 group-hover:text-[var(--appkit-color-text)] transition-colors truncate", color: "muted", children: opt.label }), opt.count !== undefined && (_jsx(Span, { size: "xs", className: "tabular-nums flex-shrink-0", color: "faint", children: opt.count }))] }, opt.value));
+                    }), options.length === 0 && !loading && (_jsx(Text, { paddingY: "2xs", color: "faint", size: "xs", children: "No results" })), loading && (_jsx(Text, { paddingY: "2xs", className: "animate-pulse", color: "faint", size: "xs", children: "Loading\u2026" })), hasMore && !loading && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", textSize: "xs", textColor: "faint", className: "w-full text-left hover:text-[var(--appkit-color-text)] py-[0.25rem]", onClick: () => void load(query, page + 1), children: "Load more\u2026" }))] }))] }));
 }