@geektech/tsone 0.0.2 → 0.1.0

package/dist/{index-ycmc7ga1.js → index-wv9gyjqt.js}

@@ -345,38 +345,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,63 +622,551 @@ 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";
+// lib/core/renderer/props.ts
+function isEventProp(key) {
+  return /^on[A-Z]/.test(key) || /^on[a-z]/.test(key);
 }
-function h(tag, props, children, listeners, key, directions) {
-  return {
-    tag,
-    props,
-    children,
-    listeners,
-    key,
-    directions
-  };
+function eventNameFromProp(key) {
+  return key.slice(2).toLowerCase();
 }
-function createElementFactory(tag) {
-  return (options = {}) => ({
-    tag,
-    ...options
-  });
+function parseEventName(event) {
+  const [eventName, ...modifiers] = event.split(".");
+  return { eventName, modifiers: new Set(modifiers) };
 }
-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 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);
   };
+  return eventHandler;
 }
-function slot(name, key, directions) {
-  return {
-    tag: "slot",
-    props: { name },
-    key,
-    directions
-  };
+function setStyleValue(style, property, value) {
+  const cssProperty = property.includes("-") ? property : property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+  style.setProperty(cssProperty, String(value));
 }
-function each(items, render, key) {
-  return items.map((item, index) => {
-    const vnode = render(item, index);
+
+// 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 && 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));
+    this.mountChildren(element, vnode, 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;
+    }
+    this.applyProps(currentNode, oldVNode.props ?? {}, newVNode.props ?? {}, context);
+    this.updateListeners(currentNode, this.collectListeners(oldVNode), this.collectListeners(newVNode));
+    this.updateChildren(currentNode, oldVNode, newVNode, context);
+    this.applyDirections(currentNode, oldVNode.directions, newVNode.directions, context);
+    return currentNode;
+  }
+  unmount(vnode, currentNode, context) {
+    if (!(currentNode instanceof HTMLElement)) {
+      return;
+    }
+    this.effects.get(currentNode)?.forEach((item) => stop(item));
+    this.effects.delete(currentNode);
+    this.listeners.get(currentNode)?.forEach(({ eventName, listener }) => {
+      currentNode.removeEventListener(eventName, listener);
+    });
+    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 = element.childNodes[index];
+      if (childNode) {
+        context.renderer.unmount(child, childNode, context);
+      }
+    });
+  }
+  applyProps(element, oldProps, newProps, context) {
+    Object.keys(oldProps).forEach((key) => {
+      if (isEventProp(key) || key in newProps) {
+        return;
+      }
+      if (key === "className" || key === "class") {
+        element.removeAttribute("class");
+      } else if (key === "style") {
+        element.removeAttribute("style");
+      } else {
+        element.removeAttribute(key);
+      }
+    });
+    Object.entries(newProps).forEach(([key, value]) => {
+      if (isEventProp(key)) {
+        return;
+      }
+      if (key === "className" || key === "class") {
+        element.className = String(value ?? "");
+        return;
+      }
+      if (key === "style" && typeof value === "object" && value !== null) {
+        element.removeAttribute("style");
+        Object.entries(value).forEach(([cssKey, cssValue]) => {
+          setStyleValue(element.style, cssKey, cssValue);
+        });
+        return;
+      }
+      if (value === false || value === undefined || value === null) {
+        element.removeAttribute(key);
+        return;
+      }
+      if (value === true) {
+        element.setAttribute(key, "");
+        return;
+      }
+      if (typeof value === "string" && context.templateEngine.hasExpressions(value)) {
+        this.setupReactiveAttribute(element, key, value, context);
+        return;
+      }
+      element.setAttribute(key, String(value));
+    });
+  }
+  applyDirections(element, oldDirections, newDirections, context) {
+    if (newDirections && "show" in newDirections) {
+      element.style.display = newDirections.show ? "" : "none";
+    } else if (oldDirections && "show" in oldDirections) {
+      element.style.display = "";
+    }
+    if (!newDirections?.model) {
+      this.modelBindings.cleanup(element);
+      return;
+    }
+    this.modelBindings.bind(element, newDirections.model, context.templateEngine.state);
+  }
+  updateOrdinaryChildren(element, oldChildren, newChildren, context) {
+    this.assertNoDuplicateKeys(oldChildren);
+    this.assertNoDuplicateKeys(newChildren);
+    if (this.hasOnlyKeyedChildren(oldChildren, newChildren)) {
+      this.updateKeyedChildren(element, oldChildren, newChildren, context);
+      return;
+    }
+    const sharedLength = Math.min(oldChildren.length, newChildren.length);
+    for (let index = 0;index < sharedLength; index += 1) {
+      const childNode = element.childNodes[index];
+      if (!childNode) {
+        element.appendChild(context.renderer.mount(newChildren[index], context));
+        continue;
+      }
+      context.renderer.patch(oldChildren[index], newChildren[index], childNode, context);
+    }
+    for (let index = sharedLength;index < newChildren.length; index += 1) {
+      element.appendChild(context.renderer.mount(newChildren[index], context));
+    }
+    for (let index = oldChildren.length - 1;index >= newChildren.length; index -= 1) {
+      const childNode = element.childNodes[index];
+      if (childNode) {
+        context.renderer.unmount(oldChildren[index], childNode, context);
+        if (childNode.parentNode === element) {
+          element.removeChild(childNode);
+        }
+      }
+    }
+  }
+  updateKeyedChildren(element, oldChildren, newChildren, context) {
+    const oldEntries = oldChildren.map((vnode, index) => ({
+      vnode,
+      node: element.childNodes[index],
+      index
+    }));
+    const keyedOldEntries = new Map;
+    const usedOldIndexes = new Set;
+    oldEntries.forEach((entry) => {
+      const key = this.getVNodeKey(entry.vnode);
+      if (key !== undefined && entry.node) {
+        keyedOldEntries.set(key, {
+          vnode: entry.vnode,
+          node: entry.node,
+          index: entry.index
+        });
+      }
+    });
+    newChildren.forEach((newChild, newIndex) => {
+      const key = this.getVNodeKey(newChild);
+      const oldEntry = key === undefined ? undefined : keyedOldEntries.get(key);
+      let nextNode;
+      if (oldEntry) {
+        nextNode = context.renderer.patch(oldEntry.vnode, newChild, oldEntry.node, context);
+        usedOldIndexes.add(oldEntry.index);
+      } else {
+        nextNode = context.renderer.mount(newChild, context);
+      }
+      const referenceNode = element.childNodes[newIndex] ?? null;
+      if (nextNode !== referenceNode) {
+        element.insertBefore(nextNode, referenceNode);
+      }
+    });
+    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") {
-      throw new Error("each render callback must return a VNode");
+      return;
     }
-    return { ...vnode, key: key(item, index) };
+    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 {
@@ -626,6 +1176,7 @@ class RendererContext {
       new TextRenderStrategy,
       new ComponentRenderStrategy,
       new SlotRenderStrategy,
+      new TransitionGroupRenderStrategy,
       new ElementRenderStrategy
     ];
   }
@@ -843,263 +1394,6 @@ class SlotRenderStrategy {
   }
 }
 
-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;
-    }
-    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.applyDirections(currentNode, oldVNode.directions, newVNode.directions, context);
-    return currentNode;
-  }
-  unmount(vnode, currentNode, context) {
-    if (!(currentNode instanceof HTMLElement)) {
-      return;
-    }
-    this.effects.get(currentNode)?.forEach((item) => stop(item));
-    this.effects.delete(currentNode);
-    this.listeners.get(currentNode)?.forEach(({ eventName, listener }) => {
-      currentNode.removeEventListener(eventName, listener);
-    });
-    this.listeners.delete(currentNode);
-    this.modelBindings.cleanup(currentNode);
-    (vnode.children ?? []).forEach((child, index) => {
-      const childNode = currentNode.childNodes[index];
-      if (childNode) {
-        context.renderer.unmount(child, childNode, context);
-      }
-    });
-  }
-  applyProps(element, oldProps, newProps, context) {
-    Object.keys(oldProps).forEach((key) => {
-      if (isEventProp(key) || key in newProps) {
-        return;
-      }
-      if (key === "className" || key === "class") {
-        element.removeAttribute("class");
-      } else if (key === "style") {
-        element.removeAttribute("style");
-      } else {
-        element.removeAttribute(key);
-      }
-    });
-    Object.entries(newProps).forEach(([key, value]) => {
-      if (isEventProp(key)) {
-        return;
-      }
-      if (key === "className" || key === "class") {
-        element.className = String(value ?? "");
-        return;
-      }
-      if (key === "style" && typeof value === "object" && value !== null) {
-        element.removeAttribute("style");
-        Object.entries(value).forEach(([cssKey, cssValue]) => {
-          setStyleValue(element.style, cssKey, cssValue);
-        });
-        return;
-      }
-      if (value === false || value === undefined || value === null) {
-        element.removeAttribute(key);
-        return;
-      }
-      if (value === true) {
-        element.setAttribute(key, "");
-        return;
-      }
-      if (typeof value === "string" && context.templateEngine.hasExpressions(value)) {
-        this.setupReactiveAttribute(element, key, value, context);
-        return;
-      }
-      element.setAttribute(key, String(value));
-    });
-  }
-  applyDirections(element, oldDirections, newDirections, context) {
-    if (newDirections && "show" in newDirections) {
-      element.style.display = newDirections.show ? "" : "none";
-    } else if (oldDirections && "show" in oldDirections) {
-      element.style.display = "";
-    }
-    if (!newDirections?.model) {
-      this.modelBindings.cleanup(element);
-      return;
-    }
-    this.modelBindings.bind(element, newDirections.model, context.templateEngine.state);
-  }
-  updateChildren(element, oldChildren, newChildren, context) {
-    this.assertNoDuplicateKeys(oldChildren);
-    this.assertNoDuplicateKeys(newChildren);
-    if (this.hasOnlyKeyedChildren(oldChildren, newChildren)) {
-      this.updateKeyedChildren(element, oldChildren, newChildren, context);
-      return;
-    }
-    const sharedLength = Math.min(oldChildren.length, newChildren.length);
-    for (let index = 0;index < sharedLength; index += 1) {
-      const childNode = element.childNodes[index];
-      if (!childNode) {
-        element.appendChild(context.renderer.mount(newChildren[index], context));
-        continue;
-      }
-      context.renderer.patch(oldChildren[index], newChildren[index], childNode, context);
-    }
-    for (let index = sharedLength;index < newChildren.length; index += 1) {
-      element.appendChild(context.renderer.mount(newChildren[index], context));
-    }
-    for (let index = oldChildren.length - 1;index >= newChildren.length; index -= 1) {
-      const childNode = element.childNodes[index];
-      if (childNode) {
-        context.renderer.unmount(oldChildren[index], childNode, context);
-        if (childNode.parentNode === element) {
-          element.removeChild(childNode);
-        }
-      }
-    }
-  }
-  updateKeyedChildren(element, oldChildren, newChildren, context) {
-    const oldEntries = oldChildren.map((vnode, index) => ({
-      vnode,
-      node: element.childNodes[index],
-      index
-    }));
-    const keyedOldEntries = new Map;
-    const usedOldIndexes = new Set;
-    oldEntries.forEach((entry) => {
-      const key = this.getVNodeKey(entry.vnode);
-      if (key !== undefined && entry.node) {
-        keyedOldEntries.set(key, {
-          vnode: entry.vnode,
-          node: entry.node,
-          index: entry.index
-        });
-      }
-    });
-    newChildren.forEach((newChild, newIndex) => {
-      const key = this.getVNodeKey(newChild);
-      const oldEntry = key === undefined ? undefined : keyedOldEntries.get(key);
-      let nextNode;
-      if (oldEntry) {
-        nextNode = context.renderer.patch(oldEntry.vnode, newChild, oldEntry.node, context);
-        usedOldIndexes.add(oldEntry.index);
-      } else {
-        nextNode = context.renderer.mount(newChild, context);
-      }
-      const referenceNode = element.childNodes[newIndex] ?? null;
-      if (nextNode !== referenceNode) {
-        element.insertBefore(nextNode, referenceNode);
-      }
-    });
-    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/template.ts
 class TemplateEngine {
   state;
@@ -1812,7 +2106,7 @@ 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 };
+export { 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, ReactiveSystem, reactive, readonly, effect, computed, ref, isRef, unref, stop, isReactive, isReadonly, modelPath, getModelValue, setModelValue, ModelBindingController, ElementRenderStrategy, normalizeTransitionGroupProps, validateTransitionGroupChildren, RendererContext, TextRenderStrategy, ComponentRenderStrategy, SlotRenderStrategy, TemplateEngine, Component, useRouter, Router, RouterLink, RouterView, createRouter };
 
-//# debugId=EA20D7B3780F196864756E2164756E21
-//# sourceMappingURL=index-ycmc7ga1.js.map
+//# debugId=91AF0EEFB67A584364756E2164756E21
+//# sourceMappingURL=index-wv9gyjqt.js.map