pixel-data-js 0.0.1 → 0.0.3

package/README.md

@@ -1,24 +1,60 @@
 # Pixel Data JS
 
-A library of functions for interacting with pixel data and ImageData objects.
+A **🔥Performance🔥** library of functions for interacting with pixel data and ImageData objects.
 This package is designed to be a tree-shake friendly list of functions.
 
+[Documentation](https://unstoppablecarl.github.io/pixel-data-js/)
+
 ## Installation
 
 `$ npm i pixel-data-js`
 
 
-## Example Usage
+## High-Performance Pixel Manipulation with `Uint32Array`
+
+The `ImageData.data` object is a `Uint8ClampedArray`.
+It is easy to use but, it is inefficient for heavy processing because every single pixel requires four separate write operations (Red, Green, Blue, and Alpha).
+By using a `Uint32Array` view, we can treat all four color channels as a single 32-bit integer, allowing us to update an entire pixel in a single CPU operation.
+
+## The Concept: 32-bit Packing
+A single pixel consists of four 8-bit channels (R, G, B, A). The entire color's data can fit into a single 32-bit unsigned integer `8 * 4 = 32` (`Color32`).
+
+## Example
+
+```ts
+import { packColor } from 'pixel-data-js'
+
+const ctx = canvas.getContext('2d')
+const imageData = ctx.getImageData(0, 0, width, height)
+
+// 1. Get the underlying buffer
+const buffer = imageData.data.buffer
+
+// 2. Create a 32-bit view of that same buffer
+const data32 = new Uint32Array(buffer)
+
+// 3. Write a single pixel (Red: 255, Green: 100, Blue: 0, Alpha: 255)
+// This is 4x faster than writing to imageData.data[i...i+3]
+data32[0] = packColor(255, 100, 0, 255)
+
+// 4. Push back to canvas
+ctx.putImageData(imageData, 0, 0)
+```
+### Color Integers
+
+You can define colors using the `AABBGGRR` (Little-Endian) to make a `Color32` object.
 
 
 ## Building
 
 `$ pnpm install`
+
 `$ pnpm run build`
 
 ## Testing
 
 `$ pnpm run test`
+
 `$ pnpm run test:mutation`
 
 ## Releases Automation

package/dist/index.dev.cjs

@@ -20,144 +20,63 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  createPiniaSimplePersist: () => createPiniaSimplePersist,
-  makeSimplePersistMapper: () => makeSimplePersistMapper
+  base64DecodeArrayBuffer: () => base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer: () => base64EncodeArrayBuffer,
+  deserializeImageData: () => deserializeImageData,
+  deserializeNullableImageData: () => deserializeNullableImageData,
+  deserializeRawImageData: () => deserializeRawImageData,
+  serializeImageData: () => serializeImageData,
+  serializeNullableImageData: () => serializeNullableImageData
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/plugin.ts
-var import_pinia = require("pinia");
-function createPiniaSimplePersist(globalOptions = {}) {
-  const makeKey = globalOptions.makeKey ?? ((id) => `pinia-${id}`);
-  return (context) => {
-    const { store, options } = context;
-    ensureStoreHasRestoreState(store);
-    ensureStoreHasSerializeState(store);
-    const persist = options.persist;
-    if (!persist) return;
-    const {
-      key = makeKey(store.$id),
-      storage = localStorage,
-      serializer = {
-        serialize: JSON.stringify,
-        deserialize: JSON.parse
-      },
-      debounce = 0,
-      beforeRestore,
-      afterRestore,
-      onRestoreError
-    } = { ...globalOptions, ...persist };
-    const restoreState = () => {
-      beforeRestore?.(context);
-      const stored = storage.getItem(key);
-      if (!stored) return;
-      try {
-        const data = serializer.deserialize(stored);
-        store.$restoreState(data);
-        afterRestore?.(context);
-      } catch (error) {
-        if (onRestoreError) {
-          onRestoreError(error instanceof Error ? error : new Error(String(error)));
-        } else {
-          throw error;
-        }
-      }
-    };
-    const saveState = () => {
-      const state = store.$serializeState();
-      const serialized = serializer.serialize(state);
-      storage.setItem(key, serialized);
-    };
-    let finalSave = saveState;
-    let cleanupDebounce;
-    if (debounce) {
-      const { debouncedFn, cleanup } = makeDebounce(saveState, debounce);
-      finalSave = debouncedFn;
-      cleanupDebounce = cleanup;
-    }
-    const unsubscribe = store.$subscribe(() => {
-      finalSave();
-    }, { detached: true });
-    const originalDispose = store.$dispose;
-    store.$dispose = function() {
-      unsubscribe();
-      cleanupDebounce?.();
-      originalDispose.call(this);
-    };
-    restoreState();
-  };
+// src/ImageData/serialization.ts
+function base64EncodeArrayBuffer(buffer) {
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  return btoa(binary);
 }
-var makeDebounce = (callback, waitFor) => {
-  let timeout;
-  const debouncedFn = () => {
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      callback();
-    }, waitFor);
-  };
-  const cleanup = () => {
-    if (timeout) {
-      clearTimeout(timeout);
-      timeout = void 0;
-    }
-  };
-  return { debouncedFn, cleanup };
-};
-function ensureStoreHasRestoreState(store) {
-  if (typeof store.$restoreState !== "function") {
-    throw new Error("A store using pinia-simple-persist must have a $restoreState() method");
+function base64DecodeArrayBuffer(encoded) {
+  const binary = atob(encoded);
+  const bytes = new Uint8ClampedArray(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
   }
+  return bytes;
 }
-function ensureStoreHasSerializeState(store) {
-  if (typeof store.$serializeState !== "function") {
-    throw new Error("A store using pinia-simple-persist must have a $serializeState() method");
-  }
+function serializeImageData(imageData) {
+  return {
+    width: imageData.width,
+    height: imageData.height,
+    data: base64EncodeArrayBuffer(imageData.data.buffer)
+  };
 }
-
-// src/mapper.ts
-var import_vue = require("vue");
-function makeSimplePersistMapper(state, defaults) {
+function serializeNullableImageData(imageData) {
+  if (!imageData) return null;
+  return serializeImageData(imageData);
+}
+function deserializeRawImageData(serialized) {
   return {
-    $serializeState() {
-      const out = {};
-      for (const key in state) {
-        const item = state[key];
-        let value;
-        if ((0, import_vue.isRef)(item)) {
-          value = item.value;
-        } else {
-          value = item;
-        }
-        out[key] = (0, import_vue.isReactive)(value) ? (0, import_vue.toRaw)(value) : value;
-      }
-      return out;
-    },
-    $restoreState(data) {
-      for (const key in state) {
-        if (!(key in data)) continue;
-        const item = state[key];
-        if ((0, import_vue.isRef)(item)) {
-          item.value = data[key];
-        } else if ((0, import_vue.isReactive)(item)) {
-          Object.assign(item, data[key]);
-        }
-      }
-    },
-    $reset() {
-      for (const key in state) {
-        const item = state[key];
-        if ((0, import_vue.isRef)(item)) {
-          item.value = defaults[key];
-        } else if ((0, import_vue.isReactive)(item)) {
-          Object.assign(item, defaults[key]);
-        }
-      }
-    }
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data)
   };
 }
+function deserializeImageData(serialized) {
+  const data = base64DecodeArrayBuffer(serialized.data);
+  return new ImageData(data, serialized.width, serialized.height);
+}
+function deserializeNullableImageData(serialized) {
+  if (!serialized) return null;
+  return deserializeImageData(serialized);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createPiniaSimplePersist,
-  makeSimplePersistMapper
+  base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer,
+  deserializeImageData,
+  deserializeNullableImageData,
+  deserializeRawImageData,
+  serializeImageData,
+  serializeNullableImageData
 });
 //# sourceMappingURL=index.dev.cjs.map

package/dist/index.dev.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/plugin.ts","../src/mapper.ts"],"sourcesContent":["export * from './plugin'\nexport { makeSimplePersistMapper } from './mapper'\n","import type { PiniaPluginContext } from 'pinia'\nimport 'pinia'\nimport type { Serializer, StorageLike } from './types'\n\nexport type BaseSimplePersistOptions<Serialized> = {\n  storage?: StorageLike\n  serializer?: Serializer<Serialized>,\n  debounce?: number\n  beforeRestore?: (context: PiniaPluginContext) => void\n  afterRestore?: (context: PiniaPluginContext) => void,\n  onRestoreError?: (err: Error) => void,\n}\n\nexport type GlobalSimplePersistOptions = BaseSimplePersistOptions<any> & {\n  makeKey?: (storeId: string) => string,\n}\n\nexport type SimplePersistOptions<Serialized> = BaseSimplePersistOptions<Serialized> & {\n  key?: string,\n}\n\nexport function createPiniaSimplePersist(globalOptions: GlobalSimplePersistOptions = {}) {\n  const makeKey = globalOptions.makeKey ?? ((id: string) => `pinia-${id}`)\n\n  return (context: PiniaPluginContext) => {\n    const { store, options } = context\n\n    ensureStoreHasRestoreState(store)\n    ensureStoreHasSerializeState(store)\n\n    const persist = options.persist as SimplePersistOptions<any> | undefined\n    if (!persist) return\n\n    const {\n      key = makeKey(store.$id),\n      storage = localStorage,\n      serializer = {\n        serialize: JSON.stringify,\n        deserialize: JSON.parse,\n      },\n      debounce = 0,\n      beforeRestore,\n      afterRestore,\n      onRestoreError,\n    } = { ...globalOptions, ...persist }\n\n    const restoreState = () => {\n      beforeRestore?.(context)\n\n      const stored = storage.getItem(key)\n      if (!stored) return\n\n      try {\n        const data = serializer.deserialize(stored)\n        store.$restoreState(data)\n        afterRestore?.(context)\n      } catch (error) {\n        if (onRestoreError) {\n          onRestoreError(error instanceof Error ? error : new Error(String(error)))\n        } else {\n          throw error\n        }\n      }\n    }\n\n    const saveState = () => {\n      const state = store.$serializeState()\n      const serialized = serializer.serialize(state)\n      storage.setItem(key, serialized)\n    }\n\n    let finalSave = saveState\n    let cleanupDebounce: (() => void) | undefined\n\n    if (debounce) {\n      const { debouncedFn, cleanup } = makeDebounce(saveState, debounce)\n      finalSave = debouncedFn\n      cleanupDebounce = cleanup\n    }\n\n    // Watch for changes and persist\n    const unsubscribe = store.$subscribe(() => {\n      finalSave()\n    }, { detached: true })\n\n    // Cleanup on store disposal\n    const originalDispose = store.$dispose\n    store.$dispose = function() {\n      unsubscribe()\n      cleanupDebounce?.()\n      originalDispose.call(this)\n    }\n\n    // Restore state on initialization\n    restoreState()\n  }\n}\n\nconst makeDebounce = <T extends () => void>(\n  callback: T,\n  waitFor: number,\n) => {\n  let timeout: ReturnType<typeof setTimeout> | undefined\n\n  const debouncedFn = (): void => {\n    if (timeout) clearTimeout(timeout)\n    timeout = setTimeout(() => {\n      callback()\n    }, waitFor)\n  }\n\n  const cleanup = (): void => {\n    if (timeout) {\n      clearTimeout(timeout)\n      timeout = undefined\n    }\n  }\n\n  return { debouncedFn, cleanup }\n}\n\nfunction ensureStoreHasRestoreState<T>(store: T): asserts store is T & { $restoreState: (data: any) => void } {\n  if (typeof (store as any).$restoreState !== 'function') {\n    throw new Error('A store using pinia-simple-persist must have a $restoreState() method')\n  }\n}\n\nfunction ensureStoreHasSerializeState<T>(store: T): asserts store is T & { $serializeState: () => any } {\n  if (typeof (store as any).$serializeState !== 'function') {\n    throw new Error('A store using pinia-simple-persist must have a $serializeState() method')\n  }\n}\n","import type { Ref } from 'vue'\nimport { toRaw, isRef, isReactive } from 'vue'\n\ntype RefOrReactive<T> = Ref<T> | T\n\nexport function makeSimplePersistMapper<T extends Record<string, any>>(\n  state: { [K in keyof T]: RefOrReactive<T[K]> },\n  defaults: T,\n) {\n  return {\n    $serializeState(): T {\n      const out = {} as T\n      for (const key in state) {\n        const item = state[key]\n        let value: any\n\n        if (isRef(item)) {\n          value = item.value\n        } else {\n          value = item\n        }\n\n        out[key] = isReactive(value) ? toRaw(value) : value\n      }\n      return out\n    },\n\n    $restoreState(data: T) {\n      for (const key in state) {\n        if (!(key in data)) continue\n\n        const item = state[key]\n\n        if (isRef(item)) {\n          item.value = data[key]\n        } else if (isReactive(item)) {\n          Object.assign(item, data[key])\n        }\n      }\n    },\n\n    $reset() {\n      for (const key in state) {\n        const item = state[key]\n\n        if (isRef(item)) {\n          item.value = defaults[key]\n        } else if (isReactive(item)) {\n          Object.assign(item, defaults[key])\n        }\n      }\n    },\n  }\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/ImageData/serialization.ts"],"sourcesContent":["export * from './ImageData/serialization'\n","import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'\n\nexport function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {\n  const binary = String.fromCharCode(...new Uint8Array(buffer))\n  return btoa(binary) as Base64EncodedUInt8Array\n}\n\nexport function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {\n  const binary = atob(encoded)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n  return bytes\n}\n\n/**\n * Serialize for use in JSON. Pixel data is stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64EncodeArrayBuffer(imageData.data.buffer),\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {\n  return {\n    width: serialized.width,\n    height: serialized.height,\n    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),\n  }\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)\n\n  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEO,SAAS,wBAAwB,QAAkD;AACxF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,MAAM,CAAC;AAC5D,SAAO,KAAK,MAAM;AACpB;AAEO,SAAS,wBAAwB,SAAqD;AAC3F,QAAM,SAAS,KAAK,OAAO;AAC3B,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AACA,SAAO;AACT;AAKO,SAAS,mBAA4C,WAAmC;AAC7F,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM,wBAAwB,UAAU,KAAK,MAAM;AAAA,EACrD;AACF;AAEO,SAAS,2BAA2D,WAA2D;AACpI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,wBAAuD,YAA8B;AACnG,SAAO;AAAA,IACL,OAAO,WAAW;AAAA,IAClB,QAAQ,WAAW;AAAA,IACnB,MAAM,wBAAwB,WAAW,IAA+B;AAAA,EAC1E;AACF;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,OAAO,wBAAwB,WAAW,IAA+B;AAE/E,SAAO,IAAI,UAAU,MAAwB,WAAW,OAAO,WAAW,MAAM;AAClF;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}

package/dist/index.dev.js

@@ -1,135 +1,49 @@
-// src/plugin.ts
-import "pinia";
-function createPiniaSimplePersist(globalOptions = {}) {
-  const makeKey = globalOptions.makeKey ?? ((id) => `pinia-${id}`);
-  return (context) => {
-    const { store, options } = context;
-    ensureStoreHasRestoreState(store);
-    ensureStoreHasSerializeState(store);
-    const persist = options.persist;
-    if (!persist) return;
-    const {
-      key = makeKey(store.$id),
-      storage = localStorage,
-      serializer = {
-        serialize: JSON.stringify,
-        deserialize: JSON.parse
-      },
-      debounce = 0,
-      beforeRestore,
-      afterRestore,
-      onRestoreError
-    } = { ...globalOptions, ...persist };
-    const restoreState = () => {
-      beforeRestore?.(context);
-      const stored = storage.getItem(key);
-      if (!stored) return;
-      try {
-        const data = serializer.deserialize(stored);
-        store.$restoreState(data);
-        afterRestore?.(context);
-      } catch (error) {
-        if (onRestoreError) {
-          onRestoreError(error instanceof Error ? error : new Error(String(error)));
-        } else {
-          throw error;
-        }
-      }
-    };
-    const saveState = () => {
-      const state = store.$serializeState();
-      const serialized = serializer.serialize(state);
-      storage.setItem(key, serialized);
-    };
-    let finalSave = saveState;
-    let cleanupDebounce;
-    if (debounce) {
-      const { debouncedFn, cleanup } = makeDebounce(saveState, debounce);
-      finalSave = debouncedFn;
-      cleanupDebounce = cleanup;
-    }
-    const unsubscribe = store.$subscribe(() => {
-      finalSave();
-    }, { detached: true });
-    const originalDispose = store.$dispose;
-    store.$dispose = function() {
-      unsubscribe();
-      cleanupDebounce?.();
-      originalDispose.call(this);
-    };
-    restoreState();
-  };
+// src/ImageData/serialization.ts
+function base64EncodeArrayBuffer(buffer) {
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  return btoa(binary);
 }
-var makeDebounce = (callback, waitFor) => {
-  let timeout;
-  const debouncedFn = () => {
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      callback();
-    }, waitFor);
-  };
-  const cleanup = () => {
-    if (timeout) {
-      clearTimeout(timeout);
-      timeout = void 0;
-    }
-  };
-  return { debouncedFn, cleanup };
-};
-function ensureStoreHasRestoreState(store) {
-  if (typeof store.$restoreState !== "function") {
-    throw new Error("A store using pinia-simple-persist must have a $restoreState() method");
+function base64DecodeArrayBuffer(encoded) {
+  const binary = atob(encoded);
+  const bytes = new Uint8ClampedArray(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
   }
+  return bytes;
 }
-function ensureStoreHasSerializeState(store) {
-  if (typeof store.$serializeState !== "function") {
-    throw new Error("A store using pinia-simple-persist must have a $serializeState() method");
-  }
+function serializeImageData(imageData) {
+  return {
+    width: imageData.width,
+    height: imageData.height,
+    data: base64EncodeArrayBuffer(imageData.data.buffer)
+  };
+}
+function serializeNullableImageData(imageData) {
+  if (!imageData) return null;
+  return serializeImageData(imageData);
 }
-
-// src/mapper.ts
-import { toRaw, isRef, isReactive } from "vue";
-function makeSimplePersistMapper(state, defaults) {
+function deserializeRawImageData(serialized) {
   return {
-    $serializeState() {
-      const out = {};
-      for (const key in state) {
-        const item = state[key];
-        let value;
-        if (isRef(item)) {
-          value = item.value;
-        } else {
-          value = item;
-        }
-        out[key] = isReactive(value) ? toRaw(value) : value;
-      }
-      return out;
-    },
-    $restoreState(data) {
-      for (const key in state) {
-        if (!(key in data)) continue;
-        const item = state[key];
-        if (isRef(item)) {
-          item.value = data[key];
-        } else if (isReactive(item)) {
-          Object.assign(item, data[key]);
-        }
-      }
-    },
-    $reset() {
-      for (const key in state) {
-        const item = state[key];
-        if (isRef(item)) {
-          item.value = defaults[key];
-        } else if (isReactive(item)) {
-          Object.assign(item, defaults[key]);
-        }
-      }
-    }
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data)
   };
 }
+function deserializeImageData(serialized) {
+  const data = base64DecodeArrayBuffer(serialized.data);
+  return new ImageData(data, serialized.width, serialized.height);
+}
+function deserializeNullableImageData(serialized) {
+  if (!serialized) return null;
+  return deserializeImageData(serialized);
+}
 export {
-  createPiniaSimplePersist,
-  makeSimplePersistMapper
+  base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer,
+  deserializeImageData,
+  deserializeNullableImageData,
+  deserializeRawImageData,
+  serializeImageData,
+  serializeNullableImageData
 };
 //# sourceMappingURL=index.dev.js.map

package/dist/index.dev.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/plugin.ts","../src/mapper.ts"],"sourcesContent":["import type { PiniaPluginContext } from 'pinia'\nimport 'pinia'\nimport type { Serializer, StorageLike } from './types'\n\nexport type BaseSimplePersistOptions<Serialized> = {\n  storage?: StorageLike\n  serializer?: Serializer<Serialized>,\n  debounce?: number\n  beforeRestore?: (context: PiniaPluginContext) => void\n  afterRestore?: (context: PiniaPluginContext) => void,\n  onRestoreError?: (err: Error) => void,\n}\n\nexport type GlobalSimplePersistOptions = BaseSimplePersistOptions<any> & {\n  makeKey?: (storeId: string) => string,\n}\n\nexport type SimplePersistOptions<Serialized> = BaseSimplePersistOptions<Serialized> & {\n  key?: string,\n}\n\nexport function createPiniaSimplePersist(globalOptions: GlobalSimplePersistOptions = {}) {\n  const makeKey = globalOptions.makeKey ?? ((id: string) => `pinia-${id}`)\n\n  return (context: PiniaPluginContext) => {\n    const { store, options } = context\n\n    ensureStoreHasRestoreState(store)\n    ensureStoreHasSerializeState(store)\n\n    const persist = options.persist as SimplePersistOptions<any> | undefined\n    if (!persist) return\n\n    const {\n      key = makeKey(store.$id),\n      storage = localStorage,\n      serializer = {\n        serialize: JSON.stringify,\n        deserialize: JSON.parse,\n      },\n      debounce = 0,\n      beforeRestore,\n      afterRestore,\n      onRestoreError,\n    } = { ...globalOptions, ...persist }\n\n    const restoreState = () => {\n      beforeRestore?.(context)\n\n      const stored = storage.getItem(key)\n      if (!stored) return\n\n      try {\n        const data = serializer.deserialize(stored)\n        store.$restoreState(data)\n        afterRestore?.(context)\n      } catch (error) {\n        if (onRestoreError) {\n          onRestoreError(error instanceof Error ? error : new Error(String(error)))\n        } else {\n          throw error\n        }\n      }\n    }\n\n    const saveState = () => {\n      const state = store.$serializeState()\n      const serialized = serializer.serialize(state)\n      storage.setItem(key, serialized)\n    }\n\n    let finalSave = saveState\n    let cleanupDebounce: (() => void) | undefined\n\n    if (debounce) {\n      const { debouncedFn, cleanup } = makeDebounce(saveState, debounce)\n      finalSave = debouncedFn\n      cleanupDebounce = cleanup\n    }\n\n    // Watch for changes and persist\n    const unsubscribe = store.$subscribe(() => {\n      finalSave()\n    }, { detached: true })\n\n    // Cleanup on store disposal\n    const originalDispose = store.$dispose\n    store.$dispose = function() {\n      unsubscribe()\n      cleanupDebounce?.()\n      originalDispose.call(this)\n    }\n\n    // Restore state on initialization\n    restoreState()\n  }\n}\n\nconst makeDebounce = <T extends () => void>(\n  callback: T,\n  waitFor: number,\n) => {\n  let timeout: ReturnType<typeof setTimeout> | undefined\n\n  const debouncedFn = (): void => {\n    if (timeout) clearTimeout(timeout)\n    timeout = setTimeout(() => {\n      callback()\n    }, waitFor)\n  }\n\n  const cleanup = (): void => {\n    if (timeout) {\n      clearTimeout(timeout)\n      timeout = undefined\n    }\n  }\n\n  return { debouncedFn, cleanup }\n}\n\nfunction ensureStoreHasRestoreState<T>(store: T): asserts store is T & { $restoreState: (data: any) => void } {\n  if (typeof (store as any).$restoreState !== 'function') {\n    throw new Error('A store using pinia-simple-persist must have a $restoreState() method')\n  }\n}\n\nfunction ensureStoreHasSerializeState<T>(store: T): asserts store is T & { $serializeState: () => any } {\n  if (typeof (store as any).$serializeState !== 'function') {\n    throw new Error('A store using pinia-simple-persist must have a $serializeState() method')\n  }\n}\n","import type { Ref } from 'vue'\nimport { toRaw, isRef, isReactive } from 'vue'\n\ntype RefOrReactive<T> = Ref<T> | T\n\nexport function makeSimplePersistMapper<T extends Record<string, any>>(\n  state: { [K in keyof T]: RefOrReactive<T[K]> },\n  defaults: T,\n) {\n  return {\n    $serializeState(): T {\n      const out = {} as T\n      for (const key in state) {\n        const item = state[key]\n        let value: any\n\n        if (isRef(item)) {\n          value = item.value\n        } else {\n          value = item\n        }\n\n        out[key] = isReactive(value) ? toRaw(value) : value\n      }\n      return out\n    },\n\n    $restoreState(data: T) {\n      for (const key in state) {\n        if (!(key in data)) continue\n\n        const item = state[key]\n\n        if (isRef(item)) {\n          item.value = data[key]\n        } else if (isReactive(item)) {\n          Object.assign(item, data[key])\n        }\n      }\n    },\n\n    $reset() {\n      for (const key in state) {\n        const item = state[key]\n\n        if (isRef(item)) {\n          item.value = defaults[key]\n        } else if (isReactive(item)) {\n          Object.assign(item, defaults[key])\n        }\n      }\n    },\n  }\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/ImageData/serialization.ts"],"sourcesContent":["import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'\n\nexport function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {\n  const binary = String.fromCharCode(...new Uint8Array(buffer))\n  return btoa(binary) as Base64EncodedUInt8Array\n}\n\nexport function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {\n  const binary = atob(encoded)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n  return bytes\n}\n\n/**\n * Serialize for use in JSON. Pixel data is stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64EncodeArrayBuffer(imageData.data.buffer),\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {\n  return {\n    width: serialized.width,\n    height: serialized.height,\n    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),\n  }\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)\n\n  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";AAEO,SAAS,wBAAwB,QAAkD;AACxF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,MAAM,CAAC;AAC5D,SAAO,KAAK,MAAM;AACpB;AAEO,SAAS,wBAAwB,SAAqD;AAC3F,QAAM,SAAS,KAAK,OAAO;AAC3B,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AACA,SAAO;AACT;AAKO,SAAS,mBAA4C,WAAmC;AAC7F,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM,wBAAwB,UAAU,KAAK,MAAM;AAAA,EACrD;AACF;AAEO,SAAS,2BAA2D,WAA2D;AACpI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,wBAAuD,YAA8B;AACnG,SAAO;AAAA,IACL,OAAO,WAAW;AAAA,IAClB,QAAQ,WAAW;AAAA,IACnB,MAAM,wBAAwB,WAAW,IAA+B;AAAA,EAC1E;AACF;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,OAAO,wBAAwB,WAAW,IAA+B;AAE/E,SAAO,IAAI,UAAU,MAAwB,WAAW,OAAO,WAAW,MAAM;AAClF;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}

package/dist/index.prod.cjs

@@ -20,144 +20,63 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  createPiniaSimplePersist: () => createPiniaSimplePersist,
-  makeSimplePersistMapper: () => makeSimplePersistMapper
+  base64DecodeArrayBuffer: () => base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer: () => base64EncodeArrayBuffer,
+  deserializeImageData: () => deserializeImageData,
+  deserializeNullableImageData: () => deserializeNullableImageData,
+  deserializeRawImageData: () => deserializeRawImageData,
+  serializeImageData: () => serializeImageData,
+  serializeNullableImageData: () => serializeNullableImageData
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/plugin.ts
-var import_pinia = require("pinia");
-function createPiniaSimplePersist(globalOptions = {}) {
-  const makeKey = globalOptions.makeKey ?? ((id) => `pinia-${id}`);
-  return (context) => {
-    const { store, options } = context;
-    ensureStoreHasRestoreState(store);
-    ensureStoreHasSerializeState(store);
-    const persist = options.persist;
-    if (!persist) return;
-    const {
-      key = makeKey(store.$id),
-      storage = localStorage,
-      serializer = {
-        serialize: JSON.stringify,
-        deserialize: JSON.parse
-      },
-      debounce = 0,
-      beforeRestore,
-      afterRestore,
-      onRestoreError
-    } = { ...globalOptions, ...persist };
-    const restoreState = () => {
-      beforeRestore?.(context);
-      const stored = storage.getItem(key);
-      if (!stored) return;
-      try {
-        const data = serializer.deserialize(stored);
-        store.$restoreState(data);
-        afterRestore?.(context);
-      } catch (error) {
-        if (onRestoreError) {
-          onRestoreError(error instanceof Error ? error : new Error(String(error)));
-        } else {
-          throw error;
-        }
-      }
-    };
-    const saveState = () => {
-      const state = store.$serializeState();
-      const serialized = serializer.serialize(state);
-      storage.setItem(key, serialized);
-    };
-    let finalSave = saveState;
-    let cleanupDebounce;
-    if (debounce) {
-      const { debouncedFn, cleanup } = makeDebounce(saveState, debounce);
-      finalSave = debouncedFn;
-      cleanupDebounce = cleanup;
-    }
-    const unsubscribe = store.$subscribe(() => {
-      finalSave();
-    }, { detached: true });
-    const originalDispose = store.$dispose;
-    store.$dispose = function() {
-      unsubscribe();
-      cleanupDebounce?.();
-      originalDispose.call(this);
-    };
-    restoreState();
-  };
+// src/ImageData/serialization.ts
+function base64EncodeArrayBuffer(buffer) {
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  return btoa(binary);
 }
-var makeDebounce = (callback, waitFor) => {
-  let timeout;
-  const debouncedFn = () => {
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      callback();
-    }, waitFor);
-  };
-  const cleanup = () => {
-    if (timeout) {
-      clearTimeout(timeout);
-      timeout = void 0;
-    }
-  };
-  return { debouncedFn, cleanup };
-};
-function ensureStoreHasRestoreState(store) {
-  if (typeof store.$restoreState !== "function") {
-    throw new Error("A store using pinia-simple-persist must have a $restoreState() method");
+function base64DecodeArrayBuffer(encoded) {
+  const binary = atob(encoded);
+  const bytes = new Uint8ClampedArray(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
   }
+  return bytes;
 }
-function ensureStoreHasSerializeState(store) {
-  if (typeof store.$serializeState !== "function") {
-    throw new Error("A store using pinia-simple-persist must have a $serializeState() method");
-  }
+function serializeImageData(imageData) {
+  return {
+    width: imageData.width,
+    height: imageData.height,
+    data: base64EncodeArrayBuffer(imageData.data.buffer)
+  };
 }
-
-// src/mapper.ts
-var import_vue = require("vue");
-function makeSimplePersistMapper(state, defaults) {
+function serializeNullableImageData(imageData) {
+  if (!imageData) return null;
+  return serializeImageData(imageData);
+}
+function deserializeRawImageData(serialized) {
   return {
-    $serializeState() {
-      const out = {};
-      for (const key in state) {
-        const item = state[key];
-        let value;
-        if ((0, import_vue.isRef)(item)) {
-          value = item.value;
-        } else {
-          value = item;
-        }
-        out[key] = (0, import_vue.isReactive)(value) ? (0, import_vue.toRaw)(value) : value;
-      }
-      return out;
-    },
-    $restoreState(data) {
-      for (const key in state) {
-        if (!(key in data)) continue;
-        const item = state[key];
-        if ((0, import_vue.isRef)(item)) {
-          item.value = data[key];
-        } else if ((0, import_vue.isReactive)(item)) {
-          Object.assign(item, data[key]);
-        }
-      }
-    },
-    $reset() {
-      for (const key in state) {
-        const item = state[key];
-        if ((0, import_vue.isRef)(item)) {
-          item.value = defaults[key];
-        } else if ((0, import_vue.isReactive)(item)) {
-          Object.assign(item, defaults[key]);
-        }
-      }
-    }
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data)
   };
 }
+function deserializeImageData(serialized) {
+  const data = base64DecodeArrayBuffer(serialized.data);
+  return new ImageData(data, serialized.width, serialized.height);
+}
+function deserializeNullableImageData(serialized) {
+  if (!serialized) return null;
+  return deserializeImageData(serialized);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createPiniaSimplePersist,
-  makeSimplePersistMapper
+  base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer,
+  deserializeImageData,
+  deserializeNullableImageData,
+  deserializeRawImageData,
+  serializeImageData,
+  serializeNullableImageData
 });
 //# sourceMappingURL=index.prod.cjs.map

package/dist/index.prod.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/plugin.ts","../src/mapper.ts"],"sourcesContent":["export * from './plugin'\nexport { makeSimplePersistMapper } from './mapper'\n","import type { PiniaPluginContext } from 'pinia'\nimport 'pinia'\nimport type { Serializer, StorageLike } from './types'\n\nexport type BaseSimplePersistOptions<Serialized> = {\n  storage?: StorageLike\n  serializer?: Serializer<Serialized>,\n  debounce?: number\n  beforeRestore?: (context: PiniaPluginContext) => void\n  afterRestore?: (context: PiniaPluginContext) => void,\n  onRestoreError?: (err: Error) => void,\n}\n\nexport type GlobalSimplePersistOptions = BaseSimplePersistOptions<any> & {\n  makeKey?: (storeId: string) => string,\n}\n\nexport type SimplePersistOptions<Serialized> = BaseSimplePersistOptions<Serialized> & {\n  key?: string,\n}\n\nexport function createPiniaSimplePersist(globalOptions: GlobalSimplePersistOptions = {}) {\n  const makeKey = globalOptions.makeKey ?? ((id: string) => `pinia-${id}`)\n\n  return (context: PiniaPluginContext) => {\n    const { store, options } = context\n\n    ensureStoreHasRestoreState(store)\n    ensureStoreHasSerializeState(store)\n\n    const persist = options.persist as SimplePersistOptions<any> | undefined\n    if (!persist) return\n\n    const {\n      key = makeKey(store.$id),\n      storage = localStorage,\n      serializer = {\n        serialize: JSON.stringify,\n        deserialize: JSON.parse,\n      },\n      debounce = 0,\n      beforeRestore,\n      afterRestore,\n      onRestoreError,\n    } = { ...globalOptions, ...persist }\n\n    const restoreState = () => {\n      beforeRestore?.(context)\n\n      const stored = storage.getItem(key)\n      if (!stored) return\n\n      try {\n        const data = serializer.deserialize(stored)\n        store.$restoreState(data)\n        afterRestore?.(context)\n      } catch (error) {\n        if (onRestoreError) {\n          onRestoreError(error instanceof Error ? error : new Error(String(error)))\n        } else {\n          throw error\n        }\n      }\n    }\n\n    const saveState = () => {\n      const state = store.$serializeState()\n      const serialized = serializer.serialize(state)\n      storage.setItem(key, serialized)\n    }\n\n    let finalSave = saveState\n    let cleanupDebounce: (() => void) | undefined\n\n    if (debounce) {\n      const { debouncedFn, cleanup } = makeDebounce(saveState, debounce)\n      finalSave = debouncedFn\n      cleanupDebounce = cleanup\n    }\n\n    // Watch for changes and persist\n    const unsubscribe = store.$subscribe(() => {\n      finalSave()\n    }, { detached: true })\n\n    // Cleanup on store disposal\n    const originalDispose = store.$dispose\n    store.$dispose = function() {\n      unsubscribe()\n      cleanupDebounce?.()\n      originalDispose.call(this)\n    }\n\n    // Restore state on initialization\n    restoreState()\n  }\n}\n\nconst makeDebounce = <T extends () => void>(\n  callback: T,\n  waitFor: number,\n) => {\n  let timeout: ReturnType<typeof setTimeout> | undefined\n\n  const debouncedFn = (): void => {\n    if (timeout) clearTimeout(timeout)\n    timeout = setTimeout(() => {\n      callback()\n    }, waitFor)\n  }\n\n  const cleanup = (): void => {\n    if (timeout) {\n      clearTimeout(timeout)\n      timeout = undefined\n    }\n  }\n\n  return { debouncedFn, cleanup }\n}\n\nfunction ensureStoreHasRestoreState<T>(store: T): asserts store is T & { $restoreState: (data: any) => void } {\n  if (typeof (store as any).$restoreState !== 'function') {\n    throw new Error('A store using pinia-simple-persist must have a $restoreState() method')\n  }\n}\n\nfunction ensureStoreHasSerializeState<T>(store: T): asserts store is T & { $serializeState: () => any } {\n  if (typeof (store as any).$serializeState !== 'function') {\n    throw new Error('A store using pinia-simple-persist must have a $serializeState() method')\n  }\n}\n","import type { Ref } from 'vue'\nimport { toRaw, isRef, isReactive } from 'vue'\n\ntype RefOrReactive<T> = Ref<T> | T\n\nexport function makeSimplePersistMapper<T extends Record<string, any>>(\n  state: { [K in keyof T]: RefOrReactive<T[K]> },\n  defaults: T,\n) {\n  return {\n    $serializeState(): T {\n      const out = {} as T\n      for (const key in state) {\n        const item = state[key]\n        let value: any\n\n        if (isRef(item)) {\n          value = item.value\n        } else {\n          value = item\n        }\n\n        out[key] = isReactive(value) ? toRaw(value) : value\n      }\n      return out\n    },\n\n    $restoreState(data: T) {\n      for (const key in state) {\n        if (!(key in data)) continue\n\n        const item = state[key]\n\n        if (isRef(item)) {\n          item.value = data[key]\n        } else if (isReactive(item)) {\n          Object.assign(item, data[key])\n        }\n      }\n    },\n\n    $reset() {\n      for (const key in state) {\n        const item = state[key]\n\n        if (isRef(item)) {\n          item.value = defaults[key]\n        } else if (isReactive(item)) {\n          Object.assign(item, defaults[key])\n        }\n      }\n    },\n  }\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/ImageData/serialization.ts"],"sourcesContent":["export * from './ImageData/serialization'\n","import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'\n\nexport function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {\n  const binary = String.fromCharCode(...new Uint8Array(buffer))\n  return btoa(binary) as Base64EncodedUInt8Array\n}\n\nexport function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {\n  const binary = atob(encoded)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n  return bytes\n}\n\n/**\n * Serialize for use in JSON. Pixel data is stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64EncodeArrayBuffer(imageData.data.buffer),\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {\n  return {\n    width: serialized.width,\n    height: serialized.height,\n    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),\n  }\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)\n\n  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEO,SAAS,wBAAwB,QAAkD;AACxF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,MAAM,CAAC;AAC5D,SAAO,KAAK,MAAM;AACpB;AAEO,SAAS,wBAAwB,SAAqD;AAC3F,QAAM,SAAS,KAAK,OAAO;AAC3B,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AACA,SAAO;AACT;AAKO,SAAS,mBAA4C,WAAmC;AAC7F,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM,wBAAwB,UAAU,KAAK,MAAM;AAAA,EACrD;AACF;AAEO,SAAS,2BAA2D,WAA2D;AACpI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,wBAAuD,YAA8B;AACnG,SAAO;AAAA,IACL,OAAO,WAAW;AAAA,IAClB,QAAQ,WAAW;AAAA,IACnB,MAAM,wBAAwB,WAAW,IAA+B;AAAA,EAC1E;AACF;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,OAAO,wBAAwB,WAAW,IAA+B;AAE/E,SAAO,IAAI,UAAU,MAAwB,WAAW,OAAO,WAAW,MAAM;AAClF;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}

package/dist/index.prod.d.ts

@@ -1,68 +1,26 @@
-import { PiniaPluginContext } from 'pinia';
-import { Ref } from 'vue';
-
-/**
- * Synchronous storage based on Web Storage API.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Storage
- */
-interface StorageLike {
-    /**
-     * Get a key's value if it exists.
-     */
-    getItem: (key: string) => string | null;
-    /**
-     * Set a key with a value, or update it if it exists.
-     */
-    setItem: (key: string, value: string) => void;
-}
-interface Serializer<T> {
-    /**
-     * Serialize state into string before storing.
-     * @default JSON.stringify
-     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
-     */
-    serialize: (data: T) => string;
-    /**
-     * Deserializes string into state before hydrating.
-     * @default JSON.parse
-     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
-     */
-    deserialize: (data: string) => T;
-}
-declare module 'pinia' {
-    interface DefineStoreOptionsBase<S, Store> {
-        persist?: SimplePersistOptions<any> | boolean;
-    }
-    interface PiniaCustomProperties {
-        $persist: () => void;
-        $restoreState?: (data: any) => void;
-        $serializeState?: () => any;
-    }
-}
-
-type BaseSimplePersistOptions<Serialized> = {
-    storage?: StorageLike;
-    serializer?: Serializer<Serialized>;
-    debounce?: number;
-    beforeRestore?: (context: PiniaPluginContext) => void;
-    afterRestore?: (context: PiniaPluginContext) => void;
-    onRestoreError?: (err: Error) => void;
+type ImageDataLike = {
+    width: number;
+    height: number;
+    data: Uint8ClampedArray;
 };
-type GlobalSimplePersistOptions = BaseSimplePersistOptions<any> & {
-    makeKey?: (storeId: string) => string;
+type SerializedImageData = {
+    width: number;
+    height: number;
+    data: string;
 };
-type SimplePersistOptions<Serialized> = BaseSimplePersistOptions<Serialized> & {
-    key?: string;
+type Base64EncodedUInt8Array = string & {
+    readonly __brandBase64UInt8Array: unique symbol;
 };
-declare function createPiniaSimplePersist(globalOptions?: GlobalSimplePersistOptions): (context: PiniaPluginContext) => void;
 
-type RefOrReactive<T> = Ref<T> | T;
-declare function makeSimplePersistMapper<T extends Record<string, any>>(state: {
-    [K in keyof T]: RefOrReactive<T[K]>;
-}, defaults: T): {
-    $serializeState(): T;
-    $restoreState(data: T): void;
-    $reset(): void;
-};
+declare function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array;
+declare function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray;
+/**
+ * Serialize for use in JSON. Pixel data is stored as base64 encoded string.
+ */
+declare function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData;
+declare function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData;
+declare function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike;
+declare function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData;
+declare function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData;
 
-export { type BaseSimplePersistOptions, type GlobalSimplePersistOptions, type SimplePersistOptions, createPiniaSimplePersist, makeSimplePersistMapper };
+export { base64DecodeArrayBuffer, base64EncodeArrayBuffer, deserializeImageData, deserializeNullableImageData, deserializeRawImageData, serializeImageData, serializeNullableImageData };

package/dist/index.prod.js

@@ -1,135 +1,49 @@
-// src/plugin.ts
-import "pinia";
-function createPiniaSimplePersist(globalOptions = {}) {
-  const makeKey = globalOptions.makeKey ?? ((id) => `pinia-${id}`);
-  return (context) => {
-    const { store, options } = context;
-    ensureStoreHasRestoreState(store);
-    ensureStoreHasSerializeState(store);
-    const persist = options.persist;
-    if (!persist) return;
-    const {
-      key = makeKey(store.$id),
-      storage = localStorage,
-      serializer = {
-        serialize: JSON.stringify,
-        deserialize: JSON.parse
-      },
-      debounce = 0,
-      beforeRestore,
-      afterRestore,
-      onRestoreError
-    } = { ...globalOptions, ...persist };
-    const restoreState = () => {
-      beforeRestore?.(context);
-      const stored = storage.getItem(key);
-      if (!stored) return;
-      try {
-        const data = serializer.deserialize(stored);
-        store.$restoreState(data);
-        afterRestore?.(context);
-      } catch (error) {
-        if (onRestoreError) {
-          onRestoreError(error instanceof Error ? error : new Error(String(error)));
-        } else {
-          throw error;
-        }
-      }
-    };
-    const saveState = () => {
-      const state = store.$serializeState();
-      const serialized = serializer.serialize(state);
-      storage.setItem(key, serialized);
-    };
-    let finalSave = saveState;
-    let cleanupDebounce;
-    if (debounce) {
-      const { debouncedFn, cleanup } = makeDebounce(saveState, debounce);
-      finalSave = debouncedFn;
-      cleanupDebounce = cleanup;
-    }
-    const unsubscribe = store.$subscribe(() => {
-      finalSave();
-    }, { detached: true });
-    const originalDispose = store.$dispose;
-    store.$dispose = function() {
-      unsubscribe();
-      cleanupDebounce?.();
-      originalDispose.call(this);
-    };
-    restoreState();
-  };
+// src/ImageData/serialization.ts
+function base64EncodeArrayBuffer(buffer) {
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  return btoa(binary);
 }
-var makeDebounce = (callback, waitFor) => {
-  let timeout;
-  const debouncedFn = () => {
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      callback();
-    }, waitFor);
-  };
-  const cleanup = () => {
-    if (timeout) {
-      clearTimeout(timeout);
-      timeout = void 0;
-    }
-  };
-  return { debouncedFn, cleanup };
-};
-function ensureStoreHasRestoreState(store) {
-  if (typeof store.$restoreState !== "function") {
-    throw new Error("A store using pinia-simple-persist must have a $restoreState() method");
+function base64DecodeArrayBuffer(encoded) {
+  const binary = atob(encoded);
+  const bytes = new Uint8ClampedArray(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
   }
+  return bytes;
 }
-function ensureStoreHasSerializeState(store) {
-  if (typeof store.$serializeState !== "function") {
-    throw new Error("A store using pinia-simple-persist must have a $serializeState() method");
-  }
+function serializeImageData(imageData) {
+  return {
+    width: imageData.width,
+    height: imageData.height,
+    data: base64EncodeArrayBuffer(imageData.data.buffer)
+  };
+}
+function serializeNullableImageData(imageData) {
+  if (!imageData) return null;
+  return serializeImageData(imageData);
 }
-
-// src/mapper.ts
-import { toRaw, isRef, isReactive } from "vue";
-function makeSimplePersistMapper(state, defaults) {
+function deserializeRawImageData(serialized) {
   return {
-    $serializeState() {
-      const out = {};
-      for (const key in state) {
-        const item = state[key];
-        let value;
-        if (isRef(item)) {
-          value = item.value;
-        } else {
-          value = item;
-        }
-        out[key] = isReactive(value) ? toRaw(value) : value;
-      }
-      return out;
-    },
-    $restoreState(data) {
-      for (const key in state) {
-        if (!(key in data)) continue;
-        const item = state[key];
-        if (isRef(item)) {
-          item.value = data[key];
-        } else if (isReactive(item)) {
-          Object.assign(item, data[key]);
-        }
-      }
-    },
-    $reset() {
-      for (const key in state) {
-        const item = state[key];
-        if (isRef(item)) {
-          item.value = defaults[key];
-        } else if (isReactive(item)) {
-          Object.assign(item, defaults[key]);
-        }
-      }
-    }
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data)
   };
 }
+function deserializeImageData(serialized) {
+  const data = base64DecodeArrayBuffer(serialized.data);
+  return new ImageData(data, serialized.width, serialized.height);
+}
+function deserializeNullableImageData(serialized) {
+  if (!serialized) return null;
+  return deserializeImageData(serialized);
+}
 export {
-  createPiniaSimplePersist,
-  makeSimplePersistMapper
+  base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer,
+  deserializeImageData,
+  deserializeNullableImageData,
+  deserializeRawImageData,
+  serializeImageData,
+  serializeNullableImageData
 };
 //# sourceMappingURL=index.prod.js.map

package/dist/index.prod.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/plugin.ts","../src/mapper.ts"],"sourcesContent":["import type { PiniaPluginContext } from 'pinia'\nimport 'pinia'\nimport type { Serializer, StorageLike } from './types'\n\nexport type BaseSimplePersistOptions<Serialized> = {\n  storage?: StorageLike\n  serializer?: Serializer<Serialized>,\n  debounce?: number\n  beforeRestore?: (context: PiniaPluginContext) => void\n  afterRestore?: (context: PiniaPluginContext) => void,\n  onRestoreError?: (err: Error) => void,\n}\n\nexport type GlobalSimplePersistOptions = BaseSimplePersistOptions<any> & {\n  makeKey?: (storeId: string) => string,\n}\n\nexport type SimplePersistOptions<Serialized> = BaseSimplePersistOptions<Serialized> & {\n  key?: string,\n}\n\nexport function createPiniaSimplePersist(globalOptions: GlobalSimplePersistOptions = {}) {\n  const makeKey = globalOptions.makeKey ?? ((id: string) => `pinia-${id}`)\n\n  return (context: PiniaPluginContext) => {\n    const { store, options } = context\n\n    ensureStoreHasRestoreState(store)\n    ensureStoreHasSerializeState(store)\n\n    const persist = options.persist as SimplePersistOptions<any> | undefined\n    if (!persist) return\n\n    const {\n      key = makeKey(store.$id),\n      storage = localStorage,\n      serializer = {\n        serialize: JSON.stringify,\n        deserialize: JSON.parse,\n      },\n      debounce = 0,\n      beforeRestore,\n      afterRestore,\n      onRestoreError,\n    } = { ...globalOptions, ...persist }\n\n    const restoreState = () => {\n      beforeRestore?.(context)\n\n      const stored = storage.getItem(key)\n      if (!stored) return\n\n      try {\n        const data = serializer.deserialize(stored)\n        store.$restoreState(data)\n        afterRestore?.(context)\n      } catch (error) {\n        if (onRestoreError) {\n          onRestoreError(error instanceof Error ? error : new Error(String(error)))\n        } else {\n          throw error\n        }\n      }\n    }\n\n    const saveState = () => {\n      const state = store.$serializeState()\n      const serialized = serializer.serialize(state)\n      storage.setItem(key, serialized)\n    }\n\n    let finalSave = saveState\n    let cleanupDebounce: (() => void) | undefined\n\n    if (debounce) {\n      const { debouncedFn, cleanup } = makeDebounce(saveState, debounce)\n      finalSave = debouncedFn\n      cleanupDebounce = cleanup\n    }\n\n    // Watch for changes and persist\n    const unsubscribe = store.$subscribe(() => {\n      finalSave()\n    }, { detached: true })\n\n    // Cleanup on store disposal\n    const originalDispose = store.$dispose\n    store.$dispose = function() {\n      unsubscribe()\n      cleanupDebounce?.()\n      originalDispose.call(this)\n    }\n\n    // Restore state on initialization\n    restoreState()\n  }\n}\n\nconst makeDebounce = <T extends () => void>(\n  callback: T,\n  waitFor: number,\n) => {\n  let timeout: ReturnType<typeof setTimeout> | undefined\n\n  const debouncedFn = (): void => {\n    if (timeout) clearTimeout(timeout)\n    timeout = setTimeout(() => {\n      callback()\n    }, waitFor)\n  }\n\n  const cleanup = (): void => {\n    if (timeout) {\n      clearTimeout(timeout)\n      timeout = undefined\n    }\n  }\n\n  return { debouncedFn, cleanup }\n}\n\nfunction ensureStoreHasRestoreState<T>(store: T): asserts store is T & { $restoreState: (data: any) => void } {\n  if (typeof (store as any).$restoreState !== 'function') {\n    throw new Error('A store using pinia-simple-persist must have a $restoreState() method')\n  }\n}\n\nfunction ensureStoreHasSerializeState<T>(store: T): asserts store is T & { $serializeState: () => any } {\n  if (typeof (store as any).$serializeState !== 'function') {\n    throw new Error('A store using pinia-simple-persist must have a $serializeState() method')\n  }\n}\n","import type { Ref } from 'vue'\nimport { toRaw, isRef, isReactive } from 'vue'\n\ntype RefOrReactive<T> = Ref<T> | T\n\nexport function makeSimplePersistMapper<T extends Record<string, any>>(\n  state: { [K in keyof T]: RefOrReactive<T[K]> },\n  defaults: T,\n) {\n  return {\n    $serializeState(): T {\n      const out = {} as T\n      for (const key in state) {\n        const item = state[key]\n        let value: any\n\n        if (isRef(item)) {\n          value = item.value\n        } else {\n          value = item\n        }\n\n        out[key] = isReactive(value) ? toRaw(value) : value\n      }\n      return out\n    },\n\n    $restoreState(data: T) {\n      for (const key in state) {\n        if (!(key in data)) continue\n\n        const item = state[key]\n\n        if (isRef(item)) {\n          item.value = data[key]\n        } else if (isReactive(item)) {\n          Object.assign(item, data[key])\n        }\n      }\n    },\n\n    $reset() {\n      for (const key in state) {\n        const item = state[key]\n\n        if (isRef(item)) {\n          item.value = defaults[key]\n        } else if (isReactive(item)) {\n          Object.assign(item, defaults[key])\n        }\n      }\n    },\n  }\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/ImageData/serialization.ts"],"sourcesContent":["import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'\n\nexport function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {\n  const binary = String.fromCharCode(...new Uint8Array(buffer))\n  return btoa(binary) as Base64EncodedUInt8Array\n}\n\nexport function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {\n  const binary = atob(encoded)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n  return bytes\n}\n\n/**\n * Serialize for use in JSON. Pixel data is stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64EncodeArrayBuffer(imageData.data.buffer),\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {\n  return {\n    width: serialized.width,\n    height: serialized.height,\n    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),\n  }\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)\n\n  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";AAEO,SAAS,wBAAwB,QAAkD;AACxF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,MAAM,CAAC;AAC5D,SAAO,KAAK,MAAM;AACpB;AAEO,SAAS,wBAAwB,SAAqD;AAC3F,QAAM,SAAS,KAAK,OAAO;AAC3B,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AACA,SAAO;AACT;AAKO,SAAS,mBAA4C,WAAmC;AAC7F,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM,wBAAwB,UAAU,KAAK,MAAM;AAAA,EACrD;AACF;AAEO,SAAS,2BAA2D,WAA2D;AACpI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,wBAAuD,YAA8B;AACnG,SAAO;AAAA,IACL,OAAO,WAAW;AAAA,IAClB,QAAQ,WAAW;AAAA,IACnB,MAAM,wBAAwB,WAAW,IAA+B;AAAA,EAC1E;AACF;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,OAAO,wBAAwB,WAAW,IAA+B;AAE/E,SAAO,IAAI,UAAU,MAAwB,WAAW,OAAO,WAAW,MAAM;AAClF;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-data-js",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "packageManager": "pnpm@10.30.0",
   "description": "JS Pixel and ImageData operations",
   "author": {

package/src/ImageData/read-write-pixels.ts

@@ -0,0 +1,36 @@
+import type { Color32, ImageDataLike } from '../_types'
+
+export function makeImageDataColor32Adapter(imageData: ImageDataLike) {
+  const data32 = new Uint32Array(imageData.data.buffer)
+
+  function inBounds(x: number, y: number) {
+    return x < 0 || x >= imageData.width || y < 0 || y >= imageData.height
+  }
+
+  function setPixel(
+    x: number,
+    y: number,
+    color: Color32,
+  ): void {
+    if (x < 0 || x >= imageData.width || y < 0 || y >= imageData.height) return
+    data32[y * imageData.width + x] = color
+  }
+
+  function getPixel(
+    x: number,
+    y: number,
+  ): Color32 | undefined {
+    if (x < 0 || x >= imageData.width || y < 0 || y >= imageData.height) return
+
+    return data32[y * imageData.width + x] as Color32
+  }
+
+  return {
+    inBounds,
+    imageData,
+    data32,
+    setPixel,
+    getPixel,
+  }
+}
+

package/src/ImageData/serialization.ts

@@ -1,37 +1,48 @@
-export type SerializedImageData = {
-  width: number,
-  height: number,
-  data: string,
+import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'
+
+export function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {
+  const binary = String.fromCharCode(...new Uint8Array(buffer))
+  return btoa(binary) as Base64EncodedUInt8Array
+}
+
+export function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {
+  const binary = atob(encoded)
+  const bytes = new Uint8ClampedArray(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i)
+  }
+  return bytes
 }
 
 /**
- * Serialize for use in JSON. Stored as base64 encoded string.
+ * Serialize for use in JSON. Pixel data is stored as base64 encoded string.
  */
-export function serializeImageData<T extends ImageData>(imageData: T): SerializedImageData {
-  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer))
-  const base64 = btoa(binary)
-
+export function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {
   return {
     width: imageData.width,
     height: imageData.height,
-    data: base64,
+    data: base64EncodeArrayBuffer(imageData.data.buffer),
   }
 }
 
-export function serializeNullableImageData<T extends ImageData | null>(imageData: T): T extends null ? null : SerializedImageData {
+export function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {
   if (!imageData) return null as any
 
   return serializeImageData(imageData) as any
 }
 
-export function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {
-  const binary = atob(serialized.data as string)
-  const bytes = new Uint8ClampedArray(binary.length)
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i)
+export function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {
+  return {
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),
   }
+}
+
+export function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {
+  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)
 
-  return new ImageData(bytes, serialized.width, serialized.height) as any
+  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any
 }
 
 export function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {

package/src/_types.ts

@@ -0,0 +1,22 @@
+// ALL values are 0-255 (including alpha which in CSS is 0-1)
+export type RGBA = { r: number, g: number, b: number, a: number }
+
+// A 32-bit integer containing r,g,b,a data
+export type Color32 = number & { readonly __brandColor32: unique symbol };
+
+// ALL values are floats from 0-1
+export type RGBAFloat = RGBA & { readonly __brandRGBAFloat: unique symbol }
+
+export type ImageDataLike = {
+  width: number
+  height: number
+  data: Uint8ClampedArray
+}
+
+export type SerializedImageData = {
+  width: number,
+  height: number,
+  data: string,
+}
+
+export type Base64EncodedUInt8Array = string & { readonly __brandBase64UInt8Array: unique symbol }

package/src/color.ts

@@ -0,0 +1,79 @@
+import type { Color32, RGBA } from './_types'
+
+/**
+ * Packs RGBA into a 32-bit integer compatible with
+ * Little-Endian Uint32Array views on ImageData.
+ */
+export function packColor(r: number, g: number, b: number, a: number): Color32 {
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export function packRGBA({ r, g, b, a }: RGBA): Color32 {
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const unpackRed = (packed: Color32): number => (packed >>> 0) & 0xFF
+export const unpackGreen = (packed: Color32): number => (packed >>> 8) & 0xFF
+export const unpackBlue = (packed: Color32): number => (packed >>> 16) & 0xFF
+export const unpackAlpha = (packed: Color32): number => (packed >>> 24) & 0xFF
+
+export function unpackColor(packed: Color32): RGBA {
+  return {
+    r: (packed >>> 0) & 0xFF,
+    g: (packed >>> 8) & 0xFF,
+    b: (packed >>> 16) & 0xFF,
+    a: (packed >>> 24) & 0xFF,
+  }
+}
+
+const SCRATCH_RGBA: RGBA = { r: 0, g: 0, b: 0, a: 0 }
+
+// uses a scratch arg for memory perf. Be careful about re-use.
+export function unpackColorTo(packed: Color32, scratch = SCRATCH_RGBA): RGBA {
+  scratch.r = (packed >>> 0) & 0xFF
+  scratch.g = (packed >>> 8) & 0xFF
+  scratch.b = (packed >>> 16) & 0xFF
+  scratch.a = (packed >>> 24) & 0xFF
+  return scratch
+}
+
+export function colorDistance(a: Color32, b: Color32): number {
+  const dr = (a & 0xFF) - (b & 0xFF)
+  const dg = ((a >>> 8) & 0xFF) - ((b >>> 8) & 0xFF)
+  const db = ((a >>> 16) & 0xFF) - ((b >>> 16) & 0xFF)
+  const da = ((a >>> 24) & 0xFF) - ((b >>> 24) & 0xFF)
+  return dr * dr + dg * dg + db * db + da * da
+}
+
+export function lerpColor32(a: Color32, b: Color32, t: number): Color32 {
+  const r = (a & 0xFF) + t * ((b & 0xFF) - (a & 0xFF))
+  const g = ((a >>> 8) & 0xFF) + t * (((b >>> 8) & 0xFF) - ((a >>> 8) & 0xFF))
+  const b_ = ((a >>> 16) & 0xFF) + t * (((b >>> 16) & 0xFF) - ((a >>> 16) & 0xFF))
+  const a_ = ((a >>> 24) & 0xFF) + t * (((b >>> 24) & 0xFF) - ((a >>> 24) & 0xFF))
+
+  return packColor(r, g, b_, a_)
+}
+
+// Convert 0xAABBGGRR to #RRGGBBAA
+export function color32ToHex(color: Color32): string {
+  const r = (color & 0xFF).toString(16).padStart(2, '0')
+  const g = ((color >>> 8) & 0xFF).toString(16).padStart(2, '0')
+  const b = ((color >>> 16) & 0xFF).toString(16).padStart(2, '0')
+  const a = ((color >>> 24) & 0xFF).toString(16).padStart(2, '0')
+  return `#${r}${g}${b}${a}`
+}
+
+/**
+ * Converts a 32-bit integer (0xAABBGGRR) to a CSS rgba() string.
+ * Example: 0xFF0000FF -> "rgba(255,0,0,1)"
+ */
+export function color32ToCssRGBA(color: Color32): string {
+  const r = color & 0xFF
+  const g = (color >>> 8) & 0xFF
+  const b = (color >>> 16) & 0xFF
+  const a = (color >>> 24) & 0xFF
+
+  const alpha = Number((a / 255).toFixed(3))
+
+  return `rgba(${r},${g},${b},${alpha})`
+}