@shadow-js/ui 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.0.3
+
+### Fixed
+
+- `shadow-ui init` checks every path (`components.json`, the theme file, the stylesheet, `lib/utils`) before it writes the first file, so a refused `--css ../outside.css` leaves the project untouched and a later `init` works.
+- Alias mapping uses the most specific `paths` pattern (the longest prefix, as TypeScript does), so `@/components/*` wins over `@/*`.
+- `paths` and `baseUrl` are read through `extends` (relative files, packages in `node_modules`, arrays), resolved from the config that declares them, with a bounded and cycle-safe chain.
+- The package manager is found in parent folders too (`packageManager` field and lockfiles, nearest folder wins), so a package in a workspace no longer gets npm.
+- `shadow-ui remove` keeps a file that differs from the registry (exit 1, named in the output and in `--json` as `kept`) unless `--force` is given.
+- `ThemeProvider` treats a `storage` event with a null key (`localStorage.clear()` in another tab) as the theme being removed and goes back to the default theme.
+
 ## 1.0.2
 
 ### Fixed

package/README.md

@@ -123,7 +123,7 @@ primitive) without a version.
 | `--skip-install` | print the install command instead of running it |
 | `--path <dir>` | `add`: write `ui` components to `<dir>` instead of the configured alias |
 | `--all` / `-a` | `add`: every component |
-| `--force` | `remove`: even when another component in your project imports it |
+| `--force` | `remove`: even when another component in your project imports it, or a file differs from the registry (you edited it) |
 | `--cwd <dir>` | run in another directory |
 | `--json` | every command: print one JSON document on stdout instead of words, and ask nothing (see "Output for scripts") |
 | `--base-color <color>` | `init`: `neutral` (default), `zinc`, `slate`, `stone` or `gray` |
@@ -175,7 +175,7 @@ command: `ls` is `shadow-ui list`, `rm` is `shadow-ui remove`.
 | `add` | `dryRun`, `requested`, `dependencies` (what came with them), `files` (`path`, `action`: `create`, `unchanged`, `overwrite`, `kept` or `differs` for a dry run, plus the `diff` of a file that differs), `installs` |
 | `list` | `initialized` (is there a `components.json`), `items` (`name`, `type`, `description`, `installed`) |
 | `diff` | `components` (`name`, `path`, `status`: `up-to-date`, `differs` with its `diff`, or `missing`), `checked`, `differing` |
-| `remove` | `dryRun`, `removed` (`name`, `path`), `blocked` (`name`, `usedBy`) |
+| `remove` | `dryRun`, `removed` (`name`, `path`), `kept` (`name`, `path`: edited files), `blocked` (`name`, `usedBy`) |
 | `completion` | `shell`, `script` |
 | `--help`, `--version` | `usage`, `version` |
 
@@ -184,7 +184,7 @@ command: `ls` is `shadow-ui list`, `rm` is `shadow-ui remove`.
 `SHADOW_UI_MISSING_COMMAND`, `SHADOW_UI_INVALID_SHELL`, `SHADOW_UI_INVALID_BASE_COLOR`, `SHADOW_UI_NO_PROJECT` (no
 `package.json`), `SHADOW_UI_NO_CONFIG` (run `init` first), `SHADOW_UI_NO_COMPONENTS`, `SHADOW_UI_UNKNOWN_COMPONENT`,
 `SHADOW_UI_INVALID_NAME`, `SHADOW_UI_REGISTRY_CONFLICT`, `SHADOW_UI_INVALID_FILE`, `SHADOW_UI_UNSAFE_PATH`,
-`SHADOW_UI_FILES_DIFFER` (`add` kept a file), `SHADOW_UI_DIFFERS` (`diff` found a difference), `SHADOW_UI_IN_USE`
+`SHADOW_UI_FILES_DIFFER` (`add` or `remove` kept a file), `SHADOW_UI_DIFFERS` (`diff` found a difference), `SHADOW_UI_IN_USE`
 (`remove` refused), `SHADOW_UI_INSTALL_FAILED`, `SHADOW_UI_FAILED` and `SHADOW_UI_UNEXPECTED`.
 
 ```bash

package/dist/cli.mjs

@@ -13,6 +13,27 @@ import { fileURLToPath } from "node:url";
 */
 /** Symbolic links followed while resolving one path; the same bound the operating system uses. */
 const MAX_LINK_HOPS = 40;
+/** Folders `ancestors` climbs at most: far beyond any real project, so a path loop cannot spin. */
+const MAX_LEVELS = 64;
+/**
+* `start` and its parent folders up to the filesystem root, nearest first (at most 64).
+*
+* @param start An absolute folder.
+* @returns The folders, `start` first.
+* @example
+* ancestors("/a/b"); // ["/a/b", "/a", "/"]
+* @since 1.0.0
+*
+* @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
+*/
+function ancestors(start) {
+	const folders = [start];
+	for (let folder = dirname(start); folders.length < MAX_LEVELS; folder = dirname(folder)) {
+		if (folder === folders[folders.length - 1]) break;
+		folders.push(folder);
+	}
+	return folders;
+}
 /** Whether a failed file call means "nothing is there" (or a file stands where a directory should). */
 function isMissing(error) {
 	const code = error.code;
@@ -675,9 +696,59 @@ function parseJsonc(text) {
 function asRecord(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value) ? value : void 0;
 }
+/** The `extends` links followed from one tsconfig: far beyond any real chain. */
+const MAX_EXTENDS = 16;
+/** The file an `extends` entry names, or `undefined`: a path, or a package looked up in `node_modules`. */
+function extendsFile(fs, folder, entry) {
+	const candidates = (base) => base.endsWith(".json") ? [base] : [`${base}.json`, join(base, "tsconfig.json")];
+	if (entry.startsWith(".") || isAbsolute(entry)) return candidates(resolve(folder, entry)).find((file) => fs.exists(file));
+	for (const parent of ancestors(folder)) {
+		const found = candidates(join(parent, "node_modules", entry)).find((file) => fs.exists(file));
+		if (found !== void 0) return found;
+	}
+}
+/**
+* The `paths` and `baseUrl` of one tsconfig with its `extends` merged in, as TypeScript does: later
+* bases override earlier ones, the config itself overrides its bases, and `paths` is replaced as a
+* whole. `seen` holds the chain so far, so a cycle or a very long chain ends.
+*/
+function readOptions(fs, file, label, seen) {
+	const text = fs.read(file);
+	if (text === void 0) return void 0;
+	let parsed;
+	try {
+		parsed = parseJsonc(text);
+	} catch (error) {
+		if (error instanceof SyntaxError) throw new SchemaError(`${label} is not valid JSON: ${error.message}`);
+		throw error;
+	}
+	const config = asRecord(parsed);
+	const options = asRecord(config?.["compilerOptions"]);
+	const folder = dirname(file);
+	let merged = {};
+	const bases = [config?.["extends"]].flat();
+	for (const entry of seen.length < MAX_EXTENDS ? bases : []) {
+		const base = typeof entry === "string" ? extendsFile(fs, folder, entry) : void 0;
+		if (base !== void 0 && !seen.includes(base)) merged = {
+			...merged,
+			...readOptions(fs, base, base, [...seen, base])
+		};
+	}
+	const paths = asRecord(options?.["paths"]);
+	const baseUrl = options?.["baseUrl"];
+	return {
+		...merged,
+		...paths !== void 0 && {
+			paths,
+			pathsDir: folder
+		},
+		...typeof baseUrl === "string" && { baseUrl: resolve(folder, baseUrl) }
+	};
+}
 /**
 * Reads the `compilerOptions.paths` of the project's tsconfig files (`tsconfig.json`,
-* `tsconfig.app.json`). Targets are resolved against `baseUrl` or the config's directory.
+* `tsconfig.app.json`), following their `extends` (relative files and packages in `node_modules`).
+* Targets are resolved against `baseUrl` or the directory of the config that declares `paths`.
 *
 * @param fs The project filesystem.
 * @param root The project root.
@@ -691,19 +762,10 @@ function asRecord(value) {
 function readPathMappings(fs, root) {
 	const mappings = [];
 	for (const name of ["tsconfig.json", "tsconfig.app.json"]) {
-		const text = fs.read(join(root, name));
-		if (text === void 0) continue;
-		let parsed;
-		try {
-			parsed = parseJsonc(text);
-		} catch (error) {
-			if (error instanceof SyntaxError) throw new SchemaError(`${name} is not valid JSON: ${error.message}`);
-			throw error;
-		}
-		const options = asRecord(asRecord(parsed)?.["compilerOptions"]);
-		const paths = asRecord(options?.["paths"]);
+		const file = join(root, name);
+		const { paths, pathsDir, baseUrl } = readOptions(fs, file, name, [file]) ?? {};
 		if (paths === void 0) continue;
-		const base = typeof options?.["baseUrl"] === "string" ? resolve(root, options["baseUrl"]) : root;
+		const base = baseUrl ?? pathsDir ?? root;
 		for (const [pattern, targets] of Object.entries(paths)) {
 			if (!Array.isArray(targets)) continue;
 			mappings.push({
@@ -730,19 +792,26 @@ function readPathMappings(fs, root) {
 * @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
 */
 function aliasToDirectory(alias, mappings) {
+	let best;
 	for (const { pattern, targets } of mappings) {
+		const target = targets[0];
+		if (target === void 0) continue;
 		const star = pattern.indexOf("*");
 		if (star === -1) {
-			if (pattern === alias && targets[0] !== void 0) return targets[0];
+			if (pattern === alias) return target;
 			continue;
 		}
 		const prefix = pattern.slice(0, star);
 		const suffix = pattern.slice(star + 1);
-		if (!alias.startsWith(prefix) || !alias.endsWith(suffix) || alias.length < prefix.length + suffix.length) continue;
-		const rest = alias.slice(prefix.length, alias.length - suffix.length);
-		const target = targets[0];
-		if (target !== void 0) return target.replace("*", rest);
+		if (alias.startsWith(prefix) && alias.endsWith(suffix) && alias.length >= prefix.length + suffix.length && (best === void 0 || prefix.length > best.length)) {
+			const rest = alias.slice(prefix.length, alias.length - suffix.length);
+			best = {
+				length: prefix.length,
+				directory: target.replace("*", rest)
+			};
+		}
 	}
+	if (best !== void 0) return best.directory;
 	throw new PathError(`The alias "${alias}" is not covered by "paths" in tsconfig.json. Add, for example:\n  "compilerOptions": { "paths": { "@/*": ["./src/*"] } }`);
 }
 /**
@@ -792,12 +861,31 @@ function resolveInsideReal(fs, root, target) {
 // src/cli/pm.ts
 /**
 * Package manager detection and the install command line. npm is the default; pnpm, yarn and bun
-* are used when their lockfile (or the `packageManager` field) says so.
+* are used when their lockfile (or the `packageManager` field) says so, in the project or a parent folder.
 * @packageDocumentation
 */
+/** The package manager one folder says it uses (field first, then lockfiles), or `undefined`. */
+function managerOf(fs, folder) {
+	const manifest = fs.read(join(folder, "package.json"));
+	if (manifest !== void 0) try {
+		const field = JSON.parse(manifest).packageManager;
+		if (typeof field === "string") {
+			const name = field.split("@")[0];
+			if (name === "npm" || name === "pnpm" || name === "yarn" || name === "bun") return name;
+		}
+	} catch (error) {
+		if (!(error instanceof SyntaxError)) throw error;
+	}
+	if (fs.exists(join(folder, "pnpm-lock.yaml"))) return "pnpm";
+	if (fs.exists(join(folder, "yarn.lock"))) return "yarn";
+	if (fs.exists(join(folder, "bun.lock")) || fs.exists(join(folder, "bun.lockb"))) return "bun";
+	if (fs.exists(join(folder, "package-lock.json"))) return "npm";
+}
 /**
-* Detects the project's package manager: the `packageManager` field of `package.json` first, then
-* lockfiles, otherwise npm.
+* Detects the project's package manager. In the project folder and then each parent folder (a
+* package inside a workspace is managed from the workspace root) it reads the `packageManager`
+* field of `package.json`, then the lockfiles; the nearest folder that says anything wins, and npm
+* is the default.
 *
 * @param fs The project filesystem.
 * @param root The project root.
@@ -809,19 +897,10 @@ function resolveInsideReal(fs, root, target) {
 * @internal Not exported from `@shadow-js/ui`: part of the shadow-ui command, whose public surface is the CLI.
 */
 function detectPackageManager(fs, root) {
-	const manifest = fs.read(join(root, "package.json"));
-	if (manifest !== void 0) try {
-		const field = JSON.parse(manifest).packageManager;
-		if (typeof field === "string") {
-			const name = field.split("@")[0];
-			if (name === "npm" || name === "pnpm" || name === "yarn" || name === "bun") return name;
-		}
-	} catch (error) {
-		if (!(error instanceof SyntaxError)) throw error;
+	for (const folder of ancestors(root)) {
+		const manager = managerOf(fs, folder);
+		if (manager !== void 0) return manager;
 	}
-	if (fs.exists(join(root, "pnpm-lock.yaml"))) return "pnpm";
-	if (fs.exists(join(root, "yarn.lock"))) return "yarn";
-	if (fs.exists(join(root, "bun.lock")) || fs.exists(join(root, "bun.lockb"))) return "bun";
 	return "npm";
 }
 /**
@@ -1598,6 +1677,11 @@ async function runInit(ctx, flags) {
 			recordFile(ctx, label, current === void 0 ? "create" : "update");
 			return "created";
 		};
+		const configPath = resolveInsideReal(ctx.fs, ctx.cwd, "components.json");
+		const themeFile = themePathFor(config.tailwind.css);
+		resolveInsideReal(ctx.fs, ctx.cwd, themeFile);
+		const cssPath = resolveInsideReal(ctx.fs, ctx.cwd, config.tailwind.css);
+		const utils = planInitUtils(ctx, config);
 		ctx.report?.set("dryRun", flags.dryRun);
 		ctx.report?.set("config", {
 			baseColor,
@@ -1606,14 +1690,12 @@ async function runInit(ctx, flags) {
 		ctx.report?.set("files", []);
 		ctx.out("Setting up @shadow-js/ui");
 		const configText = serializeConfig(config);
-		const configPath = resolveInsideReal(ctx.fs, ctx.cwd, "components.json");
 		const configNow = ctx.fs.read(configPath);
 		if (existing !== void 0 && !flags.overwrite && configNow !== void 0 && (config.tailwind.baseColor !== existing.tailwind.baseColor || config.tailwind.css !== existing.tailwind.css) && !sameContent(configNow, configText)) {
 			ctx.out(`  ${flags.dryRun ? "would update" : "updated"}   components.json (base color ${config.tailwind.baseColor}, stylesheet ${config.tailwind.css})`);
 			if (!flags.dryRun) ctx.fs.write(configPath, configText);
 			recordFile(ctx, "components.json", "update");
 		} else write("components.json", configText, "components.json");
-		const themeFile = themePathFor(config.tailwind.css);
 		const themeLabel = themeFile.replaceAll("\\", "/");
 		const themeText = buildThemeCss(ctx.registry, config.tailwind.baseColor);
 		const themeCurrent = ctx.fs.read(resolveInsideReal(ctx.fs, ctx.cwd, themeFile));
@@ -1626,7 +1708,6 @@ async function runInit(ctx, flags) {
 			ctx.out(`  kept       ${themeLabel} (edited; pass --overwrite to regenerate it for ${config.tailwind.baseColor})`);
 			recordFile(ctx, themeLabel, "kept");
 		} else write(themeFile, themeText, themeLabel);
-		const cssPath = resolveInsideReal(ctx.fs, ctx.cwd, config.tailwind.css);
 		const css = ctx.fs.read(cssPath);
 		if (css === void 0) write(config.tailwind.css, `@import "tailwindcss";\n${THEME_IMPORT_LINE}\n`, config.tailwind.css);
 		else {
@@ -1646,7 +1727,7 @@ async function runInit(ctx, flags) {
 				recordFile(ctx, config.tailwind.css, "skipped");
 			}
 		}
-		const added = await runAddForInit(ctx, config, flags);
+		const added = await runAddForInit(ctx, utils, flags);
 		if (added !== OK) return added;
 		const tooling = [];
 		if (!info.hasTailwind) tooling.push("tailwindcss");
@@ -1658,14 +1739,21 @@ async function runInit(ctx, flags) {
 		return failed(ctx, error);
 	}
 }
-/** `init` copies `utils` through the same pipeline as `add`. */
-async function runAddForInit(ctx, config, flags) {
+/** Plans `utils` through the same pipeline as `add`. */
+function planInitUtils(ctx, config) {
 	const plan = resolveItems(ctx.registry.index, ["utils"]);
 	const mappings = [...readPathMappings(ctx.fs, ctx.cwd), {
 		pattern: "@/*",
 		targets: [join(ctx.cwd, "src", "*")]
 	}];
-	for (const entry of planFiles(ctx, config, plan.items, void 0, mappings)) {
+	return {
+		plan,
+		entries: planFiles(ctx, config, plan.items, void 0, mappings)
+	};
+}
+/** `init` copies `utils` through the same pipeline as `add`. */
+async function runAddForInit(ctx, { plan, entries }, flags) {
+	for (const entry of entries) {
 		const where = display(ctx.cwd, entry.target);
 		if (entry.status === "unchanged") {
 			ctx.out(`  unchanged  ${where}`);
@@ -1821,7 +1909,8 @@ function runDiff(ctx, names) {
 }
 /**
 * Deletes components' files from the project. Refuses when another component that is in the
-* project imports one of them (unless `force`), and never removes npm packages.
+* project imports one of them, and keeps (exit 1) a file that differs from the registry, because
+* the user edited it; `force` overrides both. It never removes npm packages.
 *
 * @param ctx The CLI context.
 * @param names Component names.
@@ -1848,6 +1937,7 @@ function runRemove(ctx, names, flags) {
 		ctx.report?.set("dryRun", flags.dryRun);
 		ctx.report?.set("removed", []);
 		let code = OK;
+		let kept = 0;
 		for (const name of removing) {
 			const blockers = dependentsOf(ctx.registry.index, name, installedNames).filter((other) => !removing.includes(other));
 			if (blockers.length > 0 && !flags.force) {
@@ -1861,18 +1951,30 @@ function runRemove(ctx, names, flags) {
 			}
 			const item = findItem(ctx.registry.index, name);
 			if (item === void 0) continue;
-			for (const file of item.files) {
-				const target = targetFor(item, file, config, mappings, ctx, void 0);
-				if (!ctx.fs.exists(target)) continue;
-				const where = display(ctx.cwd, target);
+			for (const entry of planFiles(ctx, config, [item], void 0, mappings)) {
+				if (entry.status === "create") continue;
+				const where = display(ctx.cwd, entry.target);
+				if (entry.status === "differs" && !flags.force) {
+					kept += 1;
+					ctx.out(`  kept       ${where} (differs from the registry; pass --force to remove it)`);
+					ctx.report?.push("kept", {
+						name,
+						path: where
+					});
+					continue;
+				}
 				ctx.out(`  ${flags.dryRun ? "would remove" : "remove"}  ${where}`);
-				if (!flags.dryRun) ctx.fs.remove(target);
+				if (!flags.dryRun) ctx.fs.remove(entry.target);
 				ctx.report?.push("removed", {
 					name,
 					path: where
 				});
 			}
 		}
+		if (kept > 0) {
+			problem(ctx, "SHADOW_UI_FILES_DIFFER", `${kept} file(s) differ from the registry and were kept; pass --force to remove them.`);
+			code = FAILED;
+		}
 		return code;
 	} catch (error) {
 		return failed(ctx, error);
@@ -2341,7 +2443,7 @@ function realContext(cwd) {
 		cwd: resolve(cwd ?? process.cwd()),
 		fs: nodeFs(),
 		registry: loadRegistrySource(),
-		version: "1.0.2",
+		version: "1.0.3",
 		out: (line) => process.stdout.write(`${line}\n`),
 		err: (line) => process.stderr.write(`${line}\n`),
 		async confirm(question) {

package/dist/dev/theme/theme-provider.js

@@ -82,7 +82,7 @@ function ThemeProvider(props) {
 			setSystemDark(event.matches);
 		};
 		const onStorage = (event) => {
-			if (event.key !== storageKey()) return;
+			if (event.key !== null && event.key !== storageKey()) return;
 			setThemeState(isTheme(event.newValue) ? event.newValue : defaultTheme());
 		};
 		query.addEventListener("change", onSystemChange);

package/dist/dev/theme/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","names":[],"sources":["../../../src/theme/theme-provider.ts"],"sourcesContent":["import {\n  type Accessor,\n  batch,\n  createContext,\n  onCleanup,\n  onMount,\n  untrack,\n  useContext,\n  useEffect,\n  useMemo,\n  useSignal,\n} from \"@shadow-js/core\";\nimport type { JsxChild } from \"@shadow-js/web/jsx-runtime\";\nimport {\n  applyTheme,\n  DEFAULT_STORAGE_KEY,\n  isTheme,\n  type ResolvedTheme,\n  readStoredTheme,\n  resolveTheme,\n  type Theme,\n  type ThemeOptions,\n  writeStoredTheme,\n} from \"./theme-logic\";\n\n/**\n * What {@link useTheme} returns. Every value is an accessor: call it to read.\n * @since 1.0.0\n */\nexport interface ThemeContextValue {\n  /** The user's choice: `\"light\"`, `\"dark\"` or `\"system\"`. Call it to read the value. */\n  readonly theme: Accessor<Theme>;\n  /**\n   * The theme that is shown: `\"light\"` or `\"dark\"`. `undefined` on the server and until the provider\n   * has mounted, so markup that depends on it hydrates without a mismatch.\n   */\n  readonly resolvedTheme: Accessor<ResolvedTheme | undefined>;\n  /**\n   * The operating system preference: `\"light\"` or `\"dark\"`. `undefined` on the server and until the\n   * provider has mounted.\n   */\n  readonly systemTheme: Accessor<ResolvedTheme | undefined>;\n  /**\n   * Chooses a theme, or derives one from the previous choice, and stores it under the provider's\n   * `storageKey`. Throws a `TypeError` for a value that is not `\"light\"`, `\"dark\"` or `\"system\"`.\n   */\n  readonly setTheme: (theme: Theme | ((previous: Theme) => Theme)) => void;\n}\n\n/**\n * Props of {@link ThemeProvider}: the {@link ThemeOptions} plus a transition switch and the children.\n * @since 1.0.0\n */\nexport interface ThemeProviderProps extends ThemeOptions {\n  /**\n   * Stops CSS transitions for one frame while the theme changes, so colors flip at once instead\n   * of fading piecemeal.\n   * @default false\n   */\n  readonly disableTransitionOnChange?: boolean | undefined;\n  /** The app to render inside the theme context. */\n  readonly children?: JsxChild | undefined;\n}\n\nconst MISSING: ThemeContextValue = {\n  theme: () => \"system\",\n  resolvedTheme: () => undefined,\n  systemTheme: () => undefined,\n  setTheme: () => undefined,\n};\n\nconst ThemeContext = createContext<ThemeContextValue>(MISSING, { name: \"ShadowUITheme\" });\n\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\n/** Disables transitions until the next frame; returns nothing, cleans itself up. */\nfunction suppressTransitions(): void {\n  const style = document.createElement(\"style\");\n  style.textContent =\n    \"*,*::before,*::after{transition:none!important;animation-duration:0s!important}\";\n  document.head.append(style);\n  // Reading a computed style forces the browser to apply the change with transitions off.\n  window.getComputedStyle(document.body).getPropertyValue(\"opacity\");\n  window.setTimeout(() => style.remove(), 1);\n}\n\n/**\n * The page's `localStorage`, or `undefined` when the browser blocks it: reading the property\n * itself throws a `DOMException` in some sandboxed and locked-down contexts.\n */\nfunction localStorageOrUndefined(): Storage | undefined {\n  try {\n    return window.localStorage;\n  } catch (error) {\n    if (error instanceof DOMException) return undefined;\n    throw error;\n  }\n}\n\n/**\n * Provides the color theme to the app: `\"light\"`, `\"dark\"` or `\"system\"`. The choice is persisted in\n * `localStorage`, applied to `<html>` as a `light` or `dark` class (or a `data-*` attribute), and kept\n * in sync across tabs and with the operating system. The provider renders no element of its own, and\n * nothing touches the DOM until it has mounted, so it is safe to render on the server. Pair it with\n * {@link themeScript} in the document head so the first paint already has the right theme.\n *\n * @param props The {@link ThemeProviderProps}: theme options (`storageKey`, `defaultTheme`,\n *   `attribute`, `enableSystem`), `disableTransitionOnChange` and `children`.\n * @returns The children inside the theme context.\n * @example\n * import { ThemeProvider } from \"@shadow-js/ui\";\n *\n * function App() {\n *   return <p>Hello</p>;\n * }\n *\n * export const root = (\n *   <ThemeProvider defaultTheme=\"system\">\n *     <App />\n *   </ThemeProvider>\n * );\n * @see {@link useTheme}\n * @since 1.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): JsxChild {\n  const storageKey = (): string => props.storageKey ?? DEFAULT_STORAGE_KEY;\n  const defaultTheme = (): Theme => props.defaultTheme ?? \"system\";\n  const attribute = (): \"class\" | `data-${string}` => props.attribute ?? \"class\";\n  const enableSystem = (): boolean => props.enableSystem ?? true;\n\n  const [theme, setThemeState] = useSignal<Theme>(untrack(defaultTheme));\n  const [systemDark, setSystemDark] = useSignal<boolean | undefined>(undefined);\n  const resolved = useMemo((): ResolvedTheme | undefined => {\n    const dark = systemDark();\n    if (dark === undefined) return undefined;\n    return resolveTheme(theme(), dark, enableSystem());\n  });\n  const system = useMemo((): ResolvedTheme | undefined => {\n    const dark = systemDark();\n    return dark === undefined ? undefined : dark ? \"dark\" : \"light\";\n  });\n\n  onMount(() => {\n    const query = window.matchMedia(DARK_QUERY);\n    batch(() => {\n      const storage = localStorageOrUndefined();\n      const stored = storage === undefined ? undefined : readStoredTheme(storage, storageKey());\n      if (stored !== undefined) setThemeState(stored);\n      setSystemDark(query.matches);\n    });\n    const onSystemChange = (event: MediaQueryListEvent): void => {\n      setSystemDark(event.matches);\n    };\n    const onStorage = (event: StorageEvent): void => {\n      if (event.key !== storageKey()) return;\n      setThemeState(isTheme(event.newValue) ? event.newValue : defaultTheme());\n    };\n    query.addEventListener(\"change\", onSystemChange);\n    window.addEventListener(\"storage\", onStorage);\n    onCleanup(() => {\n      query.removeEventListener(\"change\", onSystemChange);\n      window.removeEventListener(\"storage\", onStorage);\n    });\n  });\n\n  useEffect(() => {\n    const value = resolved();\n    if (value === undefined) return;\n    const attributeName = attribute();\n    const current = document.documentElement;\n    if (props.disableTransitionOnChange === true) suppressTransitions();\n    applyTheme(current, value, attributeName);\n  });\n\n  const value: ThemeContextValue = {\n    theme,\n    resolvedTheme: resolved,\n    systemTheme: system,\n    setTheme(next) {\n      const chosen = typeof next === \"function\" ? next(untrack(theme)) : next;\n      if (!isTheme(chosen)) {\n        throw new TypeError(\n          `setTheme: expected \"light\", \"dark\" or \"system\", received ${String(chosen)}`,\n        );\n      }\n      setThemeState(chosen);\n      const storage = localStorageOrUndefined();\n      if (storage !== undefined) writeStoredTheme(storage, untrack(storageKey), chosen);\n    },\n  };\n\n  return ThemeContext.Provider({\n    value,\n    get children() {\n      return props.children;\n    },\n  }) as JsxChild;\n}\n\n/**\n * Reads the theme and its setter. Call it inside a component rendered under {@link ThemeProvider}.\n *\n * @returns The {@link ThemeContextValue}: accessors for the chosen, the resolved and the system\n *   theme, and `setTheme`.\n * @throws Error when no `ThemeProvider` is above the caller.\n * @example\n * import { useTheme } from \"@shadow-js/ui\";\n *\n * export function ThemeToggle() {\n *   const { resolvedTheme, setTheme } = useTheme();\n *   return (\n *     <button onClick={() => setTheme(resolvedTheme() === \"dark\" ? \"light\" : \"dark\")}>\n *       Toggle theme\n *     </button>\n *   );\n * }\n * @see {@link ThemeProvider}\n * @since 1.0.0\n */\nexport function useTheme(): ThemeContextValue {\n  const value = useContext(ThemeContext);\n  if (value === MISSING) throw new Error(\"useTheme() must be used within <ThemeProvider>\");\n  return value;\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-provider.js","names":[],"sources":["../../../src/theme/theme-provider.ts"],"sourcesContent":["import {\n  type Accessor,\n  batch,\n  createContext,\n  onCleanup,\n  onMount,\n  untrack,\n  useContext,\n  useEffect,\n  useMemo,\n  useSignal,\n} from \"@shadow-js/core\";\nimport type { JsxChild } from \"@shadow-js/web/jsx-runtime\";\nimport {\n  applyTheme,\n  DEFAULT_STORAGE_KEY,\n  isTheme,\n  type ResolvedTheme,\n  readStoredTheme,\n  resolveTheme,\n  type Theme,\n  type ThemeOptions,\n  writeStoredTheme,\n} from \"./theme-logic\";\n\n/**\n * What {@link useTheme} returns. Every value is an accessor: call it to read.\n * @since 1.0.0\n */\nexport interface ThemeContextValue {\n  /** The user's choice: `\"light\"`, `\"dark\"` or `\"system\"`. Call it to read the value. */\n  readonly theme: Accessor<Theme>;\n  /**\n   * The theme that is shown: `\"light\"` or `\"dark\"`. `undefined` on the server and until the provider\n   * has mounted, so markup that depends on it hydrates without a mismatch.\n   */\n  readonly resolvedTheme: Accessor<ResolvedTheme | undefined>;\n  /**\n   * The operating system preference: `\"light\"` or `\"dark\"`. `undefined` on the server and until the\n   * provider has mounted.\n   */\n  readonly systemTheme: Accessor<ResolvedTheme | undefined>;\n  /**\n   * Chooses a theme, or derives one from the previous choice, and stores it under the provider's\n   * `storageKey`. Throws a `TypeError` for a value that is not `\"light\"`, `\"dark\"` or `\"system\"`.\n   */\n  readonly setTheme: (theme: Theme | ((previous: Theme) => Theme)) => void;\n}\n\n/**\n * Props of {@link ThemeProvider}: the {@link ThemeOptions} plus a transition switch and the children.\n * @since 1.0.0\n */\nexport interface ThemeProviderProps extends ThemeOptions {\n  /**\n   * Stops CSS transitions for one frame while the theme changes, so colors flip at once instead\n   * of fading piecemeal.\n   * @default false\n   */\n  readonly disableTransitionOnChange?: boolean | undefined;\n  /** The app to render inside the theme context. */\n  readonly children?: JsxChild | undefined;\n}\n\nconst MISSING: ThemeContextValue = {\n  theme: () => \"system\",\n  resolvedTheme: () => undefined,\n  systemTheme: () => undefined,\n  setTheme: () => undefined,\n};\n\nconst ThemeContext = createContext<ThemeContextValue>(MISSING, { name: \"ShadowUITheme\" });\n\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\n/** Disables transitions until the next frame; returns nothing, cleans itself up. */\nfunction suppressTransitions(): void {\n  const style = document.createElement(\"style\");\n  style.textContent =\n    \"*,*::before,*::after{transition:none!important;animation-duration:0s!important}\";\n  document.head.append(style);\n  // Reading a computed style forces the browser to apply the change with transitions off.\n  window.getComputedStyle(document.body).getPropertyValue(\"opacity\");\n  window.setTimeout(() => style.remove(), 1);\n}\n\n/**\n * The page's `localStorage`, or `undefined` when the browser blocks it: reading the property\n * itself throws a `DOMException` in some sandboxed and locked-down contexts.\n */\nfunction localStorageOrUndefined(): Storage | undefined {\n  try {\n    return window.localStorage;\n  } catch (error) {\n    if (error instanceof DOMException) return undefined;\n    throw error;\n  }\n}\n\n/**\n * Provides the color theme to the app: `\"light\"`, `\"dark\"` or `\"system\"`. The choice is persisted in\n * `localStorage`, applied to `<html>` as a `light` or `dark` class (or a `data-*` attribute), and kept\n * in sync across tabs and with the operating system. The provider renders no element of its own, and\n * nothing touches the DOM until it has mounted, so it is safe to render on the server. Pair it with\n * {@link themeScript} in the document head so the first paint already has the right theme.\n *\n * @param props The {@link ThemeProviderProps}: theme options (`storageKey`, `defaultTheme`,\n *   `attribute`, `enableSystem`), `disableTransitionOnChange` and `children`.\n * @returns The children inside the theme context.\n * @example\n * import { ThemeProvider } from \"@shadow-js/ui\";\n *\n * function App() {\n *   return <p>Hello</p>;\n * }\n *\n * export const root = (\n *   <ThemeProvider defaultTheme=\"system\">\n *     <App />\n *   </ThemeProvider>\n * );\n * @see {@link useTheme}\n * @since 1.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): JsxChild {\n  const storageKey = (): string => props.storageKey ?? DEFAULT_STORAGE_KEY;\n  const defaultTheme = (): Theme => props.defaultTheme ?? \"system\";\n  const attribute = (): \"class\" | `data-${string}` => props.attribute ?? \"class\";\n  const enableSystem = (): boolean => props.enableSystem ?? true;\n\n  const [theme, setThemeState] = useSignal<Theme>(untrack(defaultTheme));\n  const [systemDark, setSystemDark] = useSignal<boolean | undefined>(undefined);\n  const resolved = useMemo((): ResolvedTheme | undefined => {\n    const dark = systemDark();\n    if (dark === undefined) return undefined;\n    return resolveTheme(theme(), dark, enableSystem());\n  });\n  const system = useMemo((): ResolvedTheme | undefined => {\n    const dark = systemDark();\n    return dark === undefined ? undefined : dark ? \"dark\" : \"light\";\n  });\n\n  onMount(() => {\n    const query = window.matchMedia(DARK_QUERY);\n    batch(() => {\n      const storage = localStorageOrUndefined();\n      const stored = storage === undefined ? undefined : readStoredTheme(storage, storageKey());\n      if (stored !== undefined) setThemeState(stored);\n      setSystemDark(query.matches);\n    });\n    const onSystemChange = (event: MediaQueryListEvent): void => {\n      setSystemDark(event.matches);\n    };\n    const onStorage = (event: StorageEvent): void => {\n      // A null key is `storage.clear()`: the stored theme is gone, like a removed key.\n      if (event.key !== null && event.key !== storageKey()) return;\n      setThemeState(isTheme(event.newValue) ? event.newValue : defaultTheme());\n    };\n    query.addEventListener(\"change\", onSystemChange);\n    window.addEventListener(\"storage\", onStorage);\n    onCleanup(() => {\n      query.removeEventListener(\"change\", onSystemChange);\n      window.removeEventListener(\"storage\", onStorage);\n    });\n  });\n\n  useEffect(() => {\n    const value = resolved();\n    if (value === undefined) return;\n    const attributeName = attribute();\n    const current = document.documentElement;\n    if (props.disableTransitionOnChange === true) suppressTransitions();\n    applyTheme(current, value, attributeName);\n  });\n\n  const value: ThemeContextValue = {\n    theme,\n    resolvedTheme: resolved,\n    systemTheme: system,\n    setTheme(next) {\n      const chosen = typeof next === \"function\" ? next(untrack(theme)) : next;\n      if (!isTheme(chosen)) {\n        throw new TypeError(\n          `setTheme: expected \"light\", \"dark\" or \"system\", received ${String(chosen)}`,\n        );\n      }\n      setThemeState(chosen);\n      const storage = localStorageOrUndefined();\n      if (storage !== undefined) writeStoredTheme(storage, untrack(storageKey), chosen);\n    },\n  };\n\n  return ThemeContext.Provider({\n    value,\n    get children() {\n      return props.children;\n    },\n  }) as JsxChild;\n}\n\n/**\n * Reads the theme and its setter. Call it inside a component rendered under {@link ThemeProvider}.\n *\n * @returns The {@link ThemeContextValue}: accessors for the chosen, the resolved and the system\n *   theme, and `setTheme`.\n * @throws Error when no `ThemeProvider` is above the caller.\n * @example\n * import { useTheme } from \"@shadow-js/ui\";\n *\n * export function ThemeToggle() {\n *   const { resolvedTheme, setTheme } = useTheme();\n *   return (\n *     <button onClick={() => setTheme(resolvedTheme() === \"dark\" ? \"light\" : \"dark\")}>\n *       Toggle theme\n *     </button>\n *   );\n * }\n * @see {@link ThemeProvider}\n * @since 1.0.0\n */\nexport function useTheme(): ThemeContextValue {\n  const value = useContext(ThemeContext);\n  if (value === MISSING) throw new Error(\"useTheme() must be used within <ThemeProvider>\");\n  return value;\n}\n"],"mappings":"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"}

package/dist/prod/theme/theme-provider.js

@@ -1,2 +1,2 @@
-import{applyTheme as e,isTheme as t,readStoredTheme as n,resolveTheme as r,writeStoredTheme as i}from"./theme-logic.js";import{batch as a,createContext as o,onCleanup as s,onMount as c,untrack as l,useContext as u,useEffect as d,useMemo as f,useSignal as p}from"@shadow-js/core";const m={theme:()=>`system`,resolvedTheme:()=>void 0,systemTheme:()=>void 0,setTheme:()=>void 0},h=o(m,{name:`ShadowUITheme`});function g(){let e=document.createElement(`style`);e.textContent=`*,*::before,*::after{transition:none!important;animation-duration:0s!important}`,document.head.append(e),window.getComputedStyle(document.body).getPropertyValue(`opacity`),window.setTimeout(()=>e.remove(),1)}function _(){try{return window.localStorage}catch(e){if(e instanceof DOMException)return;throw e}}function v(o){let u=()=>o.storageKey??`shadow-ui-theme`,m=()=>o.defaultTheme??`system`,v=()=>o.attribute??`class`,y=()=>o.enableSystem??!0,[b,x]=p(l(m)),[S,C]=p(void 0),w=f(()=>{let e=S();if(e!==void 0)return r(b(),e,y())}),T=f(()=>{let e=S();return e===void 0?void 0:e?`dark`:`light`});c(()=>{let e=window.matchMedia(`(prefers-color-scheme: dark)`);a(()=>{let t=_(),r=t===void 0?void 0:n(t,u());r!==void 0&&x(r),C(e.matches)});let r=e=>{C(e.matches)},i=e=>{e.key===u()&&x(t(e.newValue)?e.newValue:m())};e.addEventListener(`change`,r),window.addEventListener(`storage`,i),s(()=>{e.removeEventListener(`change`,r),window.removeEventListener(`storage`,i)})}),d(()=>{let t=w();if(t===void 0)return;let n=v(),r=document.documentElement;o.disableTransitionOnChange===!0&&g(),e(r,t,n)});let E={theme:b,resolvedTheme:w,systemTheme:T,setTheme(e){let n=typeof e==`function`?e(l(b)):e;if(!t(n))throw TypeError(`setTheme: expected "light", "dark" or "system", received ${String(n)}`);x(n);let r=_();r!==void 0&&i(r,l(u),n)}};return h.Provider({value:E,get children(){return o.children}})}function y(){let e=u(h);if(e===m)throw Error(`useTheme() must be used within <ThemeProvider>`);return e}export{v as ThemeProvider,y as useTheme};
+import{applyTheme as e,isTheme as t,readStoredTheme as n,resolveTheme as r,writeStoredTheme as i}from"./theme-logic.js";import{batch as a,createContext as o,onCleanup as s,onMount as c,untrack as l,useContext as u,useEffect as d,useMemo as f,useSignal as p}from"@shadow-js/core";const m={theme:()=>`system`,resolvedTheme:()=>void 0,systemTheme:()=>void 0,setTheme:()=>void 0},h=o(m,{name:`ShadowUITheme`});function g(){let e=document.createElement(`style`);e.textContent=`*,*::before,*::after{transition:none!important;animation-duration:0s!important}`,document.head.append(e),window.getComputedStyle(document.body).getPropertyValue(`opacity`),window.setTimeout(()=>e.remove(),1)}function _(){try{return window.localStorage}catch(e){if(e instanceof DOMException)return;throw e}}function v(o){let u=()=>o.storageKey??`shadow-ui-theme`,m=()=>o.defaultTheme??`system`,v=()=>o.attribute??`class`,y=()=>o.enableSystem??!0,[b,x]=p(l(m)),[S,C]=p(void 0),w=f(()=>{let e=S();if(e!==void 0)return r(b(),e,y())}),T=f(()=>{let e=S();return e===void 0?void 0:e?`dark`:`light`});c(()=>{let e=window.matchMedia(`(prefers-color-scheme: dark)`);a(()=>{let t=_(),r=t===void 0?void 0:n(t,u());r!==void 0&&x(r),C(e.matches)});let r=e=>{C(e.matches)},i=e=>{(e.key===null||e.key===u())&&x(t(e.newValue)?e.newValue:m())};e.addEventListener(`change`,r),window.addEventListener(`storage`,i),s(()=>{e.removeEventListener(`change`,r),window.removeEventListener(`storage`,i)})}),d(()=>{let t=w();if(t===void 0)return;let n=v(),r=document.documentElement;o.disableTransitionOnChange===!0&&g(),e(r,t,n)});let E={theme:b,resolvedTheme:w,systemTheme:T,setTheme(e){let n=typeof e==`function`?e(l(b)):e;if(!t(n))throw TypeError(`setTheme: expected "light", "dark" or "system", received ${String(n)}`);x(n);let r=_();r!==void 0&&i(r,l(u),n)}};return h.Provider({value:E,get children(){return o.children}})}function y(){let e=u(h);if(e===m)throw Error(`useTheme() must be used within <ThemeProvider>`);return e}export{v as ThemeProvider,y as useTheme};
 //# sourceMappingURL=theme-provider.js.map

package/dist/prod/theme/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","names":["MISSING","ThemeContext","createContext","suppressTransitions","style","localStorageOrUndefined","error","ThemeProvider","storageKey","props","defaultTheme","attribute","enableSystem","theme","setThemeState","useSignal","untrack","systemDark","setSystemDark","resolved","useMemo","dark","resolveTheme","system","onMount","query","batch","storage","stored","readStoredTheme","onSystemChange","event","onStorage","isTheme","onCleanup","useEffect","value","attributeName","current","applyTheme","chosen","next","writeStoredTheme","useTheme","useContext"],"sources":["../../../src/theme/theme-provider.ts"],"sourcesContent":["import {\n  type Accessor,\n  batch,\n  createContext,\n  onCleanup,\n  onMount,\n  untrack,\n  useContext,\n  useEffect,\n  useMemo,\n  useSignal,\n} from \"@shadow-js/core\";\nimport type { JsxChild } from \"@shadow-js/web/jsx-runtime\";\nimport {\n  applyTheme,\n  DEFAULT_STORAGE_KEY,\n  isTheme,\n  type ResolvedTheme,\n  readStoredTheme,\n  resolveTheme,\n  type Theme,\n  type ThemeOptions,\n  writeStoredTheme,\n} from \"./theme-logic\";\n\n/**\n * What {@link useTheme} returns. Every value is an accessor: call it to read.\n * @since 1.0.0\n */\nexport interface ThemeContextValue {\n  /** The user's choice: `\"light\"`, `\"dark\"` or `\"system\"`. Call it to read the value. */\n  readonly theme: Accessor<Theme>;\n  /**\n   * The theme that is shown: `\"light\"` or `\"dark\"`. `undefined` on the server and until the provider\n   * has mounted, so markup that depends on it hydrates without a mismatch.\n   */\n  readonly resolvedTheme: Accessor<ResolvedTheme | undefined>;\n  /**\n   * The operating system preference: `\"light\"` or `\"dark\"`. `undefined` on the server and until the\n   * provider has mounted.\n   */\n  readonly systemTheme: Accessor<ResolvedTheme | undefined>;\n  /**\n   * Chooses a theme, or derives one from the previous choice, and stores it under the provider's\n   * `storageKey`. Throws a `TypeError` for a value that is not `\"light\"`, `\"dark\"` or `\"system\"`.\n   */\n  readonly setTheme: (theme: Theme | ((previous: Theme) => Theme)) => void;\n}\n\n/**\n * Props of {@link ThemeProvider}: the {@link ThemeOptions} plus a transition switch and the children.\n * @since 1.0.0\n */\nexport interface ThemeProviderProps extends ThemeOptions {\n  /**\n   * Stops CSS transitions for one frame while the theme changes, so colors flip at once instead\n   * of fading piecemeal.\n   * @default false\n   */\n  readonly disableTransitionOnChange?: boolean | undefined;\n  /** The app to render inside the theme context. */\n  readonly children?: JsxChild | undefined;\n}\n\nconst MISSING: ThemeContextValue = {\n  theme: () => \"system\",\n  resolvedTheme: () => undefined,\n  systemTheme: () => undefined,\n  setTheme: () => undefined,\n};\n\nconst ThemeContext = createContext<ThemeContextValue>(MISSING, { name: \"ShadowUITheme\" });\n\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\n/** Disables transitions until the next frame; returns nothing, cleans itself up. */\nfunction suppressTransitions(): void {\n  const style = document.createElement(\"style\");\n  style.textContent =\n    \"*,*::before,*::after{transition:none!important;animation-duration:0s!important}\";\n  document.head.append(style);\n  // Reading a computed style forces the browser to apply the change with transitions off.\n  window.getComputedStyle(document.body).getPropertyValue(\"opacity\");\n  window.setTimeout(() => style.remove(), 1);\n}\n\n/**\n * The page's `localStorage`, or `undefined` when the browser blocks it: reading the property\n * itself throws a `DOMException` in some sandboxed and locked-down contexts.\n */\nfunction localStorageOrUndefined(): Storage | undefined {\n  try {\n    return window.localStorage;\n  } catch (error) {\n    if (error instanceof DOMException) return undefined;\n    throw error;\n  }\n}\n\n/**\n * Provides the color theme to the app: `\"light\"`, `\"dark\"` or `\"system\"`. The choice is persisted in\n * `localStorage`, applied to `<html>` as a `light` or `dark` class (or a `data-*` attribute), and kept\n * in sync across tabs and with the operating system. The provider renders no element of its own, and\n * nothing touches the DOM until it has mounted, so it is safe to render on the server. Pair it with\n * {@link themeScript} in the document head so the first paint already has the right theme.\n *\n * @param props The {@link ThemeProviderProps}: theme options (`storageKey`, `defaultTheme`,\n *   `attribute`, `enableSystem`), `disableTransitionOnChange` and `children`.\n * @returns The children inside the theme context.\n * @example\n * import { ThemeProvider } from \"@shadow-js/ui\";\n *\n * function App() {\n *   return <p>Hello</p>;\n * }\n *\n * export const root = (\n *   <ThemeProvider defaultTheme=\"system\">\n *     <App />\n *   </ThemeProvider>\n * );\n * @see {@link useTheme}\n * @since 1.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): JsxChild {\n  const storageKey = (): string => props.storageKey ?? DEFAULT_STORAGE_KEY;\n  const defaultTheme = (): Theme => props.defaultTheme ?? \"system\";\n  const attribute = (): \"class\" | `data-${string}` => props.attribute ?? \"class\";\n  const enableSystem = (): boolean => props.enableSystem ?? true;\n\n  const [theme, setThemeState] = useSignal<Theme>(untrack(defaultTheme));\n  const [systemDark, setSystemDark] = useSignal<boolean | undefined>(undefined);\n  const resolved = useMemo((): ResolvedTheme | undefined => {\n    const dark = systemDark();\n    if (dark === undefined) return undefined;\n    return resolveTheme(theme(), dark, enableSystem());\n  });\n  const system = useMemo((): ResolvedTheme | undefined => {\n    const dark = systemDark();\n    return dark === undefined ? undefined : dark ? \"dark\" : \"light\";\n  });\n\n  onMount(() => {\n    const query = window.matchMedia(DARK_QUERY);\n    batch(() => {\n      const storage = localStorageOrUndefined();\n      const stored = storage === undefined ? undefined : readStoredTheme(storage, storageKey());\n      if (stored !== undefined) setThemeState(stored);\n      setSystemDark(query.matches);\n    });\n    const onSystemChange = (event: MediaQueryListEvent): void => {\n      setSystemDark(event.matches);\n    };\n    const onStorage = (event: StorageEvent): void => {\n      if (event.key !== storageKey()) return;\n      setThemeState(isTheme(event.newValue) ? event.newValue : defaultTheme());\n    };\n    query.addEventListener(\"change\", onSystemChange);\n    window.addEventListener(\"storage\", onStorage);\n    onCleanup(() => {\n      query.removeEventListener(\"change\", onSystemChange);\n      window.removeEventListener(\"storage\", onStorage);\n    });\n  });\n\n  useEffect(() => {\n    const value = resolved();\n    if (value === undefined) return;\n    const attributeName = attribute();\n    const current = document.documentElement;\n    if (props.disableTransitionOnChange === true) suppressTransitions();\n    applyTheme(current, value, attributeName);\n  });\n\n  const value: ThemeContextValue = {\n    theme,\n    resolvedTheme: resolved,\n    systemTheme: system,\n    setTheme(next) {\n      const chosen = typeof next === \"function\" ? next(untrack(theme)) : next;\n      if (!isTheme(chosen)) {\n        throw new TypeError(\n          `setTheme: expected \"light\", \"dark\" or \"system\", received ${String(chosen)}`,\n        );\n      }\n      setThemeState(chosen);\n      const storage = localStorageOrUndefined();\n      if (storage !== undefined) writeStoredTheme(storage, untrack(storageKey), chosen);\n    },\n  };\n\n  return ThemeContext.Provider({\n    value,\n    get children() {\n      return props.children;\n    },\n  }) as JsxChild;\n}\n\n/**\n * Reads the theme and its setter. Call it inside a component rendered under {@link ThemeProvider}.\n *\n * @returns The {@link ThemeContextValue}: accessors for the chosen, the resolved and the system\n *   theme, and `setTheme`.\n * @throws Error when no `ThemeProvider` is above the caller.\n * @example\n * import { useTheme } from \"@shadow-js/ui\";\n *\n * export function ThemeToggle() {\n *   const { resolvedTheme, setTheme } = useTheme();\n *   return (\n *     <button onClick={() => setTheme(resolvedTheme() === \"dark\" ? \"light\" : \"dark\")}>\n *       Toggle theme\n *     </button>\n *   );\n * }\n * @see {@link ThemeProvider}\n * @since 1.0.0\n */\nexport function useTheme(): ThemeContextValue {\n  const value = useContext(ThemeContext);\n  if (value === MISSING) throw new Error(\"useTheme() must be used within <ThemeProvider>\");\n  return value;\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-provider.js","names":["MISSING","ThemeContext","createContext","suppressTransitions","style","localStorageOrUndefined","error","ThemeProvider","storageKey","props","defaultTheme","attribute","enableSystem","theme","setThemeState","useSignal","untrack","systemDark","setSystemDark","resolved","useMemo","dark","resolveTheme","system","onMount","query","batch","storage","stored","readStoredTheme","onSystemChange","event","onStorage","isTheme","onCleanup","useEffect","value","attributeName","current","applyTheme","chosen","next","writeStoredTheme","useTheme","useContext"],"sources":["../../../src/theme/theme-provider.ts"],"sourcesContent":["import {\n  type Accessor,\n  batch,\n  createContext,\n  onCleanup,\n  onMount,\n  untrack,\n  useContext,\n  useEffect,\n  useMemo,\n  useSignal,\n} from \"@shadow-js/core\";\nimport type { JsxChild } from \"@shadow-js/web/jsx-runtime\";\nimport {\n  applyTheme,\n  DEFAULT_STORAGE_KEY,\n  isTheme,\n  type ResolvedTheme,\n  readStoredTheme,\n  resolveTheme,\n  type Theme,\n  type ThemeOptions,\n  writeStoredTheme,\n} from \"./theme-logic\";\n\n/**\n * What {@link useTheme} returns. Every value is an accessor: call it to read.\n * @since 1.0.0\n */\nexport interface ThemeContextValue {\n  /** The user's choice: `\"light\"`, `\"dark\"` or `\"system\"`. Call it to read the value. */\n  readonly theme: Accessor<Theme>;\n  /**\n   * The theme that is shown: `\"light\"` or `\"dark\"`. `undefined` on the server and until the provider\n   * has mounted, so markup that depends on it hydrates without a mismatch.\n   */\n  readonly resolvedTheme: Accessor<ResolvedTheme | undefined>;\n  /**\n   * The operating system preference: `\"light\"` or `\"dark\"`. `undefined` on the server and until the\n   * provider has mounted.\n   */\n  readonly systemTheme: Accessor<ResolvedTheme | undefined>;\n  /**\n   * Chooses a theme, or derives one from the previous choice, and stores it under the provider's\n   * `storageKey`. Throws a `TypeError` for a value that is not `\"light\"`, `\"dark\"` or `\"system\"`.\n   */\n  readonly setTheme: (theme: Theme | ((previous: Theme) => Theme)) => void;\n}\n\n/**\n * Props of {@link ThemeProvider}: the {@link ThemeOptions} plus a transition switch and the children.\n * @since 1.0.0\n */\nexport interface ThemeProviderProps extends ThemeOptions {\n  /**\n   * Stops CSS transitions for one frame while the theme changes, so colors flip at once instead\n   * of fading piecemeal.\n   * @default false\n   */\n  readonly disableTransitionOnChange?: boolean | undefined;\n  /** The app to render inside the theme context. */\n  readonly children?: JsxChild | undefined;\n}\n\nconst MISSING: ThemeContextValue = {\n  theme: () => \"system\",\n  resolvedTheme: () => undefined,\n  systemTheme: () => undefined,\n  setTheme: () => undefined,\n};\n\nconst ThemeContext = createContext<ThemeContextValue>(MISSING, { name: \"ShadowUITheme\" });\n\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\n/** Disables transitions until the next frame; returns nothing, cleans itself up. */\nfunction suppressTransitions(): void {\n  const style = document.createElement(\"style\");\n  style.textContent =\n    \"*,*::before,*::after{transition:none!important;animation-duration:0s!important}\";\n  document.head.append(style);\n  // Reading a computed style forces the browser to apply the change with transitions off.\n  window.getComputedStyle(document.body).getPropertyValue(\"opacity\");\n  window.setTimeout(() => style.remove(), 1);\n}\n\n/**\n * The page's `localStorage`, or `undefined` when the browser blocks it: reading the property\n * itself throws a `DOMException` in some sandboxed and locked-down contexts.\n */\nfunction localStorageOrUndefined(): Storage | undefined {\n  try {\n    return window.localStorage;\n  } catch (error) {\n    if (error instanceof DOMException) return undefined;\n    throw error;\n  }\n}\n\n/**\n * Provides the color theme to the app: `\"light\"`, `\"dark\"` or `\"system\"`. The choice is persisted in\n * `localStorage`, applied to `<html>` as a `light` or `dark` class (or a `data-*` attribute), and kept\n * in sync across tabs and with the operating system. The provider renders no element of its own, and\n * nothing touches the DOM until it has mounted, so it is safe to render on the server. Pair it with\n * {@link themeScript} in the document head so the first paint already has the right theme.\n *\n * @param props The {@link ThemeProviderProps}: theme options (`storageKey`, `defaultTheme`,\n *   `attribute`, `enableSystem`), `disableTransitionOnChange` and `children`.\n * @returns The children inside the theme context.\n * @example\n * import { ThemeProvider } from \"@shadow-js/ui\";\n *\n * function App() {\n *   return <p>Hello</p>;\n * }\n *\n * export const root = (\n *   <ThemeProvider defaultTheme=\"system\">\n *     <App />\n *   </ThemeProvider>\n * );\n * @see {@link useTheme}\n * @since 1.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): JsxChild {\n  const storageKey = (): string => props.storageKey ?? DEFAULT_STORAGE_KEY;\n  const defaultTheme = (): Theme => props.defaultTheme ?? \"system\";\n  const attribute = (): \"class\" | `data-${string}` => props.attribute ?? \"class\";\n  const enableSystem = (): boolean => props.enableSystem ?? true;\n\n  const [theme, setThemeState] = useSignal<Theme>(untrack(defaultTheme));\n  const [systemDark, setSystemDark] = useSignal<boolean | undefined>(undefined);\n  const resolved = useMemo((): ResolvedTheme | undefined => {\n    const dark = systemDark();\n    if (dark === undefined) return undefined;\n    return resolveTheme(theme(), dark, enableSystem());\n  });\n  const system = useMemo((): ResolvedTheme | undefined => {\n    const dark = systemDark();\n    return dark === undefined ? undefined : dark ? \"dark\" : \"light\";\n  });\n\n  onMount(() => {\n    const query = window.matchMedia(DARK_QUERY);\n    batch(() => {\n      const storage = localStorageOrUndefined();\n      const stored = storage === undefined ? undefined : readStoredTheme(storage, storageKey());\n      if (stored !== undefined) setThemeState(stored);\n      setSystemDark(query.matches);\n    });\n    const onSystemChange = (event: MediaQueryListEvent): void => {\n      setSystemDark(event.matches);\n    };\n    const onStorage = (event: StorageEvent): void => {\n      // A null key is `storage.clear()`: the stored theme is gone, like a removed key.\n      if (event.key !== null && event.key !== storageKey()) return;\n      setThemeState(isTheme(event.newValue) ? event.newValue : defaultTheme());\n    };\n    query.addEventListener(\"change\", onSystemChange);\n    window.addEventListener(\"storage\", onStorage);\n    onCleanup(() => {\n      query.removeEventListener(\"change\", onSystemChange);\n      window.removeEventListener(\"storage\", onStorage);\n    });\n  });\n\n  useEffect(() => {\n    const value = resolved();\n    if (value === undefined) return;\n    const attributeName = attribute();\n    const current = document.documentElement;\n    if (props.disableTransitionOnChange === true) suppressTransitions();\n    applyTheme(current, value, attributeName);\n  });\n\n  const value: ThemeContextValue = {\n    theme,\n    resolvedTheme: resolved,\n    systemTheme: system,\n    setTheme(next) {\n      const chosen = typeof next === \"function\" ? next(untrack(theme)) : next;\n      if (!isTheme(chosen)) {\n        throw new TypeError(\n          `setTheme: expected \"light\", \"dark\" or \"system\", received ${String(chosen)}`,\n        );\n      }\n      setThemeState(chosen);\n      const storage = localStorageOrUndefined();\n      if (storage !== undefined) writeStoredTheme(storage, untrack(storageKey), chosen);\n    },\n  };\n\n  return ThemeContext.Provider({\n    value,\n    get children() {\n      return props.children;\n    },\n  }) as JsxChild;\n}\n\n/**\n * Reads the theme and its setter. Call it inside a component rendered under {@link ThemeProvider}.\n *\n * @returns The {@link ThemeContextValue}: accessors for the chosen, the resolved and the system\n *   theme, and `setTheme`.\n * @throws Error when no `ThemeProvider` is above the caller.\n * @example\n * import { useTheme } from \"@shadow-js/ui\";\n *\n * export function ThemeToggle() {\n *   const { resolvedTheme, setTheme } = useTheme();\n *   return (\n *     <button onClick={() => setTheme(resolvedTheme() === \"dark\" ? \"light\" : \"dark\")}>\n *       Toggle theme\n *     </button>\n *   );\n * }\n * @see {@link ThemeProvider}\n * @since 1.0.0\n */\nexport function useTheme(): ThemeContextValue {\n  const value = useContext(ThemeContext);\n  if (value === MISSING) throw new Error(\"useTheme() must be used within <ThemeProvider>\");\n  return value;\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadow-js/ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "shadcn-style components you add to your project with a CLI, styled with Tailwind v4",
   "license": "MIT",
   "type": "module",
@@ -60,18 +60,18 @@
     "check": "npm run lint && npm run typecheck && npm run build && npm test && npm run test:perf && npm run test:gc"
   },
   "peerDependencies": {
-    "@shadow-js/core": "^1.0.2",
-    "@shadow-js/primitives": "^1.0.2",
-    "@shadow-js/web": "^1.0.2"
+    "@shadow-js/core": "^1.0.3",
+    "@shadow-js/primitives": "^1.0.3",
+    "@shadow-js/web": "^1.0.3"
   },
   "devDependencies": {
     "@biomejs/biome": "2.5.15",
-    "@shadow-js/compiler": "^1.0.2",
-    "@shadow-js/core": "^1.0.2",
-    "@shadow-js/forms": "^1.0.2",
-    "@shadow-js/primitives": "^1.0.2",
-    "@shadow-js/testing": "^1.0.2",
-    "@shadow-js/web": "^1.0.2",
+    "@shadow-js/compiler": "^1.0.3",
+    "@shadow-js/core": "^1.0.3",
+    "@shadow-js/forms": "^1.0.3",
+    "@shadow-js/primitives": "^1.0.3",
+    "@shadow-js/testing": "^1.0.3",
+    "@shadow-js/web": "^1.0.3",
     "@tailwindcss/node": "4.3.3",
     "@types/node": "^24.0.0",
     "fast-check": "^4.10.2",
@@ -84,7 +84,7 @@
     "vitest": "5.0.3"
   },
   "dependencies": {
-    "@shadow-js/table": "1.0.2",
+    "@shadow-js/table": "1.0.3",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "3.7.0"

package/registry.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadow-js/ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "frameworkDependencies": [
     "@shadow-js/core",
     "@shadow-js/primitives",
@@ -1063,7 +1063,7 @@
         "utils"
       ],
       "dependencies": {
-        "@shadow-js/table": "1.0.2"
+        "@shadow-js/table": "1.0.3"
       },
       "exports": [
         "DataTable",