@getforma/core 1.1.0 → 1.3.0

package/dist/index.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
-var chunkJRQNDXX7_cjs = require('./chunk-JRQNDXX7.cjs');
-var chunk2Y5US35K_cjs = require('./chunk-2Y5US35K.cjs');
-var chunkW7OUWVRA_cjs = require('./chunk-W7OUWVRA.cjs');
+var chunkFBM7V4NE_cjs = require('./chunk-FBM7V4NE.cjs');
+var chunkKUXNZ5MG_cjs = require('./chunk-KUXNZ5MG.cjs');
+var chunkH7MDUHS5_cjs = require('./chunk-H7MDUHS5.cjs');
 
 // src/dom/text.ts
-function createText(value) {
-  if (typeof value === "function") {
+function createText(value2) {
+  if (typeof value2 === "function") {
     const node = new Text("");
-    chunk2Y5US35K_cjs.internalEffect(() => {
-      node.data = value();
+    chunkKUXNZ5MG_cjs.internalEffect(() => {
+      node.data = value2();
     });
     return node;
   }
-  return new Text(value);
+  return new Text(value2);
 }
 
 // src/dom/mount.ts
@@ -24,12 +24,12 @@ function mount(component, container) {
   }
   let disposeRoot;
   if (target.hasAttribute("data-forma-ssr")) {
-    chunk2Y5US35K_cjs.createUnownedRoot((dispose) => {
+    chunkKUXNZ5MG_cjs.createUnownedRoot((dispose) => {
       disposeRoot = dispose;
-      chunkJRQNDXX7_cjs.hydrateIsland(component, target);
+      chunkFBM7V4NE_cjs.hydrateIsland(component, target);
     });
   } else {
-    const dom = chunk2Y5US35K_cjs.createUnownedRoot((dispose) => {
+    const dom = chunkKUXNZ5MG_cjs.createUnownedRoot((dispose) => {
       disposeRoot = dispose;
       return component();
     });
@@ -46,7 +46,7 @@ function mount(component, container) {
 }
 
 // src/dom/switch.ts
-function createSwitch(value, cases, fallback) {
+function createSwitch(value2, cases, fallback) {
   const startMarker = document.createComment("forma-switch");
   const endMarker = document.createComment("/forma-switch");
   const fragment2 = document.createDocumentFragment();
@@ -55,8 +55,8 @@ function createSwitch(value, cases, fallback) {
   const cache2 = /* @__PURE__ */ new Map();
   let currentNode = null;
   let currentMatch = UNSET;
-  const switchDispose = chunk2Y5US35K_cjs.internalEffect(() => {
-    const val = value();
+  const switchDispose = chunkKUXNZ5MG_cjs.internalEffect(() => {
+    const val = value2();
     if (val === currentMatch) return;
     const DEBUG = typeof globalThis.__FORMA_DEBUG__ !== "undefined";
     if (DEBUG) console.log("[forma:switch] transition", String(currentMatch), "\u2192", String(val));
@@ -90,9 +90,9 @@ function createSwitch(value, cases, fallback) {
       let entry = cache2.get(val);
       if (!entry) {
         let branchDispose;
-        const node = chunk2Y5US35K_cjs.createRoot((dispose) => {
+        const node = chunkKUXNZ5MG_cjs.createRoot((dispose) => {
           branchDispose = dispose;
-          return chunk2Y5US35K_cjs.untrack(() => matchedCase.render());
+          return chunkKUXNZ5MG_cjs.untrack(() => matchedCase.render());
         });
         entry = { node, dispose: branchDispose };
         cache2.set(val, entry);
@@ -110,7 +110,7 @@ function createSwitch(value, cases, fallback) {
       if (DEBUG) console.log("[forma:switch] inserted", currentNode.nodeName, "before end marker");
     }
   });
-  chunk2Y5US35K_cjs.registerDisposer(() => {
+  chunkKUXNZ5MG_cjs.registerDisposer(() => {
     for (const entry of cache2.values()) {
       entry.dispose();
     }
@@ -142,7 +142,7 @@ function createPortal(children2, target) {
     }
     mountedNode = null;
   };
-  chunk2Y5US35K_cjs.createEffect(() => {
+  chunkKUXNZ5MG_cjs.createEffect(() => {
     const node = children2();
     removeMountedNode();
     mountedNode = node;
@@ -161,9 +161,9 @@ function createErrorBoundary(tryFn, catchFn) {
   const fragment2 = document.createDocumentFragment();
   fragment2.appendChild(startMarker);
   fragment2.appendChild(endMarker);
-  const [retryCount, setRetryCount] = chunkW7OUWVRA_cjs.createSignal(0);
+  const [retryCount, setRetryCount] = chunkH7MDUHS5_cjs.createSignal(0);
   let currentNode = null;
-  chunk2Y5US35K_cjs.internalEffect(() => {
+  chunkKUXNZ5MG_cjs.internalEffect(() => {
     retryCount();
     const parent2 = startMarker.parentNode;
     if (!parent2) return;
@@ -191,7 +191,7 @@ function createSuspense(fallback, children2) {
   const fragment2 = document.createDocumentFragment();
   fragment2.appendChild(startMarker);
   fragment2.appendChild(endMarker);
-  const [pending, setPending] = chunkW7OUWVRA_cjs.createSignal(0);
+  const [pending, setPending] = chunkH7MDUHS5_cjs.createSignal(0);
   let currentNode = null;
   let resolvedNode = null;
   let fallbackNode = null;
@@ -203,20 +203,26 @@ function createSuspense(fallback, children2) {
       setPending((p) => Math.max(0, p - 1));
     }
   };
-  chunk2Y5US35K_cjs.pushSuspenseContext(ctx);
+  chunkKUXNZ5MG_cjs.pushSuspenseContext(ctx);
   try {
     resolvedNode = children2();
   } finally {
-    chunk2Y5US35K_cjs.popSuspenseContext();
+    chunkKUXNZ5MG_cjs.popSuspenseContext();
   }
-  chunk2Y5US35K_cjs.internalEffect(() => {
+  chunkKUXNZ5MG_cjs.internalEffect(() => {
     const parent2 = startMarker.parentNode;
     if (!parent2) return;
     const isPending = pending() > 0;
     const newNode = isPending ? fallbackNode ??= fallback() : resolvedNode;
     if (newNode === currentNode) return;
-    if (currentNode && currentNode.parentNode === parent2) {
-      parent2.removeChild(currentNode);
+    if (currentNode) {
+      if (currentNode.parentNode === parent2) {
+        parent2.removeChild(currentNode);
+      } else if (currentNode.nodeType === 11) {
+        while (startMarker.nextSibling && startMarker.nextSibling !== endMarker) {
+          currentNode.appendChild(startMarker.nextSibling);
+        }
+      }
     }
     if (newNode) {
       parent2.insertBefore(newNode, endMarker);
@@ -272,40 +278,53 @@ function activateIslands(registry) {
   const sharedProps = scriptBlock ? JSON.parse(scriptBlock.textContent) : null;
   const islands = document.querySelectorAll("[data-forma-island]");
   for (const root of islands) {
+    const status = root.getAttribute("data-forma-status");
+    if (status === "active" || status === "hydrating" || status === "disposed" || status === "error") continue;
+    if (root.__formaScheduled) continue;
+    delete root.__formaDisposed;
     const id = parseInt(root.getAttribute("data-forma-island"), 10);
     const componentName = root.getAttribute("data-forma-component");
     const hydrateFn = registry[componentName];
     if (!hydrateFn) {
-      if (chunkW7OUWVRA_cjs.__DEV__) console.warn(`[forma] No hydrate function for island "${componentName}" (id=${id})`);
+      if (chunkH7MDUHS5_cjs.__DEV__) console.warn(`[forma] No hydrate function for island "${componentName}" (id=${id})`);
       root.setAttribute("data-forma-status", "error");
       continue;
     }
     const trigger2 = root.getAttribute("data-forma-hydrate") || "load";
     if (trigger2 === "visible") {
+      root.__formaScheduled = true;
       const observer = new IntersectionObserver(
         (entries) => {
           for (const entry of entries) {
             if (!entry.isIntersecting) continue;
             observer.disconnect();
+            delete root.__formaObserver;
             hydrateIslandRoot(root, id, componentName, hydrateFn, sharedProps);
           }
         },
         { rootMargin: "200px" }
       );
+      root.__formaObserver = observer;
       observer.observe(root);
     } else if (trigger2 === "idle") {
+      root.__formaScheduled = true;
       const hydrate = () => hydrateIslandRoot(root, id, componentName, hydrateFn, sharedProps);
       if (typeof requestIdleCallback === "function") {
-        requestIdleCallback(hydrate);
+        const handle = requestIdleCallback(hydrate);
+        root.__formaIdleCancel = () => cancelIdleCallback(handle);
       } else {
-        setTimeout(hydrate, 200);
+        const handle = setTimeout(hydrate, 200);
+        root.__formaIdleCancel = () => clearTimeout(handle);
       }
     } else if (trigger2 === "interaction") {
+      root.__formaScheduled = true;
       const hydrate = () => {
         root.removeEventListener("pointerdown", hydrate, true);
         root.removeEventListener("focusin", hydrate, true);
+        delete root.__formaInteractionHandler;
         hydrateIslandRoot(root, id, componentName, hydrateFn, sharedProps);
       };
+      root.__formaInteractionHandler = hydrate;
       root.addEventListener("pointerdown", hydrate, { capture: true, once: true });
       root.addEventListener("focusin", hydrate, { capture: true, once: true });
     } else {
@@ -314,6 +333,24 @@ function activateIslands(registry) {
   }
 }
 function deactivateIsland(el) {
+  const observer = el.__formaObserver;
+  if (observer) {
+    observer.disconnect();
+    delete el.__formaObserver;
+  }
+  const interactionHandler = el.__formaInteractionHandler;
+  if (interactionHandler) {
+    el.removeEventListener("pointerdown", interactionHandler, true);
+    el.removeEventListener("focusin", interactionHandler, true);
+    delete el.__formaInteractionHandler;
+  }
+  const idleCancel = el.__formaIdleCancel;
+  if (idleCancel) {
+    idleCancel();
+    delete el.__formaIdleCancel;
+  }
+  delete el.__formaScheduled;
+  el.__formaDisposed = true;
   const dispose = el.__formaDispose;
   if (typeof dispose === "function") {
     dispose();
@@ -322,23 +359,25 @@ function deactivateIsland(el) {
   }
 }
 function deactivateAllIslands(root = document) {
-  const islands = root.querySelectorAll('[data-forma-status="active"]');
+  const islands = root.querySelectorAll("[data-forma-island]");
   for (const island of islands) {
     deactivateIsland(island);
   }
 }
 function hydrateIslandRoot(root, id, componentName, hydrateFn, sharedProps) {
+  if (root.__formaDisposed) return;
   try {
+    delete root.__formaScheduled;
     const props = loadIslandProps(root, id, sharedProps);
     root.setAttribute("data-forma-status", "hydrating");
     let activeRoot = root;
-    chunk2Y5US35K_cjs.createUnownedRoot((dispose) => {
-      activeRoot = chunkJRQNDXX7_cjs.hydrateIsland(() => hydrateFn(root, props), root);
+    chunkKUXNZ5MG_cjs.createUnownedRoot((dispose) => {
+      activeRoot = chunkFBM7V4NE_cjs.hydrateIsland(() => hydrateFn(root, props), root);
       activeRoot.__formaDispose = dispose;
     });
     activeRoot.setAttribute("data-forma-status", "active");
   } catch (err) {
-    if (chunkW7OUWVRA_cjs.__DEV__) console.error(`[forma] Island "${componentName}" (id=${id}) failed:`, err);
+    if (chunkH7MDUHS5_cjs.__DEV__) console.error(`[forma] Island "${componentName}" (id=${id}) failed:`, err);
     root.setAttribute("data-forma-status", "error");
   }
 }
@@ -387,14 +426,14 @@ function defineComponent(setupOrDef) {
         try {
           cb();
         } catch (e) {
-          chunkW7OUWVRA_cjs.reportError(e, "onUnmount");
+          chunkH7MDUHS5_cjs.reportError(e, "onUnmount");
         }
       }
       for (const d of ctx.disposers) {
         try {
           d();
         } catch (e) {
-          chunkW7OUWVRA_cjs.reportError(e, "component disposer");
+          chunkH7MDUHS5_cjs.reportError(e, "component disposer");
         }
       }
       ctx.disposers.length = 0;
@@ -409,7 +448,7 @@ function defineComponent(setupOrDef) {
           ctx.unmountCallbacks.push(cleanup2);
         }
       } catch (e) {
-        chunkW7OUWVRA_cjs.reportError(e, "onMount");
+        chunkH7MDUHS5_cjs.reportError(e, "onMount");
       }
     }
     return dom;
@@ -436,13 +475,13 @@ function createContext(defaultValue) {
     defaultValue
   };
 }
-function provide(ctx, value) {
+function provide(ctx, value2) {
   let stack = contextStacks.get(ctx.id);
   if (stack === void 0) {
     stack = [];
     contextStacks.set(ctx.id, stack);
   }
-  stack.push(value);
+  stack.push(value2);
 }
 function inject(ctx) {
   const stack = contextStacks.get(ctx.id);
@@ -498,6 +537,19 @@ function deepClone(obj, seen) {
 function createStore(initial) {
   const signals = /* @__PURE__ */ new Map();
   const children2 = /* @__PURE__ */ new Map();
+  const arrayVersions = /* @__PURE__ */ new Map();
+  function getArrayVersion(path) {
+    let p = arrayVersions.get(path);
+    if (!p) {
+      p = chunkH7MDUHS5_cjs.createSignal(0);
+      arrayVersions.set(path, p);
+    }
+    return p;
+  }
+  function bumpArrayVersion(path) {
+    const p = arrayVersions.get(path);
+    if (p) p[1]((n) => n + 1);
+  }
   function registerChild(path) {
     const lastDot = path.lastIndexOf(".");
     if (lastDot === -1) return;
@@ -512,7 +564,7 @@ function createStore(initial) {
   function getSignal(path, initialValue) {
     let pair = signals.get(path);
     if (!pair) {
-      pair = chunkW7OUWVRA_cjs.createSignal(initialValue);
+      pair = chunkH7MDUHS5_cjs.createSignal(initialValue);
       signals.set(path, pair);
       registerChild(path);
     }
@@ -529,14 +581,37 @@ function createStore(initial) {
     }
     childSet.clear();
   }
+  function lastSegment(path) {
+    const d = path.lastIndexOf(".");
+    return d === -1 ? path : path.substring(d + 1);
+  }
+  function setLiteral(pair, v) {
+    pair[1](typeof v === "function" ? chunkH7MDUHS5_cjs.value(v) : v);
+  }
+  function reconcileChildren(parentPath, rawParent) {
+    const set = children2.get(parentPath);
+    if (!set) return;
+    for (const childPath of set) {
+      const key = lastSegment(childPath);
+      const nv = rawParent[key];
+      const pair = signals.get(childPath);
+      if (pair) setLiteral(pair, nv);
+      if (nv != null && typeof nv === "object") {
+        reconcileChildren(childPath, nv);
+      } else {
+        invalidateChildren(childPath);
+      }
+    }
+  }
   function wrap(raw, basePath) {
     if (!shouldWrap(raw)) return raw;
-    const cached = proxyCache.get(raw);
-    if (cached) return cached;
+    let byPath = proxyCache.get(raw);
+    if (byPath) {
+      const hit = byPath.get(basePath);
+      if (hit) return hit;
+    }
     const isArr = Array.isArray(raw);
     const basePrefix = basePath ? basePath + "." : "";
-    let lastKey = "";
-    let lastSignal;
     const proxy = new Proxy(raw, {
       // -------------------------------------------------------------------
       // GET
@@ -552,17 +627,15 @@ function createStore(initial) {
         if (isArr && ARRAY_MUTATORS.has(key)) {
           return (...args) => {
             let result;
-            chunk2Y5US35K_cjs.batch(() => {
+            chunkKUXNZ5MG_cjs.batch(() => {
               const rawArgs = args.map(
                 (a) => a != null && typeof a === "object" && a[RAW] ? a[RAW] : a
               );
               result = target[key].apply(target, rawArgs);
-              invalidateChildren(basePath);
-              const [, setLen] = getSignal(
-                basePrefix + "length",
-                target.length
-              );
-              setLen(target.length);
+              reconcileChildren(basePath, target);
+              const lenPair = signals.get(basePrefix + "length");
+              if (lenPair) lenPair[1](target.length);
+              if (basePath) bumpArrayVersion(basePath);
             });
             return result;
           };
@@ -572,34 +645,32 @@ function createStore(initial) {
           getter();
           return target.length;
         }
-        const value = Reflect.get(target, prop);
-        let pair;
-        if (key === lastKey && lastSignal) {
-          pair = lastSignal;
-        } else {
-          pair = getSignal(childPath, value);
-          lastKey = key;
-          lastSignal = pair;
-        }
+        const value2 = Reflect.get(target, prop);
+        const pair = getSignal(childPath, value2);
         pair[0]();
-        if (shouldWrap(value)) {
-          return wrap(value, childPath);
+        if (Array.isArray(value2)) {
+          getArrayVersion(childPath)[0]();
         }
-        return value;
+        if (shouldWrap(value2)) {
+          return wrap(value2, childPath);
+        }
+        return value2;
       },
       // -------------------------------------------------------------------
       // SET
       // -------------------------------------------------------------------
-      set(target, prop, value) {
+      set(target, prop, value2) {
         if (typeof prop === "symbol") {
-          return Reflect.set(target, prop, value);
+          return Reflect.set(target, prop, value2);
         }
         const key = String(prop);
         const childPath = basePrefix + key;
-        const rawValue = value != null && typeof value === "object" && value[RAW] ? value[RAW] : value;
+        const rawValue = value2 != null && typeof value2 === "object" && value2[RAW] ? value2[RAW] : value2;
+        const oldRaw = Reflect.get(target, prop);
         Reflect.set(target, prop, rawValue);
-        if (rawValue != null && typeof rawValue === "object") {
+        if (rawValue != null && typeof rawValue === "object" && oldRaw !== rawValue) {
           invalidateChildren(childPath);
+          evictProxy(oldRaw, childPath);
         }
         if (isArr && key !== "length") {
           const lengthPath = basePrefix + "length";
@@ -608,6 +679,12 @@ function createStore(initial) {
             lenPair[1](target.length);
           }
         }
+        if (isArr && key === "length") {
+          chunkKUXNZ5MG_cjs.batch(() => {
+            reconcileChildren(basePath, target);
+            if (basePath) bumpArrayVersion(basePath);
+          });
+        }
         const [, setter2] = getSignal(childPath, rawValue);
         setter2(rawValue);
         return true;
@@ -646,31 +723,37 @@ function createStore(initial) {
         }
         const key = String(prop);
         const childPath = basePrefix + key;
+        const oldRaw = Reflect.get(target, prop);
         const result = Reflect.deleteProperty(target, prop);
+        const delPair = signals.get(childPath);
+        if (delPair) delPair[1](void 0);
+        evictProxy(oldRaw, childPath);
         invalidateChildren(childPath);
-        signals.delete(childPath);
-        const parentPath = basePath;
-        if (parentPath !== void 0) {
-          const parentSet = children2.get(parentPath);
-          if (parentSet) {
-            parentSet.delete(childPath);
-            if (parentSet.size === 0) children2.delete(parentPath);
-          }
-        }
-        children2.delete(childPath);
         return result;
       }
     });
-    proxyCache.set(raw, proxy);
+    if (!byPath) {
+      byPath = /* @__PURE__ */ new Map();
+      proxyCache.set(raw, byPath);
+    }
+    byPath.set(basePath, proxy);
     return proxy;
   }
+  function evictProxy(oldRaw, path) {
+    if (oldRaw == null || typeof oldRaw !== "object") return;
+    const om = proxyCache.get(oldRaw);
+    if (om) {
+      om.delete(path);
+      if (om.size === 0) proxyCache.delete(oldRaw);
+    }
+  }
   const rootProxy = wrap(initial, "");
   function getCurrentSnapshot() {
-    return chunk2Y5US35K_cjs.untrack(() => deepClone(initial));
+    return chunkKUXNZ5MG_cjs.untrack(() => deepClone(initial));
   }
   const setter = (partial) => {
     const updates = typeof partial === "function" ? partial(getCurrentSnapshot()) : partial;
-    chunk2Y5US35K_cjs.batch(() => {
+    chunkKUXNZ5MG_cjs.batch(() => {
       for (const key of Object.keys(updates)) {
         rootProxy[key] = updates[key];
       }
@@ -680,60 +763,81 @@ function createStore(initial) {
 }
 
 // src/state/history.ts
+function cloneEntry(v, seen) {
+  if (v === null || typeof v !== "object") return v;
+  const proto = Object.getPrototypeOf(v);
+  if (!Array.isArray(v) && proto !== Object.prototype && proto !== null) return v;
+  if (!seen) seen = /* @__PURE__ */ new WeakSet();
+  if (seen.has(v)) return v;
+  seen.add(v);
+  if (Array.isArray(v)) return v.map((i) => cloneEntry(i, seen));
+  const out = {};
+  for (const k of Object.keys(v)) {
+    out[k] = cloneEntry(v[k], seen);
+  }
+  return out;
+}
 function createHistory(source, options) {
   const [sourceGet, sourceSet] = source;
-  const maxLength = options?.maxLength ?? 100;
-  let _stack = [sourceGet()];
+  const maxLength = Math.max(1, options?.maxLength ?? 100);
+  let _stack = [cloneEntry(sourceGet())];
   let _cursor = 0;
-  const [stackSignal, setStackSignal] = chunkW7OUWVRA_cjs.createSignal([..._stack]);
-  const [cursorSignal, setCursorSignal] = chunkW7OUWVRA_cjs.createSignal(_cursor);
-  const [stackLenSignal, setStackLenSignal] = chunkW7OUWVRA_cjs.createSignal(_stack.length);
+  const [stackSignal, setStackSignal] = chunkH7MDUHS5_cjs.createSignal([..._stack]);
+  const [cursorSignal, setCursorSignal] = chunkH7MDUHS5_cjs.createSignal(_cursor);
+  const [stackLenSignal, setStackLenSignal] = chunkH7MDUHS5_cjs.createSignal(_stack.length);
   function syncSignals() {
-    chunk2Y5US35K_cjs.batch(() => {
+    chunkKUXNZ5MG_cjs.batch(() => {
       setStackSignal([..._stack]);
       setCursorSignal(_cursor);
       setStackLenSignal(_stack.length);
     });
   }
-  let ignoreNext = false;
+  const NONE = /* @__PURE__ */ Symbol("none");
+  let _expected = NONE;
   let isFirstRun = true;
-  chunk2Y5US35K_cjs.internalEffect(() => {
-    const value = sourceGet();
+  const disposeEffect = chunkKUXNZ5MG_cjs.internalEffect(() => {
+    const value2 = sourceGet();
     if (isFirstRun) {
       isFirstRun = false;
       return;
     }
-    if (ignoreNext) {
-      ignoreNext = false;
+    if (_expected !== NONE && Object.is(value2, _expected)) {
+      _expected = NONE;
       return;
     }
+    _expected = NONE;
     _stack = _stack.slice(0, _cursor + 1);
-    _stack.push(value);
+    _stack.push(cloneEntry(value2));
     if (_stack.length > maxLength) {
       _stack.splice(0, _stack.length - maxLength);
     }
     _cursor = _stack.length - 1;
     syncSignals();
   });
+  const destroy = () => {
+    disposeEffect();
+  };
   const canUndo = () => cursorSignal() > 0;
   const canRedo = () => cursorSignal() < stackLenSignal() - 1;
   const undo = () => {
     if (_cursor <= 0) return;
     _cursor--;
-    ignoreNext = true;
-    sourceSet(_stack[_cursor]);
+    const restored = cloneEntry(_stack[_cursor]);
+    _expected = restored;
+    sourceSet(restored);
     syncSignals();
   };
   const redo = () => {
     if (_cursor >= _stack.length - 1) return;
     _cursor++;
-    ignoreNext = true;
-    sourceSet(_stack[_cursor]);
+    const restored = cloneEntry(_stack[_cursor]);
+    _expected = restored;
+    sourceSet(restored);
     syncSignals();
   };
   const clear = () => {
     const currentValue = sourceGet();
-    _stack = [currentValue];
+    _stack = [cloneEntry(currentValue)];
     _cursor = 0;
     syncSignals();
   };
@@ -744,35 +848,91 @@ function createHistory(source, options) {
     canRedo,
     history: () => stackSignal(),
     cursor: () => cursorSignal(),
-    clear
+    clear,
+    destroy
   };
 }
 
 // src/state/persist.ts
+var ENVELOPE_TAG = "$forma:v";
 function persist(source, key, options) {
   const [sourceGet, sourceSet] = source;
   const storage = options?.storage ?? globalThis.localStorage;
   const serialize = options?.serialize ?? JSON.stringify;
   const deserialize = options?.deserialize ?? JSON.parse;
   const validate = options?.validate;
-  try {
-    const stored = storage.getItem(key);
-    if (stored !== null) {
-      const value = deserialize(stored);
-      if (!validate || validate(value)) {
-        sourceSet(value);
+  const version = options?.version;
+  const migrate = options?.migrate;
+  const onError2 = options?.onError;
+  let writing = false;
+  function unwrap(stored) {
+    const parsed = deserialize(stored);
+    if (parsed != null && typeof parsed === "object" && Object.prototype.hasOwnProperty.call(parsed, ENVELOPE_TAG)) {
+      const env = parsed;
+      return { value: env.value, version: Number(env[ENVELOPE_TAG]) };
+    }
+    return { value: parsed, version: 0 };
+  }
+  function hydrate() {
+    let stored;
+    try {
+      stored = storage.getItem(key);
+    } catch (err) {
+      onError2?.(err, "hydrate");
+      return;
+    }
+    if (stored === null) return;
+    try {
+      const { value: raw, version: storedVersion } = unwrap(stored);
+      let value2 = raw;
+      if (version !== void 0 && storedVersion < version) {
+        if (!migrate) return;
+        try {
+          value2 = migrate(raw, storedVersion);
+        } catch (err) {
+          onError2?.(err, "migrate");
+          return;
+        }
+      }
+      if (!validate || validate(value2)) {
+        writing = true;
+        try {
+          sourceSet(value2);
+        } finally {
+          writing = false;
+        }
       }
+    } catch (err) {
+      onError2?.(err, "hydrate");
     }
-  } catch {
   }
-  chunk2Y5US35K_cjs.internalEffect(() => {
-    const value = sourceGet();
+  hydrate();
+  const stopEffect = chunkKUXNZ5MG_cjs.internalEffect(() => {
+    const value2 = sourceGet();
+    if (writing) return;
     try {
-      const serialized = serialize(value);
+      const serialized = version !== void 0 ? serialize({ [ENVELOPE_TAG]: version, value: value2 }) : serialize(value2);
       storage.setItem(key, serialized);
-    } catch {
+    } catch (err) {
+      onError2?.(err, err?.name === "QuotaExceededError" ? "write" : "serialize");
     }
   });
+  const enableSync = options?.syncTabs ?? (typeof window !== "undefined" && storage === globalThis.localStorage);
+  let onStorage;
+  if (enableSync && typeof window !== "undefined") {
+    onStorage = (e) => {
+      if (e.storageArea !== storage) return;
+      if (e.key !== null && e.key !== key) return;
+      hydrate();
+    };
+    window.addEventListener("storage", onStorage);
+  }
+  return () => {
+    stopEffect();
+    if (onStorage && typeof window !== "undefined") {
+      window.removeEventListener("storage", onStorage);
+    }
+  };
 }
 
 // src/events/bus.ts
@@ -919,20 +1079,20 @@ function toggleClass(el, className, force) {
   return el.classList.toggle(className, force);
 }
 function setStyle(el, styles) {
-  for (const [key, value] of Object.entries(styles)) {
-    if (value !== void 0) {
-      el.style[key] = value;
+  for (const [key, value2] of Object.entries(styles)) {
+    if (value2 !== void 0) {
+      el.style[key] = value2;
     }
   }
 }
 function setAttr(el, attrs) {
-  for (const [name, value] of Object.entries(attrs)) {
-    if (value === false || value === null) {
+  for (const [name, value2] of Object.entries(attrs)) {
+    if (value2 === false || value2 === null) {
       el.removeAttribute(name);
-    } else if (value === true) {
+    } else if (value2 === true) {
       el.setAttribute(name, "");
     } else {
-      el.setAttribute(name, value);
+      el.setAttribute(name, value2);
     }
   }
 }
@@ -1023,115 +1183,119 @@ function onMutation(el, handler, options) {
 
 Object.defineProperty(exports, "Fragment", {
   enumerable: true,
-  get: function () { return chunkJRQNDXX7_cjs.Fragment; }
+  get: function () { return chunkFBM7V4NE_cjs.Fragment; }
 });
 Object.defineProperty(exports, "cleanup", {
   enumerable: true,
-  get: function () { return chunkJRQNDXX7_cjs.cleanup; }
+  get: function () { return chunkFBM7V4NE_cjs.cleanup; }
 });
 Object.defineProperty(exports, "createList", {
   enumerable: true,
-  get: function () { return chunkJRQNDXX7_cjs.createList; }
+  get: function () { return chunkFBM7V4NE_cjs.createList; }
 });
 Object.defineProperty(exports, "createShow", {
   enumerable: true,
-  get: function () { return chunkJRQNDXX7_cjs.createShow; }
+  get: function () { return chunkFBM7V4NE_cjs.createShow; }
 });
 Object.defineProperty(exports, "fragment", {
   enumerable: true,
-  get: function () { return chunkJRQNDXX7_cjs.fragment; }
+  get: function () { return chunkFBM7V4NE_cjs.fragment; }
 });
 Object.defineProperty(exports, "h", {
   enumerable: true,
-  get: function () { return chunkJRQNDXX7_cjs.h; }
+  get: function () { return chunkFBM7V4NE_cjs.h; }
 });
 Object.defineProperty(exports, "hydrateIsland", {
   enumerable: true,
-  get: function () { return chunkJRQNDXX7_cjs.hydrateIsland; }
+  get: function () { return chunkFBM7V4NE_cjs.hydrateIsland; }
 });
 Object.defineProperty(exports, "reconcileList", {
   enumerable: true,
-  get: function () { return chunkJRQNDXX7_cjs.reconcileList; }
+  get: function () { return chunkFBM7V4NE_cjs.reconcileList; }
+});
+Object.defineProperty(exports, "svg", {
+  enumerable: true,
+  get: function () { return chunkFBM7V4NE_cjs.svg; }
 });
 Object.defineProperty(exports, "batch", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.batch; }
+  get: function () { return chunkKUXNZ5MG_cjs.batch; }
 });
 Object.defineProperty(exports, "createEffect", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.createEffect; }
+  get: function () { return chunkKUXNZ5MG_cjs.createEffect; }
 });
 Object.defineProperty(exports, "createMemo", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.createMemo; }
+  get: function () { return chunkKUXNZ5MG_cjs.createMemo; }
 });
 Object.defineProperty(exports, "createReducer", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.createReducer; }
+  get: function () { return chunkKUXNZ5MG_cjs.createReducer; }
 });
 Object.defineProperty(exports, "createRef", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.createRef; }
+  get: function () { return chunkKUXNZ5MG_cjs.createRef; }
 });
 Object.defineProperty(exports, "createResource", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.createResource; }
+  get: function () { return chunkKUXNZ5MG_cjs.createResource; }
 });
 Object.defineProperty(exports, "createRoot", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.createRoot; }
+  get: function () { return chunkKUXNZ5MG_cjs.createRoot; }
 });
 Object.defineProperty(exports, "createUnownedRoot", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.createUnownedRoot; }
+  get: function () { return chunkKUXNZ5MG_cjs.createUnownedRoot; }
 });
 Object.defineProperty(exports, "getBatchDepth", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.getBatchDepth; }
+  get: function () { return chunkKUXNZ5MG_cjs.getBatchDepth; }
 });
 Object.defineProperty(exports, "isComputed", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.isComputed; }
+  get: function () { return chunkKUXNZ5MG_cjs.isComputed; }
 });
 Object.defineProperty(exports, "isEffect", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.isEffect; }
+  get: function () { return chunkKUXNZ5MG_cjs.isEffect; }
 });
 Object.defineProperty(exports, "isEffectScope", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.isEffectScope; }
+  get: function () { return chunkKUXNZ5MG_cjs.isEffectScope; }
 });
 Object.defineProperty(exports, "isSignal", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.isSignal; }
+  get: function () { return chunkKUXNZ5MG_cjs.isSignal; }
 });
 Object.defineProperty(exports, "on", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.on; }
+  get: function () { return chunkKUXNZ5MG_cjs.on; }
 });
 Object.defineProperty(exports, "onCleanup", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.onCleanup; }
+  get: function () { return chunkKUXNZ5MG_cjs.onCleanup; }
 });
 Object.defineProperty(exports, "trigger", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.trigger; }
+  get: function () { return chunkKUXNZ5MG_cjs.trigger; }
 });
 Object.defineProperty(exports, "untrack", {
   enumerable: true,
-  get: function () { return chunk2Y5US35K_cjs.untrack; }
+  get: function () { return chunkKUXNZ5MG_cjs.untrack; }
 });
 Object.defineProperty(exports, "createComputed", {
   enumerable: true,
-  get: function () { return chunkW7OUWVRA_cjs.createComputed; }
+  get: function () { return chunkH7MDUHS5_cjs.createComputed; }
 });
 Object.defineProperty(exports, "createSignal", {
   enumerable: true,
-  get: function () { return chunkW7OUWVRA_cjs.createSignal; }
+  get: function () { return chunkH7MDUHS5_cjs.createSignal; }
 });
 Object.defineProperty(exports, "onError", {
   enumerable: true,
-  get: function () { return chunkW7OUWVRA_cjs.onError; }
+  get: function () { return chunkH7MDUHS5_cjs.onError; }
 });
 exports.$ = $;
 exports.$$ = $$;