@codenhub/theme 0.0.2 → 0.0.3

package/dist/index.js

@@ -1,198 +1,483 @@
-//#region src/index.ts
+//#region src/constants.ts
 /** Window event name dispatched with `ThemeChangeDetail` after a theme change is applied in browser environments. */
 const THEME_CHANGE_EVENT = "themechange";
+/**
+* Default `localStorage` key used to store the user's explicit theme preference.
+*
+* @internal
+*/
 const DEFAULT_STORAGE_KEY = "app-theme-preference";
+/**
+* Default HTML attribute set on `document.documentElement` to reflect the active theme.
+*
+* @internal
+*/
 const DEFAULT_ATTRIBUTE = "data-theme";
+/**
+* Default CSS class name applied to `document.documentElement` when a dark color scheme theme is active.
+*
+* @internal
+*/
 const DARK_CLASS = "dark";
+/**
+* Media query used to detect if the user's OS preference is set to a dark color scheme.
+*
+* @internal
+*/
 const PREFERS_DARK_QUERY = "(prefers-color-scheme: dark)";
+/**
+* Regular expression used to match and validate whitespace characters in CSS class names.
+*
+* @internal
+*/
 const CLASS_TOKEN_WHITESPACE = /\s/;
 /** Built-in light theme used by default and available for custom theme lists. */
-const lightTheme = {
+const LIGHT_THEME = Object.freeze({
 	name: "light",
 	colorScheme: "light"
-};
+});
 /** Built-in dark theme used by default and available for custom theme lists. */
-const darkTheme = {
+const DARK_THEME = Object.freeze({
 	name: "dark",
 	colorScheme: "dark"
-};
-const defaultOptions = {
-	themes: [lightTheme, darkTheme],
-	defaultTheme: lightTheme.name,
-	systemTheme: {
-		light: lightTheme.name,
-		dark: darkTheme.name
-	},
+});
+/**
+* Default resolved options used to initialize theme management when custom options are not provided.
+*
+* @internal
+*/
+const DEFAULT_OPTIONS = Object.freeze({
+	themes: Object.freeze([LIGHT_THEME, DARK_THEME]),
+	defaultTheme: LIGHT_THEME.name,
+	systemTheme: Object.freeze({
+		light: LIGHT_THEME.name,
+		dark: DARK_THEME.name
+	}),
 	storageKey: DEFAULT_STORAGE_KEY,
 	attribute: DEFAULT_ATTRIBUTE,
-	tailwindcss: false,
-	applyClass: true
-};
-const isBrowser = () => {
-	return typeof window !== "undefined" && typeof document !== "undefined";
-};
-const getThemeClass = (theme, applyClass) => {
-	if (applyClass === false) return null;
-	if (typeof applyClass === "function") {
-		const className = applyClass(theme);
+	isTailwindCss: false,
+	shouldApplyClass: true
+});
+//#endregion
+//#region src/class-resolver.ts
+/**
+* Resolves the single DOM class token applied for a theme.
+*
+* @returns The class string, or `null` when class application is disabled.
+* @internal
+*/
+const getThemeClass = (theme, shouldApplyClass) => {
+	if (shouldApplyClass === false) return null;
+	if (typeof shouldApplyClass === "function") {
+		const className = shouldApplyClass(theme);
 		assertClassToken(className, `Theme class resolver returned an invalid class for theme: ${theme.name}.`);
 		return className;
 	}
-	return `theme-${theme.name}`;
+	const className = `theme-${theme.name}`;
+	assertClassToken(className, `Theme name cannot be used as a default theme class: ${theme.name}.`);
+	return className;
 };
+/**
+* Asserts that a value is a valid single DOM class token (non-empty string, no whitespace).
+*
+* @internal
+*/
 const assertClassToken = (className, message) => {
-	if (className.length === 0 || CLASS_TOKEN_WHITESPACE.test(className)) throw new Error(message);
+	if (typeof className !== "string" || className.length === 0 || CLASS_TOKEN_WHITESPACE.test(className)) throw new Error(message);
+};
+//#endregion
+//#region src/dom.ts
+/**
+* Applies the active theme configuration, class/attribute updates, and CSS Custom Properties to the DOM.
+*
+* @param resolvedClasses - Pre-computed class strings for all configured themes. Callers must supply
+*   this value; computing it on each activation is the caller's responsibility (see `ThemeImpl`).
+* @param nextClass - Pre-computed class string for the active theme, or `null` when class application is disabled.
+* @internal
+*/
+const applyTheme = (args) => {
+	const { theme, options, activeTokens, resolvedClasses, nextClass } = args;
+	if (typeof document === "undefined") return;
+	const root = document.documentElement;
+	root.setAttribute(options.attribute, theme.name);
+	root.style.colorScheme = theme.colorScheme;
+	for (const configuredClass of resolvedClasses) if (configuredClass !== nextClass) root.classList.remove(configuredClass);
+	if (nextClass !== null) root.classList.add(nextClass);
+	if (options.isTailwindCss) root.classList.toggle(DARK_CLASS, theme.colorScheme === "dark");
+	if (options.tokenSchema) {
+		const schema = options.tokenSchema;
+		const mergedTokens = {
+			...theme.tokens,
+			...activeTokens
+		};
+		for (const key of Object.keys(schema)) {
+			const cssVarName = schema[key];
+			const tokenValue = mergedTokens[key];
+			if (tokenValue !== void 0 && tokenValue !== null) root.style.setProperty(cssVarName, tokenValue);
+			else root.style.removeProperty(cssVarName);
+		}
+	}
+};
+/**
+* Resolves any missing CSS variables from the computed style of the root DOM element.
+*
+* @internal
+*/
+const readComputedTokens = (args) => {
+	const { theme, options, activeTokens } = args;
+	const computedTokens = {};
+	if (typeof window === "undefined" || typeof window.getComputedStyle !== "function" || typeof document === "undefined" || !options.tokenSchema) return computedTokens;
+	const root = document.documentElement;
+	try {
+		const schema = options.tokenSchema;
+		const mergedTokens = {
+			...theme.tokens,
+			...activeTokens
+		};
+		if (!Object.keys(schema).some((key) => mergedTokens[key] === void 0)) return computedTokens;
+		const style = window.getComputedStyle(root);
+		for (const key of Object.keys(schema)) if (mergedTokens[key] === void 0) {
+			const val = style.getPropertyValue(schema[key]).trim();
+			if (val) computedTokens[key] = val;
+		}
+	} catch (error) {
+		console.error("[theme] Failed to read computed token styles:", error);
+	}
+	return computedTokens;
+};
+/**
+* Dispatches a custom `themechange` event on the window.
+*
+* @internal
+*/
+const emitThemeEvent = (detail) => {
+	if (typeof window === "undefined" || typeof window.dispatchEvent !== "function" || typeof window.CustomEvent !== "function") return;
+	window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail }));
+};
+//#endregion
+//#region src/storage.ts
+/**
+* Reads and validates the user's stored theme preference from `localStorage`.
+* Returns the theme name if it exists and matches a configured theme; otherwise `null`.
+*
+* @internal
+*/
+const readStorage = (storageKey, themes) => {
+	if (typeof window === "undefined") return null;
+	try {
+		const storedName = window.localStorage.getItem(storageKey);
+		if (storedName === null) return null;
+		return themes.some((t) => t.name === storedName) ? storedName : null;
+	} catch (error) {
+		console.error("[theme] Failed to read from localStorage:", error);
+		return null;
+	}
+};
+/**
+* Writes the explicit theme preference to `localStorage`.
+*
+* @internal
+*/
+const writeStorage = (storageKey, themeName) => {
+	if (typeof window === "undefined") return;
+	try {
+		window.localStorage.setItem(storageKey, themeName);
+	} catch (error) {
+		console.error("[theme] Failed to write to localStorage:", error);
+	}
+};
+/**
+* Removes the explicit theme preference from `localStorage`.
+*
+* @internal
+*/
+const removeStorage = (storageKey) => {
+	if (typeof window === "undefined") return;
+	try {
+		window.localStorage.removeItem(storageKey);
+	} catch (error) {
+		console.error("[theme] Failed to remove from localStorage:", error);
+	}
+};
+//#endregion
+//#region src/system.ts
+/**
+* Resolves the configured theme that matches the active OS color-scheme preference.
+*
+* @internal
+*/
+const readSystemTheme = (options) => {
+	const { defaultTheme, systemTheme, themes } = options;
+	const getTheme = (name) => {
+		const theme = themes.find((candidate) => candidate.name === name);
+		if (theme === void 0)
+ // c8 ignore next
+		throw new Error(`Theme is not configured: ${name}.`);
+		return theme;
+	};
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return getTheme(defaultTheme);
+	try {
+		return getTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? systemTheme.dark : systemTheme.light);
+	} catch {
+		return getTheme(defaultTheme);
+	}
 };
+/**
+* Registers a media query listener for system color-scheme changes and returns a cleanup function.
+*
+* @internal
+*/
+const registerSystemListener = (handler) => {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const mql = (() => {
+		try {
+			return window.matchMedia(PREFERS_DARK_QUERY);
+		} catch {
+			return null;
+		}
+	})();
+	if (mql) try {
+		mql.addEventListener("change", handler);
+	} catch {}
+	return () => {
+		if (mql === null) return;
+		try {
+			mql.removeEventListener("change", handler);
+		} catch {}
+	};
+};
+/**
+* Registers a listener for local storage changes across tabs and returns a cleanup function.
+*
+* @internal
+*/
+const registerStorageListener = (handler) => {
+	if (typeof window === "undefined" || typeof window.addEventListener !== "function") return () => {};
+	window.addEventListener("storage", handler);
+	return () => {
+		window.removeEventListener("storage", handler);
+	};
+};
+//#endregion
+//#region src/validation.ts
+/**
+* Validates the resolved theme configuration, throwing descriptive errors on misconfiguration.
+*
+* @internal
+*/
 const assertThemeConfig = (options) => {
+	if (typeof options.attribute !== "string" || options.attribute.trim().length === 0) throw new Error("Theme attribute option must be a non-empty string.");
+	if (/[\s"'/>=]/.test(options.attribute)) throw new Error("Theme attribute option must be a valid HTML attribute name.");
+	if (typeof options.storageKey !== "string" || options.storageKey.trim().length === 0) throw new Error("Theme storageKey option must be a non-empty string.");
+	if (!Array.isArray(options.themes)) throw new Error("Theme options.themes must be an array.");
 	const names = /* @__PURE__ */ new Set();
+	if (options.tokenSchema) {
+		for (const [key, value] of Object.entries(options.tokenSchema)) if (typeof value !== "string" || !value.startsWith("--")) throw new Error(`Token schema key "${key}" must map to a CSS custom property starting with "--". Received: "${value}".`);
+	}
 	for (const theme of options.themes) {
-		if (theme.name.trim().length === 0) throw new Error("Theme names must be non-empty.");
+		if (typeof theme !== "object" || theme === null) throw new Error("Theme definitions must be objects.");
+		if (typeof theme.name !== "string" || theme.name.trim().length === 0) throw new Error("Theme names must be non-empty strings.");
+		if (theme.colorScheme !== "light" && theme.colorScheme !== "dark") throw new Error(`Theme "${theme.name}" has an invalid colorScheme: ${theme.colorScheme}. Must be "light" or "dark".`);
 		if (names.has(theme.name)) throw new Error(`Duplicate theme name: ${theme.name}.`);
 		names.add(theme.name);
-		if (options.applyClass === true) assertClassToken(`theme-${theme.name}`, `Theme name cannot be used as a default theme class: ${theme.name}.`);
+		if (typeof options.shouldApplyClass !== "function") getThemeClass(theme, options.shouldApplyClass);
+		if (theme.tokens) {
+			if (!options.tokenSchema) throw new Error(`Theme "${theme.name}" defines tokens but no tokenSchema is configured.`);
+			for (const tokenKey of Object.keys(theme.tokens)) if (!Object.hasOwn(options.tokenSchema, tokenKey)) throw new Error(`Theme "${theme.name}" defines token "${tokenKey}" which is not present in tokenSchema.`);
+		}
 	}
 	if (!names.has(options.defaultTheme)) throw new Error(`Default theme is not configured: ${options.defaultTheme}.`);
 	if (!names.has(options.systemTheme.light)) throw new Error(`System light theme is not configured: ${options.systemTheme.light}.`);
 	if (!names.has(options.systemTheme.dark)) throw new Error(`System dark theme is not configured: ${options.systemTheme.dark}.`);
 };
 /**
-* Manages theme preference, DOM application, system preference changes, and change notifications.
+* Validates runtime token overrides against the configured token schema.
 *
-* The constructor validates configured theme names, default and system mappings, and default class tokens.
-* Theme application throws `Error` when a requested theme is missing or a class resolver returns an invalid class token.
+* @internal
 */
-var Theme = class {
+const assertRuntimeTokens = (tokens, tokenSchema) => {
+	if (tokens === void 0 || tokens === null) return;
+	if (typeof tokens !== "object" || Array.isArray(tokens)) throw new Error("Runtime tokens must be an object.");
+	if (tokenSchema === void 0) throw new Error("Runtime tokens provided but no tokenSchema is configured.");
+	for (const tokenKey of Object.keys(tokens)) if (!Object.hasOwn(tokenSchema, tokenKey)) throw new Error(`Runtime token override "${tokenKey}" is not present in tokenSchema.`);
+};
+//#endregion
+//#region src/theme.ts
+var ThemeImpl = class {
 	#options;
 	#activeName;
+	#activeTokens = {};
 	#listeners = /* @__PURE__ */ new Set();
-	#mediaQueryList = null;
+	#systemListenerCleanup = null;
+	#storageListenerCleanup = null;
+	#isInitialized = false;
+	#resolvedClasses = null;
+	#getResolvedClasses() {
+		if (this.#resolvedClasses === null) {
+			this.#resolvedClasses = /* @__PURE__ */ new Map();
+			for (const t of this.#options.themes) this.#resolvedClasses.set(t.name, getThemeClass(t, this.#options.shouldApplyClass));
+		}
+		return this.#resolvedClasses;
+	}
 	#handleSystemChange = (event) => {
-		if (this.getStored() !== null) return;
+		if (readStorage(this.#options.storageKey, this.#options.themes) !== null) return;
 		const name = event.matches ? this.#options.systemTheme.dark : this.#options.systemTheme.light;
-		this.#activate(name, "system", { shouldStore: false });
+		if (this.#activeName !== name) this.#activate(name, {
+			source: "system",
+			shouldStore: false
+		});
+	};
+	#handleStorageChange = (event) => {
+		if (event.key !== this.#options.storageKey) return;
+		if (event.newValue === null) {
+			const systemTheme = this.getSystem().name;
+			this.#activate(systemTheme, {
+				source: "clearPreference",
+				shouldStore: false
+			});
+		} else if (this.#options.themes.some((t) => t.name === event.newValue) && this.#activeName !== event.newValue) this.#activate(event.newValue, {
+			source: "set",
+			shouldStore: false
+		});
 	};
-	/** Creates a theme manager with default light/dark themes unless overridden. */
 	constructor(options = {}) {
 		this.#options = {
-			...defaultOptions,
+			...DEFAULT_OPTIONS,
 			...options,
 			systemTheme: {
-				...defaultOptions.systemTheme,
+				...DEFAULT_OPTIONS.systemTheme,
 				...options.systemTheme
 			}
 		};
 		assertThemeConfig(this.#options);
 		this.#activeName = this.#options.defaultTheme;
 	}
-	/** Registers system preference handling, applies the initial theme, emits an `init` change, and returns this instance. */
-	init() {
-		this.#registerSystemListener();
-		this.#activate(this.getStored() ?? this.getSystem().name, "init", { shouldStore: false });
+	init(tokens) {
+		if (this.#isInitialized) return this;
+		this.#systemListenerCleanup = registerSystemListener(this.#handleSystemChange);
+		this.#storageListenerCleanup = registerStorageListener(this.#handleStorageChange);
+		this.#activate(readStorage(this.#options.storageKey, this.#options.themes) ?? this.getSystem().name, {
+			source: "init",
+			shouldStore: false,
+			tokens
+		});
+		this.#isInitialized = true;
 		return this;
 	}
-	/** Returns the currently active theme definition. */
 	get() {
-		return this.#getTheme(this.#activeName) ?? this.#getTheme(this.#options.defaultTheme);
+		const baseTheme = this.#getTheme(this.#activeName);
+		const computedTokens = readComputedTokens({
+			theme: baseTheme,
+			options: this.#options,
+			activeTokens: this.#activeTokens
+		});
+		return {
+			...baseTheme,
+			tokens: {
+				...computedTokens,
+				...baseTheme.tokens,
+				...this.#activeTokens
+			}
+		};
 	}
-	/** Applies a configured theme by name, stores it when possible, emits a `set` change, and throws `Error` for unknown names. */
-	set(name) {
-		return this.#activate(name, "set", { shouldStore: true });
+	set(name, tokens) {
+		return this.#activate(name, {
+			source: "set",
+			shouldStore: true,
+			tokens
+		});
 	}
-	/** Toggles between the configured system light and dark themes, stores the preference when possible, and emits a `toggle` change. */
-	toggle() {
-		const nextName = this.get().name === this.#options.systemTheme.dark ? this.#options.systemTheme.light : this.#options.systemTheme.dark;
-		return this.#activate(nextName, "toggle", { shouldStore: true });
+	toggle(tokens) {
+		const nextName = this.#getTheme(this.#activeName).colorScheme === "dark" ? this.#options.systemTheme.light : this.#options.systemTheme.dark;
+		return this.#activate(nextName, {
+			source: "toggle",
+			shouldStore: true,
+			tokens
+		});
 	}
-	/** Removes the stored preference when possible, applies the current system theme, and emits a `clearPreference` change. */
 	clearPreference() {
-		this.#removeStored();
-		return this.#activate(this.getSystem().name, "clearPreference", { shouldStore: false });
+		removeStorage(this.#options.storageKey);
+		return this.#activate(this.getSystem().name, {
+			source: "clearPreference",
+			shouldStore: false
+		});
 	}
-	/** Returns the stored configured theme name, or `null` during SSR, storage failures, or invalid stored preferences. */
 	getStored() {
-		if (!isBrowser()) return null;
-		try {
-			const storedName = window.localStorage.getItem(this.#options.storageKey);
-			return storedName !== null && this.#getTheme(storedName) !== null ? storedName : null;
-		} catch {
-			return null;
-		}
+		return readStorage(this.#options.storageKey, this.#options.themes);
 	}
-	/** Returns the configured theme for the current OS color-scheme preference, or the default theme without browser support. */
 	getSystem() {
-		if (!isBrowser() || typeof window.matchMedia !== "function") return this.#getTheme(this.#options.defaultTheme);
-		const name = window.matchMedia(PREFERS_DARK_QUERY).matches ? this.#options.systemTheme.dark : this.#options.systemTheme.light;
-		return this.#getTheme(name);
+		return readSystemTheme({
+			defaultTheme: this.#options.defaultTheme,
+			systemTheme: this.#options.systemTheme,
+			themes: this.#options.themes
+		});
 	}
-	/** Registers a listener for in-process theme changes and returns an unsubscribe function. */
 	subscribe(listener) {
 		this.#listeners.add(listener);
 		return () => {
 			this.#listeners.delete(listener);
 		};
 	}
-	/** Removes the system preference listener and clears in-process subscribers. */
 	destroy() {
-		if (this.#mediaQueryList !== null) {
-			this.#mediaQueryList.removeEventListener("change", this.#handleSystemChange);
-			this.#mediaQueryList = null;
+		if (this.#systemListenerCleanup) {
+			this.#systemListenerCleanup();
+			this.#systemListenerCleanup = null;
+		}
+		if (this.#storageListenerCleanup) {
+			this.#storageListenerCleanup();
+			this.#storageListenerCleanup = null;
 		}
 		this.#listeners.clear();
+		this.#activeTokens = {};
+		this.#activeName = this.#options.defaultTheme;
+		this.#resolvedClasses = null;
+		this.#isInitialized = false;
 	}
-	#activate(name, source, options) {
+	#activate(name, options) {
+		assertRuntimeTokens(options.tokens, this.#options.tokenSchema);
 		const theme = this.#getTheme(name);
 		this.#activeName = theme.name;
-		if (options.shouldStore) this.#store(theme.name);
-		this.#apply(theme);
-		this.#emit({
-			name: theme.name,
+		if (options.tokens !== void 0) this.#activeTokens = options.tokens;
+		if (options.shouldStore) writeStorage(this.#options.storageKey, theme.name);
+		const resolved = this.#getResolvedClasses();
+		applyTheme({
 			theme,
-			source
+			options: this.#options,
+			activeTokens: this.#activeTokens,
+			resolvedClasses: Array.from(resolved.values()).filter((c) => c !== null),
+			nextClass: resolved.get(theme.name) ?? null
 		});
-		return theme;
-	}
-	#apply(theme) {
-		if (!isBrowser()) return;
-		const root = document.documentElement;
-		const nextClass = getThemeClass(theme, this.#options.applyClass);
-		const configuredClasses = this.#options.themes.map((configuredTheme) => getThemeClass(configuredTheme, this.#options.applyClass)).filter((configuredClass) => configuredClass !== null);
-		root.setAttribute(this.#options.attribute, theme.name);
-		root.style.colorScheme = theme.colorScheme;
-		for (const configuredClass of configuredClasses) root.classList.remove(configuredClass);
-		if (nextClass !== null) root.classList.add(nextClass);
-		if (this.#options.tailwindcss) root.classList.toggle(DARK_CLASS, theme.colorScheme === "dark");
+		const activeTheme = this.get();
+		this.#emit({
+			name: activeTheme.name,
+			theme: activeTheme,
+			source: options.source
+		});
+		return activeTheme;
 	}
 	#emit(detail) {
-		for (const listener of this.#listeners) listener(detail);
-		if (!isBrowser()) return;
-		window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { detail }));
+		for (const listener of this.#listeners) try {
+			listener(detail);
+		} catch (error) {
+			console.error("Error in theme change listener:", error);
+		}
+		emitThemeEvent(detail);
 	}
 	#getTheme(name) {
 		const theme = this.#options.themes.find((candidate) => candidate.name === name);
 		if (theme === void 0) throw new Error(`Theme is not configured: ${name}.`);
 		return theme;
 	}
-	#registerSystemListener() {
-		if (!isBrowser() || typeof window.matchMedia !== "function" || this.#mediaQueryList !== null) return;
-		this.#mediaQueryList = window.matchMedia(PREFERS_DARK_QUERY);
-		this.#mediaQueryList.addEventListener("change", this.#handleSystemChange);
-	}
-	#store(name) {
-		if (!isBrowser()) return;
-		try {
-			window.localStorage.setItem(this.#options.storageKey, name);
-		} catch {
-			return;
-		}
-	}
-	#removeStored() {
-		if (!isBrowser()) return;
-		try {
-			window.localStorage.removeItem(this.#options.storageKey);
-		} catch {
-			return;
-		}
-	}
 };
+/**
+* Factory function that creates and returns a `Theme` instance.
+*
+* @param options - Configuration options for theme definitions, persistence keys, DOM attributes, custom class resolvers, and dynamic token schemas.
+* @returns A `Theme` instance.
+* @throws {Error} If configured theme names are empty, duplicated, invalid for CSS class application, or if the default/system themes are not present in the configured list.
+*/
+function createTheme(options = {}) {
+	return new ThemeImpl(options);
+}
 //#endregion
-export { THEME_CHANGE_EVENT, Theme, darkTheme, lightTheme };
+export { DARK_THEME, LIGHT_THEME, THEME_CHANGE_EVENT, createTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenhub/theme",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
   "description": "Zero-dependency browser theme preference helper for TypeScript apps.",
   "homepage": "https://github.com/codenhub/codenhub/tree/main/packages/theme",
@@ -27,17 +27,24 @@
     "access": "public"
   },
   "devDependencies": {
+    "@playwright/test": "^1.57.0",
     "jsdom": "^29.1.1",
+    "tsdown": "^0.22.2",
     "typescript": "^6.0.3",
-    "vitest": "^4.0.17"
+    "vitest": "^4.0.17",
+    "@codenhub/styles": "0.0.3"
   },
   "scripts": {
+    "dev": "pnpm --filter=@codenhub/theme-dev dev",
+    "debug": "pnpm build && pnpm --filter=@codenhub/theme-debug dev",
     "build": "tsdown src/index.ts --format esm --dts --clean --no-fixed-extension",
     "status:npm": "npm view @codenhub/theme version dist-tags time --json && npm dist-tag ls @codenhub/theme && npm access get status @codenhub/theme",
     "status:pack": "npm pack --dry-run",
-    "test": "vitest run",
+    "test": "vitest run && pnpm build && pnpm test:visual",
     "test:coverage": "vitest run --coverage",
+    "test:visual": "playwright test",
     "test:watch": "vitest",
+    "test:visual:watch": "playwright test --ui",
     "typecheck": "tsc --noEmit"
   }
 }