@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/_internal/client/features/classified/ClassifiedDetailView.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { normalizeError } from "../../../../errors/normalize";
 import { useState } from "react";
 import Link from "next/link";
 import { Badge, Button, Container, Div, Heading, Row, Section, Stack, Text, } from "../../../../ui";
@@ -16,7 +17,7 @@ export function ClassifiedDetailView({ product, isLoading = false, onContactSell
     const [conversation, setConversation] = useState(null);
     const [error, setError] = useState(null);
     if (isLoading || !product) {
-        return (_jsx(Container, { children: _jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-muted-foreground", children: isLoading ? "Loading…" : "Classified listing not found." }) }) }));
+        return (_jsx(Container, { children: _jsx(Div, { className: "text-center", padding: "y-4xl", children: _jsx(Text, { className: "text-muted-foreground", children: isLoading ? "Loading…" : "Classified listing not found." }) }) }));
     }
     const meta = product.classified;
     const price = formatCurrency(product.price, product.currency ?? "INR");
@@ -27,15 +28,27 @@ export function ClassifiedDetailView({ product, isLoading = false, onContactSell
         setPending(true);
         setError(null);
         try {
-            const conv = await onContactSeller({ productId: product.id });
-            setConversation(conv);
+            const result = await onContactSeller({ productId: product.id });
+            // ActionResult envelope — unwrap or surface
+            if (result && typeof result === "object" && "ok" in result) {
+                if (result.ok) {
+                    setConversation(result.data);
+                }
+                else {
+                    setError(result.error);
+                }
+            }
+            else {
+                setConversation(result);
+            }
         }
         catch (e) {
+            void normalizeError(e);
             setError(e instanceof Error ? e.message : "Something went wrong");
         }
         finally {
             setPending(false);
         }
     }
-    return (_jsx(Container, { children: _jsx(Section, { className: "py-8", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: `${__O.hidden} rounded-lg bg-muted`, children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { className: "flex-wrap gap-2", children: [_jsx(Badge, { variant: "secondary", children: "Classified" }), meta?.negotiable && _jsx(Badge, { variant: "secondary", children: "Negotiable" }), meta?.acceptsShipping && _jsx(Badge, { variant: "secondary", children: "Shipping available" })] }), _jsx(Heading, { level: 1, className: "text-2xl font-bold", children: product.title }), _jsx(Text, { className: "text-2xl font-semibold text-primary", children: price }), location && (_jsx(Text, { className: "text-sm text-muted-foreground", children: location })), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), conversation ? (_jsxs(Div, { className: `rounded-lg border border-border bg-muted/40 ${__P.p4}`, children: [_jsx(Text, { className: "mb-2 font-medium", children: "Conversation started!" }), _jsx(Link, { href: ROUTES.USER.MESSAGES, className: "text-primary underline underline-offset-2", children: "Go to your messages \u2192" })] })) : (_jsxs(Stack, { gap: "sm", children: [error && (_jsx(Text, { className: "text-sm text-destructive", children: error })), _jsx(Button, { type: "button", variant: "primary", size: "lg", isLoading: pending, disabled: pending, onClick: handleContactSeller, className: "w-full", children: "Contact Seller" })] }))] }) }) }));
+    return (_jsx(Container, { children: _jsx(Section, { padding: "y-xl", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: `${__O.hidden} bg-muted`, rounded: "lg", children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Badge, { variant: "secondary", children: "Classified" }), meta?.negotiable && _jsx(Badge, { variant: "secondary", children: "Negotiable" }), meta?.acceptsShipping && _jsx(Badge, { variant: "secondary", children: "Shipping available" })] }), _jsx(Heading, { level: 1, weight: "bold", size: "2xl", children: product.title }), _jsx(Text, { className: "text-primary", size: "2xl", weight: "semibold", children: price }), location && (_jsx(Text, { className: "text-muted-foreground", size: "sm", children: location })), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), conversation ? (_jsxs(Div, { className: `border border-border bg-muted/40 ${__P.p4}`, rounded: "lg", children: [_jsx(Text, { className: "mb-2", weight: "medium", children: "Conversation started!" }), _jsx(Link, { href: ROUTES.USER.MESSAGES, className: "text-primary underline underline-offset-2", children: "Go to your messages \u2192" })] })) : (_jsxs(Stack, { gap: "sm", children: [error && (_jsx(Text, { className: "text-destructive", size: "sm", children: error })), _jsx(Button, { type: "button", variant: "primary", size: "lg", isLoading: pending, disabled: pending, onClick: handleContactSeller, className: "w-full", children: "Contact Seller" })] }))] }) }) }));
 }

package/dist/_internal/client/features/digital-code/CodeRevealPanel.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { normalizeError } from "../../../../errors/normalize";
 import { useState } from "react";
-import { Button, Div, Span, Stack, Text } from "../../../../ui";
+import { Button, Div, Row, Span, Stack, Text } from "../../../../ui";
 const __P = {
     p4: "p-4",
 };
@@ -18,6 +19,7 @@ export function CodeRevealPanel({ orderId, redemptionInstructions, fetchCode, })
             setRevealed(data);
         }
         catch (e) {
+            void normalizeError(e);
             setError(e instanceof Error ? e.message : "Could not retrieve code");
         }
         finally {
@@ -31,5 +33,5 @@ export function CodeRevealPanel({ orderId, redemptionInstructions, fetchCode, })
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     }
-    return (_jsx(Div, { className: `rounded-lg border border-border bg-muted/40 ${__P.p4}`, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "font-medium", children: "Your Digital Code" }), !revealed ? (_jsxs(Stack, { gap: "sm", children: [error && _jsx(Text, { className: "text-sm text-destructive", children: error }), _jsx(Button, { type: "button", variant: "primary", size: "lg", isLoading: pending, disabled: pending, onClick: handleReveal, className: "w-full", children: "Reveal Code" })] })) : (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { className: "flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2 font-mono text-lg", children: [_jsx(Span, { className: "flex-1 select-all", children: revealed.code }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleCopy, className: "shrink-0", children: copied ? "Copied!" : "Copy" })] }), redemptionInstructions && (_jsx(Text, { className: "text-sm text-muted-foreground", children: redemptionInstructions }))] }))] }) }));
+    return (_jsx(Div, { className: `border border-border bg-muted/40 ${__P.p4}`, rounded: "lg", children: _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { weight: "medium", children: "Your Digital Code" }), !revealed ? (_jsxs(Stack, { gap: "sm", children: [error && _jsx(Text, { className: "text-destructive", size: "sm", children: error }), _jsx(Button, { type: "button", variant: "primary", size: "lg", isLoading: pending, disabled: pending, onClick: handleReveal, className: "w-full", children: "Reveal Code" })] })) : (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { textSize: "lg", className: "border border-border bg-background font-mono", padding: "inlineSm", align: "center", gap: "sm", rounded: "md", children: [_jsx(Span, { className: "flex-1 select-all", children: revealed.code }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleCopy, className: "shrink-0", children: copied ? "Copied!" : "Copy" })] }), redemptionInstructions && (_jsx(Text, { className: "text-muted-foreground", size: "sm", children: redemptionInstructions }))] }))] }) }));
 }

package/dist/_internal/client/features/digital-code/DigitalCodeDetailView.js

@@ -11,10 +11,10 @@ const __O = {
 };
 export function DigitalCodeDetailView({ product, isLoading = false, orderId, fetchCode, }) {
     if (isLoading || !product) {
-        return (_jsx(Container, { children: _jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-muted-foreground", children: isLoading ? "Loading…" : "Digital code listing not found." }) }) }));
+        return (_jsx(Container, { children: _jsx(Div, { className: "text-center", padding: "y-4xl", children: _jsx(Text, { className: "text-muted-foreground", children: isLoading ? "Loading…" : "Digital code listing not found." }) }) }));
     }
     const meta = product.digitalCode;
     const price = formatCurrency(product.price, product.currency ?? "INR");
     const codesLeft = meta?.codesAvailable ?? 0;
-    return (_jsx(Container, { children: _jsx(Section, { className: "py-8", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: `${__O.hidden} rounded-lg bg-muted`, children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { className: "flex-wrap gap-2", children: [_jsx(Badge, { variant: "secondary", children: "Digital Code" }), codesLeft > 0 ? (_jsxs(Badge, { variant: "active", children: [codesLeft, " available"] })) : (_jsx(Badge, { variant: "danger", children: "Sold out" }))] }), _jsx(Heading, { level: 1, className: "text-2xl font-bold", children: product.title }), _jsx(Text, { className: "text-2xl font-semibold text-primary", children: price }), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), orderId && fetchCode ? (_jsx(CodeRevealPanel, { orderId: orderId, redemptionInstructions: meta?.redemptionInstructions, fetchCode: fetchCode })) : (_jsxs(Div, { className: `rounded-lg border border-border bg-muted/40 ${__P.p4}`, children: [_jsx(Text, { className: "text-sm text-muted-foreground", children: "After purchase, return to your order to reveal the code instantly." }), meta?.redemptionInstructions && (_jsx(Text, { className: "mt-2 text-sm", children: meta.redemptionInstructions }))] }))] }) }) }));
+    return (_jsx(Container, { children: _jsx(Section, { padding: "y-xl", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: `${__O.hidden} bg-muted`, rounded: "lg", children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Badge, { variant: "secondary", children: "Digital Code" }), codesLeft > 0 ? (_jsxs(Badge, { variant: "active", children: [codesLeft, " available"] })) : (_jsx(Badge, { variant: "danger", children: "Sold out" }))] }), _jsx(Heading, { level: 1, weight: "bold", size: "2xl", children: product.title }), _jsx(Text, { className: "text-primary", size: "2xl", weight: "semibold", children: price }), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), orderId && fetchCode ? (_jsx(CodeRevealPanel, { orderId: orderId, redemptionInstructions: meta?.redemptionInstructions, fetchCode: fetchCode })) : (_jsxs(Div, { className: `border border-border bg-muted/40 ${__P.p4}`, rounded: "lg", children: [_jsx(Text, { className: "text-muted-foreground", size: "sm", children: "After purchase, return to your order to reveal the code instantly." }), meta?.redemptionInstructions && (_jsx(Text, { className: "mt-2", size: "sm", children: meta.redemptionInstructions }))] }))] }) }) }));
 }

package/dist/_internal/client/features/layout/SidebarCollapseToggle.js

@@ -4,14 +4,12 @@ const HANDLE_STYLE = {
     background: "linear-gradient(to bottom, var(--appkit-color-primary-700, var(--appkit-color-primary)), var(--appkit-color-secondary-500, var(--appkit-color-secondary)))",
 };
 const CHEVRON_STYLE = {
-    color: "var(--appkit-color-text-on-primary, #ffffff)",
+    color: "var(--appkit-color-text-on-primary)",
 };
 export function SidebarCollapseToggle({ expanded, onToggle, expandedLabel = "Collapse sidebar", collapsedLabel = "Expand sidebar", }) {
     return (_jsx("button", { type: "button", onClick: onToggle, "aria-label": expanded ? expandedLabel : collapsedLabel, "aria-expanded": expanded, 
-        // eslint-disable-next-line lir/no-inline-static-style
         // audit-inline-style-ok: pass-through style prop
         style: HANDLE_STYLE, className: "w-9 shrink-0 flex items-center justify-center cursor-pointer rounded-r-[1.25rem] shadow-lg transition-all duration-200 hover:shadow-xl hover:brightness-110 active:scale-[0.96]", children: _jsx("svg", { className: `w-4 h-4 drop-shadow-sm transition-transform duration-300 ${expanded ? "" : "rotate-180"}`, 
-            // eslint-disable-next-line lir/no-inline-static-style
             // audit-inline-style-ok: pass-through style prop
             style: CHEVRON_STYLE, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }));
 }

package/dist/_internal/client/features/live/LiveItemDetailView.js

@@ -8,17 +8,17 @@ const __P = {
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_WARN_BOX = "rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm";
-const CLS_WARN_TITLE = "font-medium text-amber-900";
-const CLS_WARN_BODY = "mt-1 text-amber-800";
+const CLS_WARN_BOX = "rounded-lg border border-warning bg-warning-surface p-4 text-sm";
+const CLS_WARN_TITLE = "font-medium text-warning";
+const CLS_WARN_BODY = "mt-1 text-warning";
 export function LiveItemDetailView({ product, isLoading = false, renderActions, }) {
     if (isLoading || !product) {
-        return (_jsx(Container, { children: _jsx(Div, { className: "py-16 text-center", children: _jsx(Text, { className: "text-muted-foreground", children: isLoading ? "Loading…" : "Live listing not found." }) }) }));
+        return (_jsx(Container, { children: _jsx(Div, { className: "text-center", padding: "y-4xl", children: _jsx(Text, { className: "text-muted-foreground", children: isLoading ? "Loading…" : "Live listing not found." }) }) }));
     }
     const meta = product.liveItem;
     const price = formatCurrency(product.price, product.currency ?? "INR");
     const jurisdictions = meta?.jurisdictionAllowed ?? [];
     const transport = meta?.transport;
-    return (_jsx(Container, { children: _jsx(Section, { className: "py-8", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: `${__O.hidden} rounded-lg bg-muted`, children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { className: "flex-wrap gap-2", children: [_jsx(Badge, { variant: "secondary", children: "Live Item" }), meta?.vendorVerified && (_jsx(Badge, { variant: "active", children: "Verified Seller" })), meta?.cites && (_jsxs(Badge, { variant: "warning", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "text-2xl font-bold", children: product.title }), meta?.species && (_jsxs(Text, { className: "text-sm italic text-muted-foreground", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] })), _jsx(Text, { className: "text-2xl font-semibold text-primary", children: price }), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { className: `rounded-lg border border-border bg-muted/40 ${__P.p4} text-sm`, children: [_jsx(Text, { className: "font-medium", children: "Transport" }), _jsxs(Text, { className: "text-muted-foreground", children: ["Method: ", transport.method, transport.handlingFeeInPaise !== undefined &&
-                                        ` · Handling: ${formatCurrency(transport.handlingFeeInPaise, "INR")}`, transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { className: `rounded-lg border border-border bg-muted/40 ${__P.p4} text-sm`, children: [_jsx(Text, { className: "font-medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-muted-foreground", children: meta.careInfo })] })), renderActions?.()] }) }) }));
+    return (_jsx(Container, { children: _jsx(Section, { padding: "y-xl", children: _jsxs(Stack, { gap: "lg", children: [product.images.length > 0 && (_jsx(Div, { className: `${__O.hidden} bg-muted`, rounded: "lg", children: _jsx("img", { src: product.mainImage || product.images[0], alt: product.title, className: "h-80 w-full object-contain" }) })), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Badge, { variant: "secondary", children: "Live Item" }), meta?.vendorVerified && (_jsx(Badge, { variant: "active", children: "Verified Seller" })), meta?.cites && (_jsxs(Badge, { variant: "warning", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, weight: "bold", size: "2xl", children: product.title }), meta?.species && (_jsxs(Text, { className: "italic text-muted-foreground", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] })), _jsx(Text, { className: "text-primary", size: "2xl", weight: "semibold", children: price }), _jsx(Text, { className: "text-muted-foreground", children: product.description })] }), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", className: `border border-border bg-muted/40 ${__P.p4}`, rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-muted-foreground", children: ["Method: ", transport.method, transport.handlingFeeInPaise !== undefined &&
+                                        ` · Handling: ${formatCurrency(transport.handlingFeeInPaise, "INR")}`, transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", className: `border border-border bg-muted/40 ${__P.p4}`, rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-muted-foreground", children: meta.careInfo })] })), renderActions?.()] }) }) }));
 }

package/dist/_internal/client/features/maintenance/index.d.ts

@@ -0,0 +1,7 @@
+export { ServerErrorsListView } from "./views/ServerErrorsListView";
+export type { ServerErrorsListViewProps } from "./views/ServerErrorsListView";
+export { ServerErrorDetailView } from "./views/ServerErrorDetailView";
+export type { ServerErrorDetailViewProps } from "./views/ServerErrorDetailView";
+export { MaintenanceDashboardView } from "./views/MaintenanceDashboardView";
+export type { MaintenanceDashboardViewProps } from "./views/MaintenanceDashboardView";
+export { AnalysisRunnerView } from "./views/AnalysisRunnerView";

package/dist/_internal/client/features/maintenance/index.js

@@ -0,0 +1,4 @@
+export { ServerErrorsListView } from "./views/ServerErrorsListView";
+export { ServerErrorDetailView } from "./views/ServerErrorDetailView";
+export { MaintenanceDashboardView } from "./views/MaintenanceDashboardView";
+export { AnalysisRunnerView } from "./views/AnalysisRunnerView";

package/dist/_internal/client/features/maintenance/views/AnalysisRunnerView.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare function AnalysisRunnerView(): React.JSX.Element;

package/dist/_internal/client/features/maintenance/views/AnalysisRunnerView.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { normalizeError } from "../../../../../errors/normalize";
+import * as React from "react";
+import { Div, Heading, Li, Section, Span, Table, Tbody, Td, Text, Th, Thead, Tr, Ul } from "@mohasinac/appkit";
+export function AnalysisRunnerView() {
+    const [days, setDays] = React.useState(7);
+    const [source, setSource] = React.useState("all");
+    const [running, setRunning] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [report, setReport] = React.useState(null);
+    async function run() {
+        setRunning(true);
+        setError(null);
+        try {
+            const res = await fetch("/api/admin/maintenance/analysis", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ days, source }),
+            });
+            const body = (await res.json());
+            if (!res.ok || !body.ok) {
+                setError(("error" in body && body.error) || `HTTP ${res.status}`);
+                setRunning(false);
+                return;
+            }
+            setReport(body.data);
+        }
+        catch (err) {
+            void normalizeError(err);
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setRunning(false);
+        }
+    }
+    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }, children: [_jsx(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Maintenance analysis" }), _jsxs(Div, { style: { display: "flex", gap: "1rem", alignItems: "center", margin: "1rem 0" }, children: [_jsxs("label", { children: ["Days back:\u00A0", _jsx("input", { type: "number", min: 1, max: 30, value: days, onChange: (e) => setDays(Math.max(1, Math.min(30, Number(e.target.value) || 7))), style: { width: 80, padding: "0.35rem 0.5rem", border: "1px solid var(--appkit-color-border)", borderRadius: 4 } })] }), _jsxs("label", { children: ["Source:\u00A0", _jsxs("select", { value: source, onChange: (e) => setSource(e.target.value), style: { padding: "0.35rem 0.5rem", border: "1px solid var(--appkit-color-border)", borderRadius: 4 }, children: [_jsx("option", { value: "all", children: "all" }), _jsx("option", { value: "vercel", children: "server (vercel)" }), _jsx("option", { value: "client", children: "client" }), _jsx("option", { value: "function", children: "function" })] })] }), _jsx("button", { type: "button", onClick: run, disabled: running, style: {
+                            padding: "0.5rem 1rem",
+                            background: "var(--appkit-color-primary)",
+                            color: "var(--appkit-color-surface)",
+                            border: 0,
+                            borderRadius: 4,
+                            cursor: running ? "wait" : "pointer",
+                        }, children: running ? "Running…" : "Run analysis" })] }), error ? _jsx(Text, { as: "p", style: { color: "var(--appkit-color-error)" }, children: error }) : null, report ? _jsx(ReportView, { report: report }) : null] }));
+}
+function ReportView({ report }) {
+    return (_jsxs(Div, { children: [_jsxs(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)" }, children: ["Generated ", report.generatedAt, ". Window: ", report.window.days, "d. Total: ", report.totalErrors, ". Unique users: ", report.uniqueUsers, "."] }), _jsx(ReportSection, { title: "Top codes", children: _jsxs(Table, { style: { width: "100%", fontSize: "0.85rem" }, children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { align: "left", children: "Code" }), _jsx(Th, { align: "right", children: "Count" }), _jsx(Th, { align: "right", children: "User impact" })] }) }), _jsx(Tbody, { children: report.topCodes.map((c) => (_jsxs(Tr, { children: [_jsx(Td, { style: { fontFamily: "monospace" }, children: c.code }), _jsx(Td, { align: "right", children: c.count }), _jsx(Td, { align: "right", children: c.userImpact })] }, c.code))) })] }) }), _jsx(ReportSection, { title: "Top routes", children: _jsxs(Table, { style: { width: "100%", fontSize: "0.85rem" }, children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { align: "left", children: "Route" }), _jsx(Th, { align: "left", children: "Source" }), _jsx(Th, { align: "right", children: "Count" })] }) }), _jsx(Tbody, { children: report.topRoutes.map((r) => (_jsxs(Tr, { children: [_jsx(Td, { style: { fontFamily: "monospace" }, children: r.route }), _jsx(Td, { children: r.source }), _jsx(Td, { align: "right", children: r.count })] }, `${r.source}:${r.route}`))) })] }) }), report.stackClusters.length > 0 ? (_jsx(ReportSection, { title: `Stack clusters (≥5)`, children: _jsx(Ul, { children: report.stackClusters.map((c) => (_jsxs(Li, { style: { marginBottom: "0.5rem", fontSize: "0.82rem" }, children: [_jsxs(Span, { weight: "bold", children: [c.count, "\u00D7"] }), " ", _jsx(Span, { style: { fontFamily: "monospace" }, children: c.signature }), _jsxs(Div, { style: { color: "var(--appkit-color-text-muted)" }, children: ["sample: ", c.sampleMessage] })] }, c.signature))) }) })) : null, report.burstWindows.length > 0 ? (_jsx(ReportSection, { title: "5xx burst windows", children: _jsx(Ul, { children: report.burstWindows.map((b) => (_jsxs(Li, { children: [b.start, " \u2014 ", b.count, " errors (", b.multiplier, "\u00D7 avg)"] }, b.start))) }) })) : null, _jsx(ReportSection, { title: "Recommendations", children: _jsx(Ul, { children: report.recommendations.map((r, i) => _jsx(Li, { children: r }, i)) }) })] }));
+}
+function ReportSection({ title, children }) {
+    return (_jsxs(Section, { style: { marginTop: "1.5rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: title }), children] }));
+}

package/dist/_internal/client/features/maintenance/views/MaintenanceDashboardView.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import type { MaintenanceDashboardCounts } from "../../../../server/features/maintenance/data";
+export interface MaintenanceDashboardViewProps {
+    counts: MaintenanceDashboardCounts;
+    basePath: string;
+}
+export declare function MaintenanceDashboardView({ counts, basePath, }: MaintenanceDashboardViewProps): React.JSX.Element;

package/dist/_internal/client/features/maintenance/views/MaintenanceDashboardView.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Anchor, Div, Heading, Li, Nav, Section, Span, Text, Ul } from "@mohasinac/appkit";
+const card = {
+    padding: "1rem 1.25rem",
+    border: "1px solid var(--appkit-color-border)",
+    borderRadius: 8,
+    background: "var(--appkit-color-surface)",
+};
+export function MaintenanceDashboardView({ counts, basePath, }) {
+    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }, children: [_jsx(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: "Maintenance" }), _jsx(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: "Errors and failures across the platform \u2014 server, client, and Cloud Functions." }), _jsxs(Div, { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", gap: "0.75rem", marginBottom: "1.5rem" }, children: [_jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Last 24 hours" }), _jsx(Div, { style: { fontSize: "1.75rem", fontWeight: 700 }, children: counts.last24h })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Last 7 days" }), _jsx(Div, { style: { fontSize: "1.75rem", fontWeight: 700 }, children: counts.last7d })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Last 30 days" }), _jsx(Div, { style: { fontSize: "1.75rem", fontWeight: 700 }, children: counts.last30d })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Server (Vercel)" }), _jsx(Div, { style: { fontSize: "1.5rem", fontWeight: 700 }, children: counts.bySource.vercel })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Client" }), _jsx(Div, { style: { fontSize: "1.5rem", fontWeight: 700 }, children: counts.bySource.client })] }), _jsxs(Div, { style: card, children: [_jsx(Div, { style: { fontSize: "0.78rem", color: "var(--appkit-color-text-muted)" }, children: "Cloud Functions" }), _jsx(Div, { style: { fontSize: "1.5rem", fontWeight: 700 }, children: counts.bySource.function })] })] }), _jsxs(Section, { style: { marginBottom: "1.5rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600 }, children: "Top codes (30d)" }), _jsx(Ul, { style: { listStyle: "none", padding: 0 }, children: counts.topCodes.length === 0 ? _jsx(Li, { style: { color: "var(--appkit-color-text-muted)" }, children: "No errors recorded." }) :
+                            counts.topCodes.map((c) => (_jsxs(Li, { style: { display: "flex", justifyContent: "space-between", padding: "0.25rem 0", borderBottom: "1px solid var(--appkit-color-border-subtle)" }, children: [_jsx(Span, { style: { fontFamily: "monospace" }, children: c.code }), _jsx(Span, { children: c.count })] }, c.code))) })] }), _jsxs(Section, { style: { marginBottom: "1.5rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600 }, children: "Top routes (30d)" }), _jsx(Ul, { style: { listStyle: "none", padding: 0 }, children: counts.topRoutes.length === 0 ? _jsx(Li, { style: { color: "var(--appkit-color-text-muted)" }, children: "No errors recorded." }) :
+                            counts.topRoutes.map((r) => (_jsxs(Li, { style: { display: "flex", justifyContent: "space-between", padding: "0.25rem 0", borderBottom: "1px solid var(--appkit-color-border-subtle)" }, children: [_jsxs(Span, { style: { fontFamily: "monospace" }, children: ["[", r.source, "] ", r.route] }), _jsx(Span, { children: r.count })] }, `${r.source}:${r.route}`))) })] }), _jsxs(Nav, { "aria-label": "Maintenance sections", style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "0.5rem" }, children: [_jsxs(Anchor, { href: `${basePath}/server-errors`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Server errors" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "Vercel function failures" })] }), _jsxs(Anchor, { href: `${basePath}/client-errors`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Client errors" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "window.onerror + unhandledrejection + boundaries" })] }), _jsxs(Anchor, { href: `${basePath}/function-errors`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Function errors" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "Cloud Functions handler exceptions" })] }), _jsxs(Anchor, { href: `${basePath}/cloud-logs`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Cloud Logging" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "Live stream from Cloud Logging API" })] }), _jsxs(Anchor, { href: `${basePath}/payment-rollbacks`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Payment rollbacks" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "Razorpay refund + upstream-unavailable rows" })] }), _jsxs(Anchor, { href: `${basePath}/analysis`, tone: "default", underline: "none", style: { ...card }, children: [_jsx(Span, { weight: "bold", children: "Analysis" }), _jsx(Div, { style: { color: "var(--appkit-color-text-muted)", fontSize: "0.85rem" }, children: "Run the maintenance analyzer + recommendations" })] })] })] }));
+}

package/dist/_internal/client/features/maintenance/views/ServerErrorDetailView.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { ServerErrorDocument } from "../../../../../features/server-errors/schemas/firestore";
+export interface ServerErrorDetailViewProps {
+    doc: ServerErrorDocument;
+    related: ServerErrorDocument[];
+    backHref: string;
+}
+export declare function ServerErrorDetailView({ doc, related, backHref, }: ServerErrorDetailViewProps): React.JSX.Element;

package/dist/_internal/client/features/maintenance/views/ServerErrorDetailView.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Anchor, Div, Heading, Li, Pre, Section, Text, Ul } from "@mohasinac/appkit";
+function fmt(t) {
+    return new Date(t).toISOString().replace("T", " ").slice(0, 19);
+}
+export function ServerErrorDetailView({ doc, related, backHref, }) {
+    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }, children: [_jsx(Text, { as: "p", children: _jsx(Anchor, { href: backHref, external: false, children: "\u2190 Back to list" }) }), _jsxs(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: [doc.code, " ", _jsx(Text, { size: "xs", style: { fontSize: "1rem", color: "var(--appkit-color-text-muted)" }, children: doc.source })] }), _jsxs(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)" }, children: [fmt(doc.occurredAt), " \u2014 ", doc.method ?? "—", " ", doc.route] }), _jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Message" }), _jsx(Text, { as: "p", style: { fontFamily: "monospace", whiteSpace: "pre-wrap" }, children: doc.message })] }), _jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Metadata" }), _jsxs("dl", { style: { display: "grid", gridTemplateColumns: "auto 1fr", gap: "0.25rem 1rem", fontSize: "0.85rem" }, children: [_jsx("dt", { children: "request ID" }), _jsx("dd", { style: { fontFamily: "monospace" }, children: doc.requestId }), doc.userId ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "user ID" }), _jsx("dd", { style: { fontFamily: "monospace" }, children: doc.userId })] })) : null, doc.userAgent ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "user agent" }), _jsx("dd", { children: doc.userAgent })] })) : null, doc.bodyDigest ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "body digest" }), _jsx("dd", { style: { fontFamily: "monospace" }, children: doc.bodyDigest })] })) : null] })] }), doc.stack ? (_jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Stack" }), _jsx(Pre, { style: { fontFamily: "monospace", fontSize: "0.78rem", background: "var(--appkit-color-text)", color: "var(--appkit-color-border)", padding: "0.75rem", borderRadius: 4, overflowX: "auto" }, children: doc.stack })] })) : null, doc.componentStack ? (_jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Component stack" }), _jsx(Pre, { style: { fontFamily: "monospace", fontSize: "0.78rem", background: "var(--appkit-color-text)", color: "var(--appkit-color-border)", padding: "0.75rem", borderRadius: 4, overflowX: "auto" }, children: doc.componentStack })] })) : null, related.length > 0 ? (_jsxs(Section, { style: { marginTop: "1.25rem" }, children: [_jsx(Heading, { level: 2, style: { fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }, children: "Related client errors (same requestId)" }), _jsx(Ul, { children: related.map((r) => (_jsxs(Li, { style: { fontFamily: "monospace", fontSize: "0.82rem" }, children: [fmt(r.occurredAt), " \u2014 ", r.code, " \u2014 ", r.message.slice(0, 100)] }, r.id))) })] })) : null] }));
+}

package/dist/_internal/client/features/maintenance/views/ServerErrorsListView.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { ServerErrorDocument, ServerErrorSource } from "../../../../../features/server-errors/schemas/firestore";
+export interface ServerErrorsListViewProps {
+    title: string;
+    subtitle?: string;
+    source: ServerErrorSource | "all";
+    rows: ServerErrorDocument[];
+    detailHrefBase: string;
+}
+export declare function ServerErrorsListView({ title, subtitle, source, rows, detailHrefBase, }: ServerErrorsListViewProps): React.JSX.Element;

package/dist/_internal/client/features/maintenance/views/ServerErrorsListView.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Anchor, Div, Heading, Label, Span, Table, Tbody, Td, Text, Th, Thead, Tr } from "@mohasinac/appkit";
+const BORDER_STYLE = "1px solid var(--appkit-color-border)";
+const COLUMNS = [
+    { key: "occurredAtFmt", label: "When", width: "180px" },
+    { key: "route", label: "Route" },
+    { key: "method", label: "Method", width: "70px" },
+    { key: "code", label: "Code", width: "180px" },
+    { key: "userId", label: "User", width: "120px" },
+    { key: "messagePreview", label: "Message" },
+    { key: "requestId", label: "Request ID", width: "160px" },
+];
+function fmt(occurredAt) {
+    return new Date(occurredAt).toISOString().replace("T", " ").slice(0, 19);
+}
+function preview(message, max = 100) {
+    return message.length > max ? message.slice(0, max) + "…" : message;
+}
+export function ServerErrorsListView({ title, subtitle, source, rows, detailHrefBase, }) {
+    const [codeFilter, setCodeFilter] = React.useState("");
+    const [routeFilter, setRouteFilter] = React.useState("");
+    const filtered = React.useMemo(() => {
+        return rows.filter((r) => (!codeFilter || r.code.toLowerCase().includes(codeFilter.toLowerCase())) &&
+            (!routeFilter || r.route.toLowerCase().includes(routeFilter.toLowerCase())));
+    }, [rows, codeFilter, routeFilter]);
+    return (_jsxs(Div, { style: { padding: "1.5rem", maxWidth: "1400px", margin: "0 auto" }, children: [_jsx(Heading, { level: 1, style: { fontSize: "1.5rem", fontWeight: 600 }, children: title }), subtitle ? (_jsx(Text, { as: "p", style: { color: "var(--appkit-color-text-muted)", marginBottom: "1rem" }, children: subtitle })) : null, _jsxs(Div, { style: { display: "flex", gap: "0.75rem", marginBottom: "1rem", alignItems: "center" }, children: [_jsxs(Label, { style: { fontSize: "0.85rem" }, children: ["Code", _jsx("input", { type: "search", value: codeFilter, onChange: (e) => setCodeFilter(e.target.value), placeholder: "e.g. NOT_FOUND", style: { marginLeft: "0.5rem", padding: "0.35rem 0.5rem", border: BORDER_STYLE, borderRadius: 4 } })] }), _jsxs(Label, { style: { fontSize: "0.85rem" }, children: ["Route", _jsx("input", { type: "search", value: routeFilter, onChange: (e) => setRouteFilter(e.target.value), placeholder: "e.g. /api/orders", style: { marginLeft: "0.5rem", padding: "0.35rem 0.5rem", border: BORDER_STYLE, borderRadius: 4 } })] }), _jsxs(Span, { style: { marginLeft: "auto", fontSize: "0.85rem", color: "var(--appkit-color-text-muted)" }, children: [filtered.length, " of ", rows.length, " (source=", source, ")"] })] }), _jsx(Div, { style: { overflowX: "auto", border: BORDER_STYLE, borderRadius: 6 }, children: _jsxs(Table, { style: { width: "100%", borderCollapse: "collapse", fontSize: "0.85rem" }, children: [_jsx(Thead, { style: { background: "var(--appkit-color-bg)" }, children: _jsx(Tr, { children: COLUMNS.map((c) => (_jsx(Th, { style: {
+                                        textAlign: "left",
+                                        padding: "0.5rem 0.75rem",
+                                        borderBottom: BORDER_STYLE,
+                                        width: c.width,
+                                        whiteSpace: "nowrap",
+                                    }, children: c.label }, c.key))) }) }), _jsx(Tbody, { children: filtered.length === 0 ? (_jsx(Tr, { children: _jsx(Td, { colSpan: COLUMNS.length, style: { padding: "2rem", textAlign: "center", color: "var(--appkit-color-text-muted)" }, children: "No errors in the selected window." }) })) : (filtered.map((r) => (_jsx(Tr, { style: { borderBottom: "1px solid var(--appkit-color-border-subtle)" }, children: COLUMNS.map((c) => {
+                                    let cell;
+                                    if (c.key === "occurredAtFmt")
+                                        cell = fmt(r.occurredAt);
+                                    else if (c.key === "messagePreview")
+                                        cell = preview(r.message);
+                                    else
+                                        cell = (r[c.key] ?? "");
+                                    return (_jsx(Td, { style: { padding: "0.5rem 0.75rem", verticalAlign: "top" }, children: c.key === "code" ? (_jsx(Anchor, { href: `${detailHrefBase}/${r.id}`, external: false, children: String(cell) })) : (String(cell ?? "")) }, c.key));
+                                }) }, r.id)))) })] }) })] }));
+}

package/dist/_internal/client/scaffolds/AppShell.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div } from "../../../ui";
+import { Aside, BlockFooter, BlockHeader, Div, Main, Stack } from "../../../ui";
 export function AppShell({ children, slotHeader, slotFooter, slotSidebar, renderHeader, renderFooter, renderSidebar, path, className, }) {
     const ctx = { path };
     const header = renderHeader ? renderHeader(ctx) : slotHeader;
     const footer = renderFooter ? renderFooter(ctx) : slotFooter;
     const sidebar = renderSidebar ? renderSidebar(ctx) : slotSidebar;
-    return (_jsxs(Div, { className: `appkit-app-shell flex min-h-screen flex-col ${className ?? ""}`, children: [header ? (_jsx("header", { className: "sticky top-0 z-30 w-full", "data-appshell-slot": "header", children: header })) : null, _jsxs(Div, { className: "flex flex-1", children: [sidebar ? (_jsx("aside", { className: "hidden lg:block lg:w-64 lg:shrink-0", "data-appshell-slot": "sidebar", children: sidebar })) : null, _jsx("main", { className: "min-w-0 flex-1", "data-appshell-slot": "main", children: children })] }), footer ? (_jsx("footer", { className: "w-full", "data-appshell-slot": "footer", children: footer })) : null] }));
+    return (_jsxs(Stack, { className: `appkit-app-shell min-h-screen ${className ?? ""}`, children: [header ? (_jsx(BlockHeader, { className: "sticky top-0 z-30 w-full", "data-appshell-slot": "header", children: header })) : null, _jsxs(Div, { layout: "flex", className: "flex-1", children: [sidebar ? (_jsx(Aside, { className: "hidden lg:block lg:w-64 lg:shrink-0", "data-appshell-slot": "sidebar", children: sidebar })) : null, _jsx(Main, { className: "min-w-0 flex-1", "data-appshell-slot": "main", children: children })] }), footer ? (_jsx(BlockFooter, { className: "w-full", "data-appshell-slot": "footer", children: footer })) : null] }));
 }

package/dist/_internal/client/scaffolds/DashboardScaffold.js

@@ -13,12 +13,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * placement; the consumer owns the items.
  */
 import * as React from "react";
-import { Div } from "../../../ui";
+import { Div, Main, Nav, Span, Stack } from "../../../ui";
 export function DashboardScaffold({ children, slotPageHeader, renderNav, renderBottomNav, slotMenuToggle, initialDrawerOpen = false, className, }) {
     const [drawerOpen, setDrawerOpen] = React.useState(initialDrawerOpen);
     const toggleDrawer = React.useCallback(() => setDrawerOpen((v) => !v), []);
     const ctx = { drawerOpen, toggleDrawer };
     const nav = renderNav ? renderNav(ctx) : null;
     const bottomNav = renderBottomNav ? renderBottomNav(ctx) : nav;
-    return (_jsxs(Div, { className: `appkit-dashboard-scaffold flex min-h-screen ${className ?? ""}`, children: [nav ? (_jsx("aside", { className: "sticky top-0 hidden h-screen w-64 shrink-0 overflow-y-auto border-r border-[var(--appkit-color-border,#e5e7eb)] lg:block", "data-dashboard-slot": "sidebar", children: nav })) : null, nav ? (_jsxs("div", { className: `fixed inset-0 z-40 transition-transform md:block lg:hidden ${drawerOpen ? "translate-x-0" : "-translate-x-full"}`, "data-dashboard-slot": "drawer", "aria-hidden": !drawerOpen, children: [_jsx("div", { className: "absolute inset-0 bg-black/40", onClick: () => setDrawerOpen(false), role: "presentation" }), _jsx("nav", { className: "relative h-full w-64 overflow-y-auto bg-[var(--appkit-color-surface,#ffffff)] shadow-xl", children: nav })] })) : null, _jsxs(Div, { className: "flex min-w-0 flex-1 flex-col", children: [(slotPageHeader || slotMenuToggle) && (_jsxs("div", { className: "sticky top-0 z-20 flex items-center gap-3 border-b border-[var(--appkit-color-border,#e5e7eb)] bg-[var(--appkit-color-surface,#ffffff)] px-4 py-2", "data-dashboard-slot": "page-header", children: [slotMenuToggle ? (_jsx("span", { className: "lg:hidden", onClick: toggleDrawer, role: "presentation", children: slotMenuToggle })) : null, _jsx(Div, { className: "min-w-0 flex-1", children: slotPageHeader })] })), _jsx("main", { className: "min-w-0 flex-1 pb-20 lg:pb-0", "data-dashboard-slot": "main", children: children }), bottomNav ? (_jsx("nav", { className: "fixed bottom-0 left-0 right-0 z-30 border-t border-[var(--appkit-color-border,#e5e7eb)] bg-[var(--appkit-color-surface,#ffffff)] lg:hidden", "data-dashboard-slot": "bottom-nav", children: bottomNav })) : null] })] }));
+    return (_jsxs(Div, { layout: "flex", className: `appkit-dashboard-scaffold min-h-screen ${className ?? ""}`, children: [nav ? (_jsx("aside", { className: "sticky top-0 hidden h-screen w-64 shrink-0 overflow-y-auto border-r border-[var(--appkit-color-border)] lg:block", "data-dashboard-slot": "sidebar", children: nav })) : null, nav ? (_jsxs("div", { className: `fixed inset-0 z-40 transition-transform md:block lg:hidden ${drawerOpen ? "translate-x-0" : "-translate-x-full"}`, "data-dashboard-slot": "drawer", "aria-hidden": !drawerOpen, children: [_jsx("div", { className: "absolute inset-0 bg-black/40", onClick: () => setDrawerOpen(false), role: "presentation" }), _jsx(Nav, { "aria-label": "Dashboard sidebar", className: "relative h-full w-64 overflow-y-auto bg-[var(--appkit-color-surface)] shadow-xl", children: nav })] })) : null, _jsxs(Stack, { className: "min-w-0 flex-1", children: [(slotPageHeader || slotMenuToggle) && (_jsxs("div", { className: "sticky top-0 z-20 flex items-center gap-3 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-4 py-2", "data-dashboard-slot": "page-header", children: [slotMenuToggle ? (_jsx(Span, { className: "lg:hidden", onClick: toggleDrawer, role: "presentation", children: slotMenuToggle })) : null, _jsx(Div, { className: "min-w-0 flex-1", children: slotPageHeader })] })), _jsx(Main, { className: "min-w-0 flex-1 pb-20 lg:pb-0", "data-dashboard-slot": "main", children: children }), bottomNav ? (_jsx(Nav, { "aria-label": "Bottom navigation", className: "fixed bottom-0 left-0 right-0 z-30 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] lg:hidden", "data-dashboard-slot": "bottom-nav", children: bottomNav })) : null] })] }));
 }

package/dist/_internal/client/theme/ThemeProvider.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { type ThemeMode, type ThemeRecord } from "../../../tokens/themes";
+export type ModePreference = "light" | "dark" | "auto";
+export interface ThemeRegistry {
+    /** Built-ins + admin-created themes, indexed by id. */
+    themes: ReadonlyArray<ThemeRecord>;
+    /** Theme id used when effective mode is `"light"`. */
+    defaultLightThemeId: string;
+    /** Theme id used when effective mode is `"dark"`. */
+    defaultDarkThemeId: string;
+}
+export interface ThemeContextValue {
+    /** The theme record currently applied to `<html>`. */
+    activeTheme: ThemeRecord;
+    /** Effective mode after auto-resolution (`"light"` | `"dark"`). */
+    effectiveMode: ThemeMode;
+    /** Alias for `effectiveMode` — convenience for consumers that just need the mode. */
+    theme: ThemeMode;
+    /** User's stored preference (`"light"` | `"dark"` | `"auto"`). */
+    preference: ModePreference;
+    /** Persist a new mode preference and re-render the active theme. */
+    setPreference: (next: ModePreference) => void;
+    /** Set preference directly to a concrete mode (skips `"auto"`). */
+    setTheme: (mode: ThemeMode) => void;
+    /** Flip preference between light ↔ dark. Sets preference to a concrete mode. */
+    toggleTheme: () => void;
+}
+export interface ThemeProviderProps {
+    /**
+     * Theme registry — typically `{ themes: [...BUILT_IN_THEMES, ...siteSettings.theme.themes],
+   * defaultLightThemeId, defaultDarkThemeId }`.
+     *
+     * If omitted, ships with just the two built-ins.
+     */
+    registry?: ThemeRegistry;
+    children: ReactNode;
+}
+export declare function ThemeProvider({ registry, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;

package/dist/_internal/client/theme/ThemeProvider.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { BUILT_IN_THEMES, DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, } from "../../../tokens/themes";
+// Brand-neutral localStorage namespace so consumers other than letitrip can
+// adopt appkit without the key leaking the LetItRip brand. The audit
+// audit-ssr-in-appkit blocks any hardcoded brand string inside `_internal/`.
+const MODE_STORAGE_KEY = "appkit:theme-mode";
+const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+const ThemeContext = createContext(null);
+function readModePreference() {
+    if (typeof window === "undefined")
+        return "auto";
+    try {
+        const stored = window.localStorage.getItem(MODE_STORAGE_KEY);
+        if (stored === "light" || stored === "dark" || stored === "auto")
+            return stored;
+    }
+    catch {
+        /* localStorage may be unavailable (privacy mode, embedded iframe). */
+    }
+    return "auto";
+}
+function resolveEffectiveMode(preference) {
+    if (preference === "light" || preference === "dark")
+        return preference;
+    if (typeof window === "undefined")
+        return "light";
+    return window.matchMedia(DARK_MEDIA_QUERY).matches ? "dark" : "light";
+}
+function pickTheme(registry, mode) {
+    const wanted = mode === "dark" ? registry.defaultDarkThemeId : registry.defaultLightThemeId;
+    const hit = registry.themes.find((t) => t.id === wanted);
+    if (hit && hit.mode === mode)
+        return hit;
+    // Fall back to the matching built-in if the configured id is missing or
+    // its mode mismatches (e.g. admin pointed defaultLightThemeId at a dark theme).
+    return mode === "dark" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;
+}
+/** Apply a theme record to `<html>` by setting `data-theme` and inline CSS variables. */
+function applyTheme(theme) {
+    if (typeof document === "undefined")
+        return;
+    const root = document.documentElement;
+    root.setAttribute("data-theme", theme.id);
+    // Mode class kept in sync for any legacy `.dark` selectors that still exist.
+    if (theme.mode === "dark")
+        root.classList.add("dark");
+    else
+        root.classList.remove("dark");
+    for (const [name, value] of Object.entries(theme.tokens)) {
+        root.style.setProperty(`--${name}`, value);
+    }
+    for (const [key, value] of Object.entries(theme.gradients)) {
+        root.style.setProperty(`--appkit-gradient-${key}`, value);
+    }
+}
+const FALLBACK_REGISTRY = {
+    themes: BUILT_IN_THEMES,
+    defaultLightThemeId: DEFAULT_LIGHT_THEME.id,
+    defaultDarkThemeId: DEFAULT_DARK_THEME.id,
+};
+export function ThemeProvider({ registry, children }) {
+    const effectiveRegistry = registry ?? FALLBACK_REGISTRY;
+    const [preference, setPreferenceState] = useState(readModePreference);
+    const [effectiveMode, setEffectiveMode] = useState(() => resolveEffectiveMode(preference));
+    // Subscribe to `prefers-color-scheme` so `"auto"` follows the OS in real time.
+    useEffect(() => {
+        if (typeof window === "undefined" || preference !== "auto")
+            return;
+        const media = window.matchMedia(DARK_MEDIA_QUERY);
+        const onChange = () => setEffectiveMode(media.matches ? "dark" : "light");
+        media.addEventListener("change", onChange);
+        return () => media.removeEventListener("change", onChange);
+    }, [preference]);
+    // Recompute effective mode whenever preference changes.
+    useEffect(() => {
+        setEffectiveMode(resolveEffectiveMode(preference));
+    }, [preference]);
+    // Apply the active theme to the DOM whenever it changes.
+    const activeTheme = useMemo(() => pickTheme(effectiveRegistry, effectiveMode), [effectiveRegistry, effectiveMode]);
+    useEffect(() => {
+        applyTheme(activeTheme);
+    }, [activeTheme]);
+    const setPreference = useCallback((next) => {
+        setPreferenceState(next);
+        try {
+            window.localStorage.setItem(MODE_STORAGE_KEY, next);
+        }
+        catch {
+            /* ignore; preference applies for the session at minimum. */
+        }
+    }, []);
+    const setTheme = useCallback((mode) => setPreference(mode), [setPreference]);
+    const toggleTheme = useCallback(() => {
+        setPreference(effectiveMode === "dark" ? "light" : "dark");
+    }, [effectiveMode, setPreference]);
+    const value = useMemo(() => ({
+        activeTheme,
+        effectiveMode,
+        theme: effectiveMode,
+        preference,
+        setPreference,
+        setTheme,
+        toggleTheme,
+    }), [activeTheme, effectiveMode, preference, setPreference, setTheme, toggleTheme]);
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error("useTheme must be used inside <ThemeProvider>");
+    }
+    return ctx;
+}

package/dist/_internal/client/theme/__tests__/ThemeProvider.test.d.ts

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