@jant/core 0.3.24 → 0.3.26

package/dist/ui/dash/settings/AccountContent.js

@@ -0,0 +1,209 @@
+/**
+ * Account settings: profile + password change forms
+ */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+import { SettingsNav } from "./SettingsNav.js";
+export function AccountContent({ userName }) {
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    const profileSignals = JSON.stringify({
+        userName
+    }).replace(/</g, "\\u003c");
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("h1", {
+                class: "text-2xl font-semibold mb-2",
+                children: $__i18n._({
+                    id: "Tz0i8g",
+                    message: "Settings"
+                })
+            }),
+            /*#__PURE__*/ _jsx(SettingsNav, {
+                currentTab: "account"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                class: "flex flex-col gap-6 max-w-lg",
+                children: [
+                    /*#__PURE__*/ _jsxs("form", {
+                        "data-signals": profileSignals,
+                        "data-on:submit__prevent": "@post('/dash/settings/account')",
+                        "data-indicator": "_profileLoading",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                class: "card",
+                                children: [
+                                    /*#__PURE__*/ _jsx("header", {
+                                        children: /*#__PURE__*/ _jsx("h2", {
+                                            children: $__i18n._({
+                                                id: "vERlcd",
+                                                message: "Profile"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx("section", {
+                                        class: "flex flex-col gap-4",
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            class: "field",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("label", {
+                                                    class: "label",
+                                                    children: $__i18n._({
+                                                        id: "6YtxFj",
+                                                        message: "Name"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    type: "text",
+                                                    "data-bind": "userName",
+                                                    class: "input",
+                                                    required: true
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("button", {
+                                type: "submit",
+                                class: "btn mt-4",
+                                "data-attr:disabled": "$_profileLoading",
+                                children: [
+                                    /*#__PURE__*/ _jsx("svg", {
+                                        "data-show": "$_profileLoading",
+                                        style: "display:none",
+                                        class: "animate-spin size-4",
+                                        xmlns: "http://www.w3.org/2000/svg",
+                                        viewBox: "0 0 24 24",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        "stroke-width": "2",
+                                        "stroke-linecap": "round",
+                                        "stroke-linejoin": "round",
+                                        role: "status",
+                                        children: /*#__PURE__*/ _jsx("path", {
+                                            d: "M21 12a9 9 0 1 1-6.219-8.56"
+                                        })
+                                    }),
+                                    $__i18n._({
+                                        id: "ssqvZi",
+                                        message: "Save Profile"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("form", {
+                        "data-signals": "{currentPassword: '', newPassword: '', confirmPassword: ''}",
+                        "data-on:submit__prevent": "@post('/dash/settings/password')",
+                        "data-indicator": "_passwordLoading",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                class: "card",
+                                children: [
+                                    /*#__PURE__*/ _jsx("header", {
+                                        children: /*#__PURE__*/ _jsx("h2", {
+                                            children: $__i18n._({
+                                                id: "VhMDMg",
+                                                message: "Change Password"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs("section", {
+                                        class: "flex flex-col gap-4",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                class: "field",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("label", {
+                                                        class: "label",
+                                                        children: $__i18n._({
+                                                            id: "DCKkhU",
+                                                            message: "Current Password"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "password",
+                                                        "data-bind": "currentPassword",
+                                                        class: "input",
+                                                        required: true,
+                                                        autocomplete: "current-password"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                class: "field",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("label", {
+                                                        class: "label",
+                                                        children: $__i18n._({
+                                                            id: "7vhWI8",
+                                                            message: "New Password"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "password",
+                                                        "data-bind": "newPassword",
+                                                        class: "input",
+                                                        required: true,
+                                                        minlength: 8,
+                                                        autocomplete: "new-password"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                class: "field",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("label", {
+                                                        class: "label",
+                                                        children: $__i18n._({
+                                                            id: "yjkELF",
+                                                            message: "Confirm New Password"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "password",
+                                                        "data-bind": "confirmPassword",
+                                                        class: "input",
+                                                        required: true,
+                                                        minlength: 8,
+                                                        autocomplete: "new-password"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("button", {
+                                type: "submit",
+                                class: "btn mt-4",
+                                "data-attr:disabled": "$_passwordLoading",
+                                children: [
+                                    /*#__PURE__*/ _jsx("svg", {
+                                        "data-show": "$_passwordLoading",
+                                        style: "display:none",
+                                        class: "animate-spin size-4",
+                                        xmlns: "http://www.w3.org/2000/svg",
+                                        viewBox: "0 0 24 24",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        "stroke-width": "2",
+                                        "stroke-linecap": "round",
+                                        "stroke-linejoin": "round",
+                                        role: "status",
+                                        children: /*#__PURE__*/ _jsx("path", {
+                                            d: "M21 12a9 9 0 1 1-6.219-8.56"
+                                        })
+                                    }),
+                                    $__i18n._({
+                                        id: "VhMDMg",
+                                        message: "Change Password"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/dash/settings/AppearanceContent.js

@@ -0,0 +1,259 @@
+/**
+ * Appearance settings: color theme picker + custom CSS form
+ */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+import { SettingsNav } from "./SettingsNav.js";
+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."
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export function AppearanceContent({ themes, currentThemeId, fontThemes, currentFontThemeId, customCSS }) {
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    const themeSignals = JSON.stringify({
+        theme: currentThemeId
+    }).replace(/</g, "\\u003c");
+    const cssSignals = JSON.stringify({
+        customCSS
+    }).replace(/</g, "\\u003c");
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("h1", {
+                class: "text-2xl font-semibold mb-2",
+                children: $__i18n._({
+                    id: "Tz0i8g",
+                    message: "Settings"
+                })
+            }),
+            /*#__PURE__*/ _jsx(SettingsNav, {
+                currentTab: "appearance"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                "data-signals": themeSignals,
+                "data-on:change": "@post('/dash/settings/appearance')",
+                class: "max-w-3xl mb-8",
+                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))
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                "data-signals": JSON.stringify({
+                    fontTheme: currentFontThemeId
+                }).replace(/</g, "\\u003c"),
+                "data-on:change": "@post('/dash/settings/font-theme')",
+                class: "max-w-3xl",
+                children: /*#__PURE__*/ _jsxs("fieldset", {
+                    children: [
+                        /*#__PURE__*/ _jsx("legend", {
+                            class: "text-lg font-semibold",
+                            children: $__i18n._({
+                                id: "M2kIWU",
+                                message: "Font theme"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            class: "text-sm text-muted-foreground mb-4",
+                            children: $__i18n._({
+                                id: "3SAro+",
+                                message: "Choose a font for your site. All options use system fonts for fast loading."
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            class: "flex flex-col gap-2",
+                            children: fontThemes.map((ft)=>/*#__PURE__*/ _jsxs("label", {
+                                    class: `flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${ft.id === currentFontThemeId ? "border-primary" : "border-border"}`,
+                                    "data-class:border-primary": `$fontTheme === '${ft.id}'`,
+                                    "data-class:border-border": `$fontTheme !== '${ft.id}'`,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("input", {
+                                            type: "radio",
+                                            name: "fontTheme",
+                                            value: ft.id,
+                                            "data-bind": "fontTheme",
+                                            checked: ft.id === currentFontThemeId || undefined,
+                                            class: "mt-1"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    class: "font-medium",
+                                                    children: ft.name
+                                                }),
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    class: "text-sm text-muted-foreground",
+                                                    children: ft.description
+                                                }),
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    class: "mt-1 text-sm",
+                                                    style: `font-family:${ft.fontFamily}`,
+                                                    children: [
+                                                        "The quick brown fox jumps over the lazy dog.",
+                                                        " ",
+                                                        "敏捷的棕色狐狸跳过了懒狗。"
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }, ft.id))
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs("form", {
+                "data-signals": cssSignals,
+                "data-on:submit__prevent": "@post('/dash/settings/custom-css')",
+                "data-indicator": "_cssLoading",
+                class: "max-w-3xl mt-8",
+                children: [
+                    /*#__PURE__*/ _jsxs("fieldset", {
+                        children: [
+                            /*#__PURE__*/ _jsx("legend", {
+                                class: "text-lg font-semibold",
+                                children: $__i18n._({
+                                    id: "9+vGLh",
+                                    message: "Custom CSS"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                class: "text-sm text-muted-foreground mb-4",
+                                children: $__i18n._({
+                                    id: "vmQmHx",
+                                    message: "Add custom CSS to override any styles. Use data attributes like [data-page], [data-post], [data-format] to target specific elements."
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("textarea", {
+                                "data-bind": "customCSS",
+                                class: "textarea font-mono text-sm min-h-32",
+                                rows: 8,
+                                placeholder: $__i18n._({
+                                    id: "wc+17X",
+                                    message: "/* Your custom CSS here */"
+                                }),
+                                children: customCSS
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("button", {
+                        type: "submit",
+                        class: "btn mt-4",
+                        "data-attr:disabled": "$_cssLoading",
+                        children: [
+                            /*#__PURE__*/ _jsx("svg", {
+                                "data-show": "$_cssLoading",
+                                style: "display:none",
+                                class: "animate-spin size-4",
+                                xmlns: "http://www.w3.org/2000/svg",
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                stroke: "currentColor",
+                                "stroke-width": "2",
+                                "stroke-linecap": "round",
+                                "stroke-linejoin": "round",
+                                role: "status",
+                                children: /*#__PURE__*/ _jsx("path", {
+                                    d: "M21 12a9 9 0 1 1-6.219-8.56"
+                                })
+                            }),
+                            $__i18n._({
+                                id: "NU2Fqi",
+                                message: "Save CSS"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}