npm - @phenx-inc/ctlsurf - Versions diffs - 0.14.1 → 0.15.0 - Mend

@phenx-inc/ctlsurf 0.14.1 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/src/renderer/index.html CHANGED Viewed

@@ -4,10 +4,42 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>ctlsurf-worker</title>
+  <!-- Stamp the theme before the first paint. This has to be an inline,
+       synchronous script in <head>: reading the pref over IPC (or waiting for
+       the bundle) would let one frame of the wrong theme through, which reads
+       as a flash every launch. lib/theme.ts owns the same key afterwards. -->
+  <script>
+    (function () {
+      var DARK = 'tokyo-night', LIGHT = 'tokyo-day'
+      var a = null
+      try {
+        var raw = localStorage.getItem('ctlsurf.appearance')
+        if (raw) a = JSON.parse(raw)
+        else {
+          // Migrate the original system/light/dark preference. lib/theme.ts
+          // performs the same mapping; both must agree or the first frame
+          // disagrees with the second.
+          var legacy = localStorage.getItem('ctlsurf.theme')
+          if (legacy === 'light') a = { sync: false, theme: LIGHT }
+          else if (legacy === 'dark') a = { sync: false, theme: DARK }
+        }
+      } catch (e) { /* private mode, or corrupt JSON */ }
+      var prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches
+      var id
+      if (a && a.sync === false) id = a.theme
+      else if (a) id = prefersLight ? a.light : a.dark
+      else id = prefersLight ? LIGHT : DARK
+      document.documentElement.setAttribute('data-theme', id || (prefersLight ? LIGHT : DARK))
+    })()
+  </script>
   <!-- Boot splash styles are inlined here so they paint on the first frame,
        before the JS bundle and styles.css have loaded. Without this the window
-       shows an empty dark pane while React mounts and the startup IPC runs. -->
+       shows an empty dark pane while React mounts and the startup IPC runs.
+       They cannot use the tokens in styles.css for the same reason, so the two
+       palettes are repeated here — keep them in step with :root there. -->
   <style>
+    :root { color-scheme: dark }
+    :root[data-theme='tokyo-day'], :root[data-theme='catppuccin-latte'] { color-scheme: light }
     #boot-splash {
       position: fixed;
       inset: 0;
@@ -48,6 +80,31 @@
       letter-spacing: 0.04em;
       color: #565f89;
     }
+    /* One rule per theme: the splash paints before styles.css exists, so it
+       cannot use the tokens. Keep in step with the :root blocks there. */
+    :root[data-theme='tokyo-day'] #boot-splash { background: #e9eaef; }
+    :root[data-theme='tokyo-day'] .boot-spinner {
+      border-color: rgba(46, 125, 233, 0.22);
+      border-top-color: #2e7de9;
+    }
+    :root[data-theme='tokyo-day'] .boot-splash-title { color: #1b1e33; }
+    :root[data-theme='tokyo-day'] .boot-splash-label { color: #6b7190; }
+    :root[data-theme='catppuccin-mocha'] #boot-splash { background: #1e1e2e; }
+    :root[data-theme='catppuccin-mocha'] .boot-spinner {
+      border-color: rgba(137, 180, 250, 0.22);
+      border-top-color: #89b4fa;
+    }
+    :root[data-theme='catppuccin-mocha'] .boot-splash-title { color: #cdd6f4; }
+    :root[data-theme='catppuccin-mocha'] .boot-splash-label { color: #7f849c; }
+    :root[data-theme='catppuccin-latte'] #boot-splash { background: #eff1f5; }
+    :root[data-theme='catppuccin-latte'] .boot-spinner {
+      border-color: rgba(30, 102, 245, 0.22);
+      border-top-color: #1e66f5;
+    }
+    :root[data-theme='catppuccin-latte'] .boot-splash-title { color: #2f3145; }
+    :root[data-theme='catppuccin-latte'] .boot-splash-label { color: #7c7f93; }
   </style>
 </head>
 <body>

package/src/renderer/lib/theme.ts ADDED Viewed

@@ -0,0 +1,173 @@
+import { useEffect, useState } from 'react'
+import {
+  DEFAULT_DARK, DEFAULT_LIGHT, getTheme, isThemeId, type ThemeDef,
+} from './themes'
+// Appearance state.
+//
+// `sync` follows the OS and picks between the `light` / `dark` choices as it
+// flips; with sync off, `theme` is pinned. Keeping the pair around while pinned
+// means turning sync back on restores what you had rather than resetting.
+//
+// Stored in localStorage alongside the other renderer-local UI prefs
+// (ctlsurf.floatingMicVisible, ctlsurf.voice.*) rather than in the main-process
+// settings file — index.html has to read it synchronously before first paint,
+// which IPC cannot do. The main process keeps a mirror for recovery; see below.
+export interface Appearance {
+  sync: boolean
+  theme: string
+  light: string
+  dark: string
+}
+const KEY = 'ctlsurf.appearance'
+const LEGACY_KEY = 'ctlsurf.theme'
+export const DEFAULT_APPEARANCE: Appearance = {
+  sync: true,
+  theme: DEFAULT_DARK,
+  light: DEFAULT_LIGHT,
+  dark: DEFAULT_DARK,
+}
+function coerce(raw: unknown): Appearance | null {
+  if (!raw || typeof raw !== 'object') return null
+  const o = raw as Record<string, unknown>
+  // An unknown id (a theme removed in a later version) falls back rather than
+  // leaving the app with no palette at all.
+  return {
+    sync: o.sync !== false,
+    theme: isThemeId(o.theme) ? o.theme : DEFAULT_APPEARANCE.theme,
+    light: isThemeId(o.light) ? o.light : DEFAULT_APPEARANCE.light,
+    dark: isThemeId(o.dark) ? o.dark : DEFAULT_APPEARANCE.dark,
+  }
+}
+// null means "nothing stored", distinct from an explicit default — only the
+// former may be replaced by the main-process mirror on boot.
+function stored(): Appearance | null {
+  try {
+    const raw = localStorage.getItem(KEY)
+    if (raw) return coerce(JSON.parse(raw))
+    // Migrate the original system/light/dark preference.
+    const legacy = localStorage.getItem(LEGACY_KEY)
+    if (legacy === 'light') return { ...DEFAULT_APPEARANCE, sync: false, theme: DEFAULT_LIGHT }
+    if (legacy === 'dark') return { ...DEFAULT_APPEARANCE, sync: false, theme: DEFAULT_DARK }
+    if (legacy === 'system') return { ...DEFAULT_APPEARANCE }
+  } catch { /* private mode, or corrupt JSON */ }
+  return null
+}
+export function getAppearance(): Appearance {
+  return stored() ?? { ...DEFAULT_APPEARANCE }
+}
+const darkQuery = (): MediaQueryList | null =>
+  typeof window.matchMedia === 'function'
+    ? window.matchMedia('(prefers-color-scheme: dark)')
+    : null
+export function prefersDark(): boolean {
+  return darkQuery()?.matches !== false
+}
+export function resolveThemeId(a: Appearance = getAppearance()): string {
+  if (!a.sync) return a.theme
+  return prefersDark() ? a.dark : a.light
+}
+// Subscribers get the resolved ThemeDef, so none of them has to redo the
+// system-preference dance. Module-level: terminals outlive the components that
+// render them (see the _terminals cache in TerminalPanel), so the xterm palette
+// listener must not be tied to a component lifecycle.
+type Listener = (theme: ThemeDef) => void
+const listeners = new Set<Listener>()
+export function subscribeTheme(fn: Listener): () => void {
+  listeners.add(fn)
+  return () => { listeners.delete(fn) }
+}
+export function currentTheme(): ThemeDef {
+  return getTheme(resolveThemeId())
+}
+function applyDom(): ThemeDef {
+  const theme = currentTheme()
+  document.documentElement.setAttribute('data-theme', theme.id)
+  for (const fn of listeners) fn(theme)
+  return theme
+}
+// Keep the native layer in step: form controls, scrollbars and the background
+// Electron paints before the renderer loads are Chromium's, not our CSS. The
+// main process also persists this, which is what makes the choice recoverable.
+function syncNative(a: Appearance): void {
+  const theme = getTheme(resolveThemeId(a))
+  void window.worker?.setAppearance?.({
+    pref: a,
+    source: a.sync ? 'system' : theme.mode,
+    background: theme.background,
+  }).catch(() => { /* older main process */ })
+}
+export function setAppearance(next: Appearance): ThemeDef {
+  try { localStorage.setItem(KEY, JSON.stringify(next)) } catch { /* ignore */ }
+  syncNative(next)
+  return applyDom()
+}
+export function updateAppearance(patch: Partial<Appearance>): ThemeDef {
+  return setAppearance({ ...getAppearance(), ...patch })
+}
+// Re-resolve when the OS flips appearance, but only while syncing — a pinned
+// theme should survive the OS changing under it.
+darkQuery()?.addEventListener('change', () => {
+  const a = getAppearance()
+  if (a.sync) { applyDom(); syncNative(a) }
+})
+// index.html stamps data-theme before first paint so there is no flash; this
+// re-runs it to pick up anything that changed since (and to seed listeners).
+applyDom()
+// localStorage is not as durable as it looks: a reset Chromium quota database,
+// or two Electron instances sharing one --user-data-dir, silently empties it,
+// which would reset the choice. The main process mirrors it into settings.json,
+// so recover from there.
+//
+// Order matters — this reads before anything writes, which is why boot does not
+// call syncNative() on this branch. Guarded on "nothing stored" at both ends so
+// a real choice can never be clobbered by a late-arriving reply.
+if (stored() === null) {
+  const restore = window.worker?.getAppearance?.()
+  if (restore) {
+    void restore
+      .then((r) => {
+        const recovered = coerce(r?.pref)
+        if (recovered && stored() === null) setAppearance(recovered)
+      })
+      .catch(() => { /* older main process */ })
+  }
+} else {
+  syncNative(getAppearance())
+}
+export function useAppearance(): {
+  appearance: Appearance
+  theme: ThemeDef
+  update: (patch: Partial<Appearance>) => void
+} {
+  const [appearance, setState] = useState<Appearance>(getAppearance)
+  const [theme, setTheme] = useState<ThemeDef>(currentTheme)
+  // Read state back off the store rather than tracking it locally, so a change
+  // made in one component reaches every other consumer.
+  useEffect(() => subscribeTheme((t) => {
+    setTheme(t)
+    setState(getAppearance())
+  }), [])
+  return { appearance, theme, update: updateAppearance }
+}

package/src/renderer/lib/themes.ts ADDED Viewed

@@ -0,0 +1,126 @@
+// The theme registry.
+//
+// Palette values are transcribed from each project's published palette spec —
+// no upstream code is copied. Scheme names identify which palette a theme
+// reproduces; see THIRD-PARTY-NOTICES.md for licences and attribution.
+//
+// Each entry owns everything that can't be reached from CSS: the xterm palette
+// (canvas, not DOM), the Monaco override colours, and the swatch shown in the
+// picker. The chrome colours themselves live in styles.css, under a
+// `:root[data-theme='<id>']` block keyed by the ids below — the two must stay
+// in step, which is why `id` is the single source of truth for both.
+export type ThemeMode = 'light' | 'dark'
+// Structural subset of xterm's ITheme. Declared locally so this module stays
+// importable from places that don't depend on xterm (the Settings dialog).
+export interface XtermPalette {
+  background: string
+  foreground: string
+  cursor: string
+  selectionBackground: string
+  black: string; red: string; green: string; yellow: string
+  blue: string; magenta: string; cyan: string; white: string
+  brightBlack: string; brightRed: string; brightGreen: string; brightYellow: string
+  brightBlue: string; brightMagenta: string; brightCyan: string; brightWhite: string
+}
+export interface ThemeDef {
+  id: string
+  name: string
+  family: string
+  mode: ThemeMode
+  // Preview tile in Settings — drawn from literal values, because a swatch has
+  // to show its own palette rather than the active one.
+  swatch: { bg: string; surface: string; accent: string; text: string }
+  // Painted by Electron before the renderer loads, so it must match --bg-app.
+  background: string
+  terminal: XtermPalette
+  // Monaco ships only 'vs' / 'vs-dark'; these ride on top so the editor at
+  // least shares the scheme's background and gutter rather than clashing.
+  editor: { base: 'vs' | 'vs-dark'; background: string; foreground: string; lineHighlight: string; selection: string }
+}
+export const THEMES: ThemeDef[] = [
+  {
+    id: 'tokyo-night',
+    name: 'Tokyo Night',
+    family: 'Tokyo Night',
+    mode: 'dark',
+    swatch: { bg: '#1a1b26', surface: '#2a2b3d', accent: '#7aa2f7', text: '#a9b1d6' },
+    background: '#1a1b26',
+    terminal: {
+      background: '#1a1b26', foreground: '#a9b1d6', cursor: '#c0caf5', selectionBackground: '#33467c',
+      black: '#15161e', red: '#f7768e', green: '#9ece6a', yellow: '#e0af68',
+      blue: '#7aa2f7', magenta: '#bb9af7', cyan: '#7dcfff', white: '#a9b1d6',
+      brightBlack: '#414868', brightRed: '#f7768e', brightGreen: '#9ece6a', brightYellow: '#e0af68',
+      brightBlue: '#7aa2f7', brightMagenta: '#bb9af7', brightCyan: '#7dcfff', brightWhite: '#c0caf5',
+    },
+    editor: { base: 'vs-dark', background: '#1a1b26', foreground: '#a9b1d6', lineHighlight: '#1f2335', selection: '#33467c' },
+  },
+  {
+    id: 'tokyo-day',
+    name: 'Tokyo Night Day',
+    family: 'Tokyo Night',
+    mode: 'light',
+    swatch: { bg: '#e9eaef', surface: '#d4d7e2', accent: '#2e7de9', text: '#3a4060' },
+    background: '#e9eaef',
+    terminal: {
+      background: '#e9eaef', foreground: '#3760bf', cursor: '#3760bf', selectionBackground: '#b6c8f0',
+      black: '#b4b5b9', red: '#c64343', green: '#587539', yellow: '#8c6c3e',
+      blue: '#2e7de9', magenta: '#9854f1', cyan: '#007197', white: '#6172b0',
+      // Deliberately darker than `black`: remote TUIs use bright-black for dim
+      // text, which would vanish on a light background otherwise.
+      brightBlack: '#8990ad', brightRed: '#f52a65', brightGreen: '#4d7a1f', brightYellow: '#8f5e15',
+      brightBlue: '#1a68d6', brightMagenta: '#7847d1', brightCyan: '#006594', brightWhite: '#3760bf',
+    },
+    editor: { base: 'vs', background: '#e9eaef', foreground: '#3760bf', lineHighlight: '#dfe1e8', selection: '#b6c8f0' },
+  },
+  {
+    id: 'catppuccin-mocha',
+    name: 'Catppuccin Mocha',
+    family: 'Catppuccin',
+    mode: 'dark',
+    swatch: { bg: '#1e1e2e', surface: '#313244', accent: '#89b4fa', text: '#cdd6f4' },
+    background: '#1e1e2e',
+    terminal: {
+      background: '#1e1e2e', foreground: '#cdd6f4', cursor: '#f5e0dc', selectionBackground: '#45475a',
+      black: '#45475a', red: '#f38ba8', green: '#a6e3a1', yellow: '#f9e2af',
+      blue: '#89b4fa', magenta: '#f5c2e7', cyan: '#94e2d5', white: '#bac2de',
+      brightBlack: '#585b70', brightRed: '#f38ba8', brightGreen: '#a6e3a1', brightYellow: '#f9e2af',
+      brightBlue: '#89b4fa', brightMagenta: '#f5c2e7', brightCyan: '#94e2d5', brightWhite: '#a6adc8',
+    },
+    editor: { base: 'vs-dark', background: '#1e1e2e', foreground: '#cdd6f4', lineHighlight: '#272739', selection: '#45475a' },
+  },
+  {
+    id: 'catppuccin-latte',
+    name: 'Catppuccin Latte',
+    family: 'Catppuccin',
+    mode: 'light',
+    swatch: { bg: '#eff1f5', surface: '#ccd0da', accent: '#1e66f5', text: '#4c4f69' },
+    background: '#eff1f5',
+    terminal: {
+      background: '#eff1f5', foreground: '#4c4f69', cursor: '#dc8a78', selectionBackground: '#bcc0cc',
+      black: '#5c5f77', red: '#d20f39', green: '#40a02b', yellow: '#df8e1d',
+      blue: '#1e66f5', magenta: '#ea76cb', cyan: '#179299', white: '#acb0be',
+      brightBlack: '#6c6f85', brightRed: '#de293e', brightGreen: '#49af3d', brightYellow: '#eea416',
+      brightBlue: '#456eff', brightMagenta: '#dd63bd', brightCyan: '#2d9fa8', brightWhite: '#8c8fa1',
+    },
+    editor: { base: 'vs', background: '#eff1f5', foreground: '#4c4f69', lineHighlight: '#e6e9ef', selection: '#bcc0cc' },
+  },
+]
+export const DEFAULT_DARK = 'tokyo-night'
+export const DEFAULT_LIGHT = 'tokyo-day'
+const byId = new Map(THEMES.map(t => [t.id, t]))
+export function getTheme(id: string | null | undefined): ThemeDef {
+  return (id && byId.get(id)) || byId.get(DEFAULT_DARK)!
+}
+export function isThemeId(v: unknown): v is string {
+  return typeof v === 'string' && byId.has(v)
+}
+export const themesByMode = (mode: ThemeMode): ThemeDef[] => THEMES.filter(t => t.mode === mode)