From b04be8d4371efbfd9b24aabe2850ef4702a2c566 Mon Sep 17 00:00:00 2001
From: AI Engineer <ai@apigo.cc>
Date: Fri, 5 Jun 2026 19:03:52 +0800
Subject: [PATCH] release: v1.0.13 By: AICoder

---
 README.md                   |  212 ++----
 dist/state.js               | 1370 ++++++++++++++++++-----------------
 dist/state.min.js           |    2 +-
 dist/state.min.mjs          |    1 +
 dist/state.mjs              |  715 ++++++++++++++++++
 package.json                |    2 +-
 playwright.config.js        |    2 +-
 src/globals.js              |    6 +
 src/index.js                |   17 +-
 test-results/.last-run.json |    2 +-
 vite.config.js              |   22 +-
 11 files changed, 1514 insertions(+), 837 deletions(-)
 create mode 100644 dist/state.min.mjs
 create mode 100644 dist/state.mjs

diff --git a/README.md b/README.md
index f81fb00..96596e6 100644
--- a/README.md
+++ b/README.md
@@ -1,174 +1,80 @@
-# State.js AI 开发指南
+# @apigo.cc/state - AI 逻辑操作说明书
 
-> ⚠️ **AI 强制指令 (AI Mandate):**
-> 1. **尊重原创逻辑**：本项目（State.js）核心架构极其精炼且经过精雕细琢。**严禁擅自修改原有逻辑**（如 `_returnCode`, `_runCode`, `NewState` 等底层函数），除非你能证明修改后的质量、性能与简洁度均显著优于原版。
-> 2. **禁止过度设计**：不要尝试引入复杂的编译器、多语句解析器或防御性代码。任何试图将“简单问题复杂化”的重构大概率会破坏现有结构。
-> 3. **汇报与许可**：若你认为有必要修改库的核心逻辑，**必须首先向人类开发者汇报修改的必要性与潜在影响**，只有在得到明确允许后方可进行。
-> 4. **回归测试**：任何改动必须通过现有 Playwright 自动化测试，确保 `DataTable` 等复杂组件场景的渲染与合并逻辑完全正常。
+本框架基于原生 `Proxy` 和 `MutationObserver` 实现数据与 DOM 的原子级同步。本手册仅供 AI 构建、维护及驱动基于此引擎的应用。
 
-State.js 是基于 Vanilla JS 的无编译数据驱动 UI 框架。依赖原生 DOM 与 Proxy，通过解析 HTML `$指令` 属性映射状态。
+---
 
-> **核心设定：** 你是一个追求极致代码压缩和执行效率的资深极客。
-> **编码原则：**
-> 1. **拒绝废话变量：** 除非一个变量会被复用两次以上，否则**绝对禁止**声明临时变量。
-> 2. **极致精简：** 极度偏爱链式调用（Chaining）、短路求值、三元运算符和 One-liner。能一行写完的逻辑，绝不拆成三行。
-> 3. **无解释模式：** 假设你的对话者是顶尖黑客，不需要解释基础 API，不需要防御性废话，直接给出最硬核的最终代码即可。
+## 1. 核心状态逻辑映射
 
-## 一、 核心语法与指令字典
+### `NewState(defaults, getter, setter)`
+*   **功能**：创建响应式代理。
+*   **内部机制**：拦截所有属性读写。若属性值变更，触发所有引用该属性的 DOM 节点的更新任务（异步微任务）。
+*   **扩展逻辑**：通过 `getter/setter` 拦截器可实现数据持久化（如同步至 URL Hash 或 LocalStorage）。
+*   **原子操作**：
+    *   `obj.__watch(key, cb)`: 建立 key -> callback 的直接依赖。
+    *   `obj.__unwatch(key, cb)`: 解除依赖。
 
-### 1\. 属性与数据绑定矩阵
+---
 
-| 语法 | 类型 | 解析与执行规则 |
+## 2. 指令映射全集 (AI-Ready)
+
+指令语法：`$attribute="code"`。作用域默认为全局，组件内优先访问 `node.state`。
+
+### 结构化映射
+| 指令 | 触发逻辑 | DOM 行为 |
 | :--- | :--- | :--- |
-| `$attr="exp"` | 动态 JS 表达式 | 映射为 HTML 属性。若包含 `\${}`，作为模板字符串计算；若不包含，作为纯 JS 表达式执行并保留返回值类型。 |
-| `$$attr="exp"` | 双重计算表达式 | **二次评估机制**：首先评估 `exp` 获取字符串结果，若结果为字符串，则将其作为代码再次执行。适用于动态指令场景（如后端下发指令）。 |
-| `.prop="val"` | 静态 DOM 属性 | 将字符串字面量赋值给底层 DOM 节点的 JS 属性。 |
-| `$.prop="exp"` | 动态 DOM 属性 | 将 JS 执行结果赋值给底层 DOM 节点的 JS 属性。<br>**对象自动初始化**：对深层路径（如 `$.state.schema`）赋值时，若路径上的中间节点不存在，框架会自动生成空对象（`{}`）以防止报错。 |
-| `$bind="exp"` | 双向数据绑定 | 适用于原生表单元素及遵循 `$bind` 契约的组件（如 `<Modal>` 的显示状态绑定、`<AutoForm>` 的数据绑定）。 |
+| **`$if`** | `Boolean(result)` | `true`: 挂载节点; `false`: 移除节点。建议配合 `<template>`。 |
+| **`$each`** | `Iterable` | 基于 `key` 属性执行节点复用。无 `key` 时按索引重建。支持 `as`, `index` 定义局部变量。 |
 
-### 2. attr绑定规范 (例如 `$style` vs `style`)
-* **唯一正确写法**：动态样式强制使用 `$style` 指令，并利用模板字符串 `${}` 进行变量插值，而不是字符串拼接。
-    * ❌ 不推荐：`$style="'transform:translateY(' + this.state.offsetY + 'px)'"`
-    * ❌ 不推荐：`$.style.transform="'transform:translateY(' + this.state.offsetY + 'px)'"`
-    * ✅ 正确：`$style="transform: translateY(\${this.state.offsetY}px);"`
-* **覆盖原则**：`$style` 的优先级高于原生 `style` 属性。如果同一个节点同时存在 `$style` 和 `style`，`$style` 会**完全覆盖** `style` 的内容。因此，最佳实践是将该节点的所有静态和动态样式全部合并写在 `$style` 中。
+### 数据双向绑定 (`$bind`)
+AI 必须根据不同的元素类型执行以下逻辑：
+- **`input[type=text/password]`, `textarea`**: 监听 `input` 事件，同步字符串。
+- **`input[type=checkbox]`**:
+    - 绑定值为 `Array`: 若选中，`push(value)`（去重）；若取消，`splice(index, 1)`。
+    - 绑定值为非 `Array`: 同步 `checked` 为 `true/false`。
+- **`input[type=radio]`**: 选中项 `value === 绑定值` 时设置 `checked` 为 `true`。
+- **`select`**: 同步选中项的 `value`。
+- **`[contenteditable]`**: 监听 `input`，同步 `innerHTML`。
+- **`input[type=file]`**: 同步 `files` 对象。
 
-### 3\. 控制流指令
+### 属性操作映射
+- **`$text`**: 映射至 `textContent`。
+- **`$html`**: 映射至 `innerHTML`。
+- **`$class`**: **严格要求使用模板字符串**。范式：`class="static-name ${condition ? 'dynamic-name' : ''}"`。严禁覆盖原有类名。
+- **`.path.to.prop`**: 直接映射至 DOM 对象原生属性。例如：`.style.color="'red'"` 映射为 `el.style.color = 'red'`。
+- **`$src`**: 增强逻辑。若值以 `.svg` 结尾，异步 Fetch 并替换为内联 `<svg>` 节点。
+- **`$$attr`**: 二级求值。`eval(eval(expr))` 逻辑，用于动态生成指令代码。
 
-  * **`$if="exp"`**: 动态挂载/卸载 DOM 节点（布尔值映射）。
-  * **`$each="exp"`**: 遍历 Iterable 对象（Array, Object, Map, Set）。
-      * **默认变量**：单层循环时，默认可直接使用隐式变量 `item`（当前项）和 `index`（索引）。
-      * **嵌套约束**：当 `$each`存在嵌套时，**必须**使用 `as` 和 `index` 属性显式重命名迭代变量以防止遮蔽（Shadowing）。例：`<div $each="list" as="row" index="rowIdx">`。
-      * **作用域继承**：内层循环可直接访问外层作用域的变量及组件实例上下文。
+---
 
-### 4\. 文本、属性与 i18n 多语言
+## 3. 生命周期与事件逻辑
 
-  * **`$text="exp"`**: 将 JS 表达式结果渲染为 `textContent`。
-  * **原地解析 (`$text`)**: 仅声明属性不赋值，框架会提取节点原有文本，将其中的 `\${}` 表达式进行响应式计算。
-  * **i18n 多语言 (`{#...#}`)**: 
-    * **自动解析**：框架在扫描 DOM 树时，会自动解析文本节点（TextNode）及静态属性（如 `placeholder`, `title`）中的 `{#...#}` 标签。
-    * **SetTranslator(fn)**: 导出一个全局 API，用于设置前端翻译逻辑。若不设置，框架会自动剥离 `{# #}` 符号并保留原文。
-    * **基础格式**：`{#文本#}`
-    * **带参格式**：`{#模板文本{变量名1}{变量名2} || 参数1 || 参数2#}`
-    * **示例**：`{#欢迎 {name} 来到 {place} || 怼怼 || 地球#}`。翻译器将接收到 `rawText="欢迎 {name} 来到 {place}"` 和 `args={name: "怼怼", place: "地球"}`。
+- **`$on[event]`**: 映射为 `addEventListener`。注入 `event`, `thisNode`, `this`。
+- **生命周期**：
+    - **`$onload`**: `DOMNodeInserted` 且指令解析完成后触发。
+    - **`$onunload`**: `DOMNodeRemoved` 前触发，必须用于清理定时器或外部监听。
+    - **`$onupdate`**: 属性 setter 触发且渲染微任务完成后执行。
 
-## 二、 核心 API 导出清单
+---
 
-### 1. 状态管理 (Observer)
-*   **`NewState(defaults: Object, getter?: Function, setter?: Function): Proxy`**
-    *   创建单层响应式 Proxy。
-    *   `getter(key)`: 自定义读取逻辑。
-    *   `setter(key, value)`: 自定义写入逻辑。
-*   **`Hash: Proxy`**
-    *   映射 URL Hash 的响应式状态，修改属性将同步至 URL。
-*   **`LocalStorage: Proxy`**
-    *   映射 LocalStorage 的响应式状态，修改属性将持久化存储。
-*   **`<State>.__watch(key: string|null, callback: Function)`**
-    *   监听指定属性变化。若 `key` 为 `null`，则监听所有属性变化。
-*   **`<State>.__unwatch(key: string, callback: Function)`**
-    *   取消监听。
+## 4. 组件上下文逻辑
 
-### 2. 系统 API (Global)
-*   **`RefreshState(node: HTMLElement)`**
-    *   手动触发指定节点及其子树的指令扫描与绑定。
-*   **`SetTranslator(fn: (rawText: string, args: Object) => string)`**
-    *   设置全局 i18n 翻译器。
+- **初始化**：`Component.register(tagName, setupFn)`。
+- **作用域隔离**：每个组件持有独立 `state`。
+- **穿透访问**：通过 `this.parent` 访问父级作用域链。
+- **插槽映射**：`slot="name"` (声明) -> `slot-id="name"` (宿主)。
 
-### 3. 组件系统 (Component)
-*   **`Component.register(name: string, setupFunc: Function, template?: HTMLElement)`**
-    *   注册自定义组件。
-    *   `setupFunc(container)`: 组件逻辑初始化入口。
-    *   `template`: 组件的 DOM 模板。
+---
 
-### 4. 工具类 (Util)
-*   **`Util.makeDom(html: string): HTMLElement`**: HTML 字符串转 DOM。
-*   **`Util.copyFunction(to: Object, from: Object, ...names: string[])`**: 批量绑定方法。
-*   **`Util.safeJson(str: string): any`**: 安全解析 JSON。
+## 5. 国际化 (I18n) 逻辑
 
-### 5. DOM 查询
-*   **`$(selector: string, context?: HTMLElement): HTMLElement`**: querySelector 封装。
-*   **`$$(selector: string, context?: HTMLElement): NodeList`**: querySelectorAll 封装。
+- **语法结构**：`{# Key{param} || paramValue #}`。
+- **处理链路**：正则匹配 `{# ... #}` -> 提取 Key -> 注入 `||` 后的参数值 -> 调用全局 `_translator` 函数。
 
+---
 
-## 三、 自定义组件开发约束 (SOP)
+## 6. 运行约束 (Constraints)
 
-### 1\. 组件模板转义规则 (Template Literal Escaping)
-
-由于模板使用 JS 字符串声明，若模板内部需使用框架的 `\${}` 语法绑定动态属性，**必须进行反斜杠转义 (`\${...}`)**，防止被原生 JS 提前求值。
-
-  * **正确**：`<div $class="\${this.state.type}">`
-
-### 2\. `$bind` 接口契约
-
-若自定义组件需支持 `$bind` 双向绑定，需在 `setupFunc` 中实现：
-
-  * **数据输入 (响应更新)**：`container.addEventListener('bind', (e) => { const val = e.detail; ... })`
-  * **数据输出 (触发更新)**：`container.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: newValue }))`
-  * **插槽注入规则**：消费者调用组件时，**必须**使用 `<div slot-id="插槽名">` 的形式显式向组件内注入对应节点。如果组件只有一个插槽位时调用代码可以直接写内容不需要使用模版来定义插槽。
-
-### 3. 容器与 DOM 就绪机制 (DOM Readiness)
-* **`container` 的本质**：在 `setupFunc` 中，传入的 `container` 参数**即为调用组件的 DOM 节点**。组件模板的根节点会合并到该节点变成同一个节点，但是调用组件时属性中的this指向上层组件，而组件内的this指向组件实例。
-* **同步就绪**：当进入 `setupFunc` 时，组件的 DOM 树（包括插槽内容）已经**完全初始化并挂载就绪**，可以在 `setupFunc` 中直接使用。
-
-### 4. 插槽 (Slot) 的渲染时序
-* 组件框架在进入 setupFunc 之前就已经完成了插槽内容（`<div slot-id="...">`）的初始化注入。因此，在 setupFunc 中直接使用插槽内容是完全安全且符合预期的。
-
-### 5. 高级状态管理与生命周期能力
-* **隐式节点变量 (`thisNode`)**:
-    在 `$each` 循环或属性指令中，可以直接使用隐式变量 `thisNode` 获取当前执行上下文绑定的 DOM 节点对象自身。
-
-## 四、 极简主义与高性能开发哲学
-
-1. **拒绝过度工程 (No Over-engineering)**：严禁使用复杂的树结构或大段防御性代码。
-2. **DOM 访问极小化**：优先通过 `this.state` 驱动 UI，避免在 JS 中手动调用 `element.style.xxx`。
-3. **闭包与内存的权衡**：优先将逻辑挂载到 `container` 或 `container.state` 上。
-4. **组件内聚**：能用指令解决的 UI 逻辑绝不写在 JS 里。
-5. **思维重塑**：彻底抛弃 Vue/React 的生命周期崇拜，回归 DOM 本质。
-6. **无分号运动**：除了必须的情况，代码结尾禁止使用分号 `;`。
-
-## 五、 开发范例
-
-### 范例 1：带插槽与 UI 的组件 (以 Modal 为例)
-
-```javascript
-Component.register('Modal', container => {
-    container.modal = new bootstrap.Modal(container)
-    container.addEventListener('bind', e => e.detail ? container.modal.show() : container.modal.hide())
-    container.addEventListener('hide.bs.modal', () => {
-        document.activeElement?.blur()
-        container.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: false }))
-    })
-    Util.copyFunction(container, container.modal, 'show', 'hide')
-}, Util.makeDom(/*html*/`
-<div class="modal fade" data-bs-backdrop="static">
-<div class="modal-dialog modal-dialog-centered">
-    <div $class="modal-content text-bg-\${this.state?.type || 'body'}">
-        <div slot-id="header" class="modal-header">
-            <h6 class="modal-title" $text="this.state?.title"></h6>
-            <button type="button" class="btn-close btn-sm ms-2" data-bs-dismiss="modal"></button>
-        </div>
-        <div slot-id="body" class="modal-body"></div>
-        <div slot-id="footer" class="modal-footer"></div>
-    </div>
-</div>
-</div>
-`))
-```
-
-### 范例 2：无模板纯逻辑组件 (以 API 为例)
-
-```javascript
-Component.register('API', container => {
-    container.request = NewState({ url: '', method: 'GET', headers: {}, data: null, timeout: 10000 })
-    container.response = NewState({ loading: false, result: null })
-    container.do = async (opt = {}) => {
-        const req = { ...container.request, ...opt }
-        container.response.loading = true
-        const resp = await fetch(req.url, req)
-        container.response.result = await resp.json()
-        container.response.loading = false
-        container.dispatchEvent(new CustomEvent('response', { detail: container.response }))
-    }
-    container.request.__watch(null, () => container.hasAttribute('auto') && container.request.url && container.do())
-})
-```
+1.  **禁止滥用同步刷新**：`RefreshState()` 仅用于要求“同步等待 DOM 更新”的场景。知晓其会导致一次额外的渲染任务。
+2.  **数据流向**：所有状态变更必须通过对 `NewState` 代理对象的赋值完成。
+3.  **Key 的必要性**：在大规模数据（>100条）或复杂交互列表中，必须提供唯一 `key` 以激活节点复用逻辑。
diff --git a/dist/state.js b/dist/state.js
index 830a229..d69fccd 100644
--- a/dist/state.js
+++ b/dist/state.js
@@ -1,693 +1,719 @@
-var _a;
-let _activeBinding = null;
-let _noWriteBack = null;
-const setActiveBinding = (val) => _activeBinding = val;
-const setNoWriteBack = (val) => _noWriteBack = val;
-const _notifiers = /* @__PURE__ */ new Set();
-const onNotifyUpdate = (fn) => _notifiers.add(fn);
-function NewState(defaults = {}, getter = null, setter = null) {
-  const _defaults = {};
-  const _stateMappings = /* @__PURE__ */ new Map();
-  const _watchers = /* @__PURE__ */ new Map();
-  const _watchFunc = (k, cb) => {
-    if (!_watchers.has(k)) _watchers.set(k, /* @__PURE__ */ new Set());
-    !cb ? _watchers.get(k).clear() : _watchers.get(k).add(cb);
-    return () => _watchers.get(k).delete(cb);
-  };
-  const _unwatchFunc = (k, cb) => {
-    if (_watchers.has(k)) _watchers.get(k).delete(cb);
-  };
-  const __getter = getter || ((k) => _defaults[k]);
-  const __setter = setter || ((k, v) => _defaults[k] = v);
-  Object.assign(_defaults, defaults);
-  return new Proxy(_defaults, {
-    get(target, key) {
-      if (key === "__watch") return _watchFunc;
-      if (key === "__unwatch") return _unwatchFunc;
-      if (key === "__isProxy") return true;
-      if (_activeBinding) {
-        if (!_stateMappings.has(key)) _stateMappings.set(key, /* @__PURE__ */ new Set());
-        _stateMappings.get(key).add(_activeBinding);
-        if (!_activeBinding.node._states) _activeBinding.node._states = /* @__PURE__ */ new Set();
-        _activeBinding.node._states.add(_stateMappings);
-      }
-      return __getter(key);
-    },
-    set(target, key, value) {
-      if (__getter(key) !== value) {
-        __setter(key, value);
-      }
-      if (_watchers.has(key)) {
-        _watchers.get(key).forEach((cb) => {
-          const r = cb(value);
-          if (r !== void 0) {
-            value = r;
-            target[key] = value;
-          }
-        });
-      }
-      if (_watchers.has(null)) {
-        _watchers.get(null).forEach((cb) => cb(value));
-      }
-      if (_stateMappings.has(key)) {
-        const bindings = _stateMappings.get(key);
-        for (const binding of bindings) {
-          if (!binding.node.isConnected) {
-            bindings.delete(binding);
-            continue;
-          }
-          if (_noWriteBack !== binding.node) {
-            _notifiers.forEach((fn) => fn(binding));
-          }
-        }
-      }
-      return true;
-    }
-  });
-}
-const $ = (a, b) => b ? a.querySelector(b) : document.querySelector(a);
-const $$ = (a, b) => b ? a.querySelectorAll(b) : document.querySelectorAll(a);
-const _components = /* @__PURE__ */ new Map();
-const _pendingTemplates = [];
-const Component = {
-  getTemplate: (name) => document.querySelector(`template[component="${name.toUpperCase()}"]`),
-  register: (name, setupFunc, templateNode = null, ...globalNodes) => {
-    _components.set(name.toUpperCase(), setupFunc);
-    if (document.readyState !== "loading") Component._addTemplate(name, templateNode, globalNodes);
-    else _pendingTemplates.push([name, templateNode, globalNodes]);
-  },
-  exists: (name) => _components.has(name.toUpperCase()),
-  getSetupFunction: (name) => _components.get(name.toUpperCase()),
-  _addTemplate: (name, templateNode, globalNodes) => {
-    if (templateNode) {
-      const template = document.createElement("TEMPLATE");
-      template.setAttribute("component", name.toUpperCase());
-      template.content.appendChild(templateNode);
-      document.body.appendChild(template);
-    }
-    if (globalNodes) globalNodes.forEach((node) => document.body.appendChild(node));
-  },
-  _initPending: () => {
-    _pendingTemplates.forEach(([name, templateNode, globalNodes]) => Component._addTemplate(name, templateNode, globalNodes));
-    _pendingTemplates.length = 0;
-  }
-};
-function _mergeNode(from, to, scanObj, exists = {}) {
-  if (from.attributes) {
-    Array.from(from.attributes).forEach((attr) => {
-      if (attr.name === "class") return;
-      if (attr.name === "style") {
-        if (to.hasAttribute("style")) to.setAttribute("style", `${attr.value}; ${to.getAttribute("style")}`);
-        else to.setAttribute("style", attr.value);
-      } else if (!to.hasAttribute(attr.name)) {
-        to.setAttribute(attr.name, attr.value);
-      }
-    });
-  }
-  to.classList.add(...from.classList);
-  const fromContent = from.tagName === "TEMPLATE" ? from.content : from;
-  const toContent = to.tagName === "TEMPLATE" ? to.content : to;
-  Array.from(fromContent.childNodes).forEach((child) => toContent.appendChild(child));
-  if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists);
-}
-function _makeComponent(name, node, scanObj, exists = {}) {
-  if (exists[name]) return;
-  exists[name] = true;
-  if (scanObj.thisObj) {
-    Array.from(node.attributes).forEach((attr) => {
-      if ((attr.name.startsWith("$") || attr.name.startsWith("st-")) && attr.value.includes("this.")) {
-        attr.value = attr.value.replace(/\bthis\./g, "this.parent.");
-      }
-    });
-  }
-  const componentFunc = Component.getSetupFunction(name);
-  const slots = {};
-  Array.from(node.childNodes).forEach((child) => {
-    if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute("slot")) {
-      slots[child.getAttribute("slot")] = child;
-      child.removeAttribute("slot");
-    }
-  });
-  node.innerHTML = "";
-  node.state = NewState(node.state || {});
-  const template = Component.getTemplate(name);
-  if (template) {
-    const tplnode = template.content.cloneNode(true);
-    if (tplnode.childNodes.length) {
-      const rootNode = Array.from(tplnode.childNodes).find((n) => n.nodeType === Node.ELEMENT_NODE);
-      if (rootNode) _mergeNode(rootNode, node, scanObj, exists);
-      $$(node, "[slot-id]").forEach((placeholder) => {
-        const slotName = placeholder.getAttribute("slot-id");
-        if (slots[slotName]) {
-          placeholder.removeAttribute("slot-id");
-          placeholder.innerHTML = "";
-          _mergeNode(slots[slotName], placeholder, scanObj, exists);
-        }
-      });
-    }
-  }
-  if (componentFunc) componentFunc(node);
-}
-let _disableRunCodeError = false;
-function setDisableRunCodeError(value) {
-  _disableRunCodeError = value;
-}
-const _fnCache = /* @__PURE__ */ new Map();
-function _runCode(code, vars, thisObj, extendVars) {
-  const allVars = { ...extendVars || {}, ...vars || {} };
-  const argKeys = Object.keys(allVars);
-  const argValues = Object.values(allVars);
-  const cacheKey = code + argKeys.join(",");
-  try {
-    let fn = _fnCache.get(cacheKey);
-    if (!fn) {
-      fn = new Function("Hash", "LocalStorage", "State", ...argKeys, code);
-      _fnCache.set(cacheKey, fn);
-    }
-    return fn.apply(thisObj, [globalThis.Hash, globalThis.LocalStorage, globalThis.State, ...argValues]);
-  } catch (e) {
-    if (!_disableRunCodeError) console.error(e, extendVars, [code, extendVars, vars, thisObj]);
-    return null;
-  }
-}
-function _returnCode(code, vars, thisObj, extendVars) {
-  if (code.includes("${")) return _runCode("return `" + code + "`", vars, thisObj, extendVars);
-  else return _runCode("return " + code, vars, thisObj, extendVars);
-}
-let _translator = (text, args) => {
-  if (!text || typeof text !== "string") return text;
-  return text.replace(/\{(.+?)\}/g, (match, key) => args.hasOwnProperty(key) ? args[key] : match);
-};
-const SetTranslator = (fn) => _translator = fn;
-const _translate = (text) => {
-  if (!text || typeof text !== "string" || !text.includes("{#")) return text;
-  return text.replace(/\{#(.+?)#\}/g, (m, content) => {
-    const parts = content.split("||").map((s) => s.trim());
-    const args = {};
-    if (parts.length > 1) {
-      const matches = parts[0].match(/\{(.+?)\}/g);
-      if (matches) matches.forEach((match, i) => args[match.substring(1, match.length - 1)] = parts[i + 1] || "");
-    }
-    return _translator(parts[0], args);
-  });
-};
-if (typeof document !== "undefined") {
-  try {
-    document.createElement("div").setAttribute("$t", "1");
-  } catch (e) {
-    const originalSetAttribute = Element.prototype.setAttribute;
-    Element.prototype.setAttribute = function(name, value) {
-      if (!name.startsWith("$")) return originalSetAttribute.call(this, name, value);
-      const prefix = name.startsWith("$$") ? "st-st-" : "st-";
-      return originalSetAttribute.call(this, prefix + name.substring(name.startsWith("$$") ? 2 : 1), value);
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ApigoState = {}));
+})(this, function(exports2) {
+  "use strict";
+  var _a;
+  let _activeBinding = null;
+  let _noWriteBack = null;
+  const setActiveBinding = (val) => _activeBinding = val;
+  const setNoWriteBack = (val) => _noWriteBack = val;
+  const _notifiers = /* @__PURE__ */ new Set();
+  const onNotifyUpdate = (fn) => _notifiers.add(fn);
+  function NewState(defaults = {}, getter = null, setter = null) {
+    const _defaults = {};
+    const _stateMappings = /* @__PURE__ */ new Map();
+    const _watchers = /* @__PURE__ */ new Map();
+    const _watchFunc = (k, cb) => {
+      if (!_watchers.has(k)) _watchers.set(k, /* @__PURE__ */ new Set());
+      !cb ? _watchers.get(k).clear() : _watchers.get(k).add(cb);
+      return () => _watchers.get(k).delete(cb);
     };
-  }
-}
-onNotifyUpdate((binding) => _updateBinding(binding));
-function _clearRenderedNodes(node) {
-  if (node._renderedNodes) node._renderedNodes.forEach((nodes) => nodes.forEach((child) => {
-    child.remove();
-    if (child._renderedNodes) _clearRenderedNodes(child);
-  }));
-}
-function _updateBinding(binding) {
-  const node = binding.node;
-  if (!node.isConnected && node.tagName !== "TEMPLATE") return;
-  setActiveBinding(binding);
-  if (window.__perfTrace) window.__perfTrace.evalCount++;
-  const evalStart = window.__perfTrace ? performance.now() : 0;
-  let result = binding.exp ? binding.tpl ? _returnCode(binding.tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null : binding.tpl;
-  if (binding.exp === 2 && typeof result === "string") {
-    try {
-      result = _returnCode(result, { thisNode: node }, node._thisObj || node, node._ref || null);
-    } catch (e) {
-    }
-  }
-  if (window.__perfTrace) window.__perfTrace.evalTotal += performance.now() - evalStart;
-  setActiveBinding(null);
-  if (binding.prop) {
-    const prop = binding.prop;
-    let o = node;
-    for (let i = 0; i < prop.length - 1; i++) {
-      if (!prop[i]) continue;
-      if (o[prop[i]] == null) o[prop[i]] = {};
-      o = o[prop[i]];
-      if (typeof o !== "object") break;
-    }
-    if (typeof o === "object" && o !== null) {
-      const lk = prop[prop.length - 1];
-      if (lk) {
-        if (typeof result === "object" && result != null && !Array.isArray(result) && o[lk] == null) o[lk] = {};
-        const lo = o[lk];
-        if (typeof lo === "object" && lo != null && lo.__watch) Object.assign(lo, result);
-        else o[lk] = result;
-      } else if (typeof result === "object" && result != null && !Array.isArray(result)) {
-        Object.assign(o, result);
-      }
-    }
-  } else if (binding.attr) {
-    const attr = binding.attr;
-    if (attr === "if") {
-      if (result) {
-        if (!node._renderedNodes || node._renderedNodes.length === 0) {
-          node._children.forEach((child) => {
-            child._stManaged = true;
-            node.parentNode.insertBefore(child, node);
-            child._ref = { ...node._ref };
+    const _unwatchFunc = (k, cb) => {
+      if (_watchers.has(k)) _watchers.get(k).delete(cb);
+    };
+    const __getter = getter || ((k) => _defaults[k]);
+    const __setter = setter || ((k, v) => _defaults[k] = v);
+    Object.assign(_defaults, defaults);
+    return new Proxy(_defaults, {
+      get(target, key) {
+        if (key === "__watch") return _watchFunc;
+        if (key === "__unwatch") return _unwatchFunc;
+        if (key === "__isProxy") return true;
+        if (_activeBinding) {
+          if (!_stateMappings.has(key)) _stateMappings.set(key, /* @__PURE__ */ new Set());
+          _stateMappings.get(key).add(_activeBinding);
+          if (!_activeBinding.node._states) _activeBinding.node._states = /* @__PURE__ */ new Set();
+          _activeBinding.node._states.add(_stateMappings);
+        }
+        return __getter(key);
+      },
+      set(target, key, value) {
+        if (__getter(key) !== value) {
+          __setter(key, value);
+        }
+        if (_watchers.has(key)) {
+          _watchers.get(key).forEach((cb) => {
+            const r = cb(value);
+            if (r !== void 0) {
+              value = r;
+              target[key] = value;
+            }
           });
-          node._renderedNodes = [node._children];
-        } else {
-          node._renderedNodes[0].forEach((child) => _scanTree(child, { thisObj: node._thisObj, extendVars: child._ref }));
         }
-      } else {
-        _clearRenderedNodes(node);
-        node._renderedNodes = [];
-      }
-    } else if (attr === "each") {
-      if (result && typeof result === "object") {
-        const asName = node.getAttribute("as") || "item";
-        const indexName = node.getAttribute("index") || "index";
-        const keyName = node.getAttribute("key");
-        let keys, getVal;
-        if (result instanceof Map) {
-          keys = Array.from(result.keys());
-          getVal = (k) => result.get(k);
-        } else if (typeof result[Symbol.iterator] === "function") {
-          const arr = Array.isArray(result) ? result : Array.from(result);
-          keys = new Array(arr.length);
-          for (let i = 0; i < arr.length; i++) keys[i] = i;
-          getVal = (k) => arr[k];
-        } else {
-          keys = Object.keys(result);
-          getVal = (k) => result[k];
+        if (_watchers.has(null)) {
+          _watchers.get(null).forEach((cb) => cb(value));
         }
-        if (!node._keyedNodes) node._keyedNodes = /* @__PURE__ */ new Map();
-        const newKeyedNodes = /* @__PURE__ */ new Map();
-        const currentRenderedNodes = [];
-        keys.forEach((k, i) => {
-          const item = getVal(k);
-          const rawKey = keyName ? item && typeof item === "object" ? item[keyName] : item : k;
-          const keyVal = rawKey === void 0 || rawKey === null || newKeyedNodes.has(rawKey) ? `st_key_fallback_${i}_${Math.random()}` : rawKey;
-          let existingNodes = node._keyedNodes.get(keyVal);
-          if (existingNodes) {
-            node._keyedNodes.delete(keyVal);
-            existingNodes.forEach((child) => {
-              if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.reuseCount++;
-              let scopeChanged = false;
-              for (let key in node._ref) {
-                if (key === asName || key === indexName) continue;
-                if (child._ref[key] !== node._ref[key]) {
-                  child._ref[key] = node._ref[key];
-                  scopeChanged = true;
-                }
-              }
-              const indexChanged = child._ref[indexName] !== k;
-              if (indexChanged) child._ref[indexName] = k;
-              if (child._ref[asName] !== item || scopeChanged) {
-                child._ref[asName] = item;
-                if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.scanCount++;
-                _scanTree(child, { thisObj: node._thisObj, extendVars: child._ref });
-              } else if (node.parentNode.lastChild !== child) {
-                if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.moveCount++;
-                node.parentNode.insertBefore(child, node);
-              }
-            });
-          } else {
-            existingNodes = [];
-            node._children.forEach((child) => {
-              const cloned = child.cloneNode(true);
-              cloned._stManaged = true;
-              cloned._ref = { ...node._ref, [indexName]: k, [asName]: item };
-              cloned._thisObj = node._thisObj;
-              node.parentNode.insertBefore(cloned, node);
-              existingNodes.push(cloned);
-            });
+        if (_stateMappings.has(key)) {
+          const bindings = _stateMappings.get(key);
+          for (const binding of bindings) {
+            if (!binding.node.isConnected) {
+              bindings.delete(binding);
+              continue;
+            }
+            if (_noWriteBack !== binding.node) {
+              _notifiers.forEach((fn) => fn(binding));
+            }
           }
-          newKeyedNodes.set(keyVal, existingNodes);
-          currentRenderedNodes.push(existingNodes);
-          existingNodes.forEach((child) => node.parentNode.insertBefore(child, node));
-        });
-        node._keyedNodes.forEach((nodes) => nodes.forEach((child) => {
-          _clearRenderedNodes(child);
-          child.remove();
-        }));
-        node._keyedNodes = newKeyedNodes;
-        node._renderedNodes = currentRenderedNodes;
-      } else {
-        _clearRenderedNodes(node);
-        if (node._keyedNodes) node._keyedNodes.forEach((nodes) => nodes.forEach((child) => child.remove()));
-        node._keyedNodes = /* @__PURE__ */ new Map();
-        node._renderedNodes = [];
-      }
-    } else if (attr === "bind") {
-      if (["INPUT", "SELECT", "TEXTAREA"].includes(node.tagName) && !node.hasAttribute("autocomplete")) node.setAttribute("autocomplete", "off");
-      if (node.type === "checkbox") {
-        if (node.value !== "on" && !result) {
-          _runCode(`${binding.tpl} = []`, { thisNode: node }, node._thisObj || node, node._ref || {});
-          result = [];
         }
-        node._checkboxMultiMode = result instanceof Array;
-        const isChecked = result instanceof Array ? result.includes(node.value) : !!result;
-        if (node.checked !== isChecked) node.checked = isChecked;
-      } else if (node.type === "radio") {
-        if (node.checked !== (node.value === String(result ?? ""))) node.checked = node.value === String(result ?? "");
-      } else if ("value" in node && node.type !== "file") {
-        setTimeout(() => {
-          if (node.value !== String(result ?? "")) node.value = result;
-        });
-      } else if (node.isContentEditable) {
-        if (node.innerHTML !== String(result ?? "")) node.innerHTML = result;
-      }
-      node.dispatchEvent(new CustomEvent("bind", { bubbles: false, detail: result }));
-    } else {
-      if (["checked", "disabled", "readonly"].includes(attr)) result = !!result;
-      if (typeof result === "boolean") result ? node.setAttribute(attr, "") : node.removeAttribute(attr);
-      else if (result !== void 0) {
-        if (typeof result !== "string") result = JSON.stringify(result);
-        if (attr === "text") node.textContent = result ?? "";
-        else if (attr === "html") node.innerHTML = result ?? "";
-        else if (node.tagName === "IMG" && attr === "src" && result.includes(".svg")) node.setAttribute("_src", result ?? "");
-        else node.setAttribute(attr, result ?? "");
-      }
-    }
-  }
-}
-const _initBinding = (binding) => {
-  if (!binding.node._bindings) binding.node._bindings = [];
-  binding.node._bindings.push({ attr: binding.attr, prop: binding.prop, tpl: binding.tpl, exp: binding.exp });
-  _updateBinding(binding);
-};
-const _parseNode = (node, scanObj) => {
-  let hasBindings = false;
-  if (node._bindings) {
-    node._states = /* @__PURE__ */ new Set();
-    node._bindings.forEach((b) => _updateBinding({ node, ...b }));
-    if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
-    hasBindings = true;
-  }
-  if (Component.exists(node.tagName) && !node._componentInitialized) {
-    Array.from(node.attributes).forEach((attr) => {
-      var _a2;
-      if (attr.name.startsWith("$.")) {
-        const realAttrName = attr.name.slice(2);
-        let tpl = _translate(attr.value);
-        if (tpl.includes("this.")) tpl = tpl.replace(/\bthis\./g, "this.parent.");
-        const result = _returnCode(tpl, { thisNode: node }, { parent: scanObj.thisObj || node }, node._ref || {});
-        let o = node;
-        const prop = realAttrName.split(".");
-        for (let i = 0; i < prop.length - 1; i++) {
-          if (prop[i]) o = o[_a2 = prop[i]] ?? (o[_a2] = {});
-        }
-        o[prop[prop.length - 1]] = result;
-        node.removeAttribute(attr.name);
+        return true;
       }
     });
-    _makeComponent(node.tagName, node, scanObj);
-    $$(node, "[slot-id]").forEach((p) => p.removeAttribute("slot-id"));
-    node._componentInitialized = true;
-    if (!node._thisObj) node._thisObj = node;
   }
-  if (node.tagName === "TEMPLATE") {
-    node._children = [...node.content.childNodes];
-    if (!node._renderedNodes) node._renderedNodes = [];
-  }
-  if (hasBindings) return;
-  let attrs = [];
-  const triggerAttrs = ["$if", "$each", "st-if", "st-each", "$$if", "$$each", "st-st-if", "st-st-each"];
-  if (node.tagName === "TEMPLATE") {
-    triggerAttrs.forEach((n) => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n)));
-  } else {
-    attrs = Array.from(node.attributes).filter((a) => (a.name.startsWith("$") || a.name.startsWith("st-")) && !triggerAttrs.includes(a.name) || a.name.includes("."));
-  }
-  if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj;
-  if (!node._thisObj) node._thisObj = scanObj.thisObj || null;
-  if (!node._ref) node._ref = scanObj.extendVars || {};
-  node._states = /* @__PURE__ */ new Set();
-  attrs.forEach((attr) => {
-    let exp = 0;
-    if (attr.name.startsWith("$$") || attr.name.startsWith("st-st-")) exp = 2;
-    else if (attr.name.startsWith("$") || attr.name.startsWith("st-")) exp = 1;
-    const realAttrName = exp === 2 ? attr.name.startsWith("$$") ? attr.name.slice(2) : attr.name.slice(6) : exp === 1 ? attr.name.startsWith("$") ? attr.name.slice(1) : attr.name.slice(3) : attr.name;
-    let tpl = attr.value;
-    node.removeAttribute(attr.name);
-    if (realAttrName.startsWith(".")) _initBinding({ node, prop: realAttrName.split("."), tpl, exp });
-    else if (realAttrName.startsWith("on")) {
-      const eventName = realAttrName.slice(2);
-      if (eventName === "update") node._hasOnUpdate = true;
-      if (eventName === "load" && !["BODY", "IMG", "IFRAME"].includes(node.tagName)) node._hasOnLoad = true;
-      if (eventName === "unload" && !["BODY", "IMG", "IFRAME"].includes(node.tagName)) node._hasOnUnload = true;
-      node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...e.detail || {} }, scanObj.thisObj || node, node._ref || {}));
-    } else {
-      if (realAttrName === "bind") {
-        node.addEventListener(node.tagName === "TEXTAREA" || node.isContentEditable || node.type === "text" || node.type === "password" ? "input" : "change", (e) => {
-          let newVal = node.isContentEditable ? e.target.innerHTML : node.type === "checkbox" ? e.target.checked : e.target.files || e.target.value || e.detail;
-          setNoWriteBack(node);
-          setDisableRunCodeError(true);
-          if (node.type === "checkbox" && node._checkboxMultiMode) _runCode(`!!checked ? (!${tpl}.includes(val) && ${tpl}.push(val)) : (index = ${tpl}.indexOf(val), index > -1 && ${tpl}.splice(index, 1))`, { val: node.value, checked: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {});
-          else _runCode(`${tpl} = val`, { val: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {});
-          setDisableRunCodeError(false);
-          setNoWriteBack(null);
-        });
-      } else if (realAttrName === "text" && !tpl) {
-        tpl = node.textContent;
-        node.textContent = "";
-      }
-      if (tpl) {
-        tpl = _translate(tpl);
-        _initBinding({ node, attr: realAttrName, tpl, exp });
+  const $ = (a, b) => b ? a.querySelector(b) : document.querySelector(a);
+  const $$ = (a, b) => b ? a.querySelectorAll(b) : document.querySelectorAll(a);
+  const _components = /* @__PURE__ */ new Map();
+  const _pendingTemplates = [];
+  const Component = {
+    getTemplate: (name) => document.querySelector(`template[component="${name.toUpperCase()}"]`),
+    register: (name, setupFunc, templateNode = null, ...globalNodes) => {
+      _components.set(name.toUpperCase(), setupFunc);
+      if (document.readyState !== "loading") Component._addTemplate(name, templateNode, globalNodes);
+      else _pendingTemplates.push([name, templateNode, globalNodes]);
+    },
+    exists: (name) => _components.has(name.toUpperCase()),
+    getSetupFunction: (name) => _components.get(name.toUpperCase()),
+    _addTemplate: (name, templateNode, globalNodes) => {
+      if (templateNode) {
+        const template = document.createElement("TEMPLATE");
+        template.setAttribute("component", name.toUpperCase());
+        template.content.appendChild(templateNode);
+        document.body.appendChild(template);
       }
+      if (globalNodes) globalNodes.forEach((node) => document.body.appendChild(node));
+    },
+    _initPending: () => {
+      _pendingTemplates.forEach(([name, templateNode, globalNodes]) => Component._addTemplate(name, templateNode, globalNodes));
+      _pendingTemplates.length = 0;
     }
-  });
-  if (node._hasOnLoad || node._componentInitialized) Promise.resolve().then(() => node.dispatchEvent(new Event("load", { bubbles: false })));
-  if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
-  if (node._thisObj) scanObj.thisObj = node._thisObj;
-};
-const _scanTree = (node, scanObj = {}) => {
-  if (node.nodeType === 3) {
-    if (node._stTranslated) return;
-    const translated = _translate(node.textContent);
-    if (translated !== node.textContent) node.textContent = translated;
-    node._stTranslated = true;
-    return;
-  }
-  if (node.nodeType !== 1) return;
-  if (!node._stTranslated) {
-    Array.from(node.attributes).forEach((attr) => {
-      if (!attr.name.startsWith("$") && !attr.name.startsWith("st-") && !attr.name.startsWith(".")) {
-        const translated = _translate(attr.value);
-        if (translated !== attr.value) attr.value = translated;
-      }
-    });
-    node._stTranslated = true;
-  }
-  let resolvedThisObj = node._thisObj;
-  let resolvedRef = node._ref;
-  if (resolvedThisObj === void 0 || resolvedRef === void 0) {
-    let curr = node;
-    while (curr && (resolvedThisObj === void 0 || resolvedRef === void 0)) {
-      if (resolvedThisObj === void 0 && curr._thisObj !== void 0) resolvedThisObj = curr._thisObj;
-      if (resolvedRef === void 0 && curr._ref !== void 0) resolvedRef = { ...curr._ref };
-      curr = curr.parentNode;
-    }
-  }
-  if (resolvedThisObj === void 0) resolvedThisObj = scanObj.thisObj;
-  if (resolvedRef === void 0) resolvedRef = scanObj.extendVars;
-  const triggerAttrs = ["$if", "$each", "st-if", "st-each", "$$if", "$$each", "st-st-if", "st-st-each"];
-  const eachAttrs = ["$each", "st-each", "$$each", "st-st-each"];
-  if (node.tagName !== "TEMPLATE" && triggerAttrs.some((t) => node.hasAttribute(t))) {
-    const template = document.createElement("TEMPLATE");
-    const attrs = Array.from(node.attributes).filter((attr) => triggerAttrs.includes(attr.name) || eachAttrs.some((t) => node.hasAttribute(t)) && ["as", "index"].includes(attr.name));
-    attrs.forEach((attr) => {
-      template.setAttribute(attr.name, attr.value);
-      node.removeAttribute(attr.name);
-    });
-    node.parentNode.insertBefore(template, node);
-    template.content.appendChild(node);
-    template._ref = resolvedRef;
-    template._thisObj = resolvedThisObj;
-    _scanTree(template, scanObj);
-    return;
-  }
-  if (node.tagName === "TEMPLATE" && (node.hasAttribute("$if") || node.hasAttribute("st-if") || node.hasAttribute("$$if") || node.hasAttribute("st-st-if")) && (node.hasAttribute("$each") || node.hasAttribute("st-each") || node.hasAttribute("$$each") || node.hasAttribute("st-st-each"))) {
-    const template = document.createElement("TEMPLATE");
-    const attrs = Array.from(node.attributes).filter((attr2) => triggerAttrs.includes(attr2.name));
-    const attr = attrs[attrs.length - 1];
-    template.setAttribute(attr.name, attr.value);
-    node.removeAttribute(attr.name);
-    if (eachAttrs.includes(attr.name)) {
-      Array.from(node.attributes).filter((attr2) => ["as", "index"].includes(attr2.name)).forEach((attr2) => {
-        template.setAttribute(attr2.name, attr2.value);
-        node.removeAttribute(attr2.name);
-      });
-    }
-    Array.from(node.content.childNodes).forEach((child) => template.content.appendChild(child));
-    node.content.appendChild(template);
-    template._ref = resolvedRef;
-    template._thisObj = resolvedThisObj;
-  }
-  if (node.tagName === "IMG" && (node.hasAttribute("src") || node.hasAttribute("_src") || node.hasAttribute("$src"))) {
-    const imgNode = node;
-    Promise.resolve().then(() => {
-      const url = imgNode.getAttribute("_src") || imgNode.getAttribute("src");
-      if (url) fetch(url, { cache: "force-cache" }).then((r) => r.text()).then((svgText) => {
-        const realSvg = new DOMParser().parseFromString(svgText, "image/svg+xml").querySelector("svg");
-        if (realSvg) {
-          Array.from(imgNode.attributes).forEach((attr) => realSvg.setAttribute(attr.name, attr.value));
-          imgNode.replaceWith(realSvg);
+  };
+  function _mergeNode(from, to, scanObj, exists = {}) {
+    if (from.attributes) {
+      Array.from(from.attributes).forEach((attr) => {
+        if (attr.name === "class") return;
+        if (attr.name === "style") {
+          if (to.hasAttribute("style")) to.setAttribute("style", `${attr.value}; ${to.getAttribute("style")}`);
+          else to.setAttribute("style", attr.value);
+        } else if (!to.hasAttribute(attr.name)) {
+          to.setAttribute(attr.name, attr.value);
         }
       });
+    }
+    to.classList.add(...from.classList);
+    const fromContent = from.tagName === "TEMPLATE" ? from.content : from;
+    const toContent = to.tagName === "TEMPLATE" ? to.content : to;
+    Array.from(fromContent.childNodes).forEach((child) => toContent.appendChild(child));
+    if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists);
+  }
+  function _makeComponent(name, node, scanObj, exists = {}) {
+    if (exists[name]) return;
+    exists[name] = true;
+    if (scanObj.thisObj) {
+      Array.from(node.attributes).forEach((attr) => {
+        if ((attr.name.startsWith("$") || attr.name.startsWith("st-")) && attr.value.includes("this.")) {
+          attr.value = attr.value.replace(/\bthis\./g, "this.parent.");
+        }
+      });
+    }
+    const componentFunc = Component.getSetupFunction(name);
+    const slots = {};
+    Array.from(node.childNodes).forEach((child) => {
+      if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute("slot")) {
+        slots[child.getAttribute("slot")] = child;
+        child.removeAttribute("slot");
+      }
     });
-  }
-  if (node._thisObj !== void 0) scanObj.thisObj = node._thisObj || null;
-  else {
-    let curr = node;
-    while (curr && curr._thisObj === void 0) curr = curr.parentNode;
-    scanObj.thisObj = curr ? curr._thisObj : null;
-  }
-  if (node._ref === void 0) {
-    let curr = node;
-    while (curr && curr._ref === void 0) curr = curr.parentNode;
-    node._ref = curr ? { ...curr._ref } : {};
-  }
-  if (node._refExt !== void 0) {
-    Object.assign(node._ref, node._refExt);
-  }
-  if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars);
-  _parseNode(node, { ...scanObj });
-  const nodes = [...node.childNodes || []];
-  const nextScanObj = { thisObj: scanObj.thisObj, extendVars: { ...node._ref } };
-  nodes.forEach((child) => {
-    if (!child._stManaged) _scanTree(child, nextScanObj);
-  });
-};
-const _unbindTree = (node) => {
-  if (node.nodeType !== 1) return;
-  if (node._hasOnUnload) node.dispatchEvent(new Event("unload", { bubbles: false }));
-  if (node._states) node._states.forEach((mappings) => {
-    for (const [key, bindingSet] of mappings) {
-      for (const binding of bindingSet) {
-        if (binding.node === node) bindingSet.delete(binding);
+    node.innerHTML = "";
+    node.state = NewState(node.state || {});
+    const template = Component.getTemplate(name);
+    if (template) {
+      const tplnode = template.content.cloneNode(true);
+      if (tplnode.childNodes.length) {
+        const rootNode = Array.from(tplnode.childNodes).find((n) => n.nodeType === Node.ELEMENT_NODE);
+        if (rootNode) _mergeNode(rootNode, node, scanObj, exists);
+        $$(node, "[slot-id]").forEach((placeholder) => {
+          const slotName = placeholder.getAttribute("slot-id");
+          if (slots[slotName]) {
+            placeholder.removeAttribute("slot-id");
+            placeholder.innerHTML = "";
+            _mergeNode(slots[slotName], placeholder, scanObj, exists);
+          }
+        });
       }
     }
-  });
-  node.childNodes && node.childNodes.forEach((child) => _unbindTree(child));
-};
-const RefreshState = _scanTree;
-const Util = {
-  clone: window.structuredClone || ((obj) => JSON.parse(JSON.stringify(obj))),
-  base64: (str) => btoa(String.fromCharCode(...new TextEncoder().encode(str))),
-  unbase64: (str) => new TextDecoder().decode(Uint8Array.from(atob(str), (c) => c.charCodeAt(0))),
-  urlbase64: (str) => Util.base64(str).replace(/[+/=]/g, (m) => ({ "+": "-", "/": "", "=": "" })[m]),
-  unurlbase64: (str) => Util.unbase64(str.replace(/[-_.]/g, (m) => ({ "-": "+", "_": "/", ".": "=" })[m]).padEnd(Math.ceil(str.length / 4) * 4, "=")),
-  safeJson: (str) => {
+    if (componentFunc) componentFunc(node);
+  }
+  let _disableRunCodeError = false;
+  function setDisableRunCodeError(value) {
+    _disableRunCodeError = value;
+  }
+  const _fnCache = /* @__PURE__ */ new Map();
+  function _runCode(code, vars, thisObj, extendVars) {
+    const allVars = { ...extendVars || {}, ...vars || {} };
+    const argKeys = Object.keys(allVars);
+    const argValues = Object.values(allVars);
+    const cacheKey = code + argKeys.join(",");
     try {
-      return JSON.parse(str);
-    } catch {
+      let fn = _fnCache.get(cacheKey);
+      if (!fn) {
+        fn = new Function("Hash", "LocalStorage", "State", ...argKeys, code);
+        _fnCache.set(cacheKey, fn);
+      }
+      return fn.apply(thisObj, [globalThis.Hash, globalThis.LocalStorage, globalThis.State, ...argValues]);
+    } catch (e) {
+      if (!_disableRunCodeError) console.error(e, extendVars, [code, extendVars, vars, thisObj]);
       return null;
     }
-  },
-  updateDefaults: (obj, defaults) => {
-    for (const k in defaults) if (obj[k] === void 0) obj[k] = defaults[k];
-  },
-  copyFunction: (toObj, fromObj, ...funcNames) => {
-    funcNames.forEach((name) => toObj[name] = fromObj[name].bind(fromObj));
-  },
-  getFunctionBody: (fn) => {
-    const code = fn.toString();
-    return code.slice(code.indexOf("{") + 1, code.lastIndexOf("}")).trim();
-  },
-  makeDom: (html) => {
-    if (html.includes(">\n")) html = html.replace(/>\s+</g, "><").trim();
-    const node = document.createElement("div");
-    node.innerHTML = html;
-    return node.children[0];
-  },
-  newAvg: () => {
-    let total = 0, count = 0, avg = 0;
-    return {
-      add: (v) => {
-        total += v;
-        count++;
-        return avg = total / count;
-      },
-      get: () => avg,
-      clear: () => {
-        total = 0, count = 0, avg = 0;
-      }
-    };
-  },
-  newTimeCount: () => {
-    let startTime = 0, total = 0, count = 0;
-    return {
-      start: () => startTime = (/* @__PURE__ */ new Date()).getTime(),
-      end: () => {
-        const endTime = (/* @__PURE__ */ new Date()).getTime();
-        const left = endTime - startTime;
-        startTime = endTime;
-        total += left;
-        count++;
-        return left;
-      },
-      avg: () => total / count
-    };
   }
-};
-globalThis.Util = Util;
-let _hashParams = new URLSearchParams(((_a = window.location.hash) == null ? void 0 : _a.substring(1)) || "");
-const Hash = NewState({}, (k) => Util.safeJson(_hashParams.get(k)), (k, v) => {
-  const oldStr = _hashParams.get(k);
-  const newStr = v === void 0 ? void 0 : JSON.stringify(v);
-  if (oldStr === newStr || oldStr === null && newStr === void 0) return;
-  v === void 0 ? _hashParams.delete(k) : _hashParams.set(k, newStr);
-  window.location.hash = "#" + _hashParams.toString();
-});
-if (typeof window !== "undefined") {
-  window.addEventListener("hashchange", () => {
-    var _a2;
-    const oldHashParams = _hashParams;
-    _hashParams = new URLSearchParams(((_a2 = window.location.hash) == null ? void 0 : _a2.substring(1)) || "");
-    _hashParams.forEach((v, k) => {
-      if (oldHashParams.get(k) !== v) Hash[k] = Util.safeJson(v);
-    });
-    oldHashParams.forEach((v, k) => {
-      if (_hashParams.get(k) === void 0) Hash[k] = void 0;
-    });
-  });
-}
-const LocalStorage = NewState({}, (k) => Util.safeJson(localStorage.getItem(k)), (k, v) => {
-  const oldStr = localStorage.getItem(k);
-  const newStr = v === void 0 ? void 0 : JSON.stringify(v);
-  if (oldStr === newStr || oldStr === null && newStr === void 0) return;
-  v === void 0 ? localStorage.removeItem(k) : localStorage.setItem(k, newStr);
-});
-globalThis.Hash = Hash;
-globalThis.LocalStorage = LocalStorage;
-if (typeof document !== "undefined") {
-  const init = () => {
-    Component._initPending();
-    new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        mutation.addedNodes.forEach((newNode) => {
-          if (newNode.isConnected) _scanTree(newNode);
-        });
-        mutation.removedNodes.forEach((oldNode) => _unbindTree(oldNode));
-      });
-    }).observe(document.documentElement, { childList: true, subtree: true });
-    _scanTree(document.documentElement);
+  function _returnCode(code, vars, thisObj, extendVars) {
+    if (code.includes("${")) return _runCode("return `" + code + "`", vars, thisObj, extendVars);
+    else return _runCode("return " + code, vars, thisObj, extendVars);
+  }
+  let _translator = (text, args) => {
+    if (!text || typeof text !== "string") return text;
+    return text.replace(/\{(.+?)\}/g, (match, key) => args.hasOwnProperty(key) ? args[key] : match);
   };
-  if (document.readyState !== "loading") init();
-  else document.addEventListener("DOMContentLoaded", init, true);
-}
-export {
-  $,
-  $$,
-  Component,
-  Hash,
-  LocalStorage,
-  NewState,
-  RefreshState,
-  SetTranslator,
-  Util,
-  _scanTree,
-  _unbindTree
-};
+  const SetTranslator = (fn) => _translator = fn;
+  const _translate = (text) => {
+    if (!text || typeof text !== "string" || !text.includes("{#")) return text;
+    return text.replace(/\{#(.+?)#\}/g, (m, content) => {
+      const parts = content.split("||").map((s) => s.trim());
+      const args = {};
+      if (parts.length > 1) {
+        const matches = parts[0].match(/\{(.+?)\}/g);
+        if (matches) matches.forEach((match, i) => args[match.substring(1, match.length - 1)] = parts[i + 1] || "");
+      }
+      return _translator(parts[0], args);
+    });
+  };
+  if (typeof document !== "undefined") {
+    try {
+      document.createElement("div").setAttribute("$t", "1");
+    } catch (e) {
+      const originalSetAttribute = Element.prototype.setAttribute;
+      Element.prototype.setAttribute = function(name, value) {
+        if (!name.startsWith("$")) return originalSetAttribute.call(this, name, value);
+        const prefix = name.startsWith("$$") ? "st-st-" : "st-";
+        return originalSetAttribute.call(this, prefix + name.substring(name.startsWith("$$") ? 2 : 1), value);
+      };
+    }
+  }
+  onNotifyUpdate((binding) => _updateBinding(binding));
+  function _clearRenderedNodes(node) {
+    if (node._renderedNodes) node._renderedNodes.forEach((nodes) => nodes.forEach((child) => {
+      child.remove();
+      if (child._renderedNodes) _clearRenderedNodes(child);
+    }));
+  }
+  function _updateBinding(binding) {
+    const node = binding.node;
+    if (!node.isConnected && node.tagName !== "TEMPLATE") return;
+    setActiveBinding(binding);
+    if (window.__perfTrace) window.__perfTrace.evalCount++;
+    const evalStart = window.__perfTrace ? performance.now() : 0;
+    let result = binding.exp ? binding.tpl ? _returnCode(binding.tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null : binding.tpl;
+    if (binding.exp === 2 && typeof result === "string") {
+      try {
+        result = _returnCode(result, { thisNode: node }, node._thisObj || node, node._ref || null);
+      } catch (e) {
+      }
+    }
+    if (window.__perfTrace) window.__perfTrace.evalTotal += performance.now() - evalStart;
+    setActiveBinding(null);
+    if (binding.prop) {
+      const prop = binding.prop;
+      let o = node;
+      for (let i = 0; i < prop.length - 1; i++) {
+        if (!prop[i]) continue;
+        if (o[prop[i]] == null) o[prop[i]] = {};
+        o = o[prop[i]];
+        if (typeof o !== "object") break;
+      }
+      if (typeof o === "object" && o !== null) {
+        const lk = prop[prop.length - 1];
+        if (lk) {
+          if (typeof result === "object" && result != null && !Array.isArray(result) && o[lk] == null) o[lk] = {};
+          const lo = o[lk];
+          if (typeof lo === "object" && lo != null && lo.__watch) Object.assign(lo, result);
+          else o[lk] = result;
+        } else if (typeof result === "object" && result != null && !Array.isArray(result)) {
+          Object.assign(o, result);
+        }
+      }
+    } else if (binding.attr) {
+      const attr = binding.attr;
+      if (attr === "if") {
+        if (result) {
+          if (!node._renderedNodes || node._renderedNodes.length === 0) {
+            node._children.forEach((child) => {
+              child._stManaged = true;
+              node.parentNode.insertBefore(child, node);
+              child._ref = { ...node._ref };
+            });
+            node._renderedNodes = [node._children];
+          } else {
+            node._renderedNodes[0].forEach((child) => _scanTree(child, { thisObj: node._thisObj, extendVars: child._ref }));
+          }
+        } else {
+          _clearRenderedNodes(node);
+          node._renderedNodes = [];
+        }
+      } else if (attr === "each") {
+        if (result && typeof result === "object") {
+          const asName = node.getAttribute("as") || "item";
+          const indexName = node.getAttribute("index") || "index";
+          const keyName = node.getAttribute("key");
+          let keys, getVal;
+          if (result instanceof Map) {
+            keys = Array.from(result.keys());
+            getVal = (k) => result.get(k);
+          } else if (typeof result[Symbol.iterator] === "function") {
+            const arr = Array.isArray(result) ? result : Array.from(result);
+            keys = new Array(arr.length);
+            for (let i = 0; i < arr.length; i++) keys[i] = i;
+            getVal = (k) => arr[k];
+          } else {
+            keys = Object.keys(result);
+            getVal = (k) => result[k];
+          }
+          if (!node._keyedNodes) node._keyedNodes = /* @__PURE__ */ new Map();
+          const newKeyedNodes = /* @__PURE__ */ new Map();
+          const currentRenderedNodes = [];
+          keys.forEach((k, i) => {
+            const item = getVal(k);
+            const rawKey = keyName ? item && typeof item === "object" ? item[keyName] : item : k;
+            const keyVal = rawKey === void 0 || rawKey === null || newKeyedNodes.has(rawKey) ? `st_key_fallback_${i}_${Math.random()}` : rawKey;
+            let existingNodes = node._keyedNodes.get(keyVal);
+            if (existingNodes) {
+              node._keyedNodes.delete(keyVal);
+              existingNodes.forEach((child) => {
+                if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.reuseCount++;
+                let scopeChanged = false;
+                for (let key in node._ref) {
+                  if (key === asName || key === indexName) continue;
+                  if (child._ref[key] !== node._ref[key]) {
+                    child._ref[key] = node._ref[key];
+                    scopeChanged = true;
+                  }
+                }
+                const indexChanged = child._ref[indexName] !== k;
+                if (indexChanged) child._ref[indexName] = k;
+                if (child._ref[asName] !== item || scopeChanged) {
+                  child._ref[asName] = item;
+                  if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.scanCount++;
+                  _scanTree(child, { thisObj: node._thisObj, extendVars: child._ref });
+                } else if (node.parentNode.lastChild !== child) {
+                  if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.moveCount++;
+                  node.parentNode.insertBefore(child, node);
+                }
+              });
+            } else {
+              existingNodes = [];
+              node._children.forEach((child) => {
+                const cloned = child.cloneNode(true);
+                cloned._stManaged = true;
+                cloned._ref = { ...node._ref, [indexName]: k, [asName]: item };
+                cloned._thisObj = node._thisObj;
+                node.parentNode.insertBefore(cloned, node);
+                existingNodes.push(cloned);
+              });
+            }
+            newKeyedNodes.set(keyVal, existingNodes);
+            currentRenderedNodes.push(existingNodes);
+            existingNodes.forEach((child) => node.parentNode.insertBefore(child, node));
+          });
+          node._keyedNodes.forEach((nodes) => nodes.forEach((child) => {
+            _clearRenderedNodes(child);
+            child.remove();
+          }));
+          node._keyedNodes = newKeyedNodes;
+          node._renderedNodes = currentRenderedNodes;
+        } else {
+          _clearRenderedNodes(node);
+          if (node._keyedNodes) node._keyedNodes.forEach((nodes) => nodes.forEach((child) => child.remove()));
+          node._keyedNodes = /* @__PURE__ */ new Map();
+          node._renderedNodes = [];
+        }
+      } else if (attr === "bind") {
+        if (["INPUT", "SELECT", "TEXTAREA"].includes(node.tagName) && !node.hasAttribute("autocomplete")) node.setAttribute("autocomplete", "off");
+        if (node.type === "checkbox") {
+          if (node.value !== "on" && !result) {
+            _runCode(`${binding.tpl} = []`, { thisNode: node }, node._thisObj || node, node._ref || {});
+            result = [];
+          }
+          node._checkboxMultiMode = result instanceof Array;
+          const isChecked = result instanceof Array ? result.includes(node.value) : !!result;
+          if (node.checked !== isChecked) node.checked = isChecked;
+        } else if (node.type === "radio") {
+          if (node.checked !== (node.value === String(result ?? ""))) node.checked = node.value === String(result ?? "");
+        } else if ("value" in node && node.type !== "file") {
+          setTimeout(() => {
+            if (node.value !== String(result ?? "")) node.value = result;
+          });
+        } else if (node.isContentEditable) {
+          if (node.innerHTML !== String(result ?? "")) node.innerHTML = result;
+        }
+        node.dispatchEvent(new CustomEvent("bind", { bubbles: false, detail: result }));
+      } else {
+        if (["checked", "disabled", "readonly"].includes(attr)) result = !!result;
+        if (typeof result === "boolean") result ? node.setAttribute(attr, "") : node.removeAttribute(attr);
+        else if (result !== void 0) {
+          if (typeof result !== "string") result = JSON.stringify(result);
+          if (attr === "text") node.textContent = result ?? "";
+          else if (attr === "html") node.innerHTML = result ?? "";
+          else if (node.tagName === "IMG" && attr === "src" && result.includes(".svg")) node.setAttribute("_src", result ?? "");
+          else node.setAttribute(attr, result ?? "");
+        }
+      }
+    }
+  }
+  const _initBinding = (binding) => {
+    if (!binding.node._bindings) binding.node._bindings = [];
+    binding.node._bindings.push({ attr: binding.attr, prop: binding.prop, tpl: binding.tpl, exp: binding.exp });
+    _updateBinding(binding);
+  };
+  const _parseNode = (node, scanObj) => {
+    let hasBindings = false;
+    if (node._bindings) {
+      node._states = /* @__PURE__ */ new Set();
+      node._bindings.forEach((b) => _updateBinding({ node, ...b }));
+      if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
+      hasBindings = true;
+    }
+    if (Component.exists(node.tagName) && !node._componentInitialized) {
+      Array.from(node.attributes).forEach((attr) => {
+        var _a2;
+        if (attr.name.startsWith("$.")) {
+          const realAttrName = attr.name.slice(2);
+          let tpl = _translate(attr.value);
+          if (tpl.includes("this.")) tpl = tpl.replace(/\bthis\./g, "this.parent.");
+          const result = _returnCode(tpl, { thisNode: node }, { parent: scanObj.thisObj || node }, node._ref || {});
+          let o = node;
+          const prop = realAttrName.split(".");
+          for (let i = 0; i < prop.length - 1; i++) {
+            if (prop[i]) o = o[_a2 = prop[i]] ?? (o[_a2] = {});
+          }
+          o[prop[prop.length - 1]] = result;
+          node.removeAttribute(attr.name);
+        }
+      });
+      _makeComponent(node.tagName, node, scanObj);
+      $$(node, "[slot-id]").forEach((p) => p.removeAttribute("slot-id"));
+      node._componentInitialized = true;
+      if (!node._thisObj) node._thisObj = node;
+    }
+    if (node.tagName === "TEMPLATE") {
+      node._children = [...node.content.childNodes];
+      if (!node._renderedNodes) node._renderedNodes = [];
+    }
+    if (hasBindings) return;
+    let attrs = [];
+    const triggerAttrs = ["$if", "$each", "st-if", "st-each", "$$if", "$$each", "st-st-if", "st-st-each"];
+    if (node.tagName === "TEMPLATE") {
+      triggerAttrs.forEach((n) => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n)));
+    } else {
+      attrs = Array.from(node.attributes).filter((a) => (a.name.startsWith("$") || a.name.startsWith("st-")) && !triggerAttrs.includes(a.name) || a.name.includes("."));
+    }
+    if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj;
+    if (!node._thisObj) node._thisObj = scanObj.thisObj || null;
+    if (!node._ref) node._ref = scanObj.extendVars || {};
+    node._states = /* @__PURE__ */ new Set();
+    attrs.forEach((attr) => {
+      let exp = 0;
+      if (attr.name.startsWith("$$") || attr.name.startsWith("st-st-")) exp = 2;
+      else if (attr.name.startsWith("$") || attr.name.startsWith("st-")) exp = 1;
+      const realAttrName = exp === 2 ? attr.name.startsWith("$$") ? attr.name.slice(2) : attr.name.slice(6) : exp === 1 ? attr.name.startsWith("$") ? attr.name.slice(1) : attr.name.slice(3) : attr.name;
+      let tpl = attr.value;
+      node.removeAttribute(attr.name);
+      if (realAttrName.startsWith(".")) _initBinding({ node, prop: realAttrName.split("."), tpl, exp });
+      else if (realAttrName.startsWith("on")) {
+        const eventName = realAttrName.slice(2);
+        if (eventName === "update") node._hasOnUpdate = true;
+        if (eventName === "load" && !["BODY", "IMG", "IFRAME"].includes(node.tagName)) node._hasOnLoad = true;
+        if (eventName === "unload" && !["BODY", "IMG", "IFRAME"].includes(node.tagName)) node._hasOnUnload = true;
+        node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...e.detail || {} }, scanObj.thisObj || node, node._ref || {}));
+      } else {
+        if (realAttrName === "bind") {
+          node.addEventListener(node.tagName === "TEXTAREA" || node.isContentEditable || node.type === "text" || node.type === "password" ? "input" : "change", (e) => {
+            let newVal = node.isContentEditable ? e.target.innerHTML : node.type === "checkbox" ? e.target.checked : e.target.files || e.target.value || e.detail;
+            setNoWriteBack(node);
+            setDisableRunCodeError(true);
+            if (node.type === "checkbox" && node._checkboxMultiMode) _runCode(`!!checked ? (!${tpl}.includes(val) && ${tpl}.push(val)) : (index = ${tpl}.indexOf(val), index > -1 && ${tpl}.splice(index, 1))`, { val: node.value, checked: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {});
+            else _runCode(`${tpl} = val`, { val: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {});
+            setDisableRunCodeError(false);
+            setNoWriteBack(null);
+          });
+        } else if (realAttrName === "text" && !tpl) {
+          tpl = node.textContent;
+          node.textContent = "";
+        }
+        if (tpl) {
+          tpl = _translate(tpl);
+          _initBinding({ node, attr: realAttrName, tpl, exp });
+        }
+      }
+    });
+    if (node._hasOnLoad || node._componentInitialized) Promise.resolve().then(() => node.dispatchEvent(new Event("load", { bubbles: false })));
+    if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
+    if (node._thisObj) scanObj.thisObj = node._thisObj;
+  };
+  const _scanTree = (node, scanObj = {}) => {
+    if (node.nodeType === 3) {
+      if (node._stTranslated) return;
+      const translated = _translate(node.textContent);
+      if (translated !== node.textContent) node.textContent = translated;
+      node._stTranslated = true;
+      return;
+    }
+    if (node.nodeType !== 1) return;
+    if (!node._stTranslated) {
+      Array.from(node.attributes).forEach((attr) => {
+        if (!attr.name.startsWith("$") && !attr.name.startsWith("st-") && !attr.name.startsWith(".")) {
+          const translated = _translate(attr.value);
+          if (translated !== attr.value) attr.value = translated;
+        }
+      });
+      node._stTranslated = true;
+    }
+    let resolvedThisObj = node._thisObj;
+    let resolvedRef = node._ref;
+    if (resolvedThisObj === void 0 || resolvedRef === void 0) {
+      let curr = node;
+      while (curr && (resolvedThisObj === void 0 || resolvedRef === void 0)) {
+        if (resolvedThisObj === void 0 && curr._thisObj !== void 0) resolvedThisObj = curr._thisObj;
+        if (resolvedRef === void 0 && curr._ref !== void 0) resolvedRef = { ...curr._ref };
+        curr = curr.parentNode;
+      }
+    }
+    if (resolvedThisObj === void 0) resolvedThisObj = scanObj.thisObj;
+    if (resolvedRef === void 0) resolvedRef = scanObj.extendVars;
+    const triggerAttrs = ["$if", "$each", "st-if", "st-each", "$$if", "$$each", "st-st-if", "st-st-each"];
+    const eachAttrs = ["$each", "st-each", "$$each", "st-st-each"];
+    if (node.tagName !== "TEMPLATE" && triggerAttrs.some((t) => node.hasAttribute(t))) {
+      const template = document.createElement("TEMPLATE");
+      const attrs = Array.from(node.attributes).filter((attr) => triggerAttrs.includes(attr.name) || eachAttrs.some((t) => node.hasAttribute(t)) && ["as", "index"].includes(attr.name));
+      attrs.forEach((attr) => {
+        template.setAttribute(attr.name, attr.value);
+        node.removeAttribute(attr.name);
+      });
+      node.parentNode.insertBefore(template, node);
+      template.content.appendChild(node);
+      template._ref = resolvedRef;
+      template._thisObj = resolvedThisObj;
+      _scanTree(template, scanObj);
+      return;
+    }
+    if (node.tagName === "TEMPLATE" && (node.hasAttribute("$if") || node.hasAttribute("st-if") || node.hasAttribute("$$if") || node.hasAttribute("st-st-if")) && (node.hasAttribute("$each") || node.hasAttribute("st-each") || node.hasAttribute("$$each") || node.hasAttribute("st-st-each"))) {
+      const template = document.createElement("TEMPLATE");
+      const attrs = Array.from(node.attributes).filter((attr2) => triggerAttrs.includes(attr2.name));
+      const attr = attrs[attrs.length - 1];
+      template.setAttribute(attr.name, attr.value);
+      node.removeAttribute(attr.name);
+      if (eachAttrs.includes(attr.name)) {
+        Array.from(node.attributes).filter((attr2) => ["as", "index"].includes(attr2.name)).forEach((attr2) => {
+          template.setAttribute(attr2.name, attr2.value);
+          node.removeAttribute(attr2.name);
+        });
+      }
+      Array.from(node.content.childNodes).forEach((child) => template.content.appendChild(child));
+      node.content.appendChild(template);
+      template._ref = resolvedRef;
+      template._thisObj = resolvedThisObj;
+    }
+    if (node.tagName === "IMG" && (node.hasAttribute("src") || node.hasAttribute("_src") || node.hasAttribute("$src"))) {
+      const imgNode = node;
+      Promise.resolve().then(() => {
+        const url = imgNode.getAttribute("_src") || imgNode.getAttribute("src");
+        if (url) fetch(url, { cache: "force-cache" }).then((r) => r.text()).then((svgText) => {
+          const realSvg = new DOMParser().parseFromString(svgText, "image/svg+xml").querySelector("svg");
+          if (realSvg) {
+            Array.from(imgNode.attributes).forEach((attr) => realSvg.setAttribute(attr.name, attr.value));
+            imgNode.replaceWith(realSvg);
+          }
+        });
+      });
+    }
+    if (node._thisObj !== void 0) scanObj.thisObj = node._thisObj || null;
+    else {
+      let curr = node;
+      while (curr && curr._thisObj === void 0) curr = curr.parentNode;
+      scanObj.thisObj = curr ? curr._thisObj : null;
+    }
+    if (node._ref === void 0) {
+      let curr = node;
+      while (curr && curr._ref === void 0) curr = curr.parentNode;
+      node._ref = curr ? { ...curr._ref } : {};
+    }
+    if (node._refExt !== void 0) {
+      Object.assign(node._ref, node._refExt);
+    }
+    if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars);
+    _parseNode(node, { ...scanObj });
+    const nodes = [...node.childNodes || []];
+    const nextScanObj = { thisObj: scanObj.thisObj, extendVars: { ...node._ref } };
+    nodes.forEach((child) => {
+      if (!child._stManaged) _scanTree(child, nextScanObj);
+    });
+  };
+  const _unbindTree = (node) => {
+    if (node.nodeType !== 1) return;
+    if (node._hasOnUnload) node.dispatchEvent(new Event("unload", { bubbles: false }));
+    if (node._states) node._states.forEach((mappings) => {
+      for (const [key, bindingSet] of mappings) {
+        for (const binding of bindingSet) {
+          if (binding.node === node) bindingSet.delete(binding);
+        }
+      }
+    });
+    node.childNodes && node.childNodes.forEach((child) => _unbindTree(child));
+  };
+  const RefreshState = _scanTree;
+  const Util = {
+    clone: window.structuredClone || ((obj) => JSON.parse(JSON.stringify(obj))),
+    base64: (str) => btoa(String.fromCharCode(...new TextEncoder().encode(str))),
+    unbase64: (str) => new TextDecoder().decode(Uint8Array.from(atob(str), (c) => c.charCodeAt(0))),
+    urlbase64: (str) => Util.base64(str).replace(/[+/=]/g, (m) => ({ "+": "-", "/": "", "=": "" })[m]),
+    unurlbase64: (str) => Util.unbase64(str.replace(/[-_.]/g, (m) => ({ "-": "+", "_": "/", ".": "=" })[m]).padEnd(Math.ceil(str.length / 4) * 4, "=")),
+    safeJson: (str) => {
+      try {
+        return JSON.parse(str);
+      } catch {
+        return null;
+      }
+    },
+    updateDefaults: (obj, defaults) => {
+      for (const k in defaults) if (obj[k] === void 0) obj[k] = defaults[k];
+    },
+    copyFunction: (toObj, fromObj, ...funcNames) => {
+      funcNames.forEach((name) => toObj[name] = fromObj[name].bind(fromObj));
+    },
+    getFunctionBody: (fn) => {
+      const code = fn.toString();
+      return code.slice(code.indexOf("{") + 1, code.lastIndexOf("}")).trim();
+    },
+    makeDom: (html) => {
+      if (html.includes(">\n")) html = html.replace(/>\s+</g, "><").trim();
+      const node = document.createElement("div");
+      node.innerHTML = html;
+      return node.children[0];
+    },
+    newAvg: () => {
+      let total = 0, count = 0, avg = 0;
+      return {
+        add: (v) => {
+          total += v;
+          count++;
+          return avg = total / count;
+        },
+        get: () => avg,
+        clear: () => {
+          total = 0, count = 0, avg = 0;
+        }
+      };
+    },
+    newTimeCount: () => {
+      let startTime = 0, total = 0, count = 0;
+      return {
+        start: () => startTime = (/* @__PURE__ */ new Date()).getTime(),
+        end: () => {
+          const endTime = (/* @__PURE__ */ new Date()).getTime();
+          const left = endTime - startTime;
+          startTime = endTime;
+          total += left;
+          count++;
+          return left;
+        },
+        avg: () => total / count
+      };
+    }
+  };
+  globalThis.Util = Util;
+  let _hashParams = new URLSearchParams(((_a = window.location.hash) == null ? void 0 : _a.substring(1)) || "");
+  const Hash = NewState({}, (k) => Util.safeJson(_hashParams.get(k)), (k, v) => {
+    const oldStr = _hashParams.get(k);
+    const newStr = v === void 0 ? void 0 : JSON.stringify(v);
+    if (oldStr === newStr || oldStr === null && newStr === void 0) return;
+    v === void 0 ? _hashParams.delete(k) : _hashParams.set(k, newStr);
+    window.location.hash = "#" + _hashParams.toString();
+  });
+  if (typeof window !== "undefined") {
+    window.addEventListener("hashchange", () => {
+      var _a2;
+      const oldHashParams = _hashParams;
+      _hashParams = new URLSearchParams(((_a2 = window.location.hash) == null ? void 0 : _a2.substring(1)) || "");
+      _hashParams.forEach((v, k) => {
+        if (oldHashParams.get(k) !== v) Hash[k] = Util.safeJson(v);
+      });
+      oldHashParams.forEach((v, k) => {
+        if (_hashParams.get(k) === void 0) Hash[k] = void 0;
+      });
+    });
+  }
+  const LocalStorage = NewState({}, (k) => Util.safeJson(localStorage.getItem(k)), (k, v) => {
+    const oldStr = localStorage.getItem(k);
+    const newStr = v === void 0 ? void 0 : JSON.stringify(v);
+    if (oldStr === newStr || oldStr === null && newStr === void 0) return;
+    v === void 0 ? localStorage.removeItem(k) : localStorage.setItem(k, newStr);
+  });
+  const State = NewState({
+    exitBlocks: 0
+    // 默认值
+  });
+  globalThis.Hash = Hash;
+  globalThis.LocalStorage = LocalStorage;
+  globalThis.State = State;
+  const ApigoState = {
+    NewState,
+    Component,
+    $,
+    $$,
+    RefreshState,
+    SetTranslator,
+    Util,
+    Hash,
+    LocalStorage,
+    State
+  };
+  if (typeof globalThis !== "undefined") {
+    Object.assign(globalThis, ApigoState);
+    globalThis.ApigoState = ApigoState;
+  }
+  if (typeof document !== "undefined") {
+    const init = () => {
+      Component._initPending();
+      new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          mutation.addedNodes.forEach((newNode) => {
+            if (newNode.isConnected) _scanTree(newNode);
+          });
+          mutation.removedNodes.forEach((oldNode) => _unbindTree(oldNode));
+        });
+      }).observe(document.documentElement, { childList: true, subtree: true });
+      _scanTree(document.documentElement);
+    };
+    if (document.readyState !== "loading") init();
+    else document.addEventListener("DOMContentLoaded", init, true);
+  }
+  exports2.$ = $;
+  exports2.$$ = $$;
+  exports2.Component = Component;
+  exports2.Hash = Hash;
+  exports2.LocalStorage = LocalStorage;
+  exports2.NewState = NewState;
+  exports2.RefreshState = RefreshState;
+  exports2.SetTranslator = SetTranslator;
+  exports2.State = State;
+  exports2.Util = Util;
+  exports2._scanTree = _scanTree;
+  exports2._unbindTree = _unbindTree;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
diff --git a/dist/state.min.js b/dist/state.min.js
index a13ddc9..41a7a01 100644
--- a/dist/state.min.js
+++ b/dist/state.min.js
@@ -1 +1 @@
-var e;let t=null,n=null;const r=e=>t=e,s=e=>n=e,a=new Set;function o(e={},r=null,s=null){const o={},i=new Map,d=new Map,c=(e,t)=>(d.has(e)||d.set(e,new Set),t?d.get(e).add(t):d.get(e).clear(),()=>d.get(e).delete(t)),l=(e,t)=>{d.has(e)&&d.get(e).delete(t)},h=r||(e=>o[e]),u=s||((e,t)=>o[e]=t);return Object.assign(o,e),new Proxy(o,{get:(e,n)=>"__watch"===n?c:"__unwatch"===n?l:"__isProxy"===n||(t&&(i.has(n)||i.set(n,new Set),i.get(n).add(t),t.node._states||(t.node._states=new Set),t.node._states.add(i)),h(n)),set(e,t,r){if(h(t)!==r&&u(t,r),d.has(t)&&d.get(t).forEach(n=>{const s=n(r);void 0!==s&&(r=s,e[t]=r)}),d.has(null)&&d.get(null).forEach(e=>e(r)),i.has(t)){const e=i.get(t);for(const t of e)t.node.isConnected?n!==t.node&&a.forEach(e=>e(t)):e.delete(t)}return!0}})}const i=(e,t)=>t?e.querySelector(t):document.querySelector(e),d=(e,t)=>t?e.querySelectorAll(t):document.querySelectorAll(e),c=new Map,l=[],h={getTemplate:e=>document.querySelector(`template[component="${e.toUpperCase()}"]`),register:(e,t,n=null,...r)=>{c.set(e.toUpperCase(),t),"loading"!==document.readyState?h._addTemplate(e,n,r):l.push([e,n,r])},exists:e=>c.has(e.toUpperCase()),getSetupFunction:e=>c.get(e.toUpperCase()),_addTemplate:(e,t,n)=>{if(t){const n=document.createElement("TEMPLATE");n.setAttribute("component",e.toUpperCase()),n.content.appendChild(t),document.body.appendChild(n)}n&&n.forEach(e=>document.body.appendChild(e))},_initPending:()=>{l.forEach(([e,t,n])=>h._addTemplate(e,t,n)),l.length=0}};function u(e,t,n,r={}){e.attributes&&Array.from(e.attributes).forEach(e=>{"class"!==e.name&&("style"===e.name?t.hasAttribute("style")?t.setAttribute("style",`${e.value}; ${t.getAttribute("style")}`):t.setAttribute("style",e.value):t.hasAttribute(e.name)||t.setAttribute(e.name,e.value))}),t.classList.add(...e.classList);const s="TEMPLATE"===e.tagName?e.content:e,a="TEMPLATE"===t.tagName?t.content:t;Array.from(s.childNodes).forEach(e=>a.appendChild(e)),e.tagName&&h.exists(e.tagName)&&f(e.tagName,t,n,r)}function f(e,t,n,r={}){if(r[e])return;r[e]=!0,n.thisObj&&Array.from(t.attributes).forEach(e=>{(e.name.startsWith("$")||e.name.startsWith("st-"))&&e.value.includes("this.")&&(e.value=e.value.replace(/\bthis\./g,"this.parent."))});const s=h.getSetupFunction(e),a={};Array.from(t.childNodes).forEach(e=>{e.nodeType===Node.ELEMENT_NODE&&e.hasAttribute("slot")&&(a[e.getAttribute("slot")]=e,e.removeAttribute("slot"))}),t.innerHTML="",t.state=o(t.state||{});const i=h.getTemplate(e);if(i){const e=i.content.cloneNode(!0);if(e.childNodes.length){const s=Array.from(e.childNodes).find(e=>e.nodeType===Node.ELEMENT_NODE);s&&u(s,t,n,r),d(t,"[slot-id]").forEach(e=>{const t=e.getAttribute("slot-id");a[t]&&(e.removeAttribute("slot-id"),e.innerHTML="",u(a[t],e,n,r))})}}s&&s(t)}let b=!1;function m(e){b=e}const p=new Map;function _(e,t,n,r){const s={...r||{},...t||{}},a=Object.keys(s),o=Object.values(s),i=e+a.join(",");try{let t=p.get(i);return t||(t=new Function("Hash","LocalStorage","State",...a,e),p.set(i,t)),t.apply(n,[globalThis.Hash,globalThis.LocalStorage,globalThis.State,...o])}catch(s){return b||console.error(s,r,[e,r,t,n]),null}}function g(e,t,n,r){return e.includes("${")?_("return `"+e+"`",t,n,r):_("return "+e,t,n,r)}let v=(e,t)=>e&&"string"==typeof e?e.replace(/\{(.+?)\}/g,(e,n)=>t.hasOwnProperty(n)?t[n]:e):e;const E=e=>v=e,y=e=>e&&"string"==typeof e&&e.includes("{#")?e.replace(/\{#(.+?)#\}/g,(e,t)=>{const n=t.split("||").map(e=>e.trim()),r={};if(n.length>1){const e=n[0].match(/\{(.+?)\}/g);e&&e.forEach((e,t)=>r[e.substring(1,e.length-1)]=n[t+1]||"")}return v(n[0],r)}):e;if("undefined"!=typeof document)try{document.createElement("div").setAttribute("$t","1")}catch(e){const t=Element.prototype.setAttribute;Element.prototype.setAttribute=function(e,n){if(!e.startsWith("$"))return t.call(this,e,n);const r=e.startsWith("$$")?"st-st-":"st-";return t.call(this,r+e.substring(e.startsWith("$$")?2:1),n)}}var A;function N(e){e._renderedNodes&&e._renderedNodes.forEach(e=>e.forEach(e=>{e.remove(),e._renderedNodes&&N(e)}))}function T(e){const t=e.node;if(!t.isConnected&&"TEMPLATE"!==t.tagName)return;r(e),window.__perfTrace&&window.__perfTrace.evalCount++;const n=window.__perfTrace?performance.now():0;let s=e.exp?e.tpl?g(e.tpl,{thisNode:t},t._thisObj||t,t._ref||null):null:e.tpl;if(2===e.exp&&"string"==typeof s)try{s=g(s,{thisNode:t},t._thisObj||t,t._ref||null)}catch(e){}if(window.__perfTrace&&(window.__perfTrace.evalTotal+=performance.now()-n),r(null),e.prop){const n=e.prop;let r=t;for(let e=0;e<n.length-1&&(!n[e]||(null==r[n[e]]&&(r[n[e]]={}),r=r[n[e]],"object"==typeof r));e++);if("object"==typeof r&&null!==r){const e=n[n.length-1];if(e){"object"!=typeof s||null==s||Array.isArray(s)||null!=r[e]||(r[e]={});const t=r[e];"object"==typeof t&&null!=t&&t.__watch?Object.assign(t,s):r[e]=s}else"object"!=typeof s||null==s||Array.isArray(s)||Object.assign(r,s)}}else if(e.attr){const n=e.attr;if("if"===n)s?t._renderedNodes&&0!==t._renderedNodes.length?t._renderedNodes[0].forEach(e=>O(e,{thisObj:t._thisObj,extendVars:e._ref})):(t._children.forEach(e=>{e._stManaged=!0,t.parentNode.insertBefore(e,t),e._ref={...t._ref}}),t._renderedNodes=[t._children]):(N(t),t._renderedNodes=[]);else if("each"===n)if(s&&"object"==typeof s){const e=t.getAttribute("as")||"item",n=t.getAttribute("index")||"index",r=t.getAttribute("key");let a,o;if(s instanceof Map)a=Array.from(s.keys()),o=e=>s.get(e);else if("function"==typeof s[Symbol.iterator]){const e=Array.isArray(s)?s:Array.from(s);a=new Array(e.length);for(let t=0;t<e.length;t++)a[t]=t;o=t=>e[t]}else a=Object.keys(s),o=e=>s[e];t._keyedNodes||(t._keyedNodes=new Map);const i=new Map,d=[];a.forEach((s,a)=>{const c=o(s),l=r?c&&"object"==typeof c?c[r]:c:s,h=null==l||i.has(l)?`st_key_fallback_${a}_${Math.random()}`:l;let u=t._keyedNodes.get(h);u?(t._keyedNodes.delete(h),u.forEach(r=>{window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.reuseCount++;let a=!1;for(let s in t._ref)s!==e&&s!==n&&r._ref[s]!==t._ref[s]&&(r._ref[s]=t._ref[s],a=!0);r._ref[n]!==s&&(r._ref[n]=s),r._ref[e]!==c||a?(r._ref[e]=c,window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.scanCount++,O(r,{thisObj:t._thisObj,extendVars:r._ref})):t.parentNode.lastChild!==r&&(window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.moveCount++,t.parentNode.insertBefore(r,t))})):(u=[],t._children.forEach(r=>{const a=r.cloneNode(!0);a._stManaged=!0,a._ref={...t._ref,[n]:s,[e]:c},a._thisObj=t._thisObj,t.parentNode.insertBefore(a,t),u.push(a)})),i.set(h,u),d.push(u),u.forEach(e=>t.parentNode.insertBefore(e,t))}),t._keyedNodes.forEach(e=>e.forEach(e=>{N(e),e.remove()})),t._keyedNodes=i,t._renderedNodes=d}else N(t),t._keyedNodes&&t._keyedNodes.forEach(e=>e.forEach(e=>e.remove())),t._keyedNodes=new Map,t._renderedNodes=[];else if("bind"===n){if(["INPUT","SELECT","TEXTAREA"].includes(t.tagName)&&!t.hasAttribute("autocomplete")&&t.setAttribute("autocomplete","off"),"checkbox"===t.type){"on"===t.value||s||(_(`${e.tpl} = []`,{thisNode:t},t._thisObj||t,t._ref||{}),s=[]),t._checkboxMultiMode=s instanceof Array;const n=s instanceof Array?s.includes(t.value):!!s;t.checked!==n&&(t.checked=n)}else"radio"===t.type?t.checked!==(t.value===String(s??""))&&(t.checked=t.value===String(s??"")):"value"in t&&"file"!==t.type?setTimeout(()=>{t.value!==String(s??"")&&(t.value=s)}):t.isContentEditable&&t.innerHTML!==String(s??"")&&(t.innerHTML=s);t.dispatchEvent(new CustomEvent("bind",{bubbles:!1,detail:s}))}else["checked","disabled","readonly"].includes(n)&&(s=!!s),"boolean"==typeof s?s?t.setAttribute(n,""):t.removeAttribute(n):void 0!==s&&("string"!=typeof s&&(s=JSON.stringify(s)),"text"===n?t.textContent=s??"":"html"===n?t.innerHTML=s??"":"IMG"===t.tagName&&"src"===n&&s.includes(".svg")?t.setAttribute("_src",s??""):t.setAttribute(n,s??""))}}A=e=>T(e),a.add(A);const w=e=>{e.node._bindings||(e.node._bindings=[]),e.node._bindings.push({attr:e.attr,prop:e.prop,tpl:e.tpl,exp:e.exp}),T(e)},O=(e,t={})=>{if(3===e.nodeType){if(e._stTranslated)return;const t=y(e.textContent);return t!==e.textContent&&(e.textContent=t),void(e._stTranslated=!0)}if(1!==e.nodeType)return;e._stTranslated||(Array.from(e.attributes).forEach(e=>{if(!e.name.startsWith("$")&&!e.name.startsWith("st-")&&!e.name.startsWith(".")){const t=y(e.value);t!==e.value&&(e.value=t)}}),e._stTranslated=!0);let n=e._thisObj,r=e._ref;if(void 0===n||void 0===r){let t=e;for(;t&&(void 0===n||void 0===r);)void 0===n&&void 0!==t._thisObj&&(n=t._thisObj),void 0===r&&void 0!==t._ref&&(r={...t._ref}),t=t.parentNode}void 0===n&&(n=t.thisObj),void 0===r&&(r=t.extendVars);const a=["$if","$each","st-if","st-each","$$if","$$each","st-st-if","st-st-each"],o=["$each","st-each","$$each","st-st-each"];if("TEMPLATE"!==e.tagName&&a.some(t=>e.hasAttribute(t))){const s=document.createElement("TEMPLATE");return Array.from(e.attributes).filter(t=>a.includes(t.name)||o.some(t=>e.hasAttribute(t))&&["as","index"].includes(t.name)).forEach(t=>{s.setAttribute(t.name,t.value),e.removeAttribute(t.name)}),e.parentNode.insertBefore(s,e),s.content.appendChild(e),s._ref=r,s._thisObj=n,void O(s,t)}if("TEMPLATE"===e.tagName&&(e.hasAttribute("$if")||e.hasAttribute("st-if")||e.hasAttribute("$$if")||e.hasAttribute("st-st-if"))&&(e.hasAttribute("$each")||e.hasAttribute("st-each")||e.hasAttribute("$$each")||e.hasAttribute("st-st-each"))){const t=document.createElement("TEMPLATE"),s=Array.from(e.attributes).filter(e=>a.includes(e.name)),i=s[s.length-1];t.setAttribute(i.name,i.value),e.removeAttribute(i.name),o.includes(i.name)&&Array.from(e.attributes).filter(e=>["as","index"].includes(e.name)).forEach(n=>{t.setAttribute(n.name,n.value),e.removeAttribute(n.name)}),Array.from(e.content.childNodes).forEach(e=>t.content.appendChild(e)),e.content.appendChild(t),t._ref=r,t._thisObj=n}if("IMG"===e.tagName&&(e.hasAttribute("src")||e.hasAttribute("_src")||e.hasAttribute("$src"))){const t=e;Promise.resolve().then(()=>{const e=t.getAttribute("_src")||t.getAttribute("src");e&&fetch(e,{cache:"force-cache"}).then(e=>e.text()).then(e=>{const n=(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg");n&&(Array.from(t.attributes).forEach(e=>n.setAttribute(e.name,e.value)),t.replaceWith(n))})})}if(void 0!==e._thisObj)t.thisObj=e._thisObj||null;else{let n=e;for(;n&&void 0===n._thisObj;)n=n.parentNode;t.thisObj=n?n._thisObj:null}if(void 0===e._ref){let t=e;for(;t&&void 0===t._ref;)t=t.parentNode;e._ref=t?{...t._ref}:{}}void 0!==e._refExt&&Object.assign(e._ref,e._refExt),t.extendVars&&Object.assign(e._ref,t.extendVars),((e,t)=>{let n=!1;if(e._bindings&&(e._states=new Set,e._bindings.forEach(t=>T({node:e,...t})),e._hasOnUpdate&&e.dispatchEvent(new Event("update",{bubbles:!1})),n=!0),h.exists(e.tagName)&&!e._componentInitialized&&(Array.from(e.attributes).forEach(n=>{var r;if(n.name.startsWith("$.")){const s=n.name.slice(2);let a=y(n.value);a.includes("this.")&&(a=a.replace(/\bthis\./g,"this.parent."));const o=g(a,{thisNode:e},{parent:t.thisObj||e},e._ref||{});let i=e;const d=s.split(".");for(let e=0;e<d.length-1;e++)d[e]&&(i=i[r=d[e]]??(i[r]={}));i[d[d.length-1]]=o,e.removeAttribute(n.name)}}),f(e.tagName,e,t),d(e,"[slot-id]").forEach(e=>e.removeAttribute("slot-id")),e._componentInitialized=!0,e._thisObj||(e._thisObj=e)),"TEMPLATE"===e.tagName&&(e._children=[...e.content.childNodes],e._renderedNodes||(e._renderedNodes=[])),n)return;let r=[];const a=["$if","$each","st-if","st-each","$$if","$$each","st-st-if","st-st-each"];"TEMPLATE"===e.tagName?a.forEach(t=>e.hasAttribute(t)&&r.push(e.getAttributeNode(t))):r=Array.from(e.attributes).filter(e=>(e.name.startsWith("$")||e.name.startsWith("st-"))&&!a.includes(e.name)||e.name.includes(".")),e._thisObj&&t.thisObj&&(e._thisObj.parent=t.thisObj),e._thisObj||(e._thisObj=t.thisObj||null),e._ref||(e._ref=t.extendVars||{}),e._states=new Set,r.forEach(n=>{let r=0;n.name.startsWith("$$")||n.name.startsWith("st-st-")?r=2:(n.name.startsWith("$")||n.name.startsWith("st-"))&&(r=1);const a=2===r?n.name.startsWith("$$")?n.name.slice(2):n.name.slice(6):1===r?n.name.startsWith("$")?n.name.slice(1):n.name.slice(3):n.name;let o=n.value;if(e.removeAttribute(n.name),a.startsWith("."))w({node:e,prop:a.split("."),tpl:o,exp:r});else if(a.startsWith("on")){const n=a.slice(2);"update"===n&&(e._hasOnUpdate=!0),"load"!==n||["BODY","IMG","IFRAME"].includes(e.tagName)||(e._hasOnLoad=!0),"unload"!==n||["BODY","IMG","IFRAME"].includes(e.tagName)||(e._hasOnUnload=!0),e.addEventListener(n,n=>_(o,{event:n,thisNode:e,...n.detail||{}},t.thisObj||e,e._ref||{}))}else"bind"===a?e.addEventListener("TEXTAREA"===e.tagName||e.isContentEditable||"text"===e.type||"password"===e.type?"input":"change",n=>{let r=e.isContentEditable?n.target.innerHTML:"checkbox"===e.type?n.target.checked:n.target.files||n.target.value||n.detail;s(e),m(!0),"checkbox"===e.type&&e._checkboxMultiMode?_(`!!checked ? (!${o}.includes(val) && ${o}.push(val)) : (index = ${o}.indexOf(val), index > -1 && ${o}.splice(index, 1))`,{val:e.value,checked:r,thisNode:e},t.thisObj||e,e._ref||{}):_(`${o} = val`,{val:r,thisNode:e},t.thisObj||e,e._ref||{}),m(!1),s(null)}):"text"!==a||o||(o=e.textContent,e.textContent=""),o&&(o=y(o),w({node:e,attr:a,tpl:o,exp:r}))}),(e._hasOnLoad||e._componentInitialized)&&Promise.resolve().then(()=>e.dispatchEvent(new Event("load",{bubbles:!1}))),e._hasOnUpdate&&e.dispatchEvent(new Event("update",{bubbles:!1})),e._thisObj&&(t.thisObj=e._thisObj)})(e,{...t});const i=[...e.childNodes||[]],c={thisObj:t.thisObj,extendVars:{...e._ref}};i.forEach(e=>{e._stManaged||O(e,c)})},j=e=>{1===e.nodeType&&(e._hasOnUnload&&e.dispatchEvent(new Event("unload",{bubbles:!1})),e._states&&e._states.forEach(t=>{for(const[n,r]of t)for(const t of r)t.node===e&&r.delete(t)}),e.childNodes&&e.childNodes.forEach(e=>j(e)))},$=O,x={clone:window.structuredClone||(e=>JSON.parse(JSON.stringify(e))),base64:e=>btoa(String.fromCharCode(...(new TextEncoder).encode(e))),unbase64:e=>(new TextDecoder).decode(Uint8Array.from(atob(e),e=>e.charCodeAt(0))),urlbase64:e=>x.base64(e).replace(/[+/=]/g,e=>({"+":"-","/":"","=":""}[e])),unurlbase64:e=>x.unbase64(e.replace(/[-_.]/g,e=>({"-":"+",_:"/",".":"="}[e])).padEnd(4*Math.ceil(e.length/4),"=")),safeJson:e=>{try{return JSON.parse(e)}catch{return null}},updateDefaults:(e,t)=>{for(const n in t)void 0===e[n]&&(e[n]=t[n])},copyFunction:(e,t,...n)=>{n.forEach(n=>e[n]=t[n].bind(t))},getFunctionBody:e=>{const t=e.toString();return t.slice(t.indexOf("{")+1,t.lastIndexOf("}")).trim()},makeDom:e=>{e.includes(">\n")&&(e=e.replace(/>\s+</g,"><").trim());const t=document.createElement("div");return t.innerHTML=e,t.children[0]},newAvg:()=>{let e=0,t=0,n=0;return{add:r=>(e+=r,t++,n=e/t),get:()=>n,clear:()=>{e=0,t=0,n=0}}},newTimeCount:()=>{let e=0,t=0,n=0;return{start:()=>e=(new Date).getTime(),end:()=>{const r=(new Date).getTime(),s=r-e;return e=r,t+=s,n++,s},avg:()=>t/n}}};globalThis.Util=x;let M=new URLSearchParams((null==(e=window.location.hash)?void 0:e.substring(1))||"");const S=o({},e=>x.safeJson(M.get(e)),(e,t)=>{const n=M.get(e),r=void 0===t?void 0:JSON.stringify(t);n===r||null===n&&void 0===r||(void 0===t?M.delete(e):M.set(e,r),window.location.hash="#"+M.toString())});"undefined"!=typeof window&&window.addEventListener("hashchange",()=>{var e;const t=M;M=new URLSearchParams((null==(e=window.location.hash)?void 0:e.substring(1))||""),M.forEach((e,n)=>{t.get(n)!==e&&(S[n]=x.safeJson(e))}),t.forEach((e,t)=>{void 0===M.get(t)&&(S[t]=void 0)})});const C=o({},e=>x.safeJson(localStorage.getItem(e)),(e,t)=>{const n=localStorage.getItem(e),r=void 0===t?void 0:JSON.stringify(t);n===r||null===n&&void 0===r||(void 0===t?localStorage.removeItem(e):localStorage.setItem(e,r))});if(globalThis.Hash=S,globalThis.LocalStorage=C,"undefined"!=typeof document){const e=()=>{h._initPending(),new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{e.isConnected&&O(e)}),e.removedNodes.forEach(e=>j(e))})}).observe(document.documentElement,{childList:!0,subtree:!0}),O(document.documentElement)};"loading"!==document.readyState?e():document.addEventListener("DOMContentLoaded",e,!0)}export{i as $,d as $$,h as Component,S as Hash,C as LocalStorage,o as NewState,$ as RefreshState,E as SetTranslator,x as Util,O as _scanTree,j as _unbindTree};
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ApigoState={})}(this,function(e){"use strict";var t;let n=null,r=null;const s=e=>n=e,a=e=>r=e,o=new Set;function i(e={},t=null,s=null){const a={},i=new Map,d=new Map,l=(e,t)=>(d.has(e)||d.set(e,new Set),t?d.get(e).add(t):d.get(e).clear(),()=>d.get(e).delete(t)),c=(e,t)=>{d.has(e)&&d.get(e).delete(t)},h=t||(e=>a[e]),u=s||((e,t)=>a[e]=t);return Object.assign(a,e),new Proxy(a,{get:(e,t)=>"__watch"===t?l:"__unwatch"===t?c:"__isProxy"===t||(n&&(i.has(t)||i.set(t,new Set),i.get(t).add(n),n.node._states||(n.node._states=new Set),n.node._states.add(i)),h(t)),set(e,t,n){if(h(t)!==n&&u(t,n),d.has(t)&&d.get(t).forEach(r=>{const s=r(n);void 0!==s&&(n=s,e[t]=n)}),d.has(null)&&d.get(null).forEach(e=>e(n)),i.has(t)){const e=i.get(t);for(const t of e)t.node.isConnected?r!==t.node&&o.forEach(e=>e(t)):e.delete(t)}return!0}})}const d=(e,t)=>t?e.querySelector(t):document.querySelector(e),l=(e,t)=>t?e.querySelectorAll(t):document.querySelectorAll(e),c=new Map,h=[],u={getTemplate:e=>document.querySelector(`template[component="${e.toUpperCase()}"]`),register:(e,t,n=null,...r)=>{c.set(e.toUpperCase(),t),"loading"!==document.readyState?u._addTemplate(e,n,r):h.push([e,n,r])},exists:e=>c.has(e.toUpperCase()),getSetupFunction:e=>c.get(e.toUpperCase()),_addTemplate:(e,t,n)=>{if(t){const n=document.createElement("TEMPLATE");n.setAttribute("component",e.toUpperCase()),n.content.appendChild(t),document.body.appendChild(n)}n&&n.forEach(e=>document.body.appendChild(e))},_initPending:()=>{h.forEach(([e,t,n])=>u._addTemplate(e,t,n)),h.length=0}};function f(e,t,n,r={}){e.attributes&&Array.from(e.attributes).forEach(e=>{"class"!==e.name&&("style"===e.name?t.hasAttribute("style")?t.setAttribute("style",`${e.value}; ${t.getAttribute("style")}`):t.setAttribute("style",e.value):t.hasAttribute(e.name)||t.setAttribute(e.name,e.value))}),t.classList.add(...e.classList);const s="TEMPLATE"===e.tagName?e.content:e,a="TEMPLATE"===t.tagName?t.content:t;Array.from(s.childNodes).forEach(e=>a.appendChild(e)),e.tagName&&u.exists(e.tagName)&&b(e.tagName,t,n,r)}function b(e,t,n,r={}){if(r[e])return;r[e]=!0,n.thisObj&&Array.from(t.attributes).forEach(e=>{(e.name.startsWith("$")||e.name.startsWith("st-"))&&e.value.includes("this.")&&(e.value=e.value.replace(/\bthis\./g,"this.parent."))});const s=u.getSetupFunction(e),a={};Array.from(t.childNodes).forEach(e=>{e.nodeType===Node.ELEMENT_NODE&&e.hasAttribute("slot")&&(a[e.getAttribute("slot")]=e,e.removeAttribute("slot"))}),t.innerHTML="",t.state=i(t.state||{});const o=u.getTemplate(e);if(o){const e=o.content.cloneNode(!0);if(e.childNodes.length){const s=Array.from(e.childNodes).find(e=>e.nodeType===Node.ELEMENT_NODE);s&&f(s,t,n,r),l(t,"[slot-id]").forEach(e=>{const t=e.getAttribute("slot-id");a[t]&&(e.removeAttribute("slot-id"),e.innerHTML="",f(a[t],e,n,r))})}}s&&s(t)}let m=!1;function p(e){m=e}const _=new Map;function g(e,t,n,r){const s={...r||{},...t||{}},a=Object.keys(s),o=Object.values(s),i=e+a.join(",");try{let t=_.get(i);return t||(t=new Function("Hash","LocalStorage","State",...a,e),_.set(i,t)),t.apply(n,[globalThis.Hash,globalThis.LocalStorage,globalThis.State,...o])}catch(s){return m||console.error(s,r,[e,r,t,n]),null}}function y(e,t,n,r){return e.includes("${")?g("return `"+e+"`",t,n,r):g("return "+e,t,n,r)}let v=(e,t)=>e&&"string"==typeof e?e.replace(/\{(.+?)\}/g,(e,n)=>t.hasOwnProperty(n)?t[n]:e):e;const E=e=>v=e,A=e=>e&&"string"==typeof e&&e.includes("{#")?e.replace(/\{#(.+?)#\}/g,(e,t)=>{const n=t.split("||").map(e=>e.trim()),r={};if(n.length>1){const e=n[0].match(/\{(.+?)\}/g);e&&e.forEach((e,t)=>r[e.substring(1,e.length-1)]=n[t+1]||"")}return v(n[0],r)}):e;if("undefined"!=typeof document)try{document.createElement("div").setAttribute("$t","1")}catch(e){const t=Element.prototype.setAttribute;Element.prototype.setAttribute=function(e,n){if(!e.startsWith("$"))return t.call(this,e,n);const r=e.startsWith("$$")?"st-st-":"st-";return t.call(this,r+e.substring(e.startsWith("$$")?2:1),n)}}var N;function T(e){e._renderedNodes&&e._renderedNodes.forEach(e=>e.forEach(e=>{e.remove(),e._renderedNodes&&T(e)}))}function w(e){const t=e.node;if(!t.isConnected&&"TEMPLATE"!==t.tagName)return;s(e),window.__perfTrace&&window.__perfTrace.evalCount++;const n=window.__perfTrace?performance.now():0;let r=e.exp?e.tpl?y(e.tpl,{thisNode:t},t._thisObj||t,t._ref||null):null:e.tpl;if(2===e.exp&&"string"==typeof r)try{r=y(r,{thisNode:t},t._thisObj||t,t._ref||null)}catch(e){}if(window.__perfTrace&&(window.__perfTrace.evalTotal+=performance.now()-n),s(null),e.prop){const n=e.prop;let s=t;for(let e=0;e<n.length-1&&(!n[e]||(null==s[n[e]]&&(s[n[e]]={}),s=s[n[e]],"object"==typeof s));e++);if("object"==typeof s&&null!==s){const e=n[n.length-1];if(e){"object"!=typeof r||null==r||Array.isArray(r)||null!=s[e]||(s[e]={});const t=s[e];"object"==typeof t&&null!=t&&t.__watch?Object.assign(t,r):s[e]=r}else"object"!=typeof r||null==r||Array.isArray(r)||Object.assign(s,r)}}else if(e.attr){const n=e.attr;if("if"===n)r?t._renderedNodes&&0!==t._renderedNodes.length?t._renderedNodes[0].forEach(e=>j(e,{thisObj:t._thisObj,extendVars:e._ref})):(t._children.forEach(e=>{e._stManaged=!0,t.parentNode.insertBefore(e,t),e._ref={...t._ref}}),t._renderedNodes=[t._children]):(T(t),t._renderedNodes=[]);else if("each"===n)if(r&&"object"==typeof r){const e=t.getAttribute("as")||"item",n=t.getAttribute("index")||"index",s=t.getAttribute("key");let a,o;if(r instanceof Map)a=Array.from(r.keys()),o=e=>r.get(e);else if("function"==typeof r[Symbol.iterator]){const e=Array.isArray(r)?r:Array.from(r);a=new Array(e.length);for(let t=0;t<e.length;t++)a[t]=t;o=t=>e[t]}else a=Object.keys(r),o=e=>r[e];t._keyedNodes||(t._keyedNodes=new Map);const i=new Map,d=[];a.forEach((r,a)=>{const l=o(r),c=s?l&&"object"==typeof l?l[s]:l:r,h=null==c||i.has(c)?`st_key_fallback_${a}_${Math.random()}`:c;let u=t._keyedNodes.get(h);u?(t._keyedNodes.delete(h),u.forEach(s=>{window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.reuseCount++;let a=!1;for(let r in t._ref)r!==e&&r!==n&&s._ref[r]!==t._ref[r]&&(s._ref[r]=t._ref[r],a=!0);s._ref[n]!==r&&(s._ref[n]=r),s._ref[e]!==l||a?(s._ref[e]=l,window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.scanCount++,j(s,{thisObj:t._thisObj,extendVars:s._ref})):t.parentNode.lastChild!==s&&(window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.moveCount++,t.parentNode.insertBefore(s,t))})):(u=[],t._children.forEach(s=>{const a=s.cloneNode(!0);a._stManaged=!0,a._ref={...t._ref,[n]:r,[e]:l},a._thisObj=t._thisObj,t.parentNode.insertBefore(a,t),u.push(a)})),i.set(h,u),d.push(u),u.forEach(e=>t.parentNode.insertBefore(e,t))}),t._keyedNodes.forEach(e=>e.forEach(e=>{T(e),e.remove()})),t._keyedNodes=i,t._renderedNodes=d}else T(t),t._keyedNodes&&t._keyedNodes.forEach(e=>e.forEach(e=>e.remove())),t._keyedNodes=new Map,t._renderedNodes=[];else if("bind"===n){if(["INPUT","SELECT","TEXTAREA"].includes(t.tagName)&&!t.hasAttribute("autocomplete")&&t.setAttribute("autocomplete","off"),"checkbox"===t.type){"on"===t.value||r||(g(`${e.tpl} = []`,{thisNode:t},t._thisObj||t,t._ref||{}),r=[]),t._checkboxMultiMode=r instanceof Array;const n=r instanceof Array?r.includes(t.value):!!r;t.checked!==n&&(t.checked=n)}else"radio"===t.type?t.checked!==(t.value===String(r??""))&&(t.checked=t.value===String(r??"")):"value"in t&&"file"!==t.type?setTimeout(()=>{t.value!==String(r??"")&&(t.value=r)}):t.isContentEditable&&t.innerHTML!==String(r??"")&&(t.innerHTML=r);t.dispatchEvent(new CustomEvent("bind",{bubbles:!1,detail:r}))}else["checked","disabled","readonly"].includes(n)&&(r=!!r),"boolean"==typeof r?r?t.setAttribute(n,""):t.removeAttribute(n):void 0!==r&&("string"!=typeof r&&(r=JSON.stringify(r)),"text"===n?t.textContent=r??"":"html"===n?t.innerHTML=r??"":"IMG"===t.tagName&&"src"===n&&r.includes(".svg")?t.setAttribute("_src",r??""):t.setAttribute(n,r??""))}}N=e=>w(e),o.add(N);const O=e=>{e.node._bindings||(e.node._bindings=[]),e.node._bindings.push({attr:e.attr,prop:e.prop,tpl:e.tpl,exp:e.exp}),w(e)},j=(e,t={})=>{if(3===e.nodeType){if(e._stTranslated)return;const t=A(e.textContent);return t!==e.textContent&&(e.textContent=t),void(e._stTranslated=!0)}if(1!==e.nodeType)return;e._stTranslated||(Array.from(e.attributes).forEach(e=>{if(!e.name.startsWith("$")&&!e.name.startsWith("st-")&&!e.name.startsWith(".")){const t=A(e.value);t!==e.value&&(e.value=t)}}),e._stTranslated=!0);let n=e._thisObj,r=e._ref;if(void 0===n||void 0===r){let t=e;for(;t&&(void 0===n||void 0===r);)void 0===n&&void 0!==t._thisObj&&(n=t._thisObj),void 0===r&&void 0!==t._ref&&(r={...t._ref}),t=t.parentNode}void 0===n&&(n=t.thisObj),void 0===r&&(r=t.extendVars);const s=["$if","$each","st-if","st-each","$$if","$$each","st-st-if","st-st-each"],o=["$each","st-each","$$each","st-st-each"];if("TEMPLATE"!==e.tagName&&s.some(t=>e.hasAttribute(t))){const a=document.createElement("TEMPLATE");return Array.from(e.attributes).filter(t=>s.includes(t.name)||o.some(t=>e.hasAttribute(t))&&["as","index"].includes(t.name)).forEach(t=>{a.setAttribute(t.name,t.value),e.removeAttribute(t.name)}),e.parentNode.insertBefore(a,e),a.content.appendChild(e),a._ref=r,a._thisObj=n,void j(a,t)}if("TEMPLATE"===e.tagName&&(e.hasAttribute("$if")||e.hasAttribute("st-if")||e.hasAttribute("$$if")||e.hasAttribute("st-st-if"))&&(e.hasAttribute("$each")||e.hasAttribute("st-each")||e.hasAttribute("$$each")||e.hasAttribute("st-st-each"))){const t=document.createElement("TEMPLATE"),a=Array.from(e.attributes).filter(e=>s.includes(e.name)),i=a[a.length-1];t.setAttribute(i.name,i.value),e.removeAttribute(i.name),o.includes(i.name)&&Array.from(e.attributes).filter(e=>["as","index"].includes(e.name)).forEach(n=>{t.setAttribute(n.name,n.value),e.removeAttribute(n.name)}),Array.from(e.content.childNodes).forEach(e=>t.content.appendChild(e)),e.content.appendChild(t),t._ref=r,t._thisObj=n}if("IMG"===e.tagName&&(e.hasAttribute("src")||e.hasAttribute("_src")||e.hasAttribute("$src"))){const t=e;Promise.resolve().then(()=>{const e=t.getAttribute("_src")||t.getAttribute("src");e&&fetch(e,{cache:"force-cache"}).then(e=>e.text()).then(e=>{const n=(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg");n&&(Array.from(t.attributes).forEach(e=>n.setAttribute(e.name,e.value)),t.replaceWith(n))})})}if(void 0!==e._thisObj)t.thisObj=e._thisObj||null;else{let n=e;for(;n&&void 0===n._thisObj;)n=n.parentNode;t.thisObj=n?n._thisObj:null}if(void 0===e._ref){let t=e;for(;t&&void 0===t._ref;)t=t.parentNode;e._ref=t?{...t._ref}:{}}void 0!==e._refExt&&Object.assign(e._ref,e._refExt),t.extendVars&&Object.assign(e._ref,t.extendVars),((e,t)=>{let n=!1;if(e._bindings&&(e._states=new Set,e._bindings.forEach(t=>w({node:e,...t})),e._hasOnUpdate&&e.dispatchEvent(new Event("update",{bubbles:!1})),n=!0),u.exists(e.tagName)&&!e._componentInitialized&&(Array.from(e.attributes).forEach(n=>{var r;if(n.name.startsWith("$.")){const s=n.name.slice(2);let a=A(n.value);a.includes("this.")&&(a=a.replace(/\bthis\./g,"this.parent."));const o=y(a,{thisNode:e},{parent:t.thisObj||e},e._ref||{});let i=e;const d=s.split(".");for(let e=0;e<d.length-1;e++)d[e]&&(i=i[r=d[e]]??(i[r]={}));i[d[d.length-1]]=o,e.removeAttribute(n.name)}}),b(e.tagName,e,t),l(e,"[slot-id]").forEach(e=>e.removeAttribute("slot-id")),e._componentInitialized=!0,e._thisObj||(e._thisObj=e)),"TEMPLATE"===e.tagName&&(e._children=[...e.content.childNodes],e._renderedNodes||(e._renderedNodes=[])),n)return;let r=[];const s=["$if","$each","st-if","st-each","$$if","$$each","st-st-if","st-st-each"];"TEMPLATE"===e.tagName?s.forEach(t=>e.hasAttribute(t)&&r.push(e.getAttributeNode(t))):r=Array.from(e.attributes).filter(e=>(e.name.startsWith("$")||e.name.startsWith("st-"))&&!s.includes(e.name)||e.name.includes(".")),e._thisObj&&t.thisObj&&(e._thisObj.parent=t.thisObj),e._thisObj||(e._thisObj=t.thisObj||null),e._ref||(e._ref=t.extendVars||{}),e._states=new Set,r.forEach(n=>{let r=0;n.name.startsWith("$$")||n.name.startsWith("st-st-")?r=2:(n.name.startsWith("$")||n.name.startsWith("st-"))&&(r=1);const s=2===r?n.name.startsWith("$$")?n.name.slice(2):n.name.slice(6):1===r?n.name.startsWith("$")?n.name.slice(1):n.name.slice(3):n.name;let o=n.value;if(e.removeAttribute(n.name),s.startsWith("."))O({node:e,prop:s.split("."),tpl:o,exp:r});else if(s.startsWith("on")){const n=s.slice(2);"update"===n&&(e._hasOnUpdate=!0),"load"!==n||["BODY","IMG","IFRAME"].includes(e.tagName)||(e._hasOnLoad=!0),"unload"!==n||["BODY","IMG","IFRAME"].includes(e.tagName)||(e._hasOnUnload=!0),e.addEventListener(n,n=>g(o,{event:n,thisNode:e,...n.detail||{}},t.thisObj||e,e._ref||{}))}else"bind"===s?e.addEventListener("TEXTAREA"===e.tagName||e.isContentEditable||"text"===e.type||"password"===e.type?"input":"change",n=>{let r=e.isContentEditable?n.target.innerHTML:"checkbox"===e.type?n.target.checked:n.target.files||n.target.value||n.detail;a(e),p(!0),"checkbox"===e.type&&e._checkboxMultiMode?g(`!!checked ? (!${o}.includes(val) && ${o}.push(val)) : (index = ${o}.indexOf(val), index > -1 && ${o}.splice(index, 1))`,{val:e.value,checked:r,thisNode:e},t.thisObj||e,e._ref||{}):g(`${o} = val`,{val:r,thisNode:e},t.thisObj||e,e._ref||{}),p(!1),a(null)}):"text"!==s||o||(o=e.textContent,e.textContent=""),o&&(o=A(o),O({node:e,attr:s,tpl:o,exp:r}))}),(e._hasOnLoad||e._componentInitialized)&&Promise.resolve().then(()=>e.dispatchEvent(new Event("load",{bubbles:!1}))),e._hasOnUpdate&&e.dispatchEvent(new Event("update",{bubbles:!1})),e._thisObj&&(t.thisObj=e._thisObj)})(e,{...t});const i=[...e.childNodes||[]],d={thisObj:t.thisObj,extendVars:{...e._ref}};i.forEach(e=>{e._stManaged||j(e,d)})},S=e=>{1===e.nodeType&&(e._hasOnUnload&&e.dispatchEvent(new Event("unload",{bubbles:!1})),e._states&&e._states.forEach(t=>{for(const[n,r]of t)for(const t of r)t.node===e&&r.delete(t)}),e.childNodes&&e.childNodes.forEach(e=>S(e)))},$=j,x={clone:window.structuredClone||(e=>JSON.parse(JSON.stringify(e))),base64:e=>btoa(String.fromCharCode(...(new TextEncoder).encode(e))),unbase64:e=>(new TextDecoder).decode(Uint8Array.from(atob(e),e=>e.charCodeAt(0))),urlbase64:e=>x.base64(e).replace(/[+/=]/g,e=>({"+":"-","/":"","=":""}[e])),unurlbase64:e=>x.unbase64(e.replace(/[-_.]/g,e=>({"-":"+",_:"/",".":"="}[e])).padEnd(4*Math.ceil(e.length/4),"=")),safeJson:e=>{try{return JSON.parse(e)}catch{return null}},updateDefaults:(e,t)=>{for(const n in t)void 0===e[n]&&(e[n]=t[n])},copyFunction:(e,t,...n)=>{n.forEach(n=>e[n]=t[n].bind(t))},getFunctionBody:e=>{const t=e.toString();return t.slice(t.indexOf("{")+1,t.lastIndexOf("}")).trim()},makeDom:e=>{e.includes(">\n")&&(e=e.replace(/>\s+</g,"><").trim());const t=document.createElement("div");return t.innerHTML=e,t.children[0]},newAvg:()=>{let e=0,t=0,n=0;return{add:r=>(e+=r,t++,n=e/t),get:()=>n,clear:()=>{e=0,t=0,n=0}}},newTimeCount:()=>{let e=0,t=0,n=0;return{start:()=>e=(new Date).getTime(),end:()=>{const r=(new Date).getTime(),s=r-e;return e=r,t+=s,n++,s},avg:()=>t/n}}};globalThis.Util=x;let M=new URLSearchParams((null==(t=window.location.hash)?void 0:t.substring(1))||"");const C=i({},e=>x.safeJson(M.get(e)),(e,t)=>{const n=M.get(e),r=void 0===t?void 0:JSON.stringify(t);n===r||null===n&&void 0===r||(void 0===t?M.delete(e):M.set(e,r),window.location.hash="#"+M.toString())});"undefined"!=typeof window&&window.addEventListener("hashchange",()=>{var e;const t=M;M=new URLSearchParams((null==(e=window.location.hash)?void 0:e.substring(1))||""),M.forEach((e,n)=>{t.get(n)!==e&&(C[n]=x.safeJson(e))}),t.forEach((e,t)=>{void 0===M.get(t)&&(C[t]=void 0)})});const L=i({},e=>x.safeJson(localStorage.getItem(e)),(e,t)=>{const n=localStorage.getItem(e),r=void 0===t?void 0:JSON.stringify(t);n===r||null===n&&void 0===r||(void 0===t?localStorage.removeItem(e):localStorage.setItem(e,r))}),k=i({exitBlocks:0});globalThis.Hash=C,globalThis.LocalStorage=L,globalThis.State=k;const P={NewState:i,Component:u,$:d,$$:l,RefreshState:$,SetTranslator:E,Util:x,Hash:C,LocalStorage:L,State:k};if("undefined"!=typeof globalThis&&(Object.assign(globalThis,P),globalThis.ApigoState=P),"undefined"!=typeof document){const e=()=>{u._initPending(),new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{e.isConnected&&j(e)}),e.removedNodes.forEach(e=>S(e))})}).observe(document.documentElement,{childList:!0,subtree:!0}),j(document.documentElement)};"loading"!==document.readyState?e():document.addEventListener("DOMContentLoaded",e,!0)}e.$=d,e.$$=l,e.Component=u,e.Hash=C,e.LocalStorage=L,e.NewState=i,e.RefreshState=$,e.SetTranslator=E,e.State=k,e.Util=x,e._scanTree=j,e._unbindTree=S,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
diff --git a/dist/state.min.mjs b/dist/state.min.mjs
new file mode 100644
index 0000000..4bfd7ef
--- /dev/null
+++ b/dist/state.min.mjs
@@ -0,0 +1 @@
+var e;let t=null,n=null;const r=e=>t=e,s=e=>n=e,a=new Set;function o(e={},r=null,s=null){const o={},i=new Map,d=new Map,l=(e,t)=>(d.has(e)||d.set(e,new Set),t?d.get(e).add(t):d.get(e).clear(),()=>d.get(e).delete(t)),c=(e,t)=>{d.has(e)&&d.get(e).delete(t)},h=r||(e=>o[e]),u=s||((e,t)=>o[e]=t);return Object.assign(o,e),new Proxy(o,{get:(e,n)=>"__watch"===n?l:"__unwatch"===n?c:"__isProxy"===n||(t&&(i.has(n)||i.set(n,new Set),i.get(n).add(t),t.node._states||(t.node._states=new Set),t.node._states.add(i)),h(n)),set(e,t,r){if(h(t)!==r&&u(t,r),d.has(t)&&d.get(t).forEach(n=>{const s=n(r);void 0!==s&&(r=s,e[t]=r)}),d.has(null)&&d.get(null).forEach(e=>e(r)),i.has(t)){const e=i.get(t);for(const t of e)t.node.isConnected?n!==t.node&&a.forEach(e=>e(t)):e.delete(t)}return!0}})}const i=(e,t)=>t?e.querySelector(t):document.querySelector(e),d=(e,t)=>t?e.querySelectorAll(t):document.querySelectorAll(e),l=new Map,c=[],h={getTemplate:e=>document.querySelector(`template[component="${e.toUpperCase()}"]`),register:(e,t,n=null,...r)=>{l.set(e.toUpperCase(),t),"loading"!==document.readyState?h._addTemplate(e,n,r):c.push([e,n,r])},exists:e=>l.has(e.toUpperCase()),getSetupFunction:e=>l.get(e.toUpperCase()),_addTemplate:(e,t,n)=>{if(t){const n=document.createElement("TEMPLATE");n.setAttribute("component",e.toUpperCase()),n.content.appendChild(t),document.body.appendChild(n)}n&&n.forEach(e=>document.body.appendChild(e))},_initPending:()=>{c.forEach(([e,t,n])=>h._addTemplate(e,t,n)),c.length=0}};function u(e,t,n,r={}){e.attributes&&Array.from(e.attributes).forEach(e=>{"class"!==e.name&&("style"===e.name?t.hasAttribute("style")?t.setAttribute("style",`${e.value}; ${t.getAttribute("style")}`):t.setAttribute("style",e.value):t.hasAttribute(e.name)||t.setAttribute(e.name,e.value))}),t.classList.add(...e.classList);const s="TEMPLATE"===e.tagName?e.content:e,a="TEMPLATE"===t.tagName?t.content:t;Array.from(s.childNodes).forEach(e=>a.appendChild(e)),e.tagName&&h.exists(e.tagName)&&f(e.tagName,t,n,r)}function f(e,t,n,r={}){if(r[e])return;r[e]=!0,n.thisObj&&Array.from(t.attributes).forEach(e=>{(e.name.startsWith("$")||e.name.startsWith("st-"))&&e.value.includes("this.")&&(e.value=e.value.replace(/\bthis\./g,"this.parent."))});const s=h.getSetupFunction(e),a={};Array.from(t.childNodes).forEach(e=>{e.nodeType===Node.ELEMENT_NODE&&e.hasAttribute("slot")&&(a[e.getAttribute("slot")]=e,e.removeAttribute("slot"))}),t.innerHTML="",t.state=o(t.state||{});const i=h.getTemplate(e);if(i){const e=i.content.cloneNode(!0);if(e.childNodes.length){const s=Array.from(e.childNodes).find(e=>e.nodeType===Node.ELEMENT_NODE);s&&u(s,t,n,r),d(t,"[slot-id]").forEach(e=>{const t=e.getAttribute("slot-id");a[t]&&(e.removeAttribute("slot-id"),e.innerHTML="",u(a[t],e,n,r))})}}s&&s(t)}let b=!1;function m(e){b=e}const p=new Map;function _(e,t,n,r){const s={...r||{},...t||{}},a=Object.keys(s),o=Object.values(s),i=e+a.join(",");try{let t=p.get(i);return t||(t=new Function("Hash","LocalStorage","State",...a,e),p.set(i,t)),t.apply(n,[globalThis.Hash,globalThis.LocalStorage,globalThis.State,...o])}catch(s){return b||console.error(s,r,[e,r,t,n]),null}}function g(e,t,n,r){return e.includes("${")?_("return `"+e+"`",t,n,r):_("return "+e,t,n,r)}let v=(e,t)=>e&&"string"==typeof e?e.replace(/\{(.+?)\}/g,(e,n)=>t.hasOwnProperty(n)?t[n]:e):e;const E=e=>v=e,y=e=>e&&"string"==typeof e&&e.includes("{#")?e.replace(/\{#(.+?)#\}/g,(e,t)=>{const n=t.split("||").map(e=>e.trim()),r={};if(n.length>1){const e=n[0].match(/\{(.+?)\}/g);e&&e.forEach((e,t)=>r[e.substring(1,e.length-1)]=n[t+1]||"")}return v(n[0],r)}):e;if("undefined"!=typeof document)try{document.createElement("div").setAttribute("$t","1")}catch(e){const t=Element.prototype.setAttribute;Element.prototype.setAttribute=function(e,n){if(!e.startsWith("$"))return t.call(this,e,n);const r=e.startsWith("$$")?"st-st-":"st-";return t.call(this,r+e.substring(e.startsWith("$$")?2:1),n)}}var A;function N(e){e._renderedNodes&&e._renderedNodes.forEach(e=>e.forEach(e=>{e.remove(),e._renderedNodes&&N(e)}))}function T(e){const t=e.node;if(!t.isConnected&&"TEMPLATE"!==t.tagName)return;r(e),window.__perfTrace&&window.__perfTrace.evalCount++;const n=window.__perfTrace?performance.now():0;let s=e.exp?e.tpl?g(e.tpl,{thisNode:t},t._thisObj||t,t._ref||null):null:e.tpl;if(2===e.exp&&"string"==typeof s)try{s=g(s,{thisNode:t},t._thisObj||t,t._ref||null)}catch(e){}if(window.__perfTrace&&(window.__perfTrace.evalTotal+=performance.now()-n),r(null),e.prop){const n=e.prop;let r=t;for(let e=0;e<n.length-1&&(!n[e]||(null==r[n[e]]&&(r[n[e]]={}),r=r[n[e]],"object"==typeof r));e++);if("object"==typeof r&&null!==r){const e=n[n.length-1];if(e){"object"!=typeof s||null==s||Array.isArray(s)||null!=r[e]||(r[e]={});const t=r[e];"object"==typeof t&&null!=t&&t.__watch?Object.assign(t,s):r[e]=s}else"object"!=typeof s||null==s||Array.isArray(s)||Object.assign(r,s)}}else if(e.attr){const n=e.attr;if("if"===n)s?t._renderedNodes&&0!==t._renderedNodes.length?t._renderedNodes[0].forEach(e=>O(e,{thisObj:t._thisObj,extendVars:e._ref})):(t._children.forEach(e=>{e._stManaged=!0,t.parentNode.insertBefore(e,t),e._ref={...t._ref}}),t._renderedNodes=[t._children]):(N(t),t._renderedNodes=[]);else if("each"===n)if(s&&"object"==typeof s){const e=t.getAttribute("as")||"item",n=t.getAttribute("index")||"index",r=t.getAttribute("key");let a,o;if(s instanceof Map)a=Array.from(s.keys()),o=e=>s.get(e);else if("function"==typeof s[Symbol.iterator]){const e=Array.isArray(s)?s:Array.from(s);a=new Array(e.length);for(let t=0;t<e.length;t++)a[t]=t;o=t=>e[t]}else a=Object.keys(s),o=e=>s[e];t._keyedNodes||(t._keyedNodes=new Map);const i=new Map,d=[];a.forEach((s,a)=>{const l=o(s),c=r?l&&"object"==typeof l?l[r]:l:s,h=null==c||i.has(c)?`st_key_fallback_${a}_${Math.random()}`:c;let u=t._keyedNodes.get(h);u?(t._keyedNodes.delete(h),u.forEach(r=>{window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.reuseCount++;let a=!1;for(let s in t._ref)s!==e&&s!==n&&r._ref[s]!==t._ref[s]&&(r._ref[s]=t._ref[s],a=!0);r._ref[n]!==s&&(r._ref[n]=s),r._ref[e]!==l||a?(r._ref[e]=l,window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.scanCount++,O(r,{thisObj:t._thisObj,extendVars:r._ref})):t.parentNode.lastChild!==r&&(window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.moveCount++,t.parentNode.insertBefore(r,t))})):(u=[],t._children.forEach(r=>{const a=r.cloneNode(!0);a._stManaged=!0,a._ref={...t._ref,[n]:s,[e]:l},a._thisObj=t._thisObj,t.parentNode.insertBefore(a,t),u.push(a)})),i.set(h,u),d.push(u),u.forEach(e=>t.parentNode.insertBefore(e,t))}),t._keyedNodes.forEach(e=>e.forEach(e=>{N(e),e.remove()})),t._keyedNodes=i,t._renderedNodes=d}else N(t),t._keyedNodes&&t._keyedNodes.forEach(e=>e.forEach(e=>e.remove())),t._keyedNodes=new Map,t._renderedNodes=[];else if("bind"===n){if(["INPUT","SELECT","TEXTAREA"].includes(t.tagName)&&!t.hasAttribute("autocomplete")&&t.setAttribute("autocomplete","off"),"checkbox"===t.type){"on"===t.value||s||(_(`${e.tpl} = []`,{thisNode:t},t._thisObj||t,t._ref||{}),s=[]),t._checkboxMultiMode=s instanceof Array;const n=s instanceof Array?s.includes(t.value):!!s;t.checked!==n&&(t.checked=n)}else"radio"===t.type?t.checked!==(t.value===String(s??""))&&(t.checked=t.value===String(s??"")):"value"in t&&"file"!==t.type?setTimeout(()=>{t.value!==String(s??"")&&(t.value=s)}):t.isContentEditable&&t.innerHTML!==String(s??"")&&(t.innerHTML=s);t.dispatchEvent(new CustomEvent("bind",{bubbles:!1,detail:s}))}else["checked","disabled","readonly"].includes(n)&&(s=!!s),"boolean"==typeof s?s?t.setAttribute(n,""):t.removeAttribute(n):void 0!==s&&("string"!=typeof s&&(s=JSON.stringify(s)),"text"===n?t.textContent=s??"":"html"===n?t.innerHTML=s??"":"IMG"===t.tagName&&"src"===n&&s.includes(".svg")?t.setAttribute("_src",s??""):t.setAttribute(n,s??""))}}A=e=>T(e),a.add(A);const w=e=>{e.node._bindings||(e.node._bindings=[]),e.node._bindings.push({attr:e.attr,prop:e.prop,tpl:e.tpl,exp:e.exp}),T(e)},O=(e,t={})=>{if(3===e.nodeType){if(e._stTranslated)return;const t=y(e.textContent);return t!==e.textContent&&(e.textContent=t),void(e._stTranslated=!0)}if(1!==e.nodeType)return;e._stTranslated||(Array.from(e.attributes).forEach(e=>{if(!e.name.startsWith("$")&&!e.name.startsWith("st-")&&!e.name.startsWith(".")){const t=y(e.value);t!==e.value&&(e.value=t)}}),e._stTranslated=!0);let n=e._thisObj,r=e._ref;if(void 0===n||void 0===r){let t=e;for(;t&&(void 0===n||void 0===r);)void 0===n&&void 0!==t._thisObj&&(n=t._thisObj),void 0===r&&void 0!==t._ref&&(r={...t._ref}),t=t.parentNode}void 0===n&&(n=t.thisObj),void 0===r&&(r=t.extendVars);const a=["$if","$each","st-if","st-each","$$if","$$each","st-st-if","st-st-each"],o=["$each","st-each","$$each","st-st-each"];if("TEMPLATE"!==e.tagName&&a.some(t=>e.hasAttribute(t))){const s=document.createElement("TEMPLATE");return Array.from(e.attributes).filter(t=>a.includes(t.name)||o.some(t=>e.hasAttribute(t))&&["as","index"].includes(t.name)).forEach(t=>{s.setAttribute(t.name,t.value),e.removeAttribute(t.name)}),e.parentNode.insertBefore(s,e),s.content.appendChild(e),s._ref=r,s._thisObj=n,void O(s,t)}if("TEMPLATE"===e.tagName&&(e.hasAttribute("$if")||e.hasAttribute("st-if")||e.hasAttribute("$$if")||e.hasAttribute("st-st-if"))&&(e.hasAttribute("$each")||e.hasAttribute("st-each")||e.hasAttribute("$$each")||e.hasAttribute("st-st-each"))){const t=document.createElement("TEMPLATE"),s=Array.from(e.attributes).filter(e=>a.includes(e.name)),i=s[s.length-1];t.setAttribute(i.name,i.value),e.removeAttribute(i.name),o.includes(i.name)&&Array.from(e.attributes).filter(e=>["as","index"].includes(e.name)).forEach(n=>{t.setAttribute(n.name,n.value),e.removeAttribute(n.name)}),Array.from(e.content.childNodes).forEach(e=>t.content.appendChild(e)),e.content.appendChild(t),t._ref=r,t._thisObj=n}if("IMG"===e.tagName&&(e.hasAttribute("src")||e.hasAttribute("_src")||e.hasAttribute("$src"))){const t=e;Promise.resolve().then(()=>{const e=t.getAttribute("_src")||t.getAttribute("src");e&&fetch(e,{cache:"force-cache"}).then(e=>e.text()).then(e=>{const n=(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg");n&&(Array.from(t.attributes).forEach(e=>n.setAttribute(e.name,e.value)),t.replaceWith(n))})})}if(void 0!==e._thisObj)t.thisObj=e._thisObj||null;else{let n=e;for(;n&&void 0===n._thisObj;)n=n.parentNode;t.thisObj=n?n._thisObj:null}if(void 0===e._ref){let t=e;for(;t&&void 0===t._ref;)t=t.parentNode;e._ref=t?{...t._ref}:{}}void 0!==e._refExt&&Object.assign(e._ref,e._refExt),t.extendVars&&Object.assign(e._ref,t.extendVars),((e,t)=>{let n=!1;if(e._bindings&&(e._states=new Set,e._bindings.forEach(t=>T({node:e,...t})),e._hasOnUpdate&&e.dispatchEvent(new Event("update",{bubbles:!1})),n=!0),h.exists(e.tagName)&&!e._componentInitialized&&(Array.from(e.attributes).forEach(n=>{var r;if(n.name.startsWith("$.")){const s=n.name.slice(2);let a=y(n.value);a.includes("this.")&&(a=a.replace(/\bthis\./g,"this.parent."));const o=g(a,{thisNode:e},{parent:t.thisObj||e},e._ref||{});let i=e;const d=s.split(".");for(let e=0;e<d.length-1;e++)d[e]&&(i=i[r=d[e]]??(i[r]={}));i[d[d.length-1]]=o,e.removeAttribute(n.name)}}),f(e.tagName,e,t),d(e,"[slot-id]").forEach(e=>e.removeAttribute("slot-id")),e._componentInitialized=!0,e._thisObj||(e._thisObj=e)),"TEMPLATE"===e.tagName&&(e._children=[...e.content.childNodes],e._renderedNodes||(e._renderedNodes=[])),n)return;let r=[];const a=["$if","$each","st-if","st-each","$$if","$$each","st-st-if","st-st-each"];"TEMPLATE"===e.tagName?a.forEach(t=>e.hasAttribute(t)&&r.push(e.getAttributeNode(t))):r=Array.from(e.attributes).filter(e=>(e.name.startsWith("$")||e.name.startsWith("st-"))&&!a.includes(e.name)||e.name.includes(".")),e._thisObj&&t.thisObj&&(e._thisObj.parent=t.thisObj),e._thisObj||(e._thisObj=t.thisObj||null),e._ref||(e._ref=t.extendVars||{}),e._states=new Set,r.forEach(n=>{let r=0;n.name.startsWith("$$")||n.name.startsWith("st-st-")?r=2:(n.name.startsWith("$")||n.name.startsWith("st-"))&&(r=1);const a=2===r?n.name.startsWith("$$")?n.name.slice(2):n.name.slice(6):1===r?n.name.startsWith("$")?n.name.slice(1):n.name.slice(3):n.name;let o=n.value;if(e.removeAttribute(n.name),a.startsWith("."))w({node:e,prop:a.split("."),tpl:o,exp:r});else if(a.startsWith("on")){const n=a.slice(2);"update"===n&&(e._hasOnUpdate=!0),"load"!==n||["BODY","IMG","IFRAME"].includes(e.tagName)||(e._hasOnLoad=!0),"unload"!==n||["BODY","IMG","IFRAME"].includes(e.tagName)||(e._hasOnUnload=!0),e.addEventListener(n,n=>_(o,{event:n,thisNode:e,...n.detail||{}},t.thisObj||e,e._ref||{}))}else"bind"===a?e.addEventListener("TEXTAREA"===e.tagName||e.isContentEditable||"text"===e.type||"password"===e.type?"input":"change",n=>{let r=e.isContentEditable?n.target.innerHTML:"checkbox"===e.type?n.target.checked:n.target.files||n.target.value||n.detail;s(e),m(!0),"checkbox"===e.type&&e._checkboxMultiMode?_(`!!checked ? (!${o}.includes(val) && ${o}.push(val)) : (index = ${o}.indexOf(val), index > -1 && ${o}.splice(index, 1))`,{val:e.value,checked:r,thisNode:e},t.thisObj||e,e._ref||{}):_(`${o} = val`,{val:r,thisNode:e},t.thisObj||e,e._ref||{}),m(!1),s(null)}):"text"!==a||o||(o=e.textContent,e.textContent=""),o&&(o=y(o),w({node:e,attr:a,tpl:o,exp:r}))}),(e._hasOnLoad||e._componentInitialized)&&Promise.resolve().then(()=>e.dispatchEvent(new Event("load",{bubbles:!1}))),e._hasOnUpdate&&e.dispatchEvent(new Event("update",{bubbles:!1})),e._thisObj&&(t.thisObj=e._thisObj)})(e,{...t});const i=[...e.childNodes||[]],l={thisObj:t.thisObj,extendVars:{...e._ref}};i.forEach(e=>{e._stManaged||O(e,l)})},j=e=>{1===e.nodeType&&(e._hasOnUnload&&e.dispatchEvent(new Event("unload",{bubbles:!1})),e._states&&e._states.forEach(t=>{for(const[n,r]of t)for(const t of r)t.node===e&&r.delete(t)}),e.childNodes&&e.childNodes.forEach(e=>j(e)))},$=O,x={clone:window.structuredClone||(e=>JSON.parse(JSON.stringify(e))),base64:e=>btoa(String.fromCharCode(...(new TextEncoder).encode(e))),unbase64:e=>(new TextDecoder).decode(Uint8Array.from(atob(e),e=>e.charCodeAt(0))),urlbase64:e=>x.base64(e).replace(/[+/=]/g,e=>({"+":"-","/":"","=":""}[e])),unurlbase64:e=>x.unbase64(e.replace(/[-_.]/g,e=>({"-":"+",_:"/",".":"="}[e])).padEnd(4*Math.ceil(e.length/4),"=")),safeJson:e=>{try{return JSON.parse(e)}catch{return null}},updateDefaults:(e,t)=>{for(const n in t)void 0===e[n]&&(e[n]=t[n])},copyFunction:(e,t,...n)=>{n.forEach(n=>e[n]=t[n].bind(t))},getFunctionBody:e=>{const t=e.toString();return t.slice(t.indexOf("{")+1,t.lastIndexOf("}")).trim()},makeDom:e=>{e.includes(">\n")&&(e=e.replace(/>\s+</g,"><").trim());const t=document.createElement("div");return t.innerHTML=e,t.children[0]},newAvg:()=>{let e=0,t=0,n=0;return{add:r=>(e+=r,t++,n=e/t),get:()=>n,clear:()=>{e=0,t=0,n=0}}},newTimeCount:()=>{let e=0,t=0,n=0;return{start:()=>e=(new Date).getTime(),end:()=>{const r=(new Date).getTime(),s=r-e;return e=r,t+=s,n++,s},avg:()=>t/n}}};globalThis.Util=x;let S=new URLSearchParams((null==(e=window.location.hash)?void 0:e.substring(1))||"");const M=o({},e=>x.safeJson(S.get(e)),(e,t)=>{const n=S.get(e),r=void 0===t?void 0:JSON.stringify(t);n===r||null===n&&void 0===r||(void 0===t?S.delete(e):S.set(e,r),window.location.hash="#"+S.toString())});"undefined"!=typeof window&&window.addEventListener("hashchange",()=>{var e;const t=S;S=new URLSearchParams((null==(e=window.location.hash)?void 0:e.substring(1))||""),S.forEach((e,n)=>{t.get(n)!==e&&(M[n]=x.safeJson(e))}),t.forEach((e,t)=>{void 0===S.get(t)&&(M[t]=void 0)})});const C=o({},e=>x.safeJson(localStorage.getItem(e)),(e,t)=>{const n=localStorage.getItem(e),r=void 0===t?void 0:JSON.stringify(t);n===r||null===n&&void 0===r||(void 0===t?localStorage.removeItem(e):localStorage.setItem(e,r))}),L=o({exitBlocks:0});globalThis.Hash=M,globalThis.LocalStorage=C,globalThis.State=L;const k={NewState:o,Component:h,$:i,$$:d,RefreshState:$,SetTranslator:E,Util:x,Hash:M,LocalStorage:C,State:L};if("undefined"!=typeof globalThis&&(Object.assign(globalThis,k),globalThis.ApigoState=k),"undefined"!=typeof document){const e=()=>{h._initPending(),new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{e.isConnected&&O(e)}),e.removedNodes.forEach(e=>j(e))})}).observe(document.documentElement,{childList:!0,subtree:!0}),O(document.documentElement)};"loading"!==document.readyState?e():document.addEventListener("DOMContentLoaded",e,!0)}export{i as $,d as $$,h as Component,M as Hash,C as LocalStorage,o as NewState,$ as RefreshState,E as SetTranslator,L as State,x as Util,O as _scanTree,j as _unbindTree};
diff --git a/dist/state.mjs b/dist/state.mjs
new file mode 100644
index 0000000..ae1e602
--- /dev/null
+++ b/dist/state.mjs
@@ -0,0 +1,715 @@
+var _a;
+let _activeBinding = null;
+let _noWriteBack = null;
+const setActiveBinding = (val) => _activeBinding = val;
+const setNoWriteBack = (val) => _noWriteBack = val;
+const _notifiers = /* @__PURE__ */ new Set();
+const onNotifyUpdate = (fn) => _notifiers.add(fn);
+function NewState(defaults = {}, getter = null, setter = null) {
+  const _defaults = {};
+  const _stateMappings = /* @__PURE__ */ new Map();
+  const _watchers = /* @__PURE__ */ new Map();
+  const _watchFunc = (k, cb) => {
+    if (!_watchers.has(k)) _watchers.set(k, /* @__PURE__ */ new Set());
+    !cb ? _watchers.get(k).clear() : _watchers.get(k).add(cb);
+    return () => _watchers.get(k).delete(cb);
+  };
+  const _unwatchFunc = (k, cb) => {
+    if (_watchers.has(k)) _watchers.get(k).delete(cb);
+  };
+  const __getter = getter || ((k) => _defaults[k]);
+  const __setter = setter || ((k, v) => _defaults[k] = v);
+  Object.assign(_defaults, defaults);
+  return new Proxy(_defaults, {
+    get(target, key) {
+      if (key === "__watch") return _watchFunc;
+      if (key === "__unwatch") return _unwatchFunc;
+      if (key === "__isProxy") return true;
+      if (_activeBinding) {
+        if (!_stateMappings.has(key)) _stateMappings.set(key, /* @__PURE__ */ new Set());
+        _stateMappings.get(key).add(_activeBinding);
+        if (!_activeBinding.node._states) _activeBinding.node._states = /* @__PURE__ */ new Set();
+        _activeBinding.node._states.add(_stateMappings);
+      }
+      return __getter(key);
+    },
+    set(target, key, value) {
+      if (__getter(key) !== value) {
+        __setter(key, value);
+      }
+      if (_watchers.has(key)) {
+        _watchers.get(key).forEach((cb) => {
+          const r = cb(value);
+          if (r !== void 0) {
+            value = r;
+            target[key] = value;
+          }
+        });
+      }
+      if (_watchers.has(null)) {
+        _watchers.get(null).forEach((cb) => cb(value));
+      }
+      if (_stateMappings.has(key)) {
+        const bindings = _stateMappings.get(key);
+        for (const binding of bindings) {
+          if (!binding.node.isConnected) {
+            bindings.delete(binding);
+            continue;
+          }
+          if (_noWriteBack !== binding.node) {
+            _notifiers.forEach((fn) => fn(binding));
+          }
+        }
+      }
+      return true;
+    }
+  });
+}
+const $ = (a, b) => b ? a.querySelector(b) : document.querySelector(a);
+const $$ = (a, b) => b ? a.querySelectorAll(b) : document.querySelectorAll(a);
+const _components = /* @__PURE__ */ new Map();
+const _pendingTemplates = [];
+const Component = {
+  getTemplate: (name) => document.querySelector(`template[component="${name.toUpperCase()}"]`),
+  register: (name, setupFunc, templateNode = null, ...globalNodes) => {
+    _components.set(name.toUpperCase(), setupFunc);
+    if (document.readyState !== "loading") Component._addTemplate(name, templateNode, globalNodes);
+    else _pendingTemplates.push([name, templateNode, globalNodes]);
+  },
+  exists: (name) => _components.has(name.toUpperCase()),
+  getSetupFunction: (name) => _components.get(name.toUpperCase()),
+  _addTemplate: (name, templateNode, globalNodes) => {
+    if (templateNode) {
+      const template = document.createElement("TEMPLATE");
+      template.setAttribute("component", name.toUpperCase());
+      template.content.appendChild(templateNode);
+      document.body.appendChild(template);
+    }
+    if (globalNodes) globalNodes.forEach((node) => document.body.appendChild(node));
+  },
+  _initPending: () => {
+    _pendingTemplates.forEach(([name, templateNode, globalNodes]) => Component._addTemplate(name, templateNode, globalNodes));
+    _pendingTemplates.length = 0;
+  }
+};
+function _mergeNode(from, to, scanObj, exists = {}) {
+  if (from.attributes) {
+    Array.from(from.attributes).forEach((attr) => {
+      if (attr.name === "class") return;
+      if (attr.name === "style") {
+        if (to.hasAttribute("style")) to.setAttribute("style", `${attr.value}; ${to.getAttribute("style")}`);
+        else to.setAttribute("style", attr.value);
+      } else if (!to.hasAttribute(attr.name)) {
+        to.setAttribute(attr.name, attr.value);
+      }
+    });
+  }
+  to.classList.add(...from.classList);
+  const fromContent = from.tagName === "TEMPLATE" ? from.content : from;
+  const toContent = to.tagName === "TEMPLATE" ? to.content : to;
+  Array.from(fromContent.childNodes).forEach((child) => toContent.appendChild(child));
+  if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists);
+}
+function _makeComponent(name, node, scanObj, exists = {}) {
+  if (exists[name]) return;
+  exists[name] = true;
+  if (scanObj.thisObj) {
+    Array.from(node.attributes).forEach((attr) => {
+      if ((attr.name.startsWith("$") || attr.name.startsWith("st-")) && attr.value.includes("this.")) {
+        attr.value = attr.value.replace(/\bthis\./g, "this.parent.");
+      }
+    });
+  }
+  const componentFunc = Component.getSetupFunction(name);
+  const slots = {};
+  Array.from(node.childNodes).forEach((child) => {
+    if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute("slot")) {
+      slots[child.getAttribute("slot")] = child;
+      child.removeAttribute("slot");
+    }
+  });
+  node.innerHTML = "";
+  node.state = NewState(node.state || {});
+  const template = Component.getTemplate(name);
+  if (template) {
+    const tplnode = template.content.cloneNode(true);
+    if (tplnode.childNodes.length) {
+      const rootNode = Array.from(tplnode.childNodes).find((n) => n.nodeType === Node.ELEMENT_NODE);
+      if (rootNode) _mergeNode(rootNode, node, scanObj, exists);
+      $$(node, "[slot-id]").forEach((placeholder) => {
+        const slotName = placeholder.getAttribute("slot-id");
+        if (slots[slotName]) {
+          placeholder.removeAttribute("slot-id");
+          placeholder.innerHTML = "";
+          _mergeNode(slots[slotName], placeholder, scanObj, exists);
+        }
+      });
+    }
+  }
+  if (componentFunc) componentFunc(node);
+}
+let _disableRunCodeError = false;
+function setDisableRunCodeError(value) {
+  _disableRunCodeError = value;
+}
+const _fnCache = /* @__PURE__ */ new Map();
+function _runCode(code, vars, thisObj, extendVars) {
+  const allVars = { ...extendVars || {}, ...vars || {} };
+  const argKeys = Object.keys(allVars);
+  const argValues = Object.values(allVars);
+  const cacheKey = code + argKeys.join(",");
+  try {
+    let fn = _fnCache.get(cacheKey);
+    if (!fn) {
+      fn = new Function("Hash", "LocalStorage", "State", ...argKeys, code);
+      _fnCache.set(cacheKey, fn);
+    }
+    return fn.apply(thisObj, [globalThis.Hash, globalThis.LocalStorage, globalThis.State, ...argValues]);
+  } catch (e) {
+    if (!_disableRunCodeError) console.error(e, extendVars, [code, extendVars, vars, thisObj]);
+    return null;
+  }
+}
+function _returnCode(code, vars, thisObj, extendVars) {
+  if (code.includes("${")) return _runCode("return `" + code + "`", vars, thisObj, extendVars);
+  else return _runCode("return " + code, vars, thisObj, extendVars);
+}
+let _translator = (text, args) => {
+  if (!text || typeof text !== "string") return text;
+  return text.replace(/\{(.+?)\}/g, (match, key) => args.hasOwnProperty(key) ? args[key] : match);
+};
+const SetTranslator = (fn) => _translator = fn;
+const _translate = (text) => {
+  if (!text || typeof text !== "string" || !text.includes("{#")) return text;
+  return text.replace(/\{#(.+?)#\}/g, (m, content) => {
+    const parts = content.split("||").map((s) => s.trim());
+    const args = {};
+    if (parts.length > 1) {
+      const matches = parts[0].match(/\{(.+?)\}/g);
+      if (matches) matches.forEach((match, i) => args[match.substring(1, match.length - 1)] = parts[i + 1] || "");
+    }
+    return _translator(parts[0], args);
+  });
+};
+if (typeof document !== "undefined") {
+  try {
+    document.createElement("div").setAttribute("$t", "1");
+  } catch (e) {
+    const originalSetAttribute = Element.prototype.setAttribute;
+    Element.prototype.setAttribute = function(name, value) {
+      if (!name.startsWith("$")) return originalSetAttribute.call(this, name, value);
+      const prefix = name.startsWith("$$") ? "st-st-" : "st-";
+      return originalSetAttribute.call(this, prefix + name.substring(name.startsWith("$$") ? 2 : 1), value);
+    };
+  }
+}
+onNotifyUpdate((binding) => _updateBinding(binding));
+function _clearRenderedNodes(node) {
+  if (node._renderedNodes) node._renderedNodes.forEach((nodes) => nodes.forEach((child) => {
+    child.remove();
+    if (child._renderedNodes) _clearRenderedNodes(child);
+  }));
+}
+function _updateBinding(binding) {
+  const node = binding.node;
+  if (!node.isConnected && node.tagName !== "TEMPLATE") return;
+  setActiveBinding(binding);
+  if (window.__perfTrace) window.__perfTrace.evalCount++;
+  const evalStart = window.__perfTrace ? performance.now() : 0;
+  let result = binding.exp ? binding.tpl ? _returnCode(binding.tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null : binding.tpl;
+  if (binding.exp === 2 && typeof result === "string") {
+    try {
+      result = _returnCode(result, { thisNode: node }, node._thisObj || node, node._ref || null);
+    } catch (e) {
+    }
+  }
+  if (window.__perfTrace) window.__perfTrace.evalTotal += performance.now() - evalStart;
+  setActiveBinding(null);
+  if (binding.prop) {
+    const prop = binding.prop;
+    let o = node;
+    for (let i = 0; i < prop.length - 1; i++) {
+      if (!prop[i]) continue;
+      if (o[prop[i]] == null) o[prop[i]] = {};
+      o = o[prop[i]];
+      if (typeof o !== "object") break;
+    }
+    if (typeof o === "object" && o !== null) {
+      const lk = prop[prop.length - 1];
+      if (lk) {
+        if (typeof result === "object" && result != null && !Array.isArray(result) && o[lk] == null) o[lk] = {};
+        const lo = o[lk];
+        if (typeof lo === "object" && lo != null && lo.__watch) Object.assign(lo, result);
+        else o[lk] = result;
+      } else if (typeof result === "object" && result != null && !Array.isArray(result)) {
+        Object.assign(o, result);
+      }
+    }
+  } else if (binding.attr) {
+    const attr = binding.attr;
+    if (attr === "if") {
+      if (result) {
+        if (!node._renderedNodes || node._renderedNodes.length === 0) {
+          node._children.forEach((child) => {
+            child._stManaged = true;
+            node.parentNode.insertBefore(child, node);
+            child._ref = { ...node._ref };
+          });
+          node._renderedNodes = [node._children];
+        } else {
+          node._renderedNodes[0].forEach((child) => _scanTree(child, { thisObj: node._thisObj, extendVars: child._ref }));
+        }
+      } else {
+        _clearRenderedNodes(node);
+        node._renderedNodes = [];
+      }
+    } else if (attr === "each") {
+      if (result && typeof result === "object") {
+        const asName = node.getAttribute("as") || "item";
+        const indexName = node.getAttribute("index") || "index";
+        const keyName = node.getAttribute("key");
+        let keys, getVal;
+        if (result instanceof Map) {
+          keys = Array.from(result.keys());
+          getVal = (k) => result.get(k);
+        } else if (typeof result[Symbol.iterator] === "function") {
+          const arr = Array.isArray(result) ? result : Array.from(result);
+          keys = new Array(arr.length);
+          for (let i = 0; i < arr.length; i++) keys[i] = i;
+          getVal = (k) => arr[k];
+        } else {
+          keys = Object.keys(result);
+          getVal = (k) => result[k];
+        }
+        if (!node._keyedNodes) node._keyedNodes = /* @__PURE__ */ new Map();
+        const newKeyedNodes = /* @__PURE__ */ new Map();
+        const currentRenderedNodes = [];
+        keys.forEach((k, i) => {
+          const item = getVal(k);
+          const rawKey = keyName ? item && typeof item === "object" ? item[keyName] : item : k;
+          const keyVal = rawKey === void 0 || rawKey === null || newKeyedNodes.has(rawKey) ? `st_key_fallback_${i}_${Math.random()}` : rawKey;
+          let existingNodes = node._keyedNodes.get(keyVal);
+          if (existingNodes) {
+            node._keyedNodes.delete(keyVal);
+            existingNodes.forEach((child) => {
+              if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.reuseCount++;
+              let scopeChanged = false;
+              for (let key in node._ref) {
+                if (key === asName || key === indexName) continue;
+                if (child._ref[key] !== node._ref[key]) {
+                  child._ref[key] = node._ref[key];
+                  scopeChanged = true;
+                }
+              }
+              const indexChanged = child._ref[indexName] !== k;
+              if (indexChanged) child._ref[indexName] = k;
+              if (child._ref[asName] !== item || scopeChanged) {
+                child._ref[asName] = item;
+                if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.scanCount++;
+                _scanTree(child, { thisObj: node._thisObj, extendVars: child._ref });
+              } else if (node.parentNode.lastChild !== child) {
+                if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.moveCount++;
+                node.parentNode.insertBefore(child, node);
+              }
+            });
+          } else {
+            existingNodes = [];
+            node._children.forEach((child) => {
+              const cloned = child.cloneNode(true);
+              cloned._stManaged = true;
+              cloned._ref = { ...node._ref, [indexName]: k, [asName]: item };
+              cloned._thisObj = node._thisObj;
+              node.parentNode.insertBefore(cloned, node);
+              existingNodes.push(cloned);
+            });
+          }
+          newKeyedNodes.set(keyVal, existingNodes);
+          currentRenderedNodes.push(existingNodes);
+          existingNodes.forEach((child) => node.parentNode.insertBefore(child, node));
+        });
+        node._keyedNodes.forEach((nodes) => nodes.forEach((child) => {
+          _clearRenderedNodes(child);
+          child.remove();
+        }));
+        node._keyedNodes = newKeyedNodes;
+        node._renderedNodes = currentRenderedNodes;
+      } else {
+        _clearRenderedNodes(node);
+        if (node._keyedNodes) node._keyedNodes.forEach((nodes) => nodes.forEach((child) => child.remove()));
+        node._keyedNodes = /* @__PURE__ */ new Map();
+        node._renderedNodes = [];
+      }
+    } else if (attr === "bind") {
+      if (["INPUT", "SELECT", "TEXTAREA"].includes(node.tagName) && !node.hasAttribute("autocomplete")) node.setAttribute("autocomplete", "off");
+      if (node.type === "checkbox") {
+        if (node.value !== "on" && !result) {
+          _runCode(`${binding.tpl} = []`, { thisNode: node }, node._thisObj || node, node._ref || {});
+          result = [];
+        }
+        node._checkboxMultiMode = result instanceof Array;
+        const isChecked = result instanceof Array ? result.includes(node.value) : !!result;
+        if (node.checked !== isChecked) node.checked = isChecked;
+      } else if (node.type === "radio") {
+        if (node.checked !== (node.value === String(result ?? ""))) node.checked = node.value === String(result ?? "");
+      } else if ("value" in node && node.type !== "file") {
+        setTimeout(() => {
+          if (node.value !== String(result ?? "")) node.value = result;
+        });
+      } else if (node.isContentEditable) {
+        if (node.innerHTML !== String(result ?? "")) node.innerHTML = result;
+      }
+      node.dispatchEvent(new CustomEvent("bind", { bubbles: false, detail: result }));
+    } else {
+      if (["checked", "disabled", "readonly"].includes(attr)) result = !!result;
+      if (typeof result === "boolean") result ? node.setAttribute(attr, "") : node.removeAttribute(attr);
+      else if (result !== void 0) {
+        if (typeof result !== "string") result = JSON.stringify(result);
+        if (attr === "text") node.textContent = result ?? "";
+        else if (attr === "html") node.innerHTML = result ?? "";
+        else if (node.tagName === "IMG" && attr === "src" && result.includes(".svg")) node.setAttribute("_src", result ?? "");
+        else node.setAttribute(attr, result ?? "");
+      }
+    }
+  }
+}
+const _initBinding = (binding) => {
+  if (!binding.node._bindings) binding.node._bindings = [];
+  binding.node._bindings.push({ attr: binding.attr, prop: binding.prop, tpl: binding.tpl, exp: binding.exp });
+  _updateBinding(binding);
+};
+const _parseNode = (node, scanObj) => {
+  let hasBindings = false;
+  if (node._bindings) {
+    node._states = /* @__PURE__ */ new Set();
+    node._bindings.forEach((b) => _updateBinding({ node, ...b }));
+    if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
+    hasBindings = true;
+  }
+  if (Component.exists(node.tagName) && !node._componentInitialized) {
+    Array.from(node.attributes).forEach((attr) => {
+      var _a2;
+      if (attr.name.startsWith("$.")) {
+        const realAttrName = attr.name.slice(2);
+        let tpl = _translate(attr.value);
+        if (tpl.includes("this.")) tpl = tpl.replace(/\bthis\./g, "this.parent.");
+        const result = _returnCode(tpl, { thisNode: node }, { parent: scanObj.thisObj || node }, node._ref || {});
+        let o = node;
+        const prop = realAttrName.split(".");
+        for (let i = 0; i < prop.length - 1; i++) {
+          if (prop[i]) o = o[_a2 = prop[i]] ?? (o[_a2] = {});
+        }
+        o[prop[prop.length - 1]] = result;
+        node.removeAttribute(attr.name);
+      }
+    });
+    _makeComponent(node.tagName, node, scanObj);
+    $$(node, "[slot-id]").forEach((p) => p.removeAttribute("slot-id"));
+    node._componentInitialized = true;
+    if (!node._thisObj) node._thisObj = node;
+  }
+  if (node.tagName === "TEMPLATE") {
+    node._children = [...node.content.childNodes];
+    if (!node._renderedNodes) node._renderedNodes = [];
+  }
+  if (hasBindings) return;
+  let attrs = [];
+  const triggerAttrs = ["$if", "$each", "st-if", "st-each", "$$if", "$$each", "st-st-if", "st-st-each"];
+  if (node.tagName === "TEMPLATE") {
+    triggerAttrs.forEach((n) => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n)));
+  } else {
+    attrs = Array.from(node.attributes).filter((a) => (a.name.startsWith("$") || a.name.startsWith("st-")) && !triggerAttrs.includes(a.name) || a.name.includes("."));
+  }
+  if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj;
+  if (!node._thisObj) node._thisObj = scanObj.thisObj || null;
+  if (!node._ref) node._ref = scanObj.extendVars || {};
+  node._states = /* @__PURE__ */ new Set();
+  attrs.forEach((attr) => {
+    let exp = 0;
+    if (attr.name.startsWith("$$") || attr.name.startsWith("st-st-")) exp = 2;
+    else if (attr.name.startsWith("$") || attr.name.startsWith("st-")) exp = 1;
+    const realAttrName = exp === 2 ? attr.name.startsWith("$$") ? attr.name.slice(2) : attr.name.slice(6) : exp === 1 ? attr.name.startsWith("$") ? attr.name.slice(1) : attr.name.slice(3) : attr.name;
+    let tpl = attr.value;
+    node.removeAttribute(attr.name);
+    if (realAttrName.startsWith(".")) _initBinding({ node, prop: realAttrName.split("."), tpl, exp });
+    else if (realAttrName.startsWith("on")) {
+      const eventName = realAttrName.slice(2);
+      if (eventName === "update") node._hasOnUpdate = true;
+      if (eventName === "load" && !["BODY", "IMG", "IFRAME"].includes(node.tagName)) node._hasOnLoad = true;
+      if (eventName === "unload" && !["BODY", "IMG", "IFRAME"].includes(node.tagName)) node._hasOnUnload = true;
+      node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...e.detail || {} }, scanObj.thisObj || node, node._ref || {}));
+    } else {
+      if (realAttrName === "bind") {
+        node.addEventListener(node.tagName === "TEXTAREA" || node.isContentEditable || node.type === "text" || node.type === "password" ? "input" : "change", (e) => {
+          let newVal = node.isContentEditable ? e.target.innerHTML : node.type === "checkbox" ? e.target.checked : e.target.files || e.target.value || e.detail;
+          setNoWriteBack(node);
+          setDisableRunCodeError(true);
+          if (node.type === "checkbox" && node._checkboxMultiMode) _runCode(`!!checked ? (!${tpl}.includes(val) && ${tpl}.push(val)) : (index = ${tpl}.indexOf(val), index > -1 && ${tpl}.splice(index, 1))`, { val: node.value, checked: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {});
+          else _runCode(`${tpl} = val`, { val: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {});
+          setDisableRunCodeError(false);
+          setNoWriteBack(null);
+        });
+      } else if (realAttrName === "text" && !tpl) {
+        tpl = node.textContent;
+        node.textContent = "";
+      }
+      if (tpl) {
+        tpl = _translate(tpl);
+        _initBinding({ node, attr: realAttrName, tpl, exp });
+      }
+    }
+  });
+  if (node._hasOnLoad || node._componentInitialized) Promise.resolve().then(() => node.dispatchEvent(new Event("load", { bubbles: false })));
+  if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
+  if (node._thisObj) scanObj.thisObj = node._thisObj;
+};
+const _scanTree = (node, scanObj = {}) => {
+  if (node.nodeType === 3) {
+    if (node._stTranslated) return;
+    const translated = _translate(node.textContent);
+    if (translated !== node.textContent) node.textContent = translated;
+    node._stTranslated = true;
+    return;
+  }
+  if (node.nodeType !== 1) return;
+  if (!node._stTranslated) {
+    Array.from(node.attributes).forEach((attr) => {
+      if (!attr.name.startsWith("$") && !attr.name.startsWith("st-") && !attr.name.startsWith(".")) {
+        const translated = _translate(attr.value);
+        if (translated !== attr.value) attr.value = translated;
+      }
+    });
+    node._stTranslated = true;
+  }
+  let resolvedThisObj = node._thisObj;
+  let resolvedRef = node._ref;
+  if (resolvedThisObj === void 0 || resolvedRef === void 0) {
+    let curr = node;
+    while (curr && (resolvedThisObj === void 0 || resolvedRef === void 0)) {
+      if (resolvedThisObj === void 0 && curr._thisObj !== void 0) resolvedThisObj = curr._thisObj;
+      if (resolvedRef === void 0 && curr._ref !== void 0) resolvedRef = { ...curr._ref };
+      curr = curr.parentNode;
+    }
+  }
+  if (resolvedThisObj === void 0) resolvedThisObj = scanObj.thisObj;
+  if (resolvedRef === void 0) resolvedRef = scanObj.extendVars;
+  const triggerAttrs = ["$if", "$each", "st-if", "st-each", "$$if", "$$each", "st-st-if", "st-st-each"];
+  const eachAttrs = ["$each", "st-each", "$$each", "st-st-each"];
+  if (node.tagName !== "TEMPLATE" && triggerAttrs.some((t) => node.hasAttribute(t))) {
+    const template = document.createElement("TEMPLATE");
+    const attrs = Array.from(node.attributes).filter((attr) => triggerAttrs.includes(attr.name) || eachAttrs.some((t) => node.hasAttribute(t)) && ["as", "index"].includes(attr.name));
+    attrs.forEach((attr) => {
+      template.setAttribute(attr.name, attr.value);
+      node.removeAttribute(attr.name);
+    });
+    node.parentNode.insertBefore(template, node);
+    template.content.appendChild(node);
+    template._ref = resolvedRef;
+    template._thisObj = resolvedThisObj;
+    _scanTree(template, scanObj);
+    return;
+  }
+  if (node.tagName === "TEMPLATE" && (node.hasAttribute("$if") || node.hasAttribute("st-if") || node.hasAttribute("$$if") || node.hasAttribute("st-st-if")) && (node.hasAttribute("$each") || node.hasAttribute("st-each") || node.hasAttribute("$$each") || node.hasAttribute("st-st-each"))) {
+    const template = document.createElement("TEMPLATE");
+    const attrs = Array.from(node.attributes).filter((attr2) => triggerAttrs.includes(attr2.name));
+    const attr = attrs[attrs.length - 1];
+    template.setAttribute(attr.name, attr.value);
+    node.removeAttribute(attr.name);
+    if (eachAttrs.includes(attr.name)) {
+      Array.from(node.attributes).filter((attr2) => ["as", "index"].includes(attr2.name)).forEach((attr2) => {
+        template.setAttribute(attr2.name, attr2.value);
+        node.removeAttribute(attr2.name);
+      });
+    }
+    Array.from(node.content.childNodes).forEach((child) => template.content.appendChild(child));
+    node.content.appendChild(template);
+    template._ref = resolvedRef;
+    template._thisObj = resolvedThisObj;
+  }
+  if (node.tagName === "IMG" && (node.hasAttribute("src") || node.hasAttribute("_src") || node.hasAttribute("$src"))) {
+    const imgNode = node;
+    Promise.resolve().then(() => {
+      const url = imgNode.getAttribute("_src") || imgNode.getAttribute("src");
+      if (url) fetch(url, { cache: "force-cache" }).then((r) => r.text()).then((svgText) => {
+        const realSvg = new DOMParser().parseFromString(svgText, "image/svg+xml").querySelector("svg");
+        if (realSvg) {
+          Array.from(imgNode.attributes).forEach((attr) => realSvg.setAttribute(attr.name, attr.value));
+          imgNode.replaceWith(realSvg);
+        }
+      });
+    });
+  }
+  if (node._thisObj !== void 0) scanObj.thisObj = node._thisObj || null;
+  else {
+    let curr = node;
+    while (curr && curr._thisObj === void 0) curr = curr.parentNode;
+    scanObj.thisObj = curr ? curr._thisObj : null;
+  }
+  if (node._ref === void 0) {
+    let curr = node;
+    while (curr && curr._ref === void 0) curr = curr.parentNode;
+    node._ref = curr ? { ...curr._ref } : {};
+  }
+  if (node._refExt !== void 0) {
+    Object.assign(node._ref, node._refExt);
+  }
+  if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars);
+  _parseNode(node, { ...scanObj });
+  const nodes = [...node.childNodes || []];
+  const nextScanObj = { thisObj: scanObj.thisObj, extendVars: { ...node._ref } };
+  nodes.forEach((child) => {
+    if (!child._stManaged) _scanTree(child, nextScanObj);
+  });
+};
+const _unbindTree = (node) => {
+  if (node.nodeType !== 1) return;
+  if (node._hasOnUnload) node.dispatchEvent(new Event("unload", { bubbles: false }));
+  if (node._states) node._states.forEach((mappings) => {
+    for (const [key, bindingSet] of mappings) {
+      for (const binding of bindingSet) {
+        if (binding.node === node) bindingSet.delete(binding);
+      }
+    }
+  });
+  node.childNodes && node.childNodes.forEach((child) => _unbindTree(child));
+};
+const RefreshState = _scanTree;
+const Util = {
+  clone: window.structuredClone || ((obj) => JSON.parse(JSON.stringify(obj))),
+  base64: (str) => btoa(String.fromCharCode(...new TextEncoder().encode(str))),
+  unbase64: (str) => new TextDecoder().decode(Uint8Array.from(atob(str), (c) => c.charCodeAt(0))),
+  urlbase64: (str) => Util.base64(str).replace(/[+/=]/g, (m) => ({ "+": "-", "/": "", "=": "" })[m]),
+  unurlbase64: (str) => Util.unbase64(str.replace(/[-_.]/g, (m) => ({ "-": "+", "_": "/", ".": "=" })[m]).padEnd(Math.ceil(str.length / 4) * 4, "=")),
+  safeJson: (str) => {
+    try {
+      return JSON.parse(str);
+    } catch {
+      return null;
+    }
+  },
+  updateDefaults: (obj, defaults) => {
+    for (const k in defaults) if (obj[k] === void 0) obj[k] = defaults[k];
+  },
+  copyFunction: (toObj, fromObj, ...funcNames) => {
+    funcNames.forEach((name) => toObj[name] = fromObj[name].bind(fromObj));
+  },
+  getFunctionBody: (fn) => {
+    const code = fn.toString();
+    return code.slice(code.indexOf("{") + 1, code.lastIndexOf("}")).trim();
+  },
+  makeDom: (html) => {
+    if (html.includes(">\n")) html = html.replace(/>\s+</g, "><").trim();
+    const node = document.createElement("div");
+    node.innerHTML = html;
+    return node.children[0];
+  },
+  newAvg: () => {
+    let total = 0, count = 0, avg = 0;
+    return {
+      add: (v) => {
+        total += v;
+        count++;
+        return avg = total / count;
+      },
+      get: () => avg,
+      clear: () => {
+        total = 0, count = 0, avg = 0;
+      }
+    };
+  },
+  newTimeCount: () => {
+    let startTime = 0, total = 0, count = 0;
+    return {
+      start: () => startTime = (/* @__PURE__ */ new Date()).getTime(),
+      end: () => {
+        const endTime = (/* @__PURE__ */ new Date()).getTime();
+        const left = endTime - startTime;
+        startTime = endTime;
+        total += left;
+        count++;
+        return left;
+      },
+      avg: () => total / count
+    };
+  }
+};
+globalThis.Util = Util;
+let _hashParams = new URLSearchParams(((_a = window.location.hash) == null ? void 0 : _a.substring(1)) || "");
+const Hash = NewState({}, (k) => Util.safeJson(_hashParams.get(k)), (k, v) => {
+  const oldStr = _hashParams.get(k);
+  const newStr = v === void 0 ? void 0 : JSON.stringify(v);
+  if (oldStr === newStr || oldStr === null && newStr === void 0) return;
+  v === void 0 ? _hashParams.delete(k) : _hashParams.set(k, newStr);
+  window.location.hash = "#" + _hashParams.toString();
+});
+if (typeof window !== "undefined") {
+  window.addEventListener("hashchange", () => {
+    var _a2;
+    const oldHashParams = _hashParams;
+    _hashParams = new URLSearchParams(((_a2 = window.location.hash) == null ? void 0 : _a2.substring(1)) || "");
+    _hashParams.forEach((v, k) => {
+      if (oldHashParams.get(k) !== v) Hash[k] = Util.safeJson(v);
+    });
+    oldHashParams.forEach((v, k) => {
+      if (_hashParams.get(k) === void 0) Hash[k] = void 0;
+    });
+  });
+}
+const LocalStorage = NewState({}, (k) => Util.safeJson(localStorage.getItem(k)), (k, v) => {
+  const oldStr = localStorage.getItem(k);
+  const newStr = v === void 0 ? void 0 : JSON.stringify(v);
+  if (oldStr === newStr || oldStr === null && newStr === void 0) return;
+  v === void 0 ? localStorage.removeItem(k) : localStorage.setItem(k, newStr);
+});
+const State = NewState({
+  exitBlocks: 0
+  // 默认值
+});
+globalThis.Hash = Hash;
+globalThis.LocalStorage = LocalStorage;
+globalThis.State = State;
+const ApigoState = {
+  NewState,
+  Component,
+  $,
+  $$,
+  RefreshState,
+  SetTranslator,
+  Util,
+  Hash,
+  LocalStorage,
+  State
+};
+if (typeof globalThis !== "undefined") {
+  Object.assign(globalThis, ApigoState);
+  globalThis.ApigoState = ApigoState;
+}
+if (typeof document !== "undefined") {
+  const init = () => {
+    Component._initPending();
+    new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((newNode) => {
+          if (newNode.isConnected) _scanTree(newNode);
+        });
+        mutation.removedNodes.forEach((oldNode) => _unbindTree(oldNode));
+      });
+    }).observe(document.documentElement, { childList: true, subtree: true });
+    _scanTree(document.documentElement);
+  };
+  if (document.readyState !== "loading") init();
+  else document.addEventListener("DOMContentLoaded", init, true);
+}
+export {
+  $,
+  $$,
+  Component,
+  Hash,
+  LocalStorage,
+  NewState,
+  RefreshState,
+  SetTranslator,
+  State,
+  Util,
+  _scanTree,
+  _unbindTree
+};
diff --git a/package.json b/package.json
index c645068..d444bd3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@apigo.cc/state",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "type": "module",
   "main": "dist/state.js",
   "module": "dist/state.js",
diff --git a/playwright.config.js b/playwright.config.js
index e440d8a..56b76ca 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
   },
   webServer: {
     command: 'npx vite --port 8081 --host 127.0.0.1',
-    url: 'http://127.0.0.1:8081',
+    url: 'http://127.0.0.1:8081/test/index.html',
     timeout: 180000,
     reuseExistingServer: !process.env.CI,
   },
diff --git a/src/globals.js b/src/globals.js
index d3aa744..37511f2 100644
--- a/src/globals.js
+++ b/src/globals.js
@@ -29,5 +29,11 @@ export const LocalStorage = NewState({}, k => Util.safeJson(localStorage.getItem
     v === undefined ? localStorage.removeItem(k) : localStorage.setItem(k, newStr)
 })
 
+// 核心全局状态机
+export const State = NewState({
+    exitBlocks: 0 // 默认值
+});
+
 globalThis.Hash = Hash;
 globalThis.LocalStorage = LocalStorage;
+globalThis.State = State;
diff --git a/src/index.js b/src/index.js
index 732a6e2..2a8e6ef 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,11 +3,24 @@ export { NewState } from './observer.js';
 export { Component } from './component.js';
 export { $, $$, RefreshState, SetTranslator, _scanTree, _unbindTree } from './dom.js';
 export { Util } from './utils.js';
-export { Hash, LocalStorage } from './globals.js';
+export { Hash, LocalStorage, State } from './globals.js';
 
+import { NewState } from './observer.js';
 import { Component } from './component.js';
+import { $, $$, RefreshState, SetTranslator } from './dom.js';
+import { Util } from './utils.js';
+import { Hash, LocalStorage, State } from './globals.js';
 import { _scanTree, _unbindTree } from './dom.js';
-import { LocalStorage } from './globals.js';
+
+const ApigoState = {
+    NewState, Component, $, $$, RefreshState, SetTranslator, Util, Hash, LocalStorage, State
+};
+
+// 挂载到全局，支持 UMD 直接访问
+if (typeof globalThis !== 'undefined') {
+    Object.assign(globalThis, ApigoState);
+    globalThis.ApigoState = ApigoState;
+}
 
 if (typeof document !== 'undefined') {
     const init = () => {
diff --git a/test-results/.last-run.json b/test-results/.last-run.json
index 344ea9e..cbcc1fb 100644
--- a/test-results/.last-run.json
+++ b/test-results/.last-run.json
@@ -1,4 +1,4 @@
 {
-  "status": "interrupted",
+  "status": "passed",
   "failedTests": []
 }
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index c986527..cc64563 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,19 +6,29 @@ export default defineConfig({
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.js'),
-      name: 'State',
-      formats: ['es']
+      name: 'ApigoState', // UMD 内部名称，逻辑主要靠 globalThis 挂载
+      formats: ['umd', 'es']
     },
     rollupOptions: {
       output: [
         {
-          format: 'es',
-          entryFileNames: 'state.js',
-          minifyInternalExports: false
+          format: 'umd',
+          name: 'ApigoState',
+          entryFileNames: 'state.js'
+        },
+        {
+          format: 'umd',
+          name: 'ApigoState',
+          entryFileNames: 'state.min.js',
+          plugins: [terser()]
         },
         {
           format: 'es',
-          entryFileNames: 'state.min.js',
+          entryFileNames: 'state.mjs'
+        },
+        {
+          format: 'es',
+          entryFileNames: 'state.min.mjs',
           plugins: [terser()]
         }
       ]