@geektech/tsone 0.0.2 → 0.2.1

package/dist/{index-ycmc7ga1.js → index-1x4ectvr.js}

@@ -1,6 +1,7 @@
 import {
-  StyleManager
-} from "./index-8wjswsye.js";
+  StyleManager,
+  renderStyleSheet
+} from "./index-ffzday7h.js";
 
 // lib/core/reactive/types.ts
 var IS_REACTIVE = Symbol("is_reactive");
@@ -345,38 +346,100 @@ function isReadonly(value) {
   return isObject(value) && hasReactiveFlag(value, IS_READONLY);
 }
 
-// lib/core/renderer/props.ts
-function isEventProp(key) {
-  return /^on[A-Z]/.test(key) || /^on[a-z]/.test(key);
+// lib/core/vnode.ts
+function isComponentNode(vnode) {
+  return typeof vnode === "object" && vnode !== null && "component" in vnode;
 }
-function eventNameFromProp(key) {
-  return key.slice(2).toLowerCase();
+function isHTMLNode(vnode) {
+  return typeof vnode === "object" && vnode !== null && "tag" in vnode && vnode.tag !== "slot";
 }
-function parseEventName(event) {
-  const [eventName, ...modifiers] = event.split(".");
-  return { eventName, modifiers: new Set(modifiers) };
+function isSlotProvider(vnode) {
+  return typeof vnode === "object" && vnode !== null && "tag" in vnode && vnode.tag === "slot";
 }
-function wrapEventHandler(handler, modifiers) {
-  const eventHandler = (event) => {
-    if (modifiers.has("stop")) {
-      event.stopPropagation();
-    }
-    if (modifiers.has("prevent")) {
-      event.preventDefault();
-    }
-    if (modifiers.has("self") && event.currentTarget !== event.target) {
-      return;
-    }
-    if (modifiers.has("once")) {
-      event.currentTarget.removeEventListener(event.type, eventHandler);
-    }
-    handler(event);
+function h(tag, props, children, listeners, key, directions) {
+  return {
+    tag,
+    props,
+    children,
+    listeners,
+    key,
+    directions
   };
-  return eventHandler;
 }
-function setStyleValue(style, property, value) {
-  const cssProperty = property.includes("-") ? property : property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-  style.setProperty(cssProperty, String(value));
+function Tag(tag, options = {}) {
+  return {
+    tag,
+    ...options
+  };
+}
+function createElementFactory(tag) {
+  return (options = {}) => Tag(tag, options);
+}
+var Div = createElementFactory("div");
+var Span = createElementFactory("span");
+var P = createElementFactory("p");
+var Button = createElementFactory("button");
+var Input = createElementFactory("input");
+var Section = createElementFactory("section");
+var Main = createElementFactory("main");
+var Header = createElementFactory("header");
+var Footer = createElementFactory("footer");
+var Nav = createElementFactory("nav");
+var Article = createElementFactory("article");
+var Aside = createElementFactory("aside");
+var H1 = createElementFactory("h1");
+var H2 = createElementFactory("h2");
+var H3 = createElementFactory("h3");
+var H4 = createElementFactory("h4");
+var H5 = createElementFactory("h5");
+var H6 = createElementFactory("h6");
+var Strong = createElementFactory("strong");
+var Em = createElementFactory("em");
+var Small = createElementFactory("small");
+var Pre = createElementFactory("pre");
+var Code = createElementFactory("code");
+var Blockquote = createElementFactory("blockquote");
+var Ul = createElementFactory("ul");
+var Ol = createElementFactory("ol");
+var Li = createElementFactory("li");
+var A = createElementFactory("a");
+var Img = createElementFactory("img");
+var Form = createElementFactory("form");
+var Label = createElementFactory("label");
+var Textarea = createElementFactory("textarea");
+var Select = createElementFactory("select");
+var Option = createElementFactory("option");
+var Table = createElementFactory("table");
+var Thead = createElementFactory("thead");
+var Tbody = createElementFactory("tbody");
+var Tr = createElementFactory("tr");
+var Th = createElementFactory("th");
+var Td = createElementFactory("td");
+function createComponent(componentClass, props, children, key, directions) {
+  return {
+    component: componentClass,
+    props,
+    children,
+    key,
+    directions
+  };
+}
+function slot(name, key, directions) {
+  return {
+    tag: "slot",
+    props: { name },
+    key,
+    directions
+  };
+}
+function each(items, render, key) {
+  return items.map((item, index) => {
+    const vnode = render(item, index);
+    if (typeof vnode === "string") {
+      throw new Error("each render callback must return a VNode");
+    }
+    return { ...vnode, key: key(item, index) };
+  });
 }
 
 // lib/core/model.ts
@@ -560,328 +623,78 @@ class ModelBindingController {
   }
 }
 
-// lib/core/vnode.ts
-function isComponentNode(vnode) {
-  return typeof vnode === "object" && vnode !== null && "component" in vnode;
-}
-function isHTMLNode(vnode) {
-  return typeof vnode === "object" && vnode !== null && "tag" in vnode && vnode.tag !== "slot";
-}
-function isSlotProvider(vnode) {
-  return typeof vnode === "object" && vnode !== null && "tag" in vnode && vnode.tag === "slot";
-}
-function h(tag, props, children, listeners, key, directions) {
-  return {
-    tag,
-    props,
-    children,
-    listeners,
-    key,
-    directions
-  };
-}
-function createElementFactory(tag) {
-  return (options = {}) => ({
-    tag,
-    ...options
-  });
+// lib/core/renderer/props.ts
+function isEventProp(key) {
+  return /^on[A-Z]/.test(key) || /^on[a-z]/.test(key);
 }
-var Div = createElementFactory("div");
-var Span = createElementFactory("span");
-var P = createElementFactory("p");
-var Button = createElementFactory("button");
-var Input = createElementFactory("input");
-function createComponent(componentClass, props, children, key, directions) {
-  return {
-    component: componentClass,
-    props,
-    children,
-    key,
-    directions
-  };
+function eventNameFromProp(key) {
+  return key.slice(2).toLowerCase();
 }
-function slot(name, key, directions) {
-  return {
-    tag: "slot",
-    props: { name },
-    key,
-    directions
-  };
+function parseEventName(event) {
+  const [eventName, ...modifiers] = event.split(".");
+  return { eventName, modifiers: new Set(modifiers) };
 }
-function each(items, render, key) {
-  return items.map((item, index) => {
-    const vnode = render(item, index);
-    if (typeof vnode === "string") {
-      throw new Error("each render callback must return a VNode");
+function wrapEventHandler(handler, modifiers) {
+  const eventHandler = (event) => {
+    if (modifiers.has("stop")) {
+      event.stopPropagation();
     }
-    return { ...vnode, key: key(item, index) };
-  });
-}
-
-// lib/core/renderer.ts
-class RendererContext {
-  strategies;
-  constructor() {
-    this.strategies = [
-      new TextRenderStrategy,
-      new ComponentRenderStrategy,
-      new SlotRenderStrategy,
-      new ElementRenderStrategy
-    ];
-  }
-  mount(vnode, context) {
-    return this.findStrategy(vnode).mount(vnode, context);
-  }
-  patch(oldVNode, newVNode, currentNode, context) {
-    const oldStrategy = this.findStrategy(oldVNode);
-    const newStrategy = this.findStrategy(newVNode);
-    if (oldStrategy !== newStrategy) {
-      const nextNode = newStrategy.mount(newVNode, context);
-      currentNode.parentNode?.replaceChild(nextNode, currentNode);
-      oldStrategy.unmount(oldVNode, currentNode, context);
-      return nextNode;
+    if (modifiers.has("prevent")) {
+      event.preventDefault();
     }
-    return oldStrategy.patch(oldVNode, newVNode, currentNode, context);
-  }
-  unmount(vnode, currentNode, context) {
-    this.findStrategy(vnode).unmount(vnode, currentNode, context);
-  }
-  findStrategy(vnode) {
-    const strategy = this.strategies.find((item) => item.matches(vnode));
-    if (!strategy) {
-      throw new Error("No render strategy found for vnode");
+    if (modifiers.has("self") && event.currentTarget !== event.target) {
+      return;
     }
-    return strategy;
-  }
-}
-
-class TextRenderStrategy {
-  matches(vnode) {
-    return typeof vnode === "string";
-  }
-  mount(vnode, context) {
-    return context.templateEngine.parseTemplate(vnode);
-  }
-  patch(oldVNode, newVNode, currentNode, context) {
-    if (oldVNode === newVNode) {
-      return currentNode;
+    if (modifiers.has("once")) {
+      event.currentTarget.removeEventListener(event.type, eventHandler);
     }
-    const nextNode = this.mount(newVNode, context);
-    currentNode.parentNode?.replaceChild(nextNode, currentNode);
-    return nextNode;
-  }
-  unmount() {}
+    handler(event);
+  };
+  return eventHandler;
+}
+function setStyleValue(style, property, value) {
+  const cssProperty = property.includes("-") ? property : property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+  style.setProperty(cssProperty, String(value));
 }
 
-class ComponentRenderStrategy {
-  instances = new WeakMap;
-  instanceNodes = new Map;
-  emitterUnsubscribers = new WeakMap;
+// lib/core/renderer/element-strategy.ts
+class ElementRenderStrategy {
+  listeners = new WeakMap;
+  effects = new WeakMap;
+  modelBindings = new ModelBindingController;
   matches(vnode) {
-    return typeof vnode === "object" && vnode !== null && isComponentNode(vnode);
+    return typeof vnode === "object" && vnode !== null && isHTMLNode(vnode);
   }
   mount(vnode, context) {
     if (vnode.directions?.if === false) {
       return document.createComment("if");
     }
-    const ComponentClass = vnode.component;
-    const instance = new ComponentClass(this.createProps(vnode));
-    if (context.appContext && instance.setAppContext) {
-      instance.setAppContext(context.appContext);
-    }
-    this.syncEmitters(instance, vnode.emitters ?? {});
-    context.registerChild(instance);
-    const node = instance.mountToNode();
-    this.trackInstanceNode(instance, node);
-    instance.setElementChangeListener?.((previousNode, nextNode) => {
-      this.trackInstanceNode(instance, previousNode);
-      this.trackInstanceNode(instance, nextNode);
-    });
-    return node;
+    const element = document.createElement(vnode.tag);
+    this.applyProps(element, {}, vnode.props ?? {}, context);
+    this.updateListeners(element, {}, this.collectListeners(vnode));
+    this.mountChildren(element, vnode, context);
+    this.applyDirections(element, undefined, vnode.directions, context);
+    return element;
   }
   patch(oldVNode, newVNode, currentNode, context) {
-    if (currentNode.nodeType === Node.COMMENT_NODE) {
-      const nextNode2 = this.mount(newVNode, context);
-      currentNode.parentNode?.replaceChild(nextNode2, currentNode);
-      return nextNode2;
+    if (oldVNode.tag !== newVNode.tag || currentNode.nodeType === Node.COMMENT_NODE) {
+      const nextNode = this.mount(newVNode, context);
+      currentNode.parentNode?.replaceChild(nextNode, currentNode);
+      this.unmount(oldVNode, currentNode, context);
+      return nextNode;
+    }
+    if (!(currentNode instanceof HTMLElement)) {
+      return currentNode;
     }
     if (newVNode.directions?.if === false) {
-      const nextNode2 = document.createComment("if");
-      currentNode.parentNode?.replaceChild(nextNode2, currentNode);
+      const nextNode = document.createComment("if");
+      currentNode.parentNode?.replaceChild(nextNode, currentNode);
       this.unmount(oldVNode, currentNode, context);
-      return nextNode2;
-    }
-    const instance = this.instances.get(currentNode);
-    if (instance && oldVNode.component === newVNode.component) {
-      this.syncEmitters(instance, newVNode.emitters ?? {});
-      instance.setProps(this.createProps(newVNode));
-      const nextNode2 = instance.getElement() ?? currentNode;
-      this.trackInstanceNode(instance, nextNode2);
-      return nextNode2;
-    }
-    const nextNode = this.mount(newVNode, context);
-    currentNode.parentNode?.replaceChild(nextNode, currentNode);
-    this.unmount(oldVNode, currentNode, context);
-    return nextNode;
-  }
-  unmount(_vnode, currentNode, context) {
-    const instance = this.instances.get(currentNode);
-    if (instance) {
-      this.clearEmitters(instance);
-      instance.unmount();
-      this.clearInstanceNodes(instance);
-      context.unregisterChild(instance);
-    }
-  }
-  createProps(vnode) {
-    return {
-      ...vnode.props ?? {},
-      children: vnode.children ?? []
-    };
-  }
-  syncEmitters(instance, emitters) {
-    const current = this.emitterUnsubscribers.get(instance) ?? new Map;
-    current.forEach(({ listener: currentListener, unsubscribe }, eventName) => {
-      const listener = emitters[eventName];
-      if (!listener || listener !== currentListener) {
-        unsubscribe();
-        current.delete(eventName);
-      }
-    });
-    Object.entries(emitters).forEach(([eventName, listener]) => {
-      if (current.get(eventName)?.listener === listener) {
-        return;
-      }
-      current.set(eventName, {
-        listener,
-        unsubscribe: instance.on(eventName, listener)
-      });
-    });
-    this.emitterUnsubscribers.set(instance, current);
-  }
-  clearEmitters(instance) {
-    this.emitterUnsubscribers.get(instance)?.forEach(({ unsubscribe }) => {
-      unsubscribe();
-    });
-    this.emitterUnsubscribers.delete(instance);
-  }
-  trackInstanceNode(instance, node) {
-    this.instances.set(node, instance);
-    const nodes = this.instanceNodes.get(instance) ?? new Set;
-    nodes.add(node);
-    this.instanceNodes.set(instance, nodes);
-  }
-  clearInstanceNodes(instance) {
-    this.instanceNodes.get(instance)?.forEach((node) => {
-      this.instances.delete(node);
-    });
-    this.instanceNodes.delete(instance);
-  }
-}
-
-class SlotRenderStrategy {
-  renderedChildren = new WeakMap;
-  matches(vnode) {
-    return typeof vnode === "object" && vnode !== null && isSlotProvider(vnode);
-  }
-  mount(vnode, context) {
-    if (vnode.directions?.if === false) {
-      return document.createComment("if");
-    }
-    const slotContainer = document.createElement("div");
-    slotContainer.setAttribute("data-slot", vnode.props.name);
-    this.mountSlotChildren(slotContainer, this.resolveChildren(vnode, context), context);
-    return slotContainer;
-  }
-  patch(oldVNode, newVNode, currentNode, context) {
-    if (currentNode.nodeType === Node.COMMENT_NODE) {
-      const nextNode = this.mount(newVNode, context);
-      currentNode.parentNode?.replaceChild(nextNode, currentNode);
-      return nextNode;
-    }
-    if (newVNode.directions?.if === false) {
-      const nextNode = document.createComment("if");
-      currentNode.parentNode?.replaceChild(nextNode, currentNode);
-      this.unmount(oldVNode, currentNode, context);
-      return nextNode;
-    }
-    if (currentNode instanceof HTMLElement) {
-      currentNode.setAttribute("data-slot", newVNode.props.name);
-      this.replaceSlotChildren(currentNode, oldVNode, newVNode, context);
-    }
-    return currentNode;
-  }
-  unmount(_vnode, currentNode, context) {
-    if (!(currentNode instanceof HTMLElement)) {
-      return;
-    }
-    this.unmountSlotChildren(currentNode, context);
-    this.renderedChildren.delete(currentNode);
-  }
-  resolveChildren(vnode, context) {
-    return context.slots[vnode.props.name] ?? vnode.children ?? [];
-  }
-  replaceSlotChildren(element, _oldVNode, newVNode, context) {
-    this.unmountSlotChildren(element, context);
-    element.textContent = "";
-    this.mountSlotChildren(element, this.resolveChildren(newVNode, context), context);
-  }
-  mountSlotChildren(element, children, context) {
-    children.forEach((child) => {
-      element.appendChild(context.renderer.mount(child, context));
-    });
-    this.renderedChildren.set(element, children);
-  }
-  unmountSlotChildren(element, context) {
-    const children = this.renderedChildren.get(element) ?? [];
-    children.forEach((child, index) => {
-      const childNode = element.childNodes[index];
-      if (childNode) {
-        context.renderer.unmount(child, childNode, context);
-      }
-    });
-  }
-}
-
-class ElementRenderStrategy {
-  listeners = new WeakMap;
-  effects = new WeakMap;
-  modelBindings = new ModelBindingController;
-  matches(vnode) {
-    return typeof vnode === "object" && vnode !== null && isHTMLNode(vnode);
-  }
-  mount(vnode, context) {
-    if (vnode.directions?.if === false) {
-      return document.createComment("if");
-    }
-    const element = document.createElement(vnode.tag);
-    this.applyProps(element, {}, vnode.props ?? {}, context);
-    this.updateListeners(element, {}, this.collectListeners(vnode));
-    (vnode.children ?? []).forEach((child) => {
-      element.appendChild(context.renderer.mount(child, context));
-    });
-    this.applyDirections(element, undefined, vnode.directions, context);
-    return element;
-  }
-  patch(oldVNode, newVNode, currentNode, context) {
-    if (oldVNode.tag !== newVNode.tag || currentNode.nodeType === Node.COMMENT_NODE) {
-      const nextNode = this.mount(newVNode, context);
-      currentNode.parentNode?.replaceChild(nextNode, currentNode);
-      this.unmount(oldVNode, currentNode, context);
-      return nextNode;
-    }
-    if (!(currentNode instanceof HTMLElement)) {
-      return currentNode;
-    }
-    if (newVNode.directions?.if === false) {
-      const nextNode = document.createComment("if");
-      currentNode.parentNode?.replaceChild(nextNode, currentNode);
-      this.unmount(oldVNode, currentNode, context);
-      return nextNode;
+      return nextNode;
     }
     this.applyProps(currentNode, oldVNode.props ?? {}, newVNode.props ?? {}, context);
     this.updateListeners(currentNode, this.collectListeners(oldVNode), this.collectListeners(newVNode));
-    this.updateChildren(currentNode, oldVNode.children ?? [], newVNode.children ?? [], context);
+    this.updateChildren(currentNode, oldVNode, newVNode, context);
     this.applyDirections(currentNode, oldVNode.directions, newVNode.directions, context);
     return currentNode;
   }
@@ -896,8 +709,19 @@ class ElementRenderStrategy {
     });
     this.listeners.delete(currentNode);
     this.modelBindings.cleanup(currentNode);
+    this.unmountChildren(currentNode, vnode, context);
+  }
+  mountChildren(element, vnode, context) {
+    (vnode.children ?? []).forEach((child) => {
+      element.appendChild(context.renderer.mount(child, context));
+    });
+  }
+  updateChildren(element, oldVNode, newVNode, context) {
+    this.updateOrdinaryChildren(element, oldVNode.children ?? [], newVNode.children ?? [], context);
+  }
+  unmountChildren(element, vnode, context) {
     (vnode.children ?? []).forEach((child, index) => {
-      const childNode = currentNode.childNodes[index];
+      const childNode = element.childNodes[index];
       if (childNode) {
         context.renderer.unmount(child, childNode, context);
       }
@@ -958,7 +782,7 @@ class ElementRenderStrategy {
     }
     this.modelBindings.bind(element, newDirections.model, context.templateEngine.state);
   }
-  updateChildren(element, oldChildren, newChildren, context) {
+  updateOrdinaryChildren(element, oldChildren, newChildren, context) {
     this.assertNoDuplicateKeys(oldChildren);
     this.assertNoDuplicateKeys(newChildren);
     if (this.hasOnlyKeyedChildren(oldChildren, newChildren)) {
@@ -1020,83 +844,554 @@ class ElementRenderStrategy {
         element.insertBefore(nextNode, referenceNode);
       }
     });
-    oldEntries.forEach((entry) => {
-      if (!entry.node || usedOldIndexes.has(entry.index)) {
+    oldEntries.forEach((entry) => {
+      if (!entry.node || usedOldIndexes.has(entry.index)) {
+        return;
+      }
+      context.renderer.unmount(entry.vnode, entry.node, context);
+      if (entry.node.parentNode === element) {
+        element.removeChild(entry.node);
+      }
+    });
+  }
+  hasOnlyKeyedChildren(oldChildren, newChildren) {
+    return [...oldChildren, ...newChildren].every((child) => this.getVNodeKey(child) !== undefined);
+  }
+  assertNoDuplicateKeys(children) {
+    const keys = new Set;
+    children.forEach((child) => {
+      const key = this.getVNodeKey(child);
+      if (key === undefined) {
+        return;
+      }
+      if (keys.has(key)) {
+        throw new Error(`Duplicate key "${key}"`);
+      }
+      keys.add(key);
+    });
+  }
+  getVNodeKey(vnode) {
+    if (typeof vnode === "string") {
+      return;
+    }
+    return vnode.key;
+  }
+  collectListeners(vnode) {
+    const listeners = {};
+    Object.entries(vnode.props ?? {}).forEach(([key, value]) => {
+      if (isEventProp(key) && typeof value === "function") {
+        listeners[eventNameFromProp(key)] = value;
+      }
+    });
+    return {
+      ...listeners,
+      ...vnode.listeners ?? {}
+    };
+  }
+  updateListeners(element, oldListeners, newListeners) {
+    const store = this.listeners.get(element) ?? new Map;
+    const oldKeys = new Set(Object.keys(oldListeners));
+    const newKeys = new Set(Object.keys(newListeners));
+    oldKeys.forEach((event) => {
+      if (!newKeys.has(event) || oldListeners[event] !== newListeners[event]) {
+        const stored = store.get(event);
+        if (stored) {
+          element.removeEventListener(stored.eventName, stored.listener);
+          store.delete(event);
+        }
+      }
+    });
+    newKeys.forEach((event) => {
+      if (!oldKeys.has(event) || oldListeners[event] !== newListeners[event]) {
+        const { eventName, modifiers } = parseEventName(event);
+        const listener = wrapEventHandler(newListeners[event], modifiers);
+        element.addEventListener(eventName, listener);
+        store.set(event, { eventName, listener });
+      }
+    });
+    this.listeners.set(element, store);
+  }
+  setupReactiveAttribute(element, attrName, attrValue, context) {
+    const effectRef = effect(() => {
+      element.setAttribute(attrName, context.templateEngine.evaluateTemplateValue(attrValue));
+    });
+    this.trackEffect(element, effectRef);
+  }
+  trackEffect(element, effectRef) {
+    const effects = this.effects.get(element) ?? new Set;
+    effects.add(effectRef);
+    this.effects.set(element, effects);
+  }
+}
+
+// lib/core/animation/list-animation-controller.ts
+var ENTER_KEYFRAMES = {
+  fade: [{ opacity: 0 }, { opacity: 1 }],
+  "slide-up": [
+    { opacity: 0, transform: "translateY(12px)" },
+    { opacity: 1, transform: "translateY(0)" }
+  ],
+  "slide-down": [
+    { opacity: 0, transform: "translateY(-12px)" },
+    { opacity: 1, transform: "translateY(0)" }
+  ],
+  "slide-left": [
+    { opacity: 0, transform: "translateX(12px)" },
+    { opacity: 1, transform: "translateX(0)" }
+  ],
+  "slide-right": [
+    { opacity: 0, transform: "translateX(-12px)" },
+    { opacity: 1, transform: "translateX(0)" }
+  ],
+  scale: [
+    { opacity: 0, transform: "scale(0.95)" },
+    { opacity: 1, transform: "scale(1)" }
+  ]
+};
+
+class ListAnimationController {
+  runs = new WeakMap;
+  playEnter(element, options) {
+    return this.play(element, options, "enter");
+  }
+  playExit(element, options) {
+    return this.play(element, options, "exit");
+  }
+  cancel(element) {
+    const current = this.runs.get(element);
+    if (!current) {
+      return;
+    }
+    this.runs.delete(element);
+    current.animation.cancel();
+  }
+  play(element, transition, phase) {
+    this.cancel(element);
+    if (!this.canAnimate(element)) {
+      return null;
+    }
+    const enterKeyframes = ENTER_KEYFRAMES[transition.type];
+    const keyframes = phase === "enter" ? [...enterKeyframes] : [...enterKeyframes].reverse();
+    const options = {
+      duration: transition.duration,
+      easing: "ease",
+      fill: "both"
+    };
+    const animation = element.animate(keyframes, options);
+    const token = Symbol("list-animation");
+    const finished = animation.finished.then(() => "finished", () => "cancelled");
+    const run = {
+      animation,
+      token,
+      keyframes,
+      options,
+      finished
+    };
+    this.runs.set(element, run);
+    finished.then((result) => {
+      if (this.runs.get(element)?.token !== token) {
+        return;
+      }
+      this.runs.delete(element);
+      if (phase === "enter" && result === "finished") {
+        animation.cancel();
+      }
+    });
+    return run;
+  }
+  canAnimate(element) {
+    const reduced = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    return !reduced && typeof element.animate === "function";
+  }
+}
+
+// lib/core/animation/types.ts
+var TRANSITION_ANIMATION_TYPES = [
+  "fade",
+  "slide-up",
+  "slide-down",
+  "slide-left",
+  "slide-right",
+  "scale"
+];
+function normalizeTransitionGroupProps(props) {
+  const tag = (props.tag ?? "div").trim();
+  const type = props.type ?? "fade";
+  const duration = props.duration ?? 300;
+  if (!tag) {
+    throw new Error("TransitionGroup tag must not be empty");
+  }
+  if (!TRANSITION_ANIMATION_TYPES.includes(type)) {
+    throw new Error(`Unknown TransitionGroup animation type "${type}"`);
+  }
+  if (!Number.isFinite(duration) || duration < 0) {
+    throw new Error("TransitionGroup duration must be a non-negative finite number");
+  }
+  return { tag, type, duration };
+}
+function validateTransitionGroupChildren(children) {
+  const keys = new Set;
+  return children.map((child) => {
+    if (typeof child === "string" || child.key === undefined || keys.has(child.key)) {
+      throw new Error("TransitionGroup children must have unique keys");
+    }
+    keys.add(child.key);
+    return child;
+  });
+}
+function isTransitionGroupNode(vnode) {
+  return typeof vnode === "object" && vnode !== null && "transitionGroup" in vnode && isHTMLNode(vnode);
+}
+
+// lib/core/animation/transition-group-strategy.ts
+class TransitionGroupRenderStrategy extends ElementRenderStrategy {
+  entries = new WeakMap;
+  animations = new ListAnimationController;
+  matches(vnode) {
+    return isTransitionGroupNode(vnode);
+  }
+  mountChildren(element, groupVNode, context) {
+    const keyedChildren = validateTransitionGroupChildren(groupVNode.children ?? []);
+    const entries = new Map;
+    keyedChildren.forEach((childVNode) => {
+      const node = context.renderer.mount(childVNode, context);
+      element.appendChild(node);
+      const entry = {
+        key: childVNode.key,
+        vnode: childVNode,
+        node,
+        status: "active"
+      };
+      entries.set(entry.key, entry);
+      this.playEnter(entry, node, groupVNode.transitionGroup);
+    });
+    this.entries.set(element, entries);
+  }
+  updateChildren(element, _oldVNode, newVNode, context) {
+    const entries = this.entries.get(element) ?? new Map;
+    const nextChildren = validateTransitionGroupChildren(newVNode.children ?? []);
+    const nextKeys = new Set(nextChildren.map((child) => child.key));
+    const ordered = [];
+    nextChildren.forEach((childVNode) => {
+      const key = childVNode.key;
+      const current = entries.get(key);
+      if (current) {
+        const wasExiting = current.status === "exiting";
+        if (wasExiting && current.node instanceof HTMLElement) {
+          this.animations.cancel(current.node);
+        }
+        current.status = "active";
+        current.animationToken = undefined;
+        current.node = context.renderer.patch(current.vnode, childVNode, current.node, context);
+        current.vnode = childVNode;
+        ordered.push(current);
+        if (wasExiting) {
+          this.playEnter(current, current.node, newVNode.transitionGroup);
+        }
+        return;
+      }
+      const node = context.renderer.mount(childVNode, context);
+      const entry = {
+        key,
+        vnode: childVNode,
+        node,
+        status: "active"
+      };
+      entries.set(key, entry);
+      ordered.push(entry);
+      this.playEnter(entry, node, newVNode.transitionGroup);
+    });
+    entries.forEach((entry, key) => {
+      if (nextKeys.has(key) || entry.status !== "active") {
+        return;
+      }
+      this.startExit(element, entry, newVNode.transitionGroup, context);
+    });
+    this.placeActiveEntries(element, ordered);
+    this.entries.set(element, entries);
+  }
+  unmountChildren(element, vnode, context) {
+    const entries = this.entries.get(element);
+    if (!entries) {
+      super.unmountChildren(element, vnode, context);
+      return;
+    }
+    entries.forEach((entry) => {
+      if (entry.node instanceof HTMLElement) {
+        this.animations.cancel(entry.node);
+      }
+      context.renderer.unmount(entry.vnode, entry.node, context);
+      if (entry.node.parentNode === element) {
+        element.removeChild(entry.node);
+      }
+    });
+    entries.clear();
+    this.entries.delete(element);
+  }
+  playEnter(entry, node, options) {
+    if (!(node instanceof HTMLElement)) {
+      return;
+    }
+    const run = this.animations.playEnter(node, options);
+    entry.animationToken = run?.token;
+  }
+  startExit(wrapper, entry, options, context) {
+    entry.status = "exiting";
+    const run = entry.node instanceof HTMLElement ? this.animations.playExit(entry.node, options) : null;
+    if (!run) {
+      this.finishExit(wrapper, entry, context);
+      return;
+    }
+    entry.animationToken = run.token;
+    run.finished.then((result) => {
+      if (result === "finished" && entry.status === "exiting" && entry.animationToken === run.token) {
+        this.finishExit(wrapper, entry, context);
+      }
+    });
+  }
+  finishExit(wrapper, entry, context) {
+    const entries = this.entries.get(wrapper);
+    if (entries?.get(entry.key) !== entry) {
+      return;
+    }
+    context.renderer.unmount(entry.vnode, entry.node, context);
+    if (entry.node.parentNode === wrapper) {
+      wrapper.removeChild(entry.node);
+    }
+    entries.delete(entry.key);
+  }
+  placeActiveEntries(wrapper, ordered) {
+    let reference = null;
+    for (let index = ordered.length - 1;index >= 0; index -= 1) {
+      wrapper.insertBefore(ordered[index].node, reference);
+      reference = ordered[index].node;
+    }
+  }
+}
+
+// lib/core/renderer.ts
+class RendererContext {
+  strategies;
+  constructor() {
+    this.strategies = [
+      new TextRenderStrategy,
+      new ComponentRenderStrategy,
+      new SlotRenderStrategy,
+      new TransitionGroupRenderStrategy,
+      new ElementRenderStrategy
+    ];
+  }
+  mount(vnode, context) {
+    return this.findStrategy(vnode).mount(vnode, context);
+  }
+  patch(oldVNode, newVNode, currentNode, context) {
+    const oldStrategy = this.findStrategy(oldVNode);
+    const newStrategy = this.findStrategy(newVNode);
+    if (oldStrategy !== newStrategy) {
+      const nextNode = newStrategy.mount(newVNode, context);
+      currentNode.parentNode?.replaceChild(nextNode, currentNode);
+      oldStrategy.unmount(oldVNode, currentNode, context);
+      return nextNode;
+    }
+    return oldStrategy.patch(oldVNode, newVNode, currentNode, context);
+  }
+  unmount(vnode, currentNode, context) {
+    this.findStrategy(vnode).unmount(vnode, currentNode, context);
+  }
+  findStrategy(vnode) {
+    const strategy = this.strategies.find((item) => item.matches(vnode));
+    if (!strategy) {
+      throw new Error("No render strategy found for vnode");
+    }
+    return strategy;
+  }
+}
+
+class TextRenderStrategy {
+  matches(vnode) {
+    return typeof vnode === "string";
+  }
+  mount(vnode, context) {
+    return context.templateEngine.parseTemplate(vnode);
+  }
+  patch(oldVNode, newVNode, currentNode, context) {
+    if (oldVNode === newVNode) {
+      return currentNode;
+    }
+    const nextNode = this.mount(newVNode, context);
+    currentNode.parentNode?.replaceChild(nextNode, currentNode);
+    return nextNode;
+  }
+  unmount() {}
+}
+
+class ComponentRenderStrategy {
+  instances = new WeakMap;
+  instanceNodes = new Map;
+  emitterUnsubscribers = new WeakMap;
+  matches(vnode) {
+    return typeof vnode === "object" && vnode !== null && isComponentNode(vnode);
+  }
+  mount(vnode, context) {
+    if (vnode.directions?.if === false) {
+      return document.createComment("if");
+    }
+    const ComponentClass = vnode.component;
+    const instance = new ComponentClass(this.createProps(vnode));
+    if (context.appContext && instance.setAppContext) {
+      instance.setAppContext(context.appContext);
+    }
+    this.syncEmitters(instance, vnode.emitters ?? {});
+    context.registerChild(instance);
+    const node = instance.mountToNode();
+    this.trackInstanceNode(instance, node);
+    instance.setElementChangeListener?.((previousNode, nextNode) => {
+      this.trackInstanceNode(instance, previousNode);
+      this.trackInstanceNode(instance, nextNode);
+    });
+    return node;
+  }
+  patch(oldVNode, newVNode, currentNode, context) {
+    if (currentNode.nodeType === Node.COMMENT_NODE) {
+      const nextNode2 = this.mount(newVNode, context);
+      currentNode.parentNode?.replaceChild(nextNode2, currentNode);
+      return nextNode2;
+    }
+    if (newVNode.directions?.if === false) {
+      const nextNode2 = document.createComment("if");
+      currentNode.parentNode?.replaceChild(nextNode2, currentNode);
+      this.unmount(oldVNode, currentNode, context);
+      return nextNode2;
+    }
+    const instance = this.instances.get(currentNode);
+    if (instance && oldVNode.component === newVNode.component) {
+      this.syncEmitters(instance, newVNode.emitters ?? {});
+      instance.setProps(this.createProps(newVNode));
+      const nextNode2 = instance.getElement() ?? currentNode;
+      this.trackInstanceNode(instance, nextNode2);
+      return nextNode2;
+    }
+    const nextNode = this.mount(newVNode, context);
+    currentNode.parentNode?.replaceChild(nextNode, currentNode);
+    this.unmount(oldVNode, currentNode, context);
+    return nextNode;
+  }
+  unmount(_vnode, currentNode, context) {
+    const instance = this.instances.get(currentNode);
+    if (instance) {
+      this.clearEmitters(instance);
+      instance.unmount();
+      this.clearInstanceNodes(instance);
+      context.unregisterChild(instance);
+    }
+  }
+  createProps(vnode) {
+    return {
+      ...vnode.props ?? {},
+      children: vnode.children ?? []
+    };
+  }
+  syncEmitters(instance, emitters) {
+    const current = this.emitterUnsubscribers.get(instance) ?? new Map;
+    current.forEach(({ listener: currentListener, unsubscribe }, eventName) => {
+      const listener = emitters[eventName];
+      if (!listener || listener !== currentListener) {
+        unsubscribe();
+        current.delete(eventName);
+      }
+    });
+    Object.entries(emitters).forEach(([eventName, listener]) => {
+      if (current.get(eventName)?.listener === listener) {
         return;
       }
-      context.renderer.unmount(entry.vnode, entry.node, context);
-      if (entry.node.parentNode === element) {
-        element.removeChild(entry.node);
-      }
+      current.set(eventName, {
+        listener,
+        unsubscribe: instance.on(eventName, listener)
+      });
     });
+    this.emitterUnsubscribers.set(instance, current);
   }
-  hasOnlyKeyedChildren(oldChildren, newChildren) {
-    return [...oldChildren, ...newChildren].every((child) => this.getVNodeKey(child) !== undefined);
+  clearEmitters(instance) {
+    this.emitterUnsubscribers.get(instance)?.forEach(({ unsubscribe }) => {
+      unsubscribe();
+    });
+    this.emitterUnsubscribers.delete(instance);
   }
-  assertNoDuplicateKeys(children) {
-    const keys = new Set;
-    children.forEach((child) => {
-      const key = this.getVNodeKey(child);
-      if (key === undefined) {
-        return;
-      }
-      if (keys.has(key)) {
-        throw new Error(`Duplicate key "${key}"`);
-      }
-      keys.add(key);
+  trackInstanceNode(instance, node) {
+    this.instances.set(node, instance);
+    const nodes = this.instanceNodes.get(instance) ?? new Set;
+    nodes.add(node);
+    this.instanceNodes.set(instance, nodes);
+  }
+  clearInstanceNodes(instance) {
+    this.instanceNodes.get(instance)?.forEach((node) => {
+      this.instances.delete(node);
     });
+    this.instanceNodes.delete(instance);
   }
-  getVNodeKey(vnode) {
-    if (typeof vnode === "string") {
+}
+
+class SlotRenderStrategy {
+  renderedChildren = new WeakMap;
+  matches(vnode) {
+    return typeof vnode === "object" && vnode !== null && isSlotProvider(vnode);
+  }
+  mount(vnode, context) {
+    if (vnode.directions?.if === false) {
+      return document.createComment("if");
+    }
+    const slotContainer = document.createElement("div");
+    slotContainer.setAttribute("data-slot", vnode.props.name);
+    this.mountSlotChildren(slotContainer, this.resolveChildren(vnode, context), context);
+    return slotContainer;
+  }
+  patch(oldVNode, newVNode, currentNode, context) {
+    if (currentNode.nodeType === Node.COMMENT_NODE) {
+      const nextNode = this.mount(newVNode, context);
+      currentNode.parentNode?.replaceChild(nextNode, currentNode);
+      return nextNode;
+    }
+    if (newVNode.directions?.if === false) {
+      const nextNode = document.createComment("if");
+      currentNode.parentNode?.replaceChild(nextNode, currentNode);
+      this.unmount(oldVNode, currentNode, context);
+      return nextNode;
+    }
+    if (currentNode instanceof HTMLElement) {
+      currentNode.setAttribute("data-slot", newVNode.props.name);
+      this.replaceSlotChildren(currentNode, oldVNode, newVNode, context);
+    }
+    return currentNode;
+  }
+  unmount(_vnode, currentNode, context) {
+    if (!(currentNode instanceof HTMLElement)) {
       return;
     }
-    return vnode.key;
+    this.unmountSlotChildren(currentNode, context);
+    this.renderedChildren.delete(currentNode);
   }
-  collectListeners(vnode) {
-    const listeners = {};
-    Object.entries(vnode.props ?? {}).forEach(([key, value]) => {
-      if (isEventProp(key) && typeof value === "function") {
-        listeners[eventNameFromProp(key)] = value;
-      }
-    });
-    return {
-      ...listeners,
-      ...vnode.listeners ?? {}
-    };
+  resolveChildren(vnode, context) {
+    return context.slots[vnode.props.name] ?? vnode.children ?? [];
   }
-  updateListeners(element, oldListeners, newListeners) {
-    const store = this.listeners.get(element) ?? new Map;
-    const oldKeys = new Set(Object.keys(oldListeners));
-    const newKeys = new Set(Object.keys(newListeners));
-    oldKeys.forEach((event) => {
-      if (!newKeys.has(event) || oldListeners[event] !== newListeners[event]) {
-        const stored = store.get(event);
-        if (stored) {
-          element.removeEventListener(stored.eventName, stored.listener);
-          store.delete(event);
-        }
-      }
-    });
-    newKeys.forEach((event) => {
-      if (!oldKeys.has(event) || oldListeners[event] !== newListeners[event]) {
-        const { eventName, modifiers } = parseEventName(event);
-        const listener = wrapEventHandler(newListeners[event], modifiers);
-        element.addEventListener(eventName, listener);
-        store.set(event, { eventName, listener });
-      }
-    });
-    this.listeners.set(element, store);
+  replaceSlotChildren(element, _oldVNode, newVNode, context) {
+    this.unmountSlotChildren(element, context);
+    element.textContent = "";
+    this.mountSlotChildren(element, this.resolveChildren(newVNode, context), context);
   }
-  setupReactiveAttribute(element, attrName, attrValue, context) {
-    const effectRef = effect(() => {
-      element.setAttribute(attrName, context.templateEngine.evaluateTemplateValue(attrValue));
+  mountSlotChildren(element, children, context) {
+    children.forEach((child) => {
+      element.appendChild(context.renderer.mount(child, context));
     });
-    this.trackEffect(element, effectRef);
+    this.renderedChildren.set(element, children);
   }
-  trackEffect(element, effectRef) {
-    const effects = this.effects.get(element) ?? new Set;
-    effects.add(effectRef);
-    this.effects.set(element, effects);
+  unmountSlotChildren(element, context) {
+    const children = this.renderedChildren.get(element) ?? [];
+    children.forEach((child, index) => {
+      const childNode = element.childNodes[index];
+      if (childNode) {
+        context.renderer.unmount(child, childNode, context);
+      }
+    });
   }
 }
 
@@ -1812,7 +2107,347 @@ function createRouter(options) {
   return new Router(options);
 }
 
-export { ReactiveSystem, reactive, readonly, effect, computed, ref, isRef, unref, stop, isReactive, isReadonly, TemplateEngine, modelPath, getModelValue, setModelValue, ModelBindingController, isComponentNode, isHTMLNode, isSlotProvider, h, Div, Span, P, Button, Input, createComponent, slot, each, RendererContext, TextRenderStrategy, ComponentRenderStrategy, SlotRenderStrategy, ElementRenderStrategy, Component, useRouter, Router, RouterLink, RouterView, createRouter };
+// lib/core/document.ts
+var VOID_HEAD_TAGS = new Set(["base", "link", "meta"]);
+function renderHtmlDocument(options) {
+  const lang = options.lang ?? "en";
+  const charset = options.charset ?? "utf-8";
+  const viewport = options.viewport ?? "width=device-width, initial-scale=1";
+  const htmlAttributes = renderAttributes({
+    lang,
+    ...options.htmlAttributes ?? {}
+  });
+  const bodyAttributes = renderAttributes(options.bodyAttributes);
+  const bodyHtml = renderDocumentBody(options.body);
+  return [
+    "<!doctype html>",
+    `<html${htmlAttributes}>`,
+    "<head>",
+    `  <meta charset="${escapeHtml(charset)}">`,
+    `  <meta name="viewport" content="${escapeHtml(viewport)}">`,
+    `  <title>${escapeHtml(options.title)}</title>`,
+    options.description ? `  <meta name="description" content="${escapeHtml(options.description)}">` : "",
+    ...(options.head ?? []).map((element) => `  ${renderHeadElement(element)}`),
+    options.styles && options.styles.length > 0 ? `  <style>${renderStyleSheet(options.styles)}</style>` : "",
+    "</head>",
+    `<body${bodyAttributes}>`,
+    bodyHtml,
+    ...(options.scripts ?? []).map((script) => `  ${renderScript(script)}`),
+    "</body>",
+    "</html>"
+  ].filter((line) => line !== "").join(`
+`);
+}
+function renderDocumentBody(body) {
+  if (typeof document === "undefined") {
+    throw new Error("renderHtmlDocument requires a DOM-like document");
+  }
+  const container = document.createElement("div");
+  const renderer = new RendererContext;
+  const mountedComponents = new Set;
+  const renderables = Array.isArray(body) ? body : [body];
+  const context = {
+    templateEngine: new TemplateEngine({}),
+    renderer,
+    slots: { default: [] },
+    registerChild: (component2) => {
+      mountedComponents.add(component2);
+    },
+    unregisterChild: (component2) => {
+      mountedComponents.delete(component2);
+    }
+  };
+  renderables.forEach((renderable) => {
+    container.appendChild(renderer.mount(renderable, context));
+  });
+  const html = container.innerHTML;
+  mountedComponents.forEach((component2) => {
+    component2.unmount();
+  });
+  return html;
+}
+function renderHeadElement(element) {
+  const attributes = renderAttributes(element.attributes);
+  if (VOID_HEAD_TAGS.has(element.tag) && !element.text) {
+    return `<${element.tag}${attributes}>`;
+  }
+  return `<${element.tag}${attributes}>${escapeHtml(element.text ?? "")}</${element.tag}>`;
+}
+function renderScript(script) {
+  const attributes = renderAttributes({
+    type: script.type,
+    src: script.src,
+    async: script.async,
+    defer: script.defer,
+    ...script.attributes ?? {}
+  });
+  return `<script${attributes}></script>`;
+}
+function renderAttributes(attributes = {}) {
+  const rendered = Object.entries(attributes).flatMap(([name, value]) => {
+    if (value === false || value === null || value === undefined) {
+      return [];
+    }
+    return value === true ? [name] : [`${name}="${escapeHtml(String(value))}"`];
+  }).join(" ");
+  return rendered ? ` ${rendered}` : "";
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// lib/core/app.ts
+var DEFAULT_ROOT_ELEMENT = "#app";
+
+class OneApp {
+  options;
+  container = null;
+  rootInstance = null;
+  mounted = false;
+  templateEngine = null;
+  appContext;
+  providers = new Map;
+  plugins = [];
+  unmountedCallback;
+  router;
+  constructor(options = {}) {
+    this.options = options;
+    this.appContext = {
+      app: this,
+      version: "0.2.1",
+      config: options.config || {}
+    };
+  }
+  handleError(error) {
+    console.error("应用错误:", error);
+    this.renderErrorUI(error);
+  }
+  renderErrorUI(error) {
+    if (!this.container) {
+      return;
+    }
+    this.container.innerHTML = `
+      <div style="padding: 20px; background-color: #ffebee; color: #c62828; font-family: Arial, sans-serif;">
+        <h3>应用错误</h3>
+        <p>${error.message}</p>
+        <pre style="background-color: #fff; padding: 10px; border-radius: 4px; overflow: auto;">${error.stack}</pre>
+      </div>
+    `;
+  }
+  use(plugin, ...args) {
+    if (typeof plugin.install !== "function") {
+      throw new Error("插件必须提供 install 方法");
+    }
+    plugin.install(this, ...args);
+    this.plugins.push({ plugin, args });
+    return this;
+  }
+  mount() {
+    if (this.mounted) {
+      console.warn("应用已经处于运行状态");
+      return;
+    }
+    const mountContainer = this.resolveMountContainer();
+    if (!mountContainer) {
+      return;
+    }
+    try {
+      this.container = mountContainer;
+      globalThis.__APP__ = this;
+      if (this.options.root) {
+        this.rootInstance = new this.options.root(this.options.rootProps);
+        if ("setAppContext" in this.rootInstance) {
+          this.rootInstance.setAppContext(this.appContext);
+        }
+        if (this.options.state && "setState" in this.rootInstance) {
+          this.rootInstance.setState(this.options.state);
+        }
+        this.rootInstance.mount(this.container);
+        this.templateEngine = new TemplateEngine(this.options.state || {});
+      }
+      this.mounted = true;
+      this.onMounted();
+    } catch (error) {
+      this.handleError(error);
+    }
+  }
+  unmount() {
+    if (!this.mounted) {
+      console.warn("应用未处于运行状态");
+      return;
+    }
+    try {
+      this.onBeforeUnmount();
+      if (this.rootInstance) {
+        if ("unmount" in this.rootInstance) {
+          this.rootInstance.unmount();
+        }
+        this.rootInstance = null;
+        this.mounted = false;
+        delete globalThis.__APP__;
+      }
+      if (this.templateEngine) {
+        this.templateEngine.clearBindings();
+        this.templateEngine = null;
+      }
+      if (this.container) {
+        this.container.innerHTML = "";
+      }
+      if (this.unmountedCallback) {
+        this.unmountedCallback();
+      }
+    } catch (error) {
+      console.error("Failed to unmount app:", error);
+    }
+  }
+  isRunning() {
+    return this.mounted;
+  }
+  updateRootComponent(component2) {
+    if (this.mounted) {
+      this.unmount();
+    }
+    this.options.root = component2;
+    this.mount();
+  }
+  update(state) {
+    if (!this.mounted) {
+      console.warn("Cannot update unmounted app");
+      return this;
+    }
+    try {
+      if (state && this.options.state) {
+        this.options.state = { ...this.options.state, ...state };
+        if (this.rootInstance && "setState" in this.rootInstance) {
+          this.rootInstance.setState(state);
+        }
+        if (this.templateEngine) {
+          this.templateEngine.state = this.options.state;
+        }
+      }
+      this.onUpdated();
+    } catch (error) {
+      console.error("Failed to update app:", error);
+    }
+    return this;
+  }
+  getContext() {
+    return this.appContext;
+  }
+  provide(key, value) {
+    this.providers.set(key, value);
+    return this;
+  }
+  inject(key, fallback) {
+    const result = this.resolveInjection(key);
+    return result.found ? result.value : fallback;
+  }
+  resolveInjection(key) {
+    if (!this.providers.has(key)) {
+      return { found: false, value: undefined };
+    }
+    return { found: true, value: this.providers.get(key) };
+  }
+  getState() {
+    return this.options.state;
+  }
+  setState(newState) {
+    this.options.state = newState;
+    if (this.mounted) {
+      this.update();
+    }
+    return this;
+  }
+  onUnmounted(callback) {
+    this.unmountedCallback = callback;
+    return this;
+  }
+  renderHtmlDocument(options = {}) {
+    const appDocument = this.options.document ?? {};
+    const scripts = this.mergeDocumentScripts(appDocument.scripts, options.scripts);
+    return renderHtmlDocument({
+      ...appDocument,
+      ...options,
+      title: options.title ?? appDocument.title ?? "TSone App",
+      body: options.body ?? appDocument.body ?? this.createMountDocumentBody(),
+      scripts
+    });
+  }
+  resolveRootElement(selector) {
+    if (!selector) {
+      return null;
+    }
+    if (typeof selector === "string") {
+      if (typeof document === "undefined") {
+        return null;
+      }
+      return document.querySelector(selector);
+    }
+    return typeof Element !== "undefined" && selector instanceof Element ? selector : null;
+  }
+  resolveMountContainer() {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    const rootElement = this.resolveRootElement(this.options.rootElement ?? DEFAULT_ROOT_ELEMENT);
+    return rootElement instanceof HTMLElement ? rootElement : null;
+  }
+  createMountDocumentBody() {
+    const rootElement = this.options.rootElement ?? DEFAULT_ROOT_ELEMENT;
+    if (typeof rootElement === "string") {
+      return this.createMountElementFromSelector(rootElement);
+    }
+    if (typeof Element !== "undefined" && rootElement instanceof Element) {
+      const props = {};
+      if (rootElement.id) {
+        props.id = rootElement.id;
+      }
+      if (rootElement.className) {
+        props.className = rootElement.className;
+      }
+      return { tag: rootElement.tagName.toLowerCase(), props };
+    }
+    return Div({ props: { id: "app" } });
+  }
+  createMountElementFromSelector(selector) {
+    if (selector.startsWith("#") && selector.length > 1) {
+      return Div({ props: { id: selector.slice(1) } });
+    }
+    if (selector.startsWith(".") && selector.length > 1) {
+      return Div({ props: { className: selector.slice(1) } });
+    }
+    return Div({ props: { "data-tsone-root": selector } });
+  }
+  mergeDocumentScripts(baseScripts, extraScripts) {
+    if (!baseScripts && !extraScripts) {
+      return;
+    }
+    return [...baseScripts ?? [], ...extraScripts ?? []];
+  }
+  onMounted() {
+    this.plugins.forEach(({ plugin: pluginObj }) => {
+      if (pluginObj && typeof pluginObj.onMounted === "function") {
+        pluginObj.onMounted(this);
+      }
+    });
+  }
+  onUpdated() {
+    this.plugins.forEach(({ plugin: pluginObj }) => {
+      if (pluginObj && typeof pluginObj.onUpdated === "function") {
+        pluginObj.onUpdated(this);
+      }
+    });
+  }
+  onBeforeUnmount() {
+    this.plugins.forEach(({ plugin: pluginObj }) => {
+      if (pluginObj && typeof pluginObj.onBeforeUnmount === "function") {
+        pluginObj.onBeforeUnmount(this);
+      }
+    });
+  }
+}
+
+export { ReactiveSystem, reactive, readonly, effect, computed, ref, isRef, unref, stop, isReactive, isReadonly, isComponentNode, isHTMLNode, isSlotProvider, h, Tag, Div, Span, P, Button, Input, Section, Main, Header, Footer, Nav, Article, Aside, H1, H2, H3, H4, H5, H6, Strong, Em, Small, Pre, Code, Blockquote, Ul, Ol, Li, A, Img, Form, Label, Textarea, Select, Option, Table, Thead, Tbody, Tr, Th, Td, createComponent, slot, each, modelPath, getModelValue, setModelValue, ModelBindingController, ElementRenderStrategy, normalizeTransitionGroupProps, validateTransitionGroupChildren, RendererContext, TextRenderStrategy, ComponentRenderStrategy, SlotRenderStrategy, TemplateEngine, Component, renderHtmlDocument, OneApp, useRouter, Router, RouterLink, RouterView, createRouter };
 
-//# debugId=EA20D7B3780F196864756E2164756E21
-//# sourceMappingURL=index-ycmc7ga1.js.map
+//# debugId=ABE10854C25EBD6364756E2164756E21
+//# sourceMappingURL=index-1x4ectvr.js.map