@just-web/toolkits 1.0.0 → 2.1.0

package/dist/theme/theme-store/class-name-theme-store/class-name-theme-store.d.cts

@@ -1,4 +1,5 @@
 import { ThemeMap } from "../../theme-map.types.cjs";
+import { ParseStoredTheme, StringifyStoredTheme } from "../../theme-entry.types.cjs";
 import { ThemeStore } from "../theme-store.types.cjs";
 import { Required } from "type-plus";
 
@@ -8,7 +9,9 @@ import { Required } from "type-plus";
  * Creates a theme store that reads and writes via element class names.
  *
  * @param themes - Record mapping theme keys to class name(s)
- * @param options.element - Element to operate on (defaults to document.documentElement)
+ * @param options.element - Element to operate on (accepts null e.g. from refs). Defaults to document.documentElement.
+ * @param options.parse - Custom parser (default: parseClassName)
+ * @param options.stringify - Custom serializer (default: stringifyClassName)
  * @returns ThemeStore
  *
  * @example
@@ -21,7 +24,9 @@ import { Required } from "type-plus";
  * ```
  */
 declare function classNameThemeStore<Themes extends ThemeMap>(themes: Themes, options?: {
-  element?: Element | undefined;
+  element?: Element | null | undefined;
+  parse?: ParseStoredTheme<Themes> | undefined;
+  stringify?: StringifyStoredTheme<Themes> | undefined;
 }): Required<ThemeStore<Themes>>;
 //#endregion
 export { classNameThemeStore };

package/dist/theme/theme-store/class-name-theme-store/class-name-theme-store.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"class-name-theme-store.d.cts","names":[],"sources":["../../../../src/theme/theme-store/class-name-theme-store/class-name-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;;AAyBA;;;;;;;;;;;;;;iBAAgB,mCAAmC,kBAC1C;YACc;IACpB,SAAS,WAAW"}
+{"version":3,"file":"class-name-theme-store.d.cts","names":[],"sources":["../../../../src/theme/theme-store/class-name-theme-store/class-name-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;;;AA6BA;;;;;;;;;;;;;;;;iBAAgB,mCAAmC,kBAC1C;YAEG;UACF,iBAAiB;cACb,qBAAqB;IAEhC,SAAS,WAAW"}

package/dist/theme/theme-store/class-name-theme-store/class-name-theme-store.d.mts

@@ -1,4 +1,5 @@
 import { ThemeMap } from "../../theme-map.types.mjs";
+import { ParseStoredTheme, StringifyStoredTheme } from "../../theme-entry.types.mjs";
 import { ThemeStore } from "../theme-store.types.mjs";
 import { Required } from "type-plus";
 
@@ -8,7 +9,9 @@ import { Required } from "type-plus";
  * Creates a theme store that reads and writes via element class names.
  *
  * @param themes - Record mapping theme keys to class name(s)
- * @param options.element - Element to operate on (defaults to document.documentElement)
+ * @param options.element - Element to operate on (accepts null e.g. from refs). Defaults to document.documentElement.
+ * @param options.parse - Custom parser (default: parseClassName)
+ * @param options.stringify - Custom serializer (default: stringifyClassName)
  * @returns ThemeStore
  *
  * @example
@@ -21,7 +24,9 @@ import { Required } from "type-plus";
  * ```
  */
 declare function classNameThemeStore<Themes extends ThemeMap>(themes: Themes, options?: {
-  element?: Element | undefined;
+  element?: Element | null | undefined;
+  parse?: ParseStoredTheme<Themes> | undefined;
+  stringify?: StringifyStoredTheme<Themes> | undefined;
 }): Required<ThemeStore<Themes>>;
 //#endregion
 export { classNameThemeStore };

package/dist/theme/theme-store/class-name-theme-store/class-name-theme-store.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"class-name-theme-store.d.mts","names":[],"sources":["../../../../src/theme/theme-store/class-name-theme-store/class-name-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;;AAyBA;;;;;;;;;;;;;;iBAAgB,mCAAmC,kBAC1C;YACc;IACpB,SAAS,WAAW"}
+{"version":3,"file":"class-name-theme-store.d.mts","names":[],"sources":["../../../../src/theme/theme-store/class-name-theme-store/class-name-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;;;AA6BA;;;;;;;;;;;;;;;;iBAAgB,mCAAmC,kBAC1C;YAEG;UACF,iBAAiB;cACb,qBAAqB;IAEhC,SAAS,WAAW"}

package/dist/theme/theme-store/class-name-theme-store/class-name-theme-store.mjs

@@ -1,15 +1,18 @@
-import { observeAttributes } from "../../../attributes/observe-attribute.mjs";
-import { resolveThemeFromClassName } from "../../class-name/resolve-theme-from-class-name.mjs";
-import { themeEntry } from "../../theme-entry.mjs";
 import { dummyThemeStore } from "../../../testing/theme/dummy-theme-store.mjs";
-import { applyThemeToClassName } from "../../class-name/apply-theme-to-class-name.mjs";
+import { parseClassName } from "../../class-name/parse-class-name.mjs";
+import { readClassName } from "../../class-name/read-class-name.mjs";
+import { stringifyClassName } from "../../class-name/stringify-class-name.mjs";
+import { subscribeClassName } from "../../class-name/subscribe-class-name.mjs";
+import { writeClassName } from "../../class-name/write-class-name.mjs";
 
 //#region src/theme/theme-store/class-name-theme-store/class-name-theme-store.ts
 /**
 * Creates a theme store that reads and writes via element class names.
 *
 * @param themes - Record mapping theme keys to class name(s)
-* @param options.element - Element to operate on (defaults to document.documentElement)
+* @param options.element - Element to operate on (accepts null e.g. from refs). Defaults to document.documentElement.
+* @param options.parse - Custom parser (default: parseClassName)
+* @param options.stringify - Custom serializer (default: stringifyClassName)
 * @returns ThemeStore
 *
 * @example
@@ -24,26 +27,26 @@ import { applyThemeToClassName } from "../../class-name/apply-theme-to-class-nam
 function classNameThemeStore(themes, options) {
 	const element = options?.element ?? document?.documentElement;
 	if (!element) return dummyThemeStore;
+	const parse = options?.parse ?? parseClassName;
+	const stringify = options?.stringify ?? stringifyClassName;
 	return {
 		read() {
-			const theme = resolveThemeFromClassName(themes, element.className);
-			if (theme === void 0) return void 0;
-			return themeEntry(themes, theme);
+			return readClassName(themes, {
+				element,
+				parse
+			});
 		},
 		write(entry) {
-			applyThemeToClassName(themes, element, entry);
+			writeClassName(themes, entry, {
+				element,
+				stringify
+			});
 		},
 		subscribe(handler) {
-			let lastEmitted = null;
-			const observer = observeAttributes({ class: (value) => {
-				const theme = value ? resolveThemeFromClassName(themes, value) : void 0;
-				const entry = theme ? themeEntry(themes, theme) : void 0;
-				const key = theme ?? void 0;
-				if (lastEmitted === key) return;
-				lastEmitted = key;
-				handler(entry);
-			} }, element);
-			return () => observer.disconnect();
+			return subscribeClassName(themes, handler, {
+				element,
+				parse
+			});
 		}
 	};
 }

package/dist/theme/theme-store/class-name-theme-store/class-name-theme-store.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"class-name-theme-store.mjs","names":["lastEmitted: keyof Themes | undefined | null"],"sources":["../../../../src/theme/theme-store/class-name-theme-store/class-name-theme-store.ts"],"sourcesContent":["import type { Required } from 'type-plus'\nimport { observeAttributes } from '../../../attributes/observe-attribute.ts'\nimport { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'\nimport { applyThemeToClassName } from '../../class-name/apply-theme-to-class-name.ts'\nimport { resolveThemeFromClassName } from '../../class-name/resolve-theme-from-class-name.ts'\nimport { themeEntry } from '../../theme-entry.ts'\nimport type { ThemeMap } from '../../theme-map.types.ts'\nimport type { ThemeStore } from '../theme-store.types.ts'\n\n/**\n * Creates a theme store that reads and writes via element class names.\n *\n * @param themes - Record mapping theme keys to class name(s)\n * @param options.element - Element to operate on (defaults to document.documentElement)\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'theme-current', grayscale: 'theme-grayscale' }\n * const store = classNameThemeStore(themes)\n * store.read() // returns themeResult from element.className\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function classNameThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions?: { element?: Element | undefined }\n): Required<ThemeStore<Themes>> {\n\tconst element = options?.element ?? document?.documentElement\n\n\tif (!element) return dummyThemeStore\n\n\treturn {\n\t\tread() {\n\t\t\tconst theme = resolveThemeFromClassName(themes, element.className)\n\t\t\tif (theme === undefined) return undefined\n\t\t\treturn themeEntry(themes, theme)\n\t\t},\n\t\twrite(entry) {\n\t\t\tapplyThemeToClassName(themes, element, entry)\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\tlet lastEmitted: keyof Themes | undefined | null = null\n\t\t\tconst observer = observeAttributes(\n\t\t\t\t{\n\t\t\t\t\tclass: (value) => {\n\t\t\t\t\t\tconst theme = value ? resolveThemeFromClassName(themes, value) : undefined\n\t\t\t\t\t\tconst entry = theme ? themeEntry(themes, theme) : undefined\n\t\t\t\t\t\tconst key = theme ?? undefined\n\n\t\t\t\t\t\tif (lastEmitted === key) return\n\t\t\t\t\t\tlastEmitted = key\n\t\t\t\t\t\thandler(entry)\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\telement\n\t\t\t)\n\t\t\treturn () => observer.disconnect()\n\t\t}\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,oBACf,QACA,SAC+B;CAC/B,MAAM,UAAU,SAAS,WAAW,UAAU;AAE9C,KAAI,CAAC,QAAS,QAAO;AAErB,QAAO;EACN,OAAO;GACN,MAAM,QAAQ,0BAA0B,QAAQ,QAAQ,UAAU;AAClE,OAAI,UAAU,OAAW,QAAO;AAChC,UAAO,WAAW,QAAQ,MAAM;;EAEjC,MAAM,OAAO;AACZ,yBAAsB,QAAQ,SAAS,MAAM;;EAE9C,UAAU,SAAS;GAClB,IAAIA,cAA+C;GACnD,MAAM,WAAW,kBAChB,EACC,QAAQ,UAAU;IACjB,MAAM,QAAQ,QAAQ,0BAA0B,QAAQ,MAAM,GAAG;IACjE,MAAM,QAAQ,QAAQ,WAAW,QAAQ,MAAM,GAAG;IAClD,MAAM,MAAM,SAAS;AAErB,QAAI,gBAAgB,IAAK;AACzB,kBAAc;AACd,YAAQ,MAAM;MAEf,EACD,QACA;AACD,gBAAa,SAAS,YAAY;;EAEnC"}
+{"version":3,"file":"class-name-theme-store.mjs","names":[],"sources":["../../../../src/theme/theme-store/class-name-theme-store/class-name-theme-store.ts"],"sourcesContent":["import type { Required } from 'type-plus'\nimport { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'\nimport { parseClassName } from '../../class-name/parse-class-name.ts'\nimport { readClassName } from '../../class-name/read-class-name.ts'\nimport { stringifyClassName } from '../../class-name/stringify-class-name.ts'\nimport { subscribeClassName } from '../../class-name/subscribe-class-name.ts'\nimport { writeClassName } from '../../class-name/write-class-name.ts'\nimport type { ParseStoredTheme, StringifyStoredTheme } from '../../theme-entry.types.ts'\nimport type { ThemeMap } from '../../theme-map.types.ts'\nimport type { ThemeStore } from '../theme-store.types.ts'\n\n/**\n * Creates a theme store that reads and writes via element class names.\n *\n * @param themes - Record mapping theme keys to class name(s)\n * @param options.element - Element to operate on (accepts null e.g. from refs). Defaults to document.documentElement.\n * @param options.parse - Custom parser (default: parseClassName)\n * @param options.stringify - Custom serializer (default: stringifyClassName)\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'theme-current', grayscale: 'theme-grayscale' }\n * const store = classNameThemeStore(themes)\n * store.read() // returns themeResult from element.className\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function classNameThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions?: {\n\t\telement?: Element | null | undefined\n\t\tparse?: ParseStoredTheme<Themes> | undefined\n\t\tstringify?: StringifyStoredTheme<Themes> | undefined\n\t}\n): Required<ThemeStore<Themes>> {\n\tconst element = options?.element ?? document?.documentElement\n\n\tif (!element) return dummyThemeStore\n\n\tconst parse = options?.parse ?? parseClassName\n\tconst stringify = options?.stringify ?? stringifyClassName\n\n\treturn {\n\t\tread() {\n\t\t\treturn readClassName(themes, { element, parse })\n\t\t},\n\t\twrite(entry) {\n\t\t\twriteClassName(themes, entry, { element, stringify })\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\treturn subscribeClassName(themes, handler, { element, parse })\n\t\t}\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,oBACf,QACA,SAK+B;CAC/B,MAAM,UAAU,SAAS,WAAW,UAAU;AAE9C,KAAI,CAAC,QAAS,QAAO;CAErB,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,YAAY,SAAS,aAAa;AAExC,QAAO;EACN,OAAO;AACN,UAAO,cAAc,QAAQ;IAAE;IAAS;IAAO,CAAC;;EAEjD,MAAM,OAAO;AACZ,kBAAe,QAAQ,OAAO;IAAE;IAAS;IAAW,CAAC;;EAEtD,UAAU,SAAS;AAClB,UAAO,mBAAmB,QAAQ,SAAS;IAAE;IAAS;IAAO,CAAC;;EAE/D"}

package/dist/theme/theme-store/cookie-theme-store/cookie-theme-store.cjs

@@ -1,24 +1,10 @@
-const require_theme_entry = require('../../theme-entry.cjs');
 const require_dummy_theme_store = require('../../../testing/theme/dummy-theme-store.cjs');
 const require_parse_stored_theme = require('../../_utils/parse-stored-theme.cjs');
+const require__cookie_utils = require('../../cookie/_cookie-utils.cjs');
+const require_read_cookie_theme = require('../../cookie/read-cookie-theme.cjs');
+const require_write_cookie_theme = require('../../cookie/write-cookie-theme.cjs');
 
 //#region src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts
-function getCookieValue(name) {
-	if (typeof document === "undefined" || !document.cookie) return null;
-	const value = document.cookie.match(/* @__PURE__ */ new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))?.[1];
-	return value !== void 0 ? decodeURIComponent(value) : null;
-}
-function setCookie(name, value, options) {
-	const parts = [`${name}=${encodeURIComponent(value)}`];
-	parts.push(`path=${options.path ?? "/"}`);
-	if (options.maxAge !== void 0) parts.push(`max-age=${options.maxAge}`);
-	if (options.sameSite !== void 0) parts.push(`samesite=${options.sameSite}`);
-	if (options.secure) parts.push("secure");
-	document.cookie = parts.join("; ");
-}
-function deleteCookie(name, path = "/") {
-	document.cookie = `${name}=; path=${path}; max-age=0`;
-}
 /**
 * Creates a theme store backed by cookies.
 *
@@ -32,6 +18,7 @@ function deleteCookie(name, path = "/") {
 * @param options.maxAge - Cookie max-age in seconds
 * @param options.sameSite - Cookie sameSite attribute
 * @param options.secure - Cookie secure attribute
+* @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)
 * @returns ThemeStore
 *
 * @example
@@ -44,14 +31,16 @@ function deleteCookie(name, path = "/") {
 * ```
 */
 function cookieThemeStore(themes, options) {
-	const { cookieName, path = "/", maxAge, sameSite, secure } = options;
+	const { cookieName, path = "/", maxAge, sameSite, secure, parse = require_parse_stored_theme.parseStoredTheme } = options;
 	if (document.cookie === void 0) return require_dummy_theme_store.dummyThemeStore;
 	const handlers = /* @__PURE__ */ new Set();
 	let lastNotifiedKey = read()?.theme ?? void 0;
 	function read() {
-		const theme = require_parse_stored_theme.parseStoredTheme(themes, getCookieValue(cookieName));
-		if (theme === void 0) return void 0;
-		return require_theme_entry.themeEntry(themes, theme);
+		return require_read_cookie_theme.readCookieTheme(themes, {
+			cookieName,
+			path,
+			parse
+		});
 	}
 	function notify() {
 		const result = read();
@@ -64,14 +53,13 @@ function cookieThemeStore(themes, options) {
 		read,
 		write(entry) {
 			try {
-				if (entry === void 0) deleteCookie(cookieName, path);
-				else {
-					const opts = { path };
-					if (maxAge !== void 0) opts.maxAge = maxAge;
-					if (sameSite !== void 0) opts.sameSite = sameSite;
-					if (secure) opts.secure = true;
-					setCookie(cookieName, JSON.stringify(entry), opts);
-				}
+				require_write_cookie_theme.writeCookieTheme(themes, entry, {
+					cookieName,
+					path,
+					maxAge,
+					sameSite,
+					secure
+				});
 				notify();
 			} catch {}
 		},
@@ -83,10 +71,6 @@ function cookieThemeStore(themes, options) {
 		}
 	};
 }
-function getCookieFromHeader(cookieHeader, name) {
-	const value = cookieHeader.match(/* @__PURE__ */ new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))?.[1];
-	return value !== void 0 ? decodeURIComponent(value.trim()) : null;
-}
 /**
 * Reads the theme from cookies during SSR. Use with the request's Cookie header or
 * a framework's cookie API (e.g. Next.js cookies()).
@@ -110,9 +94,7 @@ function getCookieFromHeader(cookieHeader, name) {
 */
 function getThemeFromCookie(cookieSource, themes, options = {}) {
 	const cookieName = options.cookieName ?? "theme";
-	const theme = require_parse_stored_theme.parseStoredTheme(themes, typeof cookieSource === "function" ? cookieSource(cookieName) ?? null : cookieSource ? getCookieFromHeader(cookieSource, cookieName) : null);
-	if (theme === void 0) return void 0;
-	return require_theme_entry.themeEntry(themes, theme);
+	return require_parse_stored_theme.parseStoredTheme(themes, (typeof cookieSource === "function" ? cookieSource(cookieName) ?? null : cookieSource ? require__cookie_utils.getCookieFromHeader(cookieSource, cookieName) : null) ?? void 0);
 }
 
 //#endregion

package/dist/theme/theme-store/cookie-theme-store/cookie-theme-store.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-theme-store.cjs","names":["dummyThemeStore","lastNotifiedKey: keyof Themes | undefined","parseStoredTheme","themeEntry","opts: {\n\t\t\t\t\t\tpath: string\n\t\t\t\t\t\tmaxAge?: number\n\t\t\t\t\t\tsameSite?: 'lax' | 'strict' | 'none'\n\t\t\t\t\t\tsecure?: boolean\n\t\t\t\t\t}"],"sources":["../../../../src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts"],"sourcesContent":["import type { Required } from 'type-plus'\nimport { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'\nimport { parseStoredTheme } from '../../_utils/parse-stored-theme.ts'\nimport { themeEntry } from '../../theme-entry.ts'\nimport type { ThemeEntry } from '../../theme-entry.types.ts'\nimport type { ThemeMap } from '../../theme-map.types.ts'\nimport type { ThemeStore } from '../theme-store.types.ts'\n\nexport interface CookieThemeStoreOptions {\n\tcookieName: string\n\tpath?: string | undefined\n\tmaxAge?: number | undefined\n\tsameSite?: 'lax' | 'strict' | 'none' | undefined\n\tsecure?: boolean | undefined\n}\n\nfunction getCookieValue(name: string): string | null {\n\tif (typeof document === 'undefined' || !document.cookie) return null\n\tconst match = document.cookie.match(new RegExp(`(?:^|;\\\\s*)${name}=([^;]*)`))\n\tconst value = match?.[1]\n\treturn value !== undefined ? decodeURIComponent(value) : null\n}\n\nfunction setCookie(\n\tname: string,\n\tvalue: string,\n\toptions: {\n\t\tpath?: string | undefined\n\t\tmaxAge?: number | undefined\n\t\tsameSite?: 'lax' | 'strict' | 'none' | undefined\n\t\tsecure?: boolean | undefined\n\t}\n) {\n\tconst parts = [`${name}=${encodeURIComponent(value)}`]\n\tparts.push(`path=${options.path ?? '/'}`)\n\tif (options.maxAge !== undefined) parts.push(`max-age=${options.maxAge}`)\n\tif (options.sameSite !== undefined) parts.push(`samesite=${options.sameSite}`)\n\tif (options.secure) parts.push('secure')\n\t// biome-ignore lint/suspicious/noDocumentCookie: Cookie Store API has limited support; document.cookie is standard for theme persistence\n\tdocument.cookie = parts.join('; ')\n}\n\nfunction deleteCookie(name: string, path = '/') {\n\t// biome-ignore lint/suspicious/noDocumentCookie: Cookie Store API has limited support; document.cookie is standard for theme persistence\n\tdocument.cookie = `${name}=; path=${path}; max-age=0`\n}\n\n/**\n * Creates a theme store backed by cookies.\n *\n * Persists across sessions. Cookies are sent with every request, so the server can\n * read the theme during SSR to avoid flash of wrong theme. Cross-tab sync is not\n * supported (cookies have no StorageEvent).\n *\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options.cookieName - Cookie name for theme storage\n * @param options.path - Cookie path (default: '/')\n * @param options.maxAge - Cookie max-age in seconds\n * @param options.sameSite - Cookie sameSite attribute\n * @param options.secure - Cookie secure attribute\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'theme-current', grayscale: 'theme-grayscale' }\n * const store = cookieThemeStore(themes, { cookieName: 'theme' })\n * store.read()\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function cookieThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: CookieThemeStoreOptions\n): Required<ThemeStore<Themes>> {\n\tconst { cookieName, path = '/', maxAge, sameSite, secure } = options\n\n\tif (document.cookie === undefined) {\n\t\treturn dummyThemeStore\n\t}\n\n\tconst handlers = new Set<(theme: ThemeEntry<Themes> | undefined) => void>()\n\tlet lastNotifiedKey: keyof Themes | undefined = read()?.theme ?? undefined\n\n\tfunction read() {\n\t\tconst stored = getCookieValue(cookieName)\n\t\tconst theme = parseStoredTheme(themes, stored)\n\t\tif (theme === undefined) return undefined\n\t\treturn themeEntry(themes, theme)\n\t}\n\n\tfunction notify() {\n\t\tconst result = read()\n\t\tconst key = result?.theme ?? undefined\n\t\tif (key === lastNotifiedKey) return\n\t\tlastNotifiedKey = key\n\t\tfor (const h of handlers) h(result)\n\t}\n\n\treturn {\n\t\tread,\n\t\twrite(entry) {\n\t\t\ttry {\n\t\t\t\tif (entry === undefined) {\n\t\t\t\t\tdeleteCookie(cookieName, path)\n\t\t\t\t} else {\n\t\t\t\t\tconst opts: {\n\t\t\t\t\t\tpath: string\n\t\t\t\t\t\tmaxAge?: number\n\t\t\t\t\t\tsameSite?: 'lax' | 'strict' | 'none'\n\t\t\t\t\t\tsecure?: boolean\n\t\t\t\t\t} = { path }\n\t\t\t\t\tif (maxAge !== undefined) opts.maxAge = maxAge\n\t\t\t\t\tif (sameSite !== undefined) opts.sameSite = sameSite\n\t\t\t\t\tif (secure) opts.secure = true\n\t\t\t\t\tsetCookie(cookieName, JSON.stringify(entry), opts)\n\t\t\t\t}\n\t\t\t\tnotify()\n\t\t\t} catch {\n\t\t\t\t// Ignore quota or other errors\n\t\t\t}\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\thandlers.add(handler)\n\t\t\treturn () => {\n\t\t\t\thandlers.delete(handler)\n\t\t\t}\n\t\t}\n\t} satisfies ThemeStore<Themes>\n}\n\nfunction getCookieFromHeader(cookieHeader: string, name: string): string | null {\n\tconst match = cookieHeader.match(new RegExp(`(?:^|;\\\\s*)${name}=([^;]*)`))\n\tconst value = match?.[1]\n\treturn value !== undefined ? decodeURIComponent(value.trim()) : null\n}\n\n/**\n * Reads the theme from cookies during SSR. Use with the request's Cookie header or\n * a framework's cookie API (e.g. Next.js cookies()).\n *\n * @param cookieSource - Raw Cookie header string, or a getter (name) => value for framework APIs\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options - Optional cookie name (default: 'theme')\n * @returns ThemeEntry if valid cookie found, otherwise undefined\n *\n * @example\n * ```ts\n * // With raw Cookie header (Express, Remix, etc.)\n * const theme = getThemeFromCookie(request.headers.get('Cookie') ?? '', themes)\n *\n * // With Next.js cookies()\n * const theme = getThemeFromCookie(\n *   (name) => cookies().get(name)?.value ?? undefined,\n *   themes\n * )\n * ```\n */\nexport function getThemeFromCookie<Themes extends ThemeMap>(\n\tcookieSource: string | null | undefined | ((name: string) => string | null | undefined),\n\tthemes: Themes,\n\toptions: { cookieName?: string | undefined } = {}\n): ThemeEntry<Themes> | undefined {\n\tconst cookieName = options.cookieName ?? 'theme'\n\tconst stored =\n\t\ttypeof cookieSource === 'function'\n\t\t\t? (cookieSource(cookieName) ?? null)\n\t\t\t: cookieSource\n\t\t\t\t? getCookieFromHeader(cookieSource, cookieName)\n\t\t\t\t: null\n\tconst theme = parseStoredTheme(themes, stored)\n\tif (theme === undefined) return undefined\n\treturn themeEntry(themes, theme)\n}\n"],"mappings":";;;;;AAgBA,SAAS,eAAe,MAA6B;AACpD,KAAI,OAAO,aAAa,eAAe,CAAC,SAAS,OAAQ,QAAO;CAEhE,MAAM,QADQ,SAAS,OAAO,sBAAM,IAAI,OAAO,cAAc,KAAK,UAAU,CAAC,GACvD;AACtB,QAAO,UAAU,SAAY,mBAAmB,MAAM,GAAG;;AAG1D,SAAS,UACR,MACA,OACA,SAMC;CACD,MAAM,QAAQ,CAAC,GAAG,KAAK,GAAG,mBAAmB,MAAM,GAAG;AACtD,OAAM,KAAK,QAAQ,QAAQ,QAAQ,MAAM;AACzC,KAAI,QAAQ,WAAW,OAAW,OAAM,KAAK,WAAW,QAAQ,SAAS;AACzE,KAAI,QAAQ,aAAa,OAAW,OAAM,KAAK,YAAY,QAAQ,WAAW;AAC9E,KAAI,QAAQ,OAAQ,OAAM,KAAK,SAAS;AAExC,UAAS,SAAS,MAAM,KAAK,KAAK;;AAGnC,SAAS,aAAa,MAAc,OAAO,KAAK;AAE/C,UAAS,SAAS,GAAG,KAAK,UAAU,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B1C,SAAgB,iBACf,QACA,SAC+B;CAC/B,MAAM,EAAE,YAAY,OAAO,KAAK,QAAQ,UAAU,WAAW;AAE7D,KAAI,SAAS,WAAW,OACvB,QAAOA;CAGR,MAAM,2BAAW,IAAI,KAAsD;CAC3E,IAAIC,kBAA4C,MAAM,EAAE,SAAS;CAEjE,SAAS,OAAO;EAEf,MAAM,QAAQC,4CAAiB,QADhB,eAAe,WAAW,CACK;AAC9C,MAAI,UAAU,OAAW,QAAO;AAChC,SAAOC,+BAAW,QAAQ,MAAM;;CAGjC,SAAS,SAAS;EACjB,MAAM,SAAS,MAAM;EACrB,MAAM,MAAM,QAAQ,SAAS;AAC7B,MAAI,QAAQ,gBAAiB;AAC7B,oBAAkB;AAClB,OAAK,MAAM,KAAK,SAAU,GAAE,OAAO;;AAGpC,QAAO;EACN;EACA,MAAM,OAAO;AACZ,OAAI;AACH,QAAI,UAAU,OACb,cAAa,YAAY,KAAK;SACxB;KACN,MAAMC,OAKF,EAAE,MAAM;AACZ,SAAI,WAAW,OAAW,MAAK,SAAS;AACxC,SAAI,aAAa,OAAW,MAAK,WAAW;AAC5C,SAAI,OAAQ,MAAK,SAAS;AAC1B,eAAU,YAAY,KAAK,UAAU,MAAM,EAAE,KAAK;;AAEnD,YAAQ;WACD;;EAIT,UAAU,SAAS;AAClB,YAAS,IAAI,QAAQ;AACrB,gBAAa;AACZ,aAAS,OAAO,QAAQ;;;EAG1B;;AAGF,SAAS,oBAAoB,cAAsB,MAA6B;CAE/E,MAAM,QADQ,aAAa,sBAAM,IAAI,OAAO,cAAc,KAAK,UAAU,CAAC,GACpD;AACtB,QAAO,UAAU,SAAY,mBAAmB,MAAM,MAAM,CAAC,GAAG;;;;;;;;;;;;;;;;;;;;;;;AAwBjE,SAAgB,mBACf,cACA,QACA,UAA+C,EAAE,EAChB;CACjC,MAAM,aAAa,QAAQ,cAAc;CAOzC,MAAM,QAAQF,4CAAiB,QAL9B,OAAO,iBAAiB,aACpB,aAAa,WAAW,IAAI,OAC7B,eACC,oBAAoB,cAAc,WAAW,GAC7C,KACyC;AAC9C,KAAI,UAAU,OAAW,QAAO;AAChC,QAAOC,+BAAW,QAAQ,MAAM"}
+{"version":3,"file":"cookie-theme-store.cjs","names":["parseStoredTheme","dummyThemeStore","lastNotifiedKey: keyof Themes | undefined","readCookieTheme","getCookieFromHeader"],"sources":["../../../../src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts"],"sourcesContent":["import type { Required } from 'type-plus'\nimport { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'\nimport { parseStoredTheme } from '../../_utils/parse-stored-theme.ts'\nimport { getCookieFromHeader } from '../../cookie/_cookie-utils.ts'\nimport { readCookieTheme } from '../../cookie/read-cookie-theme.ts'\nimport { writeCookieTheme } from '../../cookie/write-cookie-theme.ts'\nimport type { ParseStoredTheme, ThemeEntry } from '../../theme-entry.types.ts'\nimport type { ThemeMap } from '../../theme-map.types.ts'\nimport type { ThemeStore } from '../theme-store.types.ts'\n\nexport interface CookieThemeStoreOptions<Themes extends ThemeMap = ThemeMap> {\n\tcookieName: string\n\tpath?: string | undefined\n\tmaxAge?: number | undefined\n\tsameSite?: 'lax' | 'strict' | 'none' | undefined\n\tsecure?: boolean | undefined\n\tparse?: ParseStoredTheme<Themes> | undefined\n}\n\n/**\n * Creates a theme store backed by cookies.\n *\n * Persists across sessions. Cookies are sent with every request, so the server can\n * read the theme during SSR to avoid flash of wrong theme. Cross-tab sync is not\n * supported (cookies have no StorageEvent).\n *\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options.cookieName - Cookie name for theme storage\n * @param options.path - Cookie path (default: '/')\n * @param options.maxAge - Cookie max-age in seconds\n * @param options.sameSite - Cookie sameSite attribute\n * @param options.secure - Cookie secure attribute\n * @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'theme-current', grayscale: 'theme-grayscale' }\n * const store = cookieThemeStore(themes, { cookieName: 'theme' })\n * store.read()\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function cookieThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: CookieThemeStoreOptions<Themes>\n): Required<ThemeStore<Themes>> {\n\tconst { cookieName, path = '/', maxAge, sameSite, secure, parse = parseStoredTheme } = options\n\n\tif (document.cookie === undefined) {\n\t\treturn dummyThemeStore\n\t}\n\n\tconst handlers = new Set<(theme: ThemeEntry<Themes> | undefined) => void>()\n\tlet lastNotifiedKey: keyof Themes | undefined = read()?.theme ?? undefined\n\n\tfunction read() {\n\t\treturn readCookieTheme(themes, { cookieName, path, parse })\n\t}\n\n\tfunction notify() {\n\t\tconst result = read()\n\t\tconst key = result?.theme ?? undefined\n\t\tif (key === lastNotifiedKey) return\n\t\tlastNotifiedKey = key\n\t\tfor (const h of handlers) h(result)\n\t}\n\n\treturn {\n\t\tread,\n\t\twrite(entry) {\n\t\t\ttry {\n\t\t\t\twriteCookieTheme(themes, entry, {\n\t\t\t\t\tcookieName,\n\t\t\t\t\tpath,\n\t\t\t\t\tmaxAge,\n\t\t\t\t\tsameSite,\n\t\t\t\t\tsecure\n\t\t\t\t})\n\t\t\t\tnotify()\n\t\t\t} catch {\n\t\t\t\t// Ignore quota or other errors\n\t\t\t}\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\thandlers.add(handler)\n\t\t\treturn () => {\n\t\t\t\thandlers.delete(handler)\n\t\t\t}\n\t\t}\n\t} satisfies ThemeStore<Themes>\n}\n\n/**\n * Reads the theme from cookies during SSR. Use with the request's Cookie header or\n * a framework's cookie API (e.g. Next.js cookies()).\n *\n * @param cookieSource - Raw Cookie header string, or a getter (name) => value for framework APIs\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options - Optional cookie name (default: 'theme')\n * @returns ThemeEntry if valid cookie found, otherwise undefined\n *\n * @example\n * ```ts\n * // With raw Cookie header (Express, Remix, etc.)\n * const theme = getThemeFromCookie(request.headers.get('Cookie') ?? '', themes)\n *\n * // With Next.js cookies()\n * const theme = getThemeFromCookie(\n *   (name) => cookies().get(name)?.value ?? undefined,\n *   themes\n * )\n * ```\n */\nexport function getThemeFromCookie<Themes extends ThemeMap>(\n\tcookieSource: string | null | undefined | ((name: string) => string | null | undefined),\n\tthemes: Themes,\n\toptions: { cookieName?: string | undefined } = {}\n): ThemeEntry<Themes> | undefined {\n\tconst cookieName = options.cookieName ?? 'theme'\n\tconst stored =\n\t\ttypeof cookieSource === 'function'\n\t\t\t? (cookieSource(cookieName) ?? null)\n\t\t\t: cookieSource\n\t\t\t\t? getCookieFromHeader(cookieSource, cookieName)\n\t\t\t\t: null\n\treturn parseStoredTheme(themes, stored ?? undefined)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,SAAgB,iBACf,QACA,SAC+B;CAC/B,MAAM,EAAE,YAAY,OAAO,KAAK,QAAQ,UAAU,QAAQ,QAAQA,gDAAqB;AAEvF,KAAI,SAAS,WAAW,OACvB,QAAOC;CAGR,MAAM,2BAAW,IAAI,KAAsD;CAC3E,IAAIC,kBAA4C,MAAM,EAAE,SAAS;CAEjE,SAAS,OAAO;AACf,SAAOC,0CAAgB,QAAQ;GAAE;GAAY;GAAM;GAAO,CAAC;;CAG5D,SAAS,SAAS;EACjB,MAAM,SAAS,MAAM;EACrB,MAAM,MAAM,QAAQ,SAAS;AAC7B,MAAI,QAAQ,gBAAiB;AAC7B,oBAAkB;AAClB,OAAK,MAAM,KAAK,SAAU,GAAE,OAAO;;AAGpC,QAAO;EACN;EACA,MAAM,OAAO;AACZ,OAAI;AACH,gDAAiB,QAAQ,OAAO;KAC/B;KACA;KACA;KACA;KACA;KACA,CAAC;AACF,YAAQ;WACD;;EAIT,UAAU,SAAS;AAClB,YAAS,IAAI,QAAQ;AACrB,gBAAa;AACZ,aAAS,OAAO,QAAQ;;;EAG1B;;;;;;;;;;;;;;;;;;;;;;;AAwBF,SAAgB,mBACf,cACA,QACA,UAA+C,EAAE,EAChB;CACjC,MAAM,aAAa,QAAQ,cAAc;AAOzC,QAAOH,4CAAiB,SALvB,OAAO,iBAAiB,aACpB,aAAa,WAAW,IAAI,OAC7B,eACCI,0CAAoB,cAAc,WAAW,GAC7C,SACqC,OAAU"}

package/dist/theme/theme-store/cookie-theme-store/cookie-theme-store.d.cts

@@ -1,15 +1,16 @@
 import { ThemeMap } from "../../theme-map.types.cjs";
-import { ThemeEntry } from "../../theme-entry.types.cjs";
+import { ParseStoredTheme, ThemeEntry } from "../../theme-entry.types.cjs";
 import { ThemeStore } from "../theme-store.types.cjs";
 import { Required } from "type-plus";
 
 //#region src/theme/theme-store/cookie-theme-store/cookie-theme-store.d.ts
-interface CookieThemeStoreOptions {
+interface CookieThemeStoreOptions<Themes extends ThemeMap = ThemeMap> {
   cookieName: string;
   path?: string | undefined;
   maxAge?: number | undefined;
   sameSite?: 'lax' | 'strict' | 'none' | undefined;
   secure?: boolean | undefined;
+  parse?: ParseStoredTheme<Themes> | undefined;
 }
 /**
  * Creates a theme store backed by cookies.
@@ -24,6 +25,7 @@ interface CookieThemeStoreOptions {
  * @param options.maxAge - Cookie max-age in seconds
  * @param options.sameSite - Cookie sameSite attribute
  * @param options.secure - Cookie secure attribute
+ * @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)
  * @returns ThemeStore
  *
  * @example
@@ -35,7 +37,7 @@ interface CookieThemeStoreOptions {
  * store.subscribe((themeResult) => {})
  * ```
  */
-declare function cookieThemeStore<Themes extends ThemeMap>(themes: Themes, options: CookieThemeStoreOptions): Required<ThemeStore<Themes>>;
+declare function cookieThemeStore<Themes extends ThemeMap>(themes: Themes, options: CookieThemeStoreOptions<Themes>): Required<ThemeStore<Themes>>;
 /**
  * Reads the theme from cookies during SSR. Use with the request's Cookie header or
  * a framework's cookie API (e.g. Next.js cookies()).

package/dist/theme/theme-store/cookie-theme-store/cookie-theme-store.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-theme-store.d.cts","names":[],"sources":["../../../../src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;UAQiB,uBAAA;;EAAA,IAAA,CAAA,EAAA,MAAA,GAAA,SAAA;EA+DD,MAAA,CAAA,EAAA,MAAA,GAAA,SAAgB;EAAgB,QAAA,CAAA,EAAA,KAAA,GAAA,QAAA,GAAA,MAAA,GAAA,SAAA;EACvC,MAAA,CAAA,EAAA,OAAA,GAAA,SAAA;;;;;;AAsFT;;;;;;;;;;;;;;;;;;;;iBAvFgB,gCAAgC,kBACvC,iBACC,0BACP,SAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;iBAoFP,kCAAkC,2GAEzC;;IAEN,WAAW"}
+{"version":3,"file":"cookie-theme-store.d.cts","names":[],"sources":["../../../../src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;UAUiB,uCAAuC,WAAW;;EAAlD,IAAA,CAAA,EAAA,MAAA,GAAA,SAAA;EAAuC,MAAA,CAAA,EAAA,MAAA,GAAA,SAAA;EAAW,QAAA,CAAA,EAAA,KAAA,GAAA,QAAA,GAAA,MAAA,GAAA,SAAA;EAMzC,MAAA,CAAA,EAAA,OAAA,GAAA,SAAA;EAAjB,KAAA,CAAA,EAAA,gBAAA,CAAiB,MAAjB,CAAA,GAAA,SAAA;;AA4BT;;;;;;;;;AAuEA;;;;;;;;;;;;;;;;iBAvEgB,gCAAgC,kBACvC,iBACC,wBAAwB,UAC/B,SAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;iBAoEP,kCAAkC,2GAEzC;;IAEN,WAAW"}

package/dist/theme/theme-store/cookie-theme-store/cookie-theme-store.d.mts

@@ -1,15 +1,16 @@
 import { ThemeMap } from "../../theme-map.types.mjs";
-import { ThemeEntry } from "../../theme-entry.types.mjs";
+import { ParseStoredTheme, ThemeEntry } from "../../theme-entry.types.mjs";
 import { ThemeStore } from "../theme-store.types.mjs";
 import { Required } from "type-plus";
 
 //#region src/theme/theme-store/cookie-theme-store/cookie-theme-store.d.ts
-interface CookieThemeStoreOptions {
+interface CookieThemeStoreOptions<Themes extends ThemeMap = ThemeMap> {
   cookieName: string;
   path?: string | undefined;
   maxAge?: number | undefined;
   sameSite?: 'lax' | 'strict' | 'none' | undefined;
   secure?: boolean | undefined;
+  parse?: ParseStoredTheme<Themes> | undefined;
 }
 /**
  * Creates a theme store backed by cookies.
@@ -24,6 +25,7 @@ interface CookieThemeStoreOptions {
  * @param options.maxAge - Cookie max-age in seconds
  * @param options.sameSite - Cookie sameSite attribute
  * @param options.secure - Cookie secure attribute
+ * @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)
  * @returns ThemeStore
  *
  * @example
@@ -35,7 +37,7 @@ interface CookieThemeStoreOptions {
  * store.subscribe((themeResult) => {})
  * ```
  */
-declare function cookieThemeStore<Themes extends ThemeMap>(themes: Themes, options: CookieThemeStoreOptions): Required<ThemeStore<Themes>>;
+declare function cookieThemeStore<Themes extends ThemeMap>(themes: Themes, options: CookieThemeStoreOptions<Themes>): Required<ThemeStore<Themes>>;
 /**
  * Reads the theme from cookies during SSR. Use with the request's Cookie header or
  * a framework's cookie API (e.g. Next.js cookies()).

package/dist/theme/theme-store/cookie-theme-store/cookie-theme-store.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-theme-store.d.mts","names":[],"sources":["../../../../src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;UAQiB,uBAAA;;EAAA,IAAA,CAAA,EAAA,MAAA,GAAA,SAAA;EA+DD,MAAA,CAAA,EAAA,MAAA,GAAA,SAAgB;EAAgB,QAAA,CAAA,EAAA,KAAA,GAAA,QAAA,GAAA,MAAA,GAAA,SAAA;EACvC,MAAA,CAAA,EAAA,OAAA,GAAA,SAAA;;;;;;AAsFT;;;;;;;;;;;;;;;;;;;;iBAvFgB,gCAAgC,kBACvC,iBACC,0BACP,SAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;iBAoFP,kCAAkC,2GAEzC;;IAEN,WAAW"}
+{"version":3,"file":"cookie-theme-store.d.mts","names":[],"sources":["../../../../src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;UAUiB,uCAAuC,WAAW;;EAAlD,IAAA,CAAA,EAAA,MAAA,GAAA,SAAA;EAAuC,MAAA,CAAA,EAAA,MAAA,GAAA,SAAA;EAAW,QAAA,CAAA,EAAA,KAAA,GAAA,QAAA,GAAA,MAAA,GAAA,SAAA;EAMzC,MAAA,CAAA,EAAA,OAAA,GAAA,SAAA;EAAjB,KAAA,CAAA,EAAA,gBAAA,CAAiB,MAAjB,CAAA,GAAA,SAAA;;AA4BT;;;;;;;;;AAuEA;;;;;;;;;;;;;;;;iBAvEgB,gCAAgC,kBACvC,iBACC,wBAAwB,UAC/B,SAAS,WAAW;;;;;;;;;;;;;;;;;;;;;;iBAoEP,kCAAkC,2GAEzC;;IAEN,WAAW"}

package/dist/theme/theme-store/cookie-theme-store/cookie-theme-store.mjs

@@ -1,24 +1,10 @@
-import { themeEntry } from "../../theme-entry.mjs";
 import { dummyThemeStore } from "../../../testing/theme/dummy-theme-store.mjs";
 import { parseStoredTheme } from "../../_utils/parse-stored-theme.mjs";
+import { getCookieFromHeader } from "../../cookie/_cookie-utils.mjs";
+import { readCookieTheme } from "../../cookie/read-cookie-theme.mjs";
+import { writeCookieTheme } from "../../cookie/write-cookie-theme.mjs";
 
 //#region src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts
-function getCookieValue(name) {
-	if (typeof document === "undefined" || !document.cookie) return null;
-	const value = document.cookie.match(/* @__PURE__ */ new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))?.[1];
-	return value !== void 0 ? decodeURIComponent(value) : null;
-}
-function setCookie(name, value, options) {
-	const parts = [`${name}=${encodeURIComponent(value)}`];
-	parts.push(`path=${options.path ?? "/"}`);
-	if (options.maxAge !== void 0) parts.push(`max-age=${options.maxAge}`);
-	if (options.sameSite !== void 0) parts.push(`samesite=${options.sameSite}`);
-	if (options.secure) parts.push("secure");
-	document.cookie = parts.join("; ");
-}
-function deleteCookie(name, path = "/") {
-	document.cookie = `${name}=; path=${path}; max-age=0`;
-}
 /**
 * Creates a theme store backed by cookies.
 *
@@ -32,6 +18,7 @@ function deleteCookie(name, path = "/") {
 * @param options.maxAge - Cookie max-age in seconds
 * @param options.sameSite - Cookie sameSite attribute
 * @param options.secure - Cookie secure attribute
+* @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)
 * @returns ThemeStore
 *
 * @example
@@ -44,14 +31,16 @@ function deleteCookie(name, path = "/") {
 * ```
 */
 function cookieThemeStore(themes, options) {
-	const { cookieName, path = "/", maxAge, sameSite, secure } = options;
+	const { cookieName, path = "/", maxAge, sameSite, secure, parse = parseStoredTheme } = options;
 	if (document.cookie === void 0) return dummyThemeStore;
 	const handlers = /* @__PURE__ */ new Set();
 	let lastNotifiedKey = read()?.theme ?? void 0;
 	function read() {
-		const theme = parseStoredTheme(themes, getCookieValue(cookieName));
-		if (theme === void 0) return void 0;
-		return themeEntry(themes, theme);
+		return readCookieTheme(themes, {
+			cookieName,
+			path,
+			parse
+		});
 	}
 	function notify() {
 		const result = read();
@@ -64,14 +53,13 @@ function cookieThemeStore(themes, options) {
 		read,
 		write(entry) {
 			try {
-				if (entry === void 0) deleteCookie(cookieName, path);
-				else {
-					const opts = { path };
-					if (maxAge !== void 0) opts.maxAge = maxAge;
-					if (sameSite !== void 0) opts.sameSite = sameSite;
-					if (secure) opts.secure = true;
-					setCookie(cookieName, JSON.stringify(entry), opts);
-				}
+				writeCookieTheme(themes, entry, {
+					cookieName,
+					path,
+					maxAge,
+					sameSite,
+					secure
+				});
 				notify();
 			} catch {}
 		},
@@ -83,10 +71,6 @@ function cookieThemeStore(themes, options) {
 		}
 	};
 }
-function getCookieFromHeader(cookieHeader, name) {
-	const value = cookieHeader.match(/* @__PURE__ */ new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))?.[1];
-	return value !== void 0 ? decodeURIComponent(value.trim()) : null;
-}
 /**
 * Reads the theme from cookies during SSR. Use with the request's Cookie header or
 * a framework's cookie API (e.g. Next.js cookies()).
@@ -110,9 +94,7 @@ function getCookieFromHeader(cookieHeader, name) {
 */
 function getThemeFromCookie(cookieSource, themes, options = {}) {
 	const cookieName = options.cookieName ?? "theme";
-	const theme = parseStoredTheme(themes, typeof cookieSource === "function" ? cookieSource(cookieName) ?? null : cookieSource ? getCookieFromHeader(cookieSource, cookieName) : null);
-	if (theme === void 0) return void 0;
-	return themeEntry(themes, theme);
+	return parseStoredTheme(themes, (typeof cookieSource === "function" ? cookieSource(cookieName) ?? null : cookieSource ? getCookieFromHeader(cookieSource, cookieName) : null) ?? void 0);
 }
 
 //#endregion

package/dist/theme/theme-store/cookie-theme-store/cookie-theme-store.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-theme-store.mjs","names":["lastNotifiedKey: keyof Themes | undefined","opts: {\n\t\t\t\t\t\tpath: string\n\t\t\t\t\t\tmaxAge?: number\n\t\t\t\t\t\tsameSite?: 'lax' | 'strict' | 'none'\n\t\t\t\t\t\tsecure?: boolean\n\t\t\t\t\t}"],"sources":["../../../../src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts"],"sourcesContent":["import type { Required } from 'type-plus'\nimport { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'\nimport { parseStoredTheme } from '../../_utils/parse-stored-theme.ts'\nimport { themeEntry } from '../../theme-entry.ts'\nimport type { ThemeEntry } from '../../theme-entry.types.ts'\nimport type { ThemeMap } from '../../theme-map.types.ts'\nimport type { ThemeStore } from '../theme-store.types.ts'\n\nexport interface CookieThemeStoreOptions {\n\tcookieName: string\n\tpath?: string | undefined\n\tmaxAge?: number | undefined\n\tsameSite?: 'lax' | 'strict' | 'none' | undefined\n\tsecure?: boolean | undefined\n}\n\nfunction getCookieValue(name: string): string | null {\n\tif (typeof document === 'undefined' || !document.cookie) return null\n\tconst match = document.cookie.match(new RegExp(`(?:^|;\\\\s*)${name}=([^;]*)`))\n\tconst value = match?.[1]\n\treturn value !== undefined ? decodeURIComponent(value) : null\n}\n\nfunction setCookie(\n\tname: string,\n\tvalue: string,\n\toptions: {\n\t\tpath?: string | undefined\n\t\tmaxAge?: number | undefined\n\t\tsameSite?: 'lax' | 'strict' | 'none' | undefined\n\t\tsecure?: boolean | undefined\n\t}\n) {\n\tconst parts = [`${name}=${encodeURIComponent(value)}`]\n\tparts.push(`path=${options.path ?? '/'}`)\n\tif (options.maxAge !== undefined) parts.push(`max-age=${options.maxAge}`)\n\tif (options.sameSite !== undefined) parts.push(`samesite=${options.sameSite}`)\n\tif (options.secure) parts.push('secure')\n\t// biome-ignore lint/suspicious/noDocumentCookie: Cookie Store API has limited support; document.cookie is standard for theme persistence\n\tdocument.cookie = parts.join('; ')\n}\n\nfunction deleteCookie(name: string, path = '/') {\n\t// biome-ignore lint/suspicious/noDocumentCookie: Cookie Store API has limited support; document.cookie is standard for theme persistence\n\tdocument.cookie = `${name}=; path=${path}; max-age=0`\n}\n\n/**\n * Creates a theme store backed by cookies.\n *\n * Persists across sessions. Cookies are sent with every request, so the server can\n * read the theme during SSR to avoid flash of wrong theme. Cross-tab sync is not\n * supported (cookies have no StorageEvent).\n *\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options.cookieName - Cookie name for theme storage\n * @param options.path - Cookie path (default: '/')\n * @param options.maxAge - Cookie max-age in seconds\n * @param options.sameSite - Cookie sameSite attribute\n * @param options.secure - Cookie secure attribute\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'theme-current', grayscale: 'theme-grayscale' }\n * const store = cookieThemeStore(themes, { cookieName: 'theme' })\n * store.read()\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function cookieThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: CookieThemeStoreOptions\n): Required<ThemeStore<Themes>> {\n\tconst { cookieName, path = '/', maxAge, sameSite, secure } = options\n\n\tif (document.cookie === undefined) {\n\t\treturn dummyThemeStore\n\t}\n\n\tconst handlers = new Set<(theme: ThemeEntry<Themes> | undefined) => void>()\n\tlet lastNotifiedKey: keyof Themes | undefined = read()?.theme ?? undefined\n\n\tfunction read() {\n\t\tconst stored = getCookieValue(cookieName)\n\t\tconst theme = parseStoredTheme(themes, stored)\n\t\tif (theme === undefined) return undefined\n\t\treturn themeEntry(themes, theme)\n\t}\n\n\tfunction notify() {\n\t\tconst result = read()\n\t\tconst key = result?.theme ?? undefined\n\t\tif (key === lastNotifiedKey) return\n\t\tlastNotifiedKey = key\n\t\tfor (const h of handlers) h(result)\n\t}\n\n\treturn {\n\t\tread,\n\t\twrite(entry) {\n\t\t\ttry {\n\t\t\t\tif (entry === undefined) {\n\t\t\t\t\tdeleteCookie(cookieName, path)\n\t\t\t\t} else {\n\t\t\t\t\tconst opts: {\n\t\t\t\t\t\tpath: string\n\t\t\t\t\t\tmaxAge?: number\n\t\t\t\t\t\tsameSite?: 'lax' | 'strict' | 'none'\n\t\t\t\t\t\tsecure?: boolean\n\t\t\t\t\t} = { path }\n\t\t\t\t\tif (maxAge !== undefined) opts.maxAge = maxAge\n\t\t\t\t\tif (sameSite !== undefined) opts.sameSite = sameSite\n\t\t\t\t\tif (secure) opts.secure = true\n\t\t\t\t\tsetCookie(cookieName, JSON.stringify(entry), opts)\n\t\t\t\t}\n\t\t\t\tnotify()\n\t\t\t} catch {\n\t\t\t\t// Ignore quota or other errors\n\t\t\t}\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\thandlers.add(handler)\n\t\t\treturn () => {\n\t\t\t\thandlers.delete(handler)\n\t\t\t}\n\t\t}\n\t} satisfies ThemeStore<Themes>\n}\n\nfunction getCookieFromHeader(cookieHeader: string, name: string): string | null {\n\tconst match = cookieHeader.match(new RegExp(`(?:^|;\\\\s*)${name}=([^;]*)`))\n\tconst value = match?.[1]\n\treturn value !== undefined ? decodeURIComponent(value.trim()) : null\n}\n\n/**\n * Reads the theme from cookies during SSR. Use with the request's Cookie header or\n * a framework's cookie API (e.g. Next.js cookies()).\n *\n * @param cookieSource - Raw Cookie header string, or a getter (name) => value for framework APIs\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options - Optional cookie name (default: 'theme')\n * @returns ThemeEntry if valid cookie found, otherwise undefined\n *\n * @example\n * ```ts\n * // With raw Cookie header (Express, Remix, etc.)\n * const theme = getThemeFromCookie(request.headers.get('Cookie') ?? '', themes)\n *\n * // With Next.js cookies()\n * const theme = getThemeFromCookie(\n *   (name) => cookies().get(name)?.value ?? undefined,\n *   themes\n * )\n * ```\n */\nexport function getThemeFromCookie<Themes extends ThemeMap>(\n\tcookieSource: string | null | undefined | ((name: string) => string | null | undefined),\n\tthemes: Themes,\n\toptions: { cookieName?: string | undefined } = {}\n): ThemeEntry<Themes> | undefined {\n\tconst cookieName = options.cookieName ?? 'theme'\n\tconst stored =\n\t\ttypeof cookieSource === 'function'\n\t\t\t? (cookieSource(cookieName) ?? null)\n\t\t\t: cookieSource\n\t\t\t\t? getCookieFromHeader(cookieSource, cookieName)\n\t\t\t\t: null\n\tconst theme = parseStoredTheme(themes, stored)\n\tif (theme === undefined) return undefined\n\treturn themeEntry(themes, theme)\n}\n"],"mappings":";;;;;AAgBA,SAAS,eAAe,MAA6B;AACpD,KAAI,OAAO,aAAa,eAAe,CAAC,SAAS,OAAQ,QAAO;CAEhE,MAAM,QADQ,SAAS,OAAO,sBAAM,IAAI,OAAO,cAAc,KAAK,UAAU,CAAC,GACvD;AACtB,QAAO,UAAU,SAAY,mBAAmB,MAAM,GAAG;;AAG1D,SAAS,UACR,MACA,OACA,SAMC;CACD,MAAM,QAAQ,CAAC,GAAG,KAAK,GAAG,mBAAmB,MAAM,GAAG;AACtD,OAAM,KAAK,QAAQ,QAAQ,QAAQ,MAAM;AACzC,KAAI,QAAQ,WAAW,OAAW,OAAM,KAAK,WAAW,QAAQ,SAAS;AACzE,KAAI,QAAQ,aAAa,OAAW,OAAM,KAAK,YAAY,QAAQ,WAAW;AAC9E,KAAI,QAAQ,OAAQ,OAAM,KAAK,SAAS;AAExC,UAAS,SAAS,MAAM,KAAK,KAAK;;AAGnC,SAAS,aAAa,MAAc,OAAO,KAAK;AAE/C,UAAS,SAAS,GAAG,KAAK,UAAU,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B1C,SAAgB,iBACf,QACA,SAC+B;CAC/B,MAAM,EAAE,YAAY,OAAO,KAAK,QAAQ,UAAU,WAAW;AAE7D,KAAI,SAAS,WAAW,OACvB,QAAO;CAGR,MAAM,2BAAW,IAAI,KAAsD;CAC3E,IAAIA,kBAA4C,MAAM,EAAE,SAAS;CAEjE,SAAS,OAAO;EAEf,MAAM,QAAQ,iBAAiB,QADhB,eAAe,WAAW,CACK;AAC9C,MAAI,UAAU,OAAW,QAAO;AAChC,SAAO,WAAW,QAAQ,MAAM;;CAGjC,SAAS,SAAS;EACjB,MAAM,SAAS,MAAM;EACrB,MAAM,MAAM,QAAQ,SAAS;AAC7B,MAAI,QAAQ,gBAAiB;AAC7B,oBAAkB;AAClB,OAAK,MAAM,KAAK,SAAU,GAAE,OAAO;;AAGpC,QAAO;EACN;EACA,MAAM,OAAO;AACZ,OAAI;AACH,QAAI,UAAU,OACb,cAAa,YAAY,KAAK;SACxB;KACN,MAAMC,OAKF,EAAE,MAAM;AACZ,SAAI,WAAW,OAAW,MAAK,SAAS;AACxC,SAAI,aAAa,OAAW,MAAK,WAAW;AAC5C,SAAI,OAAQ,MAAK,SAAS;AAC1B,eAAU,YAAY,KAAK,UAAU,MAAM,EAAE,KAAK;;AAEnD,YAAQ;WACD;;EAIT,UAAU,SAAS;AAClB,YAAS,IAAI,QAAQ;AACrB,gBAAa;AACZ,aAAS,OAAO,QAAQ;;;EAG1B;;AAGF,SAAS,oBAAoB,cAAsB,MAA6B;CAE/E,MAAM,QADQ,aAAa,sBAAM,IAAI,OAAO,cAAc,KAAK,UAAU,CAAC,GACpD;AACtB,QAAO,UAAU,SAAY,mBAAmB,MAAM,MAAM,CAAC,GAAG;;;;;;;;;;;;;;;;;;;;;;;AAwBjE,SAAgB,mBACf,cACA,QACA,UAA+C,EAAE,EAChB;CACjC,MAAM,aAAa,QAAQ,cAAc;CAOzC,MAAM,QAAQ,iBAAiB,QAL9B,OAAO,iBAAiB,aACpB,aAAa,WAAW,IAAI,OAC7B,eACC,oBAAoB,cAAc,WAAW,GAC7C,KACyC;AAC9C,KAAI,UAAU,OAAW,QAAO;AAChC,QAAO,WAAW,QAAQ,MAAM"}
+{"version":3,"file":"cookie-theme-store.mjs","names":["lastNotifiedKey: keyof Themes | undefined"],"sources":["../../../../src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts"],"sourcesContent":["import type { Required } from 'type-plus'\nimport { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'\nimport { parseStoredTheme } from '../../_utils/parse-stored-theme.ts'\nimport { getCookieFromHeader } from '../../cookie/_cookie-utils.ts'\nimport { readCookieTheme } from '../../cookie/read-cookie-theme.ts'\nimport { writeCookieTheme } from '../../cookie/write-cookie-theme.ts'\nimport type { ParseStoredTheme, ThemeEntry } from '../../theme-entry.types.ts'\nimport type { ThemeMap } from '../../theme-map.types.ts'\nimport type { ThemeStore } from '../theme-store.types.ts'\n\nexport interface CookieThemeStoreOptions<Themes extends ThemeMap = ThemeMap> {\n\tcookieName: string\n\tpath?: string | undefined\n\tmaxAge?: number | undefined\n\tsameSite?: 'lax' | 'strict' | 'none' | undefined\n\tsecure?: boolean | undefined\n\tparse?: ParseStoredTheme<Themes> | undefined\n}\n\n/**\n * Creates a theme store backed by cookies.\n *\n * Persists across sessions. Cookies are sent with every request, so the server can\n * read the theme during SSR to avoid flash of wrong theme. Cross-tab sync is not\n * supported (cookies have no StorageEvent).\n *\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options.cookieName - Cookie name for theme storage\n * @param options.path - Cookie path (default: '/')\n * @param options.maxAge - Cookie max-age in seconds\n * @param options.sameSite - Cookie sameSite attribute\n * @param options.secure - Cookie secure attribute\n * @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'theme-current', grayscale: 'theme-grayscale' }\n * const store = cookieThemeStore(themes, { cookieName: 'theme' })\n * store.read()\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function cookieThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: CookieThemeStoreOptions<Themes>\n): Required<ThemeStore<Themes>> {\n\tconst { cookieName, path = '/', maxAge, sameSite, secure, parse = parseStoredTheme } = options\n\n\tif (document.cookie === undefined) {\n\t\treturn dummyThemeStore\n\t}\n\n\tconst handlers = new Set<(theme: ThemeEntry<Themes> | undefined) => void>()\n\tlet lastNotifiedKey: keyof Themes | undefined = read()?.theme ?? undefined\n\n\tfunction read() {\n\t\treturn readCookieTheme(themes, { cookieName, path, parse })\n\t}\n\n\tfunction notify() {\n\t\tconst result = read()\n\t\tconst key = result?.theme ?? undefined\n\t\tif (key === lastNotifiedKey) return\n\t\tlastNotifiedKey = key\n\t\tfor (const h of handlers) h(result)\n\t}\n\n\treturn {\n\t\tread,\n\t\twrite(entry) {\n\t\t\ttry {\n\t\t\t\twriteCookieTheme(themes, entry, {\n\t\t\t\t\tcookieName,\n\t\t\t\t\tpath,\n\t\t\t\t\tmaxAge,\n\t\t\t\t\tsameSite,\n\t\t\t\t\tsecure\n\t\t\t\t})\n\t\t\t\tnotify()\n\t\t\t} catch {\n\t\t\t\t// Ignore quota or other errors\n\t\t\t}\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\thandlers.add(handler)\n\t\t\treturn () => {\n\t\t\t\thandlers.delete(handler)\n\t\t\t}\n\t\t}\n\t} satisfies ThemeStore<Themes>\n}\n\n/**\n * Reads the theme from cookies during SSR. Use with the request's Cookie header or\n * a framework's cookie API (e.g. Next.js cookies()).\n *\n * @param cookieSource - Raw Cookie header string, or a getter (name) => value for framework APIs\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options - Optional cookie name (default: 'theme')\n * @returns ThemeEntry if valid cookie found, otherwise undefined\n *\n * @example\n * ```ts\n * // With raw Cookie header (Express, Remix, etc.)\n * const theme = getThemeFromCookie(request.headers.get('Cookie') ?? '', themes)\n *\n * // With Next.js cookies()\n * const theme = getThemeFromCookie(\n *   (name) => cookies().get(name)?.value ?? undefined,\n *   themes\n * )\n * ```\n */\nexport function getThemeFromCookie<Themes extends ThemeMap>(\n\tcookieSource: string | null | undefined | ((name: string) => string | null | undefined),\n\tthemes: Themes,\n\toptions: { cookieName?: string | undefined } = {}\n): ThemeEntry<Themes> | undefined {\n\tconst cookieName = options.cookieName ?? 'theme'\n\tconst stored =\n\t\ttypeof cookieSource === 'function'\n\t\t\t? (cookieSource(cookieName) ?? null)\n\t\t\t: cookieSource\n\t\t\t\t? getCookieFromHeader(cookieSource, cookieName)\n\t\t\t\t: null\n\treturn parseStoredTheme(themes, stored ?? undefined)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,SAAgB,iBACf,QACA,SAC+B;CAC/B,MAAM,EAAE,YAAY,OAAO,KAAK,QAAQ,UAAU,QAAQ,QAAQ,qBAAqB;AAEvF,KAAI,SAAS,WAAW,OACvB,QAAO;CAGR,MAAM,2BAAW,IAAI,KAAsD;CAC3E,IAAIA,kBAA4C,MAAM,EAAE,SAAS;CAEjE,SAAS,OAAO;AACf,SAAO,gBAAgB,QAAQ;GAAE;GAAY;GAAM;GAAO,CAAC;;CAG5D,SAAS,SAAS;EACjB,MAAM,SAAS,MAAM;EACrB,MAAM,MAAM,QAAQ,SAAS;AAC7B,MAAI,QAAQ,gBAAiB;AAC7B,oBAAkB;AAClB,OAAK,MAAM,KAAK,SAAU,GAAE,OAAO;;AAGpC,QAAO;EACN;EACA,MAAM,OAAO;AACZ,OAAI;AACH,qBAAiB,QAAQ,OAAO;KAC/B;KACA;KACA;KACA;KACA;KACA,CAAC;AACF,YAAQ;WACD;;EAIT,UAAU,SAAS;AAClB,YAAS,IAAI,QAAQ;AACrB,gBAAa;AACZ,aAAS,OAAO,QAAQ;;;EAG1B;;;;;;;;;;;;;;;;;;;;;;;AAwBF,SAAgB,mBACf,cACA,QACA,UAA+C,EAAE,EAChB;CACjC,MAAM,aAAa,QAAQ,cAAc;AAOzC,QAAO,iBAAiB,SALvB,OAAO,iBAAiB,aACpB,aAAa,WAAW,IAAI,OAC7B,eACC,oBAAoB,cAAc,WAAW,GAC7C,SACqC,OAAU"}

package/dist/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.cjs

@@ -1,47 +1,67 @@
-const require_get_data_attribute = require('../../../attributes/get-data-attribute.cjs');
-const require_observe_data_attribute = require('../../../attributes/observe-data-attribute.cjs');
-const require_theme_entry = require('../../theme-entry.cjs');
-const require_dummy_theme_store = require('../../../testing/theme/dummy-theme-store.cjs');
-const require_resolve_theme_from_data_attribute = require('../../data-attribute/resolve-theme-from-data-attribute.cjs');
-const require_apply_theme_to_data_attribute = require('../../data-attribute/apply-theme-to-data-attribute.cjs');
+const require__constant = require('../../data-attribute/_constant.cjs');
+const require_parse_data_attribute = require('../../data-attribute/parse-data-attribute.cjs');
+const require_read_data_attribute = require('../../data-attribute/read-data-attribute.cjs');
+const require_stringify_data_attribute = require('../../data-attribute/stringify-data-attribute.cjs');
+const require_subscribe_data_attribute = require('../../data-attribute/subscribe-data-attribute.cjs');
+const require_write_data_attribute = require('../../data-attribute/write-data-attribute.cjs');
 
 //#region src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts
 /**
 * Creates a theme store that reads and writes via a data attribute.
 *
+* read: parse(themes, getDataAttribute(element, attribute)) → ThemeEntry
+* write: setAttribute(attribute, stringify(themes, getDataAttribute(element, attribute), entry))
+*
+* Supports space-separated attribute values by default. Use `parse` and `stringify` to customize
+* (e.g. comma-separated via curried parseDataAttribute/stringifyDataAttribute).
+*
 * @param themes - Record mapping theme keys to attribute values
 * @param options.attributeName - Data attribute name (e.g. `data-theme`)
-* @param options.element - Element to operate on (defaults to document.documentElement)
+* @param options.element - Element to operate on (accepts null e.g. from refs). Defaults to document.documentElement.
+* @param options.parse - Custom parser (default: parseDataAttribute with space separator)
+* @param options.stringify - Custom serializer (default: stringifyDataAttribute with space separator)
 * @returns ThemeStore
 *
 * @example
 * ```ts
 * const themes = { current: 'current', grayscale: 'grayscale' }
 * const store = dataAttributeThemeStore(themes, { attributeName: 'data-theme' })
-* store.read() // returns themeResult from data attribute
+* store.read() // returns ThemeEntry from data attribute
 * store.write(themeEntry(themes, 'grayscale'))
-* store.subscribe((themeResult) => {})
+* store.subscribe((entry) => {})
+* ```
+*
+* @example
+* ```ts
+* // Comma-separated
+* const store = dataAttributeThemeStore(themes, {
+*   attributeName: 'data-theme',
+*   parse: (t, v) => parseDataAttribute(t, v, { separator: ',' }),
+*   stringify: (t, x, e) => stringifyDataAttribute(t, x, e, { separator: ',' })
+* })
 * ```
 */
 function dataAttributeThemeStore(themes, options) {
 	const element = options.element ?? document?.documentElement;
-	const { attributeName } = options;
-	if (!element) return require_dummy_theme_store.dummyThemeStore;
+	const { attributeName, parse = (t, v) => require_parse_data_attribute.parseDataAttribute(t, v, { separator: require__constant.SEPARATOR_SPACE }), stringify = (t, x, e) => require_stringify_data_attribute.stringifyDataAttribute(t, x, e, { separator: require__constant.SEPARATOR_SPACE }) } = options;
 	return {
 		read() {
-			const theme = require_resolve_theme_from_data_attribute.resolveThemeFromDataAttribute(themes, require_get_data_attribute.getDataAttribute(attributeName, element));
-			if (theme === void 0) return void 0;
-			return require_theme_entry.themeEntry(themes, theme);
+			return require_read_data_attribute.readDataAttribute(themes, attributeName, {
+				element,
+				parse
+			});
 		},
 		write(entry) {
-			require_apply_theme_to_data_attribute.applyThemeToDataAttribute(element, attributeName, entry);
+			require_write_data_attribute.writeDataAttribute(themes, attributeName, entry, {
+				element,
+				stringify
+			});
 		},
 		subscribe(handler) {
-			const observer = require_observe_data_attribute.observeDataAttributes({ [attributeName]: (value) => {
-				const theme = value ? require_resolve_theme_from_data_attribute.resolveThemeFromDataAttribute(themes, value) : void 0;
-				handler(theme ? require_theme_entry.themeEntry(themes, theme) : void 0);
-			} }, element);
-			return () => observer.disconnect();
+			return require_subscribe_data_attribute.subscribeDataAttribute(themes, attributeName, handler, {
+				element,
+				parse
+			});
 		}
 	};
 }