@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -1,4 +1,6 @@
 import { type ReactNode } from "react";
+import type { ZodType } from "zod";
+import type { FormFieldValue, FormValues } from "../../schemas/types";
 export type QuickFieldType = "text" | "number" | "select" | "toggle" | "date" | "textarea" | "email" | "url";
 export interface QuickFieldDef {
     name: string;
@@ -11,19 +13,26 @@ export interface QuickFieldDef {
     required?: boolean;
     placeholder?: string;
     helperText?: string;
-    defaultValue?: unknown;
+    defaultValue?: FormFieldValue;
 }
 export interface QuickFormDrawerProps {
     isOpen: boolean;
     onClose: () => void;
     title: string;
     fields: QuickFieldDef[];
-    defaultValues?: Record<string, unknown>;
-    onSubmit: (values: Record<string, unknown>) => void | Promise<void>;
+    defaultValues?: FormValues;
+    onSubmit: (values: FormValues) => void | Promise<void>;
     submitLabel?: string;
     cancelLabel?: string;
     isLoading?: boolean;
+    /**
+     * Zod schema covering every field. When supplied, replaces the manual
+     * `required` check — the Zod parse becomes the single source of validation
+     * truth. `audit-quick-form-drawer-schema` requires every callsite to pass
+     * this prop.
+     */
+    schema?: ZodType<FormValues> | ZodType<unknown>;
     /** Extra content rendered below auto-generated fields. */
-    renderExtra?: (values: Record<string, unknown>, onChange: (name: string, value: unknown) => void) => ReactNode;
+    renderExtra?: (values: FormValues, onChange: (name: string, value: FormFieldValue) => void) => ReactNode;
 }
-export declare function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues, onSubmit, submitLabel, cancelLabel, isLoading, renderExtra, }: QuickFormDrawerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues, onSubmit, submitLabel, cancelLabel, isLoading, schema, renderExtra, }: QuickFormDrawerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/shell/QuickFormDrawer.js

@@ -5,7 +5,7 @@ import { X } from "lucide-react";
 import { Button } from "../../ui/components/Button";
 import { FormField } from "../../ui/components/FormField";
 import { Toggle } from "../../ui/components/Toggle";
-import { Div, Text } from "../../ui";
+import { Div, Row, Stack, Text } from "../../ui";
 function initValues(fields, defaults = {}) {
     const out = {};
     for (const f of fields) {
@@ -17,7 +17,7 @@ function initValues(fields, defaults = {}) {
     return out;
 }
 const FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
-export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues, onSubmit, submitLabel = "Save", cancelLabel = "Cancel", isLoading = false, renderExtra, }) {
+export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues, onSubmit, submitLabel = "Save", cancelLabel = "Cancel", isLoading = false, schema, renderExtra, }) {
     const drawerRef = useRef(null);
     const [values, setValues] = useState(() => initValues(fields, defaultValues));
     const [errors, setErrors] = useState({});
@@ -34,6 +34,24 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
             setErrors((prev) => { const n = { ...prev }; delete n[name]; return n; });
     };
     const validate = () => {
+        // Schema-first: when a Zod schema is supplied, it is the single source of
+        // truth — manual `required` checks are skipped entirely. Falls back to
+        // the manual check only when the callsite has not yet been migrated.
+        if (schema) {
+            const parsed = schema.safeParse(values);
+            if (parsed.success) {
+                setErrors({});
+                return true;
+            }
+            const errs = {};
+            for (const issue of parsed.error.issues) {
+                const path = issue.path[0];
+                if (typeof path === "string" && !errs[path])
+                    errs[path] = issue.message;
+            }
+            setErrors(errs);
+            return false;
+        }
         const errs = {};
         for (const f of fields) {
             if (f.required) {
@@ -103,19 +121,19 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
     if (!isOpen)
         return null;
     const busy = submitting || isLoading;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { className: "fixed inset-0 bg-black/40 backdrop-blur-[2px]", 
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px]", 
                 // audit-inline-style-ok: z-index token
                 style: { zIndex: "calc(var(--appkit-z-modal) + 1)" }, "aria-hidden": "true", onClick: handleClose }), _jsxs("div", { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed inset-y-0 right-0 flex flex-col bg-[var(--appkit-color-surface)] shadow-2xl w-full lg:w-[40%]", 
                 // audit-inline-style-ok: z-index token
-                style: { zIndex: "calc(var(--appkit-z-modal) + 2)" }, children: [_jsxs(Div, { className: "flex-shrink-0 flex items-center gap-3 px-4 py-4 border-b border-[var(--appkit-color-border)]", children: [_jsx(Text, { className: "flex-1 text-base font-semibold text-[var(--appkit-color-text)]", children: title }), _jsx("button", { type: "button", onClick: handleClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("form", { className: "flex-1 overflow-y-auto px-4 py-5 space-y-4", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
+                style: { zIndex: "calc(var(--appkit-z-modal) + 2)" }, children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx("button", { type: "button", onClick: handleClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("form", { className: "flex-1 overflow-y-auto px-4 py-5 space-y-4", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
                                 const value = values[field.name];
                                 if (field.type === "toggle") {
-                                    return (_jsxs(Div, { className: "space-y-1", children: [_jsx(Toggle, { checked: !!value, onChange: (checked) => set(field.name, checked), label: field.label }), field.helperText && (_jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: field.helperText }))] }, field.name));
+                                    return (_jsxs(Stack, { gap: "xs", children: [_jsx(Toggle, { checked: !!value, onChange: (checked) => set(field.name, checked), label: field.label }), field.helperText && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: field.helperText }))] }, field.name));
                                 }
                                 return (_jsxs(Div, { children: [_jsx(FormField, { name: field.name, label: field.label, type: field.type === "textarea"
                                                 ? "textarea"
                                                 : field.type === "select"
                                                     ? "select"
-                                                    : "text", value: String(value ?? ""), onChange: (v) => set(field.name, field.type === "number" ? Number(v) : v), options: field.options, placeholder: field.placeholder, disabled: busy, error: errors[field.name] }), field.helperText && !errors[field.name] && (_jsx(Text, { className: "mt-1 text-xs text-[var(--appkit-color-text-muted)]", children: field.helperText }))] }, field.name));
-                            }), renderExtra?.(values, set)] }), _jsxs(Div, { className: "flex-shrink-0 flex items-center justify-between gap-2 px-4 py-4 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-bg)]", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleClose, disabled: busy, children: cancelLabel }), _jsxs(Button, { variant: "primary", size: "sm", onClick: () => void handleSubmit(), disabled: busy, isLoading: busy, children: [submitLabel, " \u2192"] })] })] })] }));
+                                                    : "text", value: String(value ?? ""), onChange: (v) => set(field.name, field.type === "number" ? Number(v) : v), options: field.options, placeholder: field.placeholder, disabled: busy, error: errors[field.name] }), field.helperText && !errors[field.name] && (_jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "xs", children: field.helperText }))] }, field.name));
+                            }), renderExtra?.(values, set)] }), _jsxs(Row, { className: "flex-shrink-0 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-bg)]", padding: "md", align: "center", justify: "between", gap: "sm", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: handleClose, disabled: busy, children: cancelLabel }), _jsxs(Button, { variant: "primary", size: "sm", onClick: () => void handleSubmit(), disabled: busy, isLoading: busy, children: [submitLabel, " \u2192"] })] })] })] }));
 }

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
-export interface StepDef<T extends object = Record<string, unknown>> {
+import type { JsonValue } from "@mohasinac/appkit";
+export interface StepDef<T extends object = Record<string, JsonValue>> {
     label: string;
     render: (props: {
         values: T;
@@ -9,7 +10,7 @@ export interface StepDef<T extends object = Record<string, unknown>> {
     /** Returns an error message string if invalid, or null/undefined if valid. */
     validate?: (values: T) => string | null | undefined;
 }
-export interface StepFormProps<T extends object = Record<string, unknown>> {
+export interface StepFormProps<T extends object = Record<string, JsonValue>> {
     steps: StepDef<T>[];
     values: T;
     onChange: (partial: Partial<T>) => void;
@@ -47,4 +48,4 @@ export declare function StepIndicator({ steps, currentStep, onStepClick, stepErr
     /** True for each step that has a validation error — renders a red dot badge */
     stepErrors?: boolean[];
 }): import("react/jsx-runtime").JSX.Element;
-export declare function StepForm<T extends object = Record<string, unknown>>({ steps, values, onChange, onComplete, completeLabel, isLoading, formId, currentStep, onStepChange, hideActions, stepErrors, }: StepFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function StepForm<T extends object = Record<string, JsonValue>>({ steps, values, onChange, onComplete, completeLabel, isLoading, formId, currentStep, onStepChange, hideActions, stepErrors, }: StepFormProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/features/shell/StepForm.js

@@ -4,31 +4,32 @@ import { useCallback, useEffect, useState } from "react";
 import { Check } from "lucide-react";
 import { Button } from "../../ui/components/Button";
 import { classNames } from "../../ui/style.helper";
-import { Div, Span, Text, useToast } from "../../ui";
+import { Div, Nav, Row, Span, Stack, Text, useToast } from "../../ui";
+import { normalizeError } from "../../errors/normalize";
 /** Standalone step nav bar — use as `renderBottomBar` in FormShell. */
 export function StepFormActions({ currentStep, totalSteps, onNext, onPrev, completeLabel = "Publish Now", isLoading = false, disabled = false, }) {
     const isFirst = currentStep === 0;
     const isLast = currentStep === totalSteps - 1;
     const nextStepLabel = `Next →`;
-    return (_jsxs(Div, { className: "flex items-center justify-between gap-2 px-5 py-3 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: [_jsx(_Fragment, { children: !isFirst && onPrev && (_jsx(Button, { variant: "outline", size: "sm", onClick: onPrev, disabled: disabled || isLoading, children: "\u2190 Back" })) }), _jsxs(Div, { className: "flex items-center gap-3", children: [_jsxs(Span, { size: "xs", className: "text-[var(--appkit-color-text-muted)]", children: [currentStep + 1, " / ", totalSteps] }), _jsx(Button, { variant: "primary", size: "sm", onClick: onNext, disabled: disabled || isLoading, isLoading: isLoading && isLast, children: isLast ? completeLabel : nextStepLabel })] })] }));
+    return (_jsxs(Row, { paddingX: "x-5", className: "border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", padding: "y-sm", align: "center", justify: "between", gap: "sm", children: [_jsx(_Fragment, { children: !isFirst && onPrev && (_jsx(Button, { variant: "outline", size: "sm", onClick: onPrev, disabled: disabled || isLoading, children: "\u2190 Back" })) }), _jsxs(Row, { align: "center", gap: "3", children: [_jsxs(Span, { size: "xs", color: "muted", children: [currentStep + 1, " / ", totalSteps] }), _jsx(Button, { variant: "primary", size: "sm", onClick: onNext, disabled: disabled || isLoading, isLoading: isLoading && isLast, children: isLast ? completeLabel : nextStepLabel })] })] }));
 }
 /** Step indicator bar shown above step content. */
 export function StepIndicator({ steps, currentStep, onStepClick, stepErrors, }) {
-    return (_jsx("nav", { "aria-label": "Form steps", className: "flex items-center gap-0 mb-6 overflow-x-auto", children: steps.map((step, i) => {
+    return (_jsx(Nav, { "aria-label": "Form steps", layout: "flex", gap: "none", className: "mb-6 overflow-x-auto", children: steps.map((step, i) => {
             const isDone = i < currentStep;
             const isActive = i === currentStep;
             const hasError = stepErrors?.[i] === true;
-            return (_jsxs(Div, { className: "flex items-center gap-0 flex-shrink-0", children: [_jsxs("button", { type: "button", disabled: !isDone && !isActive, onClick: () => isDone && onStepClick?.(i), className: classNames("flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors", isActive
+            return (_jsxs(Row, { className: "flex-shrink-0", align: "center", gap: "none", children: [_jsxs("button", { type: "button", disabled: !isDone && !isActive, onClick: () => isDone && onStepClick?.(i), className: classNames("flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors", isActive
                             ? "font-semibold text-[var(--appkit-color-primary)]"
                             : isDone
                                 ? "text-[var(--appkit-color-text-muted)] cursor-pointer hover:text-[var(--appkit-color-text)]"
-                                : "text-[var(--appkit-color-text-faint)] cursor-default"), children: [_jsxs("span", { className: "relative flex-shrink-0", children: [hasError && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-[var(--appkit-color-error)] z-10", "aria-label": "This step has errors" })), _jsx("span", { className: classNames("flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold border-2", hasError
+                                : "text-[var(--appkit-color-text-faint)] cursor-default"), children: [_jsxs(Span, { className: "relative flex-shrink-0", children: [hasError && (_jsx(Span, { className: "absolute -top-0.5 -right-0.5 w-2 h-2 bg-[var(--appkit-color-error)] z-10", rounded: "full", "aria-label": "This step has errors" })), _jsx(Span, { className: classNames("flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold border-2", hasError
                                             ? "border-[var(--appkit-color-error)] bg-[var(--appkit-color-error)] text-white"
                                             : isActive
                                                 ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
                                                 : isDone
                                                     ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
-                                                    : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-faint)]"), children: isDone && !hasError ? _jsx(Check, { className: "w-3 h-3" }) : hasError ? "!" : i + 1 })] }), _jsx("span", { className: "hidden sm:inline", children: step.label })] }), i < steps.length - 1 && (_jsx(Div, { className: classNames("w-6 h-px flex-shrink-0 mx-1", i < currentStep
+                                                    : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-faint)]"), children: isDone && !hasError ? _jsx(Check, { className: "w-3 h-3" }) : hasError ? "!" : i + 1 })] }), _jsx(Span, { className: "hidden sm:inline", children: step.label })] }), i < steps.length - 1 && (_jsx(Div, { className: classNames("w-6 h-px flex-shrink-0 mx-1", i < currentStep
                             ? "bg-[var(--appkit-color-primary)]"
                             : "bg-[var(--appkit-color-border)]") }))] }, i));
         }) }));
@@ -72,6 +73,7 @@ export function StepForm({ steps, values, onChange, onComplete, completeLabel =
                 await onComplete();
             }
             catch (err) {
+                void normalizeError(err);
                 showToast(err instanceof Error ? err.message : "Something went wrong.", "error");
             }
         }
@@ -84,8 +86,8 @@ export function StepForm({ steps, values, onChange, onComplete, completeLabel =
     }, [currentStep, onStepChange]);
     const currentStepDef = steps[currentStep];
     const isLast = currentStep === steps.length - 1;
-    return (_jsxs(Div, { className: "flex flex-col", children: [_jsx(StepIndicator, { steps: steps, currentStep: currentStep, stepErrors: stepErrors, onStepClick: (i) => { if (i < currentStep) {
+    return (_jsxs(Stack, { children: [_jsx(StepIndicator, { steps: steps, currentStep: currentStep, stepErrors: stepErrors, onStepClick: (i) => { if (i < currentStep) {
                     setStepError(null);
                     onStepChange(i);
-                } } }), _jsx(Div, { className: "flex-1", children: currentStepDef?.render({ values, onChange, errors: fieldErrors }) }), !hideActions && stepError && (_jsx(Text, { className: "mt-3 text-sm text-[var(--appkit-color-error)]", children: stepError })), !hideActions && (_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void goNext(), onPrev: currentStep > 0 ? goPrev : undefined, completeLabel: completeLabel, isLoading: isLoading && isLast, disabled: isLoading }))] }));
+                } } }), _jsx(Div, { className: "flex-1", children: currentStepDef?.render({ values, onChange, errors: fieldErrors }) }), !hideActions && stepError && (_jsx(Text, { className: "mt-3 text-[var(--appkit-color-error)]", size: "sm", children: stepError })), !hideActions && (_jsx(StepFormActions, { currentStep: currentStep, totalSteps: steps.length, onNext: () => void goNext(), onPrev: currentStep > 0 ? goPrev : undefined, completeLabel: completeLabel, isLoading: isLoading && isLast, disabled: isLoading }))] }));
 }

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

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useTransition, useMemo } from "react";
-import { Toggle, Text, Div, Stack, Input, Span, Table, Thead, Tbody, Tr, Th, Td } from "../../../ui";
+import { Code, Div, Input, Row, Span, Stack, Table, Tbody, Td, Text, Th, Thead, Toggle, Tr } from "../../../ui";
 import { ACTION_META, ACTION_ID } from "../../products/constants/action-defs";
 import { useToast } from "../../../ui";
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_CUSTOM_PILL = "inline-block rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-300";
+const CLS_CUSTOM_PILL = "inline-block rounded-full bg-warning-surface px-2 py-0.5 text-xs font-medium text-warning dark:bg-warning-surface dark:text-warning";
 const CATEGORY_LABELS = {
     "buy-now": "Public CTA",
     "add-to-cart": "Public CTA",
@@ -44,17 +44,17 @@ const CATEGORY_LABELS = {
     "delete-account": "Account",
 };
 const CATEGORY_COLORS = {
-    "Public CTA": "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+    "Public CTA": "bg-info-surface text-info dark:bg-info-surface dark:text-info",
     "Auction CTA": "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
     "Pre-order CTA": "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300",
-    "Checkout": "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
-    "Prize Draw": "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300",
-    "Raffle": "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300",
-    "Moderation": "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300",
+    "Checkout": "bg-success-surface text-success dark:bg-success-surface dark:text-success",
+    "Prize Draw": "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
+    "Raffle": "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
+    "Moderation": "bg-error-surface text-error dark:bg-error-surface dark:text-error",
     "Social": "bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-300",
-    "Reviews": "bg-teal-100 text-teal-800 dark:bg-teal-900/30 dark:text-teal-300",
+    "Reviews": "bg-success-surface text-success dark:bg-success-surface dark:text-success",
     "Messaging": "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300",
-    "Seller": "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+    "Seller": "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
     "Orders": "bg-lime-100 text-lime-800 dark:bg-lime-900/30 dark:text-lime-300",
     "Account": "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300",
 };
@@ -90,7 +90,7 @@ export function ActionPermissionsManager({ initialConfig, onUpdate }) {
         });
     };
     const isEnabled = (id) => config[id]?.enabled ?? ACTION_META[id]?.defaultEnabled ?? true;
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { className: "flex items-center gap-3", children: [_jsx(Input, { placeholder: "Search actions\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "h-9 max-w-sm text-sm" }), _jsxs(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [filteredActions.length, " action", filteredActions.length !== 1 ? "s" : ""] })] }), _jsx(Div, { className: `${__O.hidden} rounded-xl border border-zinc-200 dark:border-slate-700`, children: _jsxs(Table, { className: "w-full text-sm", children: [_jsx(Thead, { children: _jsxs(Tr, { className: "border-b border-zinc-200 bg-zinc-50 dark:border-slate-700 dark:bg-slate-800", children: [_jsx(Th, { className: "px-4 py-3 text-left font-semibold text-zinc-700 dark:text-zinc-300", children: "Action" }), _jsx(Th, { className: "px-4 py-3 text-left font-semibold text-zinc-700 dark:text-zinc-300", children: "Category" }), _jsx(Th, { className: "px-4 py-3 text-left font-semibold text-zinc-700 dark:text-zinc-300", children: "Auth" }), _jsx(Th, { className: "px-4 py-3 text-left font-semibold text-zinc-700 dark:text-zinc-300", children: "Permission" }), _jsx(Th, { className: "px-4 py-3 text-right font-semibold text-zinc-700 dark:text-zinc-300", children: "Enabled" })] }) }), _jsx(Tbody, { children: filteredActions.map((id, idx) => {
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Input, { placeholder: "Search actions\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "h-9 max-w-sm text-sm" }), _jsxs(Text, { size: "sm", color: "muted", children: [filteredActions.length, " action", filteredActions.length !== 1 ? "s" : ""] })] }), _jsx(Div, { className: `${__O.hidden}`, rounded: "xl", border: "default", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { surface: "subtle", border: "default", children: [_jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Action" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Category" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Auth" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Permission" }), _jsx(Th, { className: "text-right", padding: "md", color: "primary", weight: "semibold", children: "Enabled" })] }) }), _jsx(Tbody, { children: filteredActions.map((id, idx) => {
                                 const meta = ACTION_META[id];
                                 const enabled = isEnabled(id);
                                 const category = CATEGORY_LABELS[id] ?? "Other";
@@ -98,6 +98,6 @@ export function ActionPermissionsManager({ initialConfig, onUpdate }) {
                                 return (_jsxs(Tr, { className: [
                                         idx % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-zinc-50/50 dark:bg-slate-800/50",
                                         !enabled ? "opacity-60" : "",
-                                    ].join(" "), children: [_jsx(Td, { className: "px-4 py-3", children: _jsxs(Div, { children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100", children: meta.label }), _jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400", children: id })] }) }), _jsx(Td, { className: "px-4 py-3", children: _jsx(Span, { size: "xs", weight: "medium", className: `inline-block rounded-full px-2 py-0.5 ${categoryColor}`, children: category }) }), _jsx(Td, { className: "px-4 py-3", children: meta.requiresAuth ? (_jsx(Span, { className: CLS_CUSTOM_PILL, children: "Auth required" })) : (_jsx(Text, { className: "text-xs text-zinc-400", children: "\u2014" })) }), _jsx(Td, { className: "px-4 py-3", children: meta.requiredPermission ? (_jsx("code", { className: "rounded bg-zinc-100 px-1.5 py-0.5 text-xs text-zinc-700 dark:bg-slate-700 dark:text-zinc-300", children: meta.requiredPermission })) : (_jsx(Text, { className: "text-xs text-zinc-400", children: "\u2014" })) }), _jsx(Td, { className: "px-4 py-3 text-right", children: _jsx(Toggle, { checked: enabled, onChange: (v) => handleToggle(id, v), "aria-label": `Toggle ${meta.label}` }) })] }, id));
+                                    ].join(" "), children: [_jsx(Td, { padding: "md", children: _jsxs(Div, { children: [_jsx(Text, { weight: "medium", color: "primary", children: meta.label }), _jsx(Text, { size: "xs", color: "faint", children: id })] }) }), _jsx(Td, { padding: "md", children: _jsx(Span, { size: "xs", weight: "medium", className: `inline-block ${categoryColor}`, rounded: "full", padding: "pill-xs", children: category }) }), _jsx(Td, { padding: "md", children: meta.requiresAuth ? (_jsx(Span, { className: CLS_CUSTOM_PILL, children: "Auth required" })) : (_jsx(Text, { size: "xs", color: "faint", children: "\u2014" })) }), _jsx(Td, { padding: "md", children: meta.requiredPermission ? (_jsx(Code, { size: "xs", rounded: "default", padding: "sm", surface: "subtle", children: meta.requiredPermission })) : (_jsx(Text, { size: "xs", color: "faint", children: "\u2014" })) }), _jsx(Td, { className: "text-right", padding: "md", children: _jsx(Toggle, { checked: enabled, onChange: (v) => handleToggle(id, v), "aria-label": `Toggle ${meta.label}` }) })] }, id));
                             }) })] }) })] }));
 }

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useTransition } from "react";
-import { Toggle, Text, Div, Stack, Table, Thead, Tbody, Tr, Th, Td } from "../../../ui";
+import { Code, Div, Stack, Table, Tbody, Td, Text, Th, Thead, Toggle, Tr } from "../../../ui";
 import { useToast } from "../../../ui";
 const __O = {
     hidden: "overflow-hidden",
@@ -25,12 +25,14 @@ export function NavPermissionsManager({ initialConfig, navGroups, onUpdate, }) {
         });
     };
     const isEnabled = (id) => config[id]?.enabled ?? true;
-    return (_jsx(Stack, { gap: "lg", children: navGroups.map((group) => (_jsxs(Div, { children: [_jsx(Text, { className: "mb-3 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: group.groupLabel }), _jsx(Div, { className: `${__O.hidden} rounded-xl border border-zinc-200 dark:border-slate-700`, children: _jsxs(Table, { className: "w-full text-sm", children: [_jsx(Thead, { children: _jsxs(Tr, { className: "border-b border-zinc-200 bg-zinc-50 dark:border-slate-700 dark:bg-slate-800", children: [_jsx(Th, { className: "px-4 py-3 text-left font-semibold text-zinc-700 dark:text-zinc-300", children: "Nav Item" }), _jsx(Th, { className: "px-4 py-3 text-left font-semibold text-zinc-700 dark:text-zinc-300", children: "Route" }), _jsx(Th, { className: "px-4 py-3 text-left font-semibold text-zinc-700 dark:text-zinc-300", children: "Permission" }), _jsx(Th, { className: "px-4 py-3 text-right font-semibold text-zinc-700 dark:text-zinc-300", children: "Enabled" })] }) }), _jsx(Tbody, { children: group.items.map((item, idx) => {
+    return (_jsx(Stack, { gap: "lg", children: navGroups.map((group) => (_jsxs(Div, { children: [_jsx(Text, { className: "mb-3 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: group.groupLabel }), _jsx(Div, { className: `${__O.hidden}`, rounded: "xl", border: "default", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { children: _jsxs(Tr, { surface: "subtle", border: "default", children: [_jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Nav Item" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Route" }), _jsx(Th, { className: "text-left", padding: "md", color: "primary", weight: "semibold", children: "Permission" }), _jsx(Th, { className: "text-right", padding: "md", color: "primary", weight: "semibold", children: "Enabled" })] }) }), _jsx(Tbody, { children: group.items.map((item, idx) => {
                                     const hasId = !!item.id;
                                     const enabled = hasId ? isEnabled(item.id) : true;
                                     return (_jsxs(Tr, { className: [
                                             idx % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-zinc-50/50 dark:bg-slate-800/50",
                                             !enabled ? "opacity-60" : "",
-                                        ].join(" "), children: [_jsx(Td, { className: "px-4 py-3", children: _jsxs(Div, { children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100", children: item.label }), item.id && (_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-400", children: item.id }))] }) }), _jsx(Td, { className: "px-4 py-3", children: _jsx("code", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: item.href }) }), _jsx(Td, { className: "px-4 py-3", children: item.requiredPermission ? (_jsx("code", { className: "rounded bg-zinc-100 px-1.5 py-0.5 text-xs text-zinc-700 dark:bg-slate-700 dark:text-zinc-300", children: item.requiredPermission })) : (_jsx(Text, { className: "text-xs text-zinc-400", children: "\u2014" })) }), _jsx(Td, { className: "px-4 py-3 text-right", children: hasId ? (_jsx(Toggle, { checked: enabled, onChange: (v) => handleToggle(item.id, item.label, v), "aria-label": `Toggle ${item.label}` })) : (_jsx(Text, { className: "text-xs text-zinc-400 italic", children: "Legacy \u2014 always visible" })) })] }, item.href));
+                                        ].join(" "), children: [_jsx(Td, { padding: "md", children: _jsxs(Div, { children: [_jsx(Text, { weight: "medium", color: "primary", children: item.label }), item.id && (_jsx(Text, { size: "xs", color: "faint", children: item.id }))] }) }), _jsx(Td, { padding: "md", children: _jsx(Code, { className: "text-zinc-500 dark:text-zinc-400", size: "xs", children: item.href }) }), _jsx(Td, { padding: "md", children: item.requiredPermission ? (
+                                                // audit-variant-ok: permission badge Code — bg-zinc-100 + px-1.5/py-0.5 micro padding; CODE_PADDING_MAP keys don't quite match
+                                                _jsx(Code, { className: "bg-zinc-100 px-1.5 py-0.5 text-zinc-700 dark:bg-slate-700 dark:text-zinc-300", size: "xs", rounded: "default", children: item.requiredPermission })) : (_jsx(Text, { size: "xs", color: "faint", children: "\u2014" })) }), _jsx(Td, { className: "text-right", padding: "md", children: hasId ? (_jsx(Toggle, { checked: enabled, onChange: (v) => handleToggle(item.id, item.label, v), "aria-label": `Toggle ${item.label}` })) : (_jsx(Text, { className: "italic", size: "xs", color: "faint", children: "Legacy \u2014 always visible" })) })] }, item.href));
                                 }) })] }) })] }, group.groupLabel))) }));
 }

package/dist/features/site-settings/components/ThemeManagerView.d.ts

@@ -0,0 +1,17 @@
+import { type ThemeRecord } from "../../../tokens/themes";
+/** Wire-shape of the theme block stored on siteSettings. */
+export interface ThemeManagerValue {
+    themes: ThemeRecord[];
+    defaultLightThemeId: string;
+    defaultDarkThemeId: string;
+}
+export interface ThemeManagerViewProps {
+    value: ThemeManagerValue;
+    onChange: (next: ThemeManagerValue) => void;
+    /**
+     * Origin used for the live-preview iframe. Defaults to `"/"` — the host
+     * homepage. Pass `null` to hide the preview.
+     */
+    previewOrigin?: string | null;
+}
+export declare function ThemeManagerView({ value, onChange, previewOrigin, }: ThemeManagerViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,169 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ThemeManagerView — admin UI for managing site themes.
+ *
+ * Users only ever pick light/dark; this view lets the admin author additional
+ * theme records (mode-tagged), pick which record is the default for each mode,
+ * and override every CSS variable + gradient per theme. The two built-in
+ * records (`default-light`, `default-dark`) ship from appkit and cannot be
+ * deleted; they can still be cloned into a new editable record.
+ *
+ * Rendered inside the Site Settings → Themes tab. The view is fully
+ * controlled (`theme` + `onChange`) so the host can wire it to whatever
+ * persistence pipeline they use.
+ */
+import { useMemo, useState, useCallback } from "react";
+import { BUILT_IN_THEMES, REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS, } from "../../../tokens/themes";
+import { Alert, Button, Div, Grid, Input, Row, Section, Select, Stack, Text, Textarea, } from "../../../ui";
+const MODE_OPTIONS = [
+    { label: "Light", value: "light" },
+    { label: "Dark", value: "dark" },
+];
+function isBuiltInId(id) {
+    return BUILT_IN_THEMES.some((t) => t.id === id);
+}
+function cloneRecord(record, nextId, nextName) {
+    return {
+        id: nextId,
+        name: nextName,
+        mode: record.mode,
+        builtIn: false,
+        tokens: { ...record.tokens },
+        gradients: { ...record.gradients },
+    };
+}
+function emptyTokens() {
+    const out = {};
+    for (const key of REQUIRED_THEME_TOKENS)
+        out[key] = "";
+    return out;
+}
+function emptyGradients() {
+    const out = {};
+    for (const key of REQUIRED_GRADIENT_KEYS)
+        out[key] = "";
+    return out;
+}
+function slugify(input) {
+    return input
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 48);
+}
+function ThemeRow({ theme, isDefaultLight, isDefaultDark, onEdit, onDuplicate, onDelete, onSetDefault, }) {
+    const builtIn = isBuiltInId(theme.id);
+    return (_jsxs(Row, { align: "center", justify: "between", gap: "md", surface: "card", padding: "md", rounded: "lg", border: "default", children: [_jsxs(Stack, { gap: "none", children: [_jsxs(Row, { gap: "sm", align: "center", children: [_jsx(Text, { size: "sm", weight: "semibold", children: theme.name }), _jsxs(Text, { size: "xs", color: "muted", children: ["(", theme.mode, ")"] }), builtIn ? (_jsx(Text, { size: "xs", color: "muted", children: "\u00B7 built-in" })) : null, isDefaultLight ? (_jsx(Text, { size: "xs", color: "success", children: "\u00B7 default light" })) : null, isDefaultDark ? (_jsx(Text, { size: "xs", color: "success", children: "\u00B7 default dark" })) : null] }), _jsxs(Text, { size: "xs", color: "muted", children: ["id: ", _jsx("code", { children: theme.id })] })] }), _jsxs(Row, { gap: "sm", wrap: true, children: [theme.mode === "light" ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => onSetDefault("light"), disabled: isDefaultLight, children: "Set default light" })) : (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => onSetDefault("dark"), disabled: isDefaultDark, children: "Set default dark" })), _jsx(Button, { size: "sm", variant: "ghost", onClick: onEdit, children: builtIn ? "View" : "Edit" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: onDuplicate, children: "Duplicate" }), _jsx(Button, { size: "sm", variant: "danger", onClick: onDelete, disabled: builtIn, children: "Delete" })] })] }));
+}
+function ThemeEditor({ draft, readOnly, onChange, onSave, onCancel, }) {
+    const updateToken = useCallback((key, value) => {
+        onChange({
+            ...draft,
+            tokens: { ...draft.tokens, [key]: value },
+        });
+    }, [draft, onChange]);
+    const updateGradient = useCallback((key, value) => {
+        onChange({
+            ...draft,
+            gradients: { ...draft.gradients, [key]: value },
+        });
+    }, [draft, onChange]);
+    return (_jsx(Section, { padding: "md", surface: "card", border: "default", rounded: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { align: "end", justify: "between", gap: "md", wrap: true, children: [_jsxs(Stack, { gap: "sm", children: [_jsx(Input, { label: "Name", value: draft.name, onChange: (event) => onChange({ ...draft, name: event.target.value }), disabled: readOnly }), _jsx(Input, { label: "Id (slug)", value: draft.id, onChange: (event) => onChange({ ...draft, id: slugify(event.target.value) }), disabled: readOnly || draft.builtIn === true })] }), _jsx(Select, { label: "Mode", options: MODE_OPTIONS, value: draft.mode, onValueChange: (next) => onChange({ ...draft, mode: next }), disabled: readOnly })] }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "CSS variable tokens" }), _jsxs(Text, { size: "xs", color: "muted", children: ["Each key is written as ", _jsx("code", { children: "--key" }), " on ", _jsx("code", { children: "<html>" }), " ", "when this theme is active. Empty values fall back to the active mode\u2019s built-in theme."] }), _jsx(Grid, { cols: 2, gap: "sm", children: REQUIRED_THEME_TOKENS.map((key) => (_jsx(Input, { label: key, value: draft.tokens[key] ?? "", onChange: (event) => updateToken(key, event.target.value), disabled: readOnly, placeholder: "inherits from built-in" }, key))) })] }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Gradients" }), _jsxs(Text, { size: "xs", color: "muted", children: ["Each gradient is a complete CSS expression \u2014 vary direction, stops, opacity, and easing per theme. Tokens flow through", " ", _jsxs("code", { children: ["--appkit-gradient-", "<key>"] }), "."] }), _jsx(Stack, { gap: "sm", children: REQUIRED_GRADIENT_KEYS.map((key) => (_jsx(Textarea, { label: key, rows: 2, value: draft.gradients[key] ?? "", onChange: (event) => updateGradient(key, event.target.value), disabled: readOnly, placeholder: "linear-gradient(...)" }, key))) })] }), _jsxs(Row, { gap: "sm", justify: "end", children: [_jsx(Button, { variant: "ghost", onClick: onCancel, children: "Cancel" }), !readOnly ? (_jsx(Button, { variant: "primary", onClick: onSave, children: "Save theme" })) : null] })] }) }));
+}
+export function ThemeManagerView({ value, onChange, previewOrigin = "/", }) {
+    const [editingId, setEditingId] = useState(null);
+    const [draft, setDraft] = useState(null);
+    const [error, setError] = useState(null);
+    const allThemes = useMemo(() => {
+        const map = new Map();
+        for (const built of BUILT_IN_THEMES)
+            map.set(built.id, built);
+        for (const admin of value.themes)
+            map.set(admin.id, admin);
+        return Array.from(map.values());
+    }, [value.themes]);
+    const startEdit = (record) => {
+        setEditingId(record.id);
+        setDraft({ ...record, tokens: { ...record.tokens }, gradients: { ...record.gradients } });
+        setError(null);
+    };
+    const startDuplicate = (record) => {
+        let baseId = record.builtIn ? record.id.replace(/^default-/, "custom-") : `${record.id}-copy`;
+        let candidateId = baseId;
+        let counter = 1;
+        while (allThemes.some((t) => t.id === candidateId)) {
+            counter += 1;
+            candidateId = `${baseId}-${counter}`;
+        }
+        const clone = cloneRecord(record, candidateId, `${record.name} (copy)`);
+        setEditingId(null);
+        setDraft(clone);
+        setError(null);
+    };
+    const startNew = (mode) => {
+        const baseRecord = BUILT_IN_THEMES.find((t) => t.mode === mode) ?? BUILT_IN_THEMES[0];
+        const clone = cloneRecord(baseRecord, `custom-${mode}-${Date.now().toString(36)}`, `New ${mode} theme`);
+        clone.tokens = { ...emptyTokens(), ...clone.tokens };
+        clone.gradients = { ...emptyGradients(), ...clone.gradients };
+        setEditingId(null);
+        setDraft(clone);
+        setError(null);
+    };
+    const saveDraft = () => {
+        if (!draft)
+            return;
+        if (!draft.name.trim()) {
+            setError("Theme name is required.");
+            return;
+        }
+        if (!draft.id.trim()) {
+            setError("Theme id is required.");
+            return;
+        }
+        if (!editingId && allThemes.some((t) => t.id === draft.id)) {
+            setError(`Theme id '${draft.id}' already exists.`);
+            return;
+        }
+        const next = {
+            ...value,
+            themes: editingId
+                ? value.themes.map((t) => (t.id === editingId ? { ...draft, builtIn: false } : t))
+                : [...value.themes, { ...draft, builtIn: false }],
+        };
+        onChange(next);
+        setEditingId(null);
+        setDraft(null);
+        setError(null);
+    };
+    const cancelDraft = () => {
+        setEditingId(null);
+        setDraft(null);
+        setError(null);
+    };
+    const deleteTheme = (id) => {
+        if (isBuiltInId(id))
+            return;
+        const fallbackLight = value.defaultLightThemeId === id ? "default-light" : value.defaultLightThemeId;
+        const fallbackDark = value.defaultDarkThemeId === id ? "default-dark" : value.defaultDarkThemeId;
+        onChange({
+            themes: value.themes.filter((t) => t.id !== id),
+            defaultLightThemeId: fallbackLight,
+            defaultDarkThemeId: fallbackDark,
+        });
+    };
+    const setDefault = (mode, themeId) => {
+        onChange(mode === "light"
+            ? { ...value, defaultLightThemeId: themeId }
+            : { ...value, defaultDarkThemeId: themeId });
+    };
+    const draftIsBuiltIn = draft ? isBuiltInId(draft.id) : false;
+    const previewSrc = previewOrigin && (value.defaultLightThemeId || value.defaultDarkThemeId)
+        ? `${previewOrigin}${previewOrigin.includes("?") ? "&" : "?"}preview-theme=${encodeURIComponent(value.defaultLightThemeId)}`
+        : null;
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Text, { size: "sm", color: "muted", children: "Themes drive the site palette. Pick which theme record applies when a user is in light mode and dark mode. The two built-in records cannot be deleted \u2014 duplicate one to start editing." }), _jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Button, { variant: "primary", onClick: () => startNew("light"), children: "+ New light theme" }), _jsx(Button, { variant: "primary", onClick: () => startNew("dark"), children: "+ New dark theme" })] }), _jsx(Stack, { gap: "sm", children: allThemes.map((theme) => (_jsx(ThemeRow, { theme: theme, isDefaultLight: value.defaultLightThemeId === theme.id, isDefaultDark: value.defaultDarkThemeId === theme.id, onEdit: () => startEdit(theme), onDuplicate: () => startDuplicate(theme), onDelete: () => deleteTheme(theme.id), onSetDefault: (mode) => setDefault(mode, theme.id) }, theme.id))) }), error ? _jsx(Alert, { variant: "error", children: error }) : null, draft ? (_jsx(ThemeEditor, { draft: draft, readOnly: draftIsBuiltIn, onChange: setDraft, onSave: saveDraft, onCancel: cancelDraft })) : null, previewSrc ? (_jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Live preview" }), _jsx(Text, { size: "xs", color: "muted", children: "Preview reloads when the default theme id changes. Use the host page\u2019s built-in theme toggle to switch between light and dark." }), _jsx(Div, { surface: "card", border: "default", rounded: "lg", padding: "none", children: _jsx("iframe", { title: "Theme preview", src: previewSrc, 
+                            // audit-variant-ok: ThemeManagerView preview iframe — height is
+                            // fixed; primitive Iframe doesn't carry a static numeric height variant.
+                            className: "block w-full h-[600px] rounded-lg" }) })] })) : null] }));
+}

package/dist/features/site-settings/components/__tests__/ThemeManagerView.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/features/site-settings/components/__tests__/ThemeManagerView.test.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ThemeManagerView } from "../ThemeManagerView";
+import { BUILT_IN_THEMES, DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, } from "../../../../tokens/themes";
+const EMPTY_VALUE = {
+    themes: [],
+    defaultLightThemeId: DEFAULT_LIGHT_THEME.id,
+    defaultDarkThemeId: DEFAULT_DARK_THEME.id,
+};
+describe("ThemeManagerView", () => {
+    it("lists both built-in theme records", () => {
+        render(_jsx(ThemeManagerView, { value: EMPTY_VALUE, onChange: () => undefined }));
+        for (const theme of BUILT_IN_THEMES) {
+            expect(screen.getByText(theme.name)).not.toBeNull();
+        }
+    });
+    it("flags built-in themes as undeletable", () => {
+        render(_jsx(ThemeManagerView, { value: EMPTY_VALUE, onChange: () => undefined }));
+        const deleteButtons = screen.getAllByRole("button", { name: /Delete/ });
+        // Both built-ins should expose disabled delete buttons.
+        expect(deleteButtons.length).toBeGreaterThanOrEqual(2);
+        for (const btn of deleteButtons) {
+            expect(btn.disabled).toBe(true);
+        }
+    });
+    it("emits an onChange with the admin record when saving a new draft", () => {
+        const onChange = vi.fn();
+        render(_jsx(ThemeManagerView, { value: EMPTY_VALUE, onChange: onChange }));
+        fireEvent.click(screen.getByRole("button", { name: /\+ New light theme/ }));
+        fireEvent.click(screen.getByRole("button", { name: /^Save theme$/ }));
+        expect(onChange).toHaveBeenCalledOnce();
+        const next = onChange.mock.calls[0][0];
+        expect(next.themes.length).toBe(1);
+        expect(next.themes[0].mode).toBe("light");
+    });
+});

package/dist/features/store-extensions/schemas/firestore.d.ts

@@ -1,3 +1,4 @@
+import type { FirestoreDocument } from "@mohasinac/appkit";
 /**
  * S-STORE Extensions — Firestore Document Types
  *
@@ -68,7 +69,7 @@ export interface AnalyticsCardDocument {
     title: string;
     type: AnalyticsCardType;
     metric: string;
-    filters: Record<string, unknown>;
+    filters: FirestoreDocument;
     position: number;
     isBuiltIn: boolean;
     isVisible: boolean;
@@ -122,7 +123,7 @@ export interface ListingTemplateDocument {
     description?: string;
     listingType: ListingTemplateType;
     /** JSON-shaped default fields applied when the template is selected. */
-    defaults: Record<string, unknown>;
+    defaults: FirestoreDocument;
     isShared: boolean;
     isActive: boolean;
     usageCount: number;

package/dist/features/store-extensions/schemas/firestore.js

@@ -1,23 +1,3 @@
-/**
- * S-STORE Extensions — Firestore Document Types
- *
- * Foundational schemas for the 11 new collections introduced in Tier S-STORE.
- * Each collection includes COLLECTION constant, document interface,
- * INDEXED_FIELDS tuple, and DEFAULT_DATA partial.
- *
- * Collections covered:
- *   1. payoutMethods         — seller payout destinations (UPI/bank/card/other)
- *   2. shippingConfigs       — store shipping rules (free/flat/weight/express)
- *   3. analyticsCards        — seller-defined dashboard cards
- *   4. analyticsAlerts       — seller-defined alert thresholds
- *   5. storeCategories       — storefront-level catalogue groupings
- *   6. listingTemplates      — seller-defined listing templates
- *   7. moderationQueue       — video / media moderation queue items
- *   8. reports               — buyer-submitted reports against listings/stores
- *   9. itemRequests          — community item request bulletin board
- *  10. storeWhatsAppConfig   — per-store WhatsApp business catalogue + auto-replies
- *  11. storeGoogleConfig     — per-store Google Business reviews integration
- */
 export const PAYOUT_METHODS_COLLECTION = "payoutMethods";
 export const PAYOUT_METHOD_INDEXED_FIELDS = [
     "sellerId",

package/dist/features/stores/api/[storeSlug]/auctions/route.js

@@ -1,3 +1,4 @@
+import { normalizeError } from "../../../../../errors/normalize";
 /**
  * feat-stores — store auctions (GET /api/stores/[storeSlug]/auctions)
  *
@@ -82,6 +83,7 @@ export async function GET(request, context) {
         return NextResponse.json({ success: true, data: body });
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-stores] GET /api/stores/[storeSlug]/auctions failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch store auctions" }, { status: 500 });
     }