@unsetsoft/ryunixjs 1.2.5-canary.6 → 1.2.5-canary.7

package/dist/Ryunix.js

@@ -1,1521 +0,0 @@
-;(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined'
-    ? factory(exports)
-    : typeof define === 'function' && define.amd
-      ? define(['exports'], factory)
-      : ((global =
-          typeof globalThis !== 'undefined' ? globalThis : global || self),
-        factory((global.Ryunix = {})))
-})(this, function (exports) {
-  'use strict'
-
-  // 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
-
-  exports.Fragment = Fragment
-  exports.Hooks = hooks
-  exports.Image = Image
-  exports.Priority = Priority
-  exports.Suspense = Suspense
-  exports.batchUpdates = batchUpdates
-  exports.createElement = createElement
-  exports.default = Ryunix
-  exports.init = init
-  exports.lazy = lazy
-  exports.memo = memo
-  exports.profiler = profiler
-  exports.render = render
-  exports.safeRender = safeRender
-  exports.useProfiler = useProfiler
-  exports.withProfiler = withProfiler
-
-  Object.defineProperty(exports, '__esModule', { value: true })
-})
-//# sourceMappingURL=Ryunix.js.map