@weapp-vite/web 1.0.0 → 1.0.1

package/dist/runtime/index.mjs

@@ -1,12 +1,743 @@
+// src/runtime/style.ts
+var injected = /* @__PURE__ */ new Map();
+function createStyleId(css) {
+  let hash = 2166136261;
+  for (let i = 0; i < css.length; i++) {
+    hash ^= css.charCodeAt(i);
+    hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+  }
+  return `weapp-web-style-${(hash >>> 0).toString(36)}`;
+}
+function removeStyle(id) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const style = injected.get(id);
+  if (style) {
+    style.remove();
+    injected.delete(id);
+  }
+}
+function injectStyle(css, id) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const styleId = id ?? createStyleId(css);
+  const existing = injected.get(styleId);
+  if (existing) {
+    existing.textContent = css;
+    return () => removeStyle(styleId);
+  }
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = css;
+  document.head.append(style);
+  injected.set(styleId, style);
+  return () => removeStyle(styleId);
+}
+
+// src/runtime/button.ts
+var DEFAULT_FORM_CONFIG = {
+  preventDefault: true
+};
+var DEFAULT_HOVER_CLASS = "button-hover";
+var DEFAULT_HOVER_START = 20;
+var DEFAULT_HOVER_STAY = 70;
+var BUTTON_STYLE_ID = "weapp-web-button-style";
+var NAV_BUTTON_TAG = "weapp-button";
+var BaseElement = globalThis.HTMLElement ?? class {
+};
+var formConfig = { ...DEFAULT_FORM_CONFIG };
+var styleInjected = false;
+var BUTTON_STYLE = `
+weapp-button {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+weapp-button.weapp-btn--mini {
+  display: inline-block;
+  width: auto;
+}
+
+weapp-button .weapp-btn {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid #d7d7d7;
+  padding: 0 16px;
+  height: 44px;
+  line-height: 44px;
+  font-size: 17px;
+  font-weight: 400;
+  background-color: #f8f8f8;
+  color: #000000;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+weapp-button.weapp-btn--primary .weapp-btn {
+  background-color: #07c160;
+  border-color: #07c160;
+  color: #ffffff;
+}
+
+weapp-button.weapp-btn--warn .weapp-btn {
+  background-color: #e64340;
+  border-color: #e64340;
+  color: #ffffff;
+}
+
+weapp-button.weapp-btn--plain .weapp-btn {
+  background-color: transparent;
+}
+
+weapp-button.weapp-btn--plain.weapp-btn--default .weapp-btn {
+  border-color: #353535;
+  color: #353535;
+}
+
+weapp-button.weapp-btn--plain.weapp-btn--primary .weapp-btn {
+  border-color: #07c160;
+  color: #07c160;
+}
+
+weapp-button.weapp-btn--plain.weapp-btn--warn .weapp-btn {
+  border-color: #e64340;
+  color: #e64340;
+}
+
+weapp-button.weapp-btn--loading .weapp-btn,
+weapp-button.weapp-btn--disabled .weapp-btn {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+weapp-button.button-hover .weapp-btn {
+  opacity: 0.7;
+}
+
+weapp-button.button-hover.weapp-btn--plain .weapp-btn {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+weapp-button.weapp-btn--mini .weapp-btn {
+  height: 28px;
+  line-height: 28px;
+  font-size: 13px;
+  padding: 0 12px;
+  border-radius: 4px;
+}
+
+weapp-button .weapp-btn__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+}
+
+weapp-button .weapp-btn__loading {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: weapp-btn-spin 0.8s linear infinite;
+}
+
+weapp-button .weapp-btn__loading[hidden] {
+  display: none;
+}
+
+@keyframes weapp-btn-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+`;
+function ensureButtonStyle() {
+  if (styleInjected) {
+    return;
+  }
+  injectStyle(BUTTON_STYLE, BUTTON_STYLE_ID);
+  styleInjected = true;
+}
+function toBoolean(value) {
+  if (value === null) {
+    return false;
+  }
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "" || normalized === "true") {
+    return true;
+  }
+  return normalized !== "false" && normalized !== "0";
+}
+function parseNumber(value, fallback) {
+  if (value === null || value === "") {
+    return fallback;
+  }
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : fallback;
+}
+function isDisabled(element) {
+  return toBoolean(element.getAttribute("disabled")) || toBoolean(element.getAttribute("loading"));
+}
+function normalizeType(value) {
+  if (!value) {
+    return "default";
+  }
+  const normalized = value.toLowerCase();
+  if (normalized === "primary" || normalized === "warn") {
+    return normalized;
+  }
+  return "default";
+}
+function getHoverClass(element) {
+  const hoverClass = element.getAttribute("hover-class");
+  if (!hoverClass) {
+    return DEFAULT_HOVER_CLASS;
+  }
+  if (hoverClass === "none") {
+    return "";
+  }
+  return hoverClass;
+}
+function isInternalNode(node) {
+  return node instanceof HTMLElement && node.dataset?.weappInternal === "true";
+}
+function collectFormValues(form) {
+  const values = {};
+  const appendValue = (name, value, multiple = false) => {
+    if (multiple) {
+      if (!Array.isArray(values[name])) {
+        values[name] = values[name] === void 0 ? [] : [values[name]];
+      }
+      values[name].push(value);
+      return;
+    }
+    values[name] = value;
+  };
+  const formElements = Array.from(form.elements ?? []);
+  for (const element of formElements) {
+    if (!(element instanceof HTMLElement)) {
+      continue;
+    }
+    const name = element.getAttribute("name")?.trim();
+    if (!name) {
+      continue;
+    }
+    const disabled = "disabled" in element ? element.disabled : toBoolean(element.getAttribute("disabled"));
+    if (disabled) {
+      continue;
+    }
+    if (element instanceof HTMLInputElement) {
+      const type = element.type?.toLowerCase();
+      if (type === "checkbox") {
+        if (element.checked) {
+          appendValue(name, element.value, true);
+        }
+        continue;
+      }
+      if (type === "radio") {
+        if (element.checked) {
+          appendValue(name, element.value);
+        }
+        continue;
+      }
+      appendValue(name, element.value);
+      continue;
+    }
+    if (element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+      appendValue(name, element.value);
+      continue;
+    }
+  }
+  const customControls = form.querySelectorAll("switch, checkbox, radio, picker, slider, weapp-switch, weapp-checkbox, weapp-radio, weapp-picker, weapp-slider");
+  for (const element of Array.from(customControls)) {
+    const name = element.getAttribute("name")?.trim();
+    if (!name) {
+      continue;
+    }
+    const disabled = toBoolean(element.getAttribute("disabled"));
+    if (disabled) {
+      continue;
+    }
+    const tag = element.tagName.toLowerCase();
+    const rawValue = element.value ?? element.getAttribute("value");
+    if (tag.includes("checkbox")) {
+      const checked = element.checked ?? toBoolean(element.getAttribute("checked"));
+      if (checked) {
+        appendValue(name, rawValue ?? true, true);
+      }
+      continue;
+    }
+    if (tag.includes("radio")) {
+      const checked = element.checked ?? toBoolean(element.getAttribute("checked"));
+      if (checked) {
+        appendValue(name, rawValue ?? true);
+      }
+      continue;
+    }
+    if (tag.includes("switch")) {
+      const checked = element.checked ?? toBoolean(element.getAttribute("checked"));
+      appendValue(name, checked);
+      continue;
+    }
+    appendValue(name, rawValue ?? "");
+  }
+  return values;
+}
+var WeappButton = class extends BaseElement {
+  static get observedAttributes() {
+    return [
+      "type",
+      "plain",
+      "size",
+      "loading",
+      "disabled",
+      "hover-class",
+      "hover-start-time",
+      "hover-stay-time",
+      "form-type",
+      "open-type"
+    ];
+  }
+  #button;
+  #content;
+  #text;
+  #loading;
+  #hoverTimer;
+  #hoverRemoveTimer;
+  #lastTouchTime = 0;
+  #observer;
+  connectedCallback() {
+    ensureButtonStyle();
+    this.#ensureStructure();
+    this.#applyState();
+    this.#bindEvents();
+  }
+  disconnectedCallback() {
+    this.#clearHoverTimers();
+    this.#observer?.disconnect();
+    this.#observer = void 0;
+  }
+  attributeChangedCallback() {
+    this.#applyState();
+  }
+  #ensureStructure() {
+    if (this.#button) {
+      return;
+    }
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "weapp-btn";
+    button.dataset.weappInternal = "true";
+    const content = document.createElement("span");
+    content.className = "weapp-btn__content";
+    content.dataset.weappInternal = "true";
+    const loading = document.createElement("span");
+    loading.className = "weapp-btn__loading";
+    loading.dataset.weappInternal = "true";
+    loading.setAttribute("hidden", "");
+    const text = document.createElement("span");
+    text.className = "weapp-btn__text";
+    text.dataset.weappInternal = "true";
+    content.append(loading, text);
+    button.append(content);
+    const existing = Array.from(this.childNodes).filter((node) => !isInternalNode(node));
+    for (const node of existing) {
+      text.appendChild(node);
+    }
+    this.appendChild(button);
+    this.#button = button;
+    this.#content = content;
+    this.#text = text;
+    this.#loading = loading;
+    if (typeof MutationObserver !== "undefined") {
+      this.#observer = new MutationObserver((records) => {
+        if (!this.#text) {
+          return;
+        }
+        for (const record of records) {
+          for (const node of Array.from(record.addedNodes)) {
+            if (isInternalNode(node)) {
+              continue;
+            }
+            if (node === this.#button) {
+              continue;
+            }
+            this.#text.appendChild(node);
+          }
+        }
+      });
+      this.#observer.observe(this, { childList: true });
+    }
+  }
+  #applyState() {
+    if (!this.#button || !this.#loading) {
+      return;
+    }
+    const type = normalizeType(this.getAttribute("type"));
+    const plain = toBoolean(this.getAttribute("plain"));
+    const size = (this.getAttribute("size") ?? "default").toLowerCase();
+    const loading = toBoolean(this.getAttribute("loading"));
+    const disabled = toBoolean(this.getAttribute("disabled"));
+    const openType = this.getAttribute("open-type");
+    this.classList.toggle("weapp-btn--primary", type === "primary");
+    this.classList.toggle("weapp-btn--warn", type === "warn");
+    this.classList.toggle("weapp-btn--default", type === "default");
+    this.classList.toggle("weapp-btn--plain", plain);
+    this.classList.toggle("weapp-btn--mini", size === "mini");
+    this.classList.toggle("weapp-btn--loading", loading);
+    this.classList.toggle("weapp-btn--disabled", disabled);
+    if (openType) {
+      const openTypeClass = `weapp-btn--open-type-${openType}`;
+      for (const className of Array.from(this.classList)) {
+        if (className.startsWith("weapp-btn--open-type-") && className !== openTypeClass) {
+          this.classList.remove(className);
+        }
+      }
+      this.classList.add(openTypeClass);
+    } else {
+      for (const className of Array.from(this.classList)) {
+        if (className.startsWith("weapp-btn--open-type-")) {
+          this.classList.remove(className);
+        }
+      }
+    }
+    const locked = disabled || loading;
+    this.#button.disabled = locked;
+    if (locked) {
+      this.#button.setAttribute("aria-disabled", "true");
+    } else {
+      this.#button.removeAttribute("aria-disabled");
+    }
+    this.#loading.toggleAttribute("hidden", !loading);
+  }
+  #bindEvents() {
+    if (this.__weappButtonBound) {
+      return;
+    }
+    ;
+    this.__weappButtonBound = true;
+    this.addEventListener("click", this.#handleClickCapture, true);
+    this.addEventListener("click", this.#handleClick);
+    this.addEventListener("touchstart", this.#handlePressStart, { passive: true });
+    this.addEventListener("mousedown", this.#handlePressStart);
+    this.addEventListener("touchend", this.#handlePressEnd);
+    this.addEventListener("touchcancel", this.#handlePressEnd);
+    this.addEventListener("mouseup", this.#handlePressEnd);
+    this.addEventListener("mouseleave", this.#handlePressEnd);
+  }
+  #handleClickCapture = (event) => {
+    if (isDisabled(this)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  };
+  #handleClick = (event) => {
+    if (isDisabled(this)) {
+      return;
+    }
+    const formType = this.getAttribute("form-type");
+    if (!formType) {
+      return;
+    }
+    const form = this.closest("form");
+    if (!form) {
+      return;
+    }
+    if (formType === "submit") {
+      const detail = { value: collectFormValues(form) };
+      const submitEvent = new CustomEvent("submit", {
+        detail,
+        bubbles: true,
+        cancelable: true
+      });
+      const shouldSubmit = form.dispatchEvent(submitEvent);
+      if (shouldSubmit && !formConfig.preventDefault) {
+        form.submit();
+      }
+      event.preventDefault();
+      return;
+    }
+    if (formType === "reset") {
+      form.reset();
+      event.preventDefault();
+    }
+  };
+  #handlePressStart = (event) => {
+    if (isDisabled(this)) {
+      return;
+    }
+    const hoverClass = getHoverClass(this);
+    if (!hoverClass) {
+      return;
+    }
+    if (event.type === "touchstart") {
+      this.#lastTouchTime = Date.now();
+    }
+    if (event.type === "mousedown" && Date.now() - this.#lastTouchTime < 400) {
+      return;
+    }
+    const startTime = parseNumber(this.getAttribute("hover-start-time"), DEFAULT_HOVER_START);
+    this.#clearHoverTimers();
+    this.#hoverTimer = globalThis.setTimeout(() => {
+      this.classList.add(hoverClass);
+    }, startTime);
+  };
+  #handlePressEnd = (event) => {
+    const hoverClass = getHoverClass(this);
+    if (!hoverClass) {
+      return;
+    }
+    if (event.type === "mouseup" && Date.now() - this.#lastTouchTime < 400) {
+      return;
+    }
+    const stayTime = parseNumber(this.getAttribute("hover-stay-time"), DEFAULT_HOVER_STAY);
+    if (this.#hoverTimer) {
+      clearTimeout(this.#hoverTimer);
+      this.#hoverTimer = void 0;
+    }
+    if (this.classList.contains(hoverClass)) {
+      this.#hoverRemoveTimer = globalThis.setTimeout(() => {
+        this.classList.remove(hoverClass);
+      }, stayTime);
+    }
+  };
+  #clearHoverTimers() {
+    if (this.#hoverTimer) {
+      clearTimeout(this.#hoverTimer);
+      this.#hoverTimer = void 0;
+    }
+    if (this.#hoverRemoveTimer) {
+      clearTimeout(this.#hoverRemoveTimer);
+      this.#hoverRemoveTimer = void 0;
+    }
+  }
+};
+function ensureButtonDefined() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  if (!customElements.get(NAV_BUTTON_TAG)) {
+    customElements.define(NAV_BUTTON_TAG, WeappButton);
+  }
+}
+function setButtonFormConfig(next) {
+  formConfig = {
+    ...formConfig,
+    ...next
+  };
+}
+
+// src/runtime/component.ts
+import { html, LitElement } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+// src/runtime/renderContext.ts
+var expressionCache = /* @__PURE__ */ new Map();
+function createScope(initial) {
+  return Object.assign(/* @__PURE__ */ Object.create(null), initial ?? {});
+}
+function createChildScope(parent, locals) {
+  return Object.assign(Object.create(parent), locals ?? {});
+}
+function evaluateExpression(expression, scope) {
+  if (!expression) {
+    return void 0;
+  }
+  const trimmed = expression.trim();
+  if (!trimmed) {
+    return void 0;
+  }
+  let evaluator = expressionCache.get(trimmed);
+  if (!evaluator) {
+    try {
+      evaluator = new Function("scope", `with(scope){ return (${trimmed}); }`);
+    } catch (error) {
+      const reason = error instanceof Error ? error.message : String(error);
+      throw new SyntaxError(`[@weapp-vite/web] \u65E0\u6CD5\u89E3\u6790\u8868\u8FBE\u5F0F "${trimmed}": ${reason}`);
+    }
+    expressionCache.set(trimmed, evaluator);
+  }
+  try {
+    return evaluator(scope);
+  } catch {
+    return void 0;
+  }
+}
+function normalizeList(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (value == null) {
+    return [];
+  }
+  if (typeof value === "number" && Number.isFinite(value)) {
+    const length = Math.max(0, Math.floor(value));
+    return Array.from({ length }, (_, index) => index);
+  }
+  if (typeof value === "object") {
+    return Object.values(value);
+  }
+  return [];
+}
+function normalizeKey(rawKey, item, index, scope) {
+  const key = rawKey?.trim();
+  if (!key) {
+    if (item != null && (typeof item === "string" || typeof item === "number" || typeof item === "boolean")) {
+      return item;
+    }
+    return index;
+  }
+  if (key === "*this") {
+    return item;
+  }
+  if (key.includes("{{") && key.includes("}}")) {
+    const expr = key.replace(/^\{\{\s*/, "").replace(/\s*\}\}$/, "");
+    return evaluateExpression(expr, scope);
+  }
+  if (!/[\.\[\(\)]/.test(key) && item && typeof item === "object" && key in item) {
+    return item[key];
+  }
+  return evaluateExpression(key, scope);
+}
+function createEventHandler(instance, methods, eventName, handlerRef, flags) {
+  const handler = typeof handlerRef === "function" ? handlerRef : methods[handlerRef] ?? instance[handlerRef];
+  if (typeof handler !== "function") {
+    return () => {
+    };
+  }
+  return (nativeEvent) => {
+    if (flags?.catch) {
+      nativeEvent.stopPropagation();
+    }
+    const target = nativeEvent.target;
+    const currentTarget = nativeEvent.currentTarget;
+    const dataset = currentTarget?.dataset ?? {};
+    const syntheticEvent = {
+      type: eventName,
+      timeStamp: nativeEvent.timeStamp,
+      detail: nativeEvent.detail ?? nativeEvent.data ?? void 0,
+      target: {
+        dataset: target?.dataset ?? dataset
+      },
+      currentTarget: {
+        dataset
+      },
+      originalEvent: nativeEvent
+    };
+    handler.call(instance, syntheticEvent);
+  };
+}
+function createWxsModule(code, id, requireMap) {
+  const module = { exports: {} };
+  const exports = module.exports;
+  const getRegExp = (pattern, flags) => new RegExp(pattern, flags);
+  const getDate = (value) => value == null ? /* @__PURE__ */ new Date() : new Date(value);
+  const require2 = (request) => requireMap?.[request];
+  try {
+    const runner = new Function("module", "exports", "require", "getRegExp", "getDate", code);
+    runner(module, exports, require2, getRegExp, getDate);
+  } catch (error) {
+    const reason = error instanceof Error ? error.message : String(error);
+    throw new Error(`[@weapp-vite/web] WXS \u6267\u884C\u5931\u8D25: ${id} ${reason}`);
+  }
+  return module.exports;
+}
+function createRenderContext(instance, methods) {
+  return {
+    instance,
+    eval: (expression, scope, wxs) => {
+      const baseScope = scope ?? createScope();
+      const renderScope = wxs ? createChildScope(baseScope, wxs) : baseScope;
+      return evaluateExpression(expression, renderScope);
+    },
+    createScope: (parent, locals) => createChildScope(parent, locals),
+    mergeScope: (parent, data) => {
+      const baseScope = parent ?? createScope();
+      if (!data || typeof data !== "object") {
+        return baseScope;
+      }
+      return createChildScope(baseScope, data);
+    },
+    normalizeList,
+    key: (rawKey, item, index, scope, wxs) => {
+      const baseScope = scope ?? createScope();
+      const renderScope = wxs ? createChildScope(baseScope, wxs) : baseScope;
+      return normalizeKey(rawKey, item, index, renderScope);
+    },
+    renderTemplate: (templates, name, scope, ctx) => {
+      if (!name) {
+        return "";
+      }
+      const template = templates?.[name];
+      if (typeof template !== "function") {
+        return "";
+      }
+      return template(scope, ctx);
+    },
+    event: (eventName, handlerName, _scope, _wxs, flags) => {
+      if (typeof handlerName === "function") {
+        return createEventHandler(instance, methods, eventName, handlerName, flags);
+      }
+      const resolvedHandler = String(handlerName ?? "");
+      return createEventHandler(instance, methods, eventName, resolvedHandler, flags);
+    },
+    createWxsModule
+  };
+}
+
 // src/runtime/component.ts
-var EVENT_TO_DOM = {
-  tap: "click",
-  input: "input",
-  change: "change",
-  submit: "submit",
-  blur: "blur",
-  focus: "focus"
+var supportsLit = typeof document !== "undefined" && typeof document.createComment === "function" && typeof document.createTreeWalker === "function";
+var FallbackElement = class {
 };
+function bindRuntimeEvents(root, methods, instance) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) {
+    const element = walker.currentNode;
+    for (const attribute of element.getAttributeNames()) {
+      if (!attribute.startsWith("data-wx-on-")) {
+        continue;
+      }
+      const handlerName = element.getAttribute(attribute);
+      if (!handlerName) {
+        continue;
+      }
+      const handler = methods[handlerName];
+      if (!handler) {
+        continue;
+      }
+      const eventName = attribute.slice("data-wx-on-".length);
+      element.addEventListener(eventName, (nativeEvent) => {
+        const dataset = { ...element.dataset };
+        const syntheticEvent = {
+          type: eventName,
+          timeStamp: nativeEvent.timeStamp,
+          detail: nativeEvent.detail ?? nativeEvent.data ?? void 0,
+          target: {
+            dataset
+          },
+          currentTarget: {
+            dataset
+          },
+          originalEvent: nativeEvent
+        };
+        handler.call(instance, syntheticEvent);
+      });
+    }
+  }
+}
 function hyphenate(name) {
   return name.replace(/([A-Z])/g, (_, char) => `-${char.toLowerCase()}`);
 }
@@ -57,60 +788,26 @@ function coerceValue(value, type) {
   }
   return value;
 }
-function bindRuntimeEvents(root, methods, instance) {
-  if (typeof document === "undefined") {
-    return;
-  }
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
-  while (walker.nextNode()) {
-    const element = walker.currentNode;
-    for (const attribute of element.getAttributeNames()) {
-      if (!attribute.startsWith("data-wx-on-")) {
-        continue;
-      }
-      const handlerName = element.getAttribute(attribute);
-      if (!handlerName) {
-        continue;
-      }
-      const eventName = attribute.slice("data-wx-on-".length);
-      const handler = methods[handlerName];
-      if (!handler) {
-        continue;
-      }
-      const domEvent = EVENT_TO_DOM[eventName] ?? eventName;
-      element.addEventListener(domEvent, (nativeEvent) => {
-        const dataset = { ...element.dataset };
-        const syntheticEvent = {
-          type: eventName,
-          timeStamp: nativeEvent.timeStamp,
-          detail: nativeEvent.detail ?? nativeEvent.data ?? void 0,
-          target: {
-            dataset
-          },
-          currentTarget: {
-            dataset
-          },
-          originalEvent: nativeEvent
-        };
-        handler.call(instance, syntheticEvent);
-      });
-    }
-  }
-}
 function defineComponent(tagName, options) {
   if (!options || typeof options !== "object") {
     throw new TypeError("[@weapp-vite/web] defineComponent \u9700\u8981\u63D0\u4F9B\u914D\u7F6E\u5BF9\u8C61\u3002");
   }
-  if (customElements.get(tagName)) {
-    return customElements.get(tagName);
+  const existing = customElements.get(tagName);
+  if (existing) {
+    existing.__weappUpdate?.(options);
+    return existing;
   }
+  const BaseElement3 = supportsLit ? LitElement : globalThis.HTMLElement ?? FallbackElement;
   const { template, style = "", component = {} } = options;
   if (!template) {
     throw new Error("[@weapp-vite/web] defineComponent \u9700\u8981\u63D0\u4F9B\u6A21\u677F\u6E32\u67D3\u51FD\u6570\u3002");
   }
-  const propertyEntries = Object.entries(component.properties ?? {});
-  const observedAttributes = propertyEntries.map(([name]) => hyphenate(name));
-  const defaultPropertyValues = propertyEntries.reduce((acc, [name, prop]) => {
+  let templateRef = template;
+  let styleRef = style;
+  let componentRef = component;
+  let propertyEntries = Object.entries(componentRef.properties ?? {});
+  let observedAttributes = propertyEntries.map(([name]) => hyphenate(name));
+  let defaultPropertyValues = propertyEntries.reduce((acc, [name, prop]) => {
     if (Object.prototype.hasOwnProperty.call(prop, "value")) {
       acc[name] = cloneValue(prop.value);
     } else {
@@ -118,38 +815,26 @@ function defineComponent(tagName, options) {
     }
     return acc;
   }, {});
-  const lifetimes = component.lifetimes ?? {};
-  class WeappWebComponent extends HTMLElement {
+  let lifetimes = componentRef.lifetimes ?? {};
+  const instances = /* @__PURE__ */ new Set();
+  class WeappWebComponent extends BaseElement3 {
     static get observedAttributes() {
       return observedAttributes;
     }
     #state;
     #properties;
     #methods;
-    #shadow;
-    #contentRoot;
-    #styleElement;
     #isMounted = false;
+    #renderContext = createRenderContext(this, {});
+    #usesLegacyTemplate = false;
+    #readyFired = false;
     constructor() {
       super();
-      const dataOption = typeof component.data === "function" ? component.data() : component.data ?? {};
+      const dataOption = typeof componentRef.data === "function" ? componentRef.data() : componentRef.data ?? {};
       this.#properties = { ...defaultPropertyValues };
       this.#state = { ...cloneValue(this.#properties), ...cloneValue(dataOption) };
-      this.#shadow = this.attachShadow({ mode: "open" });
-      if (style) {
-        this.#styleElement = document.createElement("style");
-        this.#styleElement.textContent = style;
-        this.#shadow.append(this.#styleElement);
-      }
-      this.#contentRoot = document.createElement("div");
-      this.#contentRoot.setAttribute("part", "content");
-      this.#shadow.append(this.#contentRoot);
       this.#methods = {};
-      for (const [name, fn] of Object.entries(component.methods ?? {})) {
-        if (typeof fn === "function") {
-          this.#methods[name] = fn.bind(this);
-        }
-      }
+      this.#syncMethods(componentRef.methods ?? {});
       for (const [propName] of propertyEntries) {
         Object.defineProperty(this, propName, {
           configurable: true,
@@ -160,6 +845,15 @@ function defineComponent(tagName, options) {
           }
         });
       }
+      if (!supportsLit) {
+        const host = this;
+        if (!host.shadowRoot && typeof host.attachShadow === "function") {
+          host.attachShadow({ mode: "open" });
+        }
+        ;
+        this.renderRoot = host.shadowRoot ?? host;
+      }
+      instances.add(this);
       lifetimes.created?.call(this);
     }
     get data() {
@@ -179,26 +873,76 @@ function defineComponent(tagName, options) {
       }));
     }
     connectedCallback() {
+      const superConnected = BaseElement3.prototype.connectedCallback;
+      if (supportsLit && typeof superConnected === "function") {
+        superConnected.call(this);
+      }
       this.#applyAttributes();
-      this.#render();
       lifetimes.attached?.call(this);
       this.#isMounted = true;
-      lifetimes.ready?.call(this);
+      if (!supportsLit) {
+        this.#renderLegacy();
+      }
     }
     disconnectedCallback() {
+      const superDisconnected = BaseElement3.prototype.disconnectedCallback;
+      if (supportsLit && typeof superDisconnected === "function") {
+        superDisconnected.call(this);
+      }
       this.#isMounted = false;
+      instances.delete(this);
       lifetimes.detached?.call(this);
     }
-    attributeChangedCallback(attrName, _oldValue, newValue) {
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      const superAttributeChanged = BaseElement3.prototype.attributeChangedCallback;
+      if (supportsLit && typeof superAttributeChanged === "function") {
+        superAttributeChanged.call(this, attrName, oldValue, newValue);
+      }
       const propName = toCamelCase(attrName);
       if (!Object.prototype.hasOwnProperty.call(this.#properties, propName)) {
         return;
       }
-      const propOption = component.properties?.[propName];
+      const propOption = componentRef.properties?.[propName];
       const coerced = coerceValue(newValue, propOption?.type);
       this.#setProperty(propName, coerced);
     }
+    firstUpdated() {
+      lifetimes.ready?.call(this);
+      this.#readyFired = true;
+    }
+    updated() {
+      if (this.#usesLegacyTemplate) {
+        const renderRoot = this.renderRoot ?? this.shadowRoot ?? this;
+        bindRuntimeEvents(renderRoot, this.#methods, this);
+      }
+    }
+    render() {
+      const result = templateRef(this.#state, this.#renderContext);
+      const styleMarkup = styleRef ? html`<style>${styleRef}</style>` : null;
+      if (typeof result === "string") {
+        this.#usesLegacyTemplate = true;
+        return html`${styleMarkup}${unsafeHTML(result)}`;
+      }
+      this.#usesLegacyTemplate = false;
+      if (styleMarkup) {
+        return html`${styleMarkup}${result}`;
+      }
+      return result;
+    }
+    requestUpdate(name, oldValue, options2) {
+      const superRequestUpdate = BaseElement3.prototype.requestUpdate;
+      if (supportsLit && typeof superRequestUpdate === "function") {
+        return superRequestUpdate.call(this, name, oldValue, options2);
+      }
+      if (this.#isMounted) {
+        this.#renderLegacy();
+      }
+      return void 0;
+    }
     #applyAttributes() {
+      if (!this.attributes || typeof this.attributes[Symbol.iterator] !== "function") {
+        return;
+      }
       for (const attr of this.attributes) {
         this.attributeChangedCallback(attr.name, null, attr.value);
       }
@@ -214,17 +958,17 @@ function defineComponent(tagName, options) {
           this.#state[key] = value;
           if (Object.prototype.hasOwnProperty.call(this.#properties, key)) {
             this.#properties[key] = value;
-            component.properties?.[key]?.observer?.call(this, value, oldValue);
+            componentRef.properties?.[key]?.observer?.call(this, value, oldValue);
           }
           changed = true;
         }
       }
       if (changed) {
-        this.#render();
+        this.requestUpdate();
       }
     }
     #setProperty(name, value) {
-      const propOption = component.properties?.[name];
+      const propOption = componentRef.properties?.[name];
       const coerced = coerceValue(value, propOption?.type);
       const oldValue = this.#properties[name];
       if (oldValue === coerced) {
@@ -233,24 +977,380 @@ function defineComponent(tagName, options) {
       this.#properties[name] = coerced;
       this.#state[name] = coerced;
       if (this.#isMounted) {
-        this.#render();
+        this.requestUpdate();
       }
       propOption?.observer?.call(this, coerced, oldValue);
     }
-    #render() {
-      const html = template(this.#state);
-      if (!this.#contentRoot) {
-        return;
+    #syncMethods(nextMethods) {
+      const resolved = nextMethods ?? {};
+      const bound = {};
+      for (const [name, fn] of Object.entries(resolved)) {
+        if (typeof fn === "function") {
+          bound[name] = fn.bind(this);
+        }
+      }
+      for (const key of Object.keys(this.#methods)) {
+        if (!(key in bound)) {
+          delete this.#methods[key];
+        }
+      }
+      for (const [key, fn] of Object.entries(bound)) {
+        this.#methods[key] = fn;
+      }
+      this.#renderContext = createRenderContext(this, this.#methods);
+    }
+    __weappSync(nextMethods) {
+      this.#syncMethods(nextMethods);
+      this.requestUpdate();
+    }
+    #renderLegacy() {
+      const result = templateRef(this.#state, this.#renderContext);
+      const root = this.renderRoot ?? this.shadowRoot ?? this;
+      const styleMarkup = styleRef ? `<style>${styleRef}</style>` : "";
+      if (typeof result === "string") {
+        root.innerHTML = `${styleMarkup}${result}`;
+        bindRuntimeEvents(root, this.#methods, this);
+      } else if (result == null) {
+        root.innerHTML = styleMarkup;
+      } else {
+        root.innerHTML = `${styleMarkup}${String(result)}`;
+      }
+      if (!this.#readyFired) {
+        lifetimes.ready?.call(this);
+        this.#readyFired = true;
       }
-      this.#contentRoot.innerHTML = html;
-      bindRuntimeEvents(this.#contentRoot, this.#methods, this);
     }
   }
+  const updateComponent = (nextOptions) => {
+    if (!nextOptions?.template) {
+      return;
+    }
+    templateRef = nextOptions.template;
+    styleRef = nextOptions.style ?? "";
+    componentRef = nextOptions.component ?? {};
+    lifetimes = componentRef.lifetimes ?? {};
+    propertyEntries = Object.entries(componentRef.properties ?? {});
+    observedAttributes = propertyEntries.map(([name]) => hyphenate(name));
+    defaultPropertyValues = propertyEntries.reduce((acc, [name, prop]) => {
+      if (Object.prototype.hasOwnProperty.call(prop, "value")) {
+        acc[name] = cloneValue(prop.value);
+      } else {
+        acc[name] = void 0;
+      }
+      return acc;
+    }, {});
+    const nextMethods = componentRef.methods ?? {};
+    for (const instance of instances) {
+      instance.__weappSync(nextMethods);
+    }
+  };
+  WeappWebComponent.__weappUpdate = updateComponent;
   customElements.define(tagName, WeappWebComponent);
   return WeappWebComponent;
 }
 
+// src/runtime/navigationBar.ts
+var NAVIGATION_BAR_TAG = "weapp-navigation-bar";
+var BaseElement2 = globalThis.HTMLElement ?? class {
+};
+var navigationBarInstances = /* @__PURE__ */ new Set();
+var navigationBarMetrics = {};
+var NAVBAR_STYLE = `
+:host {
+  --weapp-status-bar-height: 20px;
+  --weapp-nav-content-height: 44px;
+  --weapp-nav-height: calc(var(--weapp-status-bar-height) + var(--weapp-nav-content-height));
+  --weapp-nav-bg: #ffffff;
+  --weapp-nav-color: #000000;
+  --weapp-nav-transition-duration: 0ms;
+  --weapp-nav-transition-easing: ease;
+  display: block;
+  position: relative;
+  z-index: 999;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.weapp-nav__spacer {
+  height: var(--weapp-nav-height);
+}
+
+.weapp-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--weapp-nav-height);
+  display: flex;
+  flex-direction: column;
+  background: var(--weapp-nav-bg);
+  color: var(--weapp-nav-color);
+  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1);
+  transition:
+    background-color var(--weapp-nav-transition-duration) var(--weapp-nav-transition-easing),
+    color var(--weapp-nav-transition-duration) var(--weapp-nav-transition-easing);
+}
+
+.weapp-nav--transparent {
+  box-shadow: none;
+}
+
+.weapp-nav__status {
+  height: var(--weapp-status-bar-height);
+}
+
+.weapp-nav__content {
+  height: var(--weapp-nav-content-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 0 12px;
+  box-sizing: border-box;
+  font-size: 17px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.weapp-nav__left,
+.weapp-nav__right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 88px;
+  display: flex;
+  align-items: center;
+}
+
+.weapp-nav__left {
+  left: 12px;
+}
+
+.weapp-nav__right {
+  right: 12px;
+  justify-content: flex-end;
+}
+
+.weapp-nav__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 70%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.weapp-nav__loading {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: weapp-nav-spin 0.8s linear infinite;
+}
+
+.weapp-nav__loading[hidden] {
+  display: none;
+}
+
+@keyframes weapp-nav-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+`;
+function isIOS() {
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+  return /iphone|ipad|ipod/i.test(navigator.userAgent);
+}
+function getDefaultHeights() {
+  if (isIOS()) {
+    return { statusBarHeight: 20, navContentHeight: 44 };
+  }
+  return { statusBarHeight: 24, navContentHeight: 48 };
+}
+function readSafeAreaTop() {
+  if (typeof document === "undefined" || !document.body) {
+    return 0;
+  }
+  const probe = document.createElement("div");
+  probe.style.cssText = [
+    "position: absolute",
+    "top: 0",
+    "height: env(safe-area-inset-top)",
+    "height: constant(safe-area-inset-top)",
+    "pointer-events: none",
+    "visibility: hidden"
+  ].join(";");
+  document.body.appendChild(probe);
+  const height = Math.max(0, probe.getBoundingClientRect().height);
+  probe.remove();
+  return height;
+}
+function resolveNavigationBarMetrics() {
+  const defaults = getDefaultHeights();
+  const safeAreaTop = navigationBarMetrics.safeAreaTop !== void 0 ? navigationBarMetrics.safeAreaTop : readSafeAreaTop();
+  const statusBarHeight = navigationBarMetrics.statusBarHeight !== void 0 ? navigationBarMetrics.statusBarHeight : safeAreaTop > 0 ? safeAreaTop : defaults.statusBarHeight;
+  const navContentHeight = navigationBarMetrics.navContentHeight !== void 0 ? navigationBarMetrics.navContentHeight : defaults.navContentHeight;
+  return {
+    safeAreaTop,
+    statusBarHeight,
+    navContentHeight,
+    navHeight: statusBarHeight + navContentHeight
+  };
+}
+function isTransparentColor(value) {
+  if (!value) {
+    return false;
+  }
+  const normalized = value.trim().toLowerCase();
+  return normalized === "transparent" || normalized === "rgba(0,0,0,0)" || normalized === "rgba(0, 0, 0, 0)" || normalized === "hsla(0,0%,0%,0)";
+}
+function setNavigationBarMetrics(next) {
+  navigationBarMetrics = { ...navigationBarMetrics, ...next };
+  for (const instance of navigationBarInstances) {
+    instance.applyMetrics();
+  }
+}
+var WeappNavigationBar = class extends BaseElement2 {
+  static get observedAttributes() {
+    return ["title", "background-color", "text-style", "front-color", "loading"];
+  }
+  #nav;
+  #title;
+  #loading;
+  #resizeHandler;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    if (this.shadowRoot && !this.shadowRoot.hasChildNodes()) {
+      this.#renderShell();
+    }
+    navigationBarInstances.add(this);
+    this.applyMetrics();
+    this.applyAppearance();
+    this.#bindResize();
+  }
+  disconnectedCallback() {
+    navigationBarInstances.delete(this);
+    if (this.#resizeHandler) {
+      const target = typeof window !== "undefined" ? window.visualViewport ?? window : void 0;
+      target?.removeEventListener("resize", this.#resizeHandler);
+      this.#resizeHandler = void 0;
+    }
+  }
+  attributeChangedCallback() {
+    this.applyAppearance();
+  }
+  applyMetrics() {
+    const metrics = resolveNavigationBarMetrics();
+    this.style.setProperty("--weapp-status-bar-height", `${metrics.statusBarHeight}px`);
+    this.style.setProperty("--weapp-nav-content-height", `${metrics.navContentHeight}px`);
+    this.style.setProperty("--weapp-nav-height", `${metrics.navHeight}px`);
+  }
+  applyAppearance() {
+    if (!this.#nav || !this.#title || !this.#loading) {
+      return;
+    }
+    const title = this.getAttribute("title") ?? "";
+    this.#title.textContent = title;
+    const background = this.getAttribute("background-color") ?? "#ffffff";
+    const frontColor = this.getAttribute("front-color");
+    const textStyle = (this.getAttribute("text-style") ?? "").toLowerCase();
+    const color = frontColor || (textStyle === "white" ? "#ffffff" : "#000000");
+    const loadingAttr = this.getAttribute("loading");
+    const loading = loadingAttr !== null && loadingAttr !== "false" && loadingAttr !== "0";
+    this.style.setProperty("--weapp-nav-bg", background);
+    this.style.setProperty("--weapp-nav-color", color);
+    this.#loading.toggleAttribute("hidden", !loading);
+    this.#nav.classList.toggle("weapp-nav--transparent", isTransparentColor(background));
+  }
+  #bindResize() {
+    if (this.#resizeHandler || typeof window === "undefined") {
+      return;
+    }
+    const target = window.visualViewport ?? window;
+    this.#resizeHandler = () => {
+      this.applyMetrics();
+    };
+    target.addEventListener("resize", this.#resizeHandler);
+  }
+  #renderShell() {
+    const root = this.shadowRoot;
+    root.innerHTML = "";
+    const style = document.createElement("style");
+    style.textContent = NAVBAR_STYLE;
+    const spacer = document.createElement("div");
+    spacer.className = "weapp-nav__spacer";
+    const nav = document.createElement("div");
+    nav.className = "weapp-nav";
+    const status = document.createElement("div");
+    status.className = "weapp-nav__status";
+    const content = document.createElement("div");
+    content.className = "weapp-nav__content";
+    const left = document.createElement("div");
+    left.className = "weapp-nav__left";
+    const right = document.createElement("div");
+    right.className = "weapp-nav__right";
+    const title = document.createElement("span");
+    title.className = "weapp-nav__title";
+    const loading = document.createElement("span");
+    loading.className = "weapp-nav__loading";
+    loading.setAttribute("hidden", "");
+    const titleText = document.createElement("span");
+    titleText.className = "weapp-nav__title-text";
+    title.append(loading, titleText);
+    content.append(left, title, right);
+    nav.append(status, content);
+    root.append(style, spacer, nav);
+    this.#nav = nav;
+    this.#title = titleText;
+    this.#loading = loading;
+  }
+};
+function ensureNavigationBarDefined() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  if (!customElements.get(NAVIGATION_BAR_TAG)) {
+    customElements.define(NAVIGATION_BAR_TAG, WeappNavigationBar);
+  }
+}
+
+// src/runtime/rpx.ts
+var DEFAULT_DESIGN_WIDTH = 750;
+var DEFAULT_VAR_NAME = "--rpx";
+var initialized = false;
+function computeRpx(designWidth) {
+  if (typeof window === "undefined") {
+    return 0;
+  }
+  const width = document.documentElement?.clientWidth ?? window.innerWidth;
+  return width / designWidth;
+}
+function setupRpx(config) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const designWidth = config?.designWidth ?? DEFAULT_DESIGN_WIDTH;
+  const varName = config?.varName ?? DEFAULT_VAR_NAME;
+  const root = document.documentElement;
+  const apply = () => {
+    const value = computeRpx(designWidth);
+    root.style.setProperty(varName, `${value}px`);
+  };
+  apply();
+  if (!initialized) {
+    initialized = true;
+    window.addEventListener("resize", apply);
+  }
+}
+
 // src/runtime/polyfill.ts
+var ROUTE_META_SYMBOL = /* @__PURE__ */ Symbol("@weapp-vite/web:route-meta");
+var PAGE_STATE_SYMBOL = /* @__PURE__ */ Symbol("@weapp-vite/web:page-state");
 var pageRegistry = /* @__PURE__ */ new Map();
 var componentRegistry = /* @__PURE__ */ new Map();
 var navigationHistory = [];
@@ -258,8 +1358,6 @@ var pageOrder = [];
 var activeEntry;
 var appInstance;
 var appLaunched = false;
-var ROUTE_META_SYMBOL = /* @__PURE__ */ Symbol("@weapp-vite/web:route-meta");
-var PAGE_STATE_SYMBOL = /* @__PURE__ */ Symbol("@weapp-vite/web:page-state");
 var PAGE_LIFECYCLE_KEYS = /* @__PURE__ */ new Set(["onLoad", "onReady", "onShow", "onHide", "onUnload"]);
 var RESERVED_PAGE_METHOD_KEYS = /* @__PURE__ */ new Set([
   "data",
@@ -520,19 +1618,41 @@ function augmentPageComponentOptions(component, record) {
   };
   return enhanced;
 }
-function initializePageRoutes(ids) {
+function initializePageRoutes(ids, options) {
   pageOrder = Array.from(new Set(ids));
   if (!pageOrder.length) {
     return;
   }
+  if (options?.rpx) {
+    setupRpx(options.rpx);
+  }
+  if (options?.navigationBar) {
+    setNavigationBarMetrics(options.navigationBar);
+  }
+  if (options?.form) {
+    setButtonFormConfig(options.form);
+  }
   if (!navigationHistory.length) {
     pushEntry(pageOrder[0], {});
   }
 }
 function registerPage(options, meta) {
+  ensureButtonDefined();
+  ensureNavigationBarDefined();
   const tag = slugify(meta.id, "wv-page");
   const template = meta.template ?? (() => "");
   const normalized = normalizePageOptions(options);
+  const existing = pageRegistry.get(meta.id);
+  if (existing) {
+    existing.hooks = normalized.hooks;
+    const component2 = augmentPageComponentOptions(normalized.component, existing);
+    defineComponent(tag, {
+      template,
+      style: meta.style,
+      component: component2
+    });
+    return options;
+  }
   const record = {
     tag,
     hooks: normalized.hooks,
@@ -548,9 +1668,18 @@ function registerPage(options, meta) {
   return options;
 }
 function registerComponent(options, meta) {
+  ensureButtonDefined();
   const tag = slugify(meta.id, "wv-component");
   const template = meta.template ?? (() => "");
   const component = normalizeComponentOptions(options);
+  if (componentRegistry.has(meta.id)) {
+    defineComponent(tag, {
+      template,
+      style: meta.style,
+      component
+    });
+    return options;
+  }
   defineComponent(tag, {
     template,
     style: meta.style,
@@ -561,6 +1690,16 @@ function registerComponent(options, meta) {
 }
 function registerApp(options, _meta) {
   const resolved = options ?? {};
+  if (appInstance) {
+    const currentGlobal = appInstance.globalData;
+    Object.assign(appInstance, resolved);
+    if (isRecord(currentGlobal)) {
+      appInstance.globalData = currentGlobal;
+    } else if (!isRecord(appInstance.globalData)) {
+      appInstance.globalData = {};
+    }
+    return options;
+  }
   appInstance = resolved;
   appLaunched = false;
   if (!isRecord(appInstance.globalData)) {
@@ -612,6 +1751,82 @@ function getCurrentPagesInternal() {
 function getAppInstance() {
   return appInstance;
 }
+function getActiveNavigationBar() {
+  const pages = getCurrentPagesInternal();
+  const current = pages[pages.length - 1];
+  if (!current) {
+    return void 0;
+  }
+  const renderRoot = current.renderRoot ?? current.shadowRoot ?? current;
+  if (!renderRoot || typeof renderRoot.querySelector !== "function") {
+    return void 0;
+  }
+  return renderRoot.querySelector("weapp-navigation-bar");
+}
+var warnedNavigationBarMissing = false;
+function warnNavigationBarMissing(action) {
+  if (warnedNavigationBarMissing) {
+    return;
+  }
+  warnedNavigationBarMissing = true;
+  const logger = globalThis.console;
+  if (logger?.warn) {
+    logger.warn(`[@weapp-vite/web] ${action} \u9700\u8981\u9ED8\u8BA4\u5BFC\u822A\u680F\u652F\u6301\uFF0C\u4F46\u5F53\u524D\u9875\u9762\u672A\u6E32\u67D3 weapp-navigation-bar\u3002`);
+  }
+}
+function setNavigationBarTitle(options) {
+  const bar = getActiveNavigationBar();
+  if (!bar) {
+    warnNavigationBarMissing("wx.setNavigationBarTitle");
+    return Promise.resolve();
+  }
+  if (options?.title !== void 0) {
+    bar.setAttribute("title", options.title);
+  }
+  return Promise.resolve();
+}
+function setNavigationBarColor(options) {
+  const bar = getActiveNavigationBar();
+  if (!bar) {
+    warnNavigationBarMissing("wx.setNavigationBarColor");
+    return Promise.resolve();
+  }
+  if (options?.frontColor) {
+    bar.setAttribute("front-color", options.frontColor);
+  }
+  if (options?.backgroundColor) {
+    bar.setAttribute("background-color", options.backgroundColor);
+  }
+  if (options?.animation) {
+    const duration = typeof options.animation.duration === "number" ? `${options.animation.duration}ms` : void 0;
+    const easing = options.animation.timingFunction;
+    if (duration) {
+      bar.style.setProperty("--weapp-nav-transition-duration", duration);
+    }
+    if (easing) {
+      bar.style.setProperty("--weapp-nav-transition-easing", easing);
+    }
+  }
+  return Promise.resolve();
+}
+function showNavigationBarLoading() {
+  const bar = getActiveNavigationBar();
+  if (!bar) {
+    warnNavigationBarMissing("wx.showNavigationBarLoading");
+    return Promise.resolve();
+  }
+  bar.setAttribute("loading", "true");
+  return Promise.resolve();
+}
+function hideNavigationBarLoading() {
+  const bar = getActiveNavigationBar();
+  if (!bar) {
+    warnNavigationBarMissing("wx.hideNavigationBarLoading");
+    return Promise.resolve();
+  }
+  bar.removeAttribute("loading");
+  return Promise.resolve();
+}
 var globalTarget = typeof globalThis !== "undefined" ? globalThis : {};
 if (globalTarget) {
   const wxBridge = globalTarget.wx ?? {};
@@ -620,7 +1835,11 @@ if (globalTarget) {
     navigateBack,
     redirectTo,
     switchTab,
-    reLaunch
+    reLaunch,
+    setNavigationBarTitle,
+    setNavigationBarColor,
+    showNavigationBarLoading,
+    hideNavigationBarLoading
   });
   globalTarget.wx = wxBridge;
   if (typeof globalTarget.getApp !== "function") {
@@ -631,46 +1850,7 @@ if (globalTarget) {
   }
 }
 
-// src/runtime/style.ts
-var injected = /* @__PURE__ */ new Map();
-function createStyleId(css) {
-  let hash = 2166136261;
-  for (let i = 0; i < css.length; i++) {
-    hash ^= css.charCodeAt(i);
-    hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
-  }
-  return `weapp-web-style-${(hash >>> 0).toString(36)}`;
-}
-function removeStyle(id) {
-  if (typeof document === "undefined") {
-    return;
-  }
-  const style = injected.get(id);
-  if (style) {
-    style.remove();
-    injected.delete(id);
-  }
-}
-function injectStyle(css, id) {
-  if (typeof document === "undefined") {
-    return () => {
-    };
-  }
-  const styleId = id ?? createStyleId(css);
-  const existing = injected.get(styleId);
-  if (existing) {
-    existing.textContent = css;
-    return () => removeStyle(styleId);
-  }
-  const style = document.createElement("style");
-  style.id = styleId;
-  style.textContent = css;
-  document.head.append(style);
-  injected.set(styleId, style);
-  return () => removeStyle(styleId);
-}
-
-// src/runtime/template.ts
+// src/runtime/legacyTemplate.ts
 import { parseDocument } from "htmlparser2";
 var CONTROL_ATTRS = /* @__PURE__ */ new Set([
   "wx:if",
@@ -703,7 +1883,7 @@ var SELF_CLOSING_TAGS = /* @__PURE__ */ new Set([
   "wbr"
 ]);
 var templateCache = /* @__PURE__ */ new Map();
-var expressionCache = /* @__PURE__ */ new Map();
+var expressionCache2 = /* @__PURE__ */ new Map();
 function filterRenderableNode(node) {
   if (node.type === "directive" || node.type === "comment") {
     return false;
@@ -727,13 +1907,13 @@ function getOrParseTemplate(source) {
   }
   return cached;
 }
-function createScope(initial) {
+function createScope2(initial) {
   return Object.assign(/* @__PURE__ */ Object.create(null), initial ?? {});
 }
-function createChildScope(parent) {
+function createChildScope2(parent) {
   return Object.assign(Object.create(parent), {});
 }
-function normalizeList(value) {
+function normalizeList2(value) {
   if (Array.isArray(value)) {
     return value;
   }
@@ -767,7 +1947,7 @@ function normalizeTagName(name) {
     case "image":
       return "img";
     case "button":
-      return "button";
+      return "weapp-button";
     case "input":
       return "input";
     case "textarea":
@@ -838,7 +2018,7 @@ function unwrapExpression(expression) {
   }
   return trimmed;
 }
-function evaluateExpression(expression, scope) {
+function evaluateExpression2(expression, scope) {
   if (!expression) {
     return void 0;
   }
@@ -846,7 +2026,7 @@ function evaluateExpression(expression, scope) {
   if (!trimmed) {
     return void 0;
   }
-  let evaluator = expressionCache.get(trimmed);
+  let evaluator = expressionCache2.get(trimmed);
   if (!evaluator) {
     try {
       evaluator = new Function("scope", `with(scope){ return (${trimmed}); }`);
@@ -854,7 +2034,7 @@ function evaluateExpression(expression, scope) {
       const reason = error instanceof Error ? error.message : String(error);
       throw new SyntaxError(`[@weapp-vite/web] \u65E0\u6CD5\u89E3\u6790\u8868\u8FBE\u5F0F "${trimmed}": ${reason}`);
     }
-    expressionCache.set(trimmed, evaluator);
+    expressionCache2.set(trimmed, evaluator);
   }
   try {
     return evaluator(scope);
@@ -881,7 +2061,7 @@ function interpolateText(source, scope, escapeResult) {
       break;
     }
     const expression = source.slice(start + 2, end).trim();
-    const evaluated = toDisplayString(evaluateExpression(expression, scope));
+    const evaluated = toDisplayString(evaluateExpression2(expression, scope));
     buffer += evaluated;
     cursor = end + 2;
   }
@@ -999,7 +2179,7 @@ function renderConditionalSequence(nodes, startIndex, scope, renderChildren) {
     if (!conditionExpr) {
       continue;
     }
-    const condition = evaluateExpression(conditionExpr, scope);
+    const condition = evaluateExpression2(conditionExpr, scope);
     if (condition) {
       return {
         rendered: renderElement(
@@ -1022,14 +2202,14 @@ function renderElement(node, scope, renderChildren, options = {}) {
   if (!options.skipFor) {
     const forExtract = extractFor(attribs);
     if (forExtract.expr) {
-      const list = normalizeList(evaluateExpression(forExtract.expr, scope));
+      const list = normalizeList2(evaluateExpression2(forExtract.expr, scope));
       if (!list.length) {
         return "";
       }
       let buffer = "";
       for (let idx = 0; idx < list.length; idx++) {
         const item = list[idx];
-        const childScope = createChildScope(scope);
+        const childScope = createChildScope2(scope);
         childScope[forExtract.itemName] = item;
         childScope[forExtract.indexName] = idx;
         buffer += renderElement(node, childScope, renderChildren, {
@@ -1090,7 +2270,7 @@ function renderTree(input, scope) {
   return "";
 }
 function renderTemplate(nodes, scope) {
-  const renderScope = createScope(scope);
+  const renderScope = createScope2(scope);
   return renderTree(nodes, renderScope);
 }
 function createTemplate(source) {
@@ -1098,8 +2278,11 @@ function createTemplate(source) {
   return (scope) => renderTemplate(nodes, scope);
 }
 export {
+  createRenderContext,
   createTemplate,
   defineComponent,
+  ensureButtonDefined,
+  hideNavigationBarLoading,
   initializePageRoutes,
   injectStyle,
   navigateBack,
@@ -1111,5 +2294,11 @@ export {
   registerPage,
   removeStyle,
   renderTemplate,
+  setButtonFormConfig,
+  setNavigationBarColor,
+  setNavigationBarMetrics,
+  setNavigationBarTitle,
+  setupRpx,
+  showNavigationBarLoading,
   switchTab
 };