@codenhub/theme 0.0.1

package/README.md

@@ -0,0 +1,355 @@
+# @codenhub/theme
+
+Small zero-dependency theme preference helper for browser apps. It applies a theme name to the document, updates `document.documentElement.style.colorScheme`, and leaves tokens, variables, and visual styles to your CSS.
+
+## Installation
+
+```sh
+pnpm add @codenhub/theme
+```
+
+## Usage
+
+By default, `init()` uses a valid stored preference first. If there is no valid stored preference, it maps the OS color scheme to `light` or `dark`.
+
+```ts
+import { Theme } from "@codenhub/theme";
+
+const theme = new Theme({ tailwindcss: false, applyClass: true });
+
+theme.init();
+theme.set("dark");
+theme.toggle();
+```
+
+Call `destroy()` during app or test cleanup when the instance is no longer used.
+
+## Reference
+
+### `@codenhub/theme`
+
+Primary entrypoint for the theme preference API.
+
+```ts
+import { Theme, darkTheme, lightTheme, THEME_CHANGE_EVENT } from "@codenhub/theme";
+import type {
+  SystemThemeMap,
+  ThemeChangeDetail,
+  ThemeChangeListener,
+  ThemeChangeSource,
+  ThemeClassResolver,
+  ThemeDefinition,
+  ThemeOptions,
+} from "@codenhub/theme";
+```
+
+Supported import paths:
+
+| Path              | Description                         |
+| ----------------- | ----------------------------------- |
+| `@codenhub/theme` | Main JavaScript and TypeScript API. |
+
+#### `Theme`
+
+Manages the active theme, storage preference, DOM attribute, `colorScheme` style, classes, system preference listener, and change notifications.
+
+```ts
+class Theme {
+  constructor(options?: ThemeOptions);
+  init(): this;
+  get(): ThemeDefinition;
+  set(name: string): ThemeDefinition;
+  toggle(): ThemeDefinition;
+  clearPreference(): ThemeDefinition;
+  getStored(): string | null;
+  getSystem(): ThemeDefinition;
+  subscribe(listener: ThemeChangeListener): () => void;
+  destroy(): void;
+}
+```
+
+Import from `@codenhub/theme`.
+
+The constructor throws `Error` when configured theme names are empty, duplicated, invalid for CSS class application, or referenced by `defaultTheme` or `systemTheme` without being configured.
+
+##### `init()`
+
+Registers the system preference listener, resolves the initial theme, applies it, and emits a change with source `"init"`.
+
+Repeated calls do not register duplicate system preference listeners.
+
+```ts
+function init(): this;
+```
+
+##### `get()`
+
+Returns the active theme definition.
+
+```ts
+function get(): ThemeDefinition;
+```
+
+##### `set()`
+
+Activates a configured theme by name and stores the explicit preference when browser storage is available.
+
+```ts
+function set(name: string): ThemeDefinition;
+```
+
+Throws `Error` when `name` is not configured.
+
+##### `toggle()`
+
+Toggles between the configured system light and dark theme names, then stores the explicit preference when browser storage is available.
+
+```ts
+function toggle(): ThemeDefinition;
+```
+
+##### `clearPreference()`
+
+Removes the stored preference and activates the current system theme.
+
+```ts
+function clearPreference(): ThemeDefinition;
+```
+
+##### `getStored()`
+
+Returns the stored theme name when it exists and is configured.
+
+```ts
+function getStored(): string | null;
+```
+
+Returns `null` during SSR, when storage is unavailable, when storage access throws, or when the stored name is not configured.
+
+##### `getSystem()`
+
+Returns the configured theme for the current `prefers-color-scheme` value.
+
+```ts
+function getSystem(): ThemeDefinition;
+```
+
+Returns the default theme during SSR or when `matchMedia` is unavailable.
+
+##### `subscribe()`
+
+Registers an in-process listener for theme changes.
+
+```ts
+function subscribe(listener: ThemeChangeListener): () => void;
+```
+
+Returns an unsubscribe function.
+
+##### `destroy()`
+
+Removes the system preference listener and clears in-process subscribers.
+
+```ts
+function destroy(): void;
+```
+
+Call this during app or test cleanup when the instance is no longer used.
+
+#### `ThemeOptions`
+
+```ts
+interface ThemeOptions {
+  themes?: readonly ThemeDefinition[];
+  defaultTheme?: string;
+  systemTheme?: SystemThemeMap;
+  storageKey?: string;
+  attribute?: string;
+  tailwindcss?: boolean;
+  applyClass?: boolean | ThemeClassResolver;
+}
+```
+
+| Option         | Type                                              | Default                            | Description                                                                                 |
+| -------------- | ------------------------------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------- |
+| `themes`       | `readonly ThemeDefinition[]`                      | `[lightTheme, darkTheme]`          | Defines available themes.                                                                   |
+| `defaultTheme` | `string`                                          | `"light"`                          | Theme used before init and when browser APIs are unavailable.                               |
+| `systemTheme`  | `SystemThemeMap`                                  | `{ light: "light", dark: "dark" }` | Maps OS light and dark preferences to configured theme names.                               |
+| `storageKey`   | `string`                                          | `"app-theme-preference"`           | Key used for `localStorage`.                                                                |
+| `attribute`    | `string`                                          | `"data-theme"`                     | Attribute set on `document.documentElement`.                                                |
+| `tailwindcss`  | `boolean`                                         | `false`                            | Toggles the `dark` class when the active theme has `colorScheme: "dark"`.                   |
+| `applyClass`   | `boolean` or `(theme: ThemeDefinition) => string` | `true`                             | Adds `theme-${name}`, no class, or a resolver-provided class to `document.documentElement`. |
+
+When class application is enabled, each theme application removes classes for all configured themes, then adds the class for the active theme.
+
+#### `ThemeDefinition`
+
+```ts
+interface ThemeDefinition {
+  name: string;
+  colorScheme: "light" | "dark";
+}
+```
+
+| Field         | Type                | Description                                                      |
+| ------------- | ------------------- | ---------------------------------------------------------------- |
+| `name`        | `string`            | Unique theme name used for storage, attributes, and class names. |
+| `colorScheme` | `"light" \| "dark"` | Browser color scheme applied through `style.colorScheme`.        |
+
+#### `SystemThemeMap`
+
+```ts
+interface SystemThemeMap {
+  light: string;
+  dark: string;
+}
+```
+
+| Field   | Type     | Description                                                 |
+| ------- | -------- | ----------------------------------------------------------- |
+| `light` | `string` | Configured theme name used when the OS preference is light. |
+| `dark`  | `string` | Configured theme name used when the OS preference is dark.  |
+
+#### `ThemeClassResolver`
+
+Returns the class name applied to `document.documentElement` for a theme.
+
+```ts
+type ThemeClassResolver = (theme: ThemeDefinition) => string;
+```
+
+The returned class name must be a single non-empty class token without whitespace.
+
+`init()`, `set()`, `toggle()`, `clearPreference()`, or system preference changes throw `Error` if the resolver returns an empty class name or a class name containing whitespace.
+
+#### `ThemeChangeListener`
+
+Listener passed to `theme.subscribe()`.
+
+```ts
+type ThemeChangeListener = (detail: ThemeChangeDetail) => void;
+```
+
+#### `THEME_CHANGE_EVENT`
+
+Window event name dispatched after theme changes in browser environments.
+
+```ts
+const THEME_CHANGE_EVENT = "themechange";
+```
+
+#### `ThemeChangeDetail`
+
+```ts
+interface ThemeChangeDetail {
+  name: string;
+  theme: ThemeDefinition;
+  source: "init" | "set" | "toggle" | "clearPreference" | "system";
+}
+```
+
+| Field    | Type                | Description                               |
+| -------- | ------------------- | ----------------------------------------- |
+| `name`   | `string`            | Active theme name after the change.       |
+| `theme`  | `ThemeDefinition`   | Active theme definition after the change. |
+| `source` | `ThemeChangeSource` | Reason the theme change was emitted.      |
+
+#### `ThemeChangeSource`
+
+Reason a theme change was emitted.
+
+```ts
+type ThemeChangeSource = "init" | "set" | "toggle" | "clearPreference" | "system";
+```
+
+| Value               | Emitted when                                       |
+| ------------------- | -------------------------------------------------- |
+| `"init"`            | `init()` resolves and applies the initial theme.   |
+| `"set"`             | `set()` applies an explicit theme preference.      |
+| `"toggle"`          | `toggle()` switches between system light and dark. |
+| `"clearPreference"` | `clearPreference()` removes stored preference.     |
+| `"system"`          | OS color scheme changes with no stored preference. |
+
+#### Built-In Themes
+
+Built-in theme definitions.
+
+```ts
+const lightTheme: ThemeDefinition = { name: "light", colorScheme: "light" };
+const darkTheme: ThemeDefinition = { name: "dark", colorScheme: "dark" };
+```
+
+## Examples
+
+### Define CSS Tokens
+
+```css
+:root,
+[data-theme="light"] {
+  --color-background: white;
+  --color-foreground: black;
+}
+
+[data-theme="dark"] {
+  --color-background: black;
+  --color-foreground: white;
+}
+
+body {
+  background: var(--color-background);
+  color: var(--color-foreground);
+}
+```
+
+### Add More Themes
+
+```ts
+import { Theme, darkTheme, lightTheme } from "@codenhub/theme";
+
+const theme = new Theme({
+  themes: [lightTheme, darkTheme, { name: "high-contrast", colorScheme: "dark" }],
+  systemTheme: { light: "light", dark: "high-contrast" },
+  applyClass: (definition) => `mode-${definition.name}`,
+});
+
+theme.init();
+theme.set("high-contrast");
+```
+
+### Listen For Changes
+
+```ts
+import { Theme, THEME_CHANGE_EVENT, type ThemeChangeDetail } from "@codenhub/theme";
+
+const theme = new Theme().init();
+
+const unsubscribe = theme.subscribe((detail) => {
+  console.log(detail.name, detail.theme, detail.source);
+});
+
+window.addEventListener(THEME_CHANGE_EVENT, (event) => {
+  const detail = (event as CustomEvent<ThemeChangeDetail>).detail;
+
+  console.log(detail.name);
+});
+
+unsubscribe();
+theme.destroy();
+```
+
+## Requirements
+
+- Browser integration uses `document.documentElement`, `document.documentElement.style.colorScheme`, `window.matchMedia`, `localStorage`, and `CustomEvent`.
+- SSR is supported; DOM, storage, media query, and event work is skipped when browser APIs are unavailable.
+- System preference changes update the active theme only when there is no valid stored preference.
+- `localStorage` read, write, and remove errors are ignored and treated as unavailable storage.
+- Consumers own CSS variables, selectors, visual tokens, and persistence consent requirements.
+- No CSS file, design tokens, framework adapter, or peer dependency is provided.
+
+## Notes
+
+- Does not provide design tokens or generated CSS.
+- Does not provide React, Vue, or other framework bindings.
+- Does not provide server-side persistence.
+- Does not synchronize theme changes across tabs.
+- Does not manage user consent requirements for storage.

package/dist/index.d.ts

@@ -0,0 +1,84 @@
+//#region src/index.d.ts
+/** Window event name dispatched with `ThemeChangeDetail` after a theme change is applied in browser environments. */
+declare const THEME_CHANGE_EVENT = "themechange";
+/** Theme option stored, applied to the configured DOM attribute, and mapped to the browser color scheme. */
+interface ThemeDefinition {
+  /** Unique configured theme name used for storage, DOM attributes, and generated default classes. */
+  name: string;
+  /** Browser color scheme applied to `document.documentElement.style.colorScheme`. */
+  colorScheme: "light" | "dark";
+}
+/** Mapping from OS color-scheme preferences to configured theme names. */
+interface SystemThemeMap {
+  /** Configured theme name used when the OS preference is light or no dark preference is detected. */
+  light: string;
+  /** Configured theme name used when the OS preference is dark. */
+  dark: string;
+}
+/** Resolves the single DOM class token applied for a theme when custom class application is enabled. */
+type ThemeClassResolver = (theme: ThemeDefinition) => string;
+/** Reason a theme change notification was emitted. */
+type ThemeChangeSource = "init" | "set" | "toggle" | "clearPreference" | "system";
+/** Payload passed to subscribers and the browser `themechange` event after a theme change. */
+interface ThemeChangeDetail {
+  /** Active theme name after the change. */
+  name: string;
+  /** Active theme definition after the change. */
+  theme: ThemeDefinition;
+  /** Operation or browser signal that caused the change notification. */
+  source: ThemeChangeSource;
+}
+/** In-process callback registered with `Theme.subscribe()` for applied theme changes. */
+type ThemeChangeListener = (detail: ThemeChangeDetail) => void;
+/** Configuration for theme definitions, persistence, DOM application, and system preference mapping. */
+interface ThemeOptions {
+  /** Available themes. Names must be unique, non-empty, and valid default class tokens when `applyClass` is `true`. */
+  themes?: readonly ThemeDefinition[];
+  /** Configured theme name used before initialization and when browser APIs are unavailable. */
+  defaultTheme?: string;
+  /** Configured theme names selected for OS light and dark color-scheme preferences. */
+  systemTheme?: SystemThemeMap;
+  /** `localStorage` key used for explicit user preferences. */
+  storageKey?: string;
+  /** Attribute set on `document.documentElement` with the active theme name. */
+  attribute?: string;
+  /** Whether to toggle Tailwind CSS's `dark` class for themes with `colorScheme: "dark"`. */
+  tailwindcss?: boolean;
+  /** Whether and how to apply a theme-specific class to `document.documentElement`. */
+  applyClass?: boolean | ThemeClassResolver;
+}
+/** Built-in light theme used by default and available for custom theme lists. */
+declare const lightTheme: ThemeDefinition;
+/** Built-in dark theme used by default and available for custom theme lists. */
+declare const darkTheme: ThemeDefinition;
+/**
+ * Manages theme preference, DOM application, system preference changes, and change notifications.
+ *
+ * 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.
+ */
+declare class Theme {
+  #private;
+  /** Creates a theme manager with default light/dark themes unless overridden. */
+  constructor(options?: ThemeOptions);
+  /** Registers system preference handling, applies the initial theme, emits an `init` change, and returns this instance. */
+  init(): this;
+  /** Returns the currently active theme definition. */
+  get(): ThemeDefinition;
+  /** Applies a configured theme by name, stores it when possible, emits a `set` change, and throws `Error` for unknown names. */
+  set(name: string): ThemeDefinition;
+  /** Toggles between the configured system light and dark themes, stores the preference when possible, and emits a `toggle` change. */
+  toggle(): ThemeDefinition;
+  /** Removes the stored preference when possible, applies the current system theme, and emits a `clearPreference` change. */
+  clearPreference(): ThemeDefinition;
+  /** Returns the stored configured theme name, or `null` during SSR, storage failures, or invalid stored preferences. */
+  getStored(): string | null;
+  /** Returns the configured theme for the current OS color-scheme preference, or the default theme without browser support. */
+  getSystem(): ThemeDefinition;
+  /** Registers a listener for in-process theme changes and returns an unsubscribe function. */
+  subscribe(listener: ThemeChangeListener): () => void;
+  /** Removes the system preference listener and clears in-process subscribers. */
+  destroy(): void;
+}
+//#endregion
+export { SystemThemeMap, THEME_CHANGE_EVENT, Theme, ThemeChangeDetail, ThemeChangeListener, ThemeChangeSource, ThemeClassResolver, ThemeDefinition, ThemeOptions, darkTheme, lightTheme };

package/dist/index.js

@@ -0,0 +1,198 @@
+//#region src/index.ts
+/** Window event name dispatched with `ThemeChangeDetail` after a theme change is applied in browser environments. */
+const THEME_CHANGE_EVENT = "themechange";
+const DEFAULT_STORAGE_KEY = "app-theme-preference";
+const DEFAULT_ATTRIBUTE = "data-theme";
+const DARK_CLASS = "dark";
+const PREFERS_DARK_QUERY = "(prefers-color-scheme: dark)";
+const CLASS_TOKEN_WHITESPACE = /\s/;
+/** Built-in light theme used by default and available for custom theme lists. */
+const lightTheme = {
+	name: "light",
+	colorScheme: "light"
+};
+/** Built-in dark theme used by default and available for custom theme lists. */
+const darkTheme = {
+	name: "dark",
+	colorScheme: "dark"
+};
+const defaultOptions = {
+	themes: [lightTheme, darkTheme],
+	defaultTheme: lightTheme.name,
+	systemTheme: {
+		light: lightTheme.name,
+		dark: darkTheme.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);
+		assertClassToken(className, `Theme class resolver returned an invalid class for theme: ${theme.name}.`);
+		return className;
+	}
+	return `theme-${theme.name}`;
+};
+const assertClassToken = (className, message) => {
+	if (className.length === 0 || CLASS_TOKEN_WHITESPACE.test(className)) throw new Error(message);
+};
+const assertThemeConfig = (options) => {
+	const names = /* @__PURE__ */ new Set();
+	for (const theme of options.themes) {
+		if (theme.name.trim().length === 0) throw new Error("Theme names must be non-empty.");
+		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 (!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.
+*
+* 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.
+*/
+var Theme = class {
+	#options;
+	#activeName;
+	#listeners = /* @__PURE__ */ new Set();
+	#mediaQueryList = null;
+	#handleSystemChange = (event) => {
+		if (this.getStored() !== null) return;
+		const name = event.matches ? this.#options.systemTheme.dark : this.#options.systemTheme.light;
+		this.#activate(name, "system", { shouldStore: false });
+	};
+	/** Creates a theme manager with default light/dark themes unless overridden. */
+	constructor(options = {}) {
+		this.#options = {
+			...defaultOptions,
+			...options,
+			systemTheme: {
+				...defaultOptions.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 });
+		return this;
+	}
+	/** Returns the currently active theme definition. */
+	get() {
+		return this.#getTheme(this.#activeName) ?? this.#getTheme(this.#options.defaultTheme);
+	}
+	/** 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 });
+	}
+	/** 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 });
+	}
+	/** 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 });
+	}
+	/** 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;
+		}
+	}
+	/** 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);
+	}
+	/** 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;
+		}
+		this.#listeners.clear();
+	}
+	#activate(name, source, options) {
+		const theme = this.#getTheme(name);
+		this.#activeName = theme.name;
+		if (options.shouldStore) this.#store(theme.name);
+		this.#apply(theme);
+		this.#emit({
+			name: theme.name,
+			theme,
+			source
+		});
+		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");
+	}
+	#emit(detail) {
+		for (const listener of this.#listeners) listener(detail);
+		if (!isBrowser()) return;
+		window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { 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;
+		}
+	}
+};
+//#endregion
+export { THEME_CHANGE_EVENT, Theme, darkTheme, lightTheme };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@codenhub/theme",
+  "version": "0.0.1",
+  "private": false,
+  "description": "Zero-dependency browser theme preference helper for TypeScript apps.",
+  "homepage": "https://github.com/codenhub/codenhub/tree/main/packages/theme",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codenhub/codenhub.git",
+    "directory": "packages/theme"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "jsdom": "^29.1.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.0.17"
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts --format esm --dts --clean --no-fixed-extension",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  }
+}