npm - @mohasinac/appkit - Versions diffs - 3.2.8 → 3.2.10 - Mend

@mohasinac/appkit 3.2.8 → 3.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (269) hide show

package/dist/_internal/client/features/filters/filter-load-options.js CHANGED Viewed

@@ -9,6 +9,8 @@
  *   const load = makeCategoryLoadOptions();
  *   <AsyncFacetSection loadOptions={load} ... />
  */
+import { apiClient } from "../../../../http/ApiClient";
+import { normalizeError } from "../../../../errors/normalize";
 const PAGE_SIZE = 25;
 function buildUrl(base, q, page, extra) {
     const params = new URLSearchParams({
@@ -20,16 +22,17 @@ function buildUrl(base, q, page, extra) {
     return `${base}?${params.toString()}`;
 }
 async function fetchPage(url, mapItem) {
-    const res = await fetch(url);
-    if (!res.ok)
+    try {
+        const data = await apiClient.get(url);
+        return {
+            items: (data?.items ?? []).map(mapItem),
+            hasMore: data?.hasMore ?? false,
+        };
+    }
+    catch (_err) {
+        void normalizeError(_err); // PaginatedSelect degrades to empty page; caller can retry by re-typing
         return { items: [], hasMore: false };
-    const json = (await res.json());
-    const raw = json.data?.items ?? [];
-    const hasMore = json.data?.hasMore ?? false;
-    return {
-        items: raw.map(mapItem),
-        hasMore,
-    };
+    }
 }
 // ── Categories ────────────────────────────────────────────────────────────────
 /**

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { normalizeError } from "../../../errors/normalize";
 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
@@ -16,8 +17,8 @@ function readModePreference() {
         if (stored === "light" || stored === "dark" || stored === "auto")
             return stored;
     }
-    catch {
-        /* localStorage may be unavailable (privacy mode, embedded iframe). */
+    catch (_err) {
+        void normalizeError(_err); /* localStorage unavailable in privacy/iframe context */
     }
     return "auto";
 }
@@ -37,6 +38,7 @@ function pickTheme(registry, mode) {
     // its mode mismatches (e.g. admin pointed defaultLightThemeId at a dark theme).
     return mode === "dark" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;
 }
+const THEME_ID_STORAGE_KEY = "appkit:theme-id";
 /** Apply a theme record to `<html>` by setting `data-theme` and inline CSS variables. */
 function applyTheme(theme) {
     if (typeof document === "undefined")
@@ -48,6 +50,14 @@ function applyTheme(theme) {
         root.classList.add("dark");
     else
         root.classList.remove("dark");
+    // Persist active theme ID so the anti-FOUC script can restore it on return visits,
+    // preventing a flash to the built-in cobalt/hot-pink colors on page load.
+    try {
+        window.localStorage.setItem(THEME_ID_STORAGE_KEY, theme.id);
+    }
+    catch (_err) {
+        void normalizeError(_err); /* localStorage unavailable in this context */
+    }
     for (const [name, value] of Object.entries(theme.tokens)) {
         root.style.setProperty(`--${name}`, value);
     }
@@ -87,8 +97,8 @@ export function ThemeProvider({ registry, children }) {
         try {
             window.localStorage.setItem(MODE_STORAGE_KEY, next);
         }
-        catch {
-            /* ignore; preference applies for the session at minimum. */
+        catch (_err) {
+            void normalizeError(_err); /* localStorage unavailable; preference applies for this session */
         }
     }, []);
     const setTheme = useCallback((mode) => setPreference(mode), [setPreference]);

package/dist/_internal/server/features/auth/firebase-identity.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+type IdentityOperation = "signInWithPassword" | "signInWithCustomToken";
+/**
+ * Calls the Firebase Identity Toolkit REST API with one retry for transient
+ * network failures. Throws a plain Error (message from the API) on non-2xx.
+ *
+ * Both auth routes (login + register) hit this endpoint to exchange
+ * credentials / custom tokens for a Firebase ID token that can be converted
+ * into a session cookie. Centralised here so the URL, Content-Type, and retry
+ * config are in one place.
+ */
+export declare function callFirebaseIdentityToolkit<T extends Record<string, unknown>>(operation: IdentityOperation, body: Record<string, unknown>, apiKey: string): Promise<T>;
+export {};

package/dist/_internal/server/features/auth/firebase-identity.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { withRetry } from "../../../../http/retry";
+const IDENTITY_TOOLKIT_BASE = "https://identitytoolkit.googleapis.com/v1/accounts";
+/**
+ * Calls the Firebase Identity Toolkit REST API with one retry for transient
+ * network failures. Throws a plain Error (message from the API) on non-2xx.
+ *
+ * Both auth routes (login + register) hit this endpoint to exchange
+ * credentials / custom tokens for a Firebase ID token that can be converted
+ * into a session cookie. Centralised here so the URL, Content-Type, and retry
+ * config are in one place.
+ */
+export async function callFirebaseIdentityToolkit(operation, body, apiKey) {
+    const url = `${IDENTITY_TOOLKIT_BASE}:${operation}?key=${encodeURIComponent(apiKey)}`;
+    const res = await withRetry(() => fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+    }), 1, 500);
+    const data = (await res.json());
+    if (!res.ok) {
+        throw new Error(data.error?.message ??
+            `Firebase Identity Toolkit ${operation} failed (${res.status})`);
+    }
+    return data;
+}

package/dist/_internal/server/features/site-settings/safe-settings.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { SiteSettingsDocument } from "../../../../features/admin/schemas/firestore";
+/**
+ * Null-safe wrapper around getSiteSettingsGlobal().
+ *
+ * Use in API routes and server actions that can degrade gracefully when
+ * site settings are unavailable (feature flags, watermark config, etc.).
+ * Returns null on Firestore failure; the caller decides the fallback.
+ *
+ * For paths where missing settings are a hard error (e.g. billing config),
+ * call getSiteSettingsGlobal() directly so the 500 propagates naturally.
+ */
+export declare function getSiteSettingsSafe(): Promise<SiteSettingsDocument | null>;

package/dist/_internal/server/features/site-settings/safe-settings.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { normalizeError } from "../../../../errors/normalize";
+import { serverLogger } from "../../../../monitoring/server-logger";
+import { getSiteSettingsGlobal } from "../../../../features/admin/utils/getSiteSettingsGlobal";
+/**
+ * Null-safe wrapper around getSiteSettingsGlobal().
+ *
+ * Use in API routes and server actions that can degrade gracefully when
+ * site settings are unavailable (feature flags, watermark config, etc.).
+ * Returns null on Firestore failure; the caller decides the fallback.
+ *
+ * For paths where missing settings are a hard error (e.g. billing config),
+ * call getSiteSettingsGlobal() directly so the 500 propagates naturally.
+ */
+export async function getSiteSettingsSafe() {
+    try {
+        return await getSiteSettingsGlobal();
+    }
+    catch (err) {
+        void normalizeError(err);
+        serverLogger.warn("getSiteSettingsSafe: Firestore read failed — degrading to null", {
+            error: err instanceof Error ? err.message : String(err),
+        });
+        return null;
+    }
+}

package/dist/_internal/shared/features/layout/config.js CHANGED Viewed

@@ -18,19 +18,19 @@ export const DASHBOARD_SIDEBAR_WIDTH = {
 /** Per-variant accent token map. Drives DashboardSidebar active-item styling. */
 export const DASHBOARD_ACCENT_CLASSES = {
     admin: {
-        activeBg: "bg-zinc-100 dark:bg-slate-800",
-        activeText: "text-zinc-900 dark:text-zinc-100",
-        hoverBg: "hover:bg-zinc-50 dark:hover:bg-slate-800/60",
+        activeBg: "bg-[var(--appkit-color-surface-elevated)]",
+        activeText: "text-[var(--appkit-color-text)]",
+        hoverBg: "hover:bg-[var(--appkit-color-surface)]",
     },
     store: {
-        activeBg: "bg-warning-surface dark:bg-warning-surface",
-        activeText: "text-warning dark:text-warning",
-        hoverBg: "hover:bg-zinc-50 dark:hover:bg-slate-800/60",
+        activeBg: "bg-warning-surface",
+        activeText: "text-warning",
+        hoverBg: "hover:bg-[var(--appkit-color-surface)]",
     },
     user: {
         activeBg: "bg-primary-50 dark:bg-primary-900/25",
         activeText: "text-primary-700 dark:text-primary-300",
-        hoverBg: "hover:bg-zinc-50 dark:hover:bg-slate-800",
+        hoverBg: "hover:bg-[var(--appkit-color-surface)]",
     },
 };
 /** hideAt → Tailwind class. `md:hidden` etc. */

package/dist/_internal/shared/styles/skeleton.d.ts CHANGED Viewed

@@ -5,12 +5,12 @@
  * shimmer (animate-shimmer + gradient).
  */
 export declare const SKELETON: {
-    readonly base: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60";
-    readonly text: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-4";
-    readonly heading: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-7";
-    readonly image: "animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700/60";
-    readonly card: "animate-pulse rounded-2xl bg-zinc-200 dark:bg-slate-700/60";
-    readonly shimmer: "animate-shimmer bg-[length:400%_100%] rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800";
-    readonly shimmerText: "animate-shimmer bg-[length:400%_100%] h-4 rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800";
-    readonly shimmerCard: "animate-shimmer bg-[length:400%_100%] rounded-2xl bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800";
+    readonly base: "animate-pulse rounded bg-[var(--appkit-color-border-subtle)]";
+    readonly text: "animate-pulse rounded bg-[var(--appkit-color-border-subtle)] h-4";
+    readonly heading: "animate-pulse rounded bg-[var(--appkit-color-border-subtle)] h-7";
+    readonly image: "animate-pulse rounded-xl bg-[var(--appkit-color-border-subtle)]";
+    readonly card: "animate-pulse rounded-2xl bg-[var(--appkit-color-border-subtle)]";
+    readonly shimmer: "animate-shimmer bg-[length:400%_100%] rounded bg-gradient-to-r from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]";
+    readonly shimmerText: "animate-shimmer bg-[length:400%_100%] h-4 rounded bg-gradient-to-r from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]";
+    readonly shimmerCard: "animate-shimmer bg-[length:400%_100%] rounded-2xl bg-gradient-to-r from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]";
 };

package/dist/_internal/shared/styles/skeleton.js CHANGED Viewed

@@ -5,14 +5,14 @@
  * shimmer (animate-shimmer + gradient).
  */
 export const SKELETON = {
-    // Pulse (fade) variant
-    base: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60",
-    text: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-4",
-    heading: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-7",
-    image: "animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700/60",
-    card: "animate-pulse rounded-2xl bg-zinc-200 dark:bg-slate-700/60",
-    // Shimmer (sweep) variant
-    shimmer: "animate-shimmer bg-[length:400%_100%] rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800",
-    shimmerText: "animate-shimmer bg-[length:400%_100%] h-4 rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800",
-    shimmerCard: "animate-shimmer bg-[length:400%_100%] rounded-2xl bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800",
+    // Pulse (fade) variant — bg adapts to active theme
+    base: "animate-pulse rounded bg-[var(--appkit-color-border-subtle)]",
+    text: "animate-pulse rounded bg-[var(--appkit-color-border-subtle)] h-4",
+    heading: "animate-pulse rounded bg-[var(--appkit-color-border-subtle)] h-7",
+    image: "animate-pulse rounded-xl bg-[var(--appkit-color-border-subtle)]",
+    card: "animate-pulse rounded-2xl bg-[var(--appkit-color-border-subtle)]",
+    // Shimmer (sweep) variant — gradient from border-subtle → bg → border-subtle
+    shimmer: "animate-shimmer bg-[length:400%_100%] rounded bg-gradient-to-r from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]",
+    shimmerText: "animate-shimmer bg-[length:400%_100%] h-4 rounded bg-gradient-to-r from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]",
+    shimmerCard: "animate-shimmer bg-[length:400%_100%] rounded-2xl bg-gradient-to-r from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]",
 };

package/dist/_internal/shared/styles/themed.d.ts CHANGED Viewed

@@ -6,18 +6,18 @@
  * subsequent sweep migrates each callsite to a primitive `surface` /
  * `color` / `border` variant.
  */
-export declare const THEMED_BG_PRIMARY = "bg-zinc-50 dark:bg-slate-950";
-export declare const THEMED_BG_SECONDARY = "bg-zinc-100 dark:bg-slate-900";
-export declare const THEMED_BG_TERTIARY = "bg-zinc-200 dark:bg-slate-800";
-export declare const THEMED_BORDER = "border-zinc-200 dark:border-slate-700";
-export declare const THEMED_BORDER_STRONG = "border-zinc-300 dark:border-slate-600";
-export declare const THEMED_TEXT_PRIMARY = "text-zinc-900 dark:text-zinc-50";
-export declare const THEMED_TEXT_SECONDARY = "text-zinc-500 dark:text-zinc-400";
-export declare const THEMED_TEXT_TERTIARY = "text-zinc-400 dark:text-zinc-500";
-export declare const THEMED_TEXT_MUTED = "text-zinc-400 dark:text-zinc-400";
-export declare const THEMED_TEXT_SUCCESS = "text-emerald-600 dark:text-emerald-400";
-export declare const THEMED_TEXT_WARNING = "text-amber-600 dark:text-amber-400";
-export declare const THEMED_TEXT_ERROR = "text-red-600 dark:text-red-400";
+export declare const THEMED_BG_PRIMARY = "bg-[var(--appkit-color-bg)]";
+export declare const THEMED_BG_SECONDARY = "bg-[var(--appkit-color-surface)]";
+export declare const THEMED_BG_TERTIARY = "bg-[var(--appkit-color-surface-elevated)]";
+export declare const THEMED_BORDER = "border-[var(--appkit-color-border)]";
+export declare const THEMED_BORDER_STRONG = "border-[var(--appkit-color-border)]";
+export declare const THEMED_TEXT_PRIMARY = "text-[var(--appkit-color-text)]";
+export declare const THEMED_TEXT_SECONDARY = "text-[var(--appkit-color-text-muted)]";
+export declare const THEMED_TEXT_TERTIARY = "text-[var(--appkit-color-text-faint)]";
+export declare const THEMED_TEXT_MUTED = "text-[var(--appkit-color-text-faint)]";
+export declare const THEMED_TEXT_SUCCESS = "text-success";
+export declare const THEMED_TEXT_WARNING = "text-warning";
+export declare const THEMED_TEXT_ERROR = "text-error";
 export declare const FLEX_CENTER = "flex items-center justify-center";
 export declare const FLEX_BETWEEN = "flex items-center justify-between";
 export declare const FLEX_START = "flex items-center justify-start";

package/dist/_internal/shared/styles/themed.js CHANGED Viewed

@@ -6,18 +6,18 @@
  * subsequent sweep migrates each callsite to a primitive `surface` /
  * `color` / `border` variant.
  */
-export const THEMED_BG_PRIMARY = "bg-zinc-50 dark:bg-slate-950";
-export const THEMED_BG_SECONDARY = "bg-zinc-100 dark:bg-slate-900";
-export const THEMED_BG_TERTIARY = "bg-zinc-200 dark:bg-slate-800";
-export const THEMED_BORDER = "border-zinc-200 dark:border-slate-700";
-export const THEMED_BORDER_STRONG = "border-zinc-300 dark:border-slate-600";
-export const THEMED_TEXT_PRIMARY = "text-zinc-900 dark:text-zinc-50";
-export const THEMED_TEXT_SECONDARY = "text-zinc-500 dark:text-zinc-400";
-export const THEMED_TEXT_TERTIARY = "text-zinc-400 dark:text-zinc-500";
-export const THEMED_TEXT_MUTED = "text-zinc-400 dark:text-zinc-400";
-export const THEMED_TEXT_SUCCESS = "text-emerald-600 dark:text-emerald-400";
-export const THEMED_TEXT_WARNING = "text-amber-600 dark:text-amber-400";
-export const THEMED_TEXT_ERROR = "text-red-600 dark:text-red-400";
+export const THEMED_BG_PRIMARY = "bg-[var(--appkit-color-bg)]";
+export const THEMED_BG_SECONDARY = "bg-[var(--appkit-color-surface)]";
+export const THEMED_BG_TERTIARY = "bg-[var(--appkit-color-surface-elevated)]";
+export const THEMED_BORDER = "border-[var(--appkit-color-border)]";
+export const THEMED_BORDER_STRONG = "border-[var(--appkit-color-border)]";
+export const THEMED_TEXT_PRIMARY = "text-[var(--appkit-color-text)]";
+export const THEMED_TEXT_SECONDARY = "text-[var(--appkit-color-text-muted)]";
+export const THEMED_TEXT_TERTIARY = "text-[var(--appkit-color-text-faint)]";
+export const THEMED_TEXT_MUTED = "text-[var(--appkit-color-text-faint)]";
+export const THEMED_TEXT_SUCCESS = "text-success";
+export const THEMED_TEXT_WARNING = "text-warning";
+export const THEMED_TEXT_ERROR = "text-error";
 export const FLEX_CENTER = "flex items-center justify-center";
 export const FLEX_BETWEEN = "flex items-center justify-between";
 export const FLEX_START = "flex items-center justify-start";

package/dist/features/about/components/AboutView.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, Div, Heading, Row, Section, Span, Stack, Text } from "../../../ui";
 export function AboutView({ labels = {}, howItems = [], valueItems = [], milestones = [], ctaBannerClass = "", renderCtaButtons, }) {
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "y-4xl", children: _jsxs(Div, { paddingX: "x-page", className: "max-w-4xl mx-auto text-center", children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-6", mdSize: "5xl", size: "4xl", weight: "bold", children: labels.title }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", size: "xl", children: labels.subtitle })] }) }), _jsxs(Div, { paddingX: "x-page", className: "max-w-5xl mx-auto", padding: "y-4xl", children: [_jsxs(Section, { className: "text-center max-w-3xl mx-auto", children: [_jsx(Heading, { level: 2, className: "mb-4", children: labels.missionTitle }), _jsx(Text, { size: "lg", variant: "secondary", className: "leading-relaxed", children: labels.missionText })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-12", align: "center", children: labels.howItWorksTitle }), _jsx(Div, { className: "grid md:grid-cols-3", gap: "6", children: howItems.map(({ title, text, icon, tone }) => (_jsxs(Card, { variant: `gradient-${tone ?? "indigo"}`, padding: "md", spacing: "sm", children: [_jsx(Div, { children: _jsx(Span, { size: "4xl", children: icon }) }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-12", align: "center", children: labels.valuesTitle }), _jsx(Div, { className: "grid md:grid-cols-3", gap: "5", children: valueItems.map(({ title, text, icon }) => (_jsxs("div", { className: "bg-white dark:bg-slate-800 rounded-xl p-6 space-y-3 border border-neutral-200 dark:border-slate-700", children: [_jsx(Div, { children: _jsx(Span, { size: "3xl", children: icon }) }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-10", align: "center", children: labels.milestonesTitle }), _jsx(Stack, { className: "relative border-l-2 border-primary/30 max-w-2xl mx-auto pl-[2rem]", gap: "xl", children: milestones.map(({ year, text }) => (_jsxs(Div, { className: "relative", children: [_jsx(Div, { className: "absolute -left-10 top-1 w-4 h-4 bg-primary border-2 border-white", rounded: "full" }), _jsx(Span, { size: "xs", weight: "bold", className: "text-primary tracking-wide", transform: "uppercase", children: year }), _jsx(Text, { className: "mt-1", children: text })] }, year))) })] }), _jsxs(Section, { color: "inverse", tone: "accent-banner", className: `text-center ${ctaBannerClass}`, padding: "xl", rounded: "2xl", children: [_jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "mb-8", size: "3xl", weight: "bold", children: labels.ctaTitle }), renderCtaButtons ? (renderCtaButtons()) : (_jsx(Row, { justify: "center", gap: "3", wrap: true, children: _jsxs(Span, { color: "inverse", size: "sm", className: "/70", children: [labels.ctaSell, " \u00B7 ", labels.ctaShop] }) }))] })] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "y-4xl", children: _jsxs(Div, { paddingX: "x-page", className: "max-w-4xl mx-auto text-center", children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-6", mdSize: "5xl", size: "4xl", weight: "bold", children: labels.title }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", size: "xl", children: labels.subtitle })] }) }), _jsxs(Div, { paddingX: "x-page", className: "max-w-5xl mx-auto", padding: "y-4xl", children: [_jsxs(Section, { className: "text-center max-w-3xl mx-auto", children: [_jsx(Heading, { level: 2, className: "mb-4", children: labels.missionTitle }), _jsx(Text, { size: "lg", variant: "secondary", className: "leading-relaxed", children: labels.missionText })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-12", align: "center", children: labels.howItWorksTitle }), _jsx(Div, { className: "grid md:grid-cols-3", gap: "6", children: howItems.map(({ title, text, icon, tone }) => (_jsxs(Card, { variant: `gradient-${tone ?? "indigo"}`, padding: "md", spacing: "sm", children: [_jsx(Div, { children: _jsx(Span, { size: "4xl", children: icon }) }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-12", align: "center", children: labels.valuesTitle }), _jsx(Div, { className: "grid md:grid-cols-3", gap: "5", children: valueItems.map(({ title, text, icon }) => (_jsxs("div", { className: "bg-[var(--appkit-color-surface)] rounded-xl p-6 space-y-3 border border-[var(--appkit-color-border)]", children: [_jsx(Div, { children: _jsx(Span, { size: "3xl", children: icon }) }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-10", align: "center", children: labels.milestonesTitle }), _jsx(Stack, { className: "relative border-l-2 border-primary/30 max-w-2xl mx-auto pl-[2rem]", gap: "xl", children: milestones.map(({ year, text }) => (_jsxs(Div, { className: "relative", children: [_jsx(Div, { className: "absolute -left-10 top-1 w-4 h-4 bg-primary border-2 border-white", rounded: "full" }), _jsx(Span, { size: "xs", weight: "bold", className: "text-primary tracking-wide", transform: "uppercase", children: year }), _jsx(Text, { className: "mt-1", children: text })] }, year))) })] }), _jsxs(Section, { color: "inverse", tone: "accent-banner", className: `text-center ${ctaBannerClass}`, padding: "xl", rounded: "2xl", children: [_jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "mb-8", size: "3xl", weight: "bold", children: labels.ctaTitle }), renderCtaButtons ? (renderCtaButtons()) : (_jsx(Row, { justify: "center", gap: "3", wrap: true, children: _jsxs(Span, { color: "inverse", size: "sm", className: "/70", children: [labels.ctaSell, " \u00B7 ", labels.ctaShop] }) }))] })] })] }));
 }

package/dist/features/about/components/FAQPageView.js CHANGED Viewed

@@ -20,5 +20,5 @@ export async function FAQPageView({ category, } = {}) {
         ? allItems.filter((item) => item.category === category)
         : allItems;
     const activeCategory = categories.find((c) => c.slug === category);
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Container, { size: "md", className: "text-center", children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-3", children: activeCategory ? activeCategory.label : t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsx(Container, { size: "md", padding: "content-banner", children: _jsxs(Stack, { direction: "md-row", gap: "xl", children: [categories.length > 0 && (_jsxs(Aside, { className: "md:w-56 flex-shrink-0", children: [_jsx(Heading, { level: 3, className: "uppercase tracking-wide mb-3", color: "muted", size: "sm", weight: "semibold", children: t("categoriesLabel") }), _jsxs(Nav, { "aria-label": "FAQ categories", spacing: "xs", children: [_jsxs(TextLink, { rounded: "lg", href: String(ROUTES.PUBLIC.FAQS), paddingX: "sm", paddingY: "xs", layout: "flex", align: "center", justify: "between", weight: !category ? "semibold" : undefined, className: `transition-colors ${!category ? "bg-primary/10 text-primary" : "hover:bg-neutral-100 dark:bg-neutral-800 dark:hover:bg-neutral-800"}`, size: "sm", children: [_jsxs(Span, { className: `${flex.row}`, gap: "md", children: [_jsx(HelpCircle, { className: "w-4 h-4" }), t("allCategories")] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }), categories.map((cat) => (_jsxs(TextLink, { rounded: "lg", href: String(ROUTES.PUBLIC.FAQ_CATEGORY(cat.slug)), paddingX: "sm", paddingY: "xs", layout: "flex", align: "center", justify: "between", weight: category === cat.slug ? "semibold" : undefined, className: `transition-colors ${category === cat.slug ? "bg-primary/10 text-primary" : "hover:bg-neutral-100 dark:bg-neutral-800 dark:hover:bg-neutral-800"}`, size: "sm", children: [_jsxs(Span, { className: `${flex.row}`, gap: "md", children: [_jsx(Span, { children: cat.icon }), cat.label] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }, cat.slug)))] })] })), _jsxs(Div, { className: "flex-1 min-w-0", children: [visibleItems.length === 0 ? (_jsxs(Section, { className: `text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "y-4xl", children: [_jsx(HelpCircle, { className: "w-10 h-10 mx-auto mb-3 text-zinc-300 dark:text-zinc-600 dark:text-zinc-400" }), _jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("emptyTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("emptyText") })] })) : (_jsx(Stack, { gap: "sm", children: visibleItems.map((item, i) => (_jsxs(Details, { tone: "card", className: "group overflow-hidden", children: [_jsxs(Summary, { paddingX: "x-5", paddingY: "y-md", size: "sm", weight: "medium", layout: "flex", align: "center", justify: "between", className: "hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors", children: [_jsx(Span, { children: item.question }), _jsx(ChevronRight, { className: "w-4 h-4 flex-shrink-0 ml-3 transition-transform group-open:rotate-90" })] }), _jsx(Div, { padding: "x-md", paddingY: "b-md-lg", className: "pt-[0.25rem]", children: _jsx(RichTextRenderer, { html: item.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert" }) })] }, i))) })), _jsxs(Section, { className: `mt-10 text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "lg", children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("stillNeedHelpTitle") }), _jsx(Text, { variant: "secondary", className: "mb-4", size: "sm", children: t("stillNeedHelpText") }), _jsxs(Row, { align: "center", justify: "center", gap: "md", wrap: true, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("contactUs") })] })] })] })] }) })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Container, { size: "md", className: "text-center", children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-3", children: activeCategory ? activeCategory.label : t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsx(Container, { size: "md", padding: "content-banner", children: _jsxs(Stack, { direction: "md-row", gap: "xl", children: [categories.length > 0 && (_jsxs(Aside, { className: "md:w-56 flex-shrink-0", children: [_jsx(Heading, { level: 3, className: "uppercase tracking-wide mb-3", color: "muted", size: "sm", weight: "semibold", children: t("categoriesLabel") }), _jsxs(Nav, { "aria-label": "FAQ categories", spacing: "xs", children: [_jsxs(TextLink, { rounded: "lg", href: String(ROUTES.PUBLIC.FAQS), paddingX: "sm", paddingY: "xs", layout: "flex", align: "center", justify: "between", weight: !category ? "semibold" : undefined, className: `transition-colors ${!category ? "bg-primary/10 text-primary" : "hover:bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-elevated)]"}`, size: "sm", children: [_jsxs(Span, { className: `${flex.row}`, gap: "md", children: [_jsx(HelpCircle, { className: "w-4 h-4" }), t("allCategories")] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }), categories.map((cat) => (_jsxs(TextLink, { rounded: "lg", href: String(ROUTES.PUBLIC.FAQ_CATEGORY(cat.slug)), paddingX: "sm", paddingY: "xs", layout: "flex", align: "center", justify: "between", weight: category === cat.slug ? "semibold" : undefined, className: `transition-colors ${category === cat.slug ? "bg-primary/10 text-primary" : "hover:bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-elevated)]"}`, size: "sm", children: [_jsxs(Span, { className: `${flex.row}`, gap: "md", children: [_jsx(Span, { children: cat.icon }), cat.label] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }, cat.slug)))] })] })), _jsxs(Div, { className: "flex-1 min-w-0", children: [visibleItems.length === 0 ? (_jsxs(Section, { className: `text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "y-4xl", children: [_jsx(HelpCircle, { className: "w-10 h-10 mx-auto mb-3 text-zinc-300 dark:text-[var(--appkit-color-text-muted)]" }), _jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("emptyTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("emptyText") })] })) : (_jsx(Stack, { gap: "sm", children: visibleItems.map((item, i) => (_jsxs(Details, { tone: "card", className: "group overflow-hidden", children: [_jsxs(Summary, { paddingX: "x-5", paddingY: "y-md", size: "sm", weight: "medium", layout: "flex", align: "center", justify: "between", className: "hover:bg-neutral-50 hover:bg-[var(--appkit-color-surface-elevated)]/50 transition-colors", children: [_jsx(Span, { children: item.question }), _jsx(ChevronRight, { className: "w-4 h-4 flex-shrink-0 ml-3 transition-transform group-open:rotate-90" })] }), _jsx(Div, { padding: "x-md", paddingY: "b-md-lg", className: "pt-[0.25rem]", children: _jsx(RichTextRenderer, { html: item.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert" }) })] }, i))) })), _jsxs(Section, { className: `mt-10 text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "lg", children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("stillNeedHelpTitle") }), _jsx(Text, { variant: "secondary", className: "mb-4", size: "sm", children: t("stillNeedHelpText") }), _jsxs(Row, { align: "center", justify: "center", gap: "md", wrap: true, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("contactUs") })] })] })] })] }) })] }));
 }

package/dist/features/about/components/FeesView.js CHANGED Viewed

@@ -65,10 +65,10 @@ export async function FeesView({} = {}) {
     return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.sm} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "section", className: `${page.container.sm}`, padding: "content-banner", children: [renderFeeTableSection(t, themed, FEE_ROWS), renderPayoutExampleSection(t, themed, OFFER_PAYOUT_ROWS), renderDisclaimerSection(t, themed)] })] }));
 }
 function renderFeeTableSection(t, themed, rows) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("tableTitle") }), _jsx(Div, { className: `${__O.xAuto}`, border: "default", rounded: "xl", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { className: themed.bgSecondary, children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colFeeType") }), _jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colRate") }), _jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colPaidBy") }), _jsx(Th, { className: "text-left hidden md:table-cell", padding: "md", weight: "semibold", children: t("colNote") })] }) }), _jsx(Tbody, { className: "divide-y divide-neutral-100 dark:divide-neutral-800", children: rows.map((row) => (_jsxs(Tr, { className: `${themed.bgPrimary} hover:bg-neutral-50 dark:hover:bg-neutral-800/50`, children: [_jsx(Td, { weight: "medium", padding: "md", children: row.category }), _jsx(Td, { className: CLS_RATE_CELL, children: row.rate }), _jsx(Td, { padding: "md", children: _jsx(Caption, { children: row.who }) }), _jsx(Td, { className: "text-neutral-500 dark:text-neutral-400 hidden md:table-cell", padding: "md", size: "xs", children: row.note })] }, row.category))) })] }) }), _jsx(Caption, { className: "mt-3 block", color: "muted", children: t("tableNote") })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("tableTitle") }), _jsx(Div, { className: `${__O.xAuto}`, border: "default", rounded: "xl", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { className: themed.bgSecondary, children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colFeeType") }), _jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colRate") }), _jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colPaidBy") }), _jsx(Th, { className: "text-left hidden md:table-cell", padding: "md", weight: "semibold", children: t("colNote") })] }) }), _jsx(Tbody, { className: "divide-y divide-neutral-100 divide-[var(--appkit-color-border)]", children: rows.map((row) => (_jsxs(Tr, { className: `${themed.bgPrimary} hover:bg-neutral-50 hover:bg-[var(--appkit-color-surface-elevated)]/50`, children: [_jsx(Td, { weight: "medium", padding: "md", children: row.category }), _jsx(Td, { className: CLS_RATE_CELL, children: row.rate }), _jsx(Td, { padding: "md", children: _jsx(Caption, { children: row.who }) }), _jsx(Td, { className: "text-[var(--appkit-color-text-muted)] hidden md:table-cell", padding: "md", size: "xs", children: row.note })] }, row.category))) })] }) }), _jsx(Caption, { className: "mt-3 block", color: "muted", children: t("tableNote") })] }));
 }
 function renderPayoutExampleSection(t, themed, rows) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("payoutExampleTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6", children: t("payoutExampleSubtitle") }), _jsxs(Div, { className: `${__P.p5} max-w-sm`, border: "default", surface: "muted", rounded: "xl", children: [_jsx(Heading, { level: 3, className: "mb-4", size: "base", children: t("payoutExampleProduct") }), _jsx(Stack, { gap: "sm", children: rows.map((row, i) => (_jsxs(Row, { textWeight: "bold", textSize: "sm", className: `${row.highlight ? "border-t border-neutral-200 dark:border-neutral-700 mt-2" : ""}`, paddingY: row.highlight ? "t-xs" : undefined, justify: "between", children: [_jsx(Text, { className: row.highlight ? "font-bold" : "text-neutral-600 dark:text-neutral-400", children: row.label }), _jsx(Text, { className: row.highlight ? CLS_HIGHLIGHT : "", children: row.example })] }, i))) })] })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("payoutExampleTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6", children: t("payoutExampleSubtitle") }), _jsxs(Div, { className: `${__P.p5} max-w-sm`, border: "default", surface: "muted", rounded: "xl", children: [_jsx(Heading, { level: 3, className: "mb-4", size: "base", children: t("payoutExampleProduct") }), _jsx(Stack, { gap: "sm", children: rows.map((row, i) => (_jsxs(Row, { textWeight: "bold", textSize: "sm", className: `${row.highlight ? "border-t border-[var(--appkit-color-border)] mt-2" : ""}`, paddingY: row.highlight ? "t-xs" : undefined, justify: "between", children: [_jsx(Text, { className: row.highlight ? "font-bold" : "text-[var(--appkit-color-text-muted)]", children: row.label }), _jsx(Text, { className: row.highlight ? CLS_HIGHLIGHT : "", children: row.example })] }, i))) })] })] }));
 }
 function renderDisclaimerSection(t, themed) {
     return (_jsxs(Section, { className: `${__P.p5}`, border: "default", surface: "subtle", rounded: "xl", children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("disclaimerTitle") }), _jsx(Caption, { className: "leading-relaxed", children: t("disclaimerText") })] }));

package/dist/features/about/components/HowAuctionsWorkView.js CHANGED Viewed

@@ -52,9 +52,9 @@ export async function HowAuctionsWorkView({} = {}) {
     const DIAGRAM_STEPS = [
         {
             emoji: "🔍",
-            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            circleClass: "bg-[var(--appkit-color-border-subtle)] border-2 border-[var(--appkit-color-border)]",
             badge: t("step1Title"),
-            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            badgeClass: "bg-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]",
             desc: t("diagramStep1Desc"),
         },
         {

package/dist/features/about/components/HowCheckoutWorksView.js CHANGED Viewed

@@ -38,9 +38,9 @@ export async function HowCheckoutWorksView({} = {}) {
     const DIAGRAM_STEPS = [
         {
             emoji: "🛒",
-            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            circleClass: "bg-[var(--appkit-color-border-subtle)] border-2 border-[var(--appkit-color-border)]",
             badge: t("step1Title"),
-            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            badgeClass: "bg-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]",
             desc: t("diagramStep1Desc"),
         },
         {

package/dist/features/about/components/HowOffersWorkView.js CHANGED Viewed

@@ -24,9 +24,9 @@ export async function HowOffersWorkView({} = {}) {
     const DIAGRAM_STEPS = [
         {
             emoji: "💬",
-            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            circleClass: "bg-[var(--appkit-color-border-subtle)] border-2 border-[var(--appkit-color-border)]",
             badge: t("diagramStep1Badge"),
-            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            badgeClass: "bg-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]",
             desc: t("diagramStep1Desc"),
         },
         {

package/dist/features/about/components/HowOrdersWorkView.js CHANGED Viewed

@@ -90,9 +90,9 @@ export async function HowOrdersWorkView({} = {}) {
     const DIAGRAM_STEPS = [
         {
             emoji: "🛒",
-            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            circleClass: "bg-[var(--appkit-color-border-subtle)] border-2 border-[var(--appkit-color-border)]",
             badge: t("diagramStep1Badge"),
-            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            badgeClass: "bg-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]",
             desc: t("diagramStep1Desc"),
         },
         {

package/dist/features/about/components/HowPayoutsWorkView.js CHANGED Viewed

@@ -52,9 +52,9 @@ export async function HowPayoutsWorkView({} = {}) {
     const DIAGRAM_STEPS = [
         {
             emoji: "✅",
-            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            circleClass: "bg-[var(--appkit-color-border-subtle)] border-2 border-[var(--appkit-color-border)]",
             badge: t("step1Title"),
-            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            badgeClass: "bg-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]",
             desc: t("diagramStep1Desc"),
         },
         {

package/dist/features/about/components/HowPreOrdersWorkView.js CHANGED Viewed

@@ -52,9 +52,9 @@ export async function HowPreOrdersWorkView({} = {}) {
     const DIAGRAM_STEPS = [
         {
             emoji: "🔍",
-            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            circleClass: "bg-[var(--appkit-color-border-subtle)] border-2 border-[var(--appkit-color-border)]",
             badge: t("step1Title"),
-            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            badgeClass: "bg-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]",
             desc: t("diagramStep1Desc"),
         },
         {

package/dist/features/about/components/HowReviewsWorkView.js CHANGED Viewed

@@ -44,9 +44,9 @@ export async function HowReviewsWorkView({} = {}) {
     const DIAGRAM_STEPS = [
         {
             emoji: "📦",
-            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            circleClass: "bg-[var(--appkit-color-border-subtle)] border-2 border-[var(--appkit-color-border)]",
             badge: t("diagramStep1Badge"),
-            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            badgeClass: "bg-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]",
             desc: t("diagramStep1Desc"),
         },
         {

package/dist/features/about/components/PublicProfileView.js CHANGED Viewed

@@ -16,7 +16,7 @@ const __P = {
     p4: "p-4",
     p6: "p-6",
 };
-const CLS_EMPTY_ICON = "w-10 h-10 mx-auto mb-3 text-neutral-300 dark:text-neutral-600 ";
+const CLS_EMPTY_ICON = "w-10 h-10 mx-auto mb-3 text-neutral-300 dark:text-[var(--appkit-color-text-muted)] ";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -92,7 +92,7 @@ export async function PublicProfileView({ userId, }) {
     const storeDescription = store?.storeDescription ?? pub?.storeDescription;
     const profileHeroCtx = { displayName, photoURL, memberSince, isSeller, storeSlug, flex, page };
     const statItems = buildProfileStatItems(t, { listingCount, reviewCount, itemsSold, auctionsWon, totalOrders, isSeller });
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [renderProfileHero(t, profileHeroCtx), _jsxs(Stack, { gap: "2xl", className: `${page.container.md}`, paddingY: "y-3xl", children: [renderProfileStatsRow(flex, statItems), renderProfileBioSection(pub), renderStoreDescriptionSection(isSeller, storeSlug ?? null, storeDescription ?? null, storeName, t), renderProfileListingsSection(t, products, storeSlug ?? null), renderAuthoredReviewsSection(t, reviewsAuthored, displayName), reviewsReceivedAsBuyer.length > 0 && renderBuyerReceivedReviewsSection(t, reviewsReceivedAsBuyer), _jsx(Row, { justify: "center", padding: "t-xs", children: _jsxs(Link, { href: String(ROUTES.HOME), className: "text-sm text-zinc-400 dark:text-zinc-400 hover:text-neutral-600 dark:hover:text-zinc-300", children: ["\u2190 ", t("backHome")] }) })] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [renderProfileHero(t, profileHeroCtx), _jsxs(Stack, { gap: "2xl", className: `${page.container.md}`, paddingY: "y-3xl", children: [renderProfileStatsRow(flex, statItems), renderProfileBioSection(pub), renderStoreDescriptionSection(isSeller, storeSlug ?? null, storeDescription ?? null, storeName, t), renderProfileListingsSection(t, products, storeSlug ?? null), renderAuthoredReviewsSection(t, reviewsAuthored, displayName), reviewsReceivedAsBuyer.length > 0 && renderBuyerReceivedReviewsSection(t, reviewsReceivedAsBuyer), _jsx(Row, { justify: "center", padding: "t-xs", children: _jsxs(Link, { href: String(ROUTES.HOME), className: "text-sm text-[var(--appkit-color-text-faint)] hover:text-[var(--appkit-color-text-muted)]", children: ["\u2190 ", t("backHome")] }) })] })] }));
 }
 function buildProfileStatItems(t, ctx) {
     const { listingCount, reviewCount, itemsSold, auctionsWon, totalOrders, isSeller } = ctx;
@@ -120,7 +120,7 @@ function renderProfileStatsRow(flex, statItems) {
 function renderProfileBioSection(pub) {
     if (!pub?.bio && !pub?.location && !pub?.website)
         return null;
-    return (_jsx(Section, { children: _jsxs(Stack, { gap: "sm", className: `${__P.p6}`, border: "default", surface: "muted", rounded: "2xl", children: [pub.bio && _jsx(Text, { className: "leading-relaxed text-neutral-700", size: "sm", children: pub.bio }), _jsxs(Row, { gap: "md", wrap: true, children: [pub.location && _jsxs(Span, { layout: "flex", gap: "xs", size: "sm", className: "text-neutral-500 dark:text-neutral-400", children: [_jsx(MapPin, { className: "w-4 h-4" }), pub.location] }), pub.website && _jsxs(Anchor, { href: pub.website, layout: "inline-flex", className: "gap-[0.375rem]", children: [_jsx(Globe, { className: "w-4 h-4" }), _jsx(Span, { size: "sm", children: pub.website.replace(/^https?:\/\//, "") })] })] })] }) }));
+    return (_jsx(Section, { children: _jsxs(Stack, { gap: "sm", className: `${__P.p6}`, border: "default", surface: "muted", rounded: "2xl", children: [pub.bio && _jsx(Text, { className: "leading-relaxed text-neutral-700", size: "sm", children: pub.bio }), _jsxs(Row, { gap: "md", wrap: true, children: [pub.location && _jsxs(Span, { layout: "flex", gap: "xs", size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: [_jsx(MapPin, { className: "w-4 h-4" }), pub.location] }), pub.website && _jsxs(Anchor, { href: pub.website, layout: "inline-flex", className: "gap-[0.375rem]", children: [_jsx(Globe, { className: "w-4 h-4" }), _jsx(Span, { size: "sm", children: pub.website.replace(/^https?:\/\//, "") })] })] })] }) }));
 }
 function renderStoreDescriptionSection(isSeller, storeSlug, storeDescription, storeName, t) {
     if (!isSeller || !storeSlug || !storeDescription)

package/dist/features/about/components/SecurityPrivacyView.js CHANGED Viewed

@@ -87,9 +87,9 @@ export async function SecurityPrivacyView({} = {}) {
     const DIAGRAM_STEPS = [
         {
             emoji: "🖥️",
-            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            circleClass: "bg-[var(--appkit-color-border-subtle)] border-2 border-[var(--appkit-color-border)]",
             badge: t("diagramStep1Badge"),
-            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            badgeClass: "bg-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]",
             desc: t("diagramStep1Desc"),
         },
         {

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

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

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

@@ -74,5 +74,5 @@ export function AddressesIndexListing({ onAdd, onEdit, onDelete, }) {
         },
     });
     return (_jsxs(Stack, { gap: "md", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by address, postcode or label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, view: view, onViewChange: (v) => { if (v === "table")
-                    return; setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { className: "sm:px-[1rem]", padding: "x-sm", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 animate-pulse p-4 space-y-2", children: [_jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" })] }, i))) })) : addresses.length === 0 ? (_jsx(Text, { paddingY: "xl", color: "muted", size: "sm", align: "center", children: table.get(TABLE_KEYS.QUERY) ? `No addresses matching "${table.get(TABLE_KEYS.QUERY)}"` : "No saved addresses." })) : (_jsx(AddressBook, { addresses: addresses, onEdit: onEdit, onDelete: onDelete, onAdd: onAdd })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(AddressFilters, { table: pendingTable }) })] }));
+                    return; setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { className: "sm:px-[1rem]", padding: "x-sm", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-[var(--appkit-color-border)] animate-pulse p-4 space-y-2", children: [_jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" })] }, i))) })) : addresses.length === 0 ? (_jsx(Text, { paddingY: "xl", color: "muted", size: "sm", align: "center", children: table.get(TABLE_KEYS.QUERY) ? `No addresses matching "${table.get(TABLE_KEYS.QUERY)}"` : "No saved addresses." })) : (_jsx(AddressBook, { addresses: addresses, onEdit: onEdit, onDelete: onDelete, onAdd: onAdd })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(AddressFilters, { table: pendingTable }) })] }));
 }

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

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Heading, Row, Span } from "../../../ui";
 const CLS_DOT_ON = "bg-success-surface";
 export function ChatWindow({ labels = {}, isConnected = true, isLoading = false, error, renderLoadingIndicator, renderMessages, renderInput, className = "", }) {
-    return (_jsxs(Div, { className: className, children: [_jsxs(Row, { justify: "between", className: "border-b border-neutral-200 dark:border-neutral-700 mb-3", padding: "b-sm", children: [_jsxs(Row, { gap: "xs", children: [labels.title && _jsx(Heading, { level: 4, children: labels.title }), _jsx(Span, { className: `w-2 h-2 ${isConnected ? CLS_DOT_ON : "bg-[var(--appkit-color-text-faint)]"}`, rounded: "full", "aria-label": isConnected ? labels.connected : labels.disconnected })] }), isLoading && (renderLoadingIndicator?.() ?? null)] }), error ?? null, renderMessages(), renderInput()] }));
+    return (_jsxs(Div, { className: className, children: [_jsxs(Row, { justify: "between", className: "border-b border-[var(--appkit-color-border)] mb-3", padding: "b-sm", children: [_jsxs(Row, { gap: "xs", children: [labels.title && _jsx(Heading, { level: 4, children: labels.title }), _jsx(Span, { className: `w-2 h-2 ${isConnected ? CLS_DOT_ON : "bg-[var(--appkit-color-text-faint)]"}`, rounded: "full", "aria-label": isConnected ? labels.connected : labels.disconnected })] }), isLoading && (renderLoadingIndicator?.() ?? null)] }), error ?? null, renderMessages(), renderInput()] }));
 }