@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/theme-library.ts

@@ -0,0 +1,238 @@
+import { type EditorTheme, type EditorThemeId, editorThemes, isEditorThemeId } from './theme';
+
+export const CUSTOM_EDITOR_THEMES_STORAGE_KEY = 'vgai.editor.custom-themes.v1';
+export const CUSTOM_EDITOR_THEME_SCHEMA_VERSION = 1 as const;
+
+export interface CustomEditorThemeDocument {
+  readonly schemaVersion: typeof CUSTOM_EDITOR_THEME_SCHEMA_VERSION;
+  readonly name: string;
+  readonly theme: EditorTheme;
+}
+
+export interface EditorThemeChoice {
+  readonly id: string;
+  readonly name: string;
+  readonly kind: 'built-in' | 'custom';
+  readonly theme: EditorTheme;
+}
+
+const BUILT_IN_NAMES: Record<EditorThemeId, string> = {
+  'graphite-dark': 'Graphite Dark',
+  'midnight-high-contrast': 'Midnight High Contrast',
+};
+
+const THEME_STRING_PATHS = [
+  'id',
+  'color.surface.shell',
+  'color.surface.panel',
+  'color.surface.chrome',
+  'color.surface.raised',
+  'color.surface.inset',
+  'color.surface.overlay',
+  'color.boundary.default',
+  'color.boundary.strong',
+  'color.content.primary',
+  'color.content.muted',
+  'color.content.dim',
+  'color.content.onAccent',
+  'color.accent.default',
+  'color.accent.muted',
+  'color.semantic.danger',
+  'color.semantic.dangerMuted',
+  'color.semantic.dangerFaint',
+  'color.semantic.warning',
+  'color.semantic.warningMuted',
+  'color.semantic.success',
+  'color.semantic.successMuted',
+  'color.semantic.dynamic',
+  'color.semantic.dynamicMuted',
+  'color.neutralOverlay.hover',
+  'color.neutralOverlay.active',
+  'color.scrim',
+  'typography.sans',
+  'typography.mono',
+  'shape.small',
+  'shape.medium',
+  'shape.large',
+  'shape.full',
+  'elevation.small',
+  'elevation.medium',
+  'elevation.large',
+] as const;
+
+let cachedCustomThemes: readonly CustomEditorThemeDocument[] | null = null;
+let cachedChoices: readonly EditorThemeChoice[] | null = null;
+const listeners = new Set<() => void>();
+
+function storage(): Storage | null {
+  try {
+    return typeof window === 'undefined' ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function valueAtPath(value: unknown, path: string): unknown {
+  let current = value;
+  for (const key of path.split('.')) {
+    if (!current || typeof current !== 'object') return undefined;
+    current = (current as Record<string, unknown>)[key];
+  }
+  return current;
+}
+
+export function parseCustomEditorThemeDocument(value: unknown): CustomEditorThemeDocument {
+  if (!value || typeof value !== 'object') throw new Error('Theme file must contain an object.');
+  const record = value as Record<string, unknown>;
+  if (record['schemaVersion'] !== CUSTOM_EDITOR_THEME_SCHEMA_VERSION) {
+    throw new Error(
+      `Unsupported theme schema version. Expected ${CUSTOM_EDITOR_THEME_SCHEMA_VERSION}.`,
+    );
+  }
+  if (typeof record['name'] !== 'string' || !record['name'].trim()) {
+    throw new Error('Theme name must be a non-empty string.');
+  }
+  for (const path of THEME_STRING_PATHS) {
+    const field = valueAtPath(record['theme'], path);
+    if (typeof field !== 'string' || !field.trim()) {
+      throw new Error(`Theme field “${path}” must be a non-empty string.`);
+    }
+  }
+  return {
+    schemaVersion: CUSTOM_EDITOR_THEME_SCHEMA_VERSION,
+    name: record['name'].trim(),
+    theme: structuredClone(record['theme']) as EditorTheme,
+  };
+}
+
+function readCustomThemes(): readonly CustomEditorThemeDocument[] {
+  const raw = storage()?.getItem(CUSTOM_EDITOR_THEMES_STORAGE_KEY);
+  if (!raw) return [];
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    const valid: CustomEditorThemeDocument[] = [];
+    for (const item of parsed) {
+      try {
+        const document = parseCustomEditorThemeDocument(item);
+        if (
+          !isEditorThemeId(document.theme.id) &&
+          !valid.some((entry) => entry.theme.id === document.theme.id)
+        ) {
+          valid.push(document);
+        }
+      } catch {
+        // One malformed user record must not make every saved theme unavailable.
+      }
+    }
+    return valid;
+  } catch {
+    return [];
+  }
+}
+
+function customThemes(): readonly CustomEditorThemeDocument[] {
+  cachedCustomThemes ??= readCustomThemes();
+  return cachedCustomThemes;
+}
+
+function emit(): void {
+  cachedChoices = null;
+  for (const listener of listeners) listener();
+}
+
+function writeCustomThemes(themes: readonly CustomEditorThemeDocument[]): void {
+  cachedCustomThemes = themes;
+  storage()?.setItem(CUSTOM_EDITOR_THEMES_STORAGE_KEY, JSON.stringify(themes));
+  emit();
+}
+
+function uniqueThemeId(seed = 'custom-theme'): string {
+  const slug =
+    seed
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '') || 'custom-theme';
+  const occupied = new Set(editorThemeLibrarySnapshot().map((choice) => choice.id));
+  if (!occupied.has(slug)) return slug;
+  let suffix = 2;
+  while (occupied.has(`${slug}-${suffix}`)) suffix += 1;
+  return `${slug}-${suffix}`;
+}
+
+export function editorThemeLibrarySnapshot(): readonly EditorThemeChoice[] {
+  cachedChoices ??= [
+    ...Object.entries(editorThemes).map(([id, theme]) => ({
+      id,
+      name: BUILT_IN_NAMES[id as EditorThemeId],
+      kind: 'built-in' as const,
+      theme,
+    })),
+    ...customThemes().map((document) => ({
+      id: document.theme.id,
+      name: document.name,
+      kind: 'custom' as const,
+      theme: document.theme,
+    })),
+  ];
+  return cachedChoices;
+}
+
+export function subscribeEditorThemeLibrary(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function resolveEditorTheme(id: string): EditorThemeChoice | undefined {
+  return editorThemeLibrarySnapshot().find((choice) => choice.id === id);
+}
+
+export function duplicateEditorTheme(sourceId: string, requestedName?: string): EditorThemeChoice {
+  const source = resolveEditorTheme(sourceId);
+  if (!source) throw new Error(`Unknown editor theme “${sourceId}”.`);
+  const name = requestedName?.trim() || `${source.name} Copy`;
+  const id = uniqueThemeId(name);
+  const document: CustomEditorThemeDocument = {
+    schemaVersion: CUSTOM_EDITOR_THEME_SCHEMA_VERSION,
+    name,
+    theme: { ...structuredClone(source.theme), id },
+  };
+  writeCustomThemes([...customThemes(), document]);
+  return resolveEditorTheme(id)!;
+}
+
+export function saveCustomEditorTheme(document: CustomEditorThemeDocument): EditorThemeChoice {
+  const parsed = parseCustomEditorThemeDocument(document);
+  if (isEditorThemeId(parsed.theme.id)) throw new Error('Built-in themes cannot be overwritten.');
+  const themes = [...customThemes()];
+  const index = themes.findIndex((entry) => entry.theme.id === parsed.theme.id);
+  if (index >= 0) themes[index] = parsed;
+  else themes.push(parsed);
+  writeCustomThemes(themes);
+  return resolveEditorTheme(parsed.theme.id)!;
+}
+
+export function importCustomEditorTheme(value: unknown): EditorThemeChoice {
+  const parsed = parseCustomEditorThemeDocument(value);
+  const id = uniqueThemeId(parsed.name);
+  return saveCustomEditorTheme({ ...parsed, theme: { ...parsed.theme, id } });
+}
+
+export function deleteCustomEditorTheme(id: string): boolean {
+  const themes = customThemes();
+  const next = themes.filter((entry) => entry.theme.id !== id);
+  if (next.length === themes.length) return false;
+  writeCustomThemes(next);
+  return true;
+}
+
+/** Re-read records after another tab changes localStorage. */
+export function refreshEditorThemeLibraryFromStorage(): void {
+  cachedCustomThemes = readCustomThemes();
+  emit();
+}
+
+export function resetEditorThemeLibraryForTests(): void {
+  cachedCustomThemes = null;
+  cachedChoices = null;
+}

package/src/theme-preference.ts

@@ -0,0 +1,130 @@
+import { applyEditorTheme, type EditorTheme } from './theme';
+import {
+  CUSTOM_EDITOR_THEMES_STORAGE_KEY,
+  refreshEditorThemeLibraryFromStorage,
+  resolveEditorTheme,
+  subscribeEditorThemeLibrary,
+} from './theme-library';
+
+const STORAGE_KEY = 'vgai.editor.theme.v1';
+export const DEFAULT_EDITOR_THEME_ID = 'graphite-dark';
+
+let cachedThemeId: string | null = null;
+let installedRoot: HTMLElement | null = null;
+let previewTheme: EditorTheme | null = null;
+let removeStorageListener: (() => void) | null = null;
+const listeners = new Set<() => void>();
+
+function storage(): Storage | null {
+  try {
+    return typeof window === 'undefined' ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function readStoredThemeId(): string {
+  return resolveThemeId(storage()?.getItem(STORAGE_KEY));
+}
+
+function resolveThemeId(value: string | null | undefined): string {
+  return value && resolveEditorTheme(value) ? value : DEFAULT_EDITOR_THEME_ID;
+}
+
+function fallBackFromMissingTheme(): void {
+  if (resolveEditorTheme(editorThemeSnapshot())) return;
+  cachedThemeId = DEFAULT_EDITOR_THEME_ID;
+  storage()?.setItem(STORAGE_KEY, DEFAULT_EDITOR_THEME_ID);
+}
+
+export function editorThemeSnapshot(): string {
+  cachedThemeId ??= readStoredThemeId();
+  return cachedThemeId;
+}
+
+export function subscribeEditorTheme(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+function emit(): void {
+  for (const listener of listeners) listener();
+}
+
+function applyCurrentTheme(): void {
+  if (!installedRoot) return;
+  const theme = previewTheme ?? resolveEditorTheme(editorThemeSnapshot())?.theme;
+  if (theme) applyEditorTheme(installedRoot, theme);
+}
+
+export function setEditorThemePreference(themeId: string): void {
+  if (!resolveEditorTheme(themeId)) throw new Error(`Unknown editor theme “${themeId}”.`);
+  previewTheme = null;
+  if (editorThemeSnapshot() === themeId) {
+    applyCurrentTheme();
+    return;
+  }
+  cachedThemeId = themeId;
+  storage()?.setItem(STORAGE_KEY, themeId);
+  applyCurrentTheme();
+  emit();
+}
+
+/** Temporarily paint an unsaved draft without changing the persisted choice. */
+export function previewEditorTheme(theme: EditorTheme): void {
+  previewTheme = theme;
+  applyCurrentTheme();
+}
+
+/** Return from a draft preview to the currently persisted library theme. */
+export function clearEditorThemePreview(): void {
+  previewTheme = null;
+  applyCurrentTheme();
+}
+
+/** Install persisted theming and cross-tab synchronization on one editor root. */
+export function installEditorTheme(root: HTMLElement): () => void {
+  installedRoot = root;
+  applyCurrentTheme();
+
+  removeStorageListener?.();
+  if (typeof window !== 'undefined') {
+    const onStorage = (event: StorageEvent) => {
+      if (event.key === CUSTOM_EDITOR_THEMES_STORAGE_KEY) {
+        refreshEditorThemeLibraryFromStorage();
+        fallBackFromMissingTheme();
+      } else if (event.key === STORAGE_KEY) {
+        cachedThemeId = resolveThemeId(event.newValue);
+      } else return;
+      previewTheme = null;
+      applyCurrentTheme();
+      emit();
+    };
+    window.addEventListener('storage', onStorage);
+    removeStorageListener = () => window.removeEventListener('storage', onStorage);
+  }
+
+  return () => {
+    if (installedRoot === root) installedRoot = null;
+    removeStorageListener?.();
+    removeStorageListener = null;
+  };
+}
+
+/** Test-only process reset; production callers should never clear the preference implicitly. */
+export function resetEditorThemePreferenceForTests(): void {
+  cachedThemeId = null;
+  installedRoot = null;
+  previewTheme = null;
+  removeStorageListener?.();
+  removeStorageListener = null;
+  listeners.clear();
+}
+
+// Library changes made in this tab immediately repaint a selected custom
+// theme and update every menu/dialog subscriber.
+subscribeEditorThemeLibrary(() => {
+  fallBackFromMissingTheme();
+  applyCurrentTheme();
+  emit();
+});