@unsetsoft/ryunixjs 1.2.3-canary.6 → 1.2.3-canary.8

package/dist/Ryunix.esm.js

@@ -0,0 +1,1485 @@
+// Improved state management - avoid global mutable object
+// Instead, create a state manager that can be instantiated per render tree
+
+const createRenderState = () => ({
+  containerRoot: null,
+  nextUnitOfWork: null,
+  currentRoot: null,
+  wipRoot: null,
+  deletions: [],
+  wipFiber: null,
+  hookIndex: 0,
+  effects: [],
+});
+
+// Singleton for backward compatibility, but allows testing with isolated instances
+let globalState = createRenderState();
+
+const getState = () => globalState;
+
+// Use const for regex to prevent accidental modification
+const CAMEL_TO_KEBAB_REGEX = /[A-Z]/g;
+
+const RYUNIX_TYPES = Object.freeze({
+  TEXT_ELEMENT: Symbol.for('ryunix.text.element'),
+  RYUNIX_ELEMENT: Symbol.for('ryunix.element'),
+  RYUNIX_EFFECT: Symbol.for('ryunix.effect'),
+  RYUNIX_MEMO: Symbol.for('ryunix.memo'),
+  RYUNIX_URL_QUERY: Symbol.for('ryunix.urlQuery'),
+  RYUNIX_REF: Symbol.for('ryunix.ref'),
+  RYUNIX_STORE: Symbol.for('ryunix.store'),
+  RYUNIX_REDUCE: Symbol.for('ryunix.reduce'),
+  RYUNIX_FRAGMENT: Symbol.for('ryunix.fragment'),
+  RYUNIX_CONTEXT: Symbol.for('ryunix.context'),
+});
+
+const STRINGS = Object.freeze({
+  OBJECT: 'object',
+  FUNCTION: 'function',
+  STYLE: 'ryunix-style',
+  CLASS_NAME: 'ryunix-class',
+  CHILDREN: 'children',
+  BOOLEAN: 'boolean',
+  STRING: 'string',
+  UNDEFINED: 'undefined',
+});
+
+const OLD_STRINGS = Object.freeze({
+  STYLE: 'style',
+  CLASS_NAME: 'className',
+});
+
+const EFFECT_TAGS = Object.freeze({
+  PLACEMENT: Symbol.for('ryunix.reconciler.status.placement'),
+  UPDATE: Symbol.for('ryunix.reconciler.status.update'),
+  DELETION: Symbol.for('ryunix.reconciler.status.deletion'),
+  NO_EFFECT: Symbol.for('ryunix.reconciler.status.no_effect'),
+});
+
+/**
+ * Type checking utilities
+ */
+const is = {
+  object: (val) => val !== null && typeof val === STRINGS.OBJECT,
+  function: (val) => typeof val === STRINGS.FUNCTION,
+  string: (val) => typeof val === STRINGS.STRING,
+  undefined: (val) => typeof val === STRINGS.UNDEFINED,
+  null: (val) => val === null,
+  array: (val) => Array.isArray(val),
+  promise: (val) => val instanceof Promise,
+};
+
+/**
+ * Create text element
+ */
+const createTextElement = (text) => {
+  return {
+    type: RYUNIX_TYPES.TEXT_ELEMENT,
+    props: {
+      nodeValue: text,
+      children: [],
+    },
+  }
+};
+
+/**
+ * Create element
+ */
+const createElement = (type, props, ...children) => {
+  const safeProps = props || {};
+
+  return {
+    type,
+    props: {
+      ...safeProps,
+      children: children
+        .flat()
+        .map((child) =>
+          typeof child === STRINGS.OBJECT ? child : createTextElement(child),
+        ),
+    },
+  }
+};
+
+/**
+ * Fragment component
+ */
+const Fragment = (props) => {
+  const children = Array.isArray(props.children)
+    ? props.children
+    : [props.children];
+  return createElement(RYUNIX_TYPES.RYUNIX_FRAGMENT, {}, ...children)
+};
+
+/**
+ * Check if a key is an event handler
+ * @param {string} key - Prop key
+ * @returns {boolean}
+ */
+const isEvent = (key) => key.startsWith('on');
+
+/**
+ * Check if a key is a property (not children or event)
+ * @param {string} key - Prop key
+ * @returns {boolean}
+ */
+const isProperty = (key) => key !== STRINGS.CHILDREN && !isEvent(key);
+
+/**
+ * Check if a property is new or changed
+ * @param {Object} prev - Previous props
+ * @param {Object} next - Next props
+ * @returns {Function}
+ */
+const isNew = (prev, next) => (key) => {
+  // Use Object.is for better comparison (handles NaN, -0, +0)
+  return !Object.is(prev[key], next[key])
+};
+
+/**
+ * Check if a property was removed
+ * @param {Object} next - Next props
+ * @returns {Function}
+ */
+const isGone = (next) => (key) => !(key in next);
+
+/**
+ * Cancel effects for a single fiber
+ * @param {Object} fiber - Fiber node
+ */
+const cancelEffects = (fiber) => {
+  if (!fiber?.hooks?.length) return
+
+  fiber.hooks
+    .filter(
+      (hook) =>
+        hook.type === RYUNIX_TYPES.RYUNIX_EFFECT && is.function(hook.cancel),
+    )
+    .forEach((hook) => {
+      try {
+        hook.cancel();
+        hook.cancel = null; // Clear reference to prevent memory leaks
+      } catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Error in effect cleanup:', error);
+        }
+      }
+    });
+};
+
+/**
+ * Recursively cancel effects in fiber tree
+ * @param {Object} fiber - Root fiber node
+ */
+const cancelEffectsDeep = (fiber) => {
+  if (!fiber) return
+
+  // Cancel effects for current fiber
+  if (fiber.hooks?.length > 0) {
+    fiber.hooks
+      .filter(
+        (hook) =>
+          hook.type === RYUNIX_TYPES.RYUNIX_EFFECT && is.function(hook.cancel),
+      )
+      .forEach((hook) => {
+        try {
+          hook.cancel();
+          hook.cancel = null; // Clear reference
+        } catch (error) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.error('Error in deep effect cleanup:', error);
+          }
+        }
+      });
+  }
+
+  // Recursively process children
+  if (fiber.child) cancelEffectsDeep(fiber.child);
+  if (fiber.sibling) cancelEffectsDeep(fiber.sibling);
+};
+
+/**
+ * Run effects for a fiber
+ * @param {Object} fiber - Fiber node
+ */
+const runEffects = (fiber) => {
+  if (!fiber?.hooks?.length) return
+
+  for (let i = 0; i < fiber.hooks.length; i++) {
+    const hook = fiber.hooks[i];
+
+    if (hook.type === RYUNIX_TYPES.RYUNIX_EFFECT && is.function(hook.effect)) {
+      // Cancel previous cleanup if exists
+      if (is.function(hook.cancel)) {
+        try {
+          hook.cancel();
+        } catch (error) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.error('Error in effect cleanup:', error);
+          }
+        }
+      }
+
+      // Run new effect
+      try {
+        const cleanup = hook.effect();
+
+        // Store cleanup function if returned
+        if (is.function(cleanup)) {
+          hook.cancel = cleanup;
+        } else {
+          hook.cancel = null;
+        }
+      } catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Error in effect:', error);
+        }
+        hook.cancel = null;
+      }
+
+      // Clear effect reference after running
+      hook.effect = null;
+    }
+  }
+};
+
+/**
+ * Convert camelCase to kebab-case for CSS properties
+ * @param {string} camelCase - CamelCase string
+ * @returns {string} Kebab-case string
+ */
+const camelToKebab = (camelCase) => {
+  return camelCase.replace(
+    CAMEL_TO_KEBAB_REGEX,
+    (match) => `-${match.toLowerCase()}`,
+  )
+};
+
+/**
+ * Apply styles to DOM element
+ * @param {HTMLElement} dom - DOM element
+ * @param {Object} styleObj - Style object
+ */
+const applyStyles = (dom, styleObj) => {
+  if (!is.object(styleObj) || is.null(styleObj)) {
+    dom.style.cssText = '';
+    return
+  }
+
+  try {
+    const cssText = Object.entries(styleObj)
+      .filter(([_, value]) => value != null) // Filter out null/undefined
+      .map(([key, value]) => {
+        const kebabKey = camelToKebab(key);
+        return `${kebabKey}: ${value}`
+      })
+      .join('; ');
+
+    dom.style.cssText = cssText;
+  } catch (error) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error('Error applying styles:', error);
+    }
+  }
+};
+
+/**
+ * Apply CSS classes to DOM element
+ * @param {HTMLElement} dom - DOM element
+ * @param {string} prevClasses - Previous class string
+ * @param {string} nextClasses - Next class string
+ */
+const applyClasses = (dom, prevClasses, nextClasses) => {
+  // Allow empty/undefined - just remove classes
+  if (!nextClasses || nextClasses.trim() === '') {
+    if (prevClasses) {
+      const oldClasses = prevClasses.split(/\s+/).filter(Boolean);
+      dom.classList.remove(...oldClasses);
+    }
+    return
+  }
+
+  // Remove old classes
+  if (prevClasses) {
+    const oldClasses = prevClasses.split(/\s+/).filter(Boolean);
+    dom.classList.remove(...oldClasses);
+  }
+
+  // Add new classes
+  const newClasses = nextClasses.split(/\s+/).filter(Boolean);
+  if (newClasses.length > 0) {
+    dom.classList.add(...newClasses);
+  }
+};
+
+/**
+ * Create a DOM element from fiber
+ * @param {Object} fiber - Fiber node
+ * @returns {HTMLElement|Text|null}
+ */
+const createDom = (fiber) => {
+  // Fragments don't create real DOM nodes
+  if (fiber.type === RYUNIX_TYPES.RYUNIX_FRAGMENT) {
+    return null
+  }
+
+  let dom;
+
+  try {
+    if (fiber.type === RYUNIX_TYPES.TEXT_ELEMENT) {
+      dom = document.createTextNode('');
+    } else if (is.string(fiber.type)) {
+      dom = document.createElement(fiber.type);
+    } else {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn(
+          'Attempted to create DOM for non-host component:',
+          fiber.type,
+        );
+      }
+      return null
+    }
+
+    updateDom(dom, {}, fiber.props);
+    return dom
+  } catch (error) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error('Error creating DOM element:', error, fiber);
+    }
+    return null
+  }
+};
+
+/**
+ * Update DOM element with new props
+ * @param {HTMLElement|Text} dom - DOM element
+ * @param {Object} prevProps - Previous props
+ * @param {Object} nextProps - Next props
+ */
+const updateDom = (dom, prevProps = {}, nextProps = {}) => {
+  // Remove old event listeners
+  Object.keys(prevProps)
+    .filter(isEvent)
+    .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
+    .forEach((name) => {
+      const eventType = name.toLowerCase().substring(2);
+      try {
+        dom.removeEventListener(eventType, prevProps[name]);
+      } catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn('Error removing event listener:', error);
+        }
+      }
+    });
+
+  // Remove old properties
+  Object.keys(prevProps)
+    .filter(isProperty)
+    .filter(isGone(nextProps))
+    .forEach((name) => {
+      // Skip special properties
+      if (
+        [
+          STRINGS.STYLE,
+          OLD_STRINGS.STYLE,
+          STRINGS.CLASS_NAME,
+          OLD_STRINGS.CLASS_NAME,
+        ].includes(name)
+      ) {
+        return
+      }
+      dom[name] = '';
+    });
+
+  // Set new properties
+  Object.keys(nextProps)
+    .filter(isProperty)
+    .filter(isNew(prevProps, nextProps))
+    .forEach((name) => {
+      try {
+        // Handle style properties
+        if (name === STRINGS.STYLE || name === OLD_STRINGS.STYLE) {
+          const styleValue = nextProps[name];
+          applyStyles(dom, styleValue);
+        }
+        // Handle className properties
+        else if (name === STRINGS.CLASS_NAME) {
+          applyClasses(
+            dom,
+            prevProps[STRINGS.CLASS_NAME],
+            nextProps[STRINGS.CLASS_NAME],
+          );
+        } else if (name === OLD_STRINGS.CLASS_NAME) {
+          applyClasses(
+            dom,
+            prevProps[OLD_STRINGS.CLASS_NAME],
+            nextProps[OLD_STRINGS.CLASS_NAME],
+          );
+        }
+        // Handle other properties
+        else {
+          // Special handling for value and checked (controlled components)
+          if (name === 'value' || name === 'checked') {
+            if (dom[name] !== nextProps[name]) {
+              dom[name] = nextProps[name];
+            }
+          } else {
+            dom[name] = nextProps[name];
+          }
+        }
+      } catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn(`Error setting property ${name}:`, error);
+        }
+      }
+    });
+
+  // Add new event listeners
+  Object.keys(nextProps)
+    .filter(isEvent)
+    .filter(isNew(prevProps, nextProps))
+    .forEach((name) => {
+      const eventType = name.toLowerCase().substring(2);
+      try {
+        dom.addEventListener(eventType, nextProps[name]);
+      } catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn('Error adding event listener:', error);
+        }
+      }
+    });
+};
+
+const commitRoot = () => {
+  const state = getState();
+  state.deletions.forEach(commitWork);
+  commitWork(state.wipRoot.child);
+  state.currentRoot = state.wipRoot;
+  state.wipRoot = null;
+};
+
+const commitWork = (fiber) => {
+  if (!fiber) {
+    return
+  }
+
+  let domParentFiber = fiber.parent;
+  while (!domParentFiber.dom) {
+    domParentFiber = domParentFiber.parent;
+  }
+  const domParent = domParentFiber.dom;
+
+  if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
+    if (fiber.dom != null) {
+      domParent.appendChild(fiber.dom);
+    }
+    runEffects(fiber);
+  } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
+    cancelEffects(fiber);
+    if (fiber.dom != null) {
+      updateDom(fiber.dom, fiber.alternate.props, fiber.props);
+    }
+    runEffects(fiber);
+  } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
+    cancelEffectsDeep(fiber);
+    commitDeletion(fiber, domParent);
+    return
+  }
+
+  commitWork(fiber.child);
+  commitWork(fiber.sibling);
+};
+
+const commitDeletion = (fiber, domParent) => {
+  if (fiber.dom) {
+    domParent.removeChild(fiber.dom);
+  } else {
+    let child = fiber.child;
+    while (child) {
+      commitDeletion(child, domParent);
+      child = child.sibling;
+    }
+  }
+};
+
+/**
+ * Reconcile children with key optimization
+ */
+const reconcileChildren = (wipFiber, elements) => {
+  const state = getState();
+  let index = 0;
+  let prevSibling;
+
+  // Build map of old fibers by key/index
+  const oldFiberMap = new Map();
+  let oldFiber = wipFiber.alternate?.child;
+  let position = 0;
+
+  while (oldFiber) {
+    const key = oldFiber.key ?? `__index_${position}__`;
+    oldFiberMap.set(key, oldFiber);
+    oldFiber = oldFiber.sibling;
+    position++;
+  }
+
+  // Process new elements
+  while (index < elements.length) {
+    const element = elements[index];
+    if (!element) {
+      index++;
+      continue
+    }
+
+    const key = element.key ?? `__index_${index}__`;
+    const matchedFiber = oldFiberMap.get(key);
+
+    let newFiber;
+    const sameType = matchedFiber && element.type === matchedFiber.type;
+
+    if (sameType) {
+      // Update existing fiber
+      newFiber = {
+        type: matchedFiber.type,
+        props: element.props,
+        dom: matchedFiber.dom,
+        parent: wipFiber,
+        alternate: matchedFiber,
+        effectTag: EFFECT_TAGS.UPDATE,
+        hooks: matchedFiber.hooks,
+        key: element.key,
+      };
+      oldFiberMap.delete(key);
+    } else {
+      // Create new fiber
+      newFiber = {
+        type: element.type,
+        props: element.props,
+        dom: null,
+        parent: wipFiber,
+        alternate: null,
+        effectTag: EFFECT_TAGS.PLACEMENT,
+        key: element.key,
+      };
+
+      // Mark matched fiber for deletion if exists
+      if (matchedFiber) {
+        matchedFiber.effectTag = EFFECT_TAGS.DELETION;
+        state.deletions.push(matchedFiber);
+        oldFiberMap.delete(key);
+      }
+    }
+
+    // Link fibers
+    if (index === 0) {
+      wipFiber.child = newFiber;
+    } else if (newFiber) {
+      prevSibling.sibling = newFiber;
+    }
+
+    prevSibling = newFiber;
+    index++;
+  }
+
+  // Delete remaining old fibers
+  oldFiberMap.forEach((fiber) => {
+    fiber.effectTag = EFFECT_TAGS.DELETION;
+    state.deletions.push(fiber);
+  });
+};
+
+const updateFunctionComponent = (fiber) => {
+  const state = getState();
+  state.wipFiber = fiber;
+  state.hookIndex = 0;
+  state.wipFiber.hooks = [];
+
+  const children = [fiber.type(fiber.props)];
+
+  if (fiber.type._contextId && fiber.props.value !== undefined) {
+    fiber._contextId = fiber.type._contextId;
+    fiber._contextValue = fiber.props.value;
+  }
+
+  reconcileChildren(fiber, children);
+};
+
+const updateHostComponent = (fiber) => {
+  if (!fiber.dom) {
+    fiber.dom = createDom(fiber);
+  }
+  const children = fiber.props?.children || [];
+  reconcileChildren(fiber, children);
+};
+
+const Image = ({ src, ...props }) => {
+  return createElement('img', { ...props, src })
+};
+
+/**
+ * Priority levels for updates
+ */
+const Priority = {
+  IMMEDIATE: 1, // User input (clicks, typing)
+  USER_BLOCKING: 2, // Hover, scroll
+  NORMAL: 3, // Data fetching
+  LOW: 4, // Analytics
+  IDLE: 5, // Background tasks
+};
+
+Priority.NORMAL;
+
+/**
+ * Performance profiler for Ryunix
+ */
+class Profiler {
+  constructor() {
+    this.enabled = process.env.NODE_ENV !== 'production';
+    this.measures = new Map();
+    this.renderTimes = [];
+    this.maxSamples = 100;
+  }
+
+  startMeasure(name) {
+    if (!this.enabled) return
+    this.measures.set(name, performance.now());
+  }
+
+  endMeasure(name) {
+    if (!this.enabled) return
+    const start = this.measures.get(name);
+    if (!start) return
+
+    const duration = performance.now() - start;
+    this.measures.delete(name);
+
+    return duration
+  }
+
+  recordRender(componentName, duration) {
+    if (!this.enabled) return
+
+    this.renderTimes.push({
+      component: componentName,
+      duration,
+      timestamp: Date.now(),
+    });
+
+    if (this.renderTimes.length > this.maxSamples) {
+      this.renderTimes.shift();
+    }
+  }
+
+  getStats() {
+    if (!this.enabled) return null
+
+    const total = this.renderTimes.reduce((sum, r) => sum + r.duration, 0);
+    const avg = total / this.renderTimes.length;
+    const max = Math.max(...this.renderTimes.map((r) => r.duration));
+    const min = Math.min(...this.renderTimes.map((r) => r.duration));
+
+    return { total, avg, max, min, count: this.renderTimes.length }
+  }
+
+  getSlowestComponents(limit = 10) {
+    if (!this.enabled) return []
+
+    const byComponent = new Map();
+
+    this.renderTimes.forEach(({ component, duration }) => {
+      if (!byComponent.has(component)) {
+        byComponent.set(component, { total: 0, count: 0, max: 0 });
+      }
+      const stats = byComponent.get(component);
+      stats.total += duration;
+      stats.count++;
+      stats.max = Math.max(stats.max, duration);
+    });
+
+    return Array.from(byComponent.entries())
+      .map(([name, stats]) => ({
+        name,
+        avg: stats.total / stats.count,
+        max: stats.max,
+        count: stats.count,
+      }))
+      .sort((a, b) => b.avg - a.avg)
+      .slice(0, limit)
+  }
+
+  logStats() {
+    if (!this.enabled) return
+
+    const stats = this.getStats();
+    if (!stats) return
+
+    console.group('🔍 Ryunix Performance Stats');
+    console.log(`Total renders: ${stats.count}`);
+    console.log(`Avg render time: ${stats.avg.toFixed(2)}ms`);
+    console.log(
+      `Min: ${stats.min.toFixed(2)}ms | Max: ${stats.max.toFixed(2)}ms`,
+    );
+
+    const slowest = this.getSlowestComponents(5);
+    if (slowest.length > 0) {
+      console.log('\n⚠️  Slowest components:');
+      slowest.forEach((comp, i) => {
+        console.log(
+          `${i + 1}. ${comp.name}: ${comp.avg.toFixed(2)}ms avg (${comp.count} renders)`,
+        );
+      });
+    }
+    console.groupEnd();
+  }
+
+  clear() {
+    this.renderTimes = [];
+    this.measures.clear();
+  }
+
+  enable() {
+    this.enabled = true;
+  }
+
+  disable() {
+    this.enabled = false;
+  }
+}
+
+// Global profiler instance
+const profiler = new Profiler();
+
+/**
+ * Hook to profile component render
+ */
+const useProfiler = (componentName) => {
+  const startTime = performance.now();
+
+  return () => {
+    const duration = performance.now() - startTime;
+    profiler.recordRender(componentName, duration);
+  }
+};
+
+/**
+ * HOC to profile component
+ */
+const withProfiler = (Component, name) => {
+  return (props) => {
+    profiler.startMeasure(name);
+    const result = Component(props);
+    const duration = profiler.endMeasure(name);
+    if (duration) profiler.recordRender(name, duration);
+    return result
+  }
+};
+
+const workLoop = (deadline) => {
+  const state = getState();
+  let shouldYield = false;
+
+  while (state.nextUnitOfWork && !shouldYield) {
+    state.nextUnitOfWork = performUnitOfWork(state.nextUnitOfWork);
+    shouldYield = deadline.timeRemaining() < 1;
+  }
+
+  if (!state.nextUnitOfWork && state.wipRoot) {
+    commitRoot();
+  }
+
+  requestIdleCallback(workLoop);
+};
+
+requestIdleCallback(workLoop);
+
+const performUnitOfWork = (fiber) => {
+  const componentName = fiber.type?.name || fiber.type?.displayName || 'Unknown';
+
+  profiler.startMeasure(componentName);
+
+  const isFunctionComponent = fiber.type instanceof Function;
+  if (isFunctionComponent) {
+    updateFunctionComponent(fiber);
+  } else {
+    updateHostComponent(fiber);
+  }
+
+  const duration = profiler.endMeasure(componentName);
+  if (duration) profiler.recordRender(componentName, duration);
+
+  if (fiber.child) {
+    return fiber.child
+  }
+  let nextFiber = fiber;
+  while (nextFiber) {
+    if (nextFiber.sibling) {
+      return nextFiber.sibling
+    }
+    nextFiber = nextFiber.parent;
+  }
+};
+
+const scheduleWork = (root, priority = Priority.NORMAL) => {
+  const state = getState();
+  state.nextUnitOfWork = root;
+  state.wipRoot = root;
+  state.deletions = [];
+  state.hookIndex = 0;
+  state.effects = [];
+
+  // Higher priority = faster scheduling
+  if (priority <= Priority.USER_BLOCKING) {
+    requestIdleCallback(workLoop);
+  } else {
+    setTimeout(() => requestIdleCallback(workLoop), 0);
+  }
+};
+
+const render = (element, container) => {
+  const state = getState();
+  state.wipRoot = {
+    dom: container,
+    props: {
+      children: [element],
+    },
+    alternate: state.currentRoot,
+  };
+
+  state.nextUnitOfWork = state.wipRoot;
+  state.deletions = [];
+  scheduleWork(state.wipRoot);
+  return state.wipRoot
+};
+
+const init = (MainElement, root = '__ryunix') => {
+  const state = getState();
+  state.containerRoot = document.getElementById(root);
+  const renderProcess = render(MainElement, state.containerRoot);
+  return renderProcess
+};
+
+const safeRender = (component, props, onError) => {
+  try {
+    return component(props)
+  } catch (error) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error('Component error:', error);
+    }
+    if (onError) onError(error);
+    return null
+  }
+};
+
+const validateHookCall = () => {
+  const state = getState();
+  if (!state.wipFiber) {
+    throw new Error(
+      'Hooks can only be called inside the body of a function component.',
+    )
+  }
+  if (!Array.isArray(state.wipFiber.hooks)) {
+    state.wipFiber.hooks = [];
+  }
+};
+
+const haveDepsChanged = (oldDeps, newDeps) => {
+  if (!oldDeps || !newDeps) return true
+  if (oldDeps.length !== newDeps.length) return true
+  return oldDeps.some((dep, i) => !Object.is(dep, newDeps[i]))
+};
+
+const useStore = (initialState) => {
+  const reducer = (state, action) =>
+    is.function(action) ? action(state) : action;
+  return useReducer(reducer, initialState)
+};
+
+const useReducer = (reducer, initialState, init) => {
+  validateHookCall();
+
+  const state = getState();
+  const { wipFiber, hookIndex } = state;
+  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_STORE,
+    state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
+    queue: [], // Siempre nueva cola vacía
+  };
+
+  // Procesar acciones del render anterior
+  if (oldHook?.queue) {
+    oldHook.queue.forEach((action) => {
+      try {
+        hook.state = reducer(hook.state, action);
+      } catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Error in reducer:', error);
+        }
+      }
+    });
+  }
+
+  const dispatch = (action) => {
+    if (action === undefined) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('dispatch called with undefined action');
+      }
+      return
+    }
+
+    hook.queue.push(action);
+
+    const currentState = getState();
+    currentState.wipRoot = {
+      dom: currentState.currentRoot.dom,
+      props: currentState.currentRoot.props,
+      alternate: currentState.currentRoot,
+    };
+    currentState.deletions = [];
+    currentState.hookIndex = 0;
+    scheduleWork(currentState.wipRoot);
+  };
+
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
+  return [hook.state, dispatch]
+};
+
+const useEffect = (callback, deps) => {
+  validateHookCall();
+
+  if (!is.function(callback)) {
+    throw new Error('useEffect callback must be a function')
+  }
+  if (deps !== undefined && !Array.isArray(deps)) {
+    throw new Error('useEffect dependencies must be an array or undefined')
+  }
+
+  const state = getState();
+  const { wipFiber, hookIndex } = state;
+  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+  const hasChanged = haveDepsChanged(oldHook?.deps, deps);
+
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_EFFECT,
+    deps,
+    effect: hasChanged ? callback : null,
+    cancel: oldHook?.cancel,
+  };
+
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
+};
+
+const useRef = (initialValue) => {
+  validateHookCall();
+
+  const state = getState();
+  const { wipFiber, hookIndex } = state;
+  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_REF,
+    value: oldHook ? oldHook.value : { current: initialValue },
+  };
+
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
+  return hook.value
+};
+
+const useMemo = (compute, deps) => {
+  validateHookCall();
+
+  if (!is.function(compute)) {
+    throw new Error('useMemo callback must be a function')
+  }
+  if (!Array.isArray(deps)) {
+    throw new Error('useMemo requires a dependencies array')
+  }
+
+  const state = getState();
+  const { wipFiber, hookIndex } = state;
+  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+
+  let value;
+  if (oldHook && !haveDepsChanged(oldHook.deps, deps)) {
+    value = oldHook.value;
+  } else {
+    try {
+      value = compute();
+    } catch (error) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error('Error in useMemo computation:', error);
+      }
+      value = undefined;
+    }
+  }
+
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_MEMO,
+    value,
+    deps,
+  };
+
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
+  return value
+};
+
+const useCallback = (callback, deps) => {
+  if (!is.function(callback)) {
+    throw new Error('useCallback requires a function as first argument')
+  }
+  return useMemo(() => callback, deps)
+};
+
+const createContext = (
+  contextId = RYUNIX_TYPES.RYUNIX_CONTEXT,
+  defaultValue = {},
+) => {
+  const Provider = ({ children, value }) => {
+    const element = Fragment({ children });
+    element._contextId = contextId;
+    element._contextValue = value;
+    return element
+  };
+
+  Provider._contextId = contextId;
+
+  const useContext = (ctxID = contextId) => {
+    validateHookCall();
+
+    const state = getState();
+    let fiber = state.wipFiber;
+
+    while (fiber) {
+      if (fiber._contextId === ctxID && fiber._contextValue !== undefined) {
+        return fiber._contextValue
+      }
+      if (
+        fiber.type?._contextId === ctxID &&
+        fiber.props?.value !== undefined
+      ) {
+        return fiber.props.value
+      }
+      fiber = fiber.parent;
+    }
+    return defaultValue
+  };
+
+  return { Provider, useContext }
+};
+
+const useQuery = () => {
+  if (typeof window === 'undefined') return {}
+
+  const searchParams = new URLSearchParams(window.location.search);
+  const query = {};
+  for (const [key, value] of searchParams.entries()) {
+    query[key] = value;
+  }
+  return query
+};
+
+const useHash = () => {
+  if (typeof window === 'undefined') return ''
+
+  const [hash, setHash] = useStore(window.location.hash);
+  useEffect(() => {
+    const onHashChange = () => setHash(window.location.hash);
+    window.addEventListener('hashchange', onHashChange);
+    return () => window.removeEventListener('hashchange', onHashChange)
+  }, []);
+  return hash
+};
+
+const useMetadata = (tags = {}, options = {}) => {
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+
+    let finalTitle = 'Ryunix App';
+    const template = options.title?.template;
+    const defaultTitle = options.title?.prefix || 'Ryunix App';
+    const pageTitle = tags.pageTitle || tags.title;
+
+    if (is.string(pageTitle) && pageTitle.trim()) {
+      finalTitle = template?.includes('%s')
+        ? template.replace('%s', pageTitle)
+        : pageTitle;
+    } else {
+      finalTitle = defaultTitle;
+    }
+
+    document.title = finalTitle;
+
+    if (tags.canonical) {
+      let link = document.querySelector('link[rel="canonical"]');
+      if (!link) {
+        link = document.createElement('link');
+        link.setAttribute('rel', 'canonical');
+        document.head.appendChild(link);
+      }
+      link.setAttribute('href', tags.canonical);
+    }
+
+    Object.entries(tags).forEach(([key, value]) => {
+      if (['title', 'pageTitle', 'canonical'].includes(key)) return
+
+      const isProperty = key.startsWith('og:') || key.startsWith('twitter:');
+      const selector = `meta[${isProperty ? 'property' : 'name'}='${key}']`;
+      let meta = document.head.querySelector(selector);
+
+      if (!meta) {
+        meta = document.createElement('meta');
+        meta.setAttribute(isProperty ? 'property' : 'name', key);
+        document.head.appendChild(meta);
+      }
+      meta.setAttribute('content', value);
+    });
+  }, [JSON.stringify(tags), JSON.stringify(options)]);
+};
+
+// Router Context
+const RouterContext = createContext('ryunix.navigation', {
+  location: '/',
+  params: {},
+  query: {},
+  navigate: (path) => {},
+  route: null,
+});
+
+const findRoute = (routes, path) => {
+  const pathname = path.split('?')[0].split('#')[0];
+  const notFoundRoute = routes.find((route) => route.NotFound);
+  const notFound = notFoundRoute
+    ? { route: { component: notFoundRoute.NotFound }, params: {} }
+    : { route: { component: null }, params: {} };
+
+  for (const route of routes) {
+    if (route.subRoutes) {
+      const childRoute = findRoute(route.subRoutes, path);
+      if (childRoute) return childRoute
+    }
+    if (route.path === '*') return notFound
+    if (!route.path || typeof route.path !== 'string') continue
+
+    const keys = [];
+    const pattern = new RegExp(
+      `^${route.path.replace(/:\w+/g, (match) => {
+        keys.push(match.substring(1));
+        return '([^/]+)'
+      })}$`,
+    );
+
+    const match = pathname.match(pattern);
+    if (match) {
+      const params = keys.reduce((acc, key, index) => {
+        acc[key] = match[index + 1];
+        return acc
+      }, {});
+      return { route, params }
+    }
+  }
+  return notFound
+};
+
+const RouterProvider = ({ routes, children }) => {
+  const [location, setLocation] = useStore(window.location.pathname);
+
+  useEffect(() => {
+    const update = () => setLocation(window.location.pathname);
+    window.addEventListener('popstate', update);
+    window.addEventListener('hashchange', update);
+    return () => {
+      window.removeEventListener('popstate', update);
+      window.removeEventListener('hashchange', update);
+    }
+  }, [location]);
+
+  const navigate = (path) => {
+    window.history.pushState({}, '', path);
+    setLocation(path);
+  };
+
+  const currentRouteData = findRoute(routes, location) || {};
+  const query = useQuery();
+
+  const contextValue = {
+    location,
+    params: currentRouteData.params || {},
+    query,
+    navigate,
+    route: currentRouteData.route,
+  };
+
+  return createElement(
+    RouterContext.Provider,
+    { value: contextValue },
+    Fragment({ children }),
+  )
+};
+
+const useRouter = () => {
+  return RouterContext.useContext('ryunix.navigation')
+};
+
+const Children = () => {
+  const { route, params, query, location } = useRouter();
+  if (!route || !route.component) return null
+  const hash = useHash();
+
+  useEffect(() => {
+    if (hash) {
+      const id = hash.slice(1);
+      const el = document.getElementById(id);
+      if (el) el.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }
+  }, [hash]);
+
+  return createElement(route.component, {
+    key: location,
+    params,
+    query,
+    hash,
+  })
+};
+
+const NavLink = ({ to, exact = false, ...props }) => {
+  const { location, navigate } = useRouter();
+  const isActive = exact ? location === to : location.startsWith(to);
+
+  const resolveClass = (cls) =>
+    typeof cls === 'function' ? cls({ isActive }) : cls || '';
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    navigate(to);
+  };
+
+  const classAttrName = props['ryunix-class'] ? 'ryunix-class' : 'className';
+  const classAttrValue = resolveClass(
+    props['ryunix-class'] || props['className'],
+  );
+
+  const {
+    ['ryunix-class']: _omitRyunix,
+    className: _omitClassName,
+    ...cleanedProps
+  } = props;
+
+  return createElement(
+    'a',
+    {
+      href: to,
+      onClick: handleClick,
+      [classAttrName]: classAttrValue,
+      ...cleanedProps,
+    },
+    props.children,
+  )
+};
+
+/**
+ * useStore with priority support
+ */
+const useStorePriority = (initialState) => {
+  const reducer = (state, action) =>
+    typeof action === 'function' ? action.value(state) : action.value;
+
+  const [state, baseDispatch] = useReducer(reducer, initialState);
+
+  const dispatch = (action, priority = Priority.NORMAL) => {
+    const wrappedAction = {
+      value: action,
+      priority,
+    };
+
+    baseDispatch(wrappedAction);
+  };
+
+  return [state, dispatch]
+};
+
+/**
+ * useTransition - Mark updates as non-urgent
+ */
+const useTransition = () => {
+  const [isPending, setIsPending] = useStorePriority(false);
+
+  const startTransition = (callback) => {
+    setIsPending(true, Priority.IMMEDIATE);
+
+    setTimeout(() => {
+      callback();
+      setIsPending(false, Priority.IMMEDIATE);
+    }, 0);
+  };
+
+  return [isPending, startTransition]
+};
+
+/**
+ * useDeferredValue - Defer value updates
+ */
+const useDeferredValue = (value) => {
+  const [deferredValue, setDeferredValue] = useStorePriority(value);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDeferredValue(value, Priority.LOW);
+    }, 100);
+
+    return () => clearTimeout(timeout)
+  }, [value]);
+
+  return deferredValue
+};
+
+var hooks = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Children: Children,
+  NavLink: NavLink,
+  RouterProvider: RouterProvider,
+  createContext: createContext,
+  useCallback: useCallback,
+  useDeferredValue: useDeferredValue,
+  useEffect: useEffect,
+  useHash: useHash,
+  useMemo: useMemo,
+  useMetadata: useMetadata,
+  useQuery: useQuery,
+  useReducer: useReducer,
+  useRef: useRef,
+  useRouter: useRouter,
+  useStore: useStore,
+  useStorePriority: useStorePriority,
+  useTransition: useTransition
+});
+
+/**
+ * memo - Memoize component to prevent unnecessary re-renders
+ */
+const memo = (Component, arePropsEqual) => {
+  return (props) => {
+    const memoizedElement = useMemo(() => {
+      return Component(props)
+    }, [
+      // Default comparison: shallow props comparison
+      ...Object.values(props),
+    ]);
+
+    return memoizedElement
+  }
+};
+
+/**
+ * Lazy load component
+ */
+const lazy = (importFn) => {
+  let Component = null;
+  let promise = null;
+  let error = null;
+
+  return (props) => {
+    const [, forceUpdate] = useStore(0);
+
+    useEffect(() => {
+      if (Component || error) return
+
+      if (!promise) {
+        promise = importFn()
+          .then((module) => {
+            Component = module.default || module;
+            forceUpdate((x) => x + 1);
+          })
+          .catch((err) => {
+            error = err;
+            forceUpdate((x) => x + 1);
+          });
+      }
+    }, []);
+
+    if (error) throw error
+    if (!Component) return null
+    return createElement(Component, props)
+  }
+};
+
+/**
+ * Suspense component (basic implementation)
+ */
+const Suspense = ({ fallback, children }) => {
+  const [isLoading, setIsLoading] = useStore(true);
+
+  useEffect(() => {
+    setIsLoading(false);
+  }, []);
+
+  if (isLoading && fallback) {
+    return fallback
+  }
+
+  return children
+};
+
+let isBatching = false;
+let pendingUpdates = [];
+
+/**
+ * Batch multiple state updates into single render
+ */
+const batchUpdates = (callback) => {
+  const wasBatching = isBatching;
+  isBatching = true;
+
+  try {
+    callback();
+  } finally {
+    isBatching = wasBatching;
+
+    if (!isBatching && pendingUpdates.length > 0) {
+      flushUpdates();
+    }
+  }
+};
+
+/**
+ * Flush all pending updates
+ */
+const flushUpdates = () => {
+  if (pendingUpdates.length === 0) return
+
+  const updates = pendingUpdates;
+  pendingUpdates = [];
+
+  // Execute all updates
+  updates.forEach((update) => update());
+};
+
+var Ryunix = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Fragment: Fragment,
+  Hooks: hooks,
+  Priority: Priority,
+  Suspense: Suspense,
+  batchUpdates: batchUpdates,
+  createElement: createElement,
+  init: init,
+  lazy: lazy,
+  memo: memo,
+  profiler: profiler,
+  render: render,
+  safeRender: safeRender,
+  useProfiler: useProfiler,
+  withProfiler: withProfiler
+});
+
+window.Ryunix = Ryunix;
+
+export { Fragment, hooks as Hooks, Image, Priority, Suspense, batchUpdates, createElement, Ryunix as default, init, lazy, memo, profiler, render, safeRender, useProfiler, withProfiler };
+//# sourceMappingURL=Ryunix.esm.js.map