@unsetsoft/ryunixjs 1.2.3-canary.1 → 1.2.3-canary.11

package/dist/Ryunix.esm.js

@@ -0,0 +1,1576 @@
+// 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);
+  });
+};
+
+/**
+ * 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;
+
+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
+});
+
+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);
+};
+
+/* Image component */
+const Image = ({ src, ...props }) => {
+  return createElement('img', { ...props, src })
+};
+
+const { Provider: MDXProvider, useContext: useMDXComponents } = createContext(
+  'ryunix.mdx',
+  {},
+);
+
+/**
+ * Get merged MDX components from context and provided components
+ * @param {Object} components - Additional components to merge
+ * @returns {Object} Merged components object
+ */
+const getMDXComponents = (components) => {
+  const contextComponents = useMDXComponents();
+  return {
+    ...contextComponents,
+    ...components,
+  }
+};
+
+/**
+ * Default MDX components with Ryunix-optimized rendering
+ */
+const defaultComponents = {
+  // Headings
+  h1: (props) => createElement('h1', { ...props }),
+  h2: (props) => createElement('h2', { ...props }),
+  h3: (props) => createElement('h3', { ...props }),
+  h4: (props) => createElement('h4', { ...props }),
+  h5: (props) => createElement('h5', { ...props }),
+  h6: (props) => createElement('h6', { ...props }),
+
+  // Text
+  p: (props) => createElement('p', { ...props }),
+  a: (props) => createElement('a', { ...props }),
+  strong: (props) => createElement('strong', { ...props }),
+  em: (props) => createElement('em', { ...props }),
+  code: (props) => createElement('code', { ...props }),
+
+  // Lists
+  ul: (props) => createElement('ul', { ...props }),
+  ol: (props) => createElement('ol', { ...props }),
+  li: (props) => createElement('li', { ...props }),
+
+  // Blocks
+  blockquote: (props) => createElement('blockquote', { ...props }),
+  pre: (props) => createElement('pre', { ...props }),
+  hr: (props) => createElement('hr', { ...props }),
+
+  // Tables
+  table: (props) => createElement('table', { ...props }),
+  thead: (props) => createElement('thead', { ...props }),
+  tbody: (props) => createElement('tbody', { ...props }),
+  tr: (props) => createElement('tr', { ...props }),
+  th: (props) => createElement('th', { ...props }),
+  td: (props) => createElement('td', { ...props }),
+
+  // Media
+  img: (props) => createElement('img', { ...props }),
+};
+
+/**
+ * MDX Wrapper component
+ * Provides default styling and components for MDX content
+ */
+const MDXContent = ({ children, components = {} }) => {
+  const mergedComponents = getMDXComponents(components);
+
+  return createElement(
+    MDXProvider,
+    { value: mergedComponents },
+    createElement('div', null, children),
+  )
+};
+
+/**
+ * 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
+  }
+};
+
+/**
+ * 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,
+  Children: Children,
+  Fragment: Fragment,
+  Hooks: hooks,
+  NavLink: NavLink,
+  Priority: Priority,
+  RouterProvider: RouterProvider,
+  Suspense: Suspense,
+  batchUpdates: batchUpdates,
+  createContext: createContext,
+  createElement: createElement,
+  init: init,
+  lazy: lazy,
+  memo: memo,
+  profiler: profiler,
+  render: render,
+  safeRender: safeRender,
+  useCallback: useCallback,
+  useDeferredValue: useDeferredValue,
+  useEffect: useEffect,
+  useHash: useHash,
+  useMemo: useMemo,
+  useMetadata: useMetadata,
+  useProfiler: useProfiler,
+  useQuery: useQuery,
+  useReducer: useReducer,
+  useRef: useRef,
+  useRouter: useRouter,
+  useStore: useStore,
+  useStorePriority: useStorePriority,
+  useTransition: useTransition,
+  withProfiler: withProfiler
+});
+
+window.Ryunix = Ryunix;
+
+export { Children, Fragment, hooks as Hooks, Image, MDXContent, MDXProvider, NavLink, Priority, RouterProvider, Suspense, batchUpdates, createContext, createElement, Ryunix as default, defaultComponents, getMDXComponents, init, lazy, memo, profiler, render, safeRender, useCallback, useDeferredValue, useEffect, useHash, useMDXComponents, useMemo, useMetadata, useProfiler, useQuery, useReducer, useRef, useRouter, useStore, useStorePriority, useTransition, withProfiler };
+//# sourceMappingURL=Ryunix.esm.js.map