resonare 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Si Phuoc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,332 @@
+# Resonare [![Version](https://img.shields.io/npm/v/resonare.svg?labelColor=black&color=blue)](https://www.npmjs.com/package/resonare)
+
+A configuration-based theme store for building deeply personal user interface.
+
+## Features
+
+- Define and manage multi-dimensional themes, eg:
+  - Color scheme: system, light, dark
+  - Contrast preference: standard, high
+  - Spacing: compact, comfortable, spacious
+  - etc
+- Framework-agnostic
+- Prevent theme flicker on page load
+- Honor system preferences
+- Create sections with independent theming
+- Sync theme selection across tabs and windows
+- Flexible persistence options, defaulting to localStorage
+- SSR-friendly
+
+## Demo
+
+- [Demo](https://resonare.universse.workers.dev)
+
+## Installation
+
+To install:
+
+```bash
+npm i resonare
+# or
+yarn add resonare
+# or
+pnpm add resonare
+```
+
+## Basic Usage
+
+It's recommended to initialize Resonare in a synchronous script to avoid theme flicker on page load. If your project's bundler supports importing static asset as string, you can inline the minified version of Resonare to reduce the number of HTTP requests. Check out the demo for example of this pattern with Vite.
+
+```html
+<script src="https://unpkg.com/resonare"></script>
+<!-- or -->
+<script src="https://cdn.jsdelivr.net/npm/resonare"></script>
+
+<script>
+  ;(async () => {
+    const themeStore = window.resonare.createThemeStore({
+      config: {
+        colorScheme: {
+          options: [
+            {
+              value: 'system',
+              media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
+            },
+            'light',
+            'dark',
+          ]
+        },
+      },
+    })
+
+    themeStore.subscribe(({ resolvedThemes }) => {
+      for (const [theme, optionKey] of Object.entries(resolvedThemes)) {
+        document.documentElement.dataset[theme] = optionKey
+      }
+    })
+
+    await themeStore.restore()
+    themeStore.sync()
+  })()
+</script>
+```
+
+If you are using TypeScript, add `node_modules/resonare/global.d.ts` to `include` in `tsconfig.json`.
+
+```json
+{
+  "include": [
+    "node_modules/resonare/global.d.ts",
+    // ...
+  ]
+}
+```
+
+## API
+
+### `createThemeStore`
+
+```ts
+import { createThemeStore, type ThemeConfig, type ThemeStore } from 'resonare'
+
+const config = {
+  colorScheme: {
+    options: [
+      {
+        value: 'system',
+        media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
+      },
+      'light',
+      'dark',
+    ]
+  },
+  contrast: {
+    options: [
+      {
+        value: 'system',
+        media: [
+          '(prefers-contrast: more) and (forced-colors: none)',
+          'high',
+          'standard',
+        ],
+      },
+      'standard',
+      'high',
+    ],
+    defaultOption: 'standard',
+  }
+} as const satisfies ThemeConfig
+
+declare module 'resonare' {
+  interface ThemeStoreRegistry {
+    resonare: ThemeStore<typeof config>
+  }
+}
+
+
+const themeStore = createThemeStore({
+  // optional, default 'resonare'
+  // should be unique, also used as client storage key
+  key: 'resonare',
+
+  // required, specify theme and options
+  config,
+
+  // optional, useful for SSR
+  initialState: {
+    themes: {
+      colorScheme: 'dark',
+      contrast: 'high',
+    },
+  },
+
+  // optional, specify your own client storage
+  // localStorage is used by default
+  storage: ({ abortController }) => ({
+    getItem: (key: string) => {
+      return JSON.parse(localStorage.getItem(key) || 'null')
+    },
+
+    setItem: (key: string, value: object) => {
+      localStorage.setItem(key, JSON.stringify(value))
+    },
+
+    watch: (cb: (key: string, value: unknown) => void) => {
+      const controller = new AbortController()
+
+      window.addEventListener(
+        'storage',
+        (e) => {
+          if (e.storageArea !== localStorage) return
+
+          cb(e.key, JSON.parse(e.newValue!))
+        },
+        {
+          signal: AbortSignal.any([
+            abortController.signal,
+            controller.signal,
+          ]),
+        },
+      )
+
+      return () => {
+        controller.abort()
+      }
+    },
+  })
+})
+```
+
+### `getThemeStore`
+
+```ts
+import { getThemeStore } from 'resonare'
+
+// Get an existing theme store by key
+const themeStore = getThemeStore('resonare') 
+```
+
+### `destroyThemeStore`
+
+```ts
+import { destroyThemeStore } from 'resonare'
+
+// Get an existing theme store by key
+const themeStore = destroyThemeStore('resonare') 
+```
+
+### ThemeStore Methods
+
+```ts
+interface ThemeStore<T> {
+  // get current theme selection
+  getThemes(): Record<string, string>
+
+  // get resolved theme selection (after media queries)
+  getResolvedThemes(): Record<string, string>
+
+  // update theme
+  setThemes(themes: Partial<Record<string, string>>): Promise<void>
+
+  // get state to persist, useful for server-side persistence
+  // to restore, pass the returned object to initialState
+  getStateToPersist(): object
+
+  // restore persisted theme selection from client storage
+  restore(): Promise<void>
+
+  // sync theme selection across tabs/windows
+  sync(): () => void
+
+  // subscribe to theme changes
+  subscribe(
+    callback: ({
+      themes,
+      resolvedThemes,
+    }: {
+      themes: Record<string, string>
+      resolvedThemes: Record<string, string>
+    }) => void,
+    options?: { immediate?: boolean }
+  ): () => void
+}
+```
+
+### React Integration
+
+Ensure that you have initialized Resonare as per instructions under [Basic Usage](#basic-usage).
+
+```tsx
+import * as React from 'react'
+import { getThemesAndOptions } from 'resonare'
+import { useResonare } from 'resonare/react'
+
+function ThemeSelect() {
+  const { themes, setThemes } = useResonare(() =>
+    window.resonare.getThemeStore(),
+  )
+
+  return getThemesAndOptions(config).map(([theme, options]) => (
+    <div key={theme}>
+      <label htmlFor={theme}>{theme}</label>
+      <select
+        id={theme}
+        name={theme}
+        onChange={(e) => {
+          setThemes({ [theme]: e.target.value })
+        }}
+        value={themes[theme]}
+      >
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </div>
+  ))
+}
+```
+
+### Server-side persistence
+
+If you are storing theme selection on the server, you can choose to use `memoryStorageAdapter` to avoid storing any data client-side. There's no need to initialize Resonare in a synchronous script. Ensure you pass the persisted theme selection when initializing Resonare as `initialState`.
+
+```tsx
+import {
+  createThemeStore,
+  getThemesAndOptions,
+  memoryStorageAdapter,
+  type ThemeConfig,
+  type Themes,
+} from 'resonare'
+import { useResonare } from 'resonare/react'
+import * as React from 'react'
+
+const config = {
+  colorScheme: {
+    options: ['light', 'dark'],
+  },
+  contrast: {
+    options: ['standard', 'high'],
+  },
+} as const satisfies ThemeConfig
+
+export function ThemeSelect({
+  persistedServerThemes,
+}: { persistedServerThemes: Themes<typeof config> }) {
+  const [themeStore] = React.useState(() =>
+    createThemeStore({
+      config,
+      initialState: {
+        themes: persistedServerThemes,
+      },
+      storage: memoryStorageAdapter(),
+    }),
+  )
+
+  const { themes, setThemes } = useResonare(() => themeStore, {
+    initOnMount: true,
+  })
+
+  return getThemesAndOptions(config).map(([theme, options]) => (
+    <div key={theme}>
+      <label htmlFor={theme}>{theme}</label>
+      <select
+        id={theme}
+        name={theme}
+        onChange={(e) => {
+          setThemes({ [theme]: e.target.value })
+        }}
+        value={themes[theme]}
+      >
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </div>
+  ))
+}
+```

package/dist/index-C1bWhjq0.d.ts

@@ -0,0 +1,65 @@
+import { n as StorageAdapterCreate } from "./storage-BP1DGXF0.js";
+
+//#region src/index.d.ts
+type ThemeOption = {
+  value: string;
+  media?: [string, string, string];
+};
+type ThemeConfig = Record<string, {
+  options: Array<string | ThemeOption>;
+  defaultOption?: string;
+}>;
+type Themes<T extends ThemeConfig> = { [K in keyof T]: T[K]['options'] extends Array<infer U> ? U extends string ? U : U extends ThemeOption ? U['value'] : never : never };
+type Listener<T extends ThemeConfig> = (value: {
+  themes: Themes<T>;
+  resolvedThemes: Themes<T>;
+}) => void;
+type ThemeKeysWithSystemOption<T extends ThemeConfig> = { [K in keyof T]: T[K]['options'] extends Array<infer U> ? U extends {
+  media: [string, string, string];
+} ? K : never : never }[keyof T];
+type NonSystemOptionValues<T extends ThemeConfig, K$1 extends keyof T> = T[K$1]['options'] extends Array<infer U> ? U extends string ? U : U extends ThemeOption ? U extends {
+  media: [string, string, string];
+} ? never : U['value'] : never : never;
+type SystemOptions<T extends ThemeConfig> = { [K in ThemeKeysWithSystemOption<T>]?: [NonSystemOptionValues<T, K>, NonSystemOptionValues<T, K>] };
+type PersistedState<T extends ThemeConfig> = {
+  version: 1;
+  themes: Themes<T>;
+  systemOptions: SystemOptions<T>;
+};
+type ThemeStoreOptions<T extends ThemeConfig> = {
+  key?: string;
+  config: T;
+  initialState?: Partial<PersistedState<T>>;
+  storage?: StorageAdapterCreate;
+};
+type ThemeAndOptions<T extends ThemeConfig> = Array<{ [K in keyof T]: [K, Array<T[K]['options'] extends Array<infer U> ? U extends string ? U : U extends ThemeOption ? U['value'] : never : never>] }[keyof T]>;
+declare function getThemesAndOptions<T extends ThemeConfig>(config: T): ThemeAndOptions<T>;
+declare function getDefaultThemes<T extends ThemeConfig>(config: T): Themes<T>;
+declare class ThemeStore<T extends ThemeConfig> {
+  #private;
+  constructor({
+    key,
+    config,
+    initialState,
+    storage
+  }: ThemeStoreOptions<T>);
+  getThemes: () => Themes<T>;
+  getResolvedThemes: () => Themes<T>;
+  setThemes: (themes: Partial<Themes<T>> | ((currentThemes: Themes<T>) => Partial<Themes<T>>)) => Promise<void>;
+  updateSystemOption: <K$1 extends ThemeKeysWithSystemOption<T>>(themeKey: K$1, [ifMatch, ifNotMatch]: [NonSystemOptionValues<T, K$1>, NonSystemOptionValues<T, K$1>]) => void;
+  getStateToPersist: () => PersistedState<T>;
+  restore: () => Promise<void>;
+  subscribe: (callback: Listener<T>, {
+    immediate
+  }?: {
+    immediate?: boolean;
+  }) => (() => void);
+  sync: () => (() => void) | undefined;
+  ___destroy: () => void;
+}
+declare const createThemeStore: <T extends ThemeConfig>(options: ThemeStoreOptions<T>) => ThemeStore<T>;
+declare const getThemeStore: <T extends keyof ThemeStoreRegistry>(key?: T | undefined) => ThemeStoreRegistry[T];
+declare const destroyThemeStore: <T extends keyof ThemeStoreRegistry>(key?: T | undefined) => void;
+interface ThemeStoreRegistry {}
+//#endregion
+export { ThemeStoreRegistry as a, destroyThemeStore as c, getThemesAndOptions as d, ThemeStoreOptions as i, getDefaultThemes as l, ThemeConfig as n, Themes as o, ThemeStore as r, createThemeStore as s, ThemeAndOptions as t, getThemeStore as u };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { a as ThemeStoreRegistry, c as destroyThemeStore, d as getThemesAndOptions, i as ThemeStoreOptions, l as getDefaultThemes, n as ThemeConfig, o as Themes, r as ThemeStore, s as createThemeStore, t as ThemeAndOptions, u as getThemeStore } from "./index-C1bWhjq0.js";
+export { ThemeAndOptions, ThemeConfig, ThemeStore, ThemeStoreOptions, ThemeStoreRegistry, Themes, createThemeStore, destroyThemeStore, getDefaultThemes, getThemeStore, getThemesAndOptions };

package/dist/index.js

@@ -0,0 +1,3 @@
+import { a as getThemeStore, i as getDefaultThemes, n as createThemeStore, o as getThemesAndOptions, r as destroyThemeStore, t as ThemeStore } from "./src-BsTQDM3B.js";
+
+export { ThemeStore, createThemeStore, destroyThemeStore, getDefaultThemes, getThemeStore, getThemesAndOptions };

package/dist/react.d.ts

@@ -0,0 +1,54 @@
+import { n as ThemeConfig, o as Themes, r as ThemeStore } from "./index-C1bWhjq0.js";
+
+//#region src/react.d.ts
+declare function useResonare<T extends ThemeConfig>(getStore: () => ThemeStore<T>, {
+  initOnMount
+}?: {
+  initOnMount?: boolean | undefined;
+}): {
+  themes: Themes<T>;
+  resolvedThemes: Themes<T>;
+  setThemes: (themes: Partial<Themes<T>> | ((currentThemes: Themes<T>) => Partial<Themes<T>>)) => Promise<void>;
+  updateSystemOption: <K extends { [K_1 in keyof T]: T[K_1]["options"] extends (infer U)[] ? U extends {
+    media: [string, string, string];
+  } ? K_1 : never : never }[keyof T]>(themeKey: K, [ifMatch, ifNotMatch]: [T[K]["options"] extends (infer U)[] ? U extends string ? U : U extends {
+    value: string;
+    media?: [string, string, string];
+  } ? U extends {
+    media: [string, string, string];
+  } ? never : U["value"] : never : never, T[K]["options"] extends (infer U)[] ? U extends string ? U : U extends {
+    value: string;
+    media?: [string, string, string];
+  } ? U extends {
+    media: [string, string, string];
+  } ? never : U["value"] : never : never]) => void;
+  getStateToPersist: () => {
+    version: 1;
+    themes: Themes<T>;
+    systemOptions: { [K_1 in { [K in keyof T]: T[K]["options"] extends (infer U)[] ? U extends {
+      media: [string, string, string];
+    } ? K : never : never }[keyof T]]?: [T[K_1]["options"] extends (infer U)[] ? U extends string ? U : U extends {
+      value: string;
+      media?: [string, string, string];
+    } ? U extends {
+      media: [string, string, string];
+    } ? never : U["value"] : never : never, T[K_1]["options"] extends (infer U)[] ? U extends string ? U : U extends {
+      value: string;
+      media?: [string, string, string];
+    } ? U extends {
+      media: [string, string, string];
+    } ? never : U["value"] : never : never] };
+  };
+  restore: () => Promise<void>;
+  sync: () => (() => void) | undefined;
+  subscribe: (callback: (value: {
+    themes: Themes<T>;
+    resolvedThemes: Themes<T>;
+  }) => void, {
+    immediate
+  }?: {
+    immediate?: boolean;
+  }) => (() => void);
+};
+//#endregion
+export { useResonare };

package/dist/react.js

@@ -0,0 +1,71 @@
+import { c } from "react-compiler-runtime";
+import * as React from "react";
+
+//#region src/react.ts
+function noop() {}
+const emptyObject = {};
+const emptyStore = {
+	getThemes: () => emptyObject,
+	getResolvedThemes: () => emptyObject,
+	setThemes: noop,
+	updateSystemOption: noop,
+	getStateToPersist: noop,
+	restore: noop,
+	sync: noop,
+	subscribe: () => noop
+};
+function useResonare(getStore, t0) {
+	const $ = c(13);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { initOnMount: t2 } = t1;
+	const initOnMount = t2 === void 0 ? false : t2;
+	const [isMounted, setIsMounted] = React.useState(initOnMount);
+	let t3;
+	let t4;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => {
+			setIsMounted(true);
+		};
+		t4 = [];
+		$[2] = t3;
+		$[3] = t4;
+	} else {
+		t3 = $[2];
+		t4 = $[3];
+	}
+	React.useEffect(t3, t4);
+	const { getThemes, getResolvedThemes, setThemes, updateSystemOption, getStateToPersist, restore, sync, subscribe } = isMounted ? getStore() : emptyStore;
+	const themes = React.useSyncExternalStore(subscribe, getThemes, getThemes);
+	const t5 = getResolvedThemes();
+	let t6;
+	if ($[4] !== getStateToPersist || $[5] !== restore || $[6] !== setThemes || $[7] !== subscribe || $[8] !== sync || $[9] !== t5 || $[10] !== themes || $[11] !== updateSystemOption) {
+		t6 = {
+			themes,
+			resolvedThemes: t5,
+			setThemes,
+			updateSystemOption,
+			getStateToPersist,
+			restore,
+			sync,
+			subscribe
+		};
+		$[4] = getStateToPersist;
+		$[5] = restore;
+		$[6] = setThemes;
+		$[7] = subscribe;
+		$[8] = sync;
+		$[9] = t5;
+		$[10] = themes;
+		$[11] = updateSystemOption;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+
+//#endregion
+export { useResonare };

package/dist/resonare.iife.min.js

@@ -0,0 +1 @@
+var resonare=(function(e){var t=`resonare`;let n=({storageType:e=`localStorage`}={})=>({abortController:t})=>({getItem:t=>JSON.parse(window[e].getItem(t)||`null`),setItem:(t,n)=>{window[e].setItem(t,JSON.stringify(n))},watch:n=>{let r=new AbortController;return window.addEventListener(`storage`,t=>{t.storageArea===window[e]&&n(t.key,JSON.parse(t.newValue))},{signal:AbortSignal.any([t.signal,r.signal])}),()=>{r.abort()}}}),r=()=>({abortController:e})=>{let n=new Map,r=new BroadcastChannel(t);return{getItem:e=>n.get(e)||null,setItem:(e,t)=>{n.set(e,t)},broadcast:(e,t)=>{r.postMessage({key:e,value:t})},watch:t=>{let n=new AbortController;return r.addEventListener(`message`,e=>{t(e.data.key,e.data.value)},{signal:AbortSignal.any([e.signal,n.signal])}),()=>{n.abort()}}}},i=`resonare`;function a(e){return Object.entries(e).map(([e,{options:t}])=>[e,t.map(e=>typeof e==`string`?e:e.value)])}function o(e){return Object.fromEntries(Object.entries(e).map(([e,{options:t,defaultOption:n}])=>[e,n??(typeof t[0]==`string`?t[0]:t[0].value)]))}let s=typeof window<`u`&&window.document!==void 0&&window.document.createElement!==void 0;var c=class{#e;#t;#n;#r;#i;#a=new Set;#o;#s=new AbortController;constructor({key:e=i,config:t,initialState:r={},storage:a=n()}){let s={},c={...r.systemOptions};Object.entries(t).forEach(([e,{options:t}])=>{s[e]=s[e]||{},t.forEach(t=>{typeof t==`string`?s[e][t]={value:t}:(t.media&&!Object.hasOwn(c,e)&&(c[e]=[t.media[1],t.media[2]]),s[e][t.value]=t)})}),this.#n={key:e,config:s,storage:a},this.#r=c,this.#e=o(t),this.#t={...this.#e,...r.themes},this.#i=this.#n.storage({abortController:this.#s}),this.#o={}}getThemes=()=>this.#t;getResolvedThemes=()=>this.#l();setThemes=async e=>{let t=typeof e==`function`?e(this.#t):e;this.#c({...this.#t,...t});let n=this.getStateToPersist();await this.#i.setItem(this.#n.key,n),this.#i.broadcast?.(this.#n.key,n)};updateSystemOption=(e,[t,n])=>{this.#r[e]=[t,n],this.setThemes({...this.#t})};getStateToPersist=()=>({version:1,themes:this.#t,systemOptions:this.#r});restore=async()=>{let e=await this.#i.getItem(this.#n.key);if(!e){this.#c({...this.#e});return}Object.hasOwn(e,`version`)||(e={version:1,themes:e,systemOptions:this.#r}),this.#r={...this.#r,...e.systemOptions},this.#c({...this.#e,...e.themes})};subscribe=(e,{immediate:t=!1}={})=>(t&&e({themes:this.#t,resolvedThemes:this.#l()}),this.#a.add(e),()=>{this.#a.delete(e)});sync=()=>{if(!this.#i.watch){console.warn(`[${i}] No watch method was provided for storage.`);return}return this.#i.watch((e,t)=>{e===this.#n.key&&(this.#r=t.systemOptions,this.#c(t.themes))})};___destroy=()=>{this.#a.clear(),this.#s.abort()};#c=e=>{this.#t=e,this.#d()};#l=()=>Object.fromEntries(Object.entries(this.#t).map(([e,t])=>{let n=this.#n.config[e][t];return[e,this.#u({themeKey:e,option:n})]}));#u=({themeKey:e,option:t})=>{if(!t.media)return t.value;if(!s)return console.warn(`[${i}] Option with key "media" cannot be resolved in server environment.`),t.value;let[n]=t.media;if(!this.#o[n]){let r=window.matchMedia(n);this.#o[n]=r,r.addEventListener(`change`,()=>{this.#t[e]===t.value&&this.#c({...this.#t})},{signal:this.#s.signal})}let[r,a]=this.#r[e];return this.#o[n].matches?r:a};#d=()=>{for(let e of this.#a)e({themes:this.#t,resolvedThemes:this.#l()})}};let l=new class{#e=new Map;create=e=>{let t=e.key||i;this.#e.has(t)&&this.destroy(t);let n=new c(e);return this.#e.set(t,n),n};get=e=>{let t=e||i;if(!this.#e.has(t))throw Error(`[${i}] Theme store with key '${t}' could not be found. Please run \`createThemeStore\` with key '${t}' first.`);return this.#e.get(t)};destroy=e=>{let t=e||i;if(!this.#e.has(t))throw Error(`[${i}] Theme store with key '${t}' could not be found. Please run \`createThemeStore\` with key '${t}' first.`);this.#e.get(t).___destroy(),this.#e.delete(t)}},u=l.create,d=l.get,f=l.destroy;return e.createThemeStore=u,e.destroyThemeStore=f,e.getThemeStore=d,e.getThemesAndOptions=a,e.localStorageAdapter=n,e.memoryStorageAdapter=r,e})({});

package/dist/src-BsTQDM3B.js

@@ -0,0 +1,188 @@
+import { t as localStorageAdapter } from "./storage-ByzkGDod.js";
+
+//#region src/index.ts
+const PACKAGE_NAME = "resonare";
+function getThemesAndOptions(config) {
+	return Object.entries(config).map(([themeKey, { options }]) => {
+		return [themeKey, options.map((option) => typeof option === "string" ? option : option.value)];
+	});
+}
+function getDefaultThemes(config) {
+	return Object.fromEntries(Object.entries(config).map(([themeKey, { options, defaultOption }]) => {
+		return [themeKey, defaultOption ?? (typeof options[0] === "string" ? options[0] : options[0].value)];
+	}));
+}
+const isClient = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
+var ThemeStore = class {
+	#defaultThemes;
+	#currentThemes;
+	#options;
+	#systemOptions;
+	#storage;
+	#listeners = /* @__PURE__ */ new Set();
+	#mediaQueryCache;
+	#abortController = new AbortController();
+	constructor({ key = PACKAGE_NAME, config, initialState = {}, storage = localStorageAdapter() }) {
+		const keyedConfig = {};
+		const systemOptions = { ...initialState.systemOptions };
+		Object.entries(config).forEach(([themeKey, { options }]) => {
+			keyedConfig[themeKey] = keyedConfig[themeKey] || {};
+			options.forEach((option) => {
+				if (typeof option === "string") keyedConfig[themeKey][option] = { value: option };
+				else {
+					if (option.media && !Object.hasOwn(systemOptions, themeKey)) systemOptions[themeKey] = [option.media[1], option.media[2]];
+					keyedConfig[themeKey][option.value] = option;
+				}
+			});
+		});
+		this.#options = {
+			key,
+			config: keyedConfig,
+			storage
+		};
+		this.#systemOptions = systemOptions;
+		this.#defaultThemes = getDefaultThemes(config);
+		this.#currentThemes = {
+			...this.#defaultThemes,
+			...initialState.themes
+		};
+		this.#storage = this.#options.storage({ abortController: this.#abortController });
+		this.#mediaQueryCache = {};
+	}
+	getThemes = () => {
+		return this.#currentThemes;
+	};
+	getResolvedThemes = () => {
+		return this.#resolveThemes();
+	};
+	setThemes = async (themes) => {
+		const updatedThemes = typeof themes === "function" ? themes(this.#currentThemes) : themes;
+		this.#setThemesAndNotify({
+			...this.#currentThemes,
+			...updatedThemes
+		});
+		const stateToPersist = this.getStateToPersist();
+		await this.#storage.setItem(this.#options.key, stateToPersist);
+		this.#storage.broadcast?.(this.#options.key, stateToPersist);
+	};
+	updateSystemOption = (themeKey, [ifMatch, ifNotMatch]) => {
+		this.#systemOptions[themeKey] = [ifMatch, ifNotMatch];
+		this.setThemes({ ...this.#currentThemes });
+	};
+	getStateToPersist = () => {
+		return {
+			version: 1,
+			themes: this.#currentThemes,
+			systemOptions: this.#systemOptions
+		};
+	};
+	restore = async () => {
+		let persistedState = await this.#storage.getItem(this.#options.key);
+		if (!persistedState) {
+			this.#setThemesAndNotify({ ...this.#defaultThemes });
+			return;
+		}
+		if (!Object.hasOwn(persistedState, "version")) persistedState = {
+			version: 1,
+			themes: persistedState,
+			systemOptions: this.#systemOptions
+		};
+		this.#systemOptions = {
+			...this.#systemOptions,
+			...persistedState.systemOptions
+		};
+		this.#setThemesAndNotify({
+			...this.#defaultThemes,
+			...persistedState.themes
+		});
+	};
+	subscribe = (callback, { immediate = false } = {}) => {
+		if (immediate) callback({
+			themes: this.#currentThemes,
+			resolvedThemes: this.#resolveThemes()
+		});
+		this.#listeners.add(callback);
+		return () => {
+			this.#listeners.delete(callback);
+		};
+	};
+	sync = () => {
+		if (!this.#storage.watch) {
+			console.warn(`[${PACKAGE_NAME}] No watch method was provided for storage.`);
+			return;
+		}
+		return this.#storage.watch((key, persistedState) => {
+			if (key !== this.#options.key) return;
+			this.#systemOptions = persistedState.systemOptions;
+			this.#setThemesAndNotify(persistedState.themes);
+		});
+	};
+	___destroy = () => {
+		this.#listeners.clear();
+		this.#abortController.abort();
+	};
+	#setThemesAndNotify = (themes) => {
+		this.#currentThemes = themes;
+		this.#notify();
+	};
+	#resolveThemes = () => {
+		return Object.fromEntries(Object.entries(this.#currentThemes).map(([themeKey, optionKey]) => {
+			const option = this.#options.config[themeKey][optionKey];
+			return [themeKey, this.#resolveThemeOption({
+				themeKey,
+				option
+			})];
+		}));
+	};
+	#resolveThemeOption = ({ themeKey, option }) => {
+		if (!option.media) return option.value;
+		if (!isClient) {
+			console.warn(`[${PACKAGE_NAME}] Option with key "media" cannot be resolved in server environment.`);
+			return option.value;
+		}
+		const [mediaQuery] = option.media;
+		if (!this.#mediaQueryCache[mediaQuery]) {
+			const mediaQueryList = window.matchMedia(mediaQuery);
+			this.#mediaQueryCache[mediaQuery] = mediaQueryList;
+			mediaQueryList.addEventListener("change", () => {
+				if (this.#currentThemes[themeKey] === option.value) this.#setThemesAndNotify({ ...this.#currentThemes });
+			}, { signal: this.#abortController.signal });
+		}
+		const [ifMatch, ifNotMatch] = this.#systemOptions[themeKey];
+		return this.#mediaQueryCache[mediaQuery].matches ? ifMatch : ifNotMatch;
+	};
+	#notify = () => {
+		for (const listener of this.#listeners) listener({
+			themes: this.#currentThemes,
+			resolvedThemes: this.#resolveThemes()
+		});
+	};
+};
+var Registry = class {
+	#registry = /* @__PURE__ */ new Map();
+	create = (options) => {
+		const storeKey = options.key || PACKAGE_NAME;
+		if (this.#registry.has(storeKey)) this.destroy(storeKey);
+		const themeStore = new ThemeStore(options);
+		this.#registry.set(storeKey, themeStore);
+		return themeStore;
+	};
+	get = (key) => {
+		const storeKey = key || PACKAGE_NAME;
+		if (!this.#registry.has(storeKey)) throw new Error(`[${PACKAGE_NAME}] Theme store with key '${storeKey}' could not be found. Please run \`createThemeStore\` with key '${storeKey}' first.`);
+		return this.#registry.get(storeKey);
+	};
+	destroy = (key) => {
+		const storeKey = key || PACKAGE_NAME;
+		if (!this.#registry.has(storeKey)) throw new Error(`[${PACKAGE_NAME}] Theme store with key '${storeKey}' could not be found. Please run \`createThemeStore\` with key '${storeKey}' first.`);
+		this.#registry.get(storeKey).___destroy();
+		this.#registry.delete(storeKey);
+	};
+};
+const registry = new Registry();
+const createThemeStore = registry.create;
+const getThemeStore = registry.get;
+const destroyThemeStore = registry.destroy;
+
+//#endregion
+export { getThemeStore as a, getDefaultThemes as i, createThemeStore as n, getThemesAndOptions as o, destroyThemeStore as r, ThemeStore as t };

package/dist/storage-BP1DGXF0.d.ts

@@ -0,0 +1,19 @@
+//#region src/storage.d.ts
+type StorageAdapter = {
+  getItem: (key: string) => object | null | Promise<object | null>;
+  setItem: (key: string, value: object) => void | Promise<void>;
+  broadcast?: (key: string, value: object) => void;
+  watch?: (cb: (key: string | null, value: object) => void) => () => void;
+};
+type StorageAdapterCreate = ({
+  abortController
+}: {
+  abortController: AbortController;
+}) => StorageAdapter;
+type StorageAdapterCreator<Options> = (options?: Options) => StorageAdapterCreate;
+declare const localStorageAdapter: StorageAdapterCreator<{
+  storageType?: 'localStorage' | 'sessionStorage';
+}>;
+declare const memoryStorageAdapter: StorageAdapterCreator<never>;
+//#endregion
+export { memoryStorageAdapter as a, localStorageAdapter as i, StorageAdapterCreate as n, StorageAdapterCreator as r, StorageAdapter as t };

package/dist/storage-ByzkGDod.js

@@ -0,0 +1,59 @@
+//#region package.json
+var name = "resonare";
+
+//#endregion
+//#region src/storage.ts
+const localStorageAdapter = ({ storageType = "localStorage" } = {}) => {
+	return ({ abortController }) => {
+		return {
+			getItem: (key) => {
+				return JSON.parse(window[storageType].getItem(key) || "null");
+			},
+			setItem: (key, value) => {
+				window[storageType].setItem(key, JSON.stringify(value));
+			},
+			watch: (cb) => {
+				const controller = new AbortController();
+				window.addEventListener("storage", (e) => {
+					if (e.storageArea !== window[storageType]) return;
+					cb(e.key, JSON.parse(e.newValue));
+				}, { signal: AbortSignal.any([abortController.signal, controller.signal]) });
+				return () => {
+					controller.abort();
+				};
+			}
+		};
+	};
+};
+const memoryStorageAdapter = () => {
+	return ({ abortController }) => {
+		const storage = /* @__PURE__ */ new Map();
+		const channel = new BroadcastChannel(name);
+		return {
+			getItem: (key) => {
+				return storage.get(key) || null;
+			},
+			setItem: (key, value) => {
+				storage.set(key, value);
+			},
+			broadcast: (key, value) => {
+				channel.postMessage({
+					key,
+					value
+				});
+			},
+			watch: (cb) => {
+				const controller = new AbortController();
+				channel.addEventListener("message", (e) => {
+					cb(e.data.key, e.data.value);
+				}, { signal: AbortSignal.any([abortController.signal, controller.signal]) });
+				return () => {
+					controller.abort();
+				};
+			}
+		};
+	};
+};
+
+//#endregion
+export { memoryStorageAdapter as n, localStorageAdapter as t };

package/dist/storage.d.ts

@@ -0,0 +1,2 @@
+import { a as memoryStorageAdapter, i as localStorageAdapter, n as StorageAdapterCreate, r as StorageAdapterCreator, t as StorageAdapter } from "./storage-BP1DGXF0.js";
+export { StorageAdapter, StorageAdapterCreate, StorageAdapterCreator, localStorageAdapter, memoryStorageAdapter };

package/dist/storage.js

@@ -0,0 +1,3 @@
+import { n as memoryStorageAdapter, t as localStorageAdapter } from "./storage-ByzkGDod.js";
+
+export { localStorageAdapter, memoryStorageAdapter };

package/dist/umd.d.ts

@@ -0,0 +1,3 @@
+import { a as memoryStorageAdapter, i as localStorageAdapter } from "./storage-BP1DGXF0.js";
+import { c as destroyThemeStore, d as getThemesAndOptions, s as createThemeStore, u as getThemeStore } from "./index-C1bWhjq0.js";
+export { createThemeStore, destroyThemeStore, getThemeStore, getThemesAndOptions, localStorageAdapter, memoryStorageAdapter };

package/dist/umd.js

@@ -0,0 +1,4 @@
+import { n as memoryStorageAdapter, t as localStorageAdapter } from "./storage-ByzkGDod.js";
+import { a as getThemeStore, n as createThemeStore, o as getThemesAndOptions, r as destroyThemeStore } from "./src-BsTQDM3B.js";
+
+export { createThemeStore, destroyThemeStore, getThemeStore, getThemesAndOptions, localStorageAdapter, memoryStorageAdapter };

package/global.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+	resonare: typeof import('./dist/umd')
+}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "resonare",
+  "version": "0.0.1",
+  "description": "Resonare",
+  "keywords": [
+    "theming"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/universse/resonare.git",
+    "directory": "resonare"
+  },
+  "license": "MIT",
+  "author": "Si Phuoc <phuoc317049@gmail.com>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./global": {
+      "types": "./dist/umd.d.ts"
+    },
+    "./raw": {
+      "import": "./dist/resonare.iife.min.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
+    "./storage": {
+      "types": "./dist/storage.d.ts",
+      "import": "./dist/storage.js"
+    }
+  },
+  "jsdelivr": "./dist/resonare.iife.min.js",
+  "unpkg": "./dist/resonare.iife.min.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "global.d.ts"
+  ],
+  "dependencies": {
+    "react-compiler-runtime": "1.0.0"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "12.0.0",
+    "@types/react": "19.2.7",
+    "@vitejs/plugin-react": "5.1.2",
+    "babel-plugin-react-compiler": "1.0.0",
+    "jsdom": "27.3.0",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "size-limit": "12.0.0",
+    "tsdown": "0.17.2",
+    "typescript": "5.9.3",
+    "vitest": "4.0.15"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "size": "size-limit",
+    "test": "vitest"
+  }
+}