@jant/core 0.6.8 → 0.6.9

package/dist/{export-Be082J0n.js → export-C2DIB7mm.js}

@@ -3295,7 +3295,7 @@ function serializeMarkdownDocument(doc) {
 }
 //#endregion
 //#region src/styles/tokens.css?raw
-var tokens_default = "/**\n * Design Tokens\n *\n * CSS custom properties for all visual aspects of the UI.\n * These are the stable customization API — override in custom CSS\n * to change typography, layout, surfaces, and element sizing.\n */\n\n:root {\n  /* Typography — Font families */\n  --font-cjk-serif-fallback:\n    \"Songti SC\", STSong, SimSun, \"Songti TC\", PMingLiU, MingLiU,\n    \"Noto Serif SC\", \"Noto Serif CJK SC\", \"Noto Serif TC\", \"Noto Serif CJK TC\";\n  --font-body:\n    system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Helvetica, Arial, \"PingFang TC\", \"PingFang SC\",\n    \"Hiragino Sans CNS\", \"Hiragino Sans GB\", \"Microsoft JhengHei\",\n    \"Microsoft YaHei\", \"Noto Sans CJK TC\", \"Noto Sans CJK SC\", sans-serif;\n  --font-heading:\n    \"New York Small\", \"New York\", \"Iowan Old Style\", Charter,\n    \"Bitstream Charter\", \"Source Serif 4\", Cambria, \"Sitka Text\", Georgia,\n    var(--font-cjk-serif-fallback), ui-serif, serif;\n  --font-site-title:\n    \"New York Small\", \"New York\", \"Iowan Old Style\", Charter,\n    \"Bitstream Charter\", \"Source Serif 4\", Cambria, \"Sitka Text\", Georgia,\n    var(--font-cjk-serif-fallback), ui-serif, serif;\n  --font-serif:\n    var(--font-cjk-serif-fallback), ui-serif, \"New York Small\", \"New York\",\n    \"Iowan Old Style\", Charter, Georgia, \"Times New Roman\", Times, serif;\n  --font-ui:\n    system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Helvetica, Arial, \"PingFang TC\", \"PingFang SC\",\n    \"Hiragino Sans CNS\", \"Hiragino Sans GB\", \"Microsoft JhengHei\",\n    \"Microsoft YaHei\", \"Noto Sans CJK TC\", \"Noto Sans CJK SC\", sans-serif;\n  --font-mono:\n    ui-monospace, Menlo, Monaco, Consolas, \"Cascadia Code\", \"Courier New\",\n    monospace;\n  /*\n   * Blockquote font family.\n   *\n   * Defaults to `inherit` so blockquotes follow the body font in sans-only\n   * themes (Clean, Friendly, Bold) and serif-only themes (Tufte, Bookish).\n   * Mixed themes that want a distinct blockquote voice — e.g. Classic, which\n   * pairs a sans body with serif headings — override this token in their\n   * `cssVariables` to point at a serif stack. This also restores a type-level\n   * distinction for CJK, where italic is disabled.\n   */\n  --font-blockquote: inherit;\n\n  /* Typography — Font weights */\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-semibold: 600;\n  --fw-bold: 700;\n  --fw-extrabold: 800;\n  /*\n   * Unified type scale.\n   *\n   * Every font-size in the system — reading content AND UI controls —\n   * must reference one of these tokens. No raw rem/px values elsewhere.\n   *\n   *   --type-display    2.7rem  (40.5px) — page titles, h1\n   *   --type-title      2.1rem  (31.5px) — h2, feed card titles\n   *   --type-subtitle   1.8rem  (27px)   — h3\n   *   --type-body       1.4rem  (21px)   — running text, form inputs\n   *   --type-secondary  1.1rem  (16.5px) — meta, nav, sidenotes, UI labels\n   *   --type-base       1.0rem  (15px)   — code, UI buttons, controls\n   *   --type-sm         0.9rem  (13.5px) — code blocks, small UI text\n   *   --type-xs         0.8rem  (12px)   — captions, descriptions, chips\n   *   --type-2xs        0.65rem (9.75px) — tiny labels, file sizes, badges\n   */\n  --type-display: 2.7rem;\n  --type-title: 2.1rem;\n  --type-subtitle: 1.8rem;\n  --type-body: 1.4rem;\n  --type-secondary: 1.1rem;\n  --type-base: 1rem;\n  --type-sm: 0.9rem;\n  --type-xs: 0.8rem;\n  --type-2xs: 0.65rem;\n\n  /* Content reading tokens — desktop maps to core scale,\n     mobile overrides below cap sizes for small screens.\n     --type-content-scale uniformly scales all content sizes\n     without affecting UI controls. */\n  --type-content-scale: 0.78;\n  --type-content-display: calc(var(--type-display) * var(--type-content-scale));\n  --type-content-title: calc(var(--type-title) * var(--type-content-scale));\n  --type-content-subtitle: calc(\n    var(--type-subtitle) * var(--type-content-scale)\n  );\n  --type-content-body: calc(var(--type-body) * var(--type-content-scale));\n\n  /* Semantic aliases */\n  --type-code: var(--type-base);\n  --type-code-block: var(--type-sm);\n  --type-body-size: var(--type-content-body);\n  --type-body-tracking: 0;\n  --type-ui-title: var(--type-secondary);\n  --type-ui-control: var(--type-base);\n  --type-ui-meta: var(--type-base);\n  --type-ui-hint: var(--type-sm);\n  --type-ui-caption: var(--type-xs);\n  --type-ui-micro: var(--type-2xs);\n  --type-ui-input: var(--type-secondary);\n  --type-thread-context: var(--type-base);\n  --type-thread-context-title: var(--type-secondary);\n  --type-thread-context-meta: var(--type-sm);\n  --feed-note-title-size: var(--type-content-title);\n  --feed-note-title-leading: var(--type-heading-leading);\n  --type-body-leading: 1.5;\n  --type-display-leading: 1.15;\n  --type-heading-leading: 1.15;\n  --type-heading-weight: var(--fw-regular);\n  --type-heading-tracking: 0;\n  --type-display-weight: var(--fw-regular);\n  --type-display-tracking: 0;\n  --type-label-weight: var(--fw-medium);\n  --type-label-tracking: 0.08em;\n\n  /* Layout — Tufte proportional model */\n  --content-max-width: 42rem;\n  --form-max-width: 42rem;\n  /* compose dialogs + feed content cap */\n  --layout-body-max-width: 1088px;\n  --layout-content-width: 55%;\n  --layout-sidenote-width: 50%;\n  --layout-sidenote-margin: -60%;\n  --site-padding: 1.5rem;\n  --content-gap: 1rem;\n  --space-xl: 2rem;\n  --space-2xl: 4rem;\n  /*\n   * Home timeline vertical rhythm — the single source of truth for the gaps\n   * between stacked sections on the home page:\n   *\n   *   site description → separator → first post → divider → post → ...\n   *\n   * where \"separator\" is the description hairline (logged out) or the compose\n   * prompt (logged in). Every one of those gaps derives from this token, and\n   * the individual pieces (compose prompt, description hairline, post cards)\n   * carry no rhythm margin of their own — the structural wrappers\n   * (.site-home-header, hr.feed-divider) own the spacing. Retune the whole\n   * feed cadence by changing this one value.\n   *\n   * Note: per-format card padding (.feed-quote-post, thread previews) is the\n   * card's own internal spacing and is intentionally NOT part of this rhythm.\n   *\n   * Kept as a free-standing value (not pinned to the --space-* scale) so the\n   * feed cadence can be tuned independently.\n   */\n  --site-feed-rhythm: 4.4rem;\n  /*\n   * The post footer's action row (reply / menu buttons) is a taller tap\n   * target than its visible content, leaving a few px of dead space below\n   * the last visible element of every post (~5.9px logged out from the\n   * footer min-height, ~6.8px logged in from the menu button). hr.feed-divider\n   * subtracts this from its top margin so the VISIBLE gap between posts equals\n   * --site-feed-rhythm — the same as the header spacing. Re-measure if the\n   * footer button size or meta font changes.\n   */\n  --post-footer-overshoot: 6px;\n  /*\n   * The site intro (description) block is deliberately tighter than\n   * --site-feed-rhythm so it reads as a compact header unit rather than a\n   * full feed section. -top: gap from the header nav down to the intro.\n   * -bottom: gap from the intro down to its separator — the hairline (logged\n   * out) or the compose prompt text (logged in). Same values in both states.\n   */\n  --site-intro-gap-top: 24px;\n  --site-intro-gap-bottom: 36px;\n\n  /* Sidebar layout (admin + site sidebar pages) */\n  --sidebar-width: 12rem;\n  --sidebar-gap: 2rem;\n\n  /* Surfaces */\n  --card-bg: var(--card);\n  --card-radius: 0;\n  --card-padding: 1rem;\n  --card-border-width: 0;\n  --card-shadow: none;\n\n  /* Elements */\n  --avatar-size: 28px;\n  --avatar-radius: 50%;\n  --media-radius: 0.5rem;\n\n  /* Icons */\n  --icon-stroke: 2;\n  --icon-stroke-fine: 1.5;\n\n  /* Derived color tokens (from BaseCoat variables) */\n  --site-accent: var(--primary);\n  --site-accent-text: var(--primary-foreground);\n  --site-column-outline: var(--border);\n  --site-border-light: color-mix(\n    in srgb,\n    var(--site-column-outline) 52%,\n    transparent\n  );\n  --site-threadline: var(--border);\n  --site-page-bg: var(--background);\n  --site-elevated-bg: var(--background);\n  --site-nav-hover-bg: var(--accent);\n  --site-text-primary: var(--foreground);\n  --site-text-secondary: var(--muted-foreground);\n  --site-reading-title: color-mix(\n    in oklch,\n    var(--site-text-primary) 81%,\n    black\n  );\n  --site-reading-heading: color-mix(\n    in oklch,\n    var(--site-text-primary) 86%,\n    black\n  );\n  --site-reading-body: color-mix(in oklch, var(--site-text-primary) 90%, black);\n  --site-reading-quote: color-mix(\n    in oklch,\n    var(--site-text-primary) 95%,\n    black\n  );\n  --site-reading-meta: color-mix(\n    in srgb,\n    var(--site-text-secondary) 72%,\n    var(--site-text-primary)\n  );\n  --site-reading-caption: color-mix(\n    in srgb,\n    var(--site-text-secondary) 88%,\n    var(--site-text-primary)\n  );\n  --site-content-link: inherit;\n  --site-content-link-hover: var(--site-text-primary);\n  --site-content-link-underline: color-mix(\n    in srgb,\n    var(--site-text-secondary) 58%,\n    transparent\n  );\n  --site-reading-link: var(--site-reading-body);\n  --site-reading-link-hover: var(--site-reading-heading);\n  --site-reading-link-underline: color-mix(\n    in srgb,\n    var(--site-reading-meta) 58%,\n    transparent\n  );\n  --site-text-placeholder: oklch(from var(--muted-foreground) l c h / 0.5);\n  --site-media-outline: var(--border);\n  --site-divider: var(--border);\n  --site-feed-card-bg: color-mix(\n    in srgb,\n    var(--site-elevated-bg) 88%,\n    var(--site-nav-hover-bg)\n  );\n  --site-feed-card-border: color-mix(\n    in srgb,\n    var(--site-divider) 78%,\n    transparent\n  );\n  --site-feed-card-shadow: color-mix(\n    in srgb,\n    var(--site-text-primary) 12%,\n    transparent\n  );\n  --site-feed-divider-color: color-mix(\n    in srgb,\n    var(--site-text-secondary) 30%,\n    transparent\n  );\n  --site-feed-link-tint: color-mix(in srgb, var(--site-accent) 7%, transparent);\n  --site-feed-quote-tint: color-mix(\n    in srgb,\n    var(--site-accent) 10%,\n    transparent\n  );\n  --site-blockquote-rail: color-mix(\n    in srgb,\n    var(--site-accent) 22%,\n    var(--site-divider)\n  );\n  --site-blockquote-bg: color-mix(\n    in srgb,\n    var(--site-feed-quote-tint) 62%,\n    var(--site-page-bg)\n  );\n  --site-blockquote-text: color-mix(\n    in oklch,\n    var(--site-text-primary) 92%,\n    black\n  );\n  --site-summary-blockquote-bg: color-mix(\n    in srgb,\n    var(--site-feed-quote-tint) 42%,\n    var(--site-page-bg)\n  );\n  --site-reading-blockquote-rail: color-mix(\n    in srgb,\n    var(--site-reading-link) 18%,\n    var(--site-reading-meta)\n  );\n  --site-reading-blockquote-bg: color-mix(\n    in srgb,\n    var(--site-accent) 6%,\n    var(--site-page-bg)\n  );\n  --site-thread-context-bg: color-mix(\n    in srgb,\n    var(--site-nav-hover-bg) 58%,\n    transparent\n  );\n  --site-thread-context-border: color-mix(\n    in srgb,\n    var(--site-divider) 74%,\n    transparent\n  );\n  --site-thread-gap-bg: color-mix(\n    in srgb,\n    var(--site-nav-hover-bg) 42%,\n    transparent\n  );\n  --site-thread-item-spacing: 32px;\n  --site-thread-context-max-height: 160px;\n  --site-thread-dot-ring: color-mix(\n    in srgb,\n    var(--site-accent) 16%,\n    transparent\n  );\n  --compose-paper-bg: var(--site-page-bg);\n  --compose-control-bg: color-mix(\n    in srgb,\n    var(--site-nav-hover-bg) 72%,\n    var(--compose-paper-bg)\n  );\n  --compose-control-bg-strong: color-mix(\n    in srgb,\n    var(--site-nav-hover-bg) 88%,\n    var(--compose-paper-bg)\n  );\n  --compose-control-border: color-mix(\n    in srgb,\n    var(--site-column-outline) 68%,\n    transparent\n  );\n  --compose-blockquote-rail: color-mix(\n    in srgb,\n    var(--site-accent) 24%,\n    var(--compose-control-border)\n  );\n  --compose-blockquote-bg: color-mix(\n    in srgb,\n    var(--compose-control-bg) 56%,\n    var(--compose-paper-bg)\n  );\n  --compose-blockquote-bg-focus: color-mix(\n    in srgb,\n    var(--compose-control-bg-strong) 70%,\n    var(--compose-paper-bg)\n  );\n  --compose-blockquote-text: color-mix(\n    in srgb,\n    var(--site-text-primary) 88%,\n    var(--site-text-secondary)\n  );\n  --compose-floating-bg: color-mix(\n    in srgb,\n    var(--compose-paper-bg) 94%,\n    var(--site-nav-hover-bg) 6%\n  );\n\n  /* Search highlight */\n  --search-mark-bg: oklch(0.92 0.14 90 / 0.55);\n  --search-mark-color: oklch(0.35 0.09 70);\n\n  /* Admin */\n  --dash-bg: oklch(0.97 0.005 80);\n  --dash-card-radius: 10px;\n}\n\n@media (max-width: 760px) {\n  :root {\n    --site-padding: 1.875rem;\n    --layout-content-width: 100%;\n  }\n}\n\n/*\n * Dark-mode reading color overrides.\n *\n * These rules must beat the active color theme's light-mode block, which\n * uses `:root:root { ... }` (specificity 0,0,2,0) with no media query and\n * therefore applies in both light and dark modes. Most themes do not\n * redefine `--site-reading-*` in their dark block, so without higher\n * specificity here the light reading-body color would leak into dark mode\n * (resulting in near-invisible body text on a dark background).\n *\n * We repeat `:root:root` to reach specificity 0,0,3,0, which outranks the\n * theme's light `:root:root` (0,0,2,0). The theme's dark blocks use\n * `:root:root[data-theme-mode=\"dark\"]` or `:root:root:not([data-theme-mode=\"light\"])`\n * (also 0,0,3,0), so a theme that explicitly defines dark reading colors\n * still wins via source order.\n */\n@media (prefers-color-scheme: dark) {\n  :root:root:not([data-theme-mode=\"light\"]) {\n    --site-reading-title: var(--site-text-primary);\n    --site-reading-heading: color-mix(\n      in oklch,\n      var(--site-text-primary) 94%,\n      var(--site-text-secondary)\n    );\n    --site-reading-body: color-mix(\n      in oklch,\n      var(--site-text-primary) 96%,\n      black\n    );\n    --site-reading-quote: color-mix(\n      in oklch,\n      var(--site-text-primary) 98%,\n      black\n    );\n    --site-reading-meta: color-mix(\n      in srgb,\n      var(--site-text-secondary) 92%,\n      var(--site-text-primary)\n    );\n    --site-reading-caption: color-mix(\n      in srgb,\n      var(--site-text-secondary) 96%,\n      var(--site-text-primary)\n    );\n    --site-reading-link: var(--site-reading-body);\n    --search-mark-bg: oklch(0.45 0.1 85 / 0.5);\n    --search-mark-color: oklch(0.92 0.08 90);\n    --dash-bg: oklch(0.2 0.005 80);\n  }\n}\n\n:root:root[data-theme-mode=\"dark\"] {\n  --site-reading-title: var(--site-text-primary);\n  --site-reading-heading: color-mix(\n    in oklch,\n    var(--site-text-primary) 94%,\n    var(--site-text-secondary)\n  );\n  --site-reading-body: color-mix(in oklch, var(--site-text-primary) 96%, black);\n  --site-reading-quote: color-mix(\n    in oklch,\n    var(--site-text-primary) 98%,\n    black\n  );\n  --site-reading-meta: color-mix(\n    in srgb,\n    var(--site-text-secondary) 92%,\n    var(--site-text-primary)\n  );\n  --site-reading-caption: color-mix(\n    in srgb,\n    var(--site-text-secondary) 96%,\n    var(--site-text-primary)\n  );\n  --site-reading-link: var(--site-reading-body);\n  --search-mark-bg: oklch(0.45 0.1 85 / 0.5);\n  --search-mark-color: oklch(0.92 0.08 90);\n  --dash-bg: oklch(0.2 0.005 80);\n}\n\n@media (max-width: 760px), (hover: none) and (pointer: coarse) {\n  :root {\n    /* Content layer — tighter scale for mobile reading\n       Ratio ≈ 1.9 : 1.4 : 1.15 : 1 (display:title:subtitle:body)\n       13px base → 31.9 / 24 / 19.5 / 16.9 */\n    --type-content-display: calc(2.45rem * var(--type-content-scale));\n    --type-content-title: calc(1.85rem * var(--type-content-scale));\n    --type-content-subtitle: calc(1.5rem * var(--type-content-scale));\n    --type-content-body: calc(1.3rem * var(--type-content-scale));\n\n    /* UI layer — pixel floors for touch targets */\n    --type-ui-title: max(16px, var(--type-secondary));\n    --type-ui-control: max(15px, var(--type-base));\n    --type-ui-meta: max(15px, var(--type-secondary));\n    --type-ui-hint: max(13px, var(--type-sm));\n    --type-ui-caption: max(13px, var(--type-xs));\n    --type-ui-micro: max(12px, var(--type-2xs));\n    --type-ui-input: max(16px, var(--type-secondary));\n    --type-thread-context: max(15px, var(--type-base));\n    --type-thread-context-title: max(16px, var(--type-secondary));\n    --type-thread-context-meta: max(14px, var(--type-sm));\n  }\n}\n";
+var tokens_default = "/**\n * Design Tokens\n *\n * CSS custom properties for all visual aspects of the UI.\n * These are the stable customization API — override in custom CSS\n * to change typography, layout, surfaces, and element sizing.\n */\n\n:root {\n  /* Typography — Font families */\n  --font-cjk-serif-fallback:\n    \"Songti SC\", STSong, SimSun, \"Songti TC\", PMingLiU, MingLiU,\n    \"Noto Serif SC\", \"Noto Serif CJK SC\", \"Noto Serif TC\", \"Noto Serif CJK TC\";\n  --font-body:\n    system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Helvetica, Arial, \"PingFang TC\", \"PingFang SC\",\n    \"Hiragino Sans CNS\", \"Hiragino Sans GB\", \"Microsoft JhengHei\",\n    \"Microsoft YaHei\", \"Noto Sans CJK TC\", \"Noto Sans CJK SC\", sans-serif;\n  --font-heading:\n    \"New York Small\", \"New York\", \"Iowan Old Style\", Charter,\n    \"Bitstream Charter\", \"Source Serif 4\", Cambria, \"Sitka Text\", Georgia,\n    var(--font-cjk-serif-fallback), ui-serif, serif;\n  --font-site-title:\n    \"New York Small\", \"New York\", \"Iowan Old Style\", Charter,\n    \"Bitstream Charter\", \"Source Serif 4\", Cambria, \"Sitka Text\", Georgia,\n    var(--font-cjk-serif-fallback), ui-serif, serif;\n  --font-serif:\n    var(--font-cjk-serif-fallback), ui-serif, \"New York Small\", \"New York\",\n    \"Iowan Old Style\", Charter, Georgia, \"Times New Roman\", Times, serif;\n  --font-ui:\n    system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Helvetica, Arial, \"PingFang TC\", \"PingFang SC\",\n    \"Hiragino Sans CNS\", \"Hiragino Sans GB\", \"Microsoft JhengHei\",\n    \"Microsoft YaHei\", \"Noto Sans CJK TC\", \"Noto Sans CJK SC\", sans-serif;\n  --font-mono:\n    ui-monospace, Menlo, Monaco, Consolas, \"Cascadia Code\", \"Courier New\",\n    monospace;\n  /*\n   * Blockquote font family.\n   *\n   * Defaults to `inherit` so blockquotes follow the body font in sans-only\n   * themes (Clean, Friendly, Bold) and serif-only themes (Tufte, Bookish).\n   * Mixed themes that want a distinct blockquote voice — e.g. Classic, which\n   * pairs a sans body with serif headings — override this token in their\n   * `cssVariables` to point at a serif stack. This also restores a type-level\n   * distinction for CJK, where italic is disabled.\n   */\n  --font-blockquote: inherit;\n\n  /* Typography — Font weights */\n  --fw-light: 300;\n  --fw-regular: 400;\n  --fw-medium: 500;\n  --fw-semibold: 600;\n  --fw-bold: 700;\n  --fw-extrabold: 800;\n  /*\n   * Unified type scale.\n   *\n   * Every font-size in the system — reading content AND UI controls —\n   * must reference one of these tokens. No raw rem/px values elsewhere.\n   *\n   *   --type-display    2.7rem  (40.5px) — page titles, h1\n   *   --type-title      2.1rem  (31.5px) — h2, feed card titles\n   *   --type-subtitle   1.8rem  (27px)   — h3\n   *   --type-body       1.4rem  (21px)   — running text, form inputs\n   *   --type-secondary  1.1rem  (16.5px) — meta, nav, sidenotes, UI labels\n   *   --type-base       1.0rem  (15px)   — code, UI buttons, controls\n   *   --type-sm         0.9rem  (13.5px) — code blocks, small UI text\n   *   --type-xs         0.8rem  (12px)   — captions, descriptions, chips\n   *   --type-2xs        0.65rem (9.75px) — tiny labels, file sizes, badges\n   */\n  --type-display: 2.7rem;\n  --type-title: 2.1rem;\n  --type-subtitle: 1.8rem;\n  --type-body: 1.4rem;\n  --type-secondary: 1.1rem;\n  --type-base: 1rem;\n  --type-sm: 0.9rem;\n  --type-xs: 0.8rem;\n  --type-2xs: 0.65rem;\n\n  /* Content reading tokens — desktop maps to core scale,\n     mobile overrides below cap sizes for small screens.\n     --type-content-scale uniformly scales all content sizes\n     without affecting UI controls. */\n  --type-content-scale: 0.78;\n  --type-content-display: calc(var(--type-display) * var(--type-content-scale));\n  --type-content-title: calc(var(--type-title) * var(--type-content-scale));\n  --type-content-subtitle: calc(\n    var(--type-subtitle) * var(--type-content-scale)\n  );\n  --type-content-body: calc(var(--type-body) * var(--type-content-scale));\n\n  /* Semantic aliases */\n  --type-code: var(--type-base);\n  --type-code-block: var(--type-sm);\n  --type-body-size: var(--type-content-body);\n  --type-body-tracking: 0;\n  --type-ui-title: var(--type-secondary);\n  --type-ui-control: var(--type-base);\n  --type-ui-meta: var(--type-base);\n  --type-ui-hint: var(--type-sm);\n  --type-ui-caption: var(--type-xs);\n  --type-ui-micro: var(--type-2xs);\n  --type-ui-input: var(--type-secondary);\n  --type-thread-context: var(--type-base);\n  --type-thread-context-title: var(--type-secondary);\n  --type-thread-context-meta: var(--type-sm);\n  --feed-note-title-size: var(--type-content-title);\n  --feed-note-title-leading: var(--type-heading-leading);\n  --type-body-leading: 1.5;\n  --type-display-leading: 1.15;\n  --type-heading-leading: 1.15;\n  --type-heading-weight: var(--fw-regular);\n  --type-heading-tracking: 0;\n  --type-display-weight: var(--fw-regular);\n  --type-display-tracking: 0;\n  --type-label-weight: var(--fw-medium);\n  --type-label-tracking: 0.08em;\n\n  /* Layout — Tufte proportional model */\n  --content-max-width: 42rem;\n  --form-max-width: 42rem;\n  /* compose dialogs + feed content cap */\n  --layout-body-max-width: 1088px;\n  --layout-content-width: 55%;\n  --layout-sidenote-width: 50%;\n  --layout-sidenote-margin: -60%;\n  --site-padding: 1.5rem;\n  --content-gap: 1rem;\n  --space-xl: 2rem;\n  --space-2xl: 4rem;\n  /*\n   * Home timeline vertical rhythm — the single source of truth for the gaps\n   * between stacked sections on the home page:\n   *\n   *   site description → separator → first post → divider → post → ...\n   *\n   * where \"separator\" is the description hairline (logged out) or the compose\n   * prompt (logged in). Every one of those gaps derives from this token, and\n   * the individual pieces (compose prompt, description hairline, post cards)\n   * carry no rhythm margin of their own — the structural wrappers\n   * (.site-home-header, hr.feed-divider) own the spacing. Retune the whole\n   * feed cadence by changing this one value.\n   *\n   * Note: per-format card padding (.feed-quote-post, thread previews) is the\n   * card's own internal spacing and is intentionally NOT part of this rhythm.\n   *\n   * Kept as a free-standing value (not pinned to the --space-* scale) so the\n   * feed cadence can be tuned independently.\n   */\n  --site-feed-rhythm: 4.4rem;\n  /*\n   * The post footer's action row (reply / menu buttons) is a taller tap\n   * target than its visible content, leaving a few px of dead space below\n   * the last visible element of every post (~5.9px logged out from the\n   * footer min-height, ~6.8px logged in from the menu button). hr.feed-divider\n   * subtracts this from its top margin so the VISIBLE gap between posts equals\n   * --site-feed-rhythm — the same as the header spacing. Re-measure if the\n   * footer button size or meta font changes.\n   */\n  --post-footer-overshoot: 6px;\n  /*\n   * The site intro (description) block is deliberately tighter than\n   * --site-feed-rhythm so it reads as a compact header unit rather than a\n   * full feed section. -top: gap from the header nav down to the intro.\n   * -bottom: gap from the intro down to its separator — the hairline (logged\n   * out) or the compose prompt text (logged in). Same values in both states.\n   */\n  --site-intro-gap-top: 24px;\n  --site-intro-gap-bottom: 36px;\n\n  /* Sidebar layout (admin + site sidebar pages) */\n  --sidebar-width: 12rem;\n  --sidebar-gap: 2rem;\n\n  /* Surfaces */\n  --card-bg: var(--card);\n  --card-radius: 0;\n  --card-padding: 1rem;\n  --card-border-width: 0;\n  --card-shadow: none;\n\n  /* Elements */\n  --avatar-size: 28px;\n  --avatar-radius: 50%;\n  --media-radius: 0.5rem;\n\n  /* Icons */\n  --icon-stroke: 2;\n  --icon-stroke-fine: 1.5;\n\n  /* Derived color tokens (from BaseCoat variables) */\n  --site-accent: var(--primary);\n  --site-accent-text: var(--primary-foreground);\n  --site-column-outline: var(--border);\n  --site-border-light: color-mix(\n    in srgb,\n    var(--site-column-outline) 52%,\n    transparent\n  );\n  --site-threadline: var(--border);\n  --site-page-bg: var(--background);\n  --site-elevated-bg: var(--background);\n  --site-nav-hover-bg: var(--accent);\n  --site-text-primary: var(--foreground);\n  --site-text-secondary: var(--muted-foreground);\n  --site-reading-title: color-mix(\n    in oklch,\n    var(--site-text-primary) 81%,\n    black\n  );\n  --site-reading-heading: color-mix(\n    in oklch,\n    var(--site-text-primary) 86%,\n    black\n  );\n  --site-reading-body: color-mix(in oklch, var(--site-text-primary) 90%, black);\n  --site-reading-quote: color-mix(\n    in oklch,\n    var(--site-text-primary) 95%,\n    black\n  );\n  --site-reading-meta: color-mix(\n    in srgb,\n    var(--site-text-secondary) 72%,\n    var(--site-text-primary)\n  );\n  --site-reading-caption: color-mix(\n    in srgb,\n    var(--site-text-secondary) 88%,\n    var(--site-text-primary)\n  );\n  --site-content-link: inherit;\n  --site-content-link-hover: var(--site-text-primary);\n  --site-content-link-underline: color-mix(\n    in srgb,\n    var(--site-text-secondary) 58%,\n    transparent\n  );\n  --site-reading-link: var(--site-reading-body);\n  --site-reading-link-hover: var(--site-reading-heading);\n  --site-reading-link-underline: color-mix(\n    in srgb,\n    var(--site-reading-meta) 58%,\n    transparent\n  );\n  --site-text-placeholder: oklch(from var(--muted-foreground) l c h / 0.5);\n  --site-media-outline: var(--border);\n  --site-divider: var(--border);\n  --site-feed-card-bg: color-mix(\n    in srgb,\n    var(--site-elevated-bg) 88%,\n    var(--site-nav-hover-bg)\n  );\n  --site-feed-card-border: color-mix(\n    in srgb,\n    var(--site-divider) 78%,\n    transparent\n  );\n  --site-feed-card-shadow: color-mix(\n    in srgb,\n    var(--site-text-primary) 12%,\n    transparent\n  );\n  --site-feed-divider-color: color-mix(\n    in srgb,\n    var(--site-text-secondary) 30%,\n    transparent\n  );\n  --site-feed-link-tint: color-mix(in srgb, var(--site-accent) 7%, transparent);\n  --site-feed-quote-tint: color-mix(\n    in srgb,\n    var(--site-accent) 10%,\n    transparent\n  );\n  --site-blockquote-rail: color-mix(\n    in srgb,\n    var(--site-accent) 22%,\n    var(--site-divider)\n  );\n  --site-blockquote-bg: color-mix(\n    in srgb,\n    var(--site-feed-quote-tint) 62%,\n    var(--site-page-bg)\n  );\n  --site-blockquote-text: color-mix(\n    in oklch,\n    var(--site-text-primary) 92%,\n    black\n  );\n  --site-summary-blockquote-bg: color-mix(\n    in srgb,\n    var(--site-feed-quote-tint) 42%,\n    var(--site-page-bg)\n  );\n  --site-reading-blockquote-rail: color-mix(\n    in srgb,\n    var(--site-reading-link) 18%,\n    var(--site-reading-meta)\n  );\n  --site-reading-blockquote-bg: color-mix(\n    in srgb,\n    var(--site-accent) 6%,\n    var(--site-page-bg)\n  );\n  --site-thread-context-bg: color-mix(\n    in srgb,\n    var(--site-nav-hover-bg) 58%,\n    transparent\n  );\n  --site-thread-context-border: color-mix(\n    in srgb,\n    var(--site-divider) 74%,\n    transparent\n  );\n  --site-thread-gap-bg: color-mix(\n    in srgb,\n    var(--site-nav-hover-bg) 42%,\n    transparent\n  );\n  --site-thread-item-spacing: 32px;\n  --site-thread-context-max-height: 160px;\n  --site-thread-dot-ring: color-mix(\n    in srgb,\n    var(--site-accent) 16%,\n    transparent\n  );\n  --compose-paper-bg: var(--site-page-bg);\n  --compose-control-bg: color-mix(\n    in srgb,\n    var(--site-nav-hover-bg) 72%,\n    var(--compose-paper-bg)\n  );\n  --compose-control-bg-strong: color-mix(\n    in srgb,\n    var(--site-nav-hover-bg) 88%,\n    var(--compose-paper-bg)\n  );\n  --compose-control-border: color-mix(\n    in srgb,\n    var(--site-column-outline) 68%,\n    transparent\n  );\n  --compose-blockquote-rail: color-mix(\n    in srgb,\n    var(--site-accent) 24%,\n    var(--compose-control-border)\n  );\n  --compose-blockquote-bg: color-mix(\n    in srgb,\n    var(--compose-control-bg) 56%,\n    var(--compose-paper-bg)\n  );\n  --compose-blockquote-bg-focus: color-mix(\n    in srgb,\n    var(--compose-control-bg-strong) 70%,\n    var(--compose-paper-bg)\n  );\n  --compose-blockquote-text: color-mix(\n    in srgb,\n    var(--site-text-primary) 88%,\n    var(--site-text-secondary)\n  );\n  --compose-floating-bg: color-mix(\n    in srgb,\n    var(--compose-paper-bg) 94%,\n    var(--site-nav-hover-bg) 6%\n  );\n\n  /* Search highlight */\n  --search-mark-bg: oklch(0.92 0.14 90 / 0.55);\n  --search-mark-color: oklch(0.35 0.09 70);\n\n  /* Admin */\n  --dash-bg: oklch(0.97 0.005 80);\n  --dash-card-radius: 10px;\n}\n\n@media (max-width: 760px) {\n  :root {\n    --site-padding: 1.875rem;\n    --layout-content-width: 100%;\n  }\n}\n\n/*\n * Dark-mode reading color overrides.\n *\n * These rules must beat the active color theme's light-mode block, which\n * uses `:root:root { ... }` (specificity 0,0,2,0) with no media query and\n * therefore applies in both light and dark modes. Most themes do not\n * redefine `--site-reading-*` in their dark block, so without higher\n * specificity here the light reading-body color would leak into dark mode\n * (resulting in near-invisible body text on a dark background).\n *\n * We repeat `:root:root` to reach specificity 0,0,3,0, which outranks the\n * theme's light `:root:root` (0,0,2,0). The theme's dark blocks use\n * `:root:root[data-theme-mode=\"dark\"]` or `:root:root:not([data-theme-mode=\"light\"])`\n * (also 0,0,3,0), so a theme that explicitly defines dark reading colors\n * still wins via source order.\n */\n@media (prefers-color-scheme: dark) {\n  :root:root:not([data-theme-mode=\"light\"]) {\n    --site-reading-title: var(--site-text-primary);\n    --site-reading-heading: color-mix(\n      in oklch,\n      var(--site-text-primary) 94%,\n      var(--site-text-secondary)\n    );\n    --site-reading-body: color-mix(\n      in oklch,\n      var(--site-text-primary) 96%,\n      black\n    );\n    --site-reading-quote: color-mix(\n      in oklch,\n      var(--site-text-primary) 98%,\n      black\n    );\n    --site-reading-meta: color-mix(\n      in srgb,\n      var(--site-text-secondary) 92%,\n      var(--site-text-primary)\n    );\n    --site-reading-caption: color-mix(\n      in srgb,\n      var(--site-text-secondary) 96%,\n      var(--site-text-primary)\n    );\n    --site-reading-link: var(--site-reading-body);\n    --search-mark-bg: oklch(0.45 0.1 85 / 0.5);\n    --search-mark-color: oklch(0.92 0.08 90);\n    --dash-bg: oklch(0.2 0.005 80);\n  }\n}\n\n:root:root[data-theme-mode=\"dark\"] {\n  --site-reading-title: var(--site-text-primary);\n  --site-reading-heading: color-mix(\n    in oklch,\n    var(--site-text-primary) 94%,\n    var(--site-text-secondary)\n  );\n  --site-reading-body: color-mix(in oklch, var(--site-text-primary) 96%, black);\n  --site-reading-quote: color-mix(\n    in oklch,\n    var(--site-text-primary) 98%,\n    black\n  );\n  --site-reading-meta: color-mix(\n    in srgb,\n    var(--site-text-secondary) 92%,\n    var(--site-text-primary)\n  );\n  --site-reading-caption: color-mix(\n    in srgb,\n    var(--site-text-secondary) 96%,\n    var(--site-text-primary)\n  );\n  --site-reading-link: var(--site-reading-body);\n  --search-mark-bg: oklch(0.45 0.1 85 / 0.5);\n  --search-mark-color: oklch(0.92 0.08 90);\n  --dash-bg: oklch(0.2 0.005 80);\n}\n\n@media (max-width: 760px), (hover: none) and (pointer: coarse) {\n  :root {\n    /* Content layer — tighter scale for mobile reading.\n       Ratio ≈ 1.88 : 1.42 : 1.15 : 1 (display:title:subtitle:body).\n       At 15px root × 0.78 content-scale: 28.7 / 21.6 / 17.6 / 15.2px.\n       Body is floored to a 16px minimum below (max()) for readability;\n       the floor still yields to calc() when the user zooms the root up. */\n    --type-content-display: calc(2.45rem * var(--type-content-scale));\n    --type-content-title: calc(1.85rem * var(--type-content-scale));\n    --type-content-subtitle: calc(1.5rem * var(--type-content-scale));\n    --type-content-body: max(16px, calc(1.3rem * var(--type-content-scale)));\n\n    /* UI layer — pixel floors for touch targets */\n    --type-ui-title: max(16px, var(--type-secondary));\n    --type-ui-control: max(15px, var(--type-base));\n    --type-ui-meta: max(15px, var(--type-secondary));\n    --type-ui-hint: max(13px, var(--type-sm));\n    --type-ui-caption: max(13px, var(--type-xs));\n    --type-ui-micro: max(12px, var(--type-2xs));\n    --type-ui-input: max(16px, var(--type-secondary));\n    --type-thread-context: max(15px, var(--type-base));\n    --type-thread-context-title: max(16px, var(--type-secondary));\n    --type-thread-context-meta: max(14px, var(--type-sm));\n  }\n}\n";
 //#endregion
 //#region src/services/export-theme/theme.toml?raw
 var theme_default = "name = \"jant\"\nlicense = \"MIT\"\nlicenselink = \"https://github.com/jant-me/jant/blob/main/LICENSE\"\ndescription = \"Default theme packaged with Jant exports.\"\nhomepage = \"https://jant.so\"\ntags = [\"blog\", \"microblog\", \"minimal\"]\nfeatures = [\"pagination\", \"aliases\"]\nmin_version = \"0.160.1\"\n\n[author]\n  name = \"Jant\"\n  homepage = \"https://jant.so\"\n";
@@ -3310,7 +3310,7 @@ var client_site_default$1 = "var e=null,t=0,n=!1,r=null,i=null,a=0;function o(e)
 var client_site_default = "@keyframes lightbox-fade-in{0%{opacity:0}to{opacity:1}}@keyframes lightbox-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.media-lightbox{background:0 0;border:none;outline:none;width:100%;max-width:100%;height:100%;max-height:100%;padding:0}.media-lightbox[open]{animation:.2s both lightbox-fade-in}.media-lightbox::backdrop{background-color:#000}.media-lightbox-content{outline:none;width:100%;height:100dvh;position:relative}.media-lightbox-stage{box-sizing:border-box;justify-content:center;align-items:center;width:100%;height:100%;padding:64px 96px;display:flex;overflow:hidden}.media-lightbox-stage-scroll{overscroll-behavior:contain;scrollbar-gutter:stable both-edges;-webkit-overflow-scrolling:touch;align-items:flex-start;overflow:hidden auto}.media-lightbox-img{object-fit:contain;border-radius:4px;max-width:100%;max-height:100%;animation:.28s cubic-bezier(.22,1,.36,1) both lightbox-scale-in;display:block}.media-lightbox-img-zoomable{cursor:zoom-in}.media-lightbox-img-scroll{width:min(100%,44rem);max-width:none;height:auto;max-height:none;margin:0 auto}.media-lightbox-img-zoomable.media-lightbox-img-scroll{cursor:zoom-out}.media-lightbox-close{z-index:10;-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;background-color:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:background-color .15s;display:flex;position:fixed;top:16px;left:16px}.media-lightbox-close:hover{background-color:#000000b3}.media-lightbox-nav{z-index:10;-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;background-color:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:background-color .15s;display:flex;position:fixed;top:50%;transform:translateY(-50%)}.media-lightbox-nav:hover{background-color:#000000b3}.media-lightbox-nav-prev{left:16px}.media-lightbox-nav-next{right:16px}.media-lightbox-counter{z-index:10;font-size:var(--type-xs);color:#ffffffb3;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;position:fixed;top:20px;left:50%;transform:translate(-50%)}.media-lightbox-short-frame{max-width:100%;max-height:100%;display:block;position:relative}.media-lightbox-short-controls{z-index:2;pointer-events:none;height:86px;position:absolute;bottom:0;left:0;right:0}.media-lightbox-short-progress{--media-progress:0%;z-index:1;appearance:none;pointer-events:auto;cursor:pointer;background:0 0;width:auto;height:34px;margin:0;padding:0;display:block;position:absolute;bottom:0;left:16px;right:16px}.media-lightbox-short-progress::-webkit-slider-runnable-track{background:linear-gradient(to right, #ffffffeb 0, #ffffffeb var(--media-progress), #ffffff2e var(--media-progress), #ffffff2e 100%);border-radius:999px;height:2px;transition:height .15s,background .15s}.media-lightbox-short-progress::-webkit-slider-thumb{appearance:none;opacity:.82;background-color:#fff;border:none;border-radius:999px;width:10px;height:10px;margin-top:-4px;transition:opacity .15s,transform .15s;box-shadow:0 1px 4px #00000052}.media-lightbox-short-progress::-moz-range-track{background:#ffffff2e;border:none;border-radius:999px;height:2px}.media-lightbox-short-progress::-moz-range-progress{background:#ffffffeb;border-radius:999px;height:2px}.media-lightbox-short-progress::-moz-range-thumb{opacity:.82;background-color:#fff;border:none;border-radius:999px;width:10px;height:10px;transition:opacity .15s,transform .15s;box-shadow:0 1px 4px #00000052}.media-lightbox-short-controls-portrait .media-lightbox-short-progress{width:calc(100% - 48px);right:auto}.media-lightbox-short-progress:hover::-webkit-slider-runnable-track{height:4px}.media-lightbox-short-progress:focus-visible::-webkit-slider-runnable-track{height:4px}.media-lightbox-short-progress:hover::-moz-range-track{height:4px}.media-lightbox-short-progress:focus-visible::-moz-range-track{height:4px}.media-lightbox-short-progress:hover::-moz-range-progress{height:4px}.media-lightbox-short-progress:focus-visible::-moz-range-progress{height:4px}.media-lightbox-short-progress:hover::-webkit-slider-thumb{opacity:1;transform:scale(1.05)}.media-lightbox-short-progress:focus-visible::-webkit-slider-thumb{opacity:1;transform:scale(1.05)}.media-lightbox-short-progress:hover::-moz-range-thumb{opacity:1;transform:scale(1.05)}.media-lightbox-short-progress:focus-visible::-moz-range-thumb{opacity:1;transform:scale(1.05)}.media-lightbox-short-mute{z-index:2;color:#fff;pointer-events:auto;cursor:pointer;background-color:#777;border:none;border-radius:999px;justify-content:center;align-items:center;width:44px;height:44px;transition:background-color .15s,transform .15s;display:inline-flex;position:absolute;bottom:30px;right:24px}.media-lightbox-short-mute svg{flex-shrink:0;width:16px;height:16px;display:block}.media-lightbox-short-mute:hover{background-color:#686868;transform:scale(1.03)}.media-lightbox-short-mute:focus-visible{outline:none;box-shadow:0 0 0 3px #fff3}@media (max-width:640px){.media-lightbox-stage{padding:48px 16px}.media-lightbox-img{border-radius:0}.media-lightbox-img-scroll{width:100%}.media-lightbox-close{width:36px;height:36px;top:12px;left:12px}.media-lightbox-nav{width:36px;height:36px}.media-lightbox-nav-prev{left:8px}.media-lightbox-nav-next{right:8px}.media-lightbox-short-mute{bottom:26px;right:24px}}.media-visual-frame{border-radius:var(--media-radius,.5rem);background-color:var(--color-muted);display:block;overflow:hidden}.media-visual{background-position:50%;background-repeat:no-repeat;display:block}.media-video-wrap{position:relative}.media-video-link{cursor:pointer;display:block}.media-video-wrap video{object-fit:contain;background-color:var(--color-muted);width:100%;max-height:24rem}.media-video-wrap-short video{background-color:#000}.media-feed-video-mute{z-index:1;color:#fff;cursor:pointer;background-color:#00000080;border:none;border-radius:999px;justify-content:center;align-items:center;width:28px;height:28px;transition:background-color .15s,transform .15s;display:inline-flex;position:absolute;bottom:16px;right:16px}.media-feed-video-mute svg{width:12px;height:12px}.media-feed-video-mute:hover{background-color:#0000009e;transform:scale(1.03)}.media-feed-video-mute:focus-visible{outline:none;box-shadow:0 0 0 3px #fff3}.media-feed-video-icon{transition:opacity .15s,transform .15s;position:absolute}.media-feed-video-mute[data-muted=true] .media-feed-video-icon-muted,.media-feed-video-mute[data-muted=false] .media-feed-video-icon-unmuted{opacity:1;transform:scale(1)}.media-feed-video-mute[data-muted=true] .media-feed-video-icon-unmuted,.media-feed-video-mute[data-muted=false] .media-feed-video-icon-muted{opacity:0;transform:scale(.92)}.media-video-play-overlay{pointer-events:none;justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;inset:0}.media-video-play-overlay svg{filter:drop-shadow(0 2px 6px #0006);opacity:.85;width:48px;height:48px}.media-gallery-card.media-audio-card{flex-direction:column;display:flex}.media-audio-card .media-audio-el{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.media-audio-card .media-audio-artwork{background:linear-gradient(160deg,#8080801f 0%,#80808008 100%);flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.media-audio-card .media-audio-artwork svg{width:32px;height:32px;color:var(--site-text-secondary);opacity:.3}.media-audio-card .media-audio-waveform{cursor:pointer;touch-action:none;width:100%;height:24px;display:none}.media-audio-card.has-waveform .media-audio-waveform{display:block}.media-audio-card.has-waveform .media-audio-range{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.media-audio-card .media-audio-controls{flex-direction:column;flex-shrink:0;padding:0 0 6px;display:flex}.media-audio-card .media-audio-range{appearance:none;cursor:pointer;touch-action:none;background:0 0;width:100%;height:20px;margin:0;padding:0}.media-audio-card .media-audio-range::-webkit-slider-runnable-track{background:#80808026;border-radius:1.5px;height:3px}.media-audio-card .media-audio-range::-moz-range-track{background:#80808026;border:none;border-radius:1.5px;height:3px}.media-audio-card .media-audio-range::-moz-range-progress{background:var(--site-text-primary);border-radius:1.5px;height:3px}.media-audio-card .media-audio-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--site-text-primary);opacity:0;border:none;border-radius:50%;width:10px;height:10px;margin-top:-3.5px;transition:opacity .15s}.media-audio-card .media-audio-range:hover::-webkit-slider-thumb{opacity:1}.media-audio-card.is-playing .media-audio-range::-webkit-slider-thumb{opacity:1}.media-audio-card .media-audio-range::-moz-range-thumb{background:var(--site-text-primary);opacity:0;border:none;border-radius:50%;width:10px;height:10px;transition:opacity .15s}.media-audio-card .media-audio-range:hover::-moz-range-thumb{opacity:1}.media-audio-card.is-playing .media-audio-range::-moz-range-thumb{opacity:1}.media-audio-card .media-audio-range:focus-visible{outline:2px solid var(--site-text-primary);outline-offset:2px;border-radius:2px}.media-audio-card .media-audio-row{align-items:center;gap:6px;min-width:0;padding:6px 8px 0;display:flex}.media-audio-card .media-audio-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.media-audio-card .media-audio-title{font-size:var(--type-2xs);font-weight:var(--fw-medium,500);color:var(--site-text-primary);text-overflow:ellipsis;white-space:nowrap;line-height:1.3;overflow:hidden}.media-audio-card .media-audio-time{font-size:var(--type-2xs);color:var(--site-text-secondary);font-variant-numeric:tabular-nums;line-height:1}.media-audio-card .media-audio-play-btn{cursor:pointer;background:var(--site-text-primary);width:28px;height:28px;color:var(--background,#fff);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .12s;display:flex}.media-audio-card .media-audio-play-btn:hover{transform:scale(1.1)}.media-audio-card .media-audio-play-btn:active{transform:scale(.92)}.media-audio-card .media-audio-play-btn svg{width:14px;height:14px}.media-audio-card .media-audio-icon-play{margin-left:2px}.media-audio-card .media-audio-icon-pause,.media-audio-card.is-playing .media-audio-icon-play{display:none}.media-audio-card.is-playing .media-audio-icon-pause{display:block}.media-gallery-card{color:var(--site-text-primary);border-radius:var(--media-radius,.5rem);background-color:var(--site-nav-hover-bg);border:1px solid var(--site-divider);text-decoration:none;transition:background-color .15s;display:block;overflow:hidden}a.media-gallery-card:hover,button.media-gallery-card:hover{background-color:var(--site-divider)}button.media-gallery-card{cursor:pointer;font:inherit;text-align:inherit}.media-gallery-card-inner{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:100%;padding:16px 12px;display:flex}.media-gallery-card-icon{color:var(--site-text-secondary);opacity:.6}.media-gallery-card-summary{font-size:var(--type-xs);color:var(--site-text-secondary);-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;line-height:1.4;display:-webkit-box;overflow:hidden}.media-gallery-card-meta{font-size:var(--type-xs);color:var(--site-text-secondary)}.media-lightbox-video{background-color:#000;border-radius:4px;outline:none;max-width:100%;max-height:100%;animation:.28s cubic-bezier(.22,1,.36,1) both lightbox-scale-in}.media-lightbox-video:focus,.media-lightbox-video:focus-visible{outline:none}.media-lightbox-video-short{object-fit:contain;width:100%;max-width:none;height:100%;max-height:none;display:block}@media (max-width:640px){.media-lightbox-video{border-radius:0}}[data-post-media] img{background:0 0}.media-gallery-scroll-wrap{position:relative}.media-gallery-nav{z-index:2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;opacity:0;pointer-events:none;background-color:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;padding:0;transition:opacity .15s,background-color .15s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.media-gallery-nav:hover{background-color:#000000b3}.media-gallery-nav svg{width:18px;height:18px;display:block}.media-gallery-nav-prev{left:8px}.media-gallery-nav-next{right:8px}@media (hover:hover) and (pointer:fine){.media-gallery-scroll-wrap.can-scroll-start:hover .media-gallery-nav-prev,.media-gallery-scroll-wrap.can-scroll-end:hover .media-gallery-nav-next{opacity:1;pointer-events:auto}}.media-gallery-scroll-wrap>[data-post-media]:focus-visible{outline:2px solid var(--site-text-primary);outline-offset:2px;border-radius:4px}\n/*$vite$:1*/";
 //#endregion
 //#region src/services/export-theme/layouts/_default/baseof.html?raw
-var baseof_default = "<!doctype html>\n{{- $lang := .Site.LanguageCode | default \"en\" -}}\n{{- $themeMode := .Site.Params.theme_mode | default \"auto\" -}}\n<html lang=\"{{ $lang }}\"{{ if ne $themeMode \"auto\" }} data-theme-mode=\"{{ $themeMode }}\"{{ end }}>\n  <head>\n    {{ partial \"head.html\" . }}\n  </head>\n  <body>\n    <div class=\"site-page\">\n      {{ partial \"header.html\" . }}\n      <main class=\"site-main\" id=\"main\">\n        {{ block \"main\" . }}{{ end }}\n      </main>\n      {{ partial \"footer.html\" . }}\n    </div>\n    {{/* Mount the shared media lightbox web component once per page.\n         The component installs a document-level click listener on connect\n         and intercepts clicks on [data-post-media] a[data-lightbox-index]. */}}\n    <jant-media-lightbox></jant-media-lightbox>\n  </body>\n</html>\n";
+var baseof_default = "<!doctype html>\n{{- $lang := .Site.LanguageCode | default \"en\" -}}\n{{- $themeMode := .Site.Params.theme_mode | default \"auto\" -}}\n{{- $themeId := .Site.Params.theme_id -}}\n<html lang=\"{{ $lang }}\"{{ with $themeId }} data-theme=\"{{ . }}\"{{ end }}{{ if ne $themeMode \"auto\" }} data-theme-mode=\"{{ $themeMode }}\"{{ end }}>\n  <head>\n    {{ partial \"head.html\" . }}\n  </head>\n  <body>\n    <div class=\"site-page\">\n      {{ partial \"header.html\" . }}\n      <main class=\"site-main\" id=\"main\">\n        {{ block \"main\" . }}{{ end }}\n      </main>\n      {{ partial \"footer.html\" . }}\n    </div>\n    {{/* Mount the shared media lightbox web component once per page.\n         The component installs a document-level click listener on connect\n         and intercepts clicks on [data-post-media] a[data-lightbox-index]. */}}\n    <jant-media-lightbox></jant-media-lightbox>\n  </body>\n</html>\n";
 //#endregion
 //#region src/services/export-theme/layouts/_default/single.html?raw
 var single_default$1 = "{{ define \"main\" }}\n  <article class=\"page\">\n    {{- with .Title -}}\n      <header class=\"page-header\">\n        <h1 class=\"page-title\">{{ . }}</h1>\n      </header>\n    {{- end -}}\n    {{- with .Params.summary_text -}}\n      <p class=\"page-summary\">{{ . }}</p>\n    {{- end -}}\n    <div class=\"page-body\">\n      {{ .Content }}\n    </div>\n  </article>\n{{ end }}\n";

package/dist/{github-sync-_kPWM4m9.js → github-sync-7XQ5ZM6z.js}

@@ -1,4 +1,4 @@
 import "./url-BMYO-Zlt.js";
-import "./export-Be082J0n.js";
-import { i as classifyRepoForSync, o as createGitHubSyncService } from "./github-sync-D1Cw8mOY.js";
+import "./export-C2DIB7mm.js";
+import { i as classifyRepoForSync, o as createGitHubSyncService } from "./github-sync-BEFCfLKK.js";
 export { classifyRepoForSync, createGitHubSyncService };

package/dist/{github-sync-D1Cw8mOY.js → github-sync-BEFCfLKK.js}

@@ -1,4 +1,4 @@
-import { c as parseMarkdownDocument, r as parseFrontMatter, t as createExportService } from "./export-Be082J0n.js";
+import { c as parseMarkdownDocument, r as parseFrontMatter, t as createExportService } from "./export-C2DIB7mm.js";
 import { r as getInstallationToken } from "./github-app-BbklkFmU.js";
 import { r as parseRepoSlug, t as createGitHubClient } from "./github-api-BgSiE71w.js";
 //#region src/lib/markdown-to-tiptap.ts

package/dist/index.js

@@ -1,6 +1,6 @@
 import { y as url_exports } from "./url-BMYO-Zlt.js";
-import { A as MAX_MEDIA_ATTACHMENTS, C as toMediaView, D as toPostViews, E as toPostView, F as STATUSES, I as TEXT_ATTACHMENT_CONTENT_FORMATS, M as MEDIA_KINDS, N as NAV_ITEM_TYPES, O as toSearchResultView, P as SORT_ORDERS, S as toArchiveGroupsWithMedia, T as toNavItemViews, b as createMediaContext, h as defaultFeedRenderer, j as MAX_PINNED_POSTS, k as FORMATS, t as createApp, w as toNavItemView, x as toArchiveGroups } from "./app-9P4rVCe2.js";
-import { T as time_exports, a as markdown_exports } from "./export-Be082J0n.js";
+import { A as MAX_MEDIA_ATTACHMENTS, C as toMediaView, D as toPostViews, E as toPostView, F as STATUSES, I as TEXT_ATTACHMENT_CONTENT_FORMATS, M as MEDIA_KINDS, N as NAV_ITEM_TYPES, O as toSearchResultView, P as SORT_ORDERS, S as toArchiveGroupsWithMedia, T as toNavItemViews, b as createMediaContext, j as MAX_PINNED_POSTS, k as FORMATS, m as defaultFeedRenderer, t as createApp, w as toNavItemView, x as toArchiveGroups } from "./app-C-jxWmAV.js";
+import { T as time_exports, a as markdown_exports } from "./export-C2DIB7mm.js";
 import "./env-OHRKGcMj.js";
-import "./github-sync-D1Cw8mOY.js";
+import "./github-sync-BEFCfLKK.js";
 export { FORMATS, MAX_MEDIA_ATTACHMENTS, MAX_PINNED_POSTS, MEDIA_KINDS, NAV_ITEM_TYPES, SORT_ORDERS, STATUSES, TEXT_ATTACHMENT_CONTENT_FORMATS, createApp, createMediaContext, defaultFeedRenderer, markdown_exports as markdown, time_exports as time, toArchiveGroups, toArchiveGroupsWithMedia, toMediaView, toNavItemView, toNavItemViews, toPostView, toPostViews, toSearchResultView, url_exports as url };

package/dist/node.js

@@ -1,8 +1,8 @@
 import "./url-BMYO-Zlt.js";
-import { B as isAssetPath, L as buildThemeStyle, R as BUILTIN_COLOR_THEMES, _ as sqliteSchemaBundle, a as resolveDatabaseDialect, c as resolveConfig, d as setWebhook, f as BUILTIN_FONT_THEMES, g as pgSchemaBundle, i as createSiteService, l as getWebhookUrl, m as getFontThemeCssVariables, n as createNodeCliRuntime, o as getHostBasedStartupConfigurationIssues, p as getCjkSerifCssVariables, r as createNodeRequestRuntime, s as createStorageDriver, t as createApp, u as setMyCommands, v as createNodeDatabase, y as schema_exports, z as getPublicAssetBasePath } from "./app-9P4rVCe2.js";
-import { t as createExportService } from "./export-Be082J0n.js";
+import { B as isAssetPath, L as buildThemeStyle, R as BUILTIN_COLOR_THEMES, _ as sqliteSchemaBundle, a as resolveDatabaseDialect, c as getWebhookUrl, d as BUILTIN_FONT_THEMES, f as getCjkSerifCssVariables, g as pgSchemaBundle, h as createStorageDriver, i as createSiteService, l as setMyCommands, n as createNodeCliRuntime, o as getHostBasedStartupConfigurationIssues, p as getFontThemeCssVariables, r as createNodeRequestRuntime, s as resolveConfig, t as createApp, u as setWebhook, v as createNodeDatabase, y as schema_exports, z as getPublicAssetBasePath } from "./app-C-jxWmAV.js";
+import { t as createExportService } from "./export-C2DIB7mm.js";
 import { C as shouldTrustProxy, S as getTelegramWebhookSecret, b as getSiteResolutionMode, d as getHostedControlPlaneBaseUrl, i as getConfiguredSingleSitePathPrefix, l as getEnvString, r as getConfiguredSingleSiteOrigin, x as getTelegramBotPool, y as getPort } from "./env-OHRKGcMj.js";
-import "./github-sync-D1Cw8mOY.js";
+import "./github-sync-BEFCfLKK.js";
 import { drizzle } from "drizzle-orm/better-sqlite3";
 import { serve } from "@hono/node-server";
 import Database from "better-sqlite3";
@@ -529,7 +529,7 @@ async function createNodeRequestHandler(options) {
 async function start(env = process.env, app) {
 	const handler = await createNodeRequestHandler({
 		env,
-		app: async () => app ?? (await import("./app-DaxS_Cz-.js")).createApp()
+		app: async () => app ?? (await import("./app-DqHzOwL5.js")).createApp()
 	});
 	const hostname = resolveHost(env);
 	const port = resolvePort(env);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jant/core",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "description": "A modern, open-source microblogging platform built on Cloudflare Workers",
   "type": "module",
   "exports": {

package/src/client/components/__tests__/jant-settings-avatar.test.ts

@@ -38,10 +38,13 @@ const labels: SettingsLabels = {
   siteName: "Site Name",
   aboutBlog: "About this blog",
   aboutBlogHelp: "Displayed above your blog posts.",
-  siteLanguage: "Site Language",
-  siteLanguageHelp: "Language used for the site UI.",
+  siteLanguage: "Content language",
+  siteLanguageHelp: "The language your posts are written in.",
   siteLanguageSearchPlaceholder: "Search…",
   siteLanguageNoMatches: "No matches.",
+  contentLanguagePreview: "Readers and search engines see",
+  dashboardLanguage: "Dashboard language",
+  dashboardLanguageHelp: "The language this admin dashboard shows in.",
   cjkFont: "CJK Font",
   cjkFontHelp:
     "Load a serif font optimized for Chinese, Japanese, or Korean content.",

package/src/client/components/__tests__/jant-settings-general.test.ts

@@ -5,6 +5,7 @@ import type {
   SettingsLabels,
   SettingsTimezone,
   SettingsCjkFont,
+  SettingsDashboardLanguage,
   SettingsSaveDetail,
 } from "../settings-types.js";
 import { MAX_SITE_NAME_LENGTH } from "../../../types.js";
@@ -81,10 +82,13 @@ const labels: SettingsLabels = {
   siteName: "Site Name",
   aboutBlog: "About this blog",
   aboutBlogHelp: "Displayed above your blog posts.",
-  siteLanguage: "Site Language",
-  siteLanguageHelp: "Language used for the site UI.",
+  siteLanguage: "Content language",
+  siteLanguageHelp: "The language your posts are written in.",
   siteLanguageSearchPlaceholder: "Search…",
   siteLanguageNoMatches: "No matches.",
+  contentLanguagePreview: "Readers and search engines see",
+  dashboardLanguage: "Dashboard language",
+  dashboardLanguageHelp: "The language this admin dashboard shows in.",
   cjkFont: "CJK Font",
   cjkFontHelp:
     "Load a serif font optimized for Chinese, Japanese, or Korean content.",
@@ -127,10 +131,17 @@ const cjkFonts: SettingsCjkFont[] = [
   { value: "zh-Hans", label: "简体中文 (Simplified Chinese)" },
 ];
 
+const dashboardLanguages: SettingsDashboardLanguage[] = [
+  { value: "en", label: "English" },
+  { value: "zh-Hans", label: "简体中文" },
+  { value: "zh-Hant", label: "繁體中文" },
+];
+
 const initialData = {
   siteName: "My Blog",
   siteDescription: "A test blog",
   siteLanguage: "en",
+  dashboardLanguage: "en",
   cjkSerifFont: "off",
   timeZone: "UTC",
   mainRssFeed: "featured",
@@ -161,6 +172,7 @@ async function createElement(
   el.labels = labels;
   el.timezones = timezones;
   el.cjkFonts = cjkFonts;
+  el.dashboardLanguages = dashboardLanguages;
   el.siteNameFallback = "Fallback Name";
   el.siteDescriptionFallback = "Fallback Description";
   el.mainFeedUrl = "/feed";
@@ -239,10 +251,11 @@ describe("JantSettingsGeneral", () => {
     expect(trigger.getAttribute("aria-expanded")).toBe("true");
 
     const options = el.querySelectorAll<HTMLButtonElement>('[role="option"]');
+    // The content-language picker lists the full BCP 47 catalog so any public
+    // content language is reachable. Coverage / raw tags are not shown here.
     expect(options.length).toBeGreaterThanOrEqual(20);
-    // Each option carries the universal "translated" coverage suffix.
     for (const option of options) {
-      expect(option.textContent).toMatch(/% translated/);
+      expect(option.textContent).not.toMatch(/% translated/);
     }
 
     const search = requireElement(
@@ -258,7 +271,7 @@ describe("JantSettingsGeneral", () => {
     expect(filtered[0]?.textContent).toMatch(/Suomi|Finnish/);
   });
 
-  it("selects a non-catalog locale and reports 0% translated coverage on it", async () => {
+  it("selects a non-catalog content language and shows its native name", async () => {
     const el = await createElement();
     const trigger = requireElement(
       el.querySelector<HTMLButtonElement>(
@@ -285,9 +298,43 @@ describe("JantSettingsGeneral", () => {
 
     // Picker closes after selection.
     expect(trigger.getAttribute("aria-expanded")).toBe("false");
-    // Trigger reflects the new tag and shows 0% coverage.
-    expect(trigger.textContent).toMatch(/fi/);
-    expect(trigger.textContent).toMatch(/0% translated/);
+    // Trigger shows the selected language's native name only — no raw BCP 47
+    // tag, no coverage metric.
+    expect(trigger.textContent).toMatch(/suomi|finnish/i);
+    expect(trigger.textContent).not.toMatch(/% translated/);
+    expect(trigger.textContent).not.toMatch(/\bfi\b/);
+  });
+
+  it("renders dashboard language options and saves the selection", async () => {
+    const el = await createElement();
+    const select = requireElement(
+      el.querySelector(
+        'select[aria-labelledby="dashboard-language-label"]',
+      ) as globalThis.HTMLSelectElement | null,
+      "expected dashboard language select",
+    );
+    const values = Array.from(select.options).map((o) => o.value);
+    expect(values).toEqual(["en", "zh-Hans", "zh-Hant"]);
+    expect(select.value).toBe("en");
+
+    const saves: SettingsSaveDetail[] = [];
+    el.addEventListener("jant:settings-save", (e) => {
+      saves.push((e as CustomEvent<SettingsSaveDetail>).detail);
+    });
+
+    select.value = "zh-Hant";
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+    await el.updateComplete;
+
+    const saveButton = requireElement(
+      findSaveButtonByHeading(el, labels.languageAndTime),
+      "expected language & time save button",
+    );
+    saveButton.click();
+
+    expect(saves).toHaveLength(1);
+    expect(saves[0]?.endpoint).toBe("/settings/general/language-time");
+    expect(saves[0]?.data.dashboardLanguage).toBe("zh-Hant");
   });
 
   it("renders CJK font options", async () => {

package/src/client/components/jant-compose-dialog.ts

@@ -5350,6 +5350,18 @@ export class JantComposeDialog extends LitElement {
             i === index ? { ...it, format: e.detail.format } : it,
           );
           this._format = e.detail.format;
+          // Move focus to the new format's input, mirroring the single-post
+          // composer's `_switchFormat`. The editor re-renders its fields only
+          // after both this dialog and the editor itself finish updating, so
+          // wait for both before routing focus to the now-visible control.
+          if (this._shouldAutofocusFormatInput()) {
+            this.updateComplete.then(() => {
+              const editor = this.querySelectorAll<JantComposeEditor>(
+                "jant-compose-editor",
+              )[index];
+              editor?.updateComplete.then(() => editor.focusInput());
+            });
+          }
         }}
         @jant:thread-remove=${(e: Event) => {
           e.stopPropagation();

package/src/client/components/jant-settings-general.ts

@@ -20,6 +20,7 @@ import type {
   SettingsLabels,
   SettingsTimezone,
   SettingsCjkFont,
+  SettingsDashboardLanguage,
 } from "./settings-types.js";
 import { showToast } from "../toast.js";
 import {
@@ -37,6 +38,7 @@ export class JantSettingsGeneral extends LitElement {
       type: String,
       attribute: "sitedescription-fallback",
     },
+    dashboardLanguages: { type: Array, attribute: "dashboard-languages" },
     demoMode: { type: Boolean, attribute: "demo-mode" },
     mainFeedUrl: { type: String, attribute: "main-feed-url" },
     latestFeedUrl: { type: String, attribute: "latest-feed-url" },
@@ -52,6 +54,7 @@ export class JantSettingsGeneral extends LitElement {
 
     // Language, CJK & time group
     _siteLanguage: { state: true },
+    _dashboardLanguage: { state: true },
     _localeOpen: { state: true },
     _localeQuery: { state: true },
     _cjkSerifFont: { state: true },
@@ -80,6 +83,7 @@ export class JantSettingsGeneral extends LitElement {
   declare labels: SettingsLabels;
   declare timezones: SettingsTimezone[];
   declare cjkFonts: SettingsCjkFont[];
+  declare dashboardLanguages: SettingsDashboardLanguage[];
   declare siteNameFallback: string;
   declare siteDescriptionFallback: string;
   declare demoMode: boolean;
@@ -101,6 +105,8 @@ export class JantSettingsGeneral extends LitElement {
 
   // Language, CJK & time
   declare _siteLanguage: string;
+  /** Admin dashboard UI locale (one of the translated catalog locales). */
+  declare _dashboardLanguage: string;
   /** Whether the locale combobox dropdown is currently open. */
   declare _localeOpen: boolean;
   /** Search query inside the locale combobox. */
@@ -109,6 +115,7 @@ export class JantSettingsGeneral extends LitElement {
   declare _timeZone: string;
   declare _origLocale: {
     siteLanguage: string;
+    dashboardLanguage: string;
     cjkSerifFont: string;
     timeZone: string;
   };
@@ -145,6 +152,7 @@ export class JantSettingsGeneral extends LitElement {
     this.labels = {} as SettingsLabels;
     this.timezones = [];
     this.cjkFonts = [];
+    this.dashboardLanguages = [];
     this.siteNameFallback = "";
     this.siteDescriptionFallback = "";
     this.demoMode = false;
@@ -164,12 +172,14 @@ export class JantSettingsGeneral extends LitElement {
     this._siteLoading = false;
 
     this._siteLanguage = "en";
+    this._dashboardLanguage = "en";
     this._localeOpen = false;
     this._localeQuery = "";
     this._cjkSerifFont = "off";
     this._timeZone = "UTC";
     this._origLocale = {
       siteLanguage: "en",
+      dashboardLanguage: "en",
       cjkSerifFont: "off",
       timeZone: "UTC",
     };
@@ -213,10 +223,12 @@ export class JantSettingsGeneral extends LitElement {
     this._siteFooter = data.siteFooter;
 
     this._siteLanguage = data.siteLanguage;
+    this._dashboardLanguage = data.dashboardLanguage;
     this._cjkSerifFont = data.cjkSerifFont;
     this._timeZone = data.timeZone;
     this._origLocale = {
       siteLanguage: data.siteLanguage,
+      dashboardLanguage: data.dashboardLanguage,
       cjkSerifFont: data.cjkSerifFont,
       timeZone: data.timeZone,
     };
@@ -255,6 +267,7 @@ export class JantSettingsGeneral extends LitElement {
     } else if (section === "language-time") {
       this._origLocale = {
         siteLanguage: this._siteLanguage,
+        dashboardLanguage: this._dashboardLanguage,
         cjkSerifFont: this._cjkSerifFont,
         timeZone: this._timeZone,
       };
@@ -381,6 +394,7 @@ export class JantSettingsGeneral extends LitElement {
   private _syncLocaleDirty() {
     this._localeDirty =
       this._siteLanguage !== this._origLocale.siteLanguage ||
+      this._dashboardLanguage !== this._origLocale.dashboardLanguage ||
       this._cjkSerifFont !== this._origLocale.cjkSerifFont ||
       this._timeZone !== this._origLocale.timeZone;
   }
@@ -395,6 +409,7 @@ export class JantSettingsGeneral extends LitElement {
           endpoint: "/settings/general/language-time",
           data: {
             siteLanguage: this._siteLanguage,
+            dashboardLanguage: this._dashboardLanguage,
             cjkSerifFont: this._cjkSerifFont,
             timeZone: this._timeZone,
           },
@@ -465,28 +480,22 @@ export class JantSettingsGeneral extends LitElement {
     const noMatches = this.labels.siteLanguageNoMatches || "No matches.";
 
     return html`
-      <div class="relative" data-locale-picker>
+      <div class="relative w-fit max-w-full" data-locale-picker>
         <button
           type="button"
-          class="input flex w-full items-center justify-between text-left"
+          class="flex h-9 w-full cursor-pointer items-center rounded-md border border-input bg-transparent bg-[image:var(--chevron-down-icon-50)] bg-position-[center_right_0.75rem] bg-size-[1rem] bg-no-repeat py-2 pl-3 pr-9 text-left text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50"
           aria-expanded=${this._localeOpen ? "true" : "false"}
           aria-haspopup="listbox"
           aria-labelledby="site-language-label"
           @click=${this._toggleLocalePicker}
         >
-          <span class="truncate">
-            ${current.native}
-            <span class="ml-2 text-xs text-muted-foreground">
-              ${current.tag} · ${Math.round(current.coverage * 100)}% translated
-            </span>
-          </span>
-          <span class="ml-2 text-muted-foreground" aria-hidden="true">▾</span>
+          <span class="min-w-0 truncate">${current.native}</span>
         </button>
 
         ${this._localeOpen
           ? html`
               <div
-                class="absolute left-0 right-0 top-full z-10 mt-1 max-h-72 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md"
+                class="absolute left-0 top-full z-10 mt-1 w-80 min-w-full max-w-[calc(100vw-2rem)] max-h-72 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md"
               >
                 <div class="border-b p-2">
                   <input
@@ -518,21 +527,16 @@ export class JantSettingsGeneral extends LitElement {
                               ? "true"
                               : "false"}
                             class=${[
-                              "flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-accent",
+                              "flex w-full flex-col px-3 py-2 text-left text-sm hover:bg-accent",
                               entry.tag === this._siteLanguage
                                 ? "bg-accent/60"
                                 : "",
                             ].join(" ")}
                             @click=${() => this._selectLocale(entry.tag)}
                           >
-                            <span class="flex flex-col">
-                              <span>${entry.native}</span>
-                              <span class="text-xs text-muted-foreground">
-                                ${entry.tag} · ${entry.english}
-                              </span>
-                            </span>
+                            <span>${entry.native}</span>
                             <span class="text-xs text-muted-foreground">
-                              ${Math.round(entry.coverage * 100)}% translated
+                              ${entry.english}
                             </span>
                           </button>
                         `,
@@ -819,6 +823,40 @@ export class JantSettingsGeneral extends LitElement {
             <p class="text-sm text-muted-foreground mt-1">
               ${this.labels.siteLanguageHelp}
             </p>
+            <p class="text-sm text-muted-foreground mt-1">
+              ${this.labels.contentLanguagePreview}
+              <code class="rounded bg-muted px-1.5 py-0.5 text-xs"
+                >${`<html lang="${this._siteLanguage || "en"}">`}</code
+              >
+            </p>
+          </div>
+
+          <div class="field">
+            <label id="dashboard-language-label" class="label"
+              >${this.labels.dashboardLanguage}</label
+            >
+            <select
+              class="select"
+              aria-labelledby="dashboard-language-label"
+              @change=${(e: Event) => {
+                this._dashboardLanguage = (e.target as HTMLSelectElement).value;
+                this._syncLocaleDirty();
+              }}
+            >
+              ${this.dashboardLanguages.map(
+                (lang) => html`
+                  <option
+                    value=${lang.value}
+                    ?selected=${this._dashboardLanguage === lang.value}
+                  >
+                    ${lang.label}
+                  </option>
+                `,
+              )}
+            </select>
+            <p class="text-sm text-muted-foreground mt-1">
+              ${this.labels.dashboardLanguageHelp}
+            </p>
           </div>
 
           <div class="field">

package/src/client/components/settings-types.ts

@@ -47,6 +47,10 @@ export interface SettingsLabels {
   siteLanguageSearchPlaceholder: string;
   /** Empty-state message when the search filters out every option. */
   siteLanguageNoMatches: string;
+  /** Lead text before the live `<html lang>` preview. */
+  contentLanguagePreview: string;
+  dashboardLanguage: string;
+  dashboardLanguageHelp: string;
   cjkFont: string;
   cjkFontHelp: string;
   timeZone: string;
@@ -75,10 +79,17 @@ export interface SettingsCjkFont {
   label: string;
 }
 
+/** Dashboard UI language option for the select dropdown */
+export interface SettingsDashboardLanguage {
+  value: string;
+  label: string;
+}
+
 export interface SettingsInitialData {
   siteName: string;
   siteDescription: string;
   siteLanguage: string;
+  dashboardLanguage: string;
   cjkSerifFont: string;
   mainRssFeed: string;
   timeZone: string;

package/src/client/settings-bridge.ts

@@ -20,6 +20,8 @@ function parseSettingsInitialData(data: unknown): SettingsInitialData | null {
   const siteName = getJsonString(data, "siteName");
   const siteDescription = getJsonString(data, "siteDescription");
   const siteLanguage = getJsonString(data, "siteLanguage");
+  // Tolerate older payloads without the key: empty = follow content language.
+  const dashboardLanguage = getJsonString(data, "dashboardLanguage") ?? "";
   const cjkSerifFont = getJsonString(data, "cjkSerifFont");
   const mainRssFeed = getJsonString(data, "mainRssFeed");
   const timeZone = getJsonString(data, "timeZone");
@@ -45,6 +47,7 @@ function parseSettingsInitialData(data: unknown): SettingsInitialData | null {
     siteName,
     siteDescription,
     siteLanguage,
+    dashboardLanguage,
     cjkSerifFont,
     mainRssFeed,
     timeZone,