@happyvertical/smrt-ui 0.30.0

package/dist/themes/ThemeProvider.svelte

@@ -0,0 +1,275 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { onMount } from 'svelte';
+import { setThemeContext, type ThemeContext } from './context.svelte.js';
+import { generateThemeVariables } from './css-generator.js';
+import { getTheme } from './registry.js';
+import type {
+  ColorScheme,
+  Theme,
+  ThemeConfig,
+  ThemePreset,
+  ThemeState as ThemeStateType,
+} from './types.js';
+import { defaultThemeConfig } from './types.js';
+
+interface Props {
+  /** Theme preset to use */
+  preset?: ThemePreset;
+  /** Color scheme preference */
+  colorScheme?: ColorScheme;
+  /** Primary accent color override */
+  primaryColor?: string;
+  /** Border radius preference */
+  borderRadius?: ThemeConfig['borderRadius'];
+  /** Custom CSS variable overrides */
+  overrides?: Record<string, string>;
+  /** Persist preferences to localStorage */
+  persist?: boolean;
+  /** Storage key for persistence */
+  storageKey?: string;
+  /** Content */
+  children: Snippet;
+}
+
+let {
+  preset = defaultThemeConfig.preset,
+  colorScheme = defaultThemeConfig.colorScheme,
+  primaryColor,
+  borderRadius = defaultThemeConfig.borderRadius,
+  overrides = {},
+  persist = defaultThemeConfig.persist,
+  storageKey = defaultThemeConfig.storageKey,
+  children,
+}: Props = $props();
+
+// Internal state
+let config = $state<ThemeConfig>({
+  preset: defaultThemeConfig.preset,
+  colorScheme: defaultThemeConfig.colorScheme,
+  primaryColor: undefined,
+  borderRadius: defaultThemeConfig.borderRadius,
+  overrides: {},
+  persist: defaultThemeConfig.persist,
+  storageKey: defaultThemeConfig.storageKey,
+});
+
+let systemPrefersDark = $state(false);
+let mounted = $state(false);
+
+// Derived state
+const currentTheme = $derived<Theme>(getTheme(config.preset));
+
+const resolvedScheme = $derived<'light' | 'dark'>(
+  config.colorScheme === 'system'
+    ? systemPrefersDark
+      ? 'dark'
+      : 'light'
+    : config.colorScheme,
+);
+
+const isDark = $derived(resolvedScheme === 'dark');
+
+// Generate CSS variables - using $derived with immediate value
+const cssVariables = $derived.by(() => {
+  const vars = generateThemeVariables(currentTheme, isDark);
+
+  // Apply primary color override
+  if (config.primaryColor) {
+    vars['--smrt-color-primary'] = config.primaryColor;
+    // Recalculate dependent colors would go here in a full implementation
+  }
+
+  // Apply border radius override
+  if (config.borderRadius && config.borderRadius !== 'md') {
+    // The border radius values are already in CSS vars, but we could
+    // add logic here to override specific radius values
+  }
+
+  // Apply custom overrides
+  return { ...vars, ...config.overrides };
+});
+
+// Convert to style string
+const styleString = $derived.by(() => {
+  return Object.entries(cssVariables)
+    .map(([key, value]) => `${key}: ${value}`)
+    .join('; ');
+});
+
+// Theme state for context
+const themeState = $derived<ThemeStateType>({
+  preset: config.preset,
+  colorScheme: config.colorScheme,
+  resolvedScheme,
+  isDark,
+  config,
+  theme: currentTheme,
+});
+
+// Context methods
+function setPreset(newPreset: ThemePreset): void {
+  config.preset = newPreset;
+  persistConfig();
+}
+
+function setColorScheme(scheme: ColorScheme): void {
+  config.colorScheme = scheme;
+  persistConfig();
+}
+
+function toggleColorScheme(): void {
+  const newScheme = isDark ? 'light' : 'dark';
+  setColorScheme(newScheme);
+}
+
+function updateConfig(updates: Partial<ThemeConfig>): void {
+  config = { ...config, ...updates };
+  persistConfig();
+}
+
+// Persistence
+function persistConfig(): void {
+  if (!config.persist || typeof localStorage === 'undefined') return;
+
+  try {
+    const data = JSON.stringify({
+      preset: config.preset,
+      colorScheme: config.colorScheme,
+      borderRadius: config.borderRadius,
+    });
+    localStorage.setItem(config.storageKey!, data);
+  } catch {
+    // Ignore storage errors (e.g., private mode, quota exceeded)
+  }
+}
+
+function loadPersistedConfig(): void {
+  if (!config.persist || typeof localStorage === 'undefined') return;
+
+  try {
+    const stored = localStorage.getItem(config.storageKey!);
+    if (stored) {
+      const data = JSON.parse(stored);
+      if (data.preset) config.preset = data.preset;
+      if (data.colorScheme) config.colorScheme = data.colorScheme;
+      if (data.borderRadius) config.borderRadius = data.borderRadius;
+    }
+  } catch {
+    // Ignore storage errors (e.g., corrupted data, JSON parse errors)
+  }
+}
+
+// Create context
+const context: ThemeContext = {
+  get state() {
+    return themeState;
+  },
+  setPreset,
+  setColorScheme,
+  toggleColorScheme,
+  updateConfig,
+};
+
+setThemeContext(context);
+
+onMount(() => {
+  // Check system preference
+  if (typeof window !== 'undefined') {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    systemPrefersDark = mediaQuery.matches;
+
+    // Listen for system preference changes
+    const handler = (e: MediaQueryListEvent) => {
+      systemPrefersDark = e.matches;
+    };
+    mediaQuery.addEventListener('change', handler);
+
+    // Load persisted preferences
+    loadPersistedConfig();
+
+    mounted = true;
+
+    return () => {
+      mediaQuery.removeEventListener('change', handler);
+    };
+  }
+});
+
+// Update document classes and attributes
+$effect(() => {
+  if (typeof document !== 'undefined' && mounted) {
+    const html = document.documentElement;
+
+    // Dark mode class for Tailwind/tailwindcss-dark-mode compatibility
+    html.classList.toggle('dark', isDark);
+
+    // Theme data attributes
+    html.setAttribute('data-theme', config.preset);
+    html.setAttribute('data-color-scheme', resolvedScheme);
+
+    // Color scheme for browser UI
+    html.style.colorScheme = resolvedScheme;
+  }
+});
+
+// Sync props to state
+$effect(() => {
+  config.preset = preset;
+});
+
+$effect(() => {
+  config.colorScheme = colorScheme;
+});
+
+$effect(() => {
+  if (primaryColor !== undefined) {
+    config.primaryColor = primaryColor;
+  }
+});
+
+$effect(() => {
+  config.borderRadius = borderRadius;
+});
+
+// Sync overrides prop to state
+$effect(() => {
+  config.overrides = overrides;
+});
+
+$effect(() => {
+  config.persist = persist;
+});
+
+$effect(() => {
+  config.storageKey = storageKey;
+});
+</script>
+
+<div
+  class="smrt-theme-root"
+  class:dark={isDark}
+  class:smrt-theme-glass={config.preset === 'glass'}
+  style={styleString}
+  data-theme={config.preset}
+  data-color-scheme={resolvedScheme}
+>
+  {@render children()}
+</div>
+
+<style>
+  .smrt-theme-root {
+    /* Ensure theme variables cascade properly */
+    /* Note: Using block display instead of contents so styles apply correctly */
+    display: block;
+    color: var(--smrt-color-on-background);
+    background-color: var(--smrt-color-background);
+    font-family: var(--smrt-font-family);
+  }
+
+  /* Glass theme specific base styles */
+  :global(.smrt-theme-glass) {
+    --smrt-glass-surface: var(--smrt-color-surface);
+    --smrt-glass-border: var(--smrt-color-outline);
+  }
+</style>

package/dist/themes/ThemeProvider.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { ColorScheme, ThemeConfig, ThemePreset } from './types.js';
+interface Props {
+    /** Theme preset to use */
+    preset?: ThemePreset;
+    /** Color scheme preference */
+    colorScheme?: ColorScheme;
+    /** Primary accent color override */
+    primaryColor?: string;
+    /** Border radius preference */
+    borderRadius?: ThemeConfig['borderRadius'];
+    /** Custom CSS variable overrides */
+    overrides?: Record<string, string>;
+    /** Persist preferences to localStorage */
+    persist?: boolean;
+    /** Storage key for persistence */
+    storageKey?: string;
+    /** Content */
+    children: Snippet;
+}
+declare const ThemeProvider: import("svelte").Component<Props, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.svelte.d.ts.map

package/dist/themes/ThemeProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,OAAO,KAAK,EACV,WAAW,EAEX,WAAW,EACX,WAAW,EAEZ,MAAM,YAAY,CAAC;AAIpB,UAAU,KAAK;IACb,0BAA0B;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAyOD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/themes/__tests__/css-generator.test.js

@@ -0,0 +1,32 @@
+/**
+ * Unit tests for the theme CSS generator (coverage uplift, S6 gate).
+ */
+import { describe, expect, it } from 'vitest';
+import { generateAllThemesCSS, generateThemeCSS, generateThemeVariables, variablesToStyleString, } from '../css-generator';
+import { getTheme } from '../registry';
+describe('theme CSS generator', () => {
+    const theme = getTheme('material');
+    it('generateThemeVariables returns --smrt-* custom properties', () => {
+        const vars = generateThemeVariables(theme);
+        const keys = Object.keys(vars);
+        expect(keys.length).toBeGreaterThan(0);
+        expect(keys.some((k) => k.startsWith('--smrt-'))).toBe(true);
+    });
+    it('variablesToStyleString emits "name: value;" declarations', () => {
+        const css = variablesToStyleString({
+            '--smrt-x': '1px',
+            '--smrt-y': 'red',
+        });
+        expect(css).toContain('--smrt-x: 1px');
+        expect(css).toContain('--smrt-y: red');
+    });
+    it('generateThemeCSS produces an embeddable block', () => {
+        const css = generateThemeCSS(theme);
+        expect(typeof css).toBe('string');
+        expect(css).toContain('--smrt-');
+    });
+    it('generateAllThemesCSS resolves to a non-empty string', async () => {
+        const css = await generateAllThemesCSS();
+        expect(css.length).toBeGreaterThan(0);
+    });
+});

package/dist/themes/__tests__/registry.test.js

@@ -0,0 +1,43 @@
+/**
+ * Unit tests for the theme registry (coverage uplift toward smrt-svelte's T2
+ * floor, S11 #1416 / S6 gate). Pure logic — no rendering.
+ */
+import { describe, expect, it } from 'vitest';
+import { availablePresets, getAllThemes, getCustomTheme, getTheme, getThemeName, getThemeOptions, hasCustomTheme, isValidPreset, registerCustomTheme, themes, } from '../registry';
+describe('theme registry', () => {
+    it('returns each built-in preset from getTheme', () => {
+        for (const preset of availablePresets) {
+            const theme = getTheme(preset);
+            expect(theme).toBeDefined();
+            expect(theme.name).toBeTruthy();
+        }
+    });
+    it('throws on an unknown preset', () => {
+        expect(() => getTheme('nope')).toThrow(/Unknown theme preset/);
+    });
+    it('validates presets', () => {
+        expect(isValidPreset('material')).toBe(true);
+        expect(isValidPreset('bogus')).toBe(false);
+    });
+    it('returns display names with a fallback', () => {
+        expect(getThemeName('material')).toBe(themes.material.name);
+        expect(getThemeName('bogus')).toBe('bogus');
+    });
+    it('lists all built-in themes and options', () => {
+        expect(getAllThemes()).toHaveLength(availablePresets.length);
+        const options = getThemeOptions();
+        expect(options.length).toBeGreaterThanOrEqual(availablePresets.length);
+        expect(options[0]).toHaveProperty('value');
+        expect(options[0]).toHaveProperty('label');
+    });
+    it('registers, resolves, and reports custom themes', () => {
+        const custom = { id: 'unit-custom', name: 'Unit Custom' };
+        expect(hasCustomTheme('unit-custom')).toBe(false);
+        registerCustomTheme(custom);
+        expect(hasCustomTheme('unit-custom')).toBe(true);
+        expect(getCustomTheme('unit-custom')).toBe(custom);
+        expect(isValidPreset('unit-custom')).toBe(true);
+        expect(getTheme('unit-custom')).toBe(custom);
+        expect(getThemeName('unit-custom')).toBe('Unit Custom');
+    });
+});

package/dist/themes/__tests__/token-aliases.test.js

@@ -0,0 +1,176 @@
+/**
+ * Design-token alias contract (issue #1431).
+ *
+ * Components consume a Material-3 token vocabulary (`radius-small`,
+ * `duration-short2`, `spacing-md`, `typography-*-font`, …) that must resolve to
+ * real values across every preset. These tests pin the additive aliases emitted
+ * by the canonical preset generator (`css-generator.ts`) and the simple
+ * `src/theme/` ThemeProvider so a regression that drops a consumed alias fails
+ * here as well as in scripts/check-svelte-tokens.mjs.
+ */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { generateThemeVariables as generateSimpleThemeVariables } from '../../theme/tokens.js';
+import { generateThemeVariables } from '../css-generator.js';
+import { themes } from '../registry.js';
+/** Material-3 + helper aliases that components consume and expect emitted. */
+const REQUIRED_ALIASES = [
+    // Radius (Material-3 named scale)
+    '--smrt-radius-extra-small',
+    '--smrt-radius-small',
+    '--smrt-radius-medium',
+    '--smrt-radius-large',
+    '--smrt-radius-extra-large',
+    // Spacing (named aliases)
+    '--smrt-spacing-xs',
+    '--smrt-spacing-sm',
+    '--smrt-spacing-md',
+    '--smrt-spacing-lg',
+    '--smrt-spacing-xl',
+    '--smrt-spacing-2xl',
+    '--smrt-spacing-3xl',
+    // Motion (Material-3 duration scale)
+    '--smrt-duration-short1',
+    '--smrt-duration-short2',
+    '--smrt-duration-short3',
+    '--smrt-duration-short4',
+    '--smrt-duration-medium1',
+    '--smrt-duration-medium2',
+    '--smrt-duration-medium3',
+    '--smrt-duration-medium4',
+    '--smrt-duration-long1',
+    '--smrt-duration-long2',
+    '--smrt-duration-long3',
+    '--smrt-duration-long4',
+    // Helper tokens (theme-independent)
+    '--smrt-font-family-mono',
+    '--smrt-typography-weight-normal',
+    '--smrt-typography-weight-medium',
+    '--smrt-typography-weight-semibold',
+    '--smrt-typography-weight-bold',
+    '--smrt-z-index-dialog',
+    '--smrt-z-index-loading',
+];
+const SPACING_NUMERIC_TOKENS = [
+    '--smrt-spacing-0',
+    '--smrt-spacing-0_5',
+    '--smrt-spacing-1',
+    '--smrt-spacing-1_5',
+    '--smrt-spacing-2',
+    '--smrt-spacing-2_5',
+    '--smrt-spacing-3',
+    '--smrt-spacing-3_5',
+    '--smrt-spacing-4',
+    '--smrt-spacing-5',
+    '--smrt-spacing-6',
+    '--smrt-spacing-7',
+    '--smrt-spacing-8',
+    '--smrt-spacing-9',
+    '--smrt-spacing-10',
+    '--smrt-spacing-11',
+    '--smrt-spacing-12',
+    '--smrt-spacing-14',
+    '--smrt-spacing-16',
+    '--smrt-spacing-20',
+    '--smrt-spacing-24',
+];
+const TYPOGRAPHY_FONT_SHORTHANDS = [
+    '--smrt-typography-body-large-font',
+    '--smrt-typography-body-medium-font',
+    '--smrt-typography-body-small-font',
+    '--smrt-typography-label-large-font',
+    '--smrt-typography-label-medium-font',
+    '--smrt-typography-label-small-font',
+    '--smrt-typography-title-large-font',
+    '--smrt-typography-title-medium-font',
+    '--smrt-typography-title-small-font',
+    '--smrt-typography-headline-small-font',
+    '--smrt-typography-headline-medium-font',
+];
+const BASE_COMPONENT_COLOR_TOKENS = [
+    '--smrt-color-surface-container-highest',
+    '--smrt-color-surface-container-lowest',
+    '--smrt-color-surface-dim',
+    '--smrt-color-surface-bright',
+    '--smrt-color-shadow',
+];
+const packageRoot = process.cwd().endsWith('packages/smrt-ui')
+    ? process.cwd()
+    : join(process.cwd(), 'packages/smrt-ui');
+const STATIC_STYLE_PATHS = {
+    material: join(packageRoot, 'src/themes/styles/material.css'),
+    glass: join(packageRoot, 'src/themes/styles/glass.css'),
+    studio: join(packageRoot, 'src/themes/styles/studio.css'),
+};
+function collectDefinedTokens(css) {
+    return new Set([...css.matchAll(/(--smrt-[a-z0-9_-]+)\s*:/gi)].map((match) => match[1]));
+}
+describe('preset generator alias emission (#1431)', () => {
+    for (const theme of Object.values(themes)) {
+        for (const isDark of [false, true]) {
+            it(`${theme.id} ${isDark ? 'dark' : 'light'} emits every consumed alias`, () => {
+                const vars = generateThemeVariables(theme, isDark);
+                for (const token of [
+                    ...REQUIRED_ALIASES,
+                    ...SPACING_NUMERIC_TOKENS,
+                    ...TYPOGRAPHY_FONT_SHORTHANDS,
+                ]) {
+                    expect(vars[token], `${token} should be emitted`).toBeDefined();
+                    expect(vars[token]).not.toBe('');
+                }
+            });
+        }
+    }
+    it('maps Material-3 radius aliases onto canonical t-shirt values', () => {
+        const vars = generateThemeVariables(themes.material, false);
+        expect(vars['--smrt-radius-small']).toBe(vars['--smrt-radius-sm']);
+        expect(vars['--smrt-radius-medium']).toBe(vars['--smrt-radius-md']);
+        expect(vars['--smrt-radius-large']).toBe(vars['--smrt-radius-lg']);
+    });
+    it('maps named spacing aliases onto numeric-scale values', () => {
+        const vars = generateThemeVariables(themes.material, false);
+        expect(vars['--smrt-spacing-sm']).toBe(vars['--smrt-spacing-2']);
+        expect(vars['--smrt-spacing-md']).toBe(vars['--smrt-spacing-4']);
+        expect(vars['--smrt-spacing-xl']).toBe(vars['--smrt-spacing-8']);
+    });
+    it('builds the typography `font` shorthand from the emitted longhands', () => {
+        const vars = generateThemeVariables(themes.material, false);
+        const shorthand = vars['--smrt-typography-body-medium-font'];
+        expect(shorthand).toContain(vars['--smrt-typography-body-medium-size']);
+        // weight size/line-height family
+        expect(shorthand).toMatch(/^\d+\s+\S+\/\S+\s+.+$/);
+    });
+});
+describe('static preset CSS token surface (#1431)', () => {
+    for (const theme of Object.values(themes)) {
+        it(`${theme.id} stylesheet contains the generated token surface`, () => {
+            const css = readFileSync(STATIC_STYLE_PATHS[theme.id], 'utf8');
+            const defined = collectDefinedTokens(css);
+            const generatedTokens = new Set([
+                ...Object.keys(generateThemeVariables(theme, false)),
+                ...Object.keys(generateThemeVariables(theme, true)),
+            ]);
+            const missing = [...generatedTokens]
+                .filter((token) => !defined.has(token))
+                .sort();
+            expect(missing).toEqual([]);
+        });
+    }
+});
+describe('simple ThemeProvider alias emission (#1431)', () => {
+    for (const isDark of [false, true]) {
+        it(`${isDark ? 'dark' : 'light'} emits shared aliases and component scale tokens`, () => {
+            const vars = generateSimpleThemeVariables(isDark);
+            for (const token of [
+                ...REQUIRED_ALIASES,
+                ...SPACING_NUMERIC_TOKENS,
+                ...TYPOGRAPHY_FONT_SHORTHANDS,
+                ...BASE_COMPONENT_COLOR_TOKENS,
+            ]) {
+                expect(vars[token], `${token} should be emitted`).toBeDefined();
+                expect(vars[token]).not.toBe('');
+            }
+        });
+    }
+});