ompchamber 1.2.1 → 2.0.0

package/src/shared/lib/theme/catalog.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The theme catalog: every palette the chamber can paint, the lookups the whole
+ * app resolves a stored theme id through, and the light/dark verdict that used
+ * to be re-derived by hand in four places (`hooks/ui/theme.ts`,
+ * `code/shiki-themes.ts`, `markdown/mermaid.ts`, `server/plugins/ssr.ts`) — each
+ * with its own hardcoded id list that a new theme would have silently missed.
+ *
+ * Pure data plus pure functions: no DOM, no CSS, no server imports, so the
+ * client, the SSR shell and the tests all read the same catalog.
+ */
+
+import type { ThemePalette, ThemeSwatch } from '@/shared/types/theme';
+import { CHAMBER_PALETTES } from '@/shared/lib/theme/palettes/chamber';
+import { DARK_PALETTES } from '@/shared/lib/theme/palettes/dark';
+import { LIGHT_PALETTES } from '@/shared/lib/theme/palettes/light';
+
+/** The shipped default, and the fallback for any id the catalog does not know. */
+export const DEFAULT_THEME_ID = 'paper';
+
+/**
+ * Every id in the catalog, as a literal union. `SettingsState.theme` is typed
+ * with it, so a typo — or a theme dropped from the catalog — is a compile error
+ * at the writer instead of an unstyled page at runtime.
+ */
+export type ThemeId =
+  | (typeof CHAMBER_PALETTES)[number]['id']
+  | (typeof LIGHT_PALETTES)[number]['id']
+  | (typeof DARK_PALETTES)[number]['id'];
+
+const ALL_PALETTES = [...CHAMBER_PALETTES, ...LIGHT_PALETTES, ...DARK_PALETTES];
+
+const BY_ID: Record<string, ThemePalette | undefined> = Object.fromEntries(
+  ALL_PALETTES.map((theme) => [theme.id, theme]),
+);
+
+const DEFAULT_PALETTE: ThemePalette = CHAMBER_PALETTES[0];
+
+/**
+ * Every palette, in appearance-grid order: the chamber's own three first (the
+ * ones an existing install is already using), then each ported family with its
+ * light and dark entry adjacent.
+ *
+ * Pairing is by family key rather than by array index, so a re-port that
+ * updates one variant of a family cannot silently shift every pair after it.
+ */
+export const THEMES: readonly ThemePalette[] = (() => {
+  const families = new Map<string, ThemePalette[]>();
+  for (const palette of [...LIGHT_PALETTES, ...DARK_PALETTES]) {
+    const group = families.get(palette.family);
+    if (group) group.push(palette);
+    else families.set(palette.family, [palette]);
+  }
+  return [...CHAMBER_PALETTES, ...[...families.values()].flat()];
+})();
+
+/**
+ * Resolve a stored theme id to a palette the catalog can actually paint.
+ *
+ * A settings row can name a theme this build no longer ships — a downgrade, or
+ * the `noir` alias that was byte-identical to `one-dark-pro-soft` and is gone.
+ * Every reader goes through here, so an unknown id renders the default instead
+ * of an unstyled page.
+ */
+export function resolveTheme(id: string | undefined | null): ThemePalette {
+  return (id ? BY_ID[id] : undefined) ?? DEFAULT_PALETTE;
+}
+
+export function isDarkTheme(id: string | undefined | null): boolean {
+  return resolveTheme(id).variant === 'dark';
+}
+
+/**
+ * The catalog's own id for `id`, falling back to the default.
+ *
+ * The single narrowing point between a runtime string (a stored setting, a
+ * button's payload) and `ThemeId`: every palette's `id` is one of the union's
+ * members by construction, which is the fact the cast asserts.
+ */
+export function resolveThemeId(id: string | undefined | null): ThemeId {
+  return resolveTheme(id).id as ThemeId;
+}
+
+/** The eight slots a palette card shows, in paint order. */
+export const THEME_SWATCHES: readonly ThemeSwatch[] = [
+  { key: 'canvas', label: 'Canvas' },
+  { key: 'paper', label: 'Surface' },
+  { key: 'ink', label: 'Ink' },
+  { key: 'error', label: 'Error' },
+  { key: 'success', label: 'Success' },
+  { key: 'info', label: 'Info' },
+  { key: 'warning', label: 'Warning' },
+  { key: 'meta', label: 'Accent' },
+];

package/src/shared/lib/theme/color.ts

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Hex color arithmetic for the places that cannot use CSS.
+ *
+ * `color-mix()` covers every blend inside the document, but xterm parses theme
+ * colors itself (it accepts `#rgb`, `#rrggbb`, `rgb()`, `hsl()` and named
+ * colors — not `color-mix()`, in either the DOM or the WebGL renderer), so the
+ * terminal palette has to be computed here and handed over as literal hex.
+ *
+ * The palette values are ported verbatim from OpenChamber and are therefore not
+ * uniform: `#FFF` (jetbrains-light) and 8-digit alpha (`#dbd7caee`,
+ * vitesse-dark) both appear, and a blend has to composite the alpha rather than
+ * pretend it is opaque.
+ */
+
+export interface Rgba {
+  r: number;
+  g: number;
+  b: number;
+  /** 0–1. */
+  a: number;
+}
+
+const HEX_SHORT = /^#?([0-9a-f]{3})$/i;
+const HEX_LONG = /^#?([0-9a-f]{6})$/i;
+const HEX_ALPHA = /^#?([0-9a-f]{8})$/i;
+
+/** Parse `#rgb`, `#rrggbb` or `#rrggbbaa`. `null` for anything else. */
+export function parseHexColor(value: string): Rgba | null {
+  const trimmed = value.trim();
+  const short = HEX_SHORT.exec(trimmed);
+  if (short) {
+    const [r, g, b] = short[1].split('');
+    return { r: parseInt(r + r, 16), g: parseInt(g + g, 16), b: parseInt(b + b, 16), a: 1 };
+  }
+  const long = HEX_LONG.exec(trimmed);
+  if (long) {
+    const n = parseInt(long[1], 16);
+    return { r: (n >> 16) & 0xff, g: (n >> 8) & 0xff, b: n & 0xff, a: 1 };
+  }
+  const alpha = HEX_ALPHA.exec(trimmed);
+  if (alpha) {
+    const n = parseInt(alpha[1], 16);
+    return { r: (n >>> 24) & 0xff, g: (n >> 16) & 0xff, b: (n >> 8) & 0xff, a: (n & 0xff) / 255 };
+  }
+  return null;
+}
+
+function toHex2(value: number): string {
+  return Math.max(0, Math.min(255, Math.round(value))).toString(16).padStart(2, '0');
+}
+
+export function rgbaToHex({ r, g, b }: Rgba): string {
+  return `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`;
+}
+
+/**
+ * `ratio` of `blend` laid over `base` (0 = base, 1 = blend), compositing
+ * `blend`'s own alpha. Falls back to `base` when either value cannot be parsed,
+ * so a palette with an unexpected notation still yields a paintable color.
+ */
+export function mixHex(base: string, blend: string, ratio: number): string {
+  const under = parseHexColor(base);
+  const over = parseHexColor(blend);
+  if (!under || !over) return base;
+  const weight = over.a * ratio;
+  return rgbaToHex({
+    r: under.r * (1 - weight) + over.r * weight,
+    g: under.g * (1 - weight) + over.g * weight,
+    b: under.b * (1 - weight) + over.b * weight,
+    a: 1,
+  });
+}
+
+/** WCAG relative luminance, used to order two palette colors light-to-dark. */
+export function relativeLuminance(value: string): number {
+  const color = parseHexColor(value);
+  if (!color) return 0;
+  const channel = (raw: number) => {
+    const c = raw / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
+}

package/src/shared/lib/theme/css.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The `[data-theme]` CSS for every palette in the catalog, as one string.
+ *
+ * Generated rather than hand-written because the palette values already exist
+ * in TypeScript — the appearance cards render the same eight colors as chips —
+ * so a second hand-maintained copy in `tailwind.css` would be 45 blocks that
+ * drift from the cards the moment either side is edited.
+ *
+ * Two details are load-bearing:
+ *
+ * - **Selector specificity is `html[data-theme=…]`, not `[data-theme=…]`.**
+ *   `tailwind.css` carries the default palette on `:root`, which is also
+ *   (0,1,0); at equal specificity the later declaration wins by document order,
+ *   so a bare attribute selector injected before the stylesheet would lose and
+ *   every theme would render as `paper`.
+ * - **`color-scheme` is set per variant.** Scrollbars, form controls and the
+ *   browser's own canvas background are painted by the UA from it; without it a
+ *   dark theme keeps white scrollbars and a white overscroll area.
+ *
+ * No DOM here — the SSR shell inlines this, and the client injects the same
+ * string only when a served document predates it.
+ */
+
+import type { ThemePalette } from '@/shared/types/theme';
+import { THEMES } from '@/shared/lib/theme/catalog';
+
+/** The `<style>` element's id: the SSR shell writes it, the client checks it. */
+export const THEME_STYLE_ELEMENT_ID = 'omp-theme-palettes';
+
+/**
+ * A hover shade of a signal color, mixed toward the theme's own ink so the
+ * direction follows the palette: darker on a light theme, lighter on a dark one.
+ * `--theme-info-hover` / `--theme-warning-hover` used to be fixed hex values in
+ * `tailwind.css` and could only be right for one palette.
+ */
+const HOVER_MIXES: ReadonlyArray<readonly [string, string]> = [
+  ['--theme-info-hover', '--theme-info'],
+  ['--theme-warning-hover', '--theme-warning'],
+];
+
+function paletteBlock(theme: ThemePalette): string {
+  const lines = [
+    `  --theme-paper: ${theme.paper};`,
+    `  --theme-canvas: ${theme.canvas};`,
+    `  --theme-ink: ${theme.ink};`,
+    `  --theme-error: ${theme.error};`,
+    `  --theme-success: ${theme.success};`,
+    `  --theme-info: ${theme.info};`,
+    `  --theme-warning: ${theme.warning};`,
+    `  --theme-meta: ${theme.meta};`,
+  ];
+  for (const [name, source] of HOVER_MIXES) {
+    lines.push(`  ${name}: color-mix(in srgb, var(${source}) 85%, var(--theme-ink));`);
+  }
+  lines.push(`  color-scheme: ${theme.variant};`);
+  return `html[data-theme="${theme.id}"] {\n${lines.join('\n')}\n}`;
+}
+
+/** Cached: the palette set is fixed for the life of the process. */
+let cached: string | null = null;
+
+export function themeStyleSheet(): string {
+  cached ??= `/* Generated from src/shared/lib/theme/palettes — do not edit by hand. */\n${THEMES.map(paletteBlock).join('\n')}\n`;
+  return cached;
+}

package/src/shared/lib/theme/palettes/chamber.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The chamber's own palettes, carried over from the hand-written
+ * `[data-theme]` blocks in `tailwind.css` with their values unchanged.
+ *
+ * They stay in the catalog rather than becoming OpenChamber ports so an
+ * existing install keeps the exact colors it was using: `paper` is the shipped
+ * default and `one-dark-pro-soft` is what every dark-theme user has selected
+ * until now.
+ */
+
+import type { ThemePalette } from '@/shared/types/theme';
+
+export const CHAMBER_PALETTES = [
+  {
+    id: 'paper',
+    name: 'E-Ink Paper',
+    family: 'paper',
+    variant: 'light',
+    canvas: '#f4f1ea',
+    paper: '#faf8f3',
+    ink: '#141310',
+    error: '#c8321e',
+    success: '#047857',
+    info: '#0284c7',
+    warning: '#c2410c',
+    meta: '#4f46e5',
+  },
+  {
+    id: 'contrast',
+    name: 'High Contrast',
+    family: 'contrast',
+    variant: 'light',
+    canvas: '#f4f4f4',
+    paper: '#ffffff',
+    ink: '#111111',
+    error: '#b42318',
+    success: '#067647',
+    info: '#0369a1',
+    warning: '#b54708',
+    meta: '#4338ca',
+  },
+  {
+    id: 'one-dark-pro-soft',
+    name: 'One Dark Pro Soft',
+    family: 'one-dark-pro-soft',
+    variant: 'dark',
+    canvas: '#21252b',
+    paper: '#282c34',
+    ink: '#abb2bf',
+    error: '#e06c75',
+    success: '#34d399',
+    info: '#61afef',
+    warning: '#fb923c',
+    meta: '#818cf8',
+  },
+] as const satisfies readonly ThemePalette[];

package/src/shared/lib/theme/palettes/dark.ts

@@ -0,0 +1,313 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Dark palettes ported verbatim from OpenChamber
+ * (packages/ui/src/lib/theme/themes/*.json, MIT, commit 5e6675b). Only the
+ * values the chamber consumes are carried: surface.background -> canvas,
+ * surface.elevated -> paper, surface.foreground -> ink, status.* -> signal
+ * colors, primary.base -> accent. Field order is the swatch order.
+ *
+ * Generated data — re-port rather than hand-editing a color here.
+ */
+
+import type { ThemePalette } from '@/shared/types/theme';
+
+export const DARK_PALETTES = [
+  {
+    id: 'aura-dark',
+    name: 'Aura',
+    family: 'aura',
+    variant: 'dark',
+    canvas: '#15141B',
+    paper: '#201e2b',
+    ink: '#EDECEE',
+    error: '#FF6767',
+    success: '#61FFCA',
+    info: '#82E2FF',
+    warning: '#FFCA85',
+    meta: '#A277FF',
+  },
+  {
+    id: 'ayu-dark',
+    name: 'Ayu',
+    family: 'ayu',
+    variant: 'dark',
+    canvas: '#0F1419',
+    paper: '#17202a',
+    ink: '#D6DAE0',
+    error: '#F58572',
+    success: '#78D05C',
+    info: '#66C6F1',
+    warning: '#E4A75C',
+    meta: '#3FB7E3',
+  },
+  {
+    id: 'carbonfox-dark',
+    name: 'Carbonfox',
+    family: 'carbonfox',
+    variant: 'dark',
+    canvas: '#161616',
+    paper: '#222222',
+    ink: '#F2F4F8',
+    error: '#FF8389',
+    success: '#42BE65',
+    info: '#78A9FF',
+    warning: '#F1C21B',
+    meta: '#33B1FF',
+  },
+  {
+    id: 'catppuccin-dark',
+    name: 'Catppuccin',
+    family: 'catppuccin',
+    variant: 'dark',
+    canvas: '#1E1E2E',
+    paper: '#282841',
+    ink: '#CDD6F4',
+    error: '#F38BA8',
+    success: '#A6D189',
+    info: '#89DCEB',
+    warning: '#F4B8E4',
+    meta: '#7d8fff',
+  },
+  {
+    id: 'dracula-dark',
+    name: 'Dracula',
+    family: 'dracula',
+    variant: 'dark',
+    canvas: '#14151F',
+    paper: '#161722',
+    ink: '#F8F8F2',
+    error: '#FF5555',
+    success: '#50FA7B',
+    info: '#8BE9FD',
+    warning: '#FFB86C',
+    meta: '#BD93F9',
+  },
+  {
+    id: 'fields-of-the-shire-dark',
+    name: 'Fields of the Shire',
+    family: 'fields-of-the-shire',
+    variant: 'dark',
+    canvas: '#1b1815',
+    paper: '#2b2622',
+    ink: '#ebe0d1',
+    error: '#b34d3b',
+    success: '#7f905e',
+    info: '#667c8a',
+    warning: '#c47a3a',
+    meta: '#7a8a5a',
+  },
+  {
+    id: 'flexoki-dark',
+    name: 'Flexoki',
+    family: 'flexoki',
+    variant: 'dark',
+    canvas: '#171515',
+    paper: '#1c1a19',
+    ink: '#CECDC3',
+    error: '#D14D41',
+    success: '#A0AF54',
+    info: '#4385BE',
+    warning: '#DA702C',
+    meta: '#DA702C',
+  },
+  {
+    id: 'gruvbox-dark',
+    name: 'Gruvbox',
+    family: 'gruvbox',
+    variant: 'dark',
+    canvas: '#282828',
+    paper: '#25292b',
+    ink: '#EBDBB2',
+    error: '#FB4934',
+    success: '#B8BB26',
+    info: '#D3869B',
+    warning: '#FABD2F',
+    meta: '#83A598',
+  },
+  {
+    id: 'jetbrains-dark',
+    name: 'JetBrains',
+    family: 'jetbrains',
+    variant: 'dark',
+    canvas: '#1E1F22',
+    paper: '#2B2D30',
+    ink: '#DFE1E5',
+    error: '#FA6675',
+    success: '#57965D',
+    info: '#3592C4',
+    warning: '#F2C55C',
+    meta: '#6796f5',
+  },
+  {
+    id: 'kanagawa-dark',
+    name: 'Kanagawa',
+    family: 'kanagawa',
+    variant: 'dark',
+    canvas: '#1F1F28',
+    paper: '#2A2A37',
+    ink: '#DCD7BA',
+    error: '#E82424',
+    success: '#98BB6C',
+    info: '#7E9CD8',
+    warning: '#FF9E3B',
+    meta: '#7FB4CA',
+  },
+  {
+    id: 'mono-dark',
+    name: 'Mono',
+    family: 'mono',
+    variant: 'dark',
+    canvas: '#000000',
+    paper: '#141414',
+    ink: '#E5E5E5',
+    error: '#666666',
+    success: '#E5E5E5',
+    info: '#A6A6A6',
+    warning: '#999999',
+    meta: '#FFFFFF',
+  },
+  {
+    id: 'mono-plus-dark',
+    name: 'Mono Plus',
+    family: 'mono-plus',
+    variant: 'dark',
+    canvas: '#000000',
+    paper: '#141414',
+    ink: '#E5E5E5',
+    error: '#9e6a6a',
+    success: '#6a8e6a',
+    info: '#6a7e9e',
+    warning: '#9e8a6a',
+    meta: '#a2bee8',
+  },
+  {
+    id: 'monokai-dark',
+    name: 'Monokai',
+    family: 'monokai',
+    variant: 'dark',
+    canvas: '#23241E',
+    paper: '#21221a',
+    ink: '#F8F8F2',
+    error: '#F92672',
+    success: '#A6E22E',
+    info: '#66D9EF',
+    warning: '#FD971F',
+    meta: '#AE81FF',
+  },
+  {
+    id: 'nightowl-dark',
+    name: 'Night Owl',
+    family: 'night-owl',
+    variant: 'dark',
+    canvas: '#011627',
+    paper: '#001122',
+    ink: '#D6DEEB',
+    error: '#EF5350',
+    success: '#C5E478',
+    info: '#82AAFF',
+    warning: '#ECC48D',
+    meta: '#82AAFF',
+  },
+  {
+    id: 'nord-dark',
+    name: 'Nord',
+    family: 'nord',
+    variant: 'dark',
+    canvas: '#1F2430',
+    paper: '#1C202A',
+    ink: '#E5E9F0',
+    error: '#BF616A',
+    success: '#A3BE8C',
+    info: '#81A1C1',
+    warning: '#D08770',
+    meta: '#88C0D0',
+  },
+  {
+    id: 'onedarkpro-dark',
+    name: 'One Dark Pro',
+    family: 'one-dark-pro',
+    variant: 'dark',
+    canvas: '#1E222A',
+    paper: '#232832',
+    ink: '#ABB2BF',
+    error: '#E06C75',
+    success: '#98C379',
+    info: '#56B6C2',
+    warning: '#E5C07B',
+    meta: '#61AFEF',
+  },
+  {
+    id: 'openchamber-dark',
+    name: 'OpenChamber',
+    family: 'openchamber',
+    variant: 'dark',
+    canvas: '#120f0e',
+    paper: '#181715',
+    ink: '#c9c5ba',
+    error: '#da5b4a',
+    success: '#76ad4f',
+    info: '#479fe6',
+    warning: '#c67f13',
+    meta: '#da7c47',
+  },
+  {
+    id: 'solarized-dark',
+    name: 'Solarized',
+    family: 'solarized',
+    variant: 'dark',
+    canvas: '#001e25',
+    paper: '#052832',
+    ink: '#93A1A1',
+    error: '#DC322F',
+    success: '#859900',
+    info: '#2AA198',
+    warning: '#B58900',
+    meta: '#278BD2',
+  },
+  {
+    id: 'tokyonight-dark',
+    name: 'Tokyonight',
+    family: 'tokyonight',
+    variant: 'dark',
+    canvas: '#0F111A',
+    paper: '#131629',
+    ink: '#C0CAF5',
+    error: '#F7768E',
+    success: '#9ECE6A',
+    info: '#7DCFFF',
+    warning: '#E0AF68',
+    meta: '#7AA2F7',
+  },
+  {
+    id: 'vesper-dark',
+    name: 'Vesper',
+    family: 'vesper',
+    variant: 'dark',
+    canvas: '#151515',
+    paper: '#242121',
+    ink: '#e8e5e5',
+    error: '#FF8080',
+    success: '#99FFE4',
+    info: '#FFC799',
+    warning: '#FFC799',
+    meta: '#FFC799',
+  },
+  {
+    id: 'vitesse-dark-dark',
+    name: 'Vitesse Dark',
+    family: 'vitesse',
+    variant: 'dark',
+    canvas: '#121212',
+    paper: '#1a1a1a',
+    ink: '#dbd7caee',
+    error: '#cb7676',
+    success: '#4d9375',
+    info: '#6394bf',
+    warning: '#d4976c',
+    meta: '#4d9375',
+  },
+] as const satisfies readonly ThemePalette[];