@unsetsoft/ryunixjs 1.2.3-canary.8 → 1.2.4-canary.1

package/dist/Ryunix.esm.js

@@ -56,6 +56,17 @@ const EFFECT_TAGS = Object.freeze({
   NO_EFFECT: Symbol.for('ryunix.reconciler.status.no_effect'),
 });
 
+const DANGEROUSLY_SET_INNER_HTML = 'dangerousInjection';
+
+const DANGEROUS_PROPERTIES = Object.freeze([
+  'innerHTML',
+  'outerHTML',
+  'insertAdjacentHTML',
+  'insertAdjacentText',
+  'insertAdjacentElement',
+  'setHTML',
+]);
+
 /**
  * Type checking utilities
  */
@@ -70,7 +81,12 @@ const is = {
 };
 
 /**
- * Create text element
+ * The `createTextElement` function creates a text element with the specified text content.
+ * @param text - The `text` parameter in the `createTextElement` function is the text content that you
+ * want to create a text element for. This text will be set as the `nodeValue` of the text element in
+ * the returned object.
+ * @returns A text element object is being returned with a type of RYUNIX_TYPES.TEXT_ELEMENT and props
+ * containing the text value provided in the function argument.
  */
 const createTextElement = (text) => {
   return {
@@ -83,7 +99,21 @@ const createTextElement = (text) => {
 };
 
 /**
- * Create element
+ * The `createElement` function creates a virtual DOM element with specified type, properties, and
+ * children.
+ * @param type - The `type` parameter in the `createElement` function represents the type of element
+ * you want to create, such as a HTML tag like 'div', 'span', 'p', etc.
+ * @param props - The `props` parameter in the `createElement` function is an object that contains the
+ * properties or attributes for the element being created. These properties can include things like
+ * class names, styles, event handlers, and any other custom attributes you want to assign to the
+ * element. In the code snippet you provided,
+ * @param children - The `children` parameter in the `createElement` function represents the child
+ * elements or text content that will be nested within the created element. These children can be
+ * passed as arguments to the `createElement` function and will be rendered as part of the element's
+ * content.
+ * @returns An object is being returned with a `type` property representing the type of element, and a
+ * `props` property containing the element's properties. The `props` object includes the children of
+ * the element, which are processed to ensure they are in the correct format.
  */
 const createElement = (type, props, ...children) => {
   const safeProps = props || {};
@@ -102,7 +132,14 @@ const createElement = (type, props, ...children) => {
 };
 
 /**
- * Fragment component
+ * The `Fragment` function in JavaScript creates a fragment element with the given children.
+ * @param props - The `props` parameter in the `Fragment` function is an object that contains the
+ * properties passed to the `Fragment` component. These properties can include `children`, which
+ * represents the child elements or components nested within the `Fragment`.
+ * @returns The `Fragment` component is returning a Ryunix fragment element created using the
+ * `createElement` function. The element is of type `RYUNIX_TYPES.RYUNIX_FRAGMENT` and contains the
+ * children passed to the `Fragment` component. If `props.children` is not an array, it is converted
+ * into an array before being spread into the `createElement` function.
  */
 const Fragment = (props) => {
   const children = Array.isArray(props.children)
@@ -243,6 +280,71 @@ const runEffects = (fiber) => {
   }
 };
 
+/**
+ * Checks if a property is dangerous and should be blocked
+ * @param {string} propName - Property name
+ * @returns {boolean} True if the property is dangerous
+ */
+const isDangerousProperty = (propName) => {
+  return DANGEROUS_PROPERTIES.includes(propName)
+};
+
+/**
+ * Validates and applies DANGEROUSLY_SET_INNER_HTML safely
+ * @param {HTMLElement} dom - DOM element
+ * @param {Object} DANGEROUSLY_SET_INNER_HTML - Object with __html property
+ */
+const applyDangerouslySetInnerHTML = (dom, dangerousInjection) => {
+  if (!is.object(dangerousInjection)) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `${DANGEROUSLY_SET_INNER_HTML} must be an object with the __html property`,
+      );
+    }
+    return
+  }
+
+  if (!('__html' in dangerousInjection)) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `${DANGEROUSLY_SET_INNER_HTML} must have the __html property`,
+      );
+    }
+    return
+  }
+
+  const html = dangerousInjection.__html;
+
+  if (html == null) {
+    dom.innerHTML = '';
+    return
+  }
+
+  if (typeof html !== 'string') {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(`${DANGEROUSLY_SET_INNER_HTML}.__html must be a string`);
+    }
+    return
+  }
+
+  // Warning in development
+  if (process.env.NODE_ENV !== 'production') {
+    console.warn(
+      `⚠️ WARNING: You are using ${DANGEROUSLY_SET_INNER_HTML}. ` +
+        'This can expose your application to XSS attacks if the content is not sanitized. ' +
+        'Make sure you trust the source of the HTML before using it.',
+    );
+  }
+
+  try {
+    dom.innerHTML = html;
+  } catch (error) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error('Error setting innerHTML:', error);
+    }
+  }
+};
+
 /**
  * Convert camelCase to kebab-case for CSS properties
  * @param {string} camelCase - CamelCase string
@@ -357,6 +459,40 @@ const createDom = (fiber) => {
  * @param {Object} nextProps - Next props
  */
 const updateDom = (dom, prevProps = {}, nextProps = {}) => {
+  // Block dangerous properties
+  const dangerousProps = Object.keys(nextProps).filter(isDangerousProperty);
+  if (dangerousProps.length > 0) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(
+        `⚠️ SECURITY ERROR: Attempted to use ${DANGEROUS_PROPERTIES.join(', ')}: ${dangerousProps.join(', ')}. ` +
+          `These properties are blocked to prevent XSS injections. ` +
+          `If you need to insert HTML, use ${DANGEROUSLY_SET_INNER_HTML} with the structure: ` +
+          `{ ${DANGEROUSLY_SET_INNER_HTML}: { __html: 'your html here' } }`,
+      );
+    }
+    // Remove dangerous properties from nextProps to prevent their use
+    dangerousProps.forEach((prop) => {
+      delete nextProps[prop];
+    });
+  }
+
+  // Handle dangerouslySetInnerHTML
+  if (DANGEROUSLY_SET_INNER_HTML in nextProps) {
+    // If there are children along with dangerouslySetInnerHTML, warn
+    if (nextProps.children && nextProps.children.length > 0) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn(
+          `⚠️ WARNING: You cannot use children together with ${DANGEROUSLY_SET_INNER_HTML}. ` +
+            'Children will be ignored.',
+        );
+      }
+    }
+    applyDangerouslySetInnerHTML(dom, nextProps[DANGEROUSLY_SET_INNER_HTML]);
+  } else if (DANGEROUSLY_SET_INNER_HTML in prevProps) {
+    // If dangerouslySetInnerHTML was removed, clear innerHTML
+    dom.innerHTML = '';
+  }
+
   // Remove old event listeners
   Object.keys(prevProps)
     .filter(isEvent)
@@ -384,11 +520,20 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
           OLD_STRINGS.STYLE,
           STRINGS.CLASS_NAME,
           OLD_STRINGS.CLASS_NAME,
+          DANGEROUSLY_SET_INNER_HTML,
         ].includes(name)
       ) {
         return
       }
-      dom[name] = '';
+      // Don't try to clean dangerous properties
+      if (isDangerousProperty(name)) {
+        return
+      }
+      try {
+        dom[name] = '';
+      } catch (error) {
+        // Ignore errors when cleaning read-only properties
+      }
     });
 
   // Set new properties
@@ -397,6 +542,11 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
     .filter(isNew(prevProps, nextProps))
     .forEach((name) => {
       try {
+        // Skip dangerouslySetInnerHTML (already handled above)
+        if (name === DANGEROUSLY_SET_INNER_HTML) {
+          return
+        }
+
         // Handle style properties
         if (name === STRINGS.STYLE || name === OLD_STRINGS.STYLE) {
           const styleValue = nextProps[name];
@@ -450,6 +600,9 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
     });
 };
 
+/**
+ * The `commitRoot` function commits the changes made to the virtual DOM by updating the actual DOM.
+ */
 const commitRoot = () => {
   const state = getState();
   state.deletions.forEach(commitWork);
@@ -587,34 +740,6 @@ const reconcileChildren = (wipFiber, elements) => {
   });
 };
 
-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
  */
@@ -628,738 +753,1068 @@ const Priority = {
 
 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;
+const validateHookCall = () => {
+  const state = getState();
+  if (!state.wipFiber) {
+    throw new Error(
+      'Hooks can only be called inside the body of a function component.',
+    )
   }
-
-  startMeasure(name) {
-    if (!this.enabled) return
-    this.measures.set(name, performance.now());
+  if (!Array.isArray(state.wipFiber.hooks)) {
+    state.wipFiber.hooks = [];
   }
+};
 
-  endMeasure(name) {
-    if (!this.enabled) return
-    const start = this.measures.get(name);
-    if (!start) return
+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 duration = performance.now() - start;
-    this.measures.delete(name);
+/**
+ * The `useStore` function in JavaScript is a custom hook that uses a reducer to manage state updates
+ * based on actions provided.
+ * @param initialState - The `initialState` parameter in the `useStore` function is the initial state
+ * of the store that will be used with the `useReducer` hook. It represents the starting state of the
+ * store before any actions are dispatched to update it.
+ * @returns The `useStore` function is returning the result of calling the `useReducer` hook with the
+ * `reducer` function and the `initialState` as arguments.
+ */
+const useStore = (initialState) => {
+  const reducer = (state, action) =>
+    is.function(action) ? action(state) : action;
+  return useReducer(reducer, initialState)
+};
 
-    return duration
-  }
+/**
+ * The `useReducer` function in JavaScript is used to manage state and actions.
+ *
+ * @param reducer - The `reducer` parameter in the `useReducer` function is a function that specifies
+ * how the state should be updated in response to an action. It takes the current state and an action
+ * as arguments and returns the new state based on the action.
+ * @param initialState - The `initialState` parameter in the `useReducer` function represents the
+ * initial state of the reducer. It is the state that will be used when the reducer is first called or
+ * when the state needs to be reset. This initial state can be a simple value, an object, an array, or
+ * @param init - The `init` parameter in the `useReducer` function is an optional function that can be
+ * used to initialize the state. If provided, it will be called with the `initialState` as its argument
+ * and the return value will be used as the initial state for the reducer. If `init`
+ * @returns An array containing the current state and the dispatch function is being returned.
+ */
+const useReducer = (reducer, initialState, init) => {
+  validateHookCall();
 
-  recordRender(componentName, duration) {
-    if (!this.enabled) return
+  const state = getState();
+  const { wipFiber, hookIndex } = state;
+  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
 
-    this.renderTimes.push({
-      component: componentName,
-      duration,
-      timestamp: Date.now(),
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_STORE,
+    state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
+    queue: [],
+  };
+
+  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);
+        }
+      }
     });
+  }
 
-    if (this.renderTimes.length > this.maxSamples) {
-      this.renderTimes.shift();
+  const dispatch = (action) => {
+    if (action === undefined) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('dispatch called with undefined action');
+      }
+      return
     }
-  }
 
-  getStats() {
-    if (!this.enabled) return null
+    hook.queue.push(action);
 
-    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));
+    const currentState = getState();
+    currentState.wipRoot = {
+      dom: currentState.currentRoot.dom,
+      props: currentState.currentRoot.props,
+      alternate: currentState.currentRoot,
+    };
+    currentState.deletions = [];
+    currentState.hookIndex = 0;
+    scheduleWork(currentState.wipRoot);
+  };
 
-    return { total, avg, max, min, count: this.renderTimes.length }
-  }
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
+  return [hook.state, dispatch]
+};
 
-  getSlowestComponents(limit = 10) {
-    if (!this.enabled) return []
+/**
+ * The `useEffect` function in JavaScript is used to manage side effects in functional components by
+ * comparing dependencies and executing a callback function when dependencies change.
+ * @param callback - The `callback` parameter in the `useEffect` function is a function that will be
+ * executed as the effect. This function can perform side effects like data fetching, subscriptions, or
+ * DOM manipulations.
+ * @param deps - The `deps` parameter in the `useEffect` function stands for dependencies. It is an
+ * optional array that contains values that the effect depends on. The effect will only re-run if any
+ * of the values in the `deps` array have changed since the last render. If the `deps` array
+ */
+const useEffect = (callback, deps) => {
+  validateHookCall();
 
-    const byComponent = new Map();
+  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')
+  }
 
-    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);
-    });
+  const state = getState();
+  const { wipFiber, hookIndex } = state;
+  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+  const hasChanged = haveDepsChanged(oldHook?.deps, deps);
 
-    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)
-  }
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_EFFECT,
+    deps,
+    effect: hasChanged ? callback : null,
+    cancel: oldHook?.cancel,
+  };
 
-  logStats() {
-    if (!this.enabled) return
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
+};
 
-    const stats = this.getStats();
-    if (!stats) return
+/**
+ * The useRef function in JavaScript creates a reference object with an initial value for use in functional components.
+ * @param initialValue - The `initialValue` parameter in the `useRef` function represents the initial
+ * value that will be assigned to the `current` property of the reference object. This initial value
+ * will be used if there is no previous value stored in the hook.
+ * @returns The `useRef` function is returning the `current` property of the `hook.value` object, which
+ * contains the initial value passed to the `useRef` function.
+ */
+const useRef = (initialValue) => {
+  validateHookCall();
 
-    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 state = getState();
+  const { wipFiber, hookIndex } = state;
+  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
 
-    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();
-  }
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_REF,
+    value: oldHook ? oldHook.value : { current: initialValue },
+  };
 
-  clear() {
-    this.renderTimes = [];
-    this.measures.clear();
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
+  return hook.value
+};
+
+/**
+ * The useMemo function in JavaScript is used to memoize the result of a computation based on
+ * dependencies.
+ * @param compute - The `compute` parameter in the `useMemo` function is a callback function that
+ * calculates the value that `useMemo` will memoize and return. This function will be called to compute
+ * the memoized value when necessary.
+ * @param deps - The `deps` parameter in the `useMemo` function refers to an array of dependencies.
+ * These dependencies are used to determine whether the memoized value needs to be recalculated or if
+ * the previously calculated value can be reused. The `useMemo` hook will recompute the memoized value
+ * only if
+ * @returns The `useMemo` function is returning the `value` calculated by the `compute` function.
+ */
+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')
   }
 
-  enable() {
-    this.enabled = true;
+  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;
+    }
   }
 
-  disable() {
-    this.enabled = false;
+  const hook = {
+    hookID: hookIndex,
+    type: RYUNIX_TYPES.RYUNIX_MEMO,
+    value,
+    deps,
+  };
+
+  wipFiber.hooks[hookIndex] = hook;
+  state.hookIndex++;
+  return value
+};
+
+/**
+ * The useCallback function in JavaScript ensures that a callback function is memoized based on its
+ * dependencies.
+ * @param callback - A function that you want to memoize and return for later use.
+ * @param deps - The `deps` parameter in the `useCallback` function refers to an array of dependencies.
+ * These dependencies are used to determine when the callback function should be re-evaluated and
+ * memoized. If any of the dependencies change, the callback function will be re-executed and the
+ * memoized value will
+ * @returns The useCallback function is returning the memoized version of the callback function passed
+ * as the first argument, based on the dependencies array provided as the second argument.
+ */
+const useCallback = (callback, deps) => {
+  if (!is.function(callback)) {
+    throw new Error('useCallback requires a function as first argument')
   }
-}
+  return useMemo(() => callback, deps)
+};
 
-// Global profiler instance
-const profiler = new Profiler();
+/**
+ * The createContext function creates a context provider and useContext hook in JavaScript.
+ * @param [contextId] - The `contextId` parameter in the `createContext` function is used to specify
+ * the unique identifier for the context being created. It defaults to `RYUNIX_TYPES.RYUNIX_CONTEXT` if
+ * not provided.
+ * @param [defaultValue] - The `defaultValue` parameter in the `createContext` function is used to
+ * specify the default value that will be returned by the `useContext` hook if no provider is found in
+ * the component tree. It is an optional parameter, and if not provided, an empty object `{}` will be
+ * used as
+ * @returns The `createContext` function returns an object with two properties: `Provider` and
+ * `useContext`. The `Provider` property is a component that accepts `children` and `value` props, and
+ * sets the `_contextId` and `_contextValue` properties on the element. The `useContext` property is a
+ * hook function that retrieves the context value based on the context ID provided, or
+ */
+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 }
+};
 
 /**
- * Hook to profile component render
+ * The `useQuery` function extracts query parameters from the URL in a browser environment.
+ * @returns An object containing the query parameters from the current URL is being returned.
  */
-const useProfiler = (componentName) => {
-  const startTime = performance.now();
+const useQuery = () => {
+  if (typeof window === 'undefined') return {}
 
-  return () => {
-    const duration = performance.now() - startTime;
-    profiler.recordRender(componentName, duration);
+  const searchParams = new URLSearchParams(window.location.search);
+  const query = {};
+  for (const [key, value] of searchParams.entries()) {
+    query[key] = value;
   }
+  return query
 };
 
 /**
- * HOC to profile component
+ * The function `useHash` in JavaScript is used to manage and update the hash portion of the URL in a
+ * web application.
+ * @returns The `useHash` function returns the current hash value from the window's location. If the
+ * window is undefined (e.g., in a server-side environment), it returns an empty string. The function
+ * also sets up an event listener to update the hash value when the hash in the URL changes and removes
+ * the event listener when the component unmounts.
  */
-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 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 workLoop = (deadline) => {
-  const state = getState();
-  let shouldYield = false;
+/**
+ * The `useMetadata` function in JavaScript is used to dynamically update metadata tags in the document
+ * head based on provided tags and options.
+ * @param [tags] - The `tags` parameter in the `useMetadata` function is an object that contains
+ * metadata information for the webpage. It can include properties like `pageTitle`, `canonical`, and
+ * other custom metadata tags like `og:title`, `og:description`, `twitter:title`,
+ * `twitter:description`, etc. These tags
+ * @param [options] - The `options` parameter in the `useMetadata` function is an object that can
+ * contain the following properties:
+ * - `title`: An object that can have the following properties:
+ *  - `template`: A string that defines the template for the page title. It can include a placeholder
+ * `%s` that will be replaced with the actual page title.
+ * - `prefix`: A string that will be used as the default title if no specific page title is provided.
+ * @returns The `useMetadata` function does not return anything. It is a custom hook that updates the
+ * document's metadata (such as title and meta tags) based on the provided `tags` and `options` whenever
+ * they change.
+ * This hook can't be reached by google crawler.
+ */
 
-  while (state.nextUnitOfWork && !shouldYield) {
-    state.nextUnitOfWork = performUnitOfWork(state.nextUnitOfWork);
-    shouldYield = deadline.timeRemaining() < 1;
-  }
+const useMetadata = (tags = {}, options = {}) => {
+  useEffect(() => {
+    if (typeof document === 'undefined') return
 
-  if (!state.nextUnitOfWork && state.wipRoot) {
-    commitRoot();
-  }
+    let finalTitle = 'Ryunix App';
+    const template = options.title?.template;
+    const defaultTitle = options.title?.prefix || 'Ryunix App';
+    const pageTitle = tags.pageTitle || tags.title;
 
-  requestIdleCallback(workLoop);
+    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)]);
 };
 
-requestIdleCallback(workLoop);
+// Router Context
+const RouterContext = createContext('ryunix.navigation', {
+  location: '/',
+  params: {},
+  query: {},
+  navigate: (path) => {},
+  route: null,
+});
 
-const performUnitOfWork = (fiber) => {
-  const componentName = fiber.type?.name || fiber.type?.displayName || 'Unknown';
+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: {} };
 
-  profiler.startMeasure(componentName);
+  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 isFunctionComponent = fiber.type instanceof Function;
-  if (isFunctionComponent) {
-    updateFunctionComponent(fiber);
-  } else {
-    updateHostComponent(fiber);
+    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 duration = profiler.endMeasure(componentName);
-  if (duration) profiler.recordRender(componentName, duration);
+/**
+ * The `RouterProvider` component manages routing in a Ryunix application by updating the location based
+ * on window events and providing context for the current route.
+ * @returns The `RouterProvider` component is returning a `RouterContext.Provider` component with a
+ * `value` prop set to `contextValue`, and wrapping the `children` within a `Fragment`.
+ */
+const RouterProvider = ({ routes, children }) => {
+  const [location, setLocation] = useStore(window.location.pathname);
 
-  if (fiber.child) {
-    return fiber.child
-  }
-  let nextFiber = fiber;
-  while (nextFiber) {
-    if (nextFiber.sibling) {
-      return nextFiber.sibling
+  useEffect(() => {
+    const update = () => setLocation(window.location.pathname);
+    window.addEventListener('popstate', update);
+    window.addEventListener('hashchange', update);
+    return () => {
+      window.removeEventListener('popstate', update);
+      window.removeEventListener('hashchange', update);
     }
-    nextFiber = nextFiber.parent;
-  }
+  }, [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 scheduleWork = (root, priority = Priority.NORMAL) => {
-  const state = getState();
-  state.nextUnitOfWork = root;
-  state.wipRoot = root;
-  state.deletions = [];
-  state.hookIndex = 0;
-  state.effects = [];
+/**
+ * The function `useRouter` returns the context of the Router for navigation in a Ryunix application.
+ * @returns The `useRouter` function is returning the result of calling
+ * `RouterContext.useContext('ryunix.navigation')`. This function is likely attempting to retrieve the
+ * navigation context from the RouterContext.
+ */
+const useRouter = () => {
+  return RouterContext.useContext('ryunix.navigation')
+};
 
-  // Higher priority = faster scheduling
-  if (priority <= Priority.USER_BLOCKING) {
-    requestIdleCallback(workLoop);
-  } else {
-    setTimeout(() => requestIdleCallback(workLoop), 0);
-  }
+/**
+ * The `Children` function in JavaScript uses router hooks to handle scrolling to a specific element
+ * based on the hash in the URL.
+ * @returns The `Children` component is returning the result of calling `createElement` with
+ * `route.component` as the first argument and an object with `key`, `params`, `query`, and `hash`
+ * properties as the second argument. The `key` property is set to `location`, and the `params`,
+ * `query`, and `hash` properties are passed as values from the component's props.
+ */
+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 render = (element, container) => {
-  const state = getState();
-  state.wipRoot = {
-    dom: container,
-    props: {
-      children: [element],
-    },
-    alternate: state.currentRoot,
-  };
+/**
+ * The NavLink function in JavaScript is a component that generates a link element with customizable
+ * classes and active state based on the current location.
+ * @returns The `NavLink` component is returning a JSX element representing an anchor (`<a>`) tag with
+ * the following attributes and properties:
+ */
+const NavLink = ({ to, exact = false, ...props }) => {
+  const { location, navigate } = useRouter();
+  const isActive = exact ? location === to : location.startsWith(to);
 
-  state.nextUnitOfWork = state.wipRoot;
-  state.deletions = [];
-  scheduleWork(state.wipRoot);
-  return state.wipRoot
-};
+  const resolveClass = (cls) =>
+    typeof cls === 'function' ? cls({ isActive }) : cls || '';
 
-const init = (MainElement, root = '__ryunix') => {
-  const state = getState();
-  state.containerRoot = document.getElementById(root);
-  const renderProcess = render(MainElement, state.containerRoot);
-  return renderProcess
-};
+  const handleClick = (e) => {
+    e.preventDefault();
+    navigate(to);
+  };
 
-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 classAttrName = props['ryunix-class'] ? 'ryunix-class' : 'className';
+  const classAttrValue = resolveClass(
+    props['ryunix-class'] || props['className'],
+  );
 
-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 {
+    ['ryunix-class']: _omitRyunix,
+    className: _omitClassName,
+    ...cleanedProps
+  } = props;
 
-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]))
+  return createElement(
+    'a',
+    {
+      href: to,
+      onClick: handleClick,
+      [classAttrName]: classAttrValue,
+      ...cleanedProps,
+    },
+    props.children,
+  )
 };
 
-const useStore = (initialState) => {
+/**
+ * useStore with priority support
+ */
+const useStorePriority = (initialState) => {
   const reducer = (state, action) =>
-    is.function(action) ? action(state) : action;
-  return useReducer(reducer, initialState)
-};
+    typeof action === 'function' ? action.value(state) : action.value;
 
-const useReducer = (reducer, initialState, init) => {
-  validateHookCall();
+  const [state, baseDispatch] = useReducer(reducer, initialState);
 
-  const state = getState();
-  const { wipFiber, hookIndex } = state;
-  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+  const dispatch = (action, priority = Priority.NORMAL) => {
+    const wrappedAction = {
+      value: action,
+      priority,
+    };
 
-  const hook = {
-    hookID: hookIndex,
-    type: RYUNIX_TYPES.RYUNIX_STORE,
-    state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
-    queue: [], // Siempre nueva cola vacía
+    baseDispatch(wrappedAction);
   };
 
-  // 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);
-        }
-      }
-    });
-  }
+  return [state, dispatch]
+};
 
-  const dispatch = (action) => {
-    if (action === undefined) {
-      if (process.env.NODE_ENV !== 'production') {
-        console.warn('dispatch called with undefined action');
-      }
-      return
-    }
+/**
+ * useTransition - Mark updates as non-urgent
+ */
+const useTransition = () => {
+  const [isPending, setIsPending] = useStorePriority(false);
 
-    hook.queue.push(action);
+  const startTransition = (callback) => {
+    setIsPending(true, Priority.IMMEDIATE);
 
-    const currentState = getState();
-    currentState.wipRoot = {
-      dom: currentState.currentRoot.dom,
-      props: currentState.currentRoot.props,
-      alternate: currentState.currentRoot,
-    };
-    currentState.deletions = [];
-    currentState.hookIndex = 0;
-    scheduleWork(currentState.wipRoot);
+    setTimeout(() => {
+      callback();
+      setIsPending(false, Priority.IMMEDIATE);
+    }, 0);
   };
 
-  wipFiber.hooks[hookIndex] = hook;
-  state.hookIndex++;
-  return [hook.state, dispatch]
+  return [isPending, startTransition]
 };
 
-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')
-  }
+/**
+ * useDeferredValue - Defer value updates
+ */
+const useDeferredValue = (value) => {
+  const [deferredValue, setDeferredValue] = useStorePriority(value);
 
-  const state = getState();
-  const { wipFiber, hookIndex } = state;
-  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
-  const hasChanged = haveDepsChanged(oldHook?.deps, deps);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDeferredValue(value, Priority.LOW);
+    }, 100);
 
-  const hook = {
-    hookID: hookIndex,
-    type: RYUNIX_TYPES.RYUNIX_EFFECT,
-    deps,
-    effect: hasChanged ? callback : null,
-    cancel: oldHook?.cancel,
-  };
+    return () => clearTimeout(timeout)
+  }, [value]);
 
-  wipFiber.hooks[hookIndex] = hook;
-  state.hookIndex++;
+  return deferredValue
 };
 
-const useRef = (initialValue) => {
-  validateHookCall();
-
-  const state = getState();
-  const { wipFiber, hookIndex } = state;
-  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+/**
+ * The `usePersitentStore` function manages state using local storage in JavaScript, allowing for easy
+ * storage and retrieval of data.
+ * @param key - The `key` parameter in the `usePersitentStore` function is a string that represents the key
+ * under which the data will be stored in the browser's local storage. It is used to retrieve and store
+ * data associated with this specific key.
+ * @param [initialState] - The `initialState` parameter in the `usePersitentStore` function is the initial
+ * value that will be used if there is no data stored in the local storage under the specified `key`.
+ * It serves as the default value for the state if no data is retrieved from the local storage.
+ * @returns The `usePersitentStore` function returns an array containing two elements:
+ * 1. The current state value retrieved from local storage or the initial state if not found.
+ * 2. The `setValue` function that updates the state value and stores it in the local storage as a JSON
+ * string.
+ */
+const usePersitentStore = (key, initialState = '') => {
+  const [state, dispatch] = useStore(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialState
+    } catch (error) {
+      return initialState
+    }
+  });
 
-  const hook = {
-    hookID: hookIndex,
-    type: RYUNIX_TYPES.RYUNIX_REF,
-    value: oldHook ? oldHook.value : { current: initialValue },
+  /**
+   * The function `setValue` dispatches a value and stores it in the local storage as a JSON string,
+   * handling any errors with a console log.
+   * @param value - The `value` parameter in the `setValue` function is the data that you want to set.
+   * It is dispatched to update the state and then stored in the browser's local storage after being
+   * converted to a JSON string.
+   */
+  const setValue = (value) => {
+    try {
+      dispatch(value);
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error(error);
+    }
   };
 
-  wipFiber.hooks[hookIndex] = hook;
-  state.hookIndex++;
-  return hook.value
+  return [state, setValue]
 };
 
-const useMemo = (compute, deps) => {
-  validateHookCall();
+/**
+ * The `useSwitch` function returns a state value and a toggle function to switch the state between
+ * true and false.
+ * @param [initialState=false] - The `initialState` parameter in the `useSwitch` function is used to
+ * set the initial value of the state. If no value is provided when calling `useSwitch`, the default
+ * initial state will be `false`.
+ * @returns An array containing the current state value and a function `toggle` that toggles the state
+ * value.
+ */
+const useSwitch = (initialState = false) => {
+  const [state, dispatch] = useStore(initialState);
+
+  /**
+   * The function `toggle` toggles the state by dispatching the opposite value of the current state.
+   */
+  const toggle = () => {
+    dispatch(!state);
+  };
 
-  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')
-  }
+  return [state, toggle]
+};
 
-  const state = getState();
-  const { wipFiber, hookIndex } = state;
-  const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+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,
+  usePersitentStore: usePersitentStore,
+  useQuery: useQuery,
+  useReducer: useReducer,
+  useRef: useRef,
+  useRouter: useRouter,
+  useStore: useStore,
+  useStorePriority: useStorePriority,
+  useSwitch: useSwitch,
+  useTransition: useTransition
+});
 
-  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 updateFunctionComponent = (fiber) => {
+  const state = getState();
+  state.wipFiber = fiber;
+  state.hookIndex = 0;
+  state.wipFiber.hooks = [];
 
-  const hook = {
-    hookID: hookIndex,
-    type: RYUNIX_TYPES.RYUNIX_MEMO,
-    value,
-    deps,
-  };
+  const children = [fiber.type(fiber.props)];
 
-  wipFiber.hooks[hookIndex] = hook;
-  state.hookIndex++;
-  return value
+  if (fiber.type._contextId && fiber.props.value !== undefined) {
+    fiber._contextId = fiber.type._contextId;
+    fiber._contextValue = fiber.props.value;
+  }
+
+  reconcileChildren(fiber, children);
 };
 
-const useCallback = (callback, deps) => {
-  if (!is.function(callback)) {
-    throw new Error('useCallback requires a function as first argument')
+const updateHostComponent = (fiber) => {
+  if (!fiber.dom) {
+    fiber.dom = createDom(fiber);
   }
-  return useMemo(() => callback, deps)
+  const children = fiber.props?.children || [];
+  reconcileChildren(fiber, children);
 };
 
-const createContext = (
-  contextId = RYUNIX_TYPES.RYUNIX_CONTEXT,
-  defaultValue = {},
-) => {
-  const Provider = ({ children, value }) => {
-    const element = Fragment({ children });
-    element._contextId = contextId;
-    element._contextValue = value;
-    return element
-  };
+/**
+ * The Component `Image` takes in a `src` and other props, and returns an `img` element with the
+ * specified `src` and props.
+ * @returns The `Image` component is being returned. It is a functional component that renders an `img`
+ * element with the specified `src` and other props passed to it.
+ */
+const Image = ({ src, ...props }) => {
+  return createElement('img', { ...props, src })
+};
 
-  Provider._contextId = contextId;
+const { Provider: MDXProvider, useContext: useMDXComponents } = createContext(
+  'ryunix.mdx',
+  {},
+);
 
-  const useContext = (ctxID = contextId) => {
-    validateHookCall();
+/**
+ * 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,
+  }
+};
 
-    const state = getState();
-    let fiber = state.wipFiber;
+/**
+ * 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 }),
+};
 
-    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
-  };
+/**
+ * MDX Wrapper component
+ * Provides default styling and components for MDX content
+ */
+const MDXContent = ({ children, components = {} }) => {
+  const mergedComponents = getMDXComponents(components);
 
-  return { Provider, useContext }
+  return createElement(
+    MDXProvider,
+    { value: mergedComponents },
+    createElement('div', null, children),
+  )
 };
 
-const useQuery = () => {
-  if (typeof window === 'undefined') return {}
+/**
+ * Performance profiler for Ryunix
+ */
+class Profiler {
+  constructor() {
+    this.enabled = process.env.NODE_ENV !== 'production';
+    this.measures = new Map();
+    this.renderTimes = [];
+    this.maxSamples = 100;
+  }
 
-  const searchParams = new URLSearchParams(window.location.search);
-  const query = {};
-  for (const [key, value] of searchParams.entries()) {
-    query[key] = value;
+  startMeasure(name) {
+    if (!this.enabled) return
+    this.measures.set(name, performance.now());
   }
-  return query
-};
 
-const useHash = () => {
-  if (typeof window === 'undefined') return ''
+  endMeasure(name) {
+    if (!this.enabled) return
+    const start = this.measures.get(name);
+    if (!start) 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 duration = performance.now() - start;
+    this.measures.delete(name);
 
-const useMetadata = (tags = {}, options = {}) => {
-  useEffect(() => {
-    if (typeof document === 'undefined') return
+    return duration
+  }
 
-    let finalTitle = 'Ryunix App';
-    const template = options.title?.template;
-    const defaultTitle = options.title?.prefix || 'Ryunix App';
-    const pageTitle = tags.pageTitle || tags.title;
+  recordRender(componentName, duration) {
+    if (!this.enabled) return
 
-    if (is.string(pageTitle) && pageTitle.trim()) {
-      finalTitle = template?.includes('%s')
-        ? template.replace('%s', pageTitle)
-        : pageTitle;
-    } else {
-      finalTitle = defaultTitle;
+    this.renderTimes.push({
+      component: componentName,
+      duration,
+      timestamp: Date.now(),
+    });
+
+    if (this.renderTimes.length > this.maxSamples) {
+      this.renderTimes.shift();
     }
+  }
 
-    document.title = finalTitle;
+  getStats() {
+    if (!this.enabled) return null
 
-    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);
-    }
+    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));
 
-    Object.entries(tags).forEach(([key, value]) => {
-      if (['title', 'pageTitle', 'canonical'].includes(key)) return
+    return { total, avg, max, min, count: this.renderTimes.length }
+  }
 
-      const isProperty = key.startsWith('og:') || key.startsWith('twitter:');
-      const selector = `meta[${isProperty ? 'property' : 'name'}='${key}']`;
-      let meta = document.head.querySelector(selector);
+  getSlowestComponents(limit = 10) {
+    if (!this.enabled) return []
 
-      if (!meta) {
-        meta = document.createElement('meta');
-        meta.setAttribute(isProperty ? 'property' : 'name', key);
-        document.head.appendChild(meta);
+    const byComponent = new Map();
+
+    this.renderTimes.forEach(({ component, duration }) => {
+      if (!byComponent.has(component)) {
+        byComponent.set(component, { total: 0, count: 0, max: 0 });
       }
-      meta.setAttribute('content', value);
+      const stats = byComponent.get(component);
+      stats.total += duration;
+      stats.count++;
+      stats.max = Math.max(stats.max, duration);
     });
-  }, [JSON.stringify(tags), JSON.stringify(options)]);
-};
 
-// Router Context
-const RouterContext = createContext('ryunix.navigation', {
-  location: '/',
-  params: {},
-  query: {},
-  navigate: (path) => {},
-  route: null,
-});
+    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)
+  }
 
-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: {} };
+  logStats() {
+    if (!this.enabled) return
 
-  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 stats = this.getStats();
+    if (!stats) return
 
-    const keys = [];
-    const pattern = new RegExp(
-      `^${route.path.replace(/:\w+/g, (match) => {
-        keys.push(match.substring(1));
-        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 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);
+    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)`,
+        );
+      });
     }
-  }, [location]);
+    console.groupEnd();
+  }
 
-  const navigate = (path) => {
-    window.history.pushState({}, '', path);
-    setLocation(path);
-  };
+  clear() {
+    this.renderTimes = [];
+    this.measures.clear();
+  }
 
-  const currentRouteData = findRoute(routes, location) || {};
-  const query = useQuery();
+  enable() {
+    this.enabled = true;
+  }
 
-  const contextValue = {
-    location,
-    params: currentRouteData.params || {},
-    query,
-    navigate,
-    route: currentRouteData.route,
-  };
+  disable() {
+    this.enabled = false;
+  }
+}
 
-  return createElement(
-    RouterContext.Provider,
-    { value: contextValue },
-    Fragment({ children }),
-  )
+// 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);
+  }
 };
 
-const useRouter = () => {
-  return RouterContext.useContext('ryunix.navigation')
+/**
+ * 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 Children = () => {
-  const { route, params, query, location } = useRouter();
-  if (!route || !route.component) return null
-  const hash = useHash();
+const workLoop = (deadline) => {
+  const state = getState();
+  let shouldYield = false;
 
-  useEffect(() => {
-    if (hash) {
-      const id = hash.slice(1);
-      const el = document.getElementById(id);
-      if (el) el.scrollIntoView({ block: 'start', behavior: 'smooth' });
-    }
-  }, [hash]);
+  while (state.nextUnitOfWork && !shouldYield) {
+    state.nextUnitOfWork = performUnitOfWork(state.nextUnitOfWork);
+    shouldYield = deadline.timeRemaining() < 1;
+  }
 
-  return createElement(route.component, {
-    key: location,
-    params,
-    query,
-    hash,
-  })
+  if (!state.nextUnitOfWork && state.wipRoot) {
+    commitRoot();
+  }
+
+  requestIdleCallback(workLoop);
 };
 
-const NavLink = ({ to, exact = false, ...props }) => {
-  const { location, navigate } = useRouter();
-  const isActive = exact ? location === to : location.startsWith(to);
+requestIdleCallback(workLoop);
 
-  const resolveClass = (cls) =>
-    typeof cls === 'function' ? cls({ isActive }) : cls || '';
+const performUnitOfWork = (fiber) => {
+  const componentName = fiber.type?.name || fiber.type?.displayName || 'Unknown';
 
-  const handleClick = (e) => {
-    e.preventDefault();
-    navigate(to);
-  };
+  profiler.startMeasure(componentName);
 
-  const classAttrName = props['ryunix-class'] ? 'ryunix-class' : 'className';
-  const classAttrValue = resolveClass(
-    props['ryunix-class'] || props['className'],
-  );
+  const isFunctionComponent = fiber.type instanceof Function;
+  if (isFunctionComponent) {
+    updateFunctionComponent(fiber);
+  } else {
+    updateHostComponent(fiber);
+  }
 
-  const {
-    ['ryunix-class']: _omitRyunix,
-    className: _omitClassName,
-    ...cleanedProps
-  } = props;
+  const duration = profiler.endMeasure(componentName);
+  if (duration) profiler.recordRender(componentName, duration);
 
-  return createElement(
-    'a',
-    {
-      href: to,
-      onClick: handleClick,
-      [classAttrName]: classAttrValue,
-      ...cleanedProps,
-    },
-    props.children,
-  )
+  if (fiber.child) {
+    return fiber.child
+  }
+  let nextFiber = fiber;
+  while (nextFiber) {
+    if (nextFiber.sibling) {
+      return nextFiber.sibling
+    }
+    nextFiber = nextFiber.parent;
+  }
 };
 
-/**
- * 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);
-  };
+const scheduleWork = (root, priority = Priority.NORMAL) => {
+  const state = getState();
+  state.nextUnitOfWork = root;
+  state.wipRoot = root;
+  state.deletions = [];
+  state.hookIndex = 0;
+  state.effects = [];
 
-  return [state, dispatch]
+  // Higher priority = faster scheduling
+  if (priority <= Priority.USER_BLOCKING) {
+    requestIdleCallback(workLoop);
+  } else {
+    setTimeout(() => requestIdleCallback(workLoop), 0);
+  }
 };
 
 /**
- * useTransition - Mark updates as non-urgent
+ * The `render` function in JavaScript updates the DOM with a new element and schedules work to be done
+ * on the element.
+ * @param element - The `element` parameter in the `render` function is the element that you want to
+ * render in the specified container. It could be a DOM element, a component, or any other valid
+ * element that you want to display on the screen.
+ * @param container - The `container` parameter in the `render` function is the DOM element where the
+ * `element` will be rendered. It is the target container where the element will be appended as a
+ * child.
+ * @returns The `render` function is returning the `state.wipRoot` object.
  */
-const useTransition = () => {
-  const [isPending, setIsPending] = useStorePriority(false);
-
-  const startTransition = (callback) => {
-    setIsPending(true, Priority.IMMEDIATE);
-
-    setTimeout(() => {
-      callback();
-      setIsPending(false, Priority.IMMEDIATE);
-    }, 0);
+const render = (element, container) => {
+  const state = getState();
+  state.wipRoot = {
+    dom: container,
+    props: {
+      children: [element],
+    },
+    alternate: state.currentRoot,
   };
 
-  return [isPending, startTransition]
+  state.nextUnitOfWork = state.wipRoot;
+  state.deletions = [];
+  scheduleWork(state.wipRoot);
+  return state.wipRoot
 };
 
 /**
- * useDeferredValue - Defer value updates
+ * The `init` function initializes a rendering process for a main element within a specified container
+ * root element.
+ * @param MainElement - MainElement is the main component or element that you want to render on the
+ * webpage. It could be a React component, a DOM element, or any other element that you want to display
+ * on the page.
+ * @param [root=__ryunix] - The `root` parameter in the `init` function is a default parameter with the
+ * value `'__ryunix'`. If no value is provided for `root` when calling the `init` function, it will
+ * default to `'__ryunix'`.
+ * @returns The `renderProcess` function is being returned from the `init` function.
  */
-const useDeferredValue = (value) => {
-  const [deferredValue, setDeferredValue] = useStorePriority(value);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDeferredValue(value, Priority.LOW);
-    }, 100);
-
-    return () => clearTimeout(timeout)
-  }, [value]);
-
-  return deferredValue
+const init = (MainElement, root = '__ryunix') => {
+  const state = getState();
+  state.containerRoot = document.getElementById(root);
+  const renderProcess = render(MainElement, state.containerRoot);
+  return renderProcess
 };
 
-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 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
@@ -1431,7 +1886,11 @@ let isBatching = false;
 let pendingUpdates = [];
 
 /**
- * Batch multiple state updates into single render
+ * The `batchUpdates` function in JavaScript allows for batching multiple updates and flushing them all
+ * at once.
+ * @param callback - The `callback` parameter in the `batchUpdates` function is a function that will be
+ * executed within a batch update. This function can contain multiple updates that need to be processed
+ * together in a batch to improve performance and avoid unnecessary re-renders.
  */
 const batchUpdates = (callback) => {
   const wasBatching = isBatching;
@@ -1449,7 +1908,9 @@ const batchUpdates = (callback) => {
 };
 
 /**
- * Flush all pending updates
+ * The `flushUpdates` function processes and executes pending updates stored in an array.
+ * @returns If the `pendingUpdates` array is empty, the `flushUpdates` function will return nothing
+ * (undefined).
  */
 const flushUpdates = () => {
   if (pendingUpdates.length === 0) return
@@ -1463,11 +1924,15 @@ const flushUpdates = () => {
 
 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,
@@ -1475,11 +1940,26 @@ var Ryunix = /*#__PURE__*/Object.freeze({
   profiler: profiler,
   render: render,
   safeRender: safeRender,
+  useCallback: useCallback,
+  useDeferredValue: useDeferredValue,
+  useEffect: useEffect,
+  useHash: useHash,
+  useMemo: useMemo,
+  useMetadata: useMetadata,
+  usePersitentStore: usePersitentStore,
   useProfiler: useProfiler,
+  useQuery: useQuery,
+  useReducer: useReducer,
+  useRef: useRef,
+  useRouter: useRouter,
+  useStore: useStore,
+  useStorePriority: useStorePriority,
+  useSwitch: useSwitch,
+  useTransition: useTransition,
   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 };
+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, usePersitentStore, useProfiler, useQuery, useReducer, useRef, useRouter, useStore, useStorePriority, useSwitch, useTransition, withProfiler };
 //# sourceMappingURL=Ryunix.esm.js.map