@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/src/theme.ts

@@ -0,0 +1,24 @@
+/** Pure theme data for CSS and JavaScript hosts; safe to import without a DOM.
+ * @packageDocumentation
+ */
+import { stormVariables, lightVariables } from './themeDefinitions.ts';
+
+export { visualThemes, visualMetrics } from './themePalette.ts';
+export type { ThemeMode, VisualPalette } from './themePalette.ts';
+
+/** Public CSS custom properties. Missing values inherit from the host or use Storm defaults. */
+export type InspectorThemeVariables = { readonly [Key in keyof typeof stormVariables]: string };
+
+/** A partial or complete theme; no name, registration, or base preset is required. */
+export interface InspectorTheme {
+    /** Browser appearance for native controls; mapped to `--zfgi-color-scheme`. Does not select a palette. */
+    readonly colorScheme?: 'dark' | 'light';
+    /** CSS values keyed by the documented `--zfgi-*` custom property names. */
+    readonly variables?: Readonly<Partial<InspectorThemeVariables>>;
+}
+
+/** Complete Tokyo Night Storm preset; also the component's CSS fallback appearance. */
+export const tokyoNightStorm: InspectorTheme = Object.freeze({ colorScheme: 'dark', variables: Object.freeze(stormVariables) });
+
+/** Complete Tokyo Night Light preset, including the graph and native control appearance. */
+export const tokyoNightLight: InspectorTheme = Object.freeze({ colorScheme: 'light', variables: Object.freeze(lightVariables) });

package/src/themeDefinitions.ts

@@ -0,0 +1,103 @@
+import { visualThemes, visualMetrics, type ThemeMode } from './themePalette.ts';
+
+export const graphCategories = ['render', 'compute', 'copy', 'clear', 'command', 'external', 'declaration', 'output', 'texture', 'buffer'] as const;
+
+export function createThemeVariables(mode: ThemeMode) {
+    const p = visualThemes[mode];
+    const dark = mode === 'dark';
+    const tint = dark ? '18%' : '8%';
+    const categoryVariables = Object.fromEntries(graphCategories.flatMap(kind => [
+        [`--zfgi-graph-${kind}-stroke`, p[kind]],
+        [`--zfgi-graph-${kind}-fill`, `color-mix(in srgb, var(--zfgi-graph-${kind}-stroke, ${p[kind]}) var(--zfgi-graph-tint, ${tint}), var(--zfgi-canvas, ${p.canvas}))`],
+    ])) as Record<`--zfgi-graph-${typeof graphCategories[number]}-${'stroke' | 'fill'}`, string>;
+    return {
+        '--zfgi-canvas': p.canvas,
+        '--zfgi-background': p.panel,
+        '--zfgi-surface': p.inset,
+        '--zfgi-surface-raised': p.panel,
+        '--zfgi-surface-hover': p.hover,
+        '--zfgi-border': p.border,
+        '--zfgi-border-subtle': p.divider,
+        '--zfgi-border-strong': p.border,
+        '--zfgi-text': p.text,
+        '--zfgi-text-secondary': p.secondary,
+        '--zfgi-muted': p.muted,
+        '--zfgi-accent': p.accent,
+        '--zfgi-accent-soft': p.accentSoft,
+        '--zfgi-accent-hover': p.hover,
+        '--zfgi-success': p.success,
+        '--zfgi-warning': p.warning,
+        '--zfgi-danger': p.danger,
+        '--zfgi-shadow': dark ? '0 8px 24px #0006' : '0 8px 24px #343b5826',
+        '--zfgi-backdrop': dark ? '#13172899' : '#343b5840',
+        '--zfgi-font-ui': visualMetrics.fontUi,
+        '--zfgi-font-mono': visualMetrics.fontMono,
+        '--zfgi-font-size': '13px',
+        '--zfgi-font-size-small': '12px',
+        '--zfgi-control-height': '32px',
+        '--zfgi-row-height': '36px',
+        '--zfgi-radius-sm': '6px',
+        '--zfgi-radius-md': '10px',
+        '--zfgi-space-1': '4px',
+        '--zfgi-space-2': '8px',
+        '--zfgi-space-3': '12px',
+        '--zfgi-space-4': '16px',
+        '--zfgi-graph-tint': tint,
+        '--zfgi-graph-text': dark ? '#d5ddff' : p.text,
+        '--zfgi-graph-muted': p.muted,
+        '--zfgi-graph-font-family': `var(--zfgi-font-mono, ${visualMetrics.fontMono})`,
+        '--zfgi-graph-font-size': '13px',
+        '--zfgi-graph-node-border-width': '1.25px',
+        '--zfgi-graph-group-border-width': '1.5px',
+        '--zfgi-graph-edge-width': '1.5px',
+        '--zfgi-graph-edge-opacity': '1',
+        '--zfgi-graph-ordering-opacity': '1',
+        '--zfgi-graph-group-opacity': '1',
+        '--zfgi-graph-arrow-scale': '0.8',
+        '--zfgi-graph-hover-width': '2.5px',
+        '--zfgi-graph-selected-width': '3px',
+        '--zfgi-graph-selected': `var(--zfgi-accent, ${p.accent})`,
+        '--zfgi-graph-hover': dark ? '#d5ddff' : '#343b58',
+        '--zfgi-graph-active-bg': `var(--zfgi-graph-text, ${dark ? '#d5ddff' : p.text})`,
+        '--zfgi-graph-active-bg-opacity': '0.08',
+        '--zfgi-graph-active-bg-size': '12px',
+        '--zfgi-graph-group-stroke': p.group,
+        '--zfgi-graph-group-fill': dark ? '#292e42' : '#eceef5',
+        '--zfgi-graph-group-alternate-fill': dark ? '#30364b' : '#e5e9f3',
+        '--zfgi-graph-value': p.edge,
+        '--zfgi-graph-ordering': p.edge,
+        '--zfgi-graph-read': p.buffer,
+        '--zfgi-graph-write': p.warning,
+        '--zfgi-graph-culled-stroke': p.muted,
+        '--zfgi-graph-culled-fill': p.inset,
+        ...categoryVariables,
+    };
+}
+
+export const stormVariables = createThemeVariables('dark');
+export const lightVariables = createThemeVariables('light');
+
+// Existing public aliases only. Internal layout variables are deliberately excluded.
+export const legacyThemeAliases: Record<string, string> = Object.fromEntries([
+    'background', 'surface', 'surface-raised', 'surface-hover', 'border', 'border-subtle',
+    'border-strong', 'text', 'text-secondary', 'muted', 'accent', 'accent-soft', 'accent-hover',
+    'success', 'warning', 'danger', 'font-ui', 'font-mono', 'radius-sm', 'radius-md',
+].map(name => [`--zfgi-${name}`, `--zenfg-inspector-${name}`]));
+
+export function internalThemeProperty(property: string): string {
+    return property === '--zfgi-background' ? '--fgd-panel' : property.replace('--zfgi-', '--fgd-');
+}
+
+export function themeFallback(property: string, value: string): string {
+    const legacy = legacyThemeAliases[property];
+    return `var(${property}, ${legacy ? `var(${legacy}, ${value})` : value})`;
+}
+
+export const themeDefaultsCss = Object.entries(stormVariables)
+    .map(([property, value]) => `${internalThemeProperty(property)}: ${themeFallback(property, value)};`).join('\n');
+
+export function themePresetCss(): string {
+    return '/* Generated from Inspector theme definitions. */\n' + ([
+        ['tokyo-night-storm', 'dark', stormVariables], ['tokyo-night-light', 'light', lightVariables],
+    ] as const).map(([name, scheme, variables]) => `[data-zfgi-theme="${name}"] {\n  --zfgi-color-scheme: ${scheme};\n${Object.entries(variables).map(([key, value]) => `  ${key}: ${value};`).join('\n')}\n}`).join('\n');
+}

package/src/themePalette.ts

@@ -0,0 +1,44 @@
+/** Appearance of the shared Tokyo Night application palette. */
+export type ThemeMode = 'dark' | 'light';
+
+const dark = {
+	canvas: '#24283b', sidebar: '#1f2335', panel: '#292e42', inset: '#202437',
+	hover: '#30374e', border: '#454d6c', divider: '#353c55',
+	text: '#c0caf5', secondary: '#a9b1d6', muted: '#9aa5ce',
+	accent: '#7aa2f7', accentSoft: '#2c3855', onAccent: '#1f2335',
+	purple: '#bb9af7', cyan: '#7dcfff', success: '#9ece6a', warning: '#e0af68', danger: '#f7768e',
+	render: '#9ece6a', compute: '#a6afff', copy: '#e0af68', clear: '#c4cf89',
+	command: '#bb9af7', external: '#ff9e64', declaration: '#cfc9c2', output: '#f5a2c0',
+	texture: '#f5a2c0', buffer: '#73daca', edge: '#9aa5ce', group: '#8592bd',
+	comment: '#9aa5ce', keyword: '#bb9af7', string: '#9ece6a', number: '#ff9e64',
+	function: '#7aa2f7', type: '#7dcfff', property: '#73daca',
+} as const;
+
+/** Semantic colors shared by the Inspector and its hosts. */
+export type VisualPalette = { readonly [Key in keyof typeof dark]: string };
+
+/** Tokyo Night Storm and Light semantic palettes. */
+export const visualThemes: Readonly<Record<ThemeMode, VisualPalette>> = {
+	dark,
+	light: {
+		canvas: '#f5f6fa', sidebar: '#eceef5', panel: '#ffffff', inset: '#eef0f7',
+		hover: '#e2e6f1', border: '#909ab0', divider: '#d8ddea',
+		text: '#343b58', secondary: '#59627d', muted: '#5e667e',
+		accent: '#2959aa', accentSoft: '#e1e9f8', onAccent: '#ffffff',
+		purple: '#5a3e8e', cyan: '#006c86', success: '#385f0d', warning: '#8f5e15', danger: '#a03b50',
+		render: '#385f0d', compute: '#5155a6', copy: '#8f5e15', clear: '#566423',
+		command: '#5a3e8e', external: '#965027', declaration: '#65553e', output: '#963c67',
+		texture: '#963c67', buffer: '#236b62', edge: '#606982', group: '#606982',
+		comment: '#606982', keyword: '#5a3e8e', string: '#385f0d', number: '#965027',
+		function: '#2959aa', type: '#006c86', property: '#236b62',
+	},
+};
+
+/** Shared typography, spacing, and corner dimensions. */
+export const visualMetrics = {
+	fontUi: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif',
+	fontMono: 'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Microsoft YaHei", monospace',
+	fontBody: '14px', fontControl: '13px', fontTitle: '28px', fontCode: '14px',
+	space1: '4px', space2: '8px', space3: '12px', space4: '16px', space6: '24px', space8: '32px',
+	radiusSmall: '6px', radiusPanel: '10px',
+} as const;