nastechai-desktop 18.1.0

package/src/themes/user-themes.ts

@@ -0,0 +1,122 @@
+/**
+ * User-installed desktop themes (currently: converted VS Code themes).
+ *
+ * This is the extensibility seam. The theme context reads the *merged* registry
+ * (built-ins + user themes) for `availableThemes` and for every skin lookup, so
+ * an installed theme shows up everywhere a built-in does — the Cmd-K palette,
+ * the Appearance settings grid, and `/skin` — with no per-surface wiring.
+ *
+ * Stored as a localStorage record so the boot-time paint (which runs before
+ * React mounts) can resolve a user theme synchronously, same as built-ins.
+ */
+
+import { atom } from 'nanostores'
+
+import { BUILTIN_THEMES } from './presets'
+import type { DesktopTheme, DesktopThemeColors } from './types'
+
+const USER_THEMES_KEY = 'nastech-desktop-user-themes-v1'
+
+// The minimal set of color keys a stored theme must carry to be usable. We keep
+// this loose — `applyTheme` tolerates missing optionals via fallbacks — but a
+// theme with no background/foreground/primary is junk and gets dropped.
+const REQUIRED_COLOR_KEYS: ReadonlyArray<keyof DesktopThemeColors> = ['background', 'foreground', 'primary']
+
+function isValidTheme(value: unknown): value is DesktopTheme {
+  if (!value || typeof value !== 'object') {
+    return false
+  }
+
+  const theme = value as Partial<DesktopTheme>
+
+  if (typeof theme.name !== 'string' || typeof theme.label !== 'string' || !theme.colors) {
+    return false
+  }
+
+  const colors = theme.colors as unknown as Record<string, unknown>
+
+  return REQUIRED_COLOR_KEYS.every(key => typeof colors[key] === 'string')
+}
+
+function readStored(): Record<string, DesktopTheme> {
+  try {
+    const raw = window.localStorage.getItem(USER_THEMES_KEY)
+
+    if (!raw) {
+      return {}
+    }
+
+    const parsed: unknown = JSON.parse(raw)
+
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      return {}
+    }
+
+    const out: Record<string, DesktopTheme> = {}
+
+    for (const [key, value] of Object.entries(parsed)) {
+      // Never let a stored theme shadow a built-in name.
+      if (!BUILTIN_THEMES[key] && isValidTheme(value)) {
+        out[key] = value
+      }
+    }
+
+    return out
+  } catch {
+    return {}
+  }
+}
+
+function persist(record: Record<string, DesktopTheme>) {
+  try {
+    window.localStorage.setItem(USER_THEMES_KEY, JSON.stringify(record))
+  } catch {
+    // Best-effort: a restricted storage context shouldn't break theming.
+  }
+}
+
+/** Reactive map of installed user themes, keyed by slug. */
+export const $userThemes = atom<Record<string, DesktopTheme>>(typeof window === 'undefined' ? {} : readStored())
+
+/** Install (or replace) a user theme. Returns the stored theme. */
+export function installUserTheme(theme: DesktopTheme): DesktopTheme {
+  if (BUILTIN_THEMES[theme.name]) {
+    throw new Error(`"${theme.name}" collides with a built-in theme.`)
+  }
+
+  if (!isValidTheme(theme)) {
+    throw new Error('Theme is missing required colors.')
+  }
+
+  const next = { ...$userThemes.get(), [theme.name]: theme }
+  $userThemes.set(next)
+  persist(next)
+
+  return theme
+}
+
+/** Remove a user theme by slug. No-op for unknown / built-in names. */
+export function removeUserTheme(name: string): void {
+  const current = $userThemes.get()
+
+  if (!current[name]) {
+    return
+  }
+
+  const next = { ...current }
+  delete next[name]
+  $userThemes.set(next)
+  persist(next)
+}
+
+export const isUserTheme = (name: string): boolean => Boolean($userThemes.get()[name])
+
+/** Resolve a theme by name across the merged registry (built-in + user). */
+export function resolveTheme(name: string): DesktopTheme | undefined {
+  return BUILTIN_THEMES[name] ?? $userThemes.get()[name]
+}
+
+/** Built-ins first (stable order), then user themes by install order. */
+export function listAllThemes(): DesktopTheme[] {
+  return [...Object.values(BUILTIN_THEMES), ...Object.values($userThemes.get())]
+}

package/src/themes/vscode.test.ts

@@ -0,0 +1,171 @@
+import { describe, expect, it } from 'vitest'
+
+import { contrastRatio } from './color'
+import { convertVscodeColorTheme, parseVscodeTheme, vscodeThemeSlug } from './vscode'
+
+describe('vscodeThemeSlug', () => {
+  it('namespaces, lowercases, and dashes', () => {
+    expect(vscodeThemeSlug('Dracula Soft')).toBe('vsc-dracula-soft')
+    expect(vscodeThemeSlug('  One Dark Pro!! ')).toBe('vsc-one-dark-pro')
+  })
+
+  it('falls back when the name has no usable characters', () => {
+    expect(vscodeThemeSlug('—')).toBe('vsc-theme')
+  })
+})
+
+describe('parseVscodeTheme (JSONC tolerance)', () => {
+  it('strips comments and trailing commas', () => {
+    const text = `{
+      // a line comment
+      "name": "Demo",
+      /* block comment */
+      "type": "dark",
+      "colors": {
+        "editor.background": "#1e1e2e", // inline
+      },
+    }`
+
+    const parsed = parseVscodeTheme(text)
+    expect(parsed.name).toBe('Demo')
+    expect(parsed.colors?.['editor.background']).toBe('#1e1e2e')
+  })
+
+  it('throws on a non-object', () => {
+    expect(() => parseVscodeTheme('42')).toThrow()
+  })
+})
+
+describe('convertVscodeColorTheme', () => {
+  const dracula = {
+    name: 'Dracula',
+    type: 'dark',
+    colors: {
+      'editor.background': '#282a36',
+      'editor.foreground': '#f8f8f2',
+      focusBorder: '#6272a4',
+      'editorWidget.background': '#21222c',
+      'sideBar.background': '#21222c',
+      errorForeground: '#ff5555',
+      // 8-digit hex (alpha) — must flatten over the background.
+      'panel.border': '#bd93f900'
+    }
+  }
+
+  it('maps the load-bearing tokens onto the palette', () => {
+    const { theme } = convertVscodeColorTheme(dracula, { source: 'dracula-theme.theme-dracula' })
+
+    expect(theme.name).toBe('vsc-dracula')
+    expect(theme.label).toBe('Dracula')
+    expect(theme.description).toContain('dracula-theme.theme-dracula')
+    expect(theme.colors.background).toBe('#282a36')
+    expect(theme.colors.foreground).toBe('#f8f8f2')
+    // One accent drives primary + ring + midground together...
+    expect(theme.colors.ring).toBe(theme.colors.primary)
+    expect(theme.colors.midground).toBe(theme.colors.primary)
+    // ...and it's nudged until it reads on the sidebar it labels (the dim
+    // focusBorder #6272a4 sits below AA, so it's lifted).
+    expect(contrastRatio(theme.colors.primary, theme.colors.sidebarBackground!)).toBeGreaterThanOrEqual(4.5)
+    expect(theme.colors.popover).toBe('#21222c')
+    expect(theme.colors.sidebarBackground).toBe('#21222c')
+    expect(theme.colors.destructive).toBe('#ff5555')
+  })
+
+  it('flattens alpha hex over the background (no #rrggbbaa leaks)', () => {
+    const { theme } = convertVscodeColorTheme(dracula)
+    expect(theme.colors.border).toMatch(/^#[0-9a-f]{6}$/)
+    // 00 alpha over the bg means the border collapses to the background.
+    expect(theme.colors.border).toBe('#282a36')
+  })
+
+  it('renders identically in both modes (single palette in both slots)', () => {
+    const { theme } = convertVscodeColorTheme(dracula)
+    expect(theme.darkColors).toBe(theme.colors)
+  })
+
+  it('records derived fallbacks for omitted tokens', () => {
+    const { derived } = convertVscodeColorTheme({
+      name: 'Sparse',
+      type: 'dark',
+      colors: { 'editor.background': '#101010', 'editor.foreground': '#fafafa' }
+    })
+
+    // No accent/elevated/sidebar/error tokens → all derived. The accent records
+    // its first candidate (button.background) when none of the family is present.
+    expect(derived).toContain('button.background')
+    expect(derived).toContain('editorWidget.background')
+    expect(derived).toContain('editorError.foreground')
+  })
+
+  it('buckets light vs dark from background luminance when type is absent', () => {
+    const light = convertVscodeColorTheme({
+      name: 'Bright',
+      colors: { 'editor.background': '#ffffff', 'editor.foreground': '#1a1a1a' }
+    }).theme
+
+    // A light background should keep a near-white background, not synth dark.
+    expect(light.colors.background).toBe('#ffffff')
+  })
+
+  it('throws when there is no colors map', () => {
+    expect(() => convertVscodeColorTheme({ name: 'Empty' })).toThrow(/colors/)
+  })
+
+  const fullAnsi = {
+    'terminal.ansiBlack': '#073642',
+    'terminal.ansiRed': '#dc322f',
+    'terminal.ansiGreen': '#859900',
+    'terminal.ansiYellow': '#b58900',
+    'terminal.ansiBlue': '#268bd2',
+    'terminal.ansiMagenta': '#d33682',
+    'terminal.ansiCyan': '#2aa198',
+    'terminal.ansiWhite': '#eee8d5',
+    'terminal.ansiBrightBlack': '#002b36',
+    'terminal.ansiBrightRed': '#cb4b16',
+    'terminal.ansiBrightGreen': '#586e75',
+    'terminal.ansiBrightYellow': '#657b83',
+    'terminal.ansiBrightBlue': '#839496',
+    'terminal.ansiBrightMagenta': '#6c71c4',
+    'terminal.ansiBrightCyan': '#93a1a1',
+    'terminal.ansiBrightWhite': '#fdf6e3'
+  }
+
+  it('lifts the ANSI palette when the full base-8 set is present', () => {
+    const { theme } = convertVscodeColorTheme({
+      name: 'Solarized Dark',
+      type: 'dark',
+      colors: {
+        'editor.background': '#002b36',
+        'editor.foreground': '#93a1a1',
+        'terminal.foreground': '#839496',
+        'terminalCursor.foreground': '#93a1a1',
+        // Alpha selection must survive un-flattened — xterm blends it.
+        'terminal.selectionBackground': '#073642aa',
+        ...fullAnsi
+      }
+    })
+
+    expect(theme.terminal?.red).toBe('#dc322f')
+    expect(theme.terminal?.brightWhite).toBe('#fdf6e3')
+    expect(theme.terminal?.foreground).toBe('#839496')
+    expect(theme.terminal?.cursor).toBe('#93a1a1')
+    expect(theme.terminal?.selectionBackground).toBe('#073642aa')
+    // No background slot — the pane keeps the live surface (transparency).
+    expect('background' in (theme.terminal ?? {})).toBe(false)
+  })
+
+  it('keeps the default palette (no terminal slot) when the ANSI set is partial', () => {
+    const { theme } = convertVscodeColorTheme({
+      name: 'Half',
+      type: 'dark',
+      colors: {
+        'editor.background': '#101010',
+        'editor.foreground': '#fafafa',
+        'terminal.ansiRed': '#ff0000',
+        'terminal.ansiGreen': '#00ff00'
+      }
+    })
+
+    expect(theme.terminal).toBeUndefined()
+  })
+})

package/src/themes/vscode.ts

@@ -0,0 +1,343 @@
+/**
+ * VS Code color-theme → DesktopTheme converter.
+ *
+ * VS Code themes carry ~hundreds of `workbench.colorCustomization` keys, but the
+ * desktop theme model only needs a `DesktopThemeColors` struct — `applyTheme`
+ * derives every glass/shadcn token from a small seed chain via `color-mix()`.
+ * In practice ~6 workbench keys carry the whole look (background, foreground,
+ * accent, elevated surface, sidebar, error); everything else we derive by mixing
+ * those toward the background/foreground. That's the "naive token converter".
+ *
+ * A VS Code theme is single-mode (light OR dark). Rather than synthesise the
+ * opposite mode, we set both `colors` and `darkColors` to the converted palette
+ * so the imported theme renders faithfully no matter where the light/dark toggle
+ * sits — `renderedModeFor` still picks the `.dark` class from the real
+ * background luminance, so surface-bound UI matches what's on screen.
+ */
+
+import { ensureContrast, luminance, mix, normalizeHex, readableOn } from './color'
+import type { DesktopTerminalPalette, DesktopTheme, DesktopThemeColors } from './types'
+
+// Section headers / sidebar labels render in --theme-primary directly on the
+// sidebar surface as small (~10px) uppercase text, so the accent has to clear
+// WCAG AA for normal text (4.5:1) or it's unreadable — the "invisible purple
+// label" case. Imported accents below this get nudged lighter/darker.
+const ACCENT_MIN_CONTRAST = 4.5
+
+/** The shape of a VS Code `*-color-theme.json` (only the fields we read). */
+export interface VscodeColorTheme {
+  name?: string
+  type?: string
+  /** Relative path to a base theme this one extends. We don't follow it. */
+  include?: string
+  colors?: Record<string, unknown>
+  tokenColors?: unknown
+}
+
+export interface ConvertOptions {
+  /** Stable id (slug). Defaults to a slug of `raw.name`. */
+  slug?: string
+  /** Display label. Defaults to `raw.name`. */
+  label?: string
+  /** Shown under the label in the picker (e.g. the marketplace extension id). */
+  source?: string
+}
+
+export interface ConvertResult {
+  theme: DesktopTheme
+  /** The source theme's own light/dark (from `type`, else background luminance). */
+  mode: 'light' | 'dark'
+  /** Workbench keys we wanted but the theme omitted (we derived fallbacks). */
+  derived: string[]
+}
+
+/** Tolerant slug: lowercase, alnum + dashes, deduped, `vsc-` namespaced. */
+export function vscodeThemeSlug(name: string): string {
+  const base = name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 48)
+
+  return `vsc-${base || 'theme'}`
+}
+
+/**
+ * Parse a VS Code theme file. These ship as JSONC (line/block comments and
+ * trailing commas), so a plain `JSON.parse` rejects most real-world files.
+ * Strips comments + trailing commas, then parses. Throws on hard syntax errors.
+ */
+export function parseVscodeTheme(text: string): VscodeColorTheme {
+  const stripped = text
+    // Block comments.
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    // Line comments (not inside strings — naive but fine for theme files).
+    .replace(/(^|[^:"'\\])\/\/[^\n\r]*/g, '$1')
+    // Trailing commas before } or ].
+    .replace(/,(\s*[}\]])/g, '$1')
+
+  const parsed: unknown = JSON.parse(stripped)
+
+  if (!parsed || typeof parsed !== 'object') {
+    throw new Error('Theme file is not a JSON object.')
+  }
+
+  return parsed as VscodeColorTheme
+}
+
+const isDarkType = (raw: VscodeColorTheme, background: string): boolean => {
+  const type = (raw.type ?? '').toLowerCase()
+
+  if (type.includes('light')) {
+    return false
+  }
+
+  if (type === 'dark' || type === 'hc' || type === 'hc-black' || type.includes('dark')) {
+    return true
+  }
+
+  // No usable `type` — bucket by background luminance.
+  return luminance(background) < 0.4
+}
+
+// xterm ITheme ANSI slots ← VS Code `terminal.ansi*` tokens. Background is
+// deliberately excluded — the pane keeps the live skin surface (transparency).
+const ANSI_TOKENS: ReadonlyArray<readonly [keyof DesktopTerminalPalette, string]> = [
+  ['black', 'terminal.ansiBlack'],
+  ['red', 'terminal.ansiRed'],
+  ['green', 'terminal.ansiGreen'],
+  ['yellow', 'terminal.ansiYellow'],
+  ['blue', 'terminal.ansiBlue'],
+  ['magenta', 'terminal.ansiMagenta'],
+  ['cyan', 'terminal.ansiCyan'],
+  ['white', 'terminal.ansiWhite'],
+  ['brightBlack', 'terminal.ansiBrightBlack'],
+  ['brightRed', 'terminal.ansiBrightRed'],
+  ['brightGreen', 'terminal.ansiBrightGreen'],
+  ['brightYellow', 'terminal.ansiBrightYellow'],
+  ['brightBlue', 'terminal.ansiBrightBlue'],
+  ['brightMagenta', 'terminal.ansiBrightMagenta'],
+  ['brightCyan', 'terminal.ansiBrightCyan'],
+  ['brightWhite', 'terminal.ansiBrightWhite']
+]
+
+const BASE_ANSI: ReadonlyArray<keyof DesktopTerminalPalette> = [
+  'black',
+  'red',
+  'green',
+  'yellow',
+  'blue',
+  'magenta',
+  'cyan',
+  'white'
+]
+
+const HEX_RE = /^#[0-9a-f]{3,8}$/i
+
+/**
+ * Lift a theme's integrated-terminal ANSI palette, if it ships one.
+ *
+ * All-or-nothing on the base-8 colors: a half-filled palette mixed with our
+ * defaults reads worse than just keeping the defaults, so we adopt the theme's
+ * palette only when the full base set is present. ANSI slots flatten alpha over
+ * the editor background; selection keeps its alpha so xterm can blend it.
+ */
+function extractTerminalPalette(colors: Record<string, unknown>, background: string): DesktopTerminalPalette | undefined {
+  const hex = (key: string): string | undefined =>
+    normalizeHex(typeof colors[key] === 'string' ? (colors[key] as string) : null, background) ?? undefined
+
+  const palette: DesktopTerminalPalette = {}
+
+  for (const [slot, token] of ANSI_TOKENS) {
+    const value = hex(token)
+
+    if (value) {
+      palette[slot] = value
+    }
+  }
+
+  if (!BASE_ANSI.every(slot => palette[slot])) {
+    return undefined
+  }
+
+  const foreground = hex('terminal.foreground')
+  const cursor = hex('terminalCursor.foreground') ?? hex('terminalCursor.background')
+  const selection = typeof colors['terminal.selectionBackground'] === 'string' ? colors['terminal.selectionBackground'].trim() : ''
+
+  if (foreground) {
+    palette.foreground = foreground
+  }
+
+  if (cursor) {
+    palette.cursor = cursor
+  }
+
+  if (HEX_RE.test(selection)) {
+    palette.selectionBackground = selection
+  }
+
+  return palette
+}
+
+/** First normalizable hex among `keys`, composited over `backdrop`. */
+const pick = (
+  colors: Record<string, unknown>,
+  keys: string[],
+  backdrop: string
+): { key: string; value: string } | null => {
+  for (const key of keys) {
+    const value = normalizeHex(typeof colors[key] === 'string' ? (colors[key] as string) : null, backdrop)
+
+    if (value) {
+      return { key, value }
+    }
+  }
+
+  return null
+}
+
+export function convertVscodeColorTheme(raw: VscodeColorTheme, opts: ConvertOptions = {}): ConvertResult {
+  const colors = raw.colors && typeof raw.colors === 'object' ? (raw.colors as Record<string, unknown>) : null
+
+  if (!colors) {
+    throw new Error('Theme has no "colors" map — not a VS Code color theme.')
+  }
+
+  const derived: string[] = []
+
+  // Background first: it's the backdrop every other token flattens alpha over.
+  const backgroundHit = pick(colors, ['editor.background', 'editorPane.background', 'editorGroup.background'], '#000000')
+  const dark = isDarkType(raw, backgroundHit?.value ?? '#1e1e1e')
+  const background = backgroundHit?.value ?? (dark ? '#1e1e1e' : '#ffffff')
+
+  if (!backgroundHit) {
+    derived.push('editor.background')
+  }
+
+  // `take` records a derived fallback when the theme omits the key.
+  const take = (keys: string[], fallback: string): string => {
+    const hit = pick(colors, keys, background)
+
+    if (hit) {
+      return hit.value
+    }
+
+    derived.push(keys[0])
+
+    return fallback
+  }
+
+  const foreground = take(['editor.foreground', 'foreground'], dark ? '#d4d4d4' : '#1f1f1f')
+
+  // Brand accent — the single most load-bearing token. Drives primary buttons,
+  // focus rings, the streaming cursor, active-session pills, and sidebar labels.
+  // Prefer the saturated "brand" tokens (button / link / badge) over focusBorder,
+  // which many themes set to a muted gray — picking it first made imported
+  // accents look like the desktop defaults. We enforce contrast below regardless.
+  const accentSource = take(
+    [
+      'button.background',
+      'textLink.activeForeground',
+      'textLink.foreground',
+      'activityBarBadge.background',
+      'badge.background',
+      'progressBar.background',
+      'pickerGroup.foreground',
+      'list.highlightForeground',
+      'editorLink.activeForeground',
+      'focusBorder',
+      'tab.activeBorder',
+      'statusBarItem.remoteBackground'
+    ],
+    mix(foreground, background, 0.55)
+  )
+
+  const elevated = take(
+    ['editorWidget.background', 'dropdown.background', 'menu.background', 'quickInput.background', 'editorSuggestWidget.background'],
+    mix(background, foreground, dark ? 0.08 : 0.05)
+  )
+
+  const card = take(
+    ['sideBarSectionHeader.background', 'tab.inactiveBackground', 'editorGroupHeader.tabsBackground'],
+    mix(background, foreground, dark ? 0.04 : 0.025)
+  )
+
+  const sidebar = take(['sideBar.background', 'activityBar.background'], mix(background, foreground, dark ? 0.02 : 0.012))
+
+  // The accent labels the sidebar (--theme-primary), so guarantee it reads
+  // there — otherwise low-contrast brand colors leave invisible section headers.
+  const accent = ensureContrast(accentSource, sidebar, ACCENT_MIN_CONTRAST)
+
+  const border = take(
+    ['panel.border', 'editorGroup.border', 'sideBar.border', 'contrastBorder', 'widget.border', 'input.border'],
+    mix(background, foreground, dark ? 0.16 : 0.14)
+  )
+
+  const input = take(['input.background', 'dropdown.background', 'quickInput.background'], mix(background, foreground, dark ? 0.1 : 0.06))
+
+  const mutedForeground = take(
+    ['descriptionForeground', 'editorLineNumber.foreground', 'tab.inactiveForeground', 'disabledForeground'],
+    mix(foreground, background, 0.45)
+  )
+
+  const destructive = take(
+    ['editorError.foreground', 'errorForeground', 'editorOverviewRuler.errorForeground', 'notificationsErrorIcon.foreground'],
+    '#e25563'
+  )
+
+  const muted = mix(background, foreground, dark ? 0.06 : 0.04)
+  const accentSoft = mix(accent, background, dark ? 0.82 : 0.88)
+  const secondary = mix(accent, background, dark ? 0.72 : 0.86)
+
+  const palette: DesktopThemeColors = {
+    background,
+    foreground,
+    card,
+    cardForeground: foreground,
+    muted,
+    mutedForeground,
+    popover: elevated,
+    popoverForeground: foreground,
+    primary: accent,
+    primaryForeground: readableOn(accent),
+    secondary,
+    secondaryForeground: foreground,
+    accent: accentSoft,
+    accentForeground: foreground,
+    border,
+    input,
+    ring: accent,
+    midground: accent,
+    midgroundForeground: readableOn(accent),
+    composerRing: accent,
+    destructive,
+    destructiveForeground: readableOn(destructive),
+    sidebarBackground: sidebar,
+    sidebarBorder: border,
+    userBubble: mix(card, accent, dark ? 0.18 : 0.12),
+    userBubbleBorder: border
+  }
+
+  const label = (opts.label ?? raw.name ?? 'VS Code Theme').trim()
+  const slug = opts.slug ?? vscodeThemeSlug(label)
+  const terminal = extractTerminalPalette(colors, background)
+
+  return {
+    derived,
+    mode: dark ? 'dark' : 'light',
+    theme: {
+      name: slug,
+      label,
+      description: opts.source ? `VS Code · ${opts.source}` : 'Imported from VS Code',
+      // Single palette in both slots. A lone VS Code theme is one-mode; callers
+      // that have both a light and dark variant (a Marketplace extension family)
+      // recombine them into proper colors/darkColors via buildThemeFromMarketplace.
+      colors: palette,
+      darkColors: palette,
+      // Only set when the theme ships a full ANSI palette — the terminal keeps
+      // its built-in VS Code defaults otherwise.
+      ...(terminal ? { terminal } : {})
+    }
+  }
+}