@jant/core 0.2.17 → 0.2.18

package/dist/routes/dash/appearance.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+/**
+ * Dashboard Appearance Routes
+ */ import { Hono } from "hono";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+import { DashLayout } from "../../theme/layouts/index.js";
+import { sse } from "../../lib/sse.js";
+import { getSiteName } from "../../lib/config.js";
+import { SETTINGS_KEYS } from "../../lib/constants.js";
+import { getAvailableThemes } from "../../lib/theme.js";
+export const appearanceRoutes = new Hono();
+function ThemeCard({ theme, selected }) {
+    const expr = `$theme === '${theme.id}'`;
+    const { preview } = theme;
+    return /*#__PURE__*/ _jsx("label", {
+        class: `block cursor-pointer rounded-lg border overflow-hidden transition-colors ${selected ? "border-primary" : "border-border"}`,
+        "data-class:border-primary": expr,
+        "data-class:border-border": `$theme !== '${theme.id}'`,
+        children: /*#__PURE__*/ _jsxs("div", {
+            class: "grid grid-cols-2",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    class: "p-5",
+                    style: `background-color:${preview.lightBg};color:${preview.lightText}`,
+                    children: [
+                        /*#__PURE__*/ _jsx("input", {
+                            type: "radio",
+                            name: "theme",
+                            value: theme.id,
+                            "data-bind": "theme",
+                            checked: selected || undefined,
+                            class: "mb-1"
+                        }),
+                        /*#__PURE__*/ _jsx("h3", {
+                            class: "font-bold text-lg",
+                            children: theme.name
+                        }),
+                        /*#__PURE__*/ _jsxs("p", {
+                            class: "text-sm mt-2 leading-relaxed",
+                            children: [
+                                "This is the ",
+                                theme.name,
+                                " theme in light mode. Links",
+                                " ",
+                                /*#__PURE__*/ _jsx("a", {
+                                    tabIndex: -1,
+                                    class: "underline",
+                                    style: `color:${preview.lightLink}`,
+                                    children: "look like this"
+                                }),
+                                ". We'll show the correct light or dark mode based on your visitor's settings."
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    class: "p-5",
+                    style: `background-color:${preview.darkBg};color:${preview.darkText}`,
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            class: "font-bold text-lg",
+                            children: theme.name
+                        }),
+                        /*#__PURE__*/ _jsxs("p", {
+                            class: "text-sm mt-2 leading-relaxed",
+                            children: [
+                                "This is the ",
+                                theme.name,
+                                " theme in dark mode. Links",
+                                " ",
+                                /*#__PURE__*/ _jsx("a", {
+                                    tabIndex: -1,
+                                    class: "underline",
+                                    style: `color:${preview.darkLink}`,
+                                    children: "look like this"
+                                }),
+                                ". We'll show the correct light or dark mode based on your visitor's settings."
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function AppearanceContent({ themes, currentThemeId }) {
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    const signals = JSON.stringify({
+        theme: currentThemeId
+    }).replace(/</g, "\\u003c");
+    return /*#__PURE__*/ _jsx("div", {
+        "data-signals": signals,
+        "data-on:change": "@post('/dash/appearance')",
+        class: "max-w-3xl",
+        children: /*#__PURE__*/ _jsxs("fieldset", {
+            children: [
+                /*#__PURE__*/ _jsx("legend", {
+                    class: "text-lg font-semibold",
+                    children: $__i18n._({
+                        id: "rFmBG3",
+                        message: "Color theme"
+                    })
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    class: "text-sm text-muted-foreground mb-4",
+                    children: $__i18n._({
+                        id: "07Epll",
+                        message: "This will theme both your site and your dashboard. All color themes support dark mode."
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    class: "flex flex-col gap-4",
+                    children: themes.map((theme)=>/*#__PURE__*/ _jsx(ThemeCard, {
+                            theme: theme,
+                            selected: theme.id === currentThemeId
+                        }, theme.id))
+                })
+            ]
+        })
+    });
+}
+// Appearance page
+appearanceRoutes.get("/", async (c)=>{
+    const { settings } = c.var.services;
+    const siteName = await getSiteName(c);
+    const currentThemeId = await settings.get(SETTINGS_KEYS.THEME) ?? "default";
+    const themes = getAvailableThemes(c.var.config);
+    const saved = c.req.query("saved") !== undefined;
+    return c.html(/*#__PURE__*/ _jsx(DashLayout, {
+        c: c,
+        title: "Appearance",
+        siteName: siteName,
+        currentPath: "/dash/appearance",
+        toast: saved ? {
+            message: "Theme saved successfully."
+        } : undefined,
+        children: /*#__PURE__*/ _jsx(AppearanceContent, {
+            themes: themes,
+            currentThemeId: currentThemeId
+        })
+    }));
+});
+// Save theme
+appearanceRoutes.post("/", async (c)=>{
+    const body = await c.req.json();
+    const { settings } = c.var.services;
+    const themes = getAvailableThemes(c.var.config);
+    // Validate theme ID
+    const validTheme = themes.find((t)=>t.id === body.theme);
+    if (!validTheme) {
+        return sse(c, async (stream)=>{
+            await stream.toast("Invalid theme selected.", "error");
+        });
+    }
+    if (validTheme.id === "default") {
+        await settings.remove(SETTINGS_KEYS.THEME);
+    } else {
+        await settings.set(SETTINGS_KEYS.THEME, validTheme.id);
+    }
+    // Full page reload to apply the new theme CSS
+    return sse(c, async (stream)=>{
+        await stream.redirect("/dash/appearance?saved");
+    });
+});

package/dist/routes/dash/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../src/routes/dash/settings.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AASjD,KAAK,GAAG,GAAG;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,cAAc,kDAAkB,CAAC"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../src/routes/dash/settings.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAKjD,KAAK,GAAG,GAAG;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,cAAc,kDAAkB,CAAC"}

package/dist/routes/dash/settings.js

@@ -5,9 +5,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-
 import { useLingui as $_useLingui } from "@jant/core/i18n";
 import { DashLayout } from "../../theme/layouts/index.js";
 import { sse } from "../../lib/sse.js";
-import { getSiteName, getSiteDescription, getSiteLanguage } from "../../lib/config.js";
+import { getSiteLanguage, getConfigFallback } from "../../lib/config.js";
 export const settingsRoutes = new Hono();
-function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
+function SettingsContent({ siteName, siteDescription, siteLanguage, siteNameFallback, siteDescriptionFallback }) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     const generalSignals = JSON.stringify({
         siteName,
@@ -23,17 +23,6 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
                     message: "Settings"
                 })
             }),
-            saved && /*#__PURE__*/ _jsx("div", {
-                id: "settings-saved-toast",
-                class: "alert mb-4 max-w-lg transition-opacity duration-300",
-                "data-init": `console.log('[toast] init fired at', Date.now()); history.replaceState({}, '', '/dash/settings'); setTimeout(() => { console.log('[toast] hiding at', Date.now()); const el = document.getElementById('settings-saved-toast'); if (el) { el.style.opacity = '0'; setTimeout(() => el.remove(), 300) } }, 3000)`,
-                children: /*#__PURE__*/ _jsx("h2", {
-                    children: $__i18n._({
-                        id: "T0bsor",
-                        message: "Settings saved successfully."
-                    })
-                })
-            }),
             /*#__PURE__*/ _jsxs("div", {
                 class: "flex flex-col gap-6 max-w-lg",
                 children: [
@@ -41,9 +30,6 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
                         "data-signals": generalSignals,
                         "data-on:submit__prevent": "@post('/dash/settings')",
                         children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                id: "settings-message"
-                            }),
                             /*#__PURE__*/ _jsxs("div", {
                                 class: "card",
                                 children: [
@@ -72,7 +58,7 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
                                                         type: "text",
                                                         "data-bind": "siteName",
                                                         class: "input",
-                                                        required: true
+                                                        placeholder: siteNameFallback
                                                     })
                                                 ]
                                             }),
@@ -90,6 +76,7 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
                                                         "data-bind": "siteDescription",
                                                         class: "textarea",
                                                         rows: 3,
+                                                        placeholder: siteDescriptionFallback,
                                                         children: siteDescription
                                                     })
                                                 ]
@@ -145,9 +132,6 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
                         "data-signals": "{currentPassword: '', newPassword: '', confirmPassword: ''}",
                         "data-on:submit__prevent": "@post('/dash/settings/password')",
                         children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                id: "password-message"
-                            }),
                             /*#__PURE__*/ _jsxs("div", {
                                 class: "card",
                                 children: [
@@ -242,40 +226,57 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
 }
 // Settings page
 settingsRoutes.get("/", async (c)=>{
-    const siteName = await getSiteName(c);
-    const siteDescription = await getSiteDescription(c);
+    const { settings } = c.var.services;
+    // Fetch raw DB values (null if not set)
+    const dbSiteName = await settings.get("SITE_NAME");
+    const dbSiteDescription = await settings.get("SITE_DESCRIPTION");
     const siteLanguage = await getSiteLanguage(c);
+    // Fallback values (ENV > Default) for placeholders
+    const siteNameFallback = getConfigFallback(c, "SITE_NAME");
+    const siteDescriptionFallback = getConfigFallback(c, "SITE_DESCRIPTION");
     const saved = c.req.query("saved") !== undefined;
     return c.html(/*#__PURE__*/ _jsx(DashLayout, {
         c: c,
         title: "Settings",
-        siteName: siteName,
+        siteName: dbSiteName || siteNameFallback,
         currentPath: "/dash/settings",
+        toast: saved ? {
+            message: "Settings saved successfully."
+        } : undefined,
         children: /*#__PURE__*/ _jsx(SettingsContent, {
-            siteName: siteName,
-            siteDescription: siteDescription,
+            siteName: dbSiteName || "",
+            siteDescription: dbSiteDescription || "",
             siteLanguage: siteLanguage,
-            saved: saved
+            siteNameFallback: siteNameFallback,
+            siteDescriptionFallback: siteDescriptionFallback
         })
     }));
 });
 // Update settings
 settingsRoutes.post("/", async (c)=>{
     const body = await c.req.json();
-    const oldLanguage = await c.var.services.settings.get("SITE_LANGUAGE") ?? "en";
-    await c.var.services.settings.setMany({
-        SITE_NAME: body.siteName,
-        SITE_DESCRIPTION: body.siteDescription,
-        SITE_LANGUAGE: body.siteLanguage
-    });
+    const { settings } = c.var.services;
+    const oldLanguage = await settings.get("SITE_LANGUAGE") ?? "en";
+    // For text fields: empty = remove from DB (fall back to ENV > Default)
+    if (body.siteName.trim()) {
+        await settings.set("SITE_NAME", body.siteName.trim());
+    } else {
+        await settings.remove("SITE_NAME");
+    }
+    if (body.siteDescription.trim()) {
+        await settings.set("SITE_DESCRIPTION", body.siteDescription.trim());
+    } else {
+        await settings.remove("SITE_DESCRIPTION");
+    }
+    // Language always has a value from the select
+    await settings.set("SITE_LANGUAGE", body.siteLanguage);
     const languageChanged = oldLanguage !== body.siteLanguage;
     return sse(c, async (stream)=>{
         if (languageChanged) {
             // Language changed - full reload needed to update all UI text
             await stream.redirect("/dash/settings?saved");
         } else {
-            // No language change - show inline success message
-            await stream.patchElements('<div id="settings-message"><div class="alert mb-4 transition-opacity duration-300" data-init="setTimeout(() => { el.style.opacity = \'0\'; setTimeout(() => el.remove(), 300) }, 3000)"><h2>Settings saved successfully.</h2></div></div>');
+            await stream.toast("Settings saved successfully.");
         }
     });
 });
@@ -284,7 +285,7 @@ settingsRoutes.post("/password", async (c)=>{
     const body = await c.req.json();
     if (body.newPassword !== body.confirmPassword) {
         return sse(c, async (stream)=>{
-            await stream.patchElements('<div id="password-message"><div class="alert-destructive mb-4"><h2>Passwords do not match.</h2></div></div>');
+            await stream.toast("Passwords do not match.", "error");
         });
     }
     try {
@@ -298,11 +299,11 @@ settingsRoutes.post("/password", async (c)=>{
         });
     } catch  {
         return sse(c, async (stream)=>{
-            await stream.patchElements('<div id="password-message"><div class="alert-destructive mb-4"><h2>Current password is incorrect.</h2></div></div>');
+            await stream.toast("Current password is incorrect.", "error");
         });
     }
     return sse(c, async (stream)=>{
-        await stream.patchElements('<div id="password-message"><div class="alert mb-4"><h2>Password changed successfully.</h2></div></div>');
+        await stream.toast("Password changed successfully.");
         await stream.patchSignals({
             currentPassword: "",
             newPassword: "",

package/dist/services/settings.d.ts

@@ -10,6 +10,7 @@ export interface SettingsService {
     getAll(): Promise<Record<string, string>>;
     set(key: SettingsKey, value: string): Promise<void>;
     setMany(entries: Partial<Record<SettingsKey, string>>): Promise<void>;
+    remove(key: SettingsKey): Promise<void>;
     isOnboardingComplete(): Promise<boolean>;
     completeOnboarding(): Promise<void>;
 }

package/dist/services/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/services/settings.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,GAAG,CAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,oBAAoB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAED,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,QAAQ,GAAG,eAAe,CA6DnE"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/services/settings.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,GAAG,CAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,oBAAoB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAED,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,QAAQ,GAAG,eAAe,CAiEnE"}

package/dist/services/settings.js

@@ -34,6 +34,9 @@ export function createSettingsService(db) {
                 }
             });
         },
+        async remove (key) {
+            await db.delete(settings).where(eq(settings.key, key));
+        },
         async setMany (entries) {
             const timestamp = now();
             const keys = Object.keys(entries);

package/dist/theme/color-themes.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Built-in Color Themes
+ *
+ * Each theme defines CSS variable overrides for light and dark modes,
+ * plus preview colors for the theme picker UI.
+ */
+/**
+ * A color theme definition with light and dark mode CSS variable overrides.
+ */
+export interface ColorTheme {
+    /** Stored in DB settings, e.g. "beach" */
+    id: string;
+    /** Display name, e.g. "Beach" */
+    name: string;
+    /** CSS variable overrides for :root (light mode) */
+    light: Record<string, string>;
+    /** CSS variable overrides for .dark (dark mode) */
+    dark: Record<string, string>;
+    /** Preview colors (hex) for theme picker cards */
+    preview: {
+        lightBg: string;
+        lightText: string;
+        lightLink: string;
+        darkBg: string;
+        darkText: string;
+        darkLink: string;
+    };
+}
+export declare const BUILTIN_COLOR_THEMES: ColorTheme[];
+//# sourceMappingURL=color-themes.d.ts.map

package/dist/theme/color-themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-themes.d.ts","sourceRoot":"","sources":["../../src/theme/color-themes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,kDAAkD;IAClD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AA2FD,eAAO,MAAM,oBAAoB,EAAE,UAAU,EAyM5C,CAAC"}

package/dist/theme/color-themes.js

@@ -0,0 +1,268 @@
+/**
+ * Built-in Color Themes
+ *
+ * Each theme defines CSS variable overrides for light and dark modes,
+ * plus preview colors for the theme picker UI.
+ */ /**
+ * A color theme definition with light and dark mode CSS variable overrides.
+ */ /**
+ * Create a comprehensive color theme from key colors.
+ * Derives card, popover, muted, secondary, accent, and sidebar variables.
+ */ function defineTheme(opts) {
+    const { light, dark } = opts;
+    return {
+        id: opts.id,
+        name: opts.name,
+        preview: opts.preview,
+        light: {
+            "--background": light.bg,
+            "--foreground": light.fg,
+            "--card": light.bg,
+            "--card-foreground": light.fg,
+            "--popover": light.bg,
+            "--popover-foreground": light.fg,
+            "--primary": light.primary,
+            "--primary-foreground": light.primaryFg,
+            "--secondary": light.muted,
+            "--secondary-foreground": light.fg,
+            "--muted": light.muted,
+            "--muted-foreground": light.mutedFg,
+            "--accent": light.muted,
+            "--accent-foreground": light.fg,
+            "--border": light.border,
+            "--input": light.border,
+            "--ring": light.primary,
+            "--sidebar": light.bg,
+            "--sidebar-foreground": light.fg,
+            "--sidebar-primary": light.primary,
+            "--sidebar-primary-foreground": light.primaryFg,
+            "--sidebar-accent": light.muted,
+            "--sidebar-accent-foreground": light.fg,
+            "--sidebar-border": light.border,
+            "--sidebar-ring": light.primary
+        },
+        dark: {
+            "--background": dark.bg,
+            "--foreground": dark.fg,
+            "--card": dark.bg,
+            "--card-foreground": dark.fg,
+            "--popover": dark.bg,
+            "--popover-foreground": dark.fg,
+            "--primary": dark.primary,
+            "--primary-foreground": dark.primaryFg,
+            "--secondary": dark.muted,
+            "--secondary-foreground": dark.fg,
+            "--muted": dark.muted,
+            "--muted-foreground": dark.mutedFg,
+            "--accent": dark.muted,
+            "--accent-foreground": dark.fg,
+            "--border": dark.border,
+            "--input": dark.border,
+            "--ring": dark.primary,
+            "--sidebar": dark.bg,
+            "--sidebar-foreground": dark.fg,
+            "--sidebar-primary": dark.primary,
+            "--sidebar-primary-foreground": dark.primaryFg,
+            "--sidebar-accent": dark.muted,
+            "--sidebar-accent-foreground": dark.fg,
+            "--sidebar-border": dark.border,
+            "--sidebar-ring": dark.primary
+        }
+    };
+}
+export const BUILTIN_COLOR_THEMES = [
+    {
+        id: "default",
+        name: "Default",
+        light: {},
+        dark: {},
+        preview: {
+            lightBg: "#ffffff",
+            lightText: "#1e1e1e",
+            lightLink: "#1e1e1e",
+            darkBg: "#262626",
+            darkText: "#fafafa",
+            darkLink: "#eaeaea"
+        }
+    },
+    defineTheme({
+        id: "beach",
+        name: "Beach",
+        preview: {
+            lightBg: "#f9f3ea",
+            lightText: "#3d3527",
+            lightLink: "#2d6a59",
+            darkBg: "#2d4553",
+            darkText: "#e2d6c4",
+            darkLink: "#7cc5a2"
+        },
+        light: {
+            bg: "oklch(0.97 0.01 85)",
+            fg: "oklch(0.28 0.02 65)",
+            primary: "oklch(0.46 0.1 170)",
+            primaryFg: "oklch(0.98 0.005 85)",
+            muted: "oklch(0.93 0.015 85)",
+            mutedFg: "oklch(0.52 0.015 65)",
+            border: "oklch(0.88 0.018 85)"
+        },
+        dark: {
+            bg: "oklch(0.27 0.03 210)",
+            fg: "oklch(0.88 0.015 80)",
+            primary: "oklch(0.72 0.1 165)",
+            primaryFg: "oklch(0.22 0.03 210)",
+            muted: "oklch(0.33 0.025 210)",
+            mutedFg: "oklch(0.65 0.015 80)",
+            border: "oklch(0.38 0.02 210)"
+        }
+    }),
+    defineTheme({
+        id: "gameboy",
+        name: "Gameboy",
+        preview: {
+            lightBg: "#d3d7c0",
+            lightText: "#2b3326",
+            lightLink: "#466740",
+            darkBg: "#1b1f18",
+            darkText: "#a6b09a",
+            darkLink: "#6d9660"
+        },
+        light: {
+            bg: "oklch(0.87 0.03 130)",
+            fg: "oklch(0.25 0.04 140)",
+            primary: "oklch(0.4 0.08 145)",
+            primaryFg: "oklch(0.92 0.02 130)",
+            muted: "oklch(0.83 0.035 130)",
+            mutedFg: "oklch(0.48 0.03 140)",
+            border: "oklch(0.79 0.035 130)"
+        },
+        dark: {
+            bg: "oklch(0.18 0.02 140)",
+            fg: "oklch(0.78 0.025 130)",
+            primary: "oklch(0.6 0.08 145)",
+            primaryFg: "oklch(0.15 0.02 140)",
+            muted: "oklch(0.24 0.02 140)",
+            mutedFg: "oklch(0.58 0.02 130)",
+            border: "oklch(0.3 0.02 140)"
+        }
+    }),
+    defineTheme({
+        id: "grayscale",
+        name: "Grayscale",
+        preview: {
+            lightBg: "#efefef",
+            lightText: "#3a3a3a",
+            lightLink: "#555555",
+            darkBg: "#1e1e1e",
+            darkText: "#c8c8c8",
+            darkLink: "#999999"
+        },
+        light: {
+            bg: "oklch(0.96 0 0)",
+            fg: "oklch(0.3 0 0)",
+            primary: "oklch(0.4 0 0)",
+            primaryFg: "oklch(0.96 0 0)",
+            muted: "oklch(0.92 0 0)",
+            mutedFg: "oklch(0.55 0 0)",
+            border: "oklch(0.87 0 0)"
+        },
+        dark: {
+            bg: "oklch(0.18 0 0)",
+            fg: "oklch(0.82 0 0)",
+            primary: "oklch(0.7 0 0)",
+            primaryFg: "oklch(0.18 0 0)",
+            muted: "oklch(0.24 0 0)",
+            mutedFg: "oklch(0.6 0 0)",
+            border: "oklch(0.3 0 0)"
+        }
+    }),
+    defineTheme({
+        id: "halloween",
+        name: "Halloween",
+        preview: {
+            lightBg: "#f9f2e3",
+            lightText: "#352200",
+            lightLink: "#cc5500",
+            darkBg: "#1e1000",
+            darkText: "#dfc390",
+            darkLink: "#ff8c00"
+        },
+        light: {
+            bg: "oklch(0.97 0.015 75)",
+            fg: "oklch(0.25 0.04 55)",
+            primary: "oklch(0.6 0.2 50)",
+            primaryFg: "oklch(0.98 0.01 75)",
+            muted: "oklch(0.93 0.02 75)",
+            mutedFg: "oklch(0.5 0.025 55)",
+            border: "oklch(0.88 0.025 75)"
+        },
+        dark: {
+            bg: "oklch(0.16 0.03 50)",
+            fg: "oklch(0.85 0.025 75)",
+            primary: "oklch(0.72 0.19 55)",
+            primaryFg: "oklch(0.14 0.03 50)",
+            muted: "oklch(0.22 0.025 50)",
+            mutedFg: "oklch(0.62 0.02 75)",
+            border: "oklch(0.28 0.025 50)"
+        }
+    }),
+    defineTheme({
+        id: "notepad",
+        name: "Notepad",
+        preview: {
+            lightBg: "#fdfce8",
+            lightText: "#333333",
+            lightLink: "#2060b8",
+            darkBg: "#2a291a",
+            darkText: "#d2d2b8",
+            darkLink: "#6695cc"
+        },
+        light: {
+            bg: "oklch(0.985 0.018 95)",
+            fg: "oklch(0.27 0 0)",
+            primary: "oklch(0.5 0.17 260)",
+            primaryFg: "oklch(0.985 0.01 95)",
+            muted: "oklch(0.94 0.022 95)",
+            mutedFg: "oklch(0.52 0 0)",
+            border: "oklch(0.88 0.025 95)"
+        },
+        dark: {
+            bg: "oklch(0.2 0.02 90)",
+            fg: "oklch(0.87 0.015 95)",
+            primary: "oklch(0.65 0.14 260)",
+            primaryFg: "oklch(0.98 0.01 95)",
+            muted: "oklch(0.26 0.018 90)",
+            mutedFg: "oklch(0.62 0.012 95)",
+            border: "oklch(0.32 0.018 90)"
+        }
+    }),
+    defineTheme({
+        id: "sonnet",
+        name: "Sonnet",
+        preview: {
+            lightBg: "#f7eef5",
+            lightText: "#2e1e2c",
+            lightLink: "#9845c8",
+            darkBg: "#1d1428",
+            darkText: "#d4c2d0",
+            darkLink: "#c080fc"
+        },
+        light: {
+            bg: "oklch(0.97 0.012 325)",
+            fg: "oklch(0.25 0.02 310)",
+            primary: "oklch(0.55 0.2 300)",
+            primaryFg: "oklch(0.98 0.008 325)",
+            muted: "oklch(0.93 0.016 325)",
+            mutedFg: "oklch(0.52 0.015 310)",
+            border: "oklch(0.88 0.016 325)"
+        },
+        dark: {
+            bg: "oklch(0.18 0.025 300)",
+            fg: "oklch(0.87 0.012 325)",
+            primary: "oklch(0.72 0.18 300)",
+            primaryFg: "oklch(0.98 0.008 325)",
+            muted: "oklch(0.24 0.022 300)",
+            mutedFg: "oklch(0.62 0.012 325)",
+            border: "oklch(0.3 0.022 300)"
+        }
+    })
+];