uentropy 1.0.0

package/dist/index.js

@@ -0,0 +1,954 @@
+// src/context.ts
+function createContext() {
+  return {
+    data: null,
+    prefix: "en-",
+    watchers: /* @__PURE__ */ new Map(),
+    directives: /* @__PURE__ */ new Map(),
+    deps: {
+      isEvaluating: false,
+      set: /* @__PURE__ */ new Set(),
+      map: /* @__PURE__ */ new Map(),
+      versions: /* @__PURE__ */ new Map()
+    },
+    computedResultFns: /* @__PURE__ */ new WeakSet(),
+    batchQueue: null,
+    destroyed: false,
+    elementCache: /* @__PURE__ */ new Map(),
+    observer: null
+  };
+}
+
+// src/symbols.ts
+var enPrefix = /* @__PURE__ */ Symbol("@en/prefix");
+
+// src/utils.ts
+function getKey(prop, prefix) {
+  return prefix === "" ? prop : `${prefix}.${prop}`;
+}
+function getParam(el, attrName, isParametric) {
+  if (!isParametric) return void 0;
+  const value = el.getAttribute(attrName);
+  if (!value) return void 0;
+  return value.slice(value.indexOf(":") + 1);
+}
+function isPrefixedObject(value) {
+  return typeof value === "object" && value !== null && enPrefix in value;
+}
+function clone(target) {
+  if (target === null || typeof target !== "object") return target;
+  if (target instanceof Date) {
+    return new Date(target.getTime());
+  }
+  if (target instanceof RegExp) {
+    return new RegExp(target.source, target.flags);
+  }
+  if (target instanceof Map) {
+    return new Map(
+      [...target].map(([k, v]) => [clone(k), clone(v)])
+    );
+  }
+  if (target instanceof Set) {
+    return new Set([...target].map((v) => clone(v)));
+  }
+  if (Array.isArray(target)) {
+    return target.map((v) => clone(v));
+  }
+  const result = Object.create(
+    Object.getPrototypeOf(target)
+  );
+  for (const key of Object.keys(target)) {
+    result[key] = clone(target[key]);
+  }
+  return result;
+}
+
+// src/computed.ts
+var IS_COMPUTED = /* @__PURE__ */ Symbol("@en/computed");
+function computed(fn) {
+  Object.defineProperty(fn, IS_COMPUTED, {
+    value: true,
+    enumerable: false,
+    configurable: true,
+    writable: false
+  });
+  return fn;
+}
+function clearDepsForKey(ctx, key) {
+  for (const [depKey, list] of ctx.deps.map) {
+    const filtered = list.filter((d) => d.key !== key);
+    if (filtered.length === 0) {
+      ctx.deps.map.delete(depKey);
+    } else {
+      ctx.deps.map.set(depKey, filtered);
+    }
+  }
+}
+function registerTrackedDeps(ctx, key, computedFn, parent, prop) {
+  const dependent = { key, computed: computedFn, parent, prop };
+  for (const dep of ctx.deps.set) {
+    const list = ctx.deps.map.get(dep) ?? [];
+    list.push(dependent);
+    ctx.deps.map.set(dep, list);
+  }
+}
+function setDependents(ctx, value, key, parent, prop) {
+  clearDepsForKey(ctx, key);
+  ctx.deps.isEvaluating = true;
+  ctx.deps.set.clear();
+  try {
+    value();
+  } catch {
+  } finally {
+    ctx.deps.isEvaluating = false;
+  }
+  registerTrackedDeps(ctx, key, value, parent, prop);
+  ctx.deps.set.clear();
+}
+function getDependentsOf(ctx, changedKey) {
+  const matched = [...ctx.deps.map.entries()].filter(
+    ([k]) => k === changedKey || k.startsWith(changedKey + ".") || changedKey.startsWith(k + ".")
+  ).flatMap(([, list]) => list);
+  const seen = /* @__PURE__ */ new Set();
+  return matched.filter((dep) => {
+    if (seen.has(dep.computed)) return false;
+    seen.add(dep.computed);
+    return true;
+  });
+}
+function removeDependentsFor(ctx, deletedKey) {
+  ctx.deps.map.delete(deletedKey);
+  for (const [k, list] of ctx.deps.map) {
+    const filtered = list.filter((d) => d.key !== deletedKey);
+    if (filtered.length === 0) {
+      ctx.deps.map.delete(k);
+    } else {
+      ctx.deps.map.set(k, filtered);
+    }
+  }
+}
+function bumpVersion(ctx, key) {
+  const v = (ctx.deps.versions.get(key) ?? 0) + 1;
+  ctx.deps.versions.set(key, v);
+  return v;
+}
+function isCurrentVersion(ctx, key, version) {
+  return ctx.deps.versions.get(key) === version;
+}
+
+// src/watchers.ts
+function watch(ctx, key, watcher) {
+  const list = ctx.watchers.get(key) ?? [];
+  list.push(watcher);
+  ctx.watchers.set(key, list);
+}
+function unwatch(ctx, key, watcher) {
+  if (!key && !watcher) {
+    ctx.watchers.clear();
+    return;
+  }
+  if (key && !watcher) {
+    ctx.watchers.delete(key);
+    return;
+  }
+  const targets = key ? [[key, ctx.watchers.get(key) ?? []]] : [...ctx.watchers.entries()];
+  for (const [k, list] of targets) {
+    const filtered = list.filter((w) => w !== watcher);
+    if (filtered.length === 0) {
+      ctx.watchers.delete(k);
+    } else {
+      ctx.watchers.set(k, filtered);
+    }
+  }
+}
+function callWatchers(ctx, changedKey, changedValue, getValue2) {
+  for (const [watchedKey, watchers] of ctx.watchers) {
+    if (changedKey === watchedKey) {
+      watchers.forEach((cb) => cb(changedValue));
+    } else if (changedKey.startsWith(watchedKey + ".")) {
+      const parentValue = getValue2(watchedKey);
+      watchers.forEach((cb) => cb(parentValue));
+    }
+  }
+}
+
+// src/dom/queries.ts
+function getValue(ctx, key) {
+  let parent = ctx.data;
+  let value = void 0;
+  let prop = "";
+  if (parent === null) {
+    return { parent, value, prop };
+  }
+  const parts = key.split(".");
+  for (let i = 0; i < parts.length; i++) {
+    prop = parts[i];
+    value = Reflect.get(parent, prop);
+    if (i < parts.length - 1) {
+      if (typeof value !== "object" || value === null) {
+        return { parent, value: void 0, prop };
+      }
+      parent = value;
+    }
+  }
+  return { parent, value, prop };
+}
+
+// src/directives/builtins.ts
+function markDirective({ el, value, isDelete }) {
+  if (isDelete) {
+    removeElement(el);
+    return;
+  }
+  if (!(el instanceof HTMLElement)) return;
+  if (typeof value === "object" && value !== null) {
+    value = JSON.stringify(value);
+  }
+  el.textContent = typeof value === "string" ? value : String(value);
+}
+var modelListeners = /* @__PURE__ */ new WeakMap();
+function modelDirective(ctx) {
+  return ({ el, value, key }) => {
+    if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)) return;
+    if (el instanceof HTMLInputElement && el.type === "checkbox") {
+      el.checked = !!value;
+    } else if (el instanceof HTMLInputElement && el.type === "radio") {
+      el.checked = el.value === String(value);
+    } else {
+      const strVal = value === null || value === void 0 ? "" : String(value);
+      if (el.value !== strVal) el.value = strVal;
+    }
+    if (modelListeners.has(el)) return;
+    const isCheckbox = el instanceof HTMLInputElement && el.type === "checkbox";
+    const isRadio = el instanceof HTMLInputElement && el.type === "radio";
+    const isNumber = el instanceof HTMLInputElement && el.type === "number";
+    const isSelect = el instanceof HTMLSelectElement;
+    const eventName = isCheckbox || isRadio || isSelect ? "change" : "input";
+    const handler = () => {
+      const { parent, prop } = getValue(ctx, key);
+      if (!parent) return;
+      let incoming;
+      if (isCheckbox) incoming = el.checked;
+      else if (isNumber) incoming = el.valueAsNumber;
+      else incoming = el.value;
+      Reflect.set(parent, prop, incoming);
+    };
+    el.addEventListener(eventName, handler);
+    modelListeners.set(el, handler);
+  };
+}
+function createConditionalDirectives(ifOrIfNotFn) {
+  return {
+    if: {
+      cb: ({ el, value, key }) => ifOrIfNotFn(el, value, key, "if")
+    },
+    ifnot: {
+      cb: ({ el, value, key }) => ifOrIfNotFn(el, value, key, "ifnot")
+    }
+  };
+}
+function removeElement(el) {
+  const parent = el.parentElement;
+  if (!(el instanceof HTMLElement) || !parent) {
+    return el.remove();
+  }
+  const elMark = el.getAttribute("data-en-mark") ?? el.getAttribute("en-mark");
+  const parentMark = parent.getAttribute("data-en-mark") ?? parent.getAttribute("en-mark");
+  if (elMark && elMark === parentMark) {
+    return parent.remove();
+  }
+  el.remove();
+}
+var markEntry = { cb: markDirective };
+function createModelEntry(ctx) {
+  return { cb: modelDirective(ctx) };
+}
+
+// src/directives/index.ts
+function registerBuiltins(ctx) {
+  ctx.directives.set("mark", markEntry);
+  ctx.directives.set("model", createModelEntry(ctx));
+}
+function registerDirective(ctx, name, cb, isParametric = false) {
+  if (ctx.directives.has(name)) return;
+  ctx.directives.set(name, { cb, isParametric });
+}
+
+// src/core.ts
+function bootstrapDirectives(ctx) {
+  registerBuiltins(ctx);
+  const conditionals = createConditionalDirectives(
+    (el, value, key, type) => ifOrIfNot(ctx, el, value, key, type)
+  );
+  ctx.directives.set("if", conditionals.if);
+  ctx.directives.set("ifnot", conditionals.ifnot);
+}
+function setupObserver(ctx) {
+  if (ctx.observer || typeof MutationObserver === "undefined") return;
+  ctx.observer = new MutationObserver(() => ctx.elementCache.clear());
+  ctx.observer.observe(document, { childList: true, subtree: true });
+}
+function queryAll(ctx, root, query) {
+  if (!(root instanceof Document)) {
+    return Array.from(root.querySelectorAll(query));
+  }
+  const cached = ctx.elementCache.get(query);
+  if (cached) return cached;
+  const result = Array.from(root.querySelectorAll(query));
+  ctx.elementCache.set(query, result);
+  return result;
+}
+function reactive(ctx, obj, prefix, parent, prop) {
+  if (obj === null) return obj;
+  const isObject = typeof obj === "object";
+  const isFunction = typeof obj === "function";
+  if (isFunction && parent) {
+    obj = obj.bind(parent);
+  }
+  if (isObject || isFunction) {
+    Object.defineProperty(obj, enPrefix, {
+      value: prefix,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    });
+  }
+  if (isFunction && prop && parent) {
+    setDependents(ctx, obj, prefix, parent, prop);
+    return obj;
+  }
+  if (!isObject) return obj;
+  const proxied = new Proxy(
+    obj,
+    makeHandler(ctx)
+  );
+  for (const p of Object.keys(obj)) {
+    const childPrefix = getKey(p, prefix);
+    const value = obj[p];
+    obj[p] = reactive(
+      ctx,
+      value,
+      childPrefix,
+      proxied,
+      p
+    );
+  }
+  return proxied;
+}
+function makeHandler(ctx) {
+  return {
+    // ── get ───────────────────────────────────────────────────────────────────
+    get(target, prop, receiver) {
+      if (ctx.deps.isEvaluating && typeof prop === "string" && Object.getOwnPropertyDescriptor(target, prop)?.enumerable) {
+        ctx.deps.set.add(getKey(prop, target[enPrefix]));
+      }
+      const value = Reflect.get(target, prop, receiver);
+      if (typeof value === "function" && enPrefix in value && !ctx.computedResultFns.has(value)) {
+        const result = value();
+        if (result instanceof Promise) {
+          return result.then((v) => proxyComputed(ctx, v));
+        }
+        return proxyComputed(ctx, result);
+      }
+      return value;
+    },
+    // ── set ───────────────────────────────────────────────────────────────────
+    set(target, prop, value, receiver) {
+      if (typeof prop === "symbol") {
+        return Reflect.set(target, prop, value, receiver);
+      }
+      const key = getKey(prop, target[enPrefix]);
+      const reactiveValue = reactive(ctx, value, key, receiver, prop);
+      const success = Reflect.set(target, prop, reactiveValue, receiver);
+      scheduleUpdate(
+        ctx,
+        () => update(ctx, reactiveValue, key, false, receiver, prop)
+      );
+      scheduleUpdate(ctx, () => updateComputed(ctx, key));
+      return success;
+    },
+    // ── deleteProperty ────────────────────────────────────────────────────────
+    deleteProperty(target, prop) {
+      if (typeof prop === "symbol") {
+        return Reflect.deleteProperty(target, prop);
+      }
+      const key = getKey(prop, target[enPrefix]);
+      const success = Reflect.deleteProperty(target, prop);
+      update(ctx, void 0, key, true, target, prop);
+      removeDependentsFor(ctx, key);
+      return success;
+    },
+    // ── defineProperty ────────────────────────────────────────────────────────
+    defineProperty(target, prop, descriptor) {
+      if (prop === enPrefix && enPrefix in target && typeof descriptor.value === "string" && /\.\d+$/.test(descriptor.value)) {
+        return Reflect.set(target, prop, descriptor.value);
+      }
+      return Reflect.defineProperty(target, prop, descriptor);
+    }
+  };
+}
+function scheduleUpdate(ctx, fn) {
+  if (ctx.batchQueue !== null) {
+    ctx.batchQueue.push(fn);
+  } else {
+    fn();
+  }
+}
+function updateComputed(ctx, changedKey) {
+  const deps = getDependentsOf(ctx, changedKey);
+  for (const dep of deps) {
+    update(ctx, dep.computed, dep.key, false, dep.parent, dep.prop);
+  }
+}
+function update(ctx, value, key, isDelete, parent, prop, syncConfig) {
+  if (ctx.destroyed) return;
+  if (typeof value === "function" && !ctx.computedResultFns.has(value)) {
+    value = runComputed(ctx, value, key, parent, prop);
+    if (value === void 0) return;
+  }
+  if (value instanceof Promise) {
+    const version = bumpVersion(ctx, key);
+    value.then((v) => {
+      if (!isCurrentVersion(ctx, key, version)) return;
+      update(ctx, v, key, false, parent, prop, syncConfig);
+    });
+    return;
+  }
+  if (!syncConfig) {
+    callWatchers(ctx, key, value, (k) => getValue(ctx, k).value);
+  }
+  callDirectives(ctx, value, key, isDelete, parent, prop, void 0, void 0, syncConfig);
+}
+function runComputed(ctx, computedFn, key, parent, prop) {
+  const version = bumpVersion(ctx, key);
+  const result = computedFn();
+  if (result instanceof Promise) {
+    result.then((v) => {
+      if (!isCurrentVersion(ctx, key, version)) return;
+      const proxied = proxyComputed(ctx, v, key, parent, prop);
+      update(ctx, proxied, key, false, parent, prop);
+    }).catch(
+      (err) => console.error(`[entropy] Async computed error at "${key}":`, err)
+    );
+    return void 0;
+  }
+  return proxyComputed(ctx, result, key, parent, prop);
+}
+function proxyComputed(ctx, value, key, parent, prop) {
+  if (typeof value === "function") {
+    ctx.computedResultFns.add(value);
+    return value;
+  }
+  if (key === void 0 || parent === void 0 || prop === void 0) {
+    return clone(value);
+  }
+  return reactive(ctx, clone(value), key, parent, prop);
+}
+function callDirectives(ctx, value, key, isDelete, parent, prop, searchRoot, skipUpdateArrayElements, syncConfig) {
+  const isParentArray = Array.isArray(parent);
+  if (isParentArray && /^\d+$/.test(prop) && !skipUpdateArrayElements && syncConfig?.skipMark !== true) {
+    updateArrayItemElement(ctx, key, prop, value, parent);
+  } else if (isParentArray && prop === "length") {
+    sortArrayItemElements(ctx, parent);
+  }
+  if (isPrefixedObject(value)) {
+    if (Array.isArray(value) && syncConfig?.skipMark !== true) {
+      callDirectivesForArray(ctx, value, key, isDelete, parent, prop, searchRoot, syncConfig);
+    } else {
+      callDirectivesForObject(ctx, value, key, isDelete, parent, prop, searchRoot);
+    }
+    if (!Array.isArray(value)) {
+      callDirectivesForLeaf(ctx, value, key, isDelete, parent, prop, searchRoot, syncConfig);
+    }
+    return;
+  }
+  callDirectivesForLeaf(ctx, value, key, isDelete, parent, prop, searchRoot, syncConfig);
+}
+function callDirectivesForArray(ctx, value, key, isDelete, parent, prop, searchRoot, syncConfig) {
+  const placeholderKey = `${key}.#`;
+  const attrMark = ctx.prefix + "mark";
+  const query = `[${attrMark}="${placeholderKey}"]`;
+  let target = document;
+  if (syncConfig?.el.parentElement) {
+    target = syncConfig.el.parentElement;
+  }
+  const elsArrays = [];
+  queryAll(ctx, target, query).forEach((plc) => {
+    const els = initializeArrayElements(ctx, plc, placeholderKey, value);
+    elsArrays.push(els);
+  });
+  for (const els of elsArrays) {
+    for (const i in value) {
+      callDirectives(
+        ctx,
+        value[i],
+        getKey(i, key),
+        isDelete,
+        value,
+        i,
+        els[i] ?? void 0,
+        true
+      );
+    }
+  }
+  callDirectivesForLeaf(
+    ctx,
+    value.length,
+    getKey("length", key),
+    isDelete,
+    value,
+    "length",
+    searchRoot
+  );
+}
+function callDirectivesForObject(ctx, value, key, isDelete, parent, prop, searchRoot) {
+  for (const k in value) {
+    callDirectives(
+      ctx,
+      value[k],
+      getKey(k, key),
+      isDelete,
+      value,
+      k,
+      searchRoot
+    );
+  }
+}
+function callDirectivesForLeaf(ctx, value, key, isDelete, parent, prop, searchRoot, syncConfig) {
+  if (syncConfig) {
+    const { el, directive: attrSuffix, skipConditionals, skipMark } = syncConfig;
+    if (skipMark && attrSuffix === "mark" || skipConditionals && (attrSuffix === "if" || attrSuffix === "ifnot")) {
+      return;
+    }
+    const entry = ctx.directives.get(attrSuffix);
+    if (!entry) return;
+    const { cb, isParametric } = entry;
+    const param = getParam(el, ctx.prefix + attrSuffix, !!isParametric);
+    cb({ el, value, key, isDelete, parent, prop, param });
+    return;
+  }
+  const root = searchRoot ?? document;
+  for (const [attrSuffix, { cb, isParametric }] of ctx.directives) {
+    const attrName = ctx.prefix + attrSuffix;
+    const query = isParametric ? `[${attrName}^='${key}:']` : `[${attrName}='${key}']`;
+    queryAll(ctx, root, query).forEach((el) => {
+      const param = getParam(el, attrName, !!isParametric);
+      cb({ el, value, key, isDelete, parent, prop, param });
+    });
+    if (root instanceof Element && root.getAttribute(attrName) === key) {
+      const param = getParam(root, attrName, !!isParametric);
+      cb({ el: root, value, key, isDelete, parent, prop, param });
+    }
+  }
+}
+function ifOrIfNot(ctx, el, value, key, type) {
+  const isShow = type === "if" ? !!value : !value;
+  const isTemplate = el instanceof HTMLTemplateElement;
+  const attrType = ctx.prefix + type;
+  const attrMark = ctx.prefix + "mark";
+  if (isShow && isTemplate) {
+    const child = el.content.firstElementChild;
+    if (!child) return;
+    child.setAttribute(attrType, key);
+    syncNode(ctx, child, true);
+    el.replaceWith(child);
+  }
+  if (!isShow && !isTemplate) {
+    const temp = document.createElement("template");
+    temp.content.appendChild(el.cloneNode(true));
+    temp.setAttribute(attrType, key);
+    const mark = el.getAttribute(attrMark);
+    if (mark) temp.setAttribute(attrMark, mark);
+    el.replaceWith(temp);
+  }
+}
+function syncNode(ctx, el, isSyncRoot) {
+  Array.from(el.children).forEach((child) => syncNode(ctx, child, false));
+  syncDirectives(ctx, el, isSyncRoot, false);
+}
+function syncClone(ctx, clone2) {
+  Array.from(clone2.children).forEach((child) => syncClone(ctx, child));
+  syncDirectives(ctx, clone2, false, true);
+}
+function syncDirectives(ctx, el, skipConditionals, skipMark) {
+  for (const [name] of ctx.directives) {
+    if (skipMark && name === "mark") continue;
+    if (skipConditionals && (name === "if" || name === "ifnot")) continue;
+    const { isParametric } = ctx.directives.get(name);
+    const attrFull = ctx.prefix + name;
+    let key = el.getAttribute(attrFull);
+    if (isParametric) key = key?.split(":")[0] ?? null;
+    if (key?.endsWith(".#")) key = key.slice(0, -2);
+    if (key === null) continue;
+    const { value, parent, prop } = getValue(ctx, key);
+    if (!parent) continue;
+    update(ctx, value, key, false, parent, prop, {
+      directive: name,
+      el,
+      ...skipConditionals !== void 0 ? { skipConditionals } : {},
+      ...skipMark !== void 0 ? { skipMark } : {}
+    });
+  }
+}
+function updateArrayItemElement(ctx, key, idx, item, array) {
+  const attrMark = ctx.prefix + "mark";
+  const arrayItems = document.querySelectorAll(`[${attrMark}="${key}"]`);
+  if (arrayItems.length && !isPrefixedObject(item)) {
+    return;
+  }
+  const prefix = array[enPrefix] ?? "";
+  const placeholderKey = key.replace(/\d+$/, "#");
+  let itemReplaced = false;
+  Array.from(arrayItems).forEach((existingEl) => {
+    const cl = cloneFromPlaceholder(ctx, existingEl, placeholderKey, attrMark);
+    if (!cl) return;
+    initializeClone(ctx, idx, prefix, placeholderKey, cl);
+    existingEl.replaceWith(cl);
+    syncClone(ctx, cl);
+    itemReplaced = true;
+  });
+  if (itemReplaced) return;
+  Array.from(document.querySelectorAll(`[${attrMark}="${placeholderKey}"]`)).forEach((template) => {
+    if (!(template instanceof HTMLTemplateElement)) return;
+    const clone2 = template.content.firstElementChild?.cloneNode(true);
+    if (!(clone2 instanceof Element)) return;
+    initializeClone(ctx, idx, prefix, placeholderKey, clone2);
+    template.before(clone2);
+    syncClone(ctx, clone2);
+  });
+}
+function cloneFromPlaceholder(ctx, item, placeholderKey, attrMark) {
+  let placeholder = item.nextElementSibling;
+  while (placeholder) {
+    if (placeholder.getAttribute(attrMark) === placeholderKey) break;
+    placeholder = placeholder.nextElementSibling;
+  }
+  if (placeholder instanceof HTMLTemplateElement) {
+    const c = placeholder.content.firstElementChild?.cloneNode(true);
+    return c instanceof Element ? c : null;
+  }
+  if (placeholder?.getAttribute(attrMark) === placeholderKey) {
+    return placeholder.cloneNode(true);
+  }
+  return null;
+}
+function sortArrayItemElements(ctx, array) {
+  const attrMark = ctx.prefix + "mark";
+  const templateKey = getKey("#", array[enPrefix] ?? "");
+  Array.from(document.querySelectorAll(`[${attrMark}="${templateKey}"]`)).forEach((template) => {
+    const items = [];
+    let prev = template.previousElementSibling;
+    let isSorted = true;
+    let lastIdx = -1;
+    while (prev) {
+      const curr = prev;
+      prev = curr.previousElementSibling;
+      const k = curr.getAttribute(attrMark);
+      if (!k) continue;
+      if (k === templateKey) break;
+      if (k.replace(/\d+$/, "#") === templateKey) {
+        items.push(curr);
+        if (isSorted) {
+          const idx = Number(k.slice(k.lastIndexOf(".") + 1) ?? -1);
+          if (lastIdx !== -1 && lastIdx !== idx + 1) isSorted = false;
+          lastIdx = idx;
+        }
+      }
+    }
+    if (isSorted) return;
+    const sorted = [...items].sort((a, b) => {
+      const am = a.getAttribute(attrMark) ?? "";
+      const bm = b.getAttribute(attrMark) ?? "";
+      const ai = +(am.split(".").pop() ?? 0);
+      const bi = +(bm.split(".").pop() ?? 0);
+      return ai - bi;
+    });
+    sorted.forEach((el) => template.before(el));
+  });
+}
+function initializeArrayElements(ctx, plc, placeholderKey, array) {
+  const attrMark = ctx.prefix + "mark";
+  let prev = plc.previousElementSibling;
+  while (prev) {
+    const curr = prev;
+    prev = curr.previousElementSibling;
+    const k = curr.getAttribute(attrMark);
+    if (!k) continue;
+    if (k !== placeholderKey && k.replace(/\d+$/, "#") === placeholderKey) {
+      curr.remove();
+    } else {
+      break;
+    }
+  }
+  let template;
+  let placeholder;
+  if (plc instanceof HTMLTemplateElement) {
+    template = plc;
+    placeholder = plc.content.firstElementChild;
+    placeholder?.setAttribute(attrMark, placeholderKey);
+  } else {
+    placeholder = plc;
+    template = document.createElement("template");
+    template.content.appendChild(plc.cloneNode(true));
+    template.setAttribute(attrMark, placeholderKey);
+    plc.replaceWith(template);
+  }
+  if (!placeholder) {
+    console.warn(`[entropy] Empty template for key "${placeholderKey}"`);
+    return [];
+  }
+  const prefix = placeholderKey.slice(0, -2);
+  const elements = [];
+  for (const idx in array) {
+    if (Number.isNaN(+idx)) continue;
+    const clone2 = placeholder.cloneNode(true);
+    if (!(clone2 instanceof Element)) continue;
+    initializeClone(ctx, idx, prefix, placeholderKey, clone2);
+    template.before(clone2);
+    syncClone(ctx, clone2);
+    elements.push(clone2);
+  }
+  return elements;
+}
+function initializeClone(ctx, idx, prefix, placeholderKey, clone2) {
+  const key = getKey(idx, prefix);
+  for (const attrSuffix of ctx.directives.keys()) {
+    const attrName = ctx.prefix + attrSuffix;
+    rewriteKey(clone2, attrName, key, placeholderKey);
+    clone2.querySelectorAll(`[${attrName}]`).forEach((child) => {
+      rewriteKey(child, attrName, key, placeholderKey);
+    });
+  }
+}
+function rewriteKey(el, attrName, key, placeholderKey) {
+  const current = el.getAttribute(attrName);
+  if (current?.startsWith(placeholderKey)) {
+    el.setAttribute(attrName, key + current.slice(placeholderKey.length));
+  }
+}
+function batch(ctx, fn) {
+  ctx.batchQueue = [];
+  try {
+    fn();
+  } finally {
+    const queue = ctx.batchQueue ?? [];
+    ctx.batchQueue = null;
+    for (const task of queue) task();
+  }
+}
+
+// src/dom/components.ts
+function registerTemplates(rootElement) {
+  const root = rootElement ?? document;
+  Array.from(root.querySelectorAll("template[name]")).forEach(
+    (template) => registerComponent(template)
+  );
+}
+function registerComponent(template) {
+  const name = template.getAttribute("name")?.toLowerCase();
+  if (!name || customElements.get(name)) return;
+  const ctor = class extends HTMLElement {
+    constructor() {
+      super();
+      const shadow = this.attachShadow({ mode: "open" });
+      Array.from(document.getElementsByTagName("style")).forEach((style) => {
+        shadow.appendChild(style.cloneNode(true));
+      });
+      Array.from(document.querySelectorAll('link[rel="stylesheet"]')).forEach(
+        (link) => shadow.appendChild(link.cloneNode(true))
+      );
+      Array.from(template.content.childNodes).forEach((child) => {
+        shadow.appendChild(child.cloneNode(true));
+      });
+    }
+  };
+  customElements.define(name, ctor);
+}
+async function loadTemplateFile(file) {
+  try {
+    const html = await fetch(file).then((r) => {
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return r.text();
+    });
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = html;
+    registerTemplates(wrapper);
+  } catch (err) {
+    console.error(`[entropy] Failed to load template file "${file}":`, err);
+  }
+}
+function stitchTagTemplate(strings, ...values) {
+  return strings.reduce(
+    (acc, s, i) => acc + (values[i - 1] ?? "") + s
+  );
+}
+function wrapInDiv(html) {
+  const el = document.createElement("div");
+  el.innerHTML = html;
+  return el;
+}
+
+// src/instance.ts
+var EntropyInstance = class {
+  constructor() {
+    this.readyStateHandler = null;
+    // ─── computed ──────────────────────────────────────────────────────────────
+    /**
+     * Marks a function as a computed value so entropy calls it reactively.
+     *
+     * @example
+     * ```ts
+     * data.fullName = en.computed(() => `${data.first} ${data.last}`);
+     * ```
+     */
+    this.computed = computed;
+    this.ctx = createContext();
+    bootstrapDirectives(this.ctx);
+  }
+  // ─── init ──────────────────────────────────────────────────────────────────
+  /**
+   * Initialises the reactive data object and begins listening for DOM changes.
+   * Returns the reactive data proxy – assign properties directly on it.
+   *
+   * @example
+   * ```ts
+   * const data = en.init();
+   * data.count = 0;
+   * ```
+   */
+  init() {
+    if (!this.ctx.data) {
+      this.ctx.data = reactive(this.ctx, {}, "");
+    }
+    registerTemplates();
+    setupObserver(this.ctx);
+    if (!this.readyStateHandler) {
+      this.readyStateHandler = () => {
+        if (document.readyState === "interactive") {
+          registerTemplates();
+        }
+      };
+      document.addEventListener("readystatechange", this.readyStateHandler);
+    }
+    return this.ctx.data;
+  }
+  // ─── watch ─────────────────────────────────────────────────────────────────
+  /**
+   * Registers a watcher for `key`. Called with the new value whenever `key`
+   * or any of its children changes.
+   *
+   * @example
+   * ```ts
+   * en.watch('user.name', newName => console.log('Name changed:', newName));
+   * ```
+   */
+  watch(key, watcher) {
+    watch(this.ctx, key, watcher);
+  }
+  /**
+   * Removes watchers. See parameter combinations in the source for details.
+   */
+  unwatch(key, watcher) {
+    unwatch(this.ctx, key, watcher);
+  }
+  // ─── directive ─────────────────────────────────────────────────────────────
+  /**
+   * Registers a custom directive.
+   *
+   * @example
+   * ```ts
+   * en.directive('color', ({ el, value }) => {
+   *   (el as HTMLElement).style.color = String(value);
+   * });
+   * ```
+   */
+  directive(name, cb, isParametric = false) {
+    registerDirective(this.ctx, name, cb, isParametric);
+  }
+  // ─── prefix ────────────────────────────────────────────────────────────────
+  /**
+   * Overrides the default attribute prefix (`en-`).
+   * Must be called before `init()`.
+   *
+   * @example
+   * ```ts
+   * en.prefix('data-en');
+   * const data = en.init();
+   * // now use data-en-mark="..." in your HTML
+   * ```
+   */
+  prefix(value = "en") {
+    this.ctx.prefix = value.endsWith("-") ? value : value + "-";
+  }
+  // ─── batch ─────────────────────────────────────────────────────────────────
+  /**
+   * Batches multiple reactive changes into a single DOM update pass.
+   *
+   * @example
+   * ```ts
+   * en.batch(() => {
+   *   data.firstName = 'Jane';
+   *   data.lastName  = 'Doe';
+   * });
+   * ```
+   */
+  batch(fn) {
+    batch(this.ctx, fn);
+  }
+  // ─── load ──────────────────────────────────────────────────────────────────
+  /**
+   * Fetches one or more HTML files and registers any `<template name="...">` 
+   * elements found inside them as custom components.
+   *
+   * @example
+   * ```ts
+   * await en.load(['components/card.html', 'components/modal.html']);
+   * ```
+   */
+  async load(files) {
+    const list = Array.isArray(files) ? files : [files];
+    await Promise.all(list.map((f) => loadTemplateFile(f)));
+  }
+  register(root, ...args) {
+    if (Array.isArray(root)) {
+      root = stitchTagTemplate(root, ...args);
+    }
+    if (typeof root === "string") {
+      root = wrapInDiv(root);
+    }
+    registerTemplates(root);
+  }
+  // ─── destroy ───────────────────────────────────────────────────────────────
+  /**
+   * Tears down the instance: removes event listeners, clears watchers,
+   * and prevents further DOM updates.
+   */
+  destroy() {
+    this.ctx.destroyed = true;
+    if (this.readyStateHandler) {
+      document.removeEventListener(
+        "readystatechange",
+        this.readyStateHandler
+      );
+      this.readyStateHandler = null;
+    }
+    this.ctx.watchers.clear();
+    this.ctx.deps.map.clear();
+    this.ctx.deps.versions.clear();
+    this.ctx.elementCache.clear();
+    this.ctx.observer?.disconnect();
+    this.ctx.observer = null;
+    this.ctx.data = null;
+  }
+};
+function createInstance() {
+  return new EntropyInstance();
+}
+
+// src/index.ts
+var en = new EntropyInstance();
+var index_default = en;
+
+export { EntropyInstance, computed, createInstance, index_default as default };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map