@mohasinac/appkit 3.4.7 → 3.5.0

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

@@ -25,8 +25,8 @@ export declare const collectionItemSchema: z.ZodObject<{
     createdAt: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     title: string;
-    slug: string;
     sortOrder: number;
+    slug: string;
     active: boolean;
     image?: string | undefined;
     createdAt?: string | undefined;
@@ -42,9 +42,9 @@ export declare const collectionItemSchema: z.ZodObject<{
     slug: string;
     image?: string | undefined;
     createdAt?: string | undefined;
+    sortOrder?: number | undefined;
     description?: string | undefined;
     brandSlug?: string | undefined;
-    sortOrder?: number | undefined;
     active?: boolean | undefined;
     subtitle?: string | undefined;
     productCount?: number | undefined;

package/dist/features/consultation/components/ConsultationForm.js

@@ -41,7 +41,7 @@ export function ConsultationForm({ onSubmit, isPending, concerns = [], }) {
         e.preventDefault();
         await onSubmit(form);
     }
-    return (_jsxs(Form, { onSubmit: handleSubmit, spacing: "md", children: [_jsx(FieldInput, { name: "name", type: "text", placeholder: "Full name", value: form.name, onChange: (v) => handleValueChange("name", v), required: true }), _jsx(FieldInput, { name: "email", type: "email", placeholder: "Email address", value: form.email, onChange: (v) => handleValueChange("email", v), required: true }), _jsx(FieldInput, { name: "phone", type: "tel", placeholder: "Phone number", value: form.phone, onChange: (v) => handleValueChange("phone", v), required: true }), concerns.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", children: concerns.map((c) => (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => toggleConcern(c), className: `rounded-full border px-3 py-1 text-xs transition ${form.concern.includes(c)
+    return (_jsxs(Form, { onSubmit: handleSubmit, spacing: "md", children: [_jsx(FieldInput, { name: "name", type: "text", placeholder: "Full name", value: form.name, onChange: (v) => handleValueChange("name", v), required: true }), _jsx(FieldInput, { name: "email", type: "email", placeholder: "Email address", value: form.email, onChange: (v) => handleValueChange("email", v), required: true }), _jsx(FieldInput, { name: "phone", type: "tel", placeholder: "Phone number", value: form.phone, onChange: (v) => handleValueChange("phone", v), required: true }), concerns.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", children: concerns.map((c) => (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => toggleConcern(c), className: `rounded-full border px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] transition ${form.concern.includes(c)
                         ? "border-primary bg-primary text-white"
                         : "border-neutral-300 text-neutral-700 hover:border-primary"}`, children: c }, c))) })), _jsxs(Row, { gap: "3", children: [_jsx(FieldInput, { name: "preferredDate", type: "date", value: form.preferredDate, onChange: (v) => handleValueChange("preferredDate", v), required: true, className: "flex-1" }), _jsx(Select, { value: form.preferredTime, onValueChange: (value) => handleValueChange("preferredTime", value), options: TIME_SLOTS.map((t) => ({ value: t, label: t })), className: "flex-1" })] }), _jsx(Select, { value: form.mode, onValueChange: (value) => handleValueChange("mode", value), options: [
                     { value: "remote", label: "Remote (Video Call)" },

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

@@ -26,30 +26,30 @@ export declare const consultationBookingSchema: z.ZodObject<{
     adminNote: z.ZodOptional<z.ZodString>;
     createdAt: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    status: "cancelled" | "pending" | "confirmed" | "completed" | "no_show";
+    status: "pending" | "cancelled" | "confirmed" | "completed" | "no_show";
     id: string;
-    name: string;
     email: string;
+    name: string;
     message?: string | undefined;
-    phone?: string | undefined;
     createdAt?: string | undefined;
-    mode?: "phone" | "online" | "in_person" | undefined;
     adminNote?: string | undefined;
     userId?: string | undefined;
+    phone?: string | undefined;
+    mode?: "phone" | "online" | "in_person" | undefined;
     concern?: string[] | undefined;
     preferredDate?: string | undefined;
     preferredTime?: string | undefined;
 }, {
     id: string;
-    name: string;
     email: string;
-    status?: "cancelled" | "pending" | "confirmed" | "completed" | "no_show" | undefined;
+    name: string;
     message?: string | undefined;
-    phone?: string | undefined;
+    status?: "pending" | "cancelled" | "confirmed" | "completed" | "no_show" | undefined;
     createdAt?: string | undefined;
-    mode?: "phone" | "online" | "in_person" | undefined;
     adminNote?: string | undefined;
     userId?: string | undefined;
+    phone?: string | undefined;
+    mode?: "phone" | "online" | "in_person" | undefined;
     concern?: string[] | undefined;
     preferredDate?: string | undefined;
     preferredTime?: string | undefined;
@@ -67,8 +67,8 @@ export declare const bookConsultationSchema: z.ZodObject<{
     mode: z.ZodOptional<z.ZodEnum<["online", "in_person", "phone"]>>;
     message: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    name: string;
     email: string;
+    name: string;
     concern: string[];
     message?: string | undefined;
     phone?: string | undefined;
@@ -76,8 +76,8 @@ export declare const bookConsultationSchema: z.ZodObject<{
     preferredDate?: string | undefined;
     preferredTime?: string | undefined;
 }, {
-    name: string;
     email: string;
+    name: string;
     concern: string[];
     message?: string | undefined;
     phone?: string | undefined;

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

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
 import { useState, useCallback } from "react";
-import { Button, Div, Heading, Span, Stack, Text, Textarea } from "../../../ui";
+import { Button, Div, Form, Heading, Input, Span, Stack, Text, Textarea } from "../../../ui";
 const CLS_FIELD_ERROR = "text-error";
-const CLS_ERROR_BANNER = "rounded-lg bg-error-surface dark:bg-error-surface border border-error dark:border-error px-4 py-3 text-sm text-error dark:text-error";
+const CLS_ERROR_BANNER = "rounded-lg bg-error-surface dark:bg-error-surface border border-error dark:border-error px-[var(--appkit-space-4)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] text-error dark:text-error";
 const INITIAL_FORM = {
     name: "",
     email: "",
@@ -55,8 +55,8 @@ export function ContactForm({ onSubmit, labels = {}, className = "", }) {
     if (submitted) {
         return (_jsxs(Div, { className: `text-center ${className}`, padding: "y-3xl", children: [_jsx(Div, { textSize: "5xl", className: "mb-4", children: "\u2705" }), _jsx(Heading, { level: 2, className: "mb-2", children: labels.successTitle ?? "Message Sent!" }), _jsx(Text, { variant: "secondary", className: "mb-6", children: labels.successDescription ?? "We'll get back to you shortly." }), _jsx(Button, { type: "button", variant: "outline", onClick: () => setSubmitted(false), children: labels.sendAnotherButton ?? "Send another message" })] }));
     }
-    const field = (id, label, placeholder, multiline) => (_jsxs(Stack, { gap: "xs", children: [_jsx("label", { htmlFor: id, className: "text-sm font-medium text-[var(--appkit-color-text-muted)]", children: label }), multiline ? (_jsx(Textarea, { id: id, value: form[id], onChange: (e) => setForm((f) => ({ ...f, [id]: e.target.value })), placeholder: placeholder, rows: 5, className: "w-full rounded-lg border border-neutral-200 border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-3 py-2 text-sm outline-none focus:ring-2 ring-primary/20 transition" })) : (_jsx("input", { id: id, type: id === "email" ? "email" : "text", value: form[id], onChange: (e) => setForm((f) => ({ ...f, [id]: e.target.value })), placeholder: placeholder, className: "h-10 w-full rounded-lg border border-neutral-200 border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-3 text-sm outline-none focus:ring-2 ring-primary/20 transition" })), errors[id] && _jsx(Span, { size: "xs", className: CLS_FIELD_ERROR, children: errors[id] })] }));
-    return (_jsxs("form", { onSubmit: handleSubmit, noValidate: true, className: `space-y-4 ${className}`, children: [_jsx(Heading, { level: 2, className: "mb-6", children: labels.title ?? "Send us a message" }), submitError && (_jsx(Div, { className: CLS_ERROR_BANNER, children: submitError })), field("name", labels.nameLabel ?? "Your Name", labels.namePlaceholder ?? "Enter your name"), field("email", labels.emailLabel ?? "Email", labels.emailPlaceholder ?? "your@email.com"), field("subject", labels.subjectLabel ?? "Subject", labels.subjectPlaceholder ?? "How can we help?"), field("message", labels.messageLabel ?? "Message", labels.messagePlaceholder ?? "Tell us more…", true), _jsx(Button, { type: "submit", variant: "primary", disabled: isSubmitting, className: "w-full sm:w-auto", children: isSubmitting
+    const field = (id, label, placeholder, multiline) => (_jsxs(Stack, { gap: "xs", children: [_jsx("label", { htmlFor: id, className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)]", children: label }), multiline ? (_jsx(Textarea, { id: id, value: form[id], onChange: (e) => setForm((f) => ({ ...f, [id]: e.target.value })), placeholder: placeholder, rows: 5, className: "w-full rounded-lg border border-neutral-200 border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] outline-none focus:ring-2 ring-primary/20 transition" })) : (_jsx(Input, { id: id, type: id === "email" ? "email" : "text", value: form[id], onChange: (e) => setForm((f) => ({ ...f, [id]: e.target.value })), placeholder: placeholder, className: "h-10" })), errors[id] && _jsx(Span, { size: "xs", className: CLS_FIELD_ERROR, children: errors[id] })] }));
+    return (_jsxs(Form, { onSubmit: handleSubmit, noValidate: true, className: className, spacing: "md", children: [_jsx(Heading, { level: 2, className: "mb-6", children: labels.title ?? "Send us a message" }), submitError && (_jsx(Div, { className: CLS_ERROR_BANNER, children: submitError })), field("name", labels.nameLabel ?? "Your Name", labels.namePlaceholder ?? "Enter your name"), field("email", labels.emailLabel ?? "Email", labels.emailPlaceholder ?? "your@email.com"), field("subject", labels.subjectLabel ?? "Subject", labels.subjectPlaceholder ?? "How can we help?"), field("message", labels.messageLabel ?? "Message", labels.messagePlaceholder ?? "Tell us more…", true), _jsx(Button, { type: "submit", variant: "primary", disabled: isSubmitting, className: "w-full sm:w-auto", children: isSubmitting
                     ? (labels.submittingButton ?? "Sending…")
                     : (labels.submitButton ?? "Send Message") })] }));
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Anchor, Div, Heading, Row, Span, Stack, Text } from "../../../ui";
 const __P = {
-    p4: "p-4",
+    p4: "p-[var(--appkit-space-4)]",
 };
 export function ContactInfoSidebar({ infoItems, labels = {}, renderActions, }) {
     return (_jsxs(Stack, { as: "aside", gap: "lg", children: [_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-4", children: labels.title ?? "Contact Information" }), _jsx(Stack, { gap: "md", children: infoItems.map((item) => (_jsxs(Row, { align: "start", gap: "3", children: [_jsx(Span, { size: "xl", className: "flex-shrink-0 mt-0.5", children: item.icon }), _jsxs(Div, { children: [_jsx(Text, { className: "tracking-wide mb-0.5", color: "muted", size: "xs", weight: "medium", transform: "uppercase", children: item.label }), item.href ? (_jsx(Anchor, { href: item.href, size: "sm", underline: "hover", children: item.value })) : (_jsx(Text, { size: "sm", children: item.value }))] })] }, item.label))) })] }), (labels.businessHoursLabel || labels.responseTimeLabel) && (_jsxs(Stack, { gap: "sm", border: "default", surface: "muted", className: __P.p4, rounded: "xl", children: [labels.businessHoursLabel && labels.businessHoursValue && (_jsxs(Div, { children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: labels.businessHoursLabel }), _jsx(Text, { className: "mt-0.5", size: "sm", children: labels.businessHoursValue })] })), labels.responseTimeLabel && labels.responseTimeValue && (_jsxs(Div, { children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: labels.responseTimeLabel }), _jsx(Text, { className: "mt-0.5", size: "sm", children: labels.responseTimeValue })] }))] })), renderActions?.()] }));

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

@@ -5,8 +5,9 @@ import { AdSlot } from "../../homepage/components/AdSlot";
 import { ContactForm } from "./ContactForm";
 import { ContactInfoSidebar } from "./ContactInfoSidebar";
 import { apiClient } from "../../../http";
+import { CONTACT_ENDPOINTS } from "../../../constants/api-endpoints";
 async function submitContact(data) {
-    await apiClient.post("/api/contact", data);
+    await apiClient.post(CONTACT_ENDPOINTS.SUBMIT, data);
 }
 export function ContactPageView() {
     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: {

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

@@ -4,21 +4,22 @@ import { useEffect, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Alert, Button, Div, Form, Heading, Input, Row, Span, Stack, StackedViewShell, Text } from "../../../ui";
 import { apiClient } from "../../../http";
+import { COPILOT_ENDPOINTS } from "../../../constants/api-endpoints";
 import { useCopilotChat } from "../hooks/useCopilotChat";
 const __P = {
-    p3: "p-3",
-    p4: "p-4",
+    p3: "p-[var(--appkit-space-3)]",
+    p4: "p-[var(--appkit-space-4)]",
 };
 const __O = {
     yAuto: "overflow-y-auto",
 };
 const LBL_CONVERSATION_ID = "Conversation ID";
-const CLS_ERROR_TEXT = "text-center text-sm text-error";
+const CLS_ERROR_TEXT = "text-center text-[length:var(--appkit-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-[0.625rem] ${isUser ? "bg-primary text-white" : "bg-[var(--appkit-color-surface)] dark:bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text)]"}`, 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] }) }));
 }
-export function AdminCopilotView({ endpoint, historyEndpoint = "/api/copilot/history", renderHeader, labels = {}, className = "", }) {
+export function AdminCopilotView({ endpoint, historyEndpoint = COPILOT_ENDPOINTS.HISTORY, renderHeader, labels = {}, className = "", }) {
     const [input, setInput] = useState("");
     const [conversationInput, setConversationInput] = useState("");
     const messagesEndRef = useRef(null);

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

@@ -32,9 +32,9 @@ export declare const corporateInquirySchema: z.ZodObject<{
     companyName: string;
     contactPerson: string;
     customBranding: boolean;
-    phone?: string | undefined;
     createdAt?: string | undefined;
     adminNote?: string | undefined;
+    phone?: string | undefined;
     designation?: string | undefined;
     units?: number | undefined;
     budgetPerUnit?: number | undefined;
@@ -46,9 +46,9 @@ export declare const corporateInquirySchema: z.ZodObject<{
     companyName: string;
     contactPerson: string;
     status?: "pending" | "contacted" | "proposal_sent" | "negotiating" | "closed_won" | "closed_lost" | undefined;
-    phone?: string | undefined;
     createdAt?: string | undefined;
     adminNote?: string | undefined;
+    phone?: string | undefined;
     designation?: string | undefined;
     units?: number | undefined;
     budgetPerUnit?: number | undefined;

package/dist/features/digital-codes/components/DigitalCodesIndexListing.js

@@ -19,7 +19,7 @@ import { DigitalCodeFilters } from "./DigitalCodeFilters";
 import { ACTION_ID } from "../../products/constants/action-defs";
 import { useBottomActions } from "../../layout";
 const __P = {
-    p3: "p-3",
+    p3: "p-[var(--appkit-space-3)]",
 };
 const __O = {
     hidden: "overflow-hidden",
@@ -79,7 +79,7 @@ export function DigitalCodesIndexListing({ initialData }) {
         table.set(TABLE_KEYS.QUERY, searchInput.trim());
     }, [searchInput, table]);
     const selection = useBulkSelection({ items: products, keyExtractor: (p) => p.id });
-    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-[var(--appkit-space-4)]";
     const wishlistActions = {
         addToWishlist: (productId) => {
             requireAuth(ACTION_ID.ADD_TO_WISHLIST, () => {
@@ -110,5 +110,5 @@ export function DigitalCodesIndexListing({ initialData }) {
     useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [] } } : {});
     return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search digital codes\u2026", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: (e) => { if (e.key === "Enter")
                     commitSearch(); }, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: (v) => { if (v !== "table")
-                    setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: products.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [] }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" })] })] }, i))) })) : products.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "No digital code listings found." })) : (_jsx(Div, { className: view === "list" ? "flex flex-col divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)] rounded-xl border border-[var(--appkit-color-border-subtle)]" : gridClass, children: products.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.DIGITAL_CODE_DETAIL(product.id)), variant: view === "list" ? "list" : "grid", isWishlisted: wishlistActions.isWishlisted(product.id), onToggleWishlist: handleToggleWishlist, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(DigitalCodeFilters, { table: pendingTable, categoryOptions: categoryOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                    setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: products.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [] }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" })] })] }, i))) })) : products.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "No digital code listings found." })) : (_jsx(Div, { className: view === "list" ? "flex flex-col divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)] rounded-xl border border-[var(--appkit-color-border-subtle)]" : gridClass, children: products.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.DIGITAL_CODE_DETAIL(product.id)), variant: view === "list" ? "list" : "grid", isWishlisted: wishlistActions.isWishlisted(product.id), onToggleWishlist: handleToggleWishlist, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(DigitalCodeFilters, { table: pendingTable, categoryOptions: categoryOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

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

@@ -11,14 +11,14 @@ import { StepForm } from "../../shell";
 import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
 import { CouponInlineSelect } from "../../seller/components/CouponInlineSelect";
 const __P = {
-    p4: "p-4",
+    p4: "p-[var(--appkit-space-4)]",
 };
 const __O = {
     yAuto: "overflow-y-auto",
 };
-const CLS_REMOVE_BTN = "text-zinc-400 hover:text-error transition-colors text-lg leading-none px-1 p-0 min-h-0 h-auto rounded-none";
-const CLS_REMOVE_BTN_PX2 = "text-zinc-400 hover:text-error transition-colors px-2 py-1 text-lg leading-none p-0 min-h-0 h-auto rounded-none";
-const CLS_REMOVE_BTN_LG = "text-zinc-400 hover:text-error text-lg leading-none px-2 p-0 min-h-0 h-auto rounded-none";
+const CLS_REMOVE_BTN = "text-zinc-400 hover:text-error transition-colors text-[length:var(--appkit-text-lg)] leading-none px-[var(--appkit-space-1)] p-[var(--appkit-space-0)] min-h-0 h-auto rounded-none";
+const CLS_REMOVE_BTN_PX2 = "text-zinc-400 hover:text-error transition-colors px-[var(--appkit-space-2)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-lg)] leading-none p-[var(--appkit-space-0)] min-h-0 h-auto rounded-none";
+const CLS_REMOVE_BTN_LG = "text-zinc-400 hover:text-error text-[length:var(--appkit-text-lg)] leading-none px-[var(--appkit-space-2)] p-[var(--appkit-space-0)] min-h-0 h-auto rounded-none";
 const CLS_RAFFLE_PANEL = "border border-warning bg-warning-surface dark:border-warning dark:bg-warning-surface";
 const CLS_RAFFLE_HEADING = "text-warning dark:text-warning";
 const CLS_RAFFLE_BODY = "text-warning dark:text-warning";

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

@@ -8,7 +8,7 @@ import { apiClient } from "../../../http";
 import { DataTable } from "../../admin/components/DataTable";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 const __P = {
-    p4: "p-4",
+    p4: "p-[var(--appkit-space-4)]",
 };
 const REVIEW_STATUS_OPTIONS = [
     { label: "All", value: "all" },
@@ -111,7 +111,7 @@ export function AdminEventEntriesView({ eventId, entriesEndpoint, entryReviewEnd
         {
             key: "points",
             header: "Points",
-            render: (row) => (_jsxs(Row, { gap: "xs", className: "", align: "center", children: [_jsx("input", { type: "number", min: 0, className: "w-20 rounded border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] text-sm px-2 py-1 text-[var(--appkit-color-text-muted)] focus:outline-none focus:ring-2 focus:ring-primary/50", placeholder: "0", value: pointsInputs[row.id] ?? (row.points !== undefined ? String(row.points) : ""), onChange: (e) => setPointsInputs((prev) => ({ ...prev, [row.id]: e.target.value })) }), _jsx(Button, { size: "sm", variant: "outline", disabled: pointsMutation.isPending || !(row.id in pointsInputs), onClick: () => {
+            render: (row) => (_jsxs(Row, { gap: "xs", className: "", align: "center", children: [_jsx(Input, { bare: true, type: "number", min: 0, className: "w-20", placeholder: "0", value: pointsInputs[row.id] ?? (row.points !== undefined ? String(row.points) : ""), onChange: (e) => setPointsInputs((prev) => ({ ...prev, [row.id]: e.target.value })) }), _jsx(Button, { size: "sm", variant: "outline", disabled: pointsMutation.isPending || !(row.id in pointsInputs), onClick: () => {
                             const val = Number(pointsInputs[row.id]);
                             if (!isNaN(val)) {
                                 pointsMutation.mutate({ entryId: row.id, points: val, currentStatus: row.reviewStatus });

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

@@ -9,6 +9,7 @@ import { ADMIN_EVENT_STATUS_TABS } from "../../admin/constants/filter-tabs";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../../admin/hooks/useAdminListingData";
 import { DataListingView } from "../../admin/components/DataListingView";
 import { AdminEventEditorView } from "./AdminEventEditorView";
+import { ADMIN_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs";
 // TODO(events): TYPE_OPTIONS list pre-dates the SB9 EventType union refresh
 // (sale|offer|poll|survey|feedback|raffle|spin_wheel). Keep current values to
 // avoid silently breaking saved-filter URLs — sync in a dedicated follow-up.
@@ -62,14 +63,13 @@ export function AdminEventsView({ children, ...props }) {
             label: "Add Event",
             onClick: ({ openCreatePanel }) => openCreatePanel(),
         },
-        buildBulkActions: (selection) => [
-            {
-                id: "delete",
-                label: "Delete Selected",
-                variant: "secondary",
-                onClick: () => selection.clearSelection(),
-            },
-        ],
+        // Rule #7: bulk-action array sourced from the ADMIN_BULK_ACTIONS preset.
+        buildBulkActions: (selection) => ADMIN_BULK_ACTIONS.events.map((id) => ({
+            id,
+            label: ROW_ACTION_META[id].label,
+            destructive: ROW_ACTION_META[id].destructive,
+            onClick: () => selection.clearSelection(),
+        })),
         renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_EVENT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Type", tabs: TYPE_OPTIONS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) })] })),
         renderEditor: ({ editId, closePanel }) => (_jsx(AdminEventEditorView, { eventId: editId ?? undefined, onSaved: closePanel, embedded: true })),
         resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Event" : "Edit Event"),

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

@@ -45,7 +45,7 @@ export function EventBanner({ storageKey = "dismissed_event_banners", className
         }
     };
     return (_jsxs(Section, { tone: "accent-banner", className: [
-            "relative px-4 py-2 text-center text-sm font-medium text-white",
+            "relative px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-left text-[length:var(--appkit-text-sm)] font-medium text-white",
             className,
         ].join(" "), "data-section": "eventbanner-div-277", children: [_jsx(TextLink, { href: href, className: "hover:underline", children: text }), _jsx(Button, { type: "button", variant: "ghost", onClick: dismiss, "aria-label": labels?.dismissAriaLabel ?? "Dismiss banner", className: "absolute right-3 top-1/2 -translate-y-1/2 text-white/80 hover:text-white", children: "\u00D7" })] }));
 }

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

@@ -10,7 +10,7 @@ import { EventStatusBadge } from "./EventStatusBadge";
 import { ROUTES } from "../../../next";
 import { useLongPress } from "../../../react/hooks/useLongPress";
 const __P = {
-    p4: "p-4",
+    p4: "p-[var(--appkit-space-4)]",
 };
 const __O = {
     hidden: "overflow-hidden",
@@ -33,6 +33,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", 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: `relative aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: event.coverImageUrl, alt: safeTitle, size: "card", className: "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-[var(--appkit-color-text)] 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-[var(--appkit-color-text-muted)]" }), _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"] }))] })] }));
+    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: `relative aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: event.coverImageUrl, alt: safeTitle, size: "card", className: "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-[var(--appkit-color-text)] 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-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]" }), _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-[var(--appkit-space-2)] text-[length:var(--appkit-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/EventLeaderboard.js

@@ -10,7 +10,7 @@ export function EventLeaderboard({ isLoading = false, isEmpty = false, renderLis
     if (isEmpty) {
         if (renderEmpty)
             return _jsx(_Fragment, { children: renderEmpty() });
-        return (_jsx(Text, { paddingY: "md", variant: "secondary", size: "sm", align: "center", children: labels.noEntries ?? "No entries yet." }));
+        return (_jsx(Text, { paddingY: "md", variant: "secondary", size: "sm", align: "start", children: labels.noEntries ?? "No entries yet." }));
     }
     if (renderList)
         return _jsx(Div, { className: className, children: renderList() });

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

@@ -7,7 +7,7 @@ import { Code, Div, Heading, Row, Stack, Text } from "../../../ui";
 import { Button } from "../../../ui/components/Button";
 import { ROUTES } from "../../../next/routing/route-map";
 const __P = {
-    p6: "p-6",
+    p6: "p-[var(--appkit-space-6)]",
 };
 /**
  * `EventOfferCard` — W1-18 — offer event UI noted as missing in the plan.

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

@@ -3,12 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { useAuth } from "../../../react/contexts/SessionContext";
 import { ROUTES } from "../../../next";
-import { Div, LoginRequiredModal, Span, Stack, Text, TextLink } from "../../../ui";
+import { Button, Checkbox, Div, LoginRequiredModal, Span, Stack, Text, Textarea, TextLink } from "../../../ui";
+import { EVENT_ENDPOINTS } from "../../../constants/api-endpoints";
 import { normalizeError } from "../../../errors/normalize";
-const CLS_THANKS_BOX = "rounded-xl border border-success dark:border-success bg-success-surface px-6 py-8 text-center space-y-2";
+const CLS_THANKS_BOX = "rounded-xl border border-success dark:border-success bg-success-surface px-[var(--appkit-space-6)] py-[var(--appkit-space-8)] text-left space-y-2";
 export function EventPollWidget({ eventId, pollConfig, eventStatus, totalEntries, entriesEndpoint, className = "", }) {
     const { user } = useAuth();
-    const endpoint = entriesEndpoint ?? `/api/events/${eventId}/entries`;
+    const endpoint = entriesEndpoint ?? EVENT_ENDPOINTS.ENTRIES(eventId);
     const isEnded = eventStatus === "ended";
     const isMulti = pollConfig.allowMultiSelect;
     const [selectedVotes, setSelectedVotes] = useState([]);
@@ -62,10 +63,10 @@ export function EventPollWidget({ eventId, pollConfig, eventStatus, totalEntries
         return (_jsxs(Stack, { paddingX: "x-5", className: className, gap: "3", rounded: "xl", padding: "y-md", border: "default", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "This poll has closed." }), totalEntries !== undefined && (_jsxs(Text, { size: "sm", color: "faint", children: [totalEntries.toLocaleString(), " vote", totalEntries !== 1 ? "s" : "", " cast"] })), _jsx(Stack, { gap: "sm", children: pollConfig.options.map((opt) => (_jsx(Div, { textSize: "sm", paddingY: "y-xs-tall", color: "muted", border: "subtle", padding: "x-md", rounded: "lg", children: opt.label }, opt.id))) })] }));
     }
     if (pollConfig.requireLogin && !user) {
-        return (_jsxs(Stack, { className: `text-center ${className}`, gap: "3", rounded: "xl", paddingY: "y-xl", paddingX: "x-lg", border: "default", children: [_jsx(Text, { weight: "semibold", color: "primary", children: "Login to vote" }), _jsx(Text, { size: "sm", color: "muted", children: "You need an account to participate in this poll." }), _jsx(TextLink, { variant: "bare", href: String(ROUTES.AUTH.LOGIN), rounded: "xl", size: "sm", weight: "semibold", paddingX: "xl", paddingY: "sm", className: "inline-block bg-primary text-white hover:bg-primary-600", children: "Log In" })] }));
+        return (_jsxs(Stack, { className: `text-left ${className}`, gap: "3", rounded: "xl", paddingY: "y-xl", paddingX: "x-lg", border: "default", children: [_jsx(Text, { weight: "semibold", color: "primary", children: "Login to vote" }), _jsx(Text, { size: "sm", color: "muted", children: "You need an account to participate in this poll." }), _jsx(TextLink, { variant: "bare", href: String(ROUTES.AUTH.LOGIN), rounded: "xl", size: "sm", weight: "semibold", paddingX: "xl", paddingY: "sm", className: "inline-block bg-primary text-white hover:bg-primary-600", children: "Log In" })] }));
     }
     if (isSubmitted) {
         return (_jsxs(Div, { className: `${CLS_THANKS_BOX} ${className}`, children: [_jsx(Text, { className: "text-success", weight: "semibold", children: "Vote recorded!" }), _jsx(Text, { size: "sm", color: "muted", children: "Thanks for participating." })] }));
     }
-    return (_jsxs(Stack, { className: `${className}`, gap: "md", children: [_jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to vote in this poll. Please log in or create an account to continue." }), _jsx(Text, { size: "sm", weight: "medium", color: "primary", children: isMulti ? "Select all that apply:" : "Choose one:" }), _jsx(Stack, { gap: "sm", children: pollConfig.options.map((opt) => (_jsxs("label", { className: "flex items-center gap-3 cursor-pointer rounded-lg border border-[var(--appkit-color-border)] px-4 py-3 hover:bg-[var(--appkit-color-surface)] transition-colors", children: [_jsx("input", { type: isMulti ? "checkbox" : "radio", name: `poll-${eventId}`, value: opt.id, checked: selectedVotes.includes(opt.id), onChange: () => toggleVote(opt.id), className: "accent-primary" }), _jsx(Span, { size: "sm", color: "muted", children: opt.label })] }, opt.id))) }), pollConfig.allowComment && (_jsx("textarea", { value: comment, onChange: (e) => setComment(e.target.value), placeholder: "Add a comment (optional)", rows: 3, className: "w-full rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-3 py-2 text-sm text-[var(--appkit-color-text-muted)] placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary" })), error && _jsx(Text, { className: "text-error", size: "sm", children: error }), _jsx("button", { type: "button", onClick: handleSubmit, disabled: isLoading || selectedVotes.length === 0, className: "w-full rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-white hover:bg-primary-600 disabled:opacity-60", children: isLoading ? "Submitting…" : "Submit Vote" })] }));
+    return (_jsxs(Stack, { className: `${className}`, gap: "md", children: [_jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to vote in this poll. Please log in or create an account to continue." }), _jsx(Text, { size: "sm", weight: "medium", color: "primary", children: isMulti ? "Select all that apply:" : "Choose one:" }), _jsx(Stack, { gap: "sm", children: pollConfig.options.map((opt) => (_jsxs("label", { className: "flex items-center gap-[var(--appkit-space-3)] cursor-pointer rounded-lg border border-[var(--appkit-color-border)] px-[var(--appkit-space-4)] py-[var(--appkit-space-3)] hover:bg-[var(--appkit-color-surface)] transition-colors", children: [_jsx(Checkbox, { bare: true, type: isMulti ? "checkbox" : "radio", name: `poll-${eventId}`, value: opt.id, checked: selectedVotes.includes(opt.id), onChange: () => toggleVote(opt.id), className: "accent-primary" }), _jsx(Span, { size: "sm", color: "muted", children: opt.label })] }, opt.id))) }), pollConfig.allowComment && (_jsx(Textarea, { value: comment, onChange: (e) => setComment(e.target.value), placeholder: "Add a comment (optional)", rows: 3, className: "text-[var(--appkit-color-text-muted)]" })), error && _jsx(Text, { className: "text-error", size: "sm", children: error }), _jsx(Button, { variant: "primary", type: "button", onClick: handleSubmit, disabled: isLoading || selectedVotes.length === 0, rounded: "xl", paddingX: "xl", paddingY: "md", textSize: "sm", weight: "semibold", className: "w-full bg-primary hover:bg-primary-600", children: isLoading ? "Submitting…" : "Submit Vote" })] }));
 }

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

@@ -7,7 +7,7 @@ import { FieldTextarea } from "../../../ui/forms/FieldTextarea";
 import { Div, Heading, Stack, Text } from "../../../ui";
 import { Badge } from "../../../ui/components/Badge";
 const __P = {
-    p6: "p-6",
+    p6: "p-[var(--appkit-space-6)]",
 };
 /**
  * `EventRaffleEntryForm` — W1-18 — fills the gap noted in the plan ("Raffle

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Article, ClaimCouponButton, Div, Heading, Row, Span, Stack, Text, TextLink } from "../../../ui";
 const __P = {
-    p4: "p-4",
+    p4: "p-[var(--appkit-space-4)]",
 };
-const CLS_PANEL = "rounded-2xl border border-warning bg-warning-surface/60 dark:border-warning dark:bg-warning-surface p-6 space-y-3";
-const CLS_LABEL = "text-xs uppercase tracking-wide text-warning dark:text-warning";
-const CLS_WINNER_NAME = "mt-1 text-2xl font-bold text-warning dark:text-warning";
+const CLS_PANEL = "rounded-2xl border border-warning bg-warning-surface/60 dark:border-warning dark:bg-warning-surface p-[var(--appkit-space-6)] space-y-3";
+const CLS_LABEL = "text-[length:var(--appkit-text-xs)] uppercase tracking-wide text-warning dark:text-warning";
+const CLS_WINNER_NAME = "mt-1 text-[length:var(--appkit-text-2xl)] font-bold text-warning dark:text-warning";
 const DEFAULT_LABELS = {
     heading: "Raffle Winner",
     winnerLabel: "Winner",
@@ -18,7 +18,7 @@ const DEFAULT_LABELS = {
 export function EventRaffleWinnerView({ event, currentUserIsWinner, labels }) {
     const l = { ...DEFAULT_LABELS, ...(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 (_jsx(Div, { className: "border-dashed text-left", border: "strong", paddingY: "y-2xl", paddingX: "x-lg", rounded: "xl", children: _jsx(Text, { color: "muted", children: l.notDrawnYet }) }));
     }
     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/EventRafflesSection.js

@@ -28,5 +28,5 @@ export async function EventRafflesSection({ config, }) {
         void normalizeError(_err);
         events = [];
     }
-    return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), subtitle ? (_jsx(Text, { size: "sm", color: "muted", children: subtitle })) : null] }), events.length === 0 ? (_jsxs(Stack, { align: "center", gap: "sm", className: "border-dashed text-center", border: "strong", paddingY: "y-3xl", paddingX: "x-lg", rounded: "2xl", children: [_jsx(Text, { size: "sm", color: "muted", children: "No upcoming raffles \u2014 keep an eye on the events page." }), _jsx(Link, { href: String(ROUTES.PUBLIC.EVENTS), className: "text-sm font-medium text-primary hover:underline", children: "Browse all events \u2192" })] })) : (_jsx(Div, { gap: "3", className: "fluid-grid-card", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) }))] }) }) }));
+    return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), subtitle ? (_jsx(Text, { size: "sm", color: "muted", children: subtitle })) : null] }), events.length === 0 ? (_jsxs(Stack, { align: "start", gap: "sm", className: "border-dashed text-left", border: "strong", paddingY: "y-3xl", paddingX: "x-lg", rounded: "2xl", children: [_jsx(Text, { size: "sm", color: "muted", children: "No upcoming raffles \u2014 keep an eye on the events page." }), _jsx(Link, { href: String(ROUTES.PUBLIC.EVENTS), className: "text-[length:var(--appkit-text-sm)] font-medium text-primary hover:underline", children: "Browse all events \u2192" })] })) : (_jsx(Div, { gap: "3", className: "fluid-grid-card", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) }))] }) }) }));
 }

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

@@ -4,7 +4,7 @@ import { Div, Heading, Section, Span, Stack, Text } from "../../../ui";
 import { Button } from "../../../ui/components/Button";
 import { ROUTES } from "../../../next/routing/route-map";
 const __P = {
-    p6: "p-6",
+    p6: "p-[var(--appkit-space-6)]",
 };
 /**
  * `EventSaleBanner` — W1-18 — sale event UI noted as missing in the plan.

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

@@ -11,7 +11,7 @@ import { sieveFilter, sieveMultiEq, sieveAnd, SIEVE_OP } from "../../../utils/si
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
 import { sortBy } from "../../../constants/sort";
 const __P = {
-    p4: "p-4",
+    p4: "p-[var(--appkit-space-4)]",
 };
 const __O = {
     hidden: "overflow-hidden",
@@ -121,5 +121,7 @@ export function EventsIndexListing({ initialData }) {
     const commitSearch = useCallback(() => {
         table.set(TABLE_KEYS.QUERY, searchInput.trim());
     }, [searchInput, table]);
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search events...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || sortBy(EVENT_FIELDS.STARTS_AT, "ASC"), sortOptions: EVENT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-video", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p4}`, gap: "sm", children: [_jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8 mt-2", surface: "subtle", rounded: "default" })] })] }, i))) })) : events.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "No events found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })) : (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(EventFilters, { table: pendingTable, variant: "public" }) })] }));
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search events...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get(TABLE_KEYS.SORT) || sortBy(EVENT_FIELDS.STARTS_AT, "ASC"), sortOptions: EVENT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, toggles: [
+                    { label: "Show expired", active: showExpired, onChange: (next) => table.set(TABLE_KEYS.SHOW_EXPIRED, next ? "true" : "") },
+                ] }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-video", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p4}`, gap: "sm", children: [_jsx(Div, { className: "h-4 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-2/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8 mt-2", surface: "subtle", rounded: "default" })] })] }, i))) })) : events.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "No events found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", border: "subtle", rounded: "xl", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })) : (_jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(EventFilters, { table: pendingTable, variant: "public" }) })] }));
 }

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

@@ -3,7 +3,7 @@ import React from "react";
 import { Div, Pagination, Row, Stack, Text } from "../../../ui";
 import { EventCard } from "./EventCard";
 const __P = {
-    p4: "p-4",
+    p4: "p-[var(--appkit-space-4)]",
 };
 export function EventsListView({ events, isLoading, totalPages = 1, currentPage = 1, total = 0, onPageChange, onParticipate, emptyLabel = "No events found", slots, }) {
     if (isLoading) {
@@ -13,7 +13,7 @@ export function EventsListView({ events, isLoading, totalPages = 1, currentPage
         if (slots?.renderEmptyState) {
             return _jsx(_Fragment, { children: slots.renderEmptyState() });
         }
-        return (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: emptyLabel }));
+        return (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: emptyLabel }));
     }
     return (_jsxs(Stack, { gap: "xl", children: [slots?.renderHeader
                 ? slots.renderHeader({ total })

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

@@ -5,10 +5,12 @@ import { Button, ClaimCouponButton, Div, Heading, LoginRequiredModal, Row, Span,
 import { isAuthError } from "../../../utils/auth-error";
 import { normalizeError } from "../../../errors/normalize";
 const CLS_WHEEL = "relative mx-auto aspect-square w-64 overflow-hidden rounded-full border-4 border-warning bg-[image:var(--appkit-gradient-promotion)]";
-const CLS_PRIZE_BOX = "rounded-xl border border-success bg-success-surface dark:border-success p-4 text-center";
-const CLS_PRIZE_TITLE = "mt-1 text-lg font-bold text-success dark:text-success";
-const CLS_PRIZE_BODY = "mt-2 text-sm text-success dark:text-success";
-const CLS_ERROR_TEXT = "text-sm text-error dark:text-error text-center";
+// audit-content-alignment-ok: self-contained circular spin-wheel game widget, all text centered under the wheel by design
+const CLS_PRIZE_BOX = "rounded-xl border border-success bg-success-surface dark:border-success p-[var(--appkit-space-4)] text-center";
+const CLS_PRIZE_TITLE = "mt-1 text-[length:var(--appkit-text-lg)] font-bold text-success dark:text-success";
+const CLS_PRIZE_BODY = "mt-2 text-[length:var(--appkit-text-sm)] text-success dark:text-success";
+// audit-content-alignment-ok: self-contained circular spin-wheel game widget, all text centered under the wheel by design
+const CLS_ERROR_TEXT = "text-[length:var(--appkit-text-sm)] text-error dark:text-error text-center";
 const DEFAULT_LABELS = {
     heading: "Spin the Wheel",
     spinButton: "Spin",
@@ -76,5 +78,9 @@ export function SpinWheelView({ eventId, prizes, alreadyUsed, initialPrizeId, in
  0% { transform: rotate(0deg); }
  100% { transform: rotate(2160deg); }
  }
- ` })] }), wonPrize ? (_jsxs(Div, { className: CLS_PRIZE_BOX, children: [_jsx(Text, { className: "tracking-wide text-success", size: "sm", transform: "uppercase", children: l.wonHeadline }), _jsx(Text, { className: CLS_PRIZE_TITLE, children: wonPrize.label }), resultCoupon ? (_jsxs(_Fragment, { children: [_jsxs(Text, { className: CLS_PRIZE_BODY, children: [l.couponHint, " ", _jsx(Span, { weight: "semibold", className: "font-mono", children: resultCoupon })] }), _jsx(Row, { className: "mt-3", justify: "center", children: _jsx(ClaimCouponButton, { couponCode: resultCoupon, size: "sm", source: "spin" }) })] })) : null] })) : null, error ? (_jsx(Text, { className: CLS_ERROR_TEXT, children: error })) : null, _jsx(Row, { justify: "center", children: _jsx(Button, { variant: "primary", size: "lg", onClick: handleSpin, disabled: disabled, children: spinning ? l.spinningButton : l.spinButton }) }), alreadyUsed ? (_jsx(Text, { size: "sm", align: "center", color: "muted", children: l.alreadySpun })) : !inWindow ? (_jsx(Text, { size: "sm", align: "center", color: "muted", children: l.outsideWindow })) : null] }));
+ ` })] }), wonPrize ? (_jsxs(Div, { className: CLS_PRIZE_BOX, children: [_jsx(Text, { className: "tracking-wide text-success", size: "sm", transform: "uppercase", children: l.wonHeadline }), _jsx(Text, { className: CLS_PRIZE_TITLE, children: wonPrize.label }), resultCoupon ? (_jsxs(_Fragment, { children: [_jsxs(Text, { className: CLS_PRIZE_BODY, children: [l.couponHint, " ", _jsx(Span, { weight: "semibold", className: "font-mono", children: resultCoupon })] }), _jsx(Row, { className: "mt-3", justify: "center", children: _jsx(ClaimCouponButton, { couponCode: resultCoupon, size: "sm", source: "spin" }) })] })) : null] })) : null, error ? (_jsx(Text, { className: CLS_ERROR_TEXT, children: error })) : null, _jsx(Row, { justify: "center", children: _jsx(Button, { variant: "primary", size: "lg", onClick: handleSpin, disabled: disabled, children: spinning ? l.spinningButton : l.spinButton }) }), alreadyUsed ? (
+            // audit-content-alignment-ok: self-contained circular spin-wheel game widget, status text centered under the wheel by design
+            _jsx(Text, { size: "sm", align: "center", color: "muted", children: l.alreadySpun })) : !inWindow ? (
+            // audit-content-alignment-ok: self-contained circular spin-wheel game widget, status text centered under the wheel by design
+            _jsx(Text, { size: "sm", align: "center", color: "muted", children: l.outsideWindow })) : null] }));
 }