@codenhub/theme 0.0.3 → 0.1.0

package/README.md

@@ -2,13 +2,6 @@
 
 Small zero-dependency theme preference helper for browser apps. It applies a theme name to the document, updates `document.documentElement.style.colorScheme`, and supports managing dynamic CSS tokens.
 
-## Features
-
-- **Factory API**: Instantiate with `createTheme()`.
-- **Dynamic CSS Tokens**: Define a `tokenSchema` at initialization for type-safe, dynamic inline CSS custom property styling.
-- **Zero Dependencies**: Tiny footprint and pure TypeScript.
-- **Flexible Styling**: Works with standard CSS variables, class toggles, or Tailwind CSS.
-
 ## Installation
 
 ```sh

package/dist/index.js

@@ -1,483 +1 @@
-//#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 LIGHT_THEME = Object.freeze({
-	name: "light",
-	colorScheme: "light"
-});
-/** Built-in dark theme used by default and available for custom theme lists. */
-const DARK_THEME = Object.freeze({
-	name: "dark",
-	colorScheme: "dark"
-});
-/**
-* 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,
-	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;
-	}
-	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 (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 (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 (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}.`);
-};
-/**
-* Validates runtime token overrides against the configured token schema.
-*
-* @internal
-*/
-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();
-	#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 (readStorage(this.#options.storageKey, this.#options.themes) !== null) return;
-		const name = event.matches ? this.#options.systemTheme.dark : this.#options.systemTheme.light;
-		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
-		});
-	};
-	constructor(options = {}) {
-		this.#options = {
-			...DEFAULT_OPTIONS,
-			...options,
-			systemTheme: {
-				...DEFAULT_OPTIONS.systemTheme,
-				...options.systemTheme
-			}
-		};
-		assertThemeConfig(this.#options);
-		this.#activeName = this.#options.defaultTheme;
-	}
-	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;
-	}
-	get() {
-		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
-			}
-		};
-	}
-	set(name, tokens) {
-		return this.#activate(name, {
-			source: "set",
-			shouldStore: true,
-			tokens
-		});
-	}
-	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
-		});
-	}
-	clearPreference() {
-		removeStorage(this.#options.storageKey);
-		return this.#activate(this.getSystem().name, {
-			source: "clearPreference",
-			shouldStore: false
-		});
-	}
-	getStored() {
-		return readStorage(this.#options.storageKey, this.#options.themes);
-	}
-	getSystem() {
-		return readSystemTheme({
-			defaultTheme: this.#options.defaultTheme,
-			systemTheme: this.#options.systemTheme,
-			themes: this.#options.themes
-		});
-	}
-	subscribe(listener) {
-		this.#listeners.add(listener);
-		return () => {
-			this.#listeners.delete(listener);
-		};
-	}
-	destroy() {
-		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, options) {
-		assertRuntimeTokens(options.tokens, this.#options.tokenSchema);
-		const theme = this.#getTheme(name);
-		this.#activeName = 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,
-			options: this.#options,
-			activeTokens: this.#activeTokens,
-			resolvedClasses: Array.from(resolved.values()).filter((c) => c !== null),
-			nextClass: resolved.get(theme.name) ?? null
-		});
-		const activeTheme = this.get();
-		this.#emit({
-			name: activeTheme.name,
-			theme: activeTheme,
-			source: options.source
-		});
-		return activeTheme;
-	}
-	#emit(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;
-	}
-};
-/**
-* 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 { DARK_THEME, LIGHT_THEME, THEME_CHANGE_EVENT, createTheme };
+const e=`themechange`,t=/\s/,n=Object.freeze({name:`light`,colorScheme:`light`}),r=Object.freeze({name:`dark`,colorScheme:`dark`}),i=Object.freeze({themes:Object.freeze([n,r]),defaultTheme:n.name,systemTheme:Object.freeze({light:n.name,dark:r.name}),storageKey:`app-theme-preference`,attribute:`data-theme`,isTailwindCss:!1,shouldApplyClass:!0}),a=(e,t)=>{if(t===!1)return null;if(typeof t==`function`){let n=t(e);return o(n,`Theme class resolver returned an invalid class for theme: ${e.name}.`),n}let n=`theme-${e.name}`;return o(n,`Theme name cannot be used as a default theme class: ${e.name}.`),n},o=(e,n)=>{if(typeof e!=`string`||e.length===0||t.test(e))throw Error(n)},s=e=>{let{theme:t,options:n,activeTokens:r,resolvedClasses:i,nextClass:a}=e;if(typeof document>`u`)return;let o=document.documentElement;o.setAttribute(n.attribute,t.name),o.style.colorScheme=t.colorScheme;for(let e of i)e!==a&&o.classList.remove(e);if(a!==null&&o.classList.add(a),n.isTailwindCss&&o.classList.toggle(`dark`,t.colorScheme===`dark`),n.tokenSchema){let e=n.tokenSchema,i={...t.tokens,...r};for(let t of Object.keys(e)){let n=e[t],r=i[t];r==null?o.style.removeProperty(n):o.style.setProperty(n,r)}}},c=e=>{let{theme:t,options:n,activeTokens:r}=e,i={};if(typeof window>`u`||typeof window.getComputedStyle!=`function`||typeof document>`u`||!n.tokenSchema)return i;let a=document.documentElement;try{let e=n.tokenSchema,o={...t.tokens,...r};if(!Object.keys(e).some(e=>o[e]===void 0))return i;let s=window.getComputedStyle(a);if(!s)return i;for(let t of Object.keys(e))if(o[t]===void 0){let n=s.getPropertyValue(e[t]).trim();n&&(i[t]=n)}}catch(e){console.error(`[theme] Failed to read computed token styles:`,e)}return i},l=t=>{typeof window>`u`||typeof window.dispatchEvent!=`function`||typeof window.CustomEvent!=`function`||window.dispatchEvent(new CustomEvent(e,{detail:t}))},u=(e,t)=>{if(typeof window>`u`)return null;try{let n=window.localStorage.getItem(e);return n===null?null:t.some(e=>e.name===n)?n:null}catch(e){return console.error(`[theme] Failed to read from localStorage:`,e),null}},d=(e,t)=>{if(!(typeof window>`u`))try{window.localStorage.setItem(e,t)}catch(e){console.error(`[theme] Failed to write to localStorage:`,e)}},f=e=>{if(!(typeof window>`u`))try{window.localStorage.removeItem(e)}catch(e){console.error(`[theme] Failed to remove from localStorage:`,e)}},p=e=>{let{defaultTheme:t,systemTheme:n,themes:r}=e,i=e=>{let t=r.find(t=>t.name===e);if(t===void 0)throw Error(`Theme is not configured: ${e}.`);return t};if(typeof window>`u`||typeof window.matchMedia!=`function`)return i(t);try{return i(window.matchMedia(`(prefers-color-scheme: dark)`).matches?n.dark:n.light)}catch{return i(t)}},m=e=>{if(typeof window>`u`||typeof window.matchMedia!=`function`)return()=>{};let t=(()=>{try{return window.matchMedia(`(prefers-color-scheme: dark)`)}catch{return null}})(),n=!1;if(t)try{typeof t.addEventListener==`function`?t.addEventListener(`change`,e):typeof t.addListener==`function`&&(n=!0,t.addListener(e))}catch{}return()=>{if(t!==null)try{n&&typeof t.removeListener==`function`?t.removeListener(e):typeof t.removeEventListener==`function`&&t.removeEventListener(`change`,e)}catch{}}},h=e=>typeof window>`u`||typeof window.addEventListener!=`function`?()=>{}:(window.addEventListener(`storage`,e),()=>{window.removeEventListener(`storage`,e)}),g=e=>{if(typeof e.attribute!=`string`||e.attribute.trim().length===0)throw Error(`Theme attribute option must be a non-empty string.`);if(/[\s"'/>=]/.test(e.attribute))throw Error(`Theme attribute option must be a valid HTML attribute name.`);if(typeof e.storageKey!=`string`||e.storageKey.trim().length===0)throw Error(`Theme storageKey option must be a non-empty string.`);if(!Array.isArray(e.themes))throw Error(`Theme options.themes must be an array.`);let t=new Set;if(e.tokenSchema){for(let[t,n]of Object.entries(e.tokenSchema))if(typeof n!=`string`||!n.startsWith(`--`))throw Error(`Token schema key "${t}" must map to a CSS custom property starting with "--". Received: "${n}".`)}for(let n of e.themes){if(typeof n!=`object`||!n)throw Error(`Theme definitions must be objects.`);if(typeof n.name!=`string`||n.name.trim().length===0)throw Error(`Theme names must be non-empty strings.`);if(n.colorScheme!==`light`&&n.colorScheme!==`dark`)throw Error(`Theme "${n.name}" has an invalid colorScheme: ${n.colorScheme}. Must be "light" or "dark".`);if(t.has(n.name))throw Error(`Duplicate theme name: ${n.name}.`);if(t.add(n.name),typeof e.shouldApplyClass!=`function`&&a(n,e.shouldApplyClass),n.tokens){if(!e.tokenSchema)throw Error(`Theme "${n.name}" defines tokens but no tokenSchema is configured.`);for(let t of Object.keys(n.tokens))if(!Object.hasOwn(e.tokenSchema,t))throw Error(`Theme "${n.name}" defines token "${t}" which is not present in tokenSchema.`)}}if(!t.has(e.defaultTheme))throw Error(`Default theme is not configured: ${e.defaultTheme}.`);if(!t.has(e.systemTheme.light))throw Error(`System light theme is not configured: ${e.systemTheme.light}.`);if(!t.has(e.systemTheme.dark))throw Error(`System dark theme is not configured: ${e.systemTheme.dark}.`)},_=(e,t)=>{if(e!=null){if(typeof e!=`object`||Array.isArray(e))throw Error(`Runtime tokens must be an object.`);if(t===void 0)throw Error(`Runtime tokens provided but no tokenSchema is configured.`);for(let n of Object.keys(e))if(!Object.hasOwn(t,n))throw Error(`Runtime token override "${n}" is not present in tokenSchema.`)}};var v=class{#e;#t;#n={};#r=new Set;#i=null;#a=null;#o=!1;#s=null;#c=null;#l(){if(this.#s===null){this.#s=new Map;for(let e of this.#e.themes)this.#s.set(e.name,a(e,this.#e.shouldApplyClass))}return this.#s}#u(){if(this.#c===null){let e=this.#l();this.#c=Array.from(e.values()).filter(e=>e!==null)}return this.#c}#d=e=>{if(u(this.#e.storageKey,this.#e.themes)!==null)return;let t=e.matches?this.#e.systemTheme.dark:this.#e.systemTheme.light;this.#t!==t&&this.#p(t,{source:`system`,shouldStore:!1})};#f=e=>{if(e.key===this.#e.storageKey)if(e.newValue===null){let e=this.getSystem().name;this.#p(e,{source:`clearPreference`,shouldStore:!1})}else this.#e.themes.some(t=>t.name===e.newValue)&&this.#t!==e.newValue&&this.#p(e.newValue,{source:`set`,shouldStore:!1})};constructor(e={}){this.#e={...i,...e,systemTheme:{...i.systemTheme,...e.systemTheme}},g(this.#e),this.#t=this.#e.defaultTheme}init(e){return this.#o?this:(this.#i=m(this.#d),this.#a=h(this.#f),this.#p(u(this.#e.storageKey,this.#e.themes)??this.getSystem().name,{source:`init`,shouldStore:!1,tokens:e}),this.#o=!0,this)}get(){let e=this.#h(this.#t),t=this.#e,n=this.#n,r=null;return{...e,get tokens(){return r===null&&(r={...c({theme:e,options:t,activeTokens:n}),...e.tokens,...n}),r}}}set(e,t){return this.#p(e,{source:`set`,shouldStore:!0,tokens:t})}toggle(e){let t=this.#h(this.#t).colorScheme===`dark`?this.#e.systemTheme.light:this.#e.systemTheme.dark;return this.#p(t,{source:`toggle`,shouldStore:!0,tokens:e})}clearPreference(){return f(this.#e.storageKey),this.#p(this.getSystem().name,{source:`clearPreference`,shouldStore:!1})}getStored(){return u(this.#e.storageKey,this.#e.themes)}getSystem(){return p({defaultTheme:this.#e.defaultTheme,systemTheme:this.#e.systemTheme,themes:this.#e.themes})}subscribe(e){return this.#r.add(e),()=>{this.#r.delete(e)}}destroy(){this.#i&&=(this.#i(),null),this.#a&&=(this.#a(),null),this.#r.clear(),this.#n={},this.#t=this.#e.defaultTheme,this.#s=null,this.#c=null,this.#o=!1}#p(e,t){_(t.tokens,this.#e.tokenSchema);let n=this.#h(e);this.#t=n.name,t.tokens!==void 0&&(this.#n=t.tokens),t.shouldStore&&d(this.#e.storageKey,n.name);let r=this.#l();s({theme:n,options:this.#e,activeTokens:this.#n,resolvedClasses:this.#u(),nextClass:r.get(n.name)??null});let i=this.get();return this.#m({name:i.name,theme:i,source:t.source}),i}#m(e){for(let t of this.#r)try{t(e)}catch(e){console.error(`Error in theme change listener:`,e)}l(e)}#h(e){let t=this.#e.themes.find(t=>t.name===e);if(t===void 0)throw Error(`Theme is not configured: ${e}.`);return t}};function y(e={}){return new v(e)}export{r as DARK_THEME,n as LIGHT_THEME,e as THEME_CHANGE_EVENT,y as createTheme};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenhub/theme",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "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,18 @@
     "access": "public"
   },
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
+    "@playwright/test": "^1.61.1",
     "jsdom": "^29.1.1",
-    "tsdown": "^0.22.2",
+    "tsdown": "^0.22.3",
     "typescript": "^6.0.3",
-    "vitest": "^4.0.17",
-    "@codenhub/styles": "0.0.3"
+    "vitest": "^4.1.10",
+    "@codenhub/styles": "0.0.4",
+    "@codenhub/vite-plugin-icons": "0.0.1"
   },
   "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",
+    "build": "tsdown src/index.ts --format esm --dts --clean --no-fixed-extension --minify",
     "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 && pnpm build && pnpm test:visual",