lume-js 2.0.0-beta.1 → 2.0.0-beta.2

package/README.md

@@ -4,14 +4,14 @@
 
 Minimal reactive state management using only standard JavaScript and HTML. No custom syntax, no build step required, no framework lock-in.
 
-> **Current Release:** v1.0.0 (stable) | **Next Release:** v2.0.0-beta.1  
+> **Current Release:** v1.0.0 (stable) | **Next Release:** v2.0.0-beta.2  
 > Install stable: `npm install lume-js@1.0.0`  
 > Install next: `npm install lume-js@next`
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-[![Version](https://img.shields.io/badge/version-2.0.0--beta.1-orange.svg)](package.json)
-[![Tests](https://img.shields.io/badge/tests-231%20passing-brightgreen.svg)](tests/)
-[![Size](https://img.shields.io/badge/core-2.39KB-blue.svg)](scripts/check-size.js)
+[![Version](https://img.shields.io/badge/version-2.0.0--beta.2-orange.svg)](package.json)
+[![Tests](https://img.shields.io/badge/tests-294%20passing-brightgreen.svg)](tests/)
+[![Size](https://img.shields.io/badge/core-2.15KB-blue.svg)](scripts/check-size.js)
 
 ## Why Lume.js?
 
@@ -19,7 +19,7 @@ Minimal reactive state management using only standard JavaScript and HTML. No cu
 |---------|---------|-----------|-----|-------|
 | Custom Syntax | ❌ No | ✅ `x-data` | ✅ `v-bind` | ✅ JSX |
 | Build Step | ❌ Optional | ❌ Optional | ⚠️ Recommended | ✅ Required |
-| Bundle Size | ~2.4KB | ~15KB | ~35KB | ~45KB |
+| Bundle Size | ~2.15KB | ~15KB | ~35KB | ~45KB |
 | HTML Validation | ✅ Pass | ⚠️ Warnings | ⚠️ Warnings | ❌ JSX |
 | Extensible Handlers | ✅ | ❌ Built-in only | ❌ Built-in only | N/A |
 
@@ -33,7 +33,7 @@ Minimal reactive state management using only standard JavaScript and HTML. No cu
 
 ```html
 <script type="module">
-  import { state, bindDom, effect } from 'https://cdn.jsdelivr.net/npm/lume-js/src/index.js';
+  import { state, bindDom, effect } from 'https://cdn.jsdelivr.net/npm/lume-js/dist/index.min.mjs';
 </script>
 ```
 
@@ -48,7 +48,16 @@ import { state, bindDom } from 'lume-js';
 ```
 
 ### Browser Support
-Works in all modern browsers (Chrome 49+, Firefox 18+, Safari 10+, Edge 79+). **IE11 is NOT supported.**
+
+| Browser | Minimum version |
+|---------|-----------------|
+| Chrome  | 49+             |
+| Firefox | 18+             |
+| Safari  | 10+             |
+| Edge    | 79+             |
+| IE11    | ❌ Not supported |
+
+IE11 cannot be polyfilled — Lume uses `Proxy`.
 
 ---
 
@@ -167,8 +176,6 @@ import { computed, watch, repeat } from 'lume-js/addons';
 - **`watch(store, key, fn)`** — Subscribe to state changes
 - **`repeat(container, store, key, options)`** — Keyed list rendering with element reuse
 
-> **Note:** The `repeat` addon is *experimental*. Its API may evolve in future releases.
-
 ---
 
 ## Documentation

package/dist/addons.min.mjs

@@ -0,0 +1 @@
+function e(e,...t){void 0!==console&&"function"==typeof console.warn&&console.warn(e,...t)}function t(e,...t){void 0!==console&&"function"==typeof console.error&&console.error(e,...t)}const o=new Set;function n(e,t){o.add(e);try{return t()}finally{o.delete(e)}}let r=null;function c(e,o){if("function"!=typeof e)throw Error("effect() requires a function");const c=[];let s=!1;const i=()=>{if(!s){s=!0;try{e()}catch(e){throw t("[Lume.js effect] Error in effect:",e),e}finally{s=!1}}};if(Array.isArray(o)){for(const e of o)if(Array.isArray(e)&&e.length>=2){const[t,...o]=e;if(t&&"function"==typeof t.$subscribe)for(const e of o){let o=!0;const n=t.$subscribe(e,()=>{o?o=!1:i()});c.push(n)}}i()}else{const o=()=>{if(s)return;const i=[...c];c.length=0;const l={fn:e,cleanups:c,execute:o,tracking:{}},u=r;r=l,s=!0;try{n((e,t,o)=>{r===l&&(l.tracking[t]||(l.tracking[t]=!0,l.cleanups.push(o(t,l.execute))))},e)}catch(e){throw c.length=0,c.push(...i),t("[Lume.js effect] Error in effect:",e),e}finally{r=u,s=!1}if(c.length>0)for(const e of i)e();else c.push(...i)};o()}return()=>{for(;c.length;)c.pop()()}}function s(e){if("function"!=typeof e)throw Error("computed() requires a function");let o,n=!1,r=!1,s=!1;const i=[],l=c(()=>{if(!r&&!s){r=!0;try{const t=e();n&&Object.is(t,o)||(o=t,n=!0,i.forEach(e=>e(o)))}catch(e){t("[Lume.js computed] Error in computation:",e),n&&void 0===o||(o=void 0,n=!0,i.forEach(e=>e(o)))}finally{queueMicrotask(()=>{s||(r=!1)})}}});return{get value(){if(!n)throw Error("Computed value accessed before initialization");return o},subscribe(e){if("function"!=typeof e)throw Error("subscribe() requires a function");return i.push(e),n&&e(o),()=>{const t=i.indexOf(e);t>-1&&i.splice(t,1)}},dispose(){s=!0,l(),i.length=0,n=!1,r=!1}}}function i(e,t,o){if(!e.$subscribe)throw Error("store must be created with state()");return e.$subscribe(t,o)}function l(e){const t=document.activeElement;if(!e.contains(t))return null;let o=null,n=null;return"INPUT"!==t.tagName&&"TEXTAREA"!==t.tagName||(o=t.selectionStart,n=t.selectionEnd),()=>{document.body.contains(t)&&(t.focus(),null!==o&&null!==n&&t.setSelectionRange(o,n))}}function u(e,t={}){const{isReorder:o=!1}=t,n=e.scrollTop;if(0===n)return()=>{e.scrollTop=0};let r=null,c=0;if(!o){const t=e.getBoundingClientRect();for(let o=e.firstElementChild;o;o=o.nextElementSibling){const e=o.getBoundingClientRect();if(e.bottom>t.top){r=o,c=e.top-t.top;break}}}return()=>{if(r&&document.body.contains(r)){const t=r.getBoundingClientRect(),o=e.getBoundingClientRect(),n=t.top-o.top-c;e.scrollTop=e.scrollTop+n}else e.scrollTop=n}}function f(o,n,r,c){const{key:s,render:i,create:f,update:a,element:g="div",preserveFocus:b=l,preserveScroll:d=u}=c,p="string"==typeof o?document.querySelector(o):o;if(!p)return e(`[Lume.js] repeat(): container "${o}" not found`),()=>{};if("function"!=typeof s)throw Error("[Lume.js] repeat(): options.key must be a function");if("function"!=typeof i&&"function"!=typeof f)throw Error("[Lume.js] repeat(): options.render or options.create must be a function");const h=new Map,y=new Map,m=new Map,w=new Set;function $(){return"function"==typeof g?g():document.createElement(g)}function E(){const o=n[r];if(!Array.isArray(o))return void e(`[Lume.js] repeat(): store.${r} is not an array`);let c=!1;if(d){const e=new Set(h.keys()),t=new Set(o.map(e=>s(e)));c=e.size===t.size&&[...e].every(e=>t.has(e))}w.clear();const l=new Set,u=[];for(let n=0;n<o.length;n++){const r=o[n],c=s(r);if(w.has(c)){e(`[Lume.js] repeat(): duplicate key "${c}"`);continue}w.add(c),l.add(c);let g=h.get(c);const b=!g;b&&(g=$(),h.set(c,g));try{b&&f&&f(r,g,n);const e=y.get(c),t=m.get(c);a?e===r&&t===n||a(r,g,n,{isFirstRender:b}):i&&i(r,g,n),y.set(c,r),m.set(c,n)}catch(e){t(`[Lume.js] repeat(): error rendering key "${c}":`,e)}u.push(g)}!function(e,t,o){const n=document.body.contains(e),r=n&&b?b(e):null,c=n&&d?d(e,{isReorder:o}):null;(()=>{if(function(e,t){let o=e.firstChild;for(let n=0;n<t.length;n++){const r=t[n];o!==r?e.insertBefore(r,o):o=o.nextSibling}for(;o;){const t=o.nextSibling;e.removeChild(o),o=t}}(p,u),h.size!==l.size)for(const e of h.keys())l.has(e)||(h.delete(e),y.delete(e),m.delete(e))})(),r&&r(),c&&c()}(p,0,c)}let S;if("function"==typeof n.$subscribe)S=n.$subscribe(r,E);else{if("function"!=typeof n.subscribe)return E(),e("[Lume.js] repeat(): store is not reactive (no $subscribe or subscribe method)"),()=>{p.replaceChildren(),h.clear(),y.clear(),m.clear(),w.clear()};{const e=n.subscribe(()=>E());E(),S="function"==typeof e?e:()=>{e?.unsubscribe?.()}}}return()=>{"function"==typeof S&&S(),p.replaceChildren(),h.clear(),y.clear(),m.clear(),w.clear()}}let a=!0,g=null;const b=new Map;function d(e){return null===g||("string"==typeof g?e.includes(g):!(g instanceof RegExp)||g.test(e))}function p(e){return b.has(e)||b.set(e,{gets:new Map,sets:new Map,notifies:new Map}),b.get(e)}function h(e,t,o){const n=p(e)[t];n.set(o,(n.get(o)||0)+1)}const y=100,m=97;function w(e){try{const t=JSON.stringify(e);return t.length>y?t.slice(0,m)+"...":t}catch{return e+""}}function $(e={}){const t=e.label??"store",o=(t,o)=>{const n=e[t];return void 0!==n?n:o};return{name:"debug:"+t,onInit:()=>{a&&console.log(`%c[${t}]%c initialized`,"color: #888; font-weight: bold","color: inherit")},onGet:(e,n)=>("string"==typeof e&&e.startsWith("$")||(h(t,"gets",e),a&&o("logGet",!1)&&d(e)&&console.log(`%c[${t}]%c GET %c${e}%c = ${w(n)}`,"color: #888; font-weight: bold","color: #4CAF50","color: #2196F3; font-weight: bold","color: inherit")),n),onSet:(e,n,r)=>("string"==typeof e&&e.startsWith("$")||(h(t,"sets",e),a&&o("logSet",!0)&&d(e)&&(console.log(`%c[${t}]%c SET %c${e}%c: ${w(r)} → ${w(n)}`,"color: #888; font-weight: bold","color: #FF9800","color: #2196F3; font-weight: bold","color: inherit"),o("trace",!1)&&console.trace(`%c[${t}] Stack trace for ${e}`,"color: #888"))),n),onSubscribe:e=>{a&&d(e)&&console.log(`%c[${t}]%c SUBSCRIBE %c${e}`,"color: #888; font-weight: bold","color: #9C27B0","color: #2196F3; font-weight: bold")},onNotify:(e,n)=>{"string"==typeof e&&e.startsWith("$")||(h(t,"notifies",e),a&&o("logNotify",!0)&&d(e)&&console.log(`%c[${t}]%c NOTIFY %c${e}%c = ${w(n)}`,"color: #888; font-weight: bold","color: #E91E63","color: #2196F3; font-weight: bold","color: inherit"))}}}const E={enable(){a=!0,console.log("%c[lume-debug]%c Logging enabled","color: #888; font-weight: bold","color: #4CAF50")},disable(){a=!1,console.log("%c[lume-debug]%c Logging disabled","color: #888; font-weight: bold","color: #F44336")},isEnabled:()=>a,filter(e){g=e,console.log(null===e?"%c[lume-debug]%c Filter cleared":"%c[lume-debug]%c Filter set: "+e,"color: #888; font-weight: bold","color: inherit")},getFilter:()=>g,stats(){const e={};for(const[t,o]of b)e[t]={gets:Object.fromEntries(o.gets),sets:Object.fromEntries(o.sets),notifies:Object.fromEntries(o.notifies)};return e},logStats(){const e=this.stats();if(0===Object.keys(e).length)return console.log("%c[lume-debug]%c No stats collected yet","color: #888; font-weight: bold","color: inherit"),e;console.group("%c[lume-debug] Statistics","color: #888; font-weight: bold");for(const[t,o]of Object.entries(e)){console.group("%c"+t,"color: #2196F3; font-weight: bold");const e=[],n=new Set([...Object.keys(o.gets),...Object.keys(o.sets),...Object.keys(o.notifies)]);for(const t of n)e.push({key:t,gets:o.gets[t]||0,sets:o.sets[t]||0,notifies:o.notifies[t]||0});e.length>0&&console.table(e),console.groupEnd()}return console.groupEnd(),e},resetStats(){b.clear(),console.log("%c[lume-debug]%c Stats reset","color: #888; font-weight: bold","color: inherit")}};function S(e,o=[]){if(!o.length)return e;for(const e of o)try{e.onInit?.()}catch(o){t(`[Lume.js] Plugin "${e.name}" error in onInit:`,o)}const n=new Map;return"function"==typeof e.$beforeFlush&&e.$beforeFlush(function(){for(const[e,r]of n)for(const n of o)try{n.onNotify?.(e,r)}catch(e){t(`[Lume.js] Plugin "${n.name}" error in onNotify:`,e)}n.clear()}),new Proxy(e,{get(e,n){if("string"==typeof n&&n.startsWith("$")){const r=e[n];return"$subscribe"===n&&"function"==typeof r?(e,n)=>{for(const n of o)try{n.onSubscribe?.(e)}catch(e){t(`[Lume.js] Plugin "${n.name}" error in onSubscribe:`,e)}return r(e,n)}:r}let r=e[n];for(const e of o)try{const t=e.onGet?.(n,r);void 0!==t&&(r=t)}catch(o){t(`[Lume.js] Plugin "${e.name}" error in onGet:`,o)}return r},set(e,r,c){const s=e[r];let i=c;for(const e of o)try{const t=e.onSet?.(r,i,s);void 0!==t&&(i=t)}catch(o){t(`[Lume.js] Plugin "${e.name}" error in onSet:`,o)}return Object.is(i,s)||n.set(r,i),e[r]=i,!0}})}function j(e){return!(!e||"object"!=typeof e||"function"!=typeof e.$subscribe)}export{s as computed,$ as createDebugPlugin,E as debug,l as defaultFocusPreservation,u as defaultScrollPreservation,j as isReactive,f as repeat,i as watch,S as withPlugins};

package/dist/addons.mjs

@@ -0,0 +1,587 @@
+import { e as effect, a as logError, l as logWarn } from "./shared-DMnPGlYI.mjs";
+function computed(fn) {
+  if (typeof fn !== "function") {
+    throw new Error("computed() requires a function");
+  }
+  let cachedValue;
+  let isInitialized = false;
+  let isInComputation = false;
+  let disposed = false;
+  const subscribers = [];
+  const cleanupEffect = effect(() => {
+    if (isInComputation || disposed) return;
+    isInComputation = true;
+    try {
+      const newValue = fn();
+      if (!isInitialized || !Object.is(newValue, cachedValue)) {
+        cachedValue = newValue;
+        isInitialized = true;
+        subscribers.forEach((callback) => callback(cachedValue));
+      }
+    } catch (error) {
+      logError("[Lume.js computed] Error in computation:", error);
+      if (!isInitialized || cachedValue !== void 0) {
+        cachedValue = void 0;
+        isInitialized = true;
+        subscribers.forEach((callback) => callback(cachedValue));
+      }
+    } finally {
+      queueMicrotask(() => {
+        if (!disposed) {
+          isInComputation = false;
+        }
+      });
+    }
+  });
+  return {
+    /**
+     * Get the current computed value
+     */
+    get value() {
+      if (!isInitialized) {
+        throw new Error("Computed value accessed before initialization");
+      }
+      return cachedValue;
+    },
+    /**
+     * Subscribe to changes in computed value
+     * 
+     * @param {function} callback - Called when value changes
+     * @returns {function} Unsubscribe function
+     */
+    subscribe(callback) {
+      if (typeof callback !== "function") {
+        throw new Error("subscribe() requires a function");
+      }
+      subscribers.push(callback);
+      if (isInitialized) {
+        callback(cachedValue);
+      }
+      return () => {
+        const index = subscribers.indexOf(callback);
+        if (index > -1) {
+          subscribers.splice(index, 1);
+        }
+      };
+    },
+    /**
+     * Clean up computed value and stop tracking
+     */
+    dispose() {
+      disposed = true;
+      cleanupEffect();
+      subscribers.length = 0;
+      isInitialized = false;
+      isInComputation = false;
+    }
+  };
+}
+function watch(store, key, callback) {
+  if (!store.$subscribe) {
+    throw new Error("store must be created with state()");
+  }
+  return store.$subscribe(key, callback);
+}
+function defaultFocusPreservation(container) {
+  const activeEl = document.activeElement;
+  const shouldRestore = container.contains(activeEl);
+  if (!shouldRestore) return null;
+  let selectionStart = null;
+  let selectionEnd = null;
+  if (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA") {
+    selectionStart = activeEl.selectionStart;
+    selectionEnd = activeEl.selectionEnd;
+  }
+  return () => {
+    if (document.body.contains(activeEl)) {
+      activeEl.focus();
+      if (selectionStart !== null && selectionEnd !== null) {
+        activeEl.setSelectionRange(selectionStart, selectionEnd);
+      }
+    }
+  };
+}
+function defaultScrollPreservation(container, context = {}) {
+  const { isReorder = false } = context;
+  const scrollTop = container.scrollTop;
+  if (scrollTop === 0) {
+    return () => {
+      container.scrollTop = 0;
+    };
+  }
+  let anchorElement = null;
+  let anchorOffset = 0;
+  if (!isReorder) {
+    const containerRect = container.getBoundingClientRect();
+    for (let child = container.firstElementChild; child; child = child.nextElementSibling) {
+      const rect = child.getBoundingClientRect();
+      if (rect.bottom > containerRect.top) {
+        anchorElement = child;
+        anchorOffset = rect.top - containerRect.top;
+        break;
+      }
+    }
+  }
+  return () => {
+    if (anchorElement && document.body.contains(anchorElement)) {
+      const newRect = anchorElement.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const currentOffset = newRect.top - containerRect.top;
+      const scrollAdjustment = currentOffset - anchorOffset;
+      container.scrollTop = container.scrollTop + scrollAdjustment;
+    } else {
+      container.scrollTop = scrollTop;
+    }
+  };
+}
+function repeat(container, store, arrayKey, options) {
+  const {
+    key,
+    render,
+    create,
+    update,
+    element = "div",
+    preserveFocus = defaultFocusPreservation,
+    preserveScroll = defaultScrollPreservation
+  } = options;
+  const containerEl = typeof container === "string" ? document.querySelector(container) : container;
+  if (!containerEl) {
+    logWarn(`[Lume.js] repeat(): container "${container}" not found`);
+    return () => {
+    };
+  }
+  if (typeof key !== "function") {
+    throw new Error("[Lume.js] repeat(): options.key must be a function");
+  }
+  if (typeof render !== "function" && typeof create !== "function") {
+    throw new Error("[Lume.js] repeat(): options.render or options.create must be a function");
+  }
+  const elementsByKey = /* @__PURE__ */ new Map();
+  const prevItemsByKey = /* @__PURE__ */ new Map();
+  const prevIndexByKey = /* @__PURE__ */ new Map();
+  const seenKeys = /* @__PURE__ */ new Set();
+  function createElement() {
+    return typeof element === "function" ? element() : document.createElement(element);
+  }
+  function reconcileDOM(container2, nextEls) {
+    let ptr = container2.firstChild;
+    for (let i = 0; i < nextEls.length; i++) {
+      const desired = nextEls[i];
+      if (ptr === desired) {
+        ptr = ptr.nextSibling;
+        continue;
+      }
+      container2.insertBefore(desired, ptr);
+    }
+    while (ptr) {
+      const next = ptr.nextSibling;
+      container2.removeChild(ptr);
+      ptr = next;
+    }
+  }
+  function applyPreservation(container2, fn, isReorder) {
+    const shouldPreserve = document.body.contains(container2);
+    const restoreFocus = shouldPreserve && preserveFocus ? preserveFocus(container2) : null;
+    const restoreScroll = shouldPreserve && preserveScroll ? preserveScroll(container2, { isReorder }) : null;
+    fn();
+    if (restoreFocus) restoreFocus();
+    if (restoreScroll) restoreScroll();
+  }
+  function updateList() {
+    const items = store[arrayKey];
+    if (!Array.isArray(items)) {
+      logWarn(`[Lume.js] repeat(): store.${arrayKey} is not an array`);
+      return;
+    }
+    let isReorder = false;
+    if (preserveScroll) {
+      const previousKeys = new Set(elementsByKey.keys());
+      const currentKeys = new Set(items.map((item) => key(item)));
+      isReorder = previousKeys.size === currentKeys.size && [...previousKeys].every((k) => currentKeys.has(k));
+    }
+    seenKeys.clear();
+    const nextKeys = /* @__PURE__ */ new Set();
+    const nextEls = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const k = key(item);
+      if (seenKeys.has(k)) {
+        logWarn(`[Lume.js] repeat(): duplicate key "${k}"`);
+        continue;
+      }
+      seenKeys.add(k);
+      nextKeys.add(k);
+      let el = elementsByKey.get(k);
+      const isFirstRender = !el;
+      if (isFirstRender) {
+        el = createElement();
+        elementsByKey.set(k, el);
+      }
+      try {
+        if (isFirstRender && create) {
+          create(item, el, i);
+        }
+        const prevItem = prevItemsByKey.get(k);
+        const prevIndex = prevIndexByKey.get(k);
+        if (update) {
+          if (prevItem !== item || prevIndex !== i) {
+            update(item, el, i, { isFirstRender });
+          }
+        } else if (render) {
+          render(item, el, i);
+        }
+        prevItemsByKey.set(k, item);
+        prevIndexByKey.set(k, i);
+      } catch (err) {
+        logError(`[Lume.js] repeat(): error rendering key "${k}":`, err);
+      }
+      nextEls.push(el);
+    }
+    applyPreservation(containerEl, () => {
+      reconcileDOM(containerEl, nextEls);
+      if (elementsByKey.size !== nextKeys.size) {
+        for (const k of elementsByKey.keys()) {
+          if (!nextKeys.has(k)) {
+            elementsByKey.delete(k);
+            prevItemsByKey.delete(k);
+            prevIndexByKey.delete(k);
+          }
+        }
+      }
+    }, isReorder);
+  }
+  let unsubscribe;
+  if (typeof store.$subscribe === "function") {
+    unsubscribe = store.$subscribe(arrayKey, updateList);
+  } else if (typeof store.subscribe === "function") {
+    const subResult = store.subscribe(() => updateList());
+    updateList();
+    unsubscribe = typeof subResult === "function" ? subResult : () => {
+      subResult?.unsubscribe?.();
+    };
+  } else {
+    updateList();
+    logWarn("[Lume.js] repeat(): store is not reactive (no $subscribe or subscribe method)");
+    return () => {
+      containerEl.replaceChildren();
+      elementsByKey.clear();
+      prevItemsByKey.clear();
+      prevIndexByKey.clear();
+      seenKeys.clear();
+    };
+  }
+  return () => {
+    if (typeof unsubscribe === "function") {
+      unsubscribe();
+    }
+    containerEl.replaceChildren();
+    elementsByKey.clear();
+    prevItemsByKey.clear();
+    prevIndexByKey.clear();
+    seenKeys.clear();
+  };
+}
+let globalEnabled = true;
+let globalFilter = null;
+const stats = /* @__PURE__ */ new Map();
+function matchesFilter(key) {
+  if (globalFilter === null) return true;
+  if (typeof globalFilter === "string") {
+    return key.includes(globalFilter);
+  }
+  if (globalFilter instanceof RegExp) {
+    return globalFilter.test(key);
+  }
+  return true;
+}
+function getStats(label) {
+  if (!stats.has(label)) {
+    stats.set(label, {
+      gets: /* @__PURE__ */ new Map(),
+      sets: /* @__PURE__ */ new Map(),
+      notifies: /* @__PURE__ */ new Map()
+    });
+  }
+  return stats.get(label);
+}
+function incrementStat(label, type, key) {
+  const s = getStats(label);
+  const map = s[type];
+  map.set(key, (map.get(key) || 0) + 1);
+}
+const MAX_LOG_LEN = 100;
+const TRUNCATED_LEN = MAX_LOG_LEN - 3;
+function formatValue(value) {
+  try {
+    const json = JSON.stringify(value);
+    if (json.length > MAX_LOG_LEN) {
+      return json.slice(0, TRUNCATED_LEN) + "...";
+    }
+    return json;
+  } catch {
+    return String(value);
+  }
+}
+function createDebugPlugin(options = {}) {
+  const label = options.label ?? "store";
+  const getOpt = (name, defaultVal) => {
+    const val = options[name];
+    return val !== void 0 ? val : defaultVal;
+  };
+  return {
+    name: `debug:${label}`,
+    onInit: () => {
+      if (globalEnabled) {
+        console.log(`%c[${label}]%c initialized`, "color: #888; font-weight: bold", "color: inherit");
+      }
+    },
+    onGet: (key, value) => {
+      if (typeof key === "string" && key.startsWith("$")) {
+        return value;
+      }
+      incrementStat(label, "gets", key);
+      if (globalEnabled && getOpt("logGet", false) && matchesFilter(key)) {
+        console.log(
+          `%c[${label}]%c GET %c${key}%c = ${formatValue(value)}`,
+          "color: #888; font-weight: bold",
+          "color: #4CAF50",
+          "color: #2196F3; font-weight: bold",
+          "color: inherit"
+        );
+      }
+      return value;
+    },
+    onSet: (key, newValue, oldValue) => {
+      if (typeof key === "string" && key.startsWith("$")) {
+        return newValue;
+      }
+      incrementStat(label, "sets", key);
+      if (globalEnabled && getOpt("logSet", true) && matchesFilter(key)) {
+        console.log(
+          `%c[${label}]%c SET %c${key}%c: ${formatValue(oldValue)} → ${formatValue(newValue)}`,
+          "color: #888; font-weight: bold",
+          "color: #FF9800",
+          "color: #2196F3; font-weight: bold",
+          "color: inherit"
+        );
+        if (getOpt("trace", false)) {
+          console.trace(`%c[${label}] Stack trace for ${key}`, "color: #888");
+        }
+      }
+      return newValue;
+    },
+    onSubscribe: (key) => {
+      if (globalEnabled && matchesFilter(key)) {
+        console.log(
+          `%c[${label}]%c SUBSCRIBE %c${key}`,
+          "color: #888; font-weight: bold",
+          "color: #9C27B0",
+          "color: #2196F3; font-weight: bold"
+        );
+      }
+    },
+    onNotify: (key, value) => {
+      if (typeof key === "string" && key.startsWith("$")) {
+        return;
+      }
+      incrementStat(label, "notifies", key);
+      if (globalEnabled && getOpt("logNotify", true) && matchesFilter(key)) {
+        console.log(
+          `%c[${label}]%c NOTIFY %c${key}%c = ${formatValue(value)}`,
+          "color: #888; font-weight: bold",
+          "color: #E91E63",
+          "color: #2196F3; font-weight: bold",
+          "color: inherit"
+        );
+      }
+    }
+  };
+}
+const debug = {
+  /**
+   * Enable debug logging globally
+   */
+  enable() {
+    globalEnabled = true;
+    console.log("%c[lume-debug]%c Logging enabled", "color: #888; font-weight: bold", "color: #4CAF50");
+  },
+  /**
+   * Disable debug logging globally
+   */
+  disable() {
+    globalEnabled = false;
+    console.log("%c[lume-debug]%c Logging disabled", "color: #888; font-weight: bold", "color: #F44336");
+  },
+  /**
+   * Check if debug logging is currently enabled
+   * @returns {boolean}
+   */
+  isEnabled() {
+    return globalEnabled;
+  },
+  /**
+   * Filter logs by key pattern
+   * @param {string|RegExp|null} pattern - Pattern to match, or null to clear filter
+   */
+  filter(pattern) {
+    globalFilter = pattern;
+    if (pattern === null) {
+      console.log("%c[lume-debug]%c Filter cleared", "color: #888; font-weight: bold", "color: inherit");
+    } else {
+      console.log(`%c[lume-debug]%c Filter set: ${pattern}`, "color: #888; font-weight: bold", "color: inherit");
+    }
+  },
+  /**
+   * Get current filter pattern
+   * @returns {string|RegExp|null}
+   */
+  getFilter() {
+    return globalFilter;
+  },
+  /**
+   * Get statistics data (silent - no console output)
+   * Use logStats() if you want to see stats in console.
+   * @returns {object} Stats object for programmatic access
+   */
+  stats() {
+    const result = {};
+    for (const [label, data] of stats) {
+      result[label] = {
+        gets: Object.fromEntries(data.gets),
+        sets: Object.fromEntries(data.sets),
+        notifies: Object.fromEntries(data.notifies)
+      };
+    }
+    return result;
+  },
+  /**
+   * Log statistics summary to console (with formatting)
+   * @returns {object} Stats object for programmatic access
+   */
+  logStats() {
+    const result = this.stats();
+    if (Object.keys(result).length === 0) {
+      console.log("%c[lume-debug]%c No stats collected yet", "color: #888; font-weight: bold", "color: inherit");
+      return result;
+    }
+    console.group("%c[lume-debug] Statistics", "color: #888; font-weight: bold");
+    for (const [label, data] of Object.entries(result)) {
+      console.group(`%c${label}`, "color: #2196F3; font-weight: bold");
+      const tableData = [];
+      const allKeys = /* @__PURE__ */ new Set([
+        ...Object.keys(data.gets),
+        ...Object.keys(data.sets),
+        ...Object.keys(data.notifies)
+      ]);
+      for (const key of allKeys) {
+        tableData.push({
+          key,
+          gets: data.gets[key] || 0,
+          sets: data.sets[key] || 0,
+          notifies: data.notifies[key] || 0
+        });
+      }
+      if (tableData.length > 0) {
+        console.table(tableData);
+      }
+      console.groupEnd();
+    }
+    console.groupEnd();
+    return result;
+  },
+  /**
+   * Reset all collected statistics
+   */
+  resetStats() {
+    stats.clear();
+    console.log("%c[lume-debug]%c Stats reset", "color: #888; font-weight: bold", "color: inherit");
+  }
+};
+function withPlugins(store, plugins = []) {
+  if (!plugins.length) return store;
+  for (const p of plugins) {
+    try {
+      p.onInit?.();
+    } catch (e) {
+      logError(`[Lume.js] Plugin "${p.name}" error in onInit:`, e);
+    }
+  }
+  const pendingNotifications = /* @__PURE__ */ new Map();
+  function runNotifyHooks() {
+    for (const [key, value] of pendingNotifications) {
+      for (const p of plugins) {
+        try {
+          p.onNotify?.(key, value);
+        } catch (e) {
+          logError(`[Lume.js] Plugin "${p.name}" error in onNotify:`, e);
+        }
+      }
+    }
+    pendingNotifications.clear();
+  }
+  if (typeof store.$beforeFlush === "function") {
+    store.$beforeFlush(runNotifyHooks);
+  }
+  return new Proxy(store, {
+    get(target, key) {
+      if (typeof key === "string" && key.startsWith("$")) {
+        const method = target[key];
+        if (key === "$subscribe" && typeof method === "function") {
+          return (subKey, fn) => {
+            for (const p of plugins) {
+              try {
+                p.onSubscribe?.(subKey);
+              } catch (e) {
+                logError(`[Lume.js] Plugin "${p.name}" error in onSubscribe:`, e);
+              }
+            }
+            return method(subKey, fn);
+          };
+        }
+        return method;
+      }
+      let value = target[key];
+      for (const p of plugins) {
+        try {
+          const r = p.onGet?.(key, value);
+          if (r !== void 0) value = r;
+        } catch (e) {
+          logError(`[Lume.js] Plugin "${p.name}" error in onGet:`, e);
+        }
+      }
+      return value;
+    },
+    set(target, key, value) {
+      const oldValue = target[key];
+      let newValue = value;
+      for (const p of plugins) {
+        try {
+          const r = p.onSet?.(key, newValue, oldValue);
+          if (r !== void 0) newValue = r;
+        } catch (e) {
+          logError(`[Lume.js] Plugin "${p.name}" error in onSet:`, e);
+        }
+      }
+      if (!Object.is(newValue, oldValue)) {
+        pendingNotifications.set(key, newValue);
+      }
+      target[key] = newValue;
+      return true;
+    }
+  });
+}
+function isReactive(obj) {
+  return !!(obj && typeof obj === "object" && typeof obj.$subscribe === "function");
+}
+export {
+  computed,
+  createDebugPlugin,
+  debug,
+  defaultFocusPreservation,
+  defaultScrollPreservation,
+  isReactive,
+  repeat,
+  watch,
+  withPlugins
+};
+//# sourceMappingURL=addons.mjs.map