@jant/core 0.3.36 → 0.3.38

package/src/ui/color-themes.ts

@@ -15,7 +15,7 @@ export interface ColorTheme {
   name: string;
   /** CSS variable overrides for :root (light mode) */
   light: Record<string, string>;
-  /** CSS variable overrides for .dark (dark mode) */
+  /** CSS variable overrides for dark mode (prefers-color-scheme: dark) */
   dark: Record<string, string>;
   /** Preview colors (hex) for theme picker cards */
   preview: {
@@ -28,32 +28,55 @@ export interface ColorTheme {
   };
 }
 
+interface ThemeModeColors {
+  bg: string;
+  fg: string;
+  primary: string;
+  primaryFg: string;
+  muted: string;
+  mutedFg: string;
+  border: string;
+  /** Destructive action color (defaults to BaseCoat red) */
+  destructive?: string;
+  /** Success indicator color (defaults to preset green) */
+  success?: string;
+  /** Search highlight background */
+  searchMarkBg?: string;
+  /** Search highlight text color */
+  searchMarkColor?: string;
+  /** Admin dashboard background */
+  dashBg?: string;
+}
+
+/** Default destructive/success colors that harmonize with most themes */
+const DEFAULTS = {
+  light: {
+    destructive: "oklch(0.577 0.245 27.325)",
+    success: "oklch(0.518 0.16 145.071)",
+    searchMarkBg: "oklch(0.92 0.14 90 / 0.55)",
+    searchMarkColor: "oklch(0.35 0.09 70)",
+    dashBg: "oklch(0.97 0.005 80)",
+  },
+  dark: {
+    destructive: "oklch(0.704 0.191 22.216)",
+    success: "oklch(0.627 0.194 149.214)",
+    searchMarkBg: "oklch(0.45 0.1 85 / 0.5)",
+    searchMarkColor: "oklch(0.92 0.08 90)",
+    dashBg: "oklch(0.2 0.005 80)",
+  },
+};
+
 /**
  * Create a comprehensive color theme from key colors.
  * Derives card, popover, muted, secondary, accent, and sidebar variables.
+ * Also sets --destructive, --success, --search-mark-*, and --dash-bg.
  */
 function defineTheme(opts: {
   id: string;
   name: string;
   preview: ColorTheme["preview"];
-  light: {
-    bg: string;
-    fg: string;
-    primary: string;
-    primaryFg: string;
-    muted: string;
-    mutedFg: string;
-    border: string;
-  };
-  dark: {
-    bg: string;
-    fg: string;
-    primary: string;
-    primaryFg: string;
-    muted: string;
-    mutedFg: string;
-    border: string;
-  };
+  light: ThemeModeColors;
+  dark: ThemeModeColors;
 }): ColorTheme {
   const { light, dark } = opts;
   return {
@@ -75,6 +98,8 @@ function defineTheme(opts: {
       "--muted-foreground": light.mutedFg,
       "--accent": light.muted,
       "--accent-foreground": light.fg,
+      "--destructive": light.destructive ?? DEFAULTS.light.destructive,
+      "--success": light.success ?? DEFAULTS.light.success,
       "--border": light.border,
       "--input": light.border,
       "--ring": light.primary,
@@ -86,6 +111,10 @@ function defineTheme(opts: {
       "--sidebar-accent-foreground": light.fg,
       "--sidebar-border": light.border,
       "--sidebar-ring": light.primary,
+      "--search-mark-bg": light.searchMarkBg ?? DEFAULTS.light.searchMarkBg,
+      "--search-mark-color":
+        light.searchMarkColor ?? DEFAULTS.light.searchMarkColor,
+      "--dash-bg": light.dashBg ?? DEFAULTS.light.dashBg,
     },
     dark: {
       "--background": dark.bg,
@@ -102,6 +131,8 @@ function defineTheme(opts: {
       "--muted-foreground": dark.mutedFg,
       "--accent": dark.muted,
       "--accent-foreground": dark.fg,
+      "--destructive": dark.destructive ?? DEFAULTS.dark.destructive,
+      "--success": dark.success ?? DEFAULTS.dark.success,
       "--border": dark.border,
       "--input": dark.border,
       "--ring": dark.primary,
@@ -113,6 +144,10 @@ function defineTheme(opts: {
       "--sidebar-accent-foreground": dark.fg,
       "--sidebar-border": dark.border,
       "--sidebar-ring": dark.primary,
+      "--search-mark-bg": dark.searchMarkBg ?? DEFAULTS.dark.searchMarkBg,
+      "--search-mark-color":
+        dark.searchMarkColor ?? DEFAULTS.dark.searchMarkColor,
+      "--dash-bg": dark.dashBg ?? DEFAULTS.dark.dashBg,
     },
   };
 }
@@ -137,6 +172,9 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.94 0.022 95)",
       mutedFg: "oklch(0.52 0 0)",
       border: "oklch(0.88 0.025 95)",
+      destructive: "oklch(0.55 0.22 25)",
+      success: "oklch(0.5 0.14 150)",
+      dashBg: "oklch(0.96 0.015 95)",
     },
     dark: {
       bg: "oklch(0.2 0.02 90)",
@@ -146,6 +184,9 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.26 0.018 90)",
       mutedFg: "oklch(0.62 0.012 95)",
       border: "oklch(0.32 0.018 90)",
+      destructive: "oklch(0.68 0.19 22)",
+      success: "oklch(0.62 0.15 150)",
+      dashBg: "oklch(0.18 0.015 90)",
     },
   }),
 
@@ -168,6 +209,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.93 0.02 75)",
       mutedFg: "oklch(0.5 0.025 55)",
       border: "oklch(0.88 0.025 75)",
+      destructive: "oklch(0.5 0.2 15)",
+      success: "oklch(0.5 0.14 155)",
+      searchMarkBg: "oklch(0.88 0.12 75 / 0.6)",
+      searchMarkColor: "oklch(0.3 0.06 55)",
+      dashBg: "oklch(0.95 0.012 75)",
     },
     dark: {
       bg: "oklch(0.16 0.03 50)",
@@ -177,14 +223,17 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.22 0.025 50)",
       mutedFg: "oklch(0.62 0.02 75)",
       border: "oklch(0.28 0.025 50)",
+      destructive: "oklch(0.65 0.2 15)",
+      success: "oklch(0.62 0.15 155)",
+      searchMarkBg: "oklch(0.42 0.1 60 / 0.55)",
+      searchMarkColor: "oklch(0.9 0.06 75)",
+      dashBg: "oklch(0.14 0.025 50)",
     },
   }),
 
-  {
+  defineTheme({
     id: "panda",
     name: "Panda",
-    light: {},
-    dark: {},
     preview: {
       lightBg: "#ffffff",
       lightText: "#1e1e1e",
@@ -193,7 +242,31 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       darkText: "#fafafa",
       darkLink: "#eaeaea",
     },
-  },
+    light: {
+      bg: "oklch(1 0 0)",
+      fg: "oklch(0.2 0 0)",
+      primary: "oklch(0.2 0 0)",
+      primaryFg: "oklch(1 0 0)",
+      muted: "oklch(0.96 0 0)",
+      mutedFg: "oklch(0.5 0 0)",
+      border: "oklch(0.9 0 0)",
+      destructive: "oklch(0.55 0.22 25)",
+      success: "oklch(0.5 0.15 145)",
+      dashBg: "oklch(0.97 0 0)",
+    },
+    dark: {
+      bg: "oklch(0.21 0 0)",
+      fg: "oklch(0.98 0 0)",
+      primary: "oklch(0.93 0 0)",
+      primaryFg: "oklch(0.15 0 0)",
+      muted: "oklch(0.27 0 0)",
+      mutedFg: "oklch(0.65 0 0)",
+      border: "oklch(0.33 0 0)",
+      destructive: "oklch(0.68 0.18 22)",
+      success: "oklch(0.62 0.16 150)",
+      dashBg: "oklch(0.18 0 0)",
+    },
+  }),
 
   defineTheme({
     id: "beach",
@@ -214,6 +287,9 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.93 0.015 85)",
       mutedFg: "oklch(0.52 0.015 65)",
       border: "oklch(0.88 0.018 85)",
+      destructive: "oklch(0.52 0.2 22)",
+      success: "oklch(0.5 0.12 170)",
+      dashBg: "oklch(0.95 0.008 85)",
     },
     dark: {
       bg: "oklch(0.27 0.03 210)",
@@ -223,6 +299,9 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.33 0.025 210)",
       mutedFg: "oklch(0.65 0.015 80)",
       border: "oklch(0.38 0.02 210)",
+      destructive: "oklch(0.68 0.18 20)",
+      success: "oklch(0.65 0.12 170)",
+      dashBg: "oklch(0.24 0.025 210)",
     },
   }),
 
@@ -245,6 +324,12 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.83 0.035 130)",
       mutedFg: "oklch(0.48 0.03 140)",
       border: "oklch(0.79 0.035 130)",
+      destructive: "oklch(0.52 0.18 25)",
+      // Use blue-teal to differentiate from the green primary
+      success: "oklch(0.48 0.1 220)",
+      searchMarkBg: "oklch(0.8 0.06 100 / 0.6)",
+      searchMarkColor: "oklch(0.3 0.04 130)",
+      dashBg: "oklch(0.85 0.028 130)",
     },
     dark: {
       bg: "oklch(0.18 0.02 140)",
@@ -254,6 +339,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.24 0.02 140)",
       mutedFg: "oklch(0.58 0.02 130)",
       border: "oklch(0.3 0.02 140)",
+      destructive: "oklch(0.65 0.17 22)",
+      success: "oklch(0.6 0.1 220)",
+      searchMarkBg: "oklch(0.4 0.06 110 / 0.55)",
+      searchMarkColor: "oklch(0.88 0.04 130)",
+      dashBg: "oklch(0.16 0.018 140)",
     },
   }),
 
@@ -276,6 +366,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.92 0 0)",
       mutedFg: "oklch(0.55 0 0)",
       border: "oklch(0.87 0 0)",
+      destructive: "oklch(0.55 0.22 25)",
+      success: "oklch(0.5 0.15 145)",
+      searchMarkBg: "oklch(0.88 0 0 / 0.7)",
+      searchMarkColor: "oklch(0.25 0 0)",
+      dashBg: "oklch(0.94 0 0)",
     },
     dark: {
       bg: "oklch(0.18 0 0)",
@@ -285,6 +380,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.24 0 0)",
       mutedFg: "oklch(0.6 0 0)",
       border: "oklch(0.3 0 0)",
+      destructive: "oklch(0.68 0.18 22)",
+      success: "oklch(0.62 0.16 150)",
+      searchMarkBg: "oklch(0.35 0 0 / 0.6)",
+      searchMarkColor: "oklch(0.9 0 0)",
+      dashBg: "oklch(0.16 0 0)",
     },
   }),
 
@@ -307,6 +407,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.93 0.016 325)",
       mutedFg: "oklch(0.52 0.015 310)",
       border: "oklch(0.88 0.016 325)",
+      destructive: "oklch(0.55 0.2 15)",
+      success: "oklch(0.5 0.14 155)",
+      searchMarkBg: "oklch(0.9 0.08 310 / 0.45)",
+      searchMarkColor: "oklch(0.3 0.04 300)",
+      dashBg: "oklch(0.95 0.01 325)",
     },
     dark: {
       bg: "oklch(0.18 0.025 300)",
@@ -316,6 +421,11 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
       muted: "oklch(0.24 0.022 300)",
       mutedFg: "oklch(0.62 0.012 325)",
       border: "oklch(0.3 0.022 300)",
+      destructive: "oklch(0.68 0.18 18)",
+      success: "oklch(0.62 0.15 155)",
+      searchMarkBg: "oklch(0.38 0.08 290 / 0.5)",
+      searchMarkColor: "oklch(0.9 0.04 325)",
+      dashBg: "oklch(0.16 0.02 300)",
     },
   }),
 ];

package/src/ui/compose/ComposeDialog.tsx

@@ -18,9 +18,18 @@ export interface ComposeDialogProps {
   uploadMaxFileSize?: number;
 }
 
-export const ComposeDialog: FC<ComposeDialogProps> = ({
+export interface ComposeFormProps extends ComposeDialogProps {
+  pageMode?: boolean;
+  closeHref?: string;
+  autoRestoreDraft?: boolean;
+}
+
+export const ComposeForm: FC<ComposeFormProps> = ({
   collections,
   uploadMaxFileSize,
+  pageMode = false,
+  closeHref,
+  autoRestoreDraft = false,
 }) => {
   const { t } = useLingui();
 
@@ -74,7 +83,7 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({
       comment: "@context: Compose quote source link placeholder",
     }),
     attachedText: t({
-      message: "Attached Text",
+      message: "Text attachment",
       comment: "@context: Attached text panel title",
     }),
     attachedTextPlaceholder: t({
@@ -116,7 +125,13 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({
     }),
     noCollections: t({
       message: "No matching collections.",
-      comment: "@context: Compose collection combobox empty state",
+      comment:
+        "@context: Compose collection combobox empty state when search has no results",
+    }),
+    emptyCollections: t({
+      message: "Create a collection to get started.",
+      comment:
+        "@context: Compose collection combobox empty state when no collections exist",
     }),
     post: t({
       message: "Post",
@@ -150,11 +165,203 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({
       message: "Published!",
       comment: "@context: Toast shown after successful deferred publish",
     }),
+    view: t({
+      message: "View",
+      comment: "@context: Toast action button to view the published post",
+    }),
     retryAll: t({
-      message: "Click to retry all",
+      message: "Tap to retry",
+      comment:
+        "@context: Label on failed upload overlay button, tells user tapping retries the upload",
+    }),
+    editPost: t({
+      message: "Edit post",
+      comment: "@context: Compose dialog header title in edit mode",
+    }),
+    update: t({
+      message: "Done",
+      comment: "@context: Compose button - update existing post",
+    }),
+    confirmCloseTitle: t({
+      message: "Save to drafts?",
+      comment: "@context: Confirm close action sheet title",
+    }),
+    confirmCloseSubtitle: t({
+      message: "Save to drafts to edit and post at a later time.",
+      comment: "@context: Confirm close action sheet subtitle",
+    }),
+    confirmCloseSave: t({
+      message: "Save",
+      comment: "@context: Confirm close action sheet - save draft button",
+    }),
+    confirmCloseCancel: t({
+      message: "Cancel",
+      comment:
+        "@context: Confirm close action sheet - cancel and return to editor",
+    }),
+    confirmCloseDiscard: t({
+      message: "Don't save",
+      comment: "@context: Confirm close action sheet - discard button",
+    }),
+    confirmEditTitle: t({
+      message: "You have unsaved changes",
+      comment:
+        "@context: Confirm close action sheet title when editing a published post",
+    }),
+    confirmEditSubtitle: t({
+      message: "Do you want to publish your changes or discard them?",
+      comment:
+        "@context: Confirm close action sheet subtitle when editing a published post",
+    }),
+    confirmEditPublish: t({
+      message: "Publish",
+      comment:
+        "@context: Confirm close action sheet - publish update button for editing published post",
+    }),
+    confirmEditDiscard: t({
+      message: "Discard",
       comment:
-        "@context: Tooltip hint on failed upload overlay, tells user clicking retries all failed uploads",
+        "@context: Confirm close action sheet - discard changes button for editing published post",
+    }),
+    drafts: t({ message: "Drafts", comment: "@context: Drafts panel title" }),
+    draftsEmpty: t({
+      message: "No drafts yet. Save a draft to find it here.",
+      comment: "@context: Drafts panel empty state",
+    }),
+    deleteDraft: t({
+      message: "Delete Draft",
+      comment: "@context: Draft item action",
+    }),
+    draftDeleted: t({
+      message: "Draft deleted.",
+      comment: "@context: Toast after draft deletion",
     }),
+    publishFailedDraft: t({
+      message: "Couldn't publish. Saved as draft.",
+      comment:
+        "@context: Toast when publish fails and post is auto-saved as draft",
+    }),
+    uploadFailedDraft: t({
+      message: "Some uploads failed. Saved as draft.",
+      comment:
+        "@context: Toast when uploads fail and post is auto-saved as draft",
+    }),
+    reply: t({
+      message: "Reply",
+      comment: "@context: Compose button - reply to post",
+    }),
+    publishFeatured: t({
+      message: "Post as Featured",
+      comment:
+        "@context: Compose dropdown option - publish post and mark it as featured",
+    }),
+    publishUnlisted: t({
+      message: "Post Unlisted",
+      comment:
+        "@context: Compose dropdown option - publish post with unlisted visibility, hidden from main feed",
+    }),
+    publishPrivate: t({
+      message: "Post as Private",
+      comment:
+        "@context: Compose dropdown option - publish post visible only when logged in",
+    }),
+    showMore: t({
+      message: "Show more",
+      comment: "@context: Expand reply context",
+    }),
+    showLess: t({
+      message: "Show less",
+      comment: "@context: Collapse reply context",
+    }),
+    addCollection: t({
+      message: "Add Collection",
+      comment: "@context: Action to create a new collection from compose",
+    }),
+    collectionCountLabel: t({
+      message: "%name% + %count% more",
+      comment:
+        "@context: Compose collection trigger label when multiple collections selected. %name% is the first collection name, %count% is how many more",
+    }),
+    draftRestored: t({
+      message: "Draft restored.",
+      comment:
+        "@context: Toast shown when a local draft is restored on compose open",
+    }),
+    collectionFormLabels: {
+      titleLabel: t({
+        message: "Title",
+        comment: "@context: Collection form field",
+      }),
+      titlePlaceholder: t({
+        message: "My Collection",
+        comment: "@context: Collection title placeholder",
+      }),
+      slugLabel: t({
+        message: "Slug",
+        comment: "@context: Collection form field",
+      }),
+      slugHelp: t({
+        message:
+          "URL-safe identifier (lowercase, numbers, hyphens). For CJK titles, slug will be auto-generated on the server.",
+        comment: "@context: Collection path help text",
+      }),
+      descriptionLabel: t({
+        message: "Description (optional)",
+        comment: "@context: Collection form field",
+      }),
+      descriptionPlaceholder: t({
+        message: "What's this collection about?",
+        comment: "@context: Collection description placeholder",
+      }),
+      removeIcon: t({
+        message: "Remove",
+        comment: "@context: Button to remove icon",
+      }),
+      iconsTab: t({
+        message: "Icons",
+        comment: "@context: Icon picker tab label",
+      }),
+      emojisTab: t({
+        message: "Emojis",
+        comment: "@context: Emoji picker tab label",
+      }),
+      searchIconsPlaceholder: t({
+        message: "Search icons...",
+        comment: "@context: Icon picker search placeholder",
+      }),
+      searchEmojisPlaceholder: t({
+        message: "Search emojis...",
+        comment: "@context: Emoji picker search placeholder",
+      }),
+      sortOrderLabel: t({
+        message: "Sort Order",
+        comment: "@context: Collection form field",
+      }),
+      sortNewest: t({
+        message: "Newest first",
+        comment: "@context: Collection sort order option",
+      }),
+      sortOldest: t({
+        message: "Oldest first",
+        comment: "@context: Collection sort order option",
+      }),
+      sortRatingDesc: t({
+        message: "Highest rated",
+        comment: "@context: Collection sort order option",
+      }),
+      sortRatingAsc: t({
+        message: "Lowest rated",
+        comment: "@context: Collection sort order option",
+      }),
+      submitLabel: t({
+        message: "Save",
+        comment: "@context: Button to save collection",
+      }),
+      cancelLabel: t({
+        message: "Cancel",
+        comment: "@context: Button to cancel form",
+      }),
+    },
   }).replace(/</g, "\\u003c");
 
   const collectionsJson = JSON.stringify(
@@ -165,23 +372,38 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({
     })),
   ).replace(/</g, "\\u003c");
 
+  return (
+    <jant-compose-dialog
+      collections={collectionsJson}
+      labels={labels}
+      upload-max-file-size={uploadMaxFileSize ?? 500}
+      {...(pageMode ? { "page-mode": "" } : {})}
+      {...(closeHref ? { "close-href": closeHref } : {})}
+      {...(autoRestoreDraft ? { "auto-restore-draft": "" } : {})}
+    >
+      {/* SSR fallback skeleton */}
+      <div class="compose-dialog-inner">
+        <div class="compose-dialog-header" />
+        <div class="compose-body skel-section-md" />
+      </div>
+    </jant-compose-dialog>
+  );
+};
+
+export const ComposeDialog: FC<ComposeDialogProps> = ({
+  collections,
+  uploadMaxFileSize,
+}) => {
   return (
     <dialog
       id="compose-dialog"
       class="compose-dialog"
-      onclick="event.target === this && this.close()"
+      data-on:click="evt.target === el && el.querySelector('jant-compose-dialog')?.requestClose()"
     >
-      <jant-compose-dialog
-        collections={collectionsJson}
-        labels={labels}
-        upload-max-file-size={uploadMaxFileSize ?? 500}
-      >
-        {/* SSR fallback skeleton */}
-        <div class="compose-dialog-inner">
-          <div class="compose-dialog-header" />
-          <div class="compose-body skel-section-md" />
-        </div>
-      </jant-compose-dialog>
+      <ComposeForm
+        collections={collections}
+        uploadMaxFileSize={uploadMaxFileSize}
+      />
     </dialog>
   );
 };

package/src/ui/compose/ComposePrompt.tsx

@@ -16,7 +16,7 @@ export const ComposePrompt: FC = () => {
       <button
         type="button"
         class="compose-prompt-trigger"
-        onclick="const d=document.getElementById('compose-dialog');d.showModal();d.querySelector('jant-compose-editor')?.focusInput()"
+        data-on:click="document.getElementById('compose-dialog').querySelector('jant-compose-dialog')?.restoreLocalDraft(); document.getElementById('compose-dialog').showModal(); document.getElementById('compose-dialog').querySelector('jant-compose-editor')?.focusInput()"
       >
         <span class="compose-prompt-avatar">
           <svg

package/src/ui/dash/CrudPageHeader.tsx

@@ -1,7 +1,7 @@
 /**
  * CRUD Page Header Component
  *
- * Provides consistent header layout for dashboard CRUD list pages
+ * Provides consistent header layout for admin CRUD list pages
  * with title and primary action button
  */
 

package/src/ui/dash/ListItemRow.tsx

@@ -1,7 +1,7 @@
 /**
  * List Item Row Component
  *
- * Provides consistent layout for list items in dashboard CRUD pages.
+ * Provides consistent layout for list items in admin CRUD pages.
  * Handles responsive spacing, overflow, and action button placement.
  */
 

package/src/ui/dash/StatusBadge.tsx

@@ -11,12 +11,14 @@ import type { Status, Visibility } from "../../types.js";
 export interface StatusBadgeProps {
   status: Status;
   visibility?: Visibility;
+  featured?: boolean;
   pinned?: boolean;
 }
 
 export const StatusBadge: FC<StatusBadgeProps> = ({
   status,
   visibility,
+  featured,
   pinned,
 }) => {
   const { t } = useLingui();
@@ -40,7 +42,7 @@ export const StatusBadge: FC<StatusBadgeProps> = ({
   return (
     <span class="flex items-center gap-1">
       <span class={statusVariants[status]}>{statusLabels[status]}</span>
-      {visibility === "featured" && (
+      {featured && (
         <span class="badge-primary">
           {t({
             message: "Featured",

package/src/ui/dash/appearance/AdvancedContent.tsx

@@ -4,6 +4,9 @@
 
 import { useLingui } from "@lingui/react/macro";
 
+const THEMING_DOCS_URL =
+  "https://github.com/jant-me/jant/blob/main/docs/theming.md";
+
 export function AdvancedContent({ customCSS }: { customCSS: string }) {
   const { t } = useLingui();
 
@@ -12,7 +15,7 @@ export function AdvancedContent({ customCSS }: { customCSS: string }) {
   return (
     <form
       data-signals={cssSignals}
-      data-on:submit__prevent="@post('/dash/settings/custom-css')"
+      data-on:submit__prevent="@post('/settings/custom-css')"
       data-indicator="_cssLoading"
       class="max-w-3xl"
     >
@@ -28,6 +31,24 @@ export function AdvancedContent({ customCSS }: { customCSS: string }) {
             message:
               "Add custom CSS to override any styles. Use data attributes like [data-page], [data-post], [data-format] to target specific elements.",
             comment: "@context: Custom CSS settings description",
+          })}{" "}
+          <a
+            href={THEMING_DOCS_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="underline hover:text-foreground transition-colors"
+          >
+            {t({
+              message: "Theming guide",
+              comment:
+                "@context: Link to theming documentation on Custom CSS page",
+            })}
+          </a>
+          {" — "}
+          {t({
+            message: "available CSS variables, data attributes, and examples.",
+            comment:
+              "@context: Description after theming guide link on Custom CSS page",
           })}
         </p>
         <textarea