@just-web/toolkits 1.0.0 → 2.0.0

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.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
+			});
 		}
 	};
 }

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

@@ -1 +1 @@
-{"version":3,"file":"data-attribute-theme-store.cjs","names":["dummyThemeStore","resolveThemeFromDataAttribute","getDataAttribute","themeEntry","observeDataAttributes"],"sources":["../../../../src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts"],"sourcesContent":["import type { Required } from 'type-plus'\nimport { getDataAttribute } from '../../../attributes/get-data-attribute.ts'\nimport { observeDataAttributes } from '../../../attributes/observe-data-attribute.ts'\nimport { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'\nimport { applyThemeToDataAttribute } from '../../data-attribute/apply-theme-to-data-attribute.ts'\nimport { resolveThemeFromDataAttribute } from '../../data-attribute/resolve-theme-from-data-attribute.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 a data attribute.\n *\n * @param themes - Record mapping theme keys to attribute values\n * @param options.attributeName - Data attribute name (e.g. `data-theme`)\n * @param options.element - Element to operate on (defaults to document.documentElement)\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'current', grayscale: 'grayscale' }\n * const store = dataAttributeThemeStore(themes, { attributeName: 'data-theme' })\n * store.read() // returns themeResult from data attribute\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function dataAttributeThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: { attributeName: `data-${string}`; element?: Element | undefined }\n) {\n\tconst element = options.element ?? document?.documentElement\n\tconst { attributeName } = options\n\n\tif (!element) return dummyThemeStore as Required<ThemeStore<Themes>>\n\n\treturn {\n\t\tread() {\n\t\t\tconst value = getDataAttribute(attributeName, element)\n\t\t\tconst theme = resolveThemeFromDataAttribute(themes, value)\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\tapplyThemeToDataAttribute(element, attributeName, entry)\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\tconst observer = observeDataAttributes<string, `data-${string}`>(\n\t\t\t\t{\n\t\t\t\t\t[attributeName]: (value) => {\n\t\t\t\t\t\tconst theme = value ? resolveThemeFromDataAttribute(themes, value) : undefined\n\t\t\t\t\t\thandler(theme ? themeEntry(themes, theme) : undefined)\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} satisfies ThemeStore<Themes>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,wBACf,QACA,SACC;CACD,MAAM,UAAU,QAAQ,WAAW,UAAU;CAC7C,MAAM,EAAE,kBAAkB;AAE1B,KAAI,CAAC,QAAS,QAAOA;AAErB,QAAO;EACN,OAAO;GAEN,MAAM,QAAQC,wEAA8B,QAD9BC,4CAAiB,eAAe,QAAQ,CACI;AAC1D,OAAI,UAAU,OAAW,QAAO;AAChC,UAAOC,+BAAW,QAAQ,MAAM;;EAEjC,MAAM,OAAO;AACZ,mEAA0B,SAAS,eAAe,MAAM;;EAEzD,UAAU,SAAS;GAClB,MAAM,WAAWC,qDAChB,GACE,iBAAiB,UAAU;IAC3B,MAAM,QAAQ,QAAQH,wEAA8B,QAAQ,MAAM,GAAG;AACrE,YAAQ,QAAQE,+BAAW,QAAQ,MAAM,GAAG,OAAU;MAEvD,EACD,QACA;AACD,gBAAa,SAAS,YAAY;;EAEnC"}
+{"version":3,"file":"data-attribute-theme-store.cjs","names":["parseDataAttribute","SEPARATOR_SPACE","stringifyDataAttribute","readDataAttribute","subscribeDataAttribute"],"sources":["../../../../src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts"],"sourcesContent":["import { SEPARATOR_SPACE } from '../../data-attribute/_constant.ts'\nimport { parseDataAttribute } from '../../data-attribute/parse-data-attribute.ts'\nimport { readDataAttribute } from '../../data-attribute/read-data-attribute.ts'\nimport { stringifyDataAttribute } from '../../data-attribute/stringify-data-attribute.ts'\nimport { subscribeDataAttribute } from '../../data-attribute/subscribe-data-attribute.ts'\nimport { writeDataAttribute } from '../../data-attribute/write-data-attribute.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 a data attribute.\n *\n * read: parse(themes, getDataAttribute(element, attribute)) → ThemeEntry\n * write: setAttribute(attribute, stringify(themes, getDataAttribute(element, attribute), entry))\n *\n * Supports space-separated attribute values by default. Use `parse` and `stringify` to customize\n * (e.g. comma-separated via curried parseDataAttribute/stringifyDataAttribute).\n *\n * @param themes - Record mapping theme keys to attribute values\n * @param options.attributeName - Data attribute name (e.g. `data-theme`)\n * @param options.element - Element to operate on (defaults to document.documentElement)\n * @param options.parse - Custom parser (default: parseDataAttribute with space separator)\n * @param options.stringify - Custom serializer (default: stringifyDataAttribute with space separator)\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'current', grayscale: 'grayscale' }\n * const store = dataAttributeThemeStore(themes, { attributeName: 'data-theme' })\n * store.read() // returns ThemeEntry from data attribute\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((entry) => {})\n * ```\n *\n * @example\n * ```ts\n * // Comma-separated\n * const store = dataAttributeThemeStore(themes, {\n *   attributeName: 'data-theme',\n *   parse: (t, v) => parseDataAttribute(t, v, { separator: ',' }),\n *   stringify: (t, x, e) => stringifyDataAttribute(t, x, e, { separator: ',' })\n * })\n * ```\n */\nexport function dataAttributeThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tattributeName: `data-${string}`\n\t\telement?: Element | undefined\n\t\tparse?: ParseStoredTheme<Themes> | undefined\n\t\tstringify?: StringifyStoredTheme<Themes> | undefined\n\t}\n) {\n\tconst element = options.element ?? document?.documentElement\n\tconst {\n\t\tattributeName,\n\t\tparse = (t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }),\n\t\tstringify = (t, x, e) => stringifyDataAttribute(t, x, e, { separator: SEPARATOR_SPACE })\n\t} = options\n\n\treturn {\n\t\tread() {\n\t\t\treturn readDataAttribute(themes, attributeName, { element, parse })\n\t\t},\n\t\twrite(entry) {\n\t\t\twriteDataAttribute(themes, attributeName, entry, { element, stringify })\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\treturn subscribeDataAttribute(themes, attributeName, handler, { element, parse })\n\t\t}\n\t} satisfies ThemeStore<Themes>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,wBACf,QACA,SAMC;CACD,MAAM,UAAU,QAAQ,WAAW,UAAU;CAC7C,MAAM,EACL,eACA,SAAS,GAAG,MAAMA,gDAAmB,GAAG,GAAG,EAAE,WAAWC,mCAAiB,CAAC,EAC1E,aAAa,GAAG,GAAG,MAAMC,wDAAuB,GAAG,GAAG,GAAG,EAAE,WAAWD,mCAAiB,CAAC,KACrF;AAEJ,QAAO;EACN,OAAO;AACN,UAAOE,8CAAkB,QAAQ,eAAe;IAAE;IAAS;IAAO,CAAC;;EAEpE,MAAM,OAAO;AACZ,mDAAmB,QAAQ,eAAe,OAAO;IAAE;IAAS;IAAW,CAAC;;EAEzE,UAAU,SAAS;AAClB,UAAOC,wDAAuB,QAAQ,eAAe,SAAS;IAAE;IAAS;IAAO,CAAC;;EAElF"}

package/dist/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.d.cts

@@ -1,30 +1,53 @@
 import { ThemeMap } from "../../theme-map.types.cjs";
-import { ThemeStore } from "../theme-store.types.cjs";
-import { Required } from "type-plus";
+import { ParseStoredTheme, StringifyStoredTheme, ThemeEntry } from "../../theme-entry.types.cjs";
 
 //#region src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.d.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.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: ',' })
+ * })
  * ```
  */
 declare function dataAttributeThemeStore<Themes extends ThemeMap>(themes: Themes, options: {
   attributeName: `data-${string}`;
   element?: Element | undefined;
-}): Required<ThemeStore<Themes>>;
+  parse?: ParseStoredTheme<Themes> | undefined;
+  stringify?: StringifyStoredTheme<Themes> | undefined;
+}): {
+  read(): ThemeEntry<Themes> | undefined;
+  write(entry: ThemeEntry<Themes> | undefined): void;
+  subscribe(handler: (theme: ThemeEntry<Themes> | null | undefined) => void): () => void;
+};
 //#endregion
 export { dataAttributeThemeStore };
 //# sourceMappingURL=data-attribute-theme-store.d.cts.map

package/dist/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"data-attribute-theme-store.d.cts","names":[],"sources":["../../../../src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;;AA2BA;;;;;;;;;;;;;;;iBAAgB,uCAAuC,kBAC9C;;YAC8C;IAAqB,SAAA,WAAA"}
+{"version":3,"file":"data-attribute-theme-store.d.cts","names":[],"sources":["../../../../src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;AA6CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,uCAAuC,kBAC9C;;YAGG;UACF,iBAAiB;cACb,qBAAqB"}

package/dist/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.d.mts

@@ -1,30 +1,53 @@
 import { ThemeMap } from "../../theme-map.types.mjs";
-import { ThemeStore } from "../theme-store.types.mjs";
-import { Required } from "type-plus";
+import { ParseStoredTheme, StringifyStoredTheme, ThemeEntry } from "../../theme-entry.types.mjs";
 
 //#region src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.d.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.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: ',' })
+ * })
  * ```
  */
 declare function dataAttributeThemeStore<Themes extends ThemeMap>(themes: Themes, options: {
   attributeName: `data-${string}`;
   element?: Element | undefined;
-}): Required<ThemeStore<Themes>>;
+  parse?: ParseStoredTheme<Themes> | undefined;
+  stringify?: StringifyStoredTheme<Themes> | undefined;
+}): {
+  read(): ThemeEntry<Themes> | undefined;
+  write(entry: ThemeEntry<Themes> | undefined): void;
+  subscribe(handler: (theme: ThemeEntry<Themes> | null | undefined) => void): () => void;
+};
 //#endregion
 export { dataAttributeThemeStore };
 //# sourceMappingURL=data-attribute-theme-store.d.mts.map

package/dist/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"data-attribute-theme-store.d.mts","names":[],"sources":["../../../../src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;;AA2BA;;;;;;;;;;;;;;;iBAAgB,uCAAuC,kBAC9C;;YAC8C;IAAqB,SAAA,WAAA"}
+{"version":3,"file":"data-attribute-theme-store.d.mts","names":[],"sources":["../../../../src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;AA6CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,uCAAuC,kBAC9C;;YAGG;UACF,iBAAiB;cACb,qBAAqB"}

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

@@ -1,47 +1,67 @@
-import { getDataAttribute } from "../../../attributes/get-data-attribute.mjs";
-import { observeDataAttributes } from "../../../attributes/observe-data-attribute.mjs";
-import { themeEntry } from "../../theme-entry.mjs";
-import { dummyThemeStore } from "../../../testing/theme/dummy-theme-store.mjs";
-import { resolveThemeFromDataAttribute } from "../../data-attribute/resolve-theme-from-data-attribute.mjs";
-import { applyThemeToDataAttribute } from "../../data-attribute/apply-theme-to-data-attribute.mjs";
+import { SEPARATOR_SPACE } from "../../data-attribute/_constant.mjs";
+import { parseDataAttribute } from "../../data-attribute/parse-data-attribute.mjs";
+import { readDataAttribute } from "../../data-attribute/read-data-attribute.mjs";
+import { stringifyDataAttribute } from "../../data-attribute/stringify-data-attribute.mjs";
+import { subscribeDataAttribute } from "../../data-attribute/subscribe-data-attribute.mjs";
+import { writeDataAttribute } from "../../data-attribute/write-data-attribute.mjs";
 
 //#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.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 dummyThemeStore;
+	const { attributeName, parse = (t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }), stringify = (t, x, e) => stringifyDataAttribute(t, x, e, { separator: SEPARATOR_SPACE }) } = options;
 	return {
 		read() {
-			const theme = resolveThemeFromDataAttribute(themes, getDataAttribute(attributeName, element));
-			if (theme === void 0) return void 0;
-			return themeEntry(themes, theme);
+			return readDataAttribute(themes, attributeName, {
+				element,
+				parse
+			});
 		},
 		write(entry) {
-			applyThemeToDataAttribute(element, attributeName, entry);
+			writeDataAttribute(themes, attributeName, entry, {
+				element,
+				stringify
+			});
 		},
 		subscribe(handler) {
-			const observer = observeDataAttributes({ [attributeName]: (value) => {
-				const theme = value ? resolveThemeFromDataAttribute(themes, value) : void 0;
-				handler(theme ? themeEntry(themes, theme) : void 0);
-			} }, element);
-			return () => observer.disconnect();
+			return subscribeDataAttribute(themes, attributeName, handler, {
+				element,
+				parse
+			});
 		}
 	};
 }

package/dist/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-attribute-theme-store.mjs","names":[],"sources":["../../../../src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts"],"sourcesContent":["import type { Required } from 'type-plus'\nimport { getDataAttribute } from '../../../attributes/get-data-attribute.ts'\nimport { observeDataAttributes } from '../../../attributes/observe-data-attribute.ts'\nimport { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'\nimport { applyThemeToDataAttribute } from '../../data-attribute/apply-theme-to-data-attribute.ts'\nimport { resolveThemeFromDataAttribute } from '../../data-attribute/resolve-theme-from-data-attribute.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 a data attribute.\n *\n * @param themes - Record mapping theme keys to attribute values\n * @param options.attributeName - Data attribute name (e.g. `data-theme`)\n * @param options.element - Element to operate on (defaults to document.documentElement)\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'current', grayscale: 'grayscale' }\n * const store = dataAttributeThemeStore(themes, { attributeName: 'data-theme' })\n * store.read() // returns themeResult from data attribute\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function dataAttributeThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: { attributeName: `data-${string}`; element?: Element | undefined }\n) {\n\tconst element = options.element ?? document?.documentElement\n\tconst { attributeName } = options\n\n\tif (!element) return dummyThemeStore as Required<ThemeStore<Themes>>\n\n\treturn {\n\t\tread() {\n\t\t\tconst value = getDataAttribute(attributeName, element)\n\t\t\tconst theme = resolveThemeFromDataAttribute(themes, value)\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\tapplyThemeToDataAttribute(element, attributeName, entry)\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\tconst observer = observeDataAttributes<string, `data-${string}`>(\n\t\t\t\t{\n\t\t\t\t\t[attributeName]: (value) => {\n\t\t\t\t\t\tconst theme = value ? resolveThemeFromDataAttribute(themes, value) : undefined\n\t\t\t\t\t\thandler(theme ? themeEntry(themes, theme) : undefined)\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} satisfies ThemeStore<Themes>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,wBACf,QACA,SACC;CACD,MAAM,UAAU,QAAQ,WAAW,UAAU;CAC7C,MAAM,EAAE,kBAAkB;AAE1B,KAAI,CAAC,QAAS,QAAO;AAErB,QAAO;EACN,OAAO;GAEN,MAAM,QAAQ,8BAA8B,QAD9B,iBAAiB,eAAe,QAAQ,CACI;AAC1D,OAAI,UAAU,OAAW,QAAO;AAChC,UAAO,WAAW,QAAQ,MAAM;;EAEjC,MAAM,OAAO;AACZ,6BAA0B,SAAS,eAAe,MAAM;;EAEzD,UAAU,SAAS;GAClB,MAAM,WAAW,sBAChB,GACE,iBAAiB,UAAU;IAC3B,MAAM,QAAQ,QAAQ,8BAA8B,QAAQ,MAAM,GAAG;AACrE,YAAQ,QAAQ,WAAW,QAAQ,MAAM,GAAG,OAAU;MAEvD,EACD,QACA;AACD,gBAAa,SAAS,YAAY;;EAEnC"}
+{"version":3,"file":"data-attribute-theme-store.mjs","names":[],"sources":["../../../../src/theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts"],"sourcesContent":["import { SEPARATOR_SPACE } from '../../data-attribute/_constant.ts'\nimport { parseDataAttribute } from '../../data-attribute/parse-data-attribute.ts'\nimport { readDataAttribute } from '../../data-attribute/read-data-attribute.ts'\nimport { stringifyDataAttribute } from '../../data-attribute/stringify-data-attribute.ts'\nimport { subscribeDataAttribute } from '../../data-attribute/subscribe-data-attribute.ts'\nimport { writeDataAttribute } from '../../data-attribute/write-data-attribute.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 a data attribute.\n *\n * read: parse(themes, getDataAttribute(element, attribute)) → ThemeEntry\n * write: setAttribute(attribute, stringify(themes, getDataAttribute(element, attribute), entry))\n *\n * Supports space-separated attribute values by default. Use `parse` and `stringify` to customize\n * (e.g. comma-separated via curried parseDataAttribute/stringifyDataAttribute).\n *\n * @param themes - Record mapping theme keys to attribute values\n * @param options.attributeName - Data attribute name (e.g. `data-theme`)\n * @param options.element - Element to operate on (defaults to document.documentElement)\n * @param options.parse - Custom parser (default: parseDataAttribute with space separator)\n * @param options.stringify - Custom serializer (default: stringifyDataAttribute with space separator)\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'current', grayscale: 'grayscale' }\n * const store = dataAttributeThemeStore(themes, { attributeName: 'data-theme' })\n * store.read() // returns ThemeEntry from data attribute\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((entry) => {})\n * ```\n *\n * @example\n * ```ts\n * // Comma-separated\n * const store = dataAttributeThemeStore(themes, {\n *   attributeName: 'data-theme',\n *   parse: (t, v) => parseDataAttribute(t, v, { separator: ',' }),\n *   stringify: (t, x, e) => stringifyDataAttribute(t, x, e, { separator: ',' })\n * })\n * ```\n */\nexport function dataAttributeThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tattributeName: `data-${string}`\n\t\telement?: Element | undefined\n\t\tparse?: ParseStoredTheme<Themes> | undefined\n\t\tstringify?: StringifyStoredTheme<Themes> | undefined\n\t}\n) {\n\tconst element = options.element ?? document?.documentElement\n\tconst {\n\t\tattributeName,\n\t\tparse = (t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }),\n\t\tstringify = (t, x, e) => stringifyDataAttribute(t, x, e, { separator: SEPARATOR_SPACE })\n\t} = options\n\n\treturn {\n\t\tread() {\n\t\t\treturn readDataAttribute(themes, attributeName, { element, parse })\n\t\t},\n\t\twrite(entry) {\n\t\t\twriteDataAttribute(themes, attributeName, entry, { element, stringify })\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\treturn subscribeDataAttribute(themes, attributeName, handler, { element, parse })\n\t\t}\n\t} satisfies ThemeStore<Themes>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,wBACf,QACA,SAMC;CACD,MAAM,UAAU,QAAQ,WAAW,UAAU;CAC7C,MAAM,EACL,eACA,SAAS,GAAG,MAAM,mBAAmB,GAAG,GAAG,EAAE,WAAW,iBAAiB,CAAC,EAC1E,aAAa,GAAG,GAAG,MAAM,uBAAuB,GAAG,GAAG,GAAG,EAAE,WAAW,iBAAiB,CAAC,KACrF;AAEJ,QAAO;EACN,OAAO;AACN,UAAO,kBAAkB,QAAQ,eAAe;IAAE;IAAS;IAAO,CAAC;;EAEpE,MAAM,OAAO;AACZ,sBAAmB,QAAQ,eAAe,OAAO;IAAE;IAAS;IAAW,CAAC;;EAEzE,UAAU,SAAS;AAClB,UAAO,uBAAuB,QAAQ,eAAe,SAAS;IAAE;IAAS;IAAO,CAAC;;EAElF"}

package/dist/theme/theme-store/local-storage-theme-store/local-storage-theme-store.cjs

@@ -1,6 +1,6 @@
-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_read_local_storage = require('../../local-storage/read-local-storage.cjs');
+const require_write_local_storage = require('../../local-storage/write-local-storage.cjs');
 
 //#region src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts
 /**
@@ -11,6 +11,9 @@ const require_parse_stored_theme = require('../../_utils/parse-stored-theme.cjs'
 *
 * @param themes - Record mapping theme keys to values (for validation)
 * @param options.storageKey - localStorage key
+* @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)
+* @param options.stringify - Optional custom serializer (default: JSON.stringify)
+* @param options.onError - Optional callback invoked when storage write throws
 * @returns ThemeStore
 *
 * @example
@@ -23,14 +26,12 @@ const require_parse_stored_theme = require('../../_utils/parse-stored-theme.cjs'
 * ```
 */
 function localStorageThemeStore(themes, options) {
-	const { storageKey } = options;
-	if (typeof window === "undefined" || !window.localStorage) return require_dummy_theme_store.dummyThemeStore;
+	const { storageKey, parse, stringify, onError } = options;
+	if (!window?.localStorage) 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, window.localStorage.getItem(storageKey));
-		if (theme === void 0) return void 0;
-		return require_theme_entry.themeEntry(themes, theme);
+		return require_read_local_storage.readLocalStorage(themes, storageKey, { parse });
 	}
 	function notify() {
 		const result = read();
@@ -42,11 +43,11 @@ function localStorageThemeStore(themes, options) {
 	return {
 		read,
 		write(entry) {
-			try {
-				if (entry === void 0) window.localStorage.removeItem(storageKey);
-				else window.localStorage.setItem(storageKey, JSON.stringify(entry));
-				notify();
-			} catch {}
+			require_write_local_storage.writeLocalStorage(themes, storageKey, entry, {
+				stringify,
+				onError
+			});
+			notify();
 		},
 		subscribe(handler) {
 			handlers.add(handler);

package/dist/theme/theme-store/local-storage-theme-store/local-storage-theme-store.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"local-storage-theme-store.cjs","names":["dummyThemeStore","lastNotifiedKey: keyof Themes | undefined","parseStoredTheme","themeEntry"],"sources":["../../../../src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts"],"sourcesContent":["import { 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\n/**\n * Creates a theme store backed by localStorage.\n *\n * Persists across sessions; cross-tab sync via StorageEvent.\n * Same-tab writes trigger manual notify (StorageEvent does not fire for same tab).\n *\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options.storageKey - localStorage key\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'theme-current', grayscale: 'theme-grayscale' }\n * const store = localStorageThemeStore(themes, { storageKey: 'theme' })\n * store.read() // returns themeResult from localStorage\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function localStorageThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: { storageKey: string }\n) {\n\tconst { storageKey } = options\n\n\tif (typeof window === 'undefined' || !window.localStorage) {\n\t\treturn dummyThemeStore satisfies ThemeStore<Themes>\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 = window.localStorage.getItem(storageKey)\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\twindow.localStorage.removeItem(storageKey)\n\t\t\t\t} else {\n\t\t\t\t\twindow.localStorage.setItem(storageKey, JSON.stringify(entry))\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\n\t\t\tconst onStorage = (e: StorageEvent) => {\n\t\t\t\tif (e.key === storageKey && e.storageArea === window.localStorage) notify()\n\t\t\t}\n\t\t\twindow.addEventListener('storage', onStorage)\n\n\t\t\treturn () => {\n\t\t\t\thandlers.delete(handler)\n\t\t\t\twindow.removeEventListener('storage', onStorage)\n\t\t\t}\n\t\t}\n\t} satisfies ThemeStore<Themes>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,SAAgB,uBACf,QACA,SACC;CACD,MAAM,EAAE,eAAe;AAEvB,KAAI,OAAO,WAAW,eAAe,CAAC,OAAO,aAC5C,QAAOA;CAGR,MAAM,2BAAW,IAAI,KAAsD;CAC3E,IAAIC,kBAA4C,MAAM,EAAE,SAAS;CAEjE,SAAS,OAAO;EAEf,MAAM,QAAQC,4CAAiB,QADhB,OAAO,aAAa,QAAQ,WAAW,CACR;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,QAAO,aAAa,WAAW,WAAW;QAE1C,QAAO,aAAa,QAAQ,YAAY,KAAK,UAAU,MAAM,CAAC;AAE/D,YAAQ;WACD;;EAIT,UAAU,SAAS;AAClB,YAAS,IAAI,QAAQ;GAErB,MAAM,aAAa,MAAoB;AACtC,QAAI,EAAE,QAAQ,cAAc,EAAE,gBAAgB,OAAO,aAAc,SAAQ;;AAE5E,UAAO,iBAAiB,WAAW,UAAU;AAE7C,gBAAa;AACZ,aAAS,OAAO,QAAQ;AACxB,WAAO,oBAAoB,WAAW,UAAU;;;EAGlD"}
+{"version":3,"file":"local-storage-theme-store.cjs","names":["dummyThemeStore","lastNotifiedKey: keyof Themes | undefined","readLocalStorage"],"sources":["../../../../src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts"],"sourcesContent":["import { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'\nimport { readLocalStorage } from '../../local-storage/read-local-storage.ts'\nimport { writeLocalStorage } from '../../local-storage/write-local-storage.ts'\nimport type { ParseStoredTheme, StringifyStoredTheme, ThemeEntry } 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 backed by localStorage.\n *\n * Persists across sessions; cross-tab sync via StorageEvent.\n * Same-tab writes trigger manual notify (StorageEvent does not fire for same tab).\n *\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options.storageKey - localStorage key\n * @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)\n * @param options.stringify - Optional custom serializer (default: JSON.stringify)\n * @param options.onError - Optional callback invoked when storage write throws\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'theme-current', grayscale: 'theme-grayscale' }\n * const store = localStorageThemeStore(themes, { storageKey: 'theme' })\n * store.read() // returns themeResult from localStorage\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function localStorageThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tstorageKey: string\n\t\tparse?: ParseStoredTheme<Themes> | undefined\n\t\tstringify?: StringifyStoredTheme<Themes> | undefined\n\t\tonError?: ((error: unknown) => void) | undefined\n\t}\n) {\n\tconst { storageKey, parse, stringify, onError } = options\n\n\tif (!window?.localStorage) {\n\t\treturn dummyThemeStore satisfies ThemeStore<Themes>\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 readLocalStorage(themes, storageKey, { 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\twriteLocalStorage(themes, storageKey, entry, { stringify, onError })\n\t\t\tnotify()\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\thandlers.add(handler)\n\n\t\t\tconst onStorage = (e: StorageEvent) => {\n\t\t\t\tif (e.key === storageKey && e.storageArea === window.localStorage) notify()\n\t\t\t}\n\t\t\twindow.addEventListener('storage', onStorage)\n\n\t\t\treturn () => {\n\t\t\t\thandlers.delete(handler)\n\t\t\t\twindow.removeEventListener('storage', onStorage)\n\t\t\t}\n\t\t}\n\t} satisfies ThemeStore<Themes>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,uBACf,QACA,SAMC;CACD,MAAM,EAAE,YAAY,OAAO,WAAW,YAAY;AAElD,KAAI,CAAC,QAAQ,aACZ,QAAOA;CAGR,MAAM,2BAAW,IAAI,KAAsD;CAC3E,IAAIC,kBAA4C,MAAM,EAAE,SAAS;CAEjE,SAAS,OAAO;AACf,SAAOC,4CAAiB,QAAQ,YAAY,EAAE,OAAO,CAAC;;CAGvD,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,iDAAkB,QAAQ,YAAY,OAAO;IAAE;IAAW;IAAS,CAAC;AACpE,WAAQ;;EAET,UAAU,SAAS;AAClB,YAAS,IAAI,QAAQ;GAErB,MAAM,aAAa,MAAoB;AACtC,QAAI,EAAE,QAAQ,cAAc,EAAE,gBAAgB,OAAO,aAAc,SAAQ;;AAE5E,UAAO,iBAAiB,WAAW,UAAU;AAE7C,gBAAa;AACZ,aAAS,OAAO,QAAQ;AACxB,WAAO,oBAAoB,WAAW,UAAU;;;EAGlD"}

package/dist/theme/theme-store/local-storage-theme-store/local-storage-theme-store.d.cts

@@ -1,5 +1,5 @@
 import { ThemeMap } from "../../theme-map.types.cjs";
-import { ThemeEntry } from "../../theme-entry.types.cjs";
+import { ParseStoredTheme, StringifyStoredTheme, ThemeEntry } from "../../theme-entry.types.cjs";
 
 //#region src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.d.ts
 
@@ -11,6 +11,9 @@ import { ThemeEntry } from "../../theme-entry.types.cjs";
  *
  * @param themes - Record mapping theme keys to values (for validation)
  * @param options.storageKey - localStorage key
+ * @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)
+ * @param options.stringify - Optional custom serializer (default: JSON.stringify)
+ * @param options.onError - Optional callback invoked when storage write throws
  * @returns ThemeStore
  *
  * @example
@@ -24,6 +27,9 @@ import { ThemeEntry } from "../../theme-entry.types.cjs";
  */
 declare function localStorageThemeStore<Themes extends ThemeMap>(themes: Themes, options: {
   storageKey: string;
+  parse?: ParseStoredTheme<Themes> | undefined;
+  stringify?: StringifyStoredTheme<Themes> | undefined;
+  onError?: ((error: unknown) => void) | undefined;
 }): {
   read: () => ThemeEntry<Themes> | undefined;
   write(entry: ThemeEntry<Themes> | undefined): void;

package/dist/theme/theme-store/local-storage-theme-store/local-storage-theme-store.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"local-storage-theme-store.d.cts","names":[],"sources":["../../../../src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;AA0BA;;;;;;;;;;;;;;;;;iBAAgB,sCAAsC,kBAC7C"}
+{"version":3,"file":"local-storage-theme-store.d.cts","names":[],"sources":["../../../../src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;AA6BA;;;;;;;;;;;;;;;;;;;;iBAAgB,sCAAsC,kBAC7C;;UAGC,iBAAiB;cACb,qBAAqB"}

package/dist/theme/theme-store/local-storage-theme-store/local-storage-theme-store.d.mts

@@ -1,5 +1,5 @@
 import { ThemeMap } from "../../theme-map.types.mjs";
-import { ThemeEntry } from "../../theme-entry.types.mjs";
+import { ParseStoredTheme, StringifyStoredTheme, ThemeEntry } from "../../theme-entry.types.mjs";
 
 //#region src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.d.ts
 
@@ -11,6 +11,9 @@ import { ThemeEntry } from "../../theme-entry.types.mjs";
  *
  * @param themes - Record mapping theme keys to values (for validation)
  * @param options.storageKey - localStorage key
+ * @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)
+ * @param options.stringify - Optional custom serializer (default: JSON.stringify)
+ * @param options.onError - Optional callback invoked when storage write throws
  * @returns ThemeStore
  *
  * @example
@@ -24,6 +27,9 @@ import { ThemeEntry } from "../../theme-entry.types.mjs";
  */
 declare function localStorageThemeStore<Themes extends ThemeMap>(themes: Themes, options: {
   storageKey: string;
+  parse?: ParseStoredTheme<Themes> | undefined;
+  stringify?: StringifyStoredTheme<Themes> | undefined;
+  onError?: ((error: unknown) => void) | undefined;
 }): {
   read: () => ThemeEntry<Themes> | undefined;
   write(entry: ThemeEntry<Themes> | undefined): void;

package/dist/theme/theme-store/local-storage-theme-store/local-storage-theme-store.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"local-storage-theme-store.d.mts","names":[],"sources":["../../../../src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;AA0BA;;;;;;;;;;;;;;;;;iBAAgB,sCAAsC,kBAC7C"}
+{"version":3,"file":"local-storage-theme-store.d.mts","names":[],"sources":["../../../../src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts"],"sourcesContent":[],"mappings":";;;;;;;AA6BA;;;;;;;;;;;;;;;;;;;;iBAAgB,sCAAsC,kBAC7C;;UAGC,iBAAiB;cACb,qBAAqB"}

package/dist/theme/theme-store/local-storage-theme-store/local-storage-theme-store.mjs

@@ -1,6 +1,6 @@
-import { themeEntry } from "../../theme-entry.mjs";
 import { dummyThemeStore } from "../../../testing/theme/dummy-theme-store.mjs";
-import { parseStoredTheme } from "../../_utils/parse-stored-theme.mjs";
+import { readLocalStorage } from "../../local-storage/read-local-storage.mjs";
+import { writeLocalStorage } from "../../local-storage/write-local-storage.mjs";
 
 //#region src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts
 /**
@@ -11,6 +11,9 @@ import { parseStoredTheme } from "../../_utils/parse-stored-theme.mjs";
 *
 * @param themes - Record mapping theme keys to values (for validation)
 * @param options.storageKey - localStorage key
+* @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)
+* @param options.stringify - Optional custom serializer (default: JSON.stringify)
+* @param options.onError - Optional callback invoked when storage write throws
 * @returns ThemeStore
 *
 * @example
@@ -23,14 +26,12 @@ import { parseStoredTheme } from "../../_utils/parse-stored-theme.mjs";
 * ```
 */
 function localStorageThemeStore(themes, options) {
-	const { storageKey } = options;
-	if (typeof window === "undefined" || !window.localStorage) return dummyThemeStore;
+	const { storageKey, parse, stringify, onError } = options;
+	if (!window?.localStorage) return dummyThemeStore;
 	const handlers = /* @__PURE__ */ new Set();
 	let lastNotifiedKey = read()?.theme ?? void 0;
 	function read() {
-		const theme = parseStoredTheme(themes, window.localStorage.getItem(storageKey));
-		if (theme === void 0) return void 0;
-		return themeEntry(themes, theme);
+		return readLocalStorage(themes, storageKey, { parse });
 	}
 	function notify() {
 		const result = read();
@@ -42,11 +43,11 @@ function localStorageThemeStore(themes, options) {
 	return {
 		read,
 		write(entry) {
-			try {
-				if (entry === void 0) window.localStorage.removeItem(storageKey);
-				else window.localStorage.setItem(storageKey, JSON.stringify(entry));
-				notify();
-			} catch {}
+			writeLocalStorage(themes, storageKey, entry, {
+				stringify,
+				onError
+			});
+			notify();
 		},
 		subscribe(handler) {
 			handlers.add(handler);

package/dist/theme/theme-store/local-storage-theme-store/local-storage-theme-store.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"local-storage-theme-store.mjs","names":["lastNotifiedKey: keyof Themes | undefined"],"sources":["../../../../src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts"],"sourcesContent":["import { 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\n/**\n * Creates a theme store backed by localStorage.\n *\n * Persists across sessions; cross-tab sync via StorageEvent.\n * Same-tab writes trigger manual notify (StorageEvent does not fire for same tab).\n *\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options.storageKey - localStorage key\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'theme-current', grayscale: 'theme-grayscale' }\n * const store = localStorageThemeStore(themes, { storageKey: 'theme' })\n * store.read() // returns themeResult from localStorage\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function localStorageThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: { storageKey: string }\n) {\n\tconst { storageKey } = options\n\n\tif (typeof window === 'undefined' || !window.localStorage) {\n\t\treturn dummyThemeStore satisfies ThemeStore<Themes>\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 = window.localStorage.getItem(storageKey)\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\twindow.localStorage.removeItem(storageKey)\n\t\t\t\t} else {\n\t\t\t\t\twindow.localStorage.setItem(storageKey, JSON.stringify(entry))\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\n\t\t\tconst onStorage = (e: StorageEvent) => {\n\t\t\t\tif (e.key === storageKey && e.storageArea === window.localStorage) notify()\n\t\t\t}\n\t\t\twindow.addEventListener('storage', onStorage)\n\n\t\t\treturn () => {\n\t\t\t\thandlers.delete(handler)\n\t\t\t\twindow.removeEventListener('storage', onStorage)\n\t\t\t}\n\t\t}\n\t} satisfies ThemeStore<Themes>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,SAAgB,uBACf,QACA,SACC;CACD,MAAM,EAAE,eAAe;AAEvB,KAAI,OAAO,WAAW,eAAe,CAAC,OAAO,aAC5C,QAAO;CAGR,MAAM,2BAAW,IAAI,KAAsD;CAC3E,IAAIA,kBAA4C,MAAM,EAAE,SAAS;CAEjE,SAAS,OAAO;EAEf,MAAM,QAAQ,iBAAiB,QADhB,OAAO,aAAa,QAAQ,WAAW,CACR;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,QAAO,aAAa,WAAW,WAAW;QAE1C,QAAO,aAAa,QAAQ,YAAY,KAAK,UAAU,MAAM,CAAC;AAE/D,YAAQ;WACD;;EAIT,UAAU,SAAS;AAClB,YAAS,IAAI,QAAQ;GAErB,MAAM,aAAa,MAAoB;AACtC,QAAI,EAAE,QAAQ,cAAc,EAAE,gBAAgB,OAAO,aAAc,SAAQ;;AAE5E,UAAO,iBAAiB,WAAW,UAAU;AAE7C,gBAAa;AACZ,aAAS,OAAO,QAAQ;AACxB,WAAO,oBAAoB,WAAW,UAAU;;;EAGlD"}
+{"version":3,"file":"local-storage-theme-store.mjs","names":["lastNotifiedKey: keyof Themes | undefined"],"sources":["../../../../src/theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts"],"sourcesContent":["import { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'\nimport { readLocalStorage } from '../../local-storage/read-local-storage.ts'\nimport { writeLocalStorage } from '../../local-storage/write-local-storage.ts'\nimport type { ParseStoredTheme, StringifyStoredTheme, ThemeEntry } 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 backed by localStorage.\n *\n * Persists across sessions; cross-tab sync via StorageEvent.\n * Same-tab writes trigger manual notify (StorageEvent does not fire for same tab).\n *\n * @param themes - Record mapping theme keys to values (for validation)\n * @param options.storageKey - localStorage key\n * @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)\n * @param options.stringify - Optional custom serializer (default: JSON.stringify)\n * @param options.onError - Optional callback invoked when storage write throws\n * @returns ThemeStore\n *\n * @example\n * ```ts\n * const themes = { current: 'theme-current', grayscale: 'theme-grayscale' }\n * const store = localStorageThemeStore(themes, { storageKey: 'theme' })\n * store.read() // returns themeResult from localStorage\n * store.write(themeEntry(themes, 'grayscale'))\n * store.subscribe((themeResult) => {})\n * ```\n */\nexport function localStorageThemeStore<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tstorageKey: string\n\t\tparse?: ParseStoredTheme<Themes> | undefined\n\t\tstringify?: StringifyStoredTheme<Themes> | undefined\n\t\tonError?: ((error: unknown) => void) | undefined\n\t}\n) {\n\tconst { storageKey, parse, stringify, onError } = options\n\n\tif (!window?.localStorage) {\n\t\treturn dummyThemeStore satisfies ThemeStore<Themes>\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 readLocalStorage(themes, storageKey, { 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\twriteLocalStorage(themes, storageKey, entry, { stringify, onError })\n\t\t\tnotify()\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\thandlers.add(handler)\n\n\t\t\tconst onStorage = (e: StorageEvent) => {\n\t\t\t\tif (e.key === storageKey && e.storageArea === window.localStorage) notify()\n\t\t\t}\n\t\t\twindow.addEventListener('storage', onStorage)\n\n\t\t\treturn () => {\n\t\t\t\thandlers.delete(handler)\n\t\t\t\twindow.removeEventListener('storage', onStorage)\n\t\t\t}\n\t\t}\n\t} satisfies ThemeStore<Themes>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,uBACf,QACA,SAMC;CACD,MAAM,EAAE,YAAY,OAAO,WAAW,YAAY;AAElD,KAAI,CAAC,QAAQ,aACZ,QAAO;CAGR,MAAM,2BAAW,IAAI,KAAsD;CAC3E,IAAIA,kBAA4C,MAAM,EAAE,SAAS;CAEjE,SAAS,OAAO;AACf,SAAO,iBAAiB,QAAQ,YAAY,EAAE,OAAO,CAAC;;CAGvD,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,qBAAkB,QAAQ,YAAY,OAAO;IAAE;IAAW;IAAS,CAAC;AACpE,WAAQ;;EAET,UAAU,SAAS;AAClB,YAAS,IAAI,QAAQ;GAErB,MAAM,aAAa,MAAoB;AACtC,QAAI,EAAE,QAAQ,cAAc,EAAE,gBAAgB,OAAO,aAAc,SAAQ;;AAE5E,UAAO,iBAAiB,WAAW,UAAU;AAE7C,gBAAa;AACZ,aAAS,OAAO,QAAQ;AACxB,WAAO,oBAAoB,WAAW,UAAU;;;EAGlD"}

package/dist/theme/theme-store/prefers-color-scheme-theme-store/prefers-color-scheme-theme-store.cjs

@@ -1,6 +1,5 @@
-const require_get_prefers_color_scheme = require('../../../color-scheme/get-prefers-color-scheme.cjs');
-const require_observe_prefers_color_scheme = require('../../../color-scheme/observe-prefers-color-scheme.cjs');
-const require_theme_entry = require('../../theme-entry.cjs');
+const require_read_prefers_color_scheme_theme = require('../../prefers-color-scheme-theme/read-prefers-color-scheme-theme.cjs');
+const require_subscribe_prefers_color_scheme_theme = require('../../prefers-color-scheme-theme/subscribe-prefers-color-scheme-theme.cjs');
 
 //#region src/theme/theme-store/prefers-color-scheme-theme-store/prefers-color-scheme-theme-store.ts
 /**
@@ -26,10 +25,10 @@ const require_theme_entry = require('../../theme-entry.cjs');
 function prefersColorSchemeThemeStore(themes) {
 	return {
 		read() {
-			return require_theme_entry.themeEntry(themes, require_get_prefers_color_scheme.getPrefersColorScheme());
+			return require_read_prefers_color_scheme_theme.readPrefersColorSchemeTheme(themes);
 		},
 		subscribe(handler) {
-			return require_observe_prefers_color_scheme.observePrefersColorScheme((scheme) => handler(require_theme_entry.themeEntry(themes, scheme)));
+			return require_subscribe_prefers_color_scheme_theme.subscribePrefersColorSchemeTheme(themes, handler);
 		}
 	};
 }

package/dist/theme/theme-store/prefers-color-scheme-theme-store/prefers-color-scheme-theme-store.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"prefers-color-scheme-theme-store.cjs","names":["themeEntry","getPrefersColorScheme","observePrefersColorScheme"],"sources":["../../../../src/theme/theme-store/prefers-color-scheme-theme-store/prefers-color-scheme-theme-store.ts"],"sourcesContent":["import type { RequiredPick } from 'type-plus'\nimport { getPrefersColorScheme } from '../../../color-scheme/get-prefers-color-scheme.ts'\nimport { observePrefersColorScheme } from '../../../color-scheme/observe-prefers-color-scheme.ts'\nimport { themeEntry } from '../../theme-entry.ts'\nimport type { ThemeStore } from '../theme-store.types.ts'\n\ntype PrefersColorSchemeThemes = {\n\tlight: string | readonly string[]\n\tdark: string | readonly string[]\n}\n\n/**\n * Creates a read-only theme store that reads from `prefers-color-scheme`.\n *\n * **Color-scheme specific:** Themes must only include `light` and `dark` keys—this store\n * mirrors the system preference which is always one of these.\n *\n * Returns `ThemeEntry` for `light` or `dark` based on system preference.\n * No write method—the value is controlled by the system.\n *\n * @param themes - Record with `light` and `dark` keys mapping to theme values\n * @returns ThemeStore with read and subscribe only\n *\n * @example\n * ```ts\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const store = prefersColorSchemeThemeStore(themes)\n * store.read() // ThemeEntry for current system preference\n * store.subscribe((entry) => {})\n * ```\n */\nexport function prefersColorSchemeThemeStore<Themes extends PrefersColorSchemeThemes>(\n\tthemes: Themes\n): RequiredPick<ThemeStore<Themes>, 'read' | 'subscribe'> {\n\treturn {\n\t\tread() {\n\t\t\treturn themeEntry(themes, getPrefersColorScheme())\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\treturn observePrefersColorScheme((scheme) => handler(themeEntry(themes, scheme)))\n\t\t}\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,6BACf,QACyD;AACzD,QAAO;EACN,OAAO;AACN,UAAOA,+BAAW,QAAQC,wDAAuB,CAAC;;EAEnD,UAAU,SAAS;AAClB,UAAOC,gEAA2B,WAAW,QAAQF,+BAAW,QAAQ,OAAO,CAAC,CAAC;;EAElF"}
+{"version":3,"file":"prefers-color-scheme-theme-store.cjs","names":["readPrefersColorSchemeTheme","subscribePrefersColorSchemeTheme"],"sources":["../../../../src/theme/theme-store/prefers-color-scheme-theme-store/prefers-color-scheme-theme-store.ts"],"sourcesContent":["import type { RequiredPick } from 'type-plus'\nimport { readPrefersColorSchemeTheme } from '../../prefers-color-scheme-theme/read-prefers-color-scheme-theme.ts'\nimport { subscribePrefersColorSchemeTheme } from '../../prefers-color-scheme-theme/subscribe-prefers-color-scheme-theme.ts'\nimport type { ThemeStore } from '../theme-store.types.ts'\n\ntype PrefersColorSchemeThemes = {\n\tlight: string | readonly string[]\n\tdark: string | readonly string[]\n}\n\n/**\n * Creates a read-only theme store that reads from `prefers-color-scheme`.\n *\n * **Color-scheme specific:** Themes must only include `light` and `dark` keys—this store\n * mirrors the system preference which is always one of these.\n *\n * Returns `ThemeEntry` for `light` or `dark` based on system preference.\n * No write method—the value is controlled by the system.\n *\n * @param themes - Record with `light` and `dark` keys mapping to theme values\n * @returns ThemeStore with read and subscribe only\n *\n * @example\n * ```ts\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const store = prefersColorSchemeThemeStore(themes)\n * store.read() // ThemeEntry for current system preference\n * store.subscribe((entry) => {})\n * ```\n */\nexport function prefersColorSchemeThemeStore<Themes extends PrefersColorSchemeThemes>(\n\tthemes: Themes\n): RequiredPick<ThemeStore<Themes>, 'read' | 'subscribe'> {\n\treturn {\n\t\tread() {\n\t\t\treturn readPrefersColorSchemeTheme(themes)\n\t\t},\n\t\tsubscribe(handler) {\n\t\t\treturn subscribePrefersColorSchemeTheme(themes, handler)\n\t\t}\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,6BACf,QACyD;AACzD,QAAO;EACN,OAAO;AACN,UAAOA,oEAA4B,OAAO;;EAE3C,UAAU,SAAS;AAClB,UAAOC,8EAAiC,QAAQ,QAAQ;;EAEzD"}