@unsetsoft/ryunixjs 1.2.5-canary.11 → 1.2.5-canary.12

package/dist/Ryunix.esm.js

@@ -83,10 +83,6 @@ function nextValidSibling$1(node) {
     return next;
 }
 
-/**
- * @param {string | number | boolean} text
- * @returns {RyunixTextElement}
- */
 const createTextElement = (text) => {
     return {
         type: RYUNIX_TYPES.TEXT_ELEMENT,
@@ -96,13 +92,6 @@ const createTextElement = (text) => {
         },
     };
 };
-/**
- * Create a virtual DOM element.
- * @param {string | symbol | RyunixComponent} type
- * @param {RyunixProps | null} [props]
- * @param {...RyunixNode} children
- * @returns {RyunixElement}
- */
 const createElement = (type, props, ...children) => {
     const safeProps = props || {};
     let rawChildren = children;
@@ -114,7 +103,6 @@ const createElement = (type, props, ...children) => {
     rawChildren = rawChildren
         .flat()
         .filter((child) => child != null && child !== false && child !== true);
-    /** @type {RyunixNode[]} */
     const normalizedChildren = [];
     let currentText = '';
     for (const child of rawChildren) {
@@ -140,22 +128,12 @@ const createElement = (type, props, ...children) => {
         },
     };
 };
-/**
- * @param {{ children?: RyunixNode | RyunixNode[] }} props
- * @returns {RyunixElement}
- */
 const Fragment = (props) => {
     const children = Array.isArray(props.children)
         ? props.children
         : [props.children];
     return createElement(RYUNIX_TYPES.RYUNIX_FRAGMENT, {}, ...children);
 };
-/**
- * @param {RyunixElement} element
- * @param {RyunixProps} [props]
- * @param {...RyunixNode} children
- * @returns {RyunixElement}
- */
 const cloneElement = (element, props = {}, ...children) => {
     if (!element || !is.object(element)) {
         throw new Error('cloneElement requires a valid element');
@@ -169,32 +147,13 @@ const isValidElement = (object) => {
         object.props !== undefined);
 };
 
-/** @typedef {import('../types/internal.js').RyunixFiber} RyunixFiber */
-/** @typedef {import('../types/internal.js').RyunixHook} RyunixHook */
-/**
- * @param {string} key
- * @returns {boolean}
- */
 const isEvent = (key) => key.startsWith('on');
-/**
- * @param {string} key
- * @returns {boolean}
- */
-const isProperty = (key) => key !== STRINGS.CHILDREN && !isEvent(key);
-/**
- * @param {Record<string, unknown>} prev
- * @param {Record<string, unknown>} next
- */
-const isNew = (prev, next) => /** @param {string} key */ (key) => {
+const RESERVED_DOM_PROPS = new Set(['key', 'ref', STRINGS.CHILDREN]);
+const isProperty = (key) => !RESERVED_DOM_PROPS.has(key) && !isEvent(key);
+const isNew = (prev, next) => (key) => {
     return !Object.is(prev[key], next[key]);
 };
-/**
- * @param {Record<string, unknown>} next
- */
-const isGone = (next) => /** @param {string} key */ (key) => !(key in next);
-/**
- * @param {RyunixFiber} fiber
- */
+const isGone = (next) => (key) => !(key in next);
 const cancelEffects = (fiber) => {
     if (!fiber?.hooks?.length)
         return;
@@ -213,9 +172,6 @@ const cancelEffects = (fiber) => {
         }
     });
 };
-/**
- * @param {RyunixFiber} fiber
- */
 const cancelEffectsDeep = (fiber) => {
     if (!fiber)
         return;
@@ -327,23 +283,9 @@ function getCurrentPriority() {
     return currentPriority;
 }
 
-/**
- * @typedef {import('../types/internal.js').RyunixFiber} RyunixFiber
- * @typedef {import('../types/internal.js').RyunixDomElement} RyunixDomElement
- */
-/**
- * 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 = '';
@@ -351,7 +293,7 @@ const applyStyles = (dom, styleObj) => {
     }
     try {
         const cssText = Object.entries(styleObj)
-            .filter(([_, value]) => value != null) // Filter out null/undefined
+            .filter(([_, value]) => value != null)
             .map(([key, value]) => {
             const kebabKey = camelToKebab(key);
             return `${kebabKey}: ${value}`;
@@ -365,14 +307,7 @@ const applyStyles = (dom, styleObj) => {
         }
     }
 };
-/**
- * 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);
@@ -380,24 +315,16 @@ const applyClasses = (dom, prevClasses, nextClasses) => {
         }
         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 {RyunixFiber} fiber - Fiber node
- * @returns {HTMLElement | SVGElement | Text | null}
- */
 const createDom = (fiber) => {
-    // Fragments and Context Providers don't create real DOM nodes
     if (fiber.type === RYUNIX_TYPES.RYUNIX_FRAGMENT ||
         fiber.type === RYUNIX_TYPES.RYUNIX_CONTEXT ||
         fiber.type === Symbol.for('ryunix.portal')) {
@@ -409,7 +336,7 @@ const createDom = (fiber) => {
             dom = document.createTextNode('');
         }
         else if (is.string(fiber.type)) {
-            const hostType = /** @type {string} */ fiber.type;
+            const hostType = fiber.type;
             const isSvg = [
                 'svg',
                 'path',
@@ -457,8 +384,7 @@ const createDom = (fiber) => {
             }
             return null;
         }
-        updateDom(
-        /** @type {HTMLElement | Text} */ /** @type {HTMLElement | SVGElement | Text} */ dom, {}, fiber.props);
+        updateDom(dom, {}, fiber.props);
         return dom;
     }
     catch (error) {
@@ -468,12 +394,6 @@ const createDom = (fiber) => {
         return null;
     }
 };
-/**
- * @param {string} attrName
- * @param {unknown} value
- * @returns {unknown}
- */
-/** @type {(attrName: string, value: unknown) => unknown} */
 const checkAttributeUri = (attrName, value) => {
     if (typeof value !== 'string')
         return value;
@@ -496,12 +416,6 @@ const checkAttributeUri = (attrName, value) => {
     return value;
 };
 const validateUri = checkAttributeUri;
-/**
- * Update DOM element with new props
- * @param {HTMLElement|Text} dom - DOM element
- * @param {Record<string, unknown>} [prevProps] - Previous props
- * @param {Record<string, unknown>} [nextProps] - Next props
- */
 const updateDom = (dom, prevProps = {}, nextProps = {}) => {
     if (dom.nodeType === 3) {
         if (prevProps.nodeValue !== nextProps.nodeValue) {
@@ -512,7 +426,6 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
     const el = dom;
     const domEl = el;
     const handlerMap = domEl._ryunixHandlers;
-    // Remove old event listeners
     Object.keys(prevProps)
         .filter(isEvent)
         .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
@@ -532,12 +445,10 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
             }
         }
     });
-    // Remove old properties
     Object.keys(prevProps)
         .filter(isProperty)
         .filter(isGone(nextProps))
         .forEach((propKey) => {
-        // Skip special properties
         if (propKey === STRINGS.STYLE ||
             propKey === OLD_STRINGS.STYLE ||
             propKey === STRINGS.CLASS_NAME ||
@@ -549,59 +460,45 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
             el.removeAttribute(attrName);
         }
         else {
-            /** @type {Record<string, unknown>} */ /** @type {unknown} */ el[propKey] = '';
+            el[propKey] = '';
             el.removeAttribute(propKey);
         }
     });
-    // Set new properties
     Object.keys(nextProps)
         .filter(isProperty)
         .filter(isNew(prevProps, nextProps))
         .forEach((propKey) => {
         try {
-            // Handle style properties
             if (propKey === STRINGS.STYLE || propKey === OLD_STRINGS.STYLE) {
                 const styleValue = nextProps[propKey];
-                applyStyles(el, /** @type {Record<string, unknown>} */ styleValue);
+                applyStyles(el, styleValue);
             }
-            // Handle className properties
             else if (propKey === STRINGS.CLASS_NAME) {
-                applyClasses(el, 
-                /** @type {string} */ prevProps[STRINGS.CLASS_NAME], 
-                /** @type {string} */ nextProps[STRINGS.CLASS_NAME]);
+                applyClasses(el, prevProps[STRINGS.CLASS_NAME], nextProps[STRINGS.CLASS_NAME]);
             }
             else if (propKey === OLD_STRINGS.CLASS_NAME) {
-                applyClasses(el, 
-                /** @type {string} */ prevProps[OLD_STRINGS.CLASS_NAME], 
-                /** @type {string} */ nextProps[OLD_STRINGS.CLASS_NAME]);
+                applyClasses(el, prevProps[OLD_STRINGS.CLASS_NAME], nextProps[OLD_STRINGS.CLASS_NAME]);
             }
-            // Handle other properties
             else {
-                // Special handling for value and checked (controlled components)
                 if (propKey === 'value' || propKey === 'checked') {
-                    if (
-                    /** @type {Record<string, unknown>} */ /** @type {unknown} */ el[propKey] !== nextProps[propKey]) {
-                        /** @type {Record<string, unknown>} */ /** @type {unknown} */ el[propKey] = nextProps[propKey];
+                    if (el[propKey] !== nextProps[propKey]) {
+                        el[propKey] = nextProps[propKey];
                     }
                 }
                 else {
                     const isSvgNode = el instanceof SVGElement;
                     if (isSvgNode) {
                         const attrName = toSvgAttrName(propKey);
-                        /** @type {unknown} */
                         const svgValidated = checkAttributeUri(attrName, nextProps[propKey]);
-                        // viewBox is case sensitive, we respect the camelCase for it.
-                        el.setAttribute(attrName, /** @type {string} */ svgValidated);
+                        el.setAttribute(attrName, svgValidated);
                     }
                     else {
                         const attrVal = nextProps[propKey];
-                        /** @type {unknown} */
                         const safeValue = checkAttributeUri(propKey, attrVal);
-                        /** @type {Record<string, unknown>} */ /** @type {unknown} */ el[propKey] = safeValue;
-                        // Best effort: set html attributes if it's not a primitive component property
+                        el[propKey] = safeValue;
                         if (typeof attrVal !== 'object' &&
                             typeof attrVal !== 'function') {
-                            el.setAttribute(propKey, /** @type {string} */ safeValue);
+                            el.setAttribute(propKey, safeValue);
                         }
                     }
                 }
@@ -613,7 +510,6 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
             }
         }
     });
-    // Add new event listeners
     Object.keys(nextProps)
         .filter(isEvent)
         .filter(isNew(prevProps, nextProps))
@@ -623,15 +519,6 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
             const handler = (e) => {
                 runWithPriority(Priority.IMMEDIATE, () => nextProps[propKey](e));
             };
-            // Store the wrapped handler so it can be removed later
-            // Note: For simplicity, we could also just wrap it on the fly,
-            // but we need the exact reference for removeEventListener.
-            // Actually, the current removeDom logic uses prevProps[name],
-            // which won't work if we wrap it here and don't store it.
-            // Wait, the current removeEventListener call in dom.js:177 is:
-            // dom.removeEventListener(eventType, prevProps[name])
-            // If we wrap it, we MUST store the wrapper.
-            // Let's use a weakMap or a property on the DOM node to store the wrappers.
             if (!domEl._ryunixHandlers) {
                 domEl._ryunixHandlers = new Map();
             }
@@ -645,10 +532,6 @@ const updateDom = (dom, prevProps = {}, nextProps = {}) => {
         }
     });
 };
-/**
- * Clear all children from a DOM element
- * @param {HTMLElement} container - DOM element to clear
- */
 const clearContainer = (container) => {
     if (!container)
         return;
@@ -676,10 +559,6 @@ function createPortal(children, container) {
 }
 
 const PREFIX = '[Ryunix Hydration]';
-/**
- * @param {'warn' | 'error'} level
- * @param {string} message
- */
 const emit = (level, message) => {
     const line = `${PREFIX} ${message}`;
     if (level === 'error') {
@@ -691,16 +570,11 @@ const emit = (level, message) => {
 };
 const shouldReportStrict = () => process.env.NODE_ENV !== 'production' &&
     process.env.RYUNIX_HYDRATION_STRICT === 'true';
-/** @param {string} message */
 const logHydrationInfo = (message) => {
     if (!shouldReportStrict())
         return;
     emit('warn', message);
 };
-/**
- * Log the first hydration DOM mismatch (tag/text vs client tree).
- * @param {string} detail
- */
 const logHydrationMismatch = (detail) => {
     const state = getState();
     if (state.hydrationMismatchReported)
@@ -709,9 +583,6 @@ const logHydrationMismatch = (detail) => {
     const level = process.env.NODE_ENV === 'production' ? 'error' : 'warn';
     emit(level, `${detail} Server HTML did not match the client render. Falling back to client-side render.`);
 };
-/**
- * @param {string} detail
- */
 const logHydrationBoundaryMismatch = (detail) => {
     const state = getState();
     if (state.hydrationBoundaryMismatchReported)
@@ -720,18 +591,11 @@ const logHydrationBoundaryMismatch = (detail) => {
     const level = process.env.NODE_ENV === 'production' ? 'error' : 'warn';
     emit(level, `${detail} Recovering the nearest hydration boundary with a scoped client render.`);
 };
-/**
- * @param {string} detail
- */
 const logHydrationRecoverable = (detail) => {
     if (!shouldReportStrict())
         return;
     emit('warn', `Recovered a hydration mismatch (${detail}) without root fallback.`);
 };
-/**
- * Log when hydration failed and the SSR container is being cleared.
- * @param {string} [reason]
- */
 const logHydrationFailure = (reason = '') => {
     const state = getState();
     if (state.hydrationFailureReported)
@@ -745,10 +609,6 @@ const logHydrationFailure = (reason = '') => {
     const level = process.env.NODE_ENV === 'production' ? 'error' : 'warn';
     emit(level, `${detail}Clearing #__ryunix and remounting on the client.`);
 };
-/**
- * Log when leftover SSR nodes are removed after hydration (soft mismatch).
- * @param {number} count
- */
 const logHydrationUnmatchedNodes = (count) => {
     if (!count)
         return;
@@ -758,7 +618,6 @@ const logHydrationUnmatchedNodes = (count) => {
     state.hydrationUnmatchedReported = true;
     emit('warn', `Removed ${count} server-rendered DOM node(s) that were not used by the client tree. This can indicate an SSR/client markup mismatch.`);
 };
-/** Log CSR recovery after a failed hydration pass. */
 const logHydrationRecovery = () => {
     const state = getState();
     if (state.hydrationRecoveryReported)
@@ -766,7 +625,6 @@ const logHydrationRecovery = () => {
     state.hydrationRecoveryReported = true;
     emit('warn', 'Remounting the application on the client after hydration failure.');
 };
-/** Log scoped boundary recovery after a local mismatch. */
 const logHydrationBoundaryRecovery = () => {
     const state = getState();
     if (state.hydrationBoundaryRecoveryReported)
@@ -774,13 +632,9 @@ const logHydrationBoundaryRecovery = () => {
     state.hydrationBoundaryRecoveryReported = true;
     emit('warn', 'Remounting a hydration boundary after local mismatch.');
 };
-/**
- * @param {string} reason
- */
 const logHydrationFatal = (reason) => {
     emit('error', reason);
 };
-/** Reset per-mount hydration log flags (call from init). */
 const resetHydrationLogFlags = () => {
     const state = getState();
     state.hydrationMismatchReported = false;
@@ -791,25 +645,14 @@ const resetHydrationLogFlags = () => {
     state.hydrationBoundaryRecoveryReported = false;
 };
 
-/**
- * @typedef {import('../types/internal.js').RyunixFiber} RyunixFiber
- * @typedef {import('../types/internal.js').RyunixRootFiber} RyunixRootFiber
- */
-/**
- * Run layout effects (useLayoutEffect) synchronously during commit.
- * These run after DOM mutations but before the browser paints.
- * @param {RyunixFiber} fiber
- */
 const runLayoutEffects = (fiber) => {
     if (!fiber?.hooks?.length)
         return;
     for (let i = 0; i < fiber.hooks.length; i++) {
-        /** @type {import('../types/internal.js').RyunixHook & { isLayout?: boolean }} */
         const hook = fiber.hooks[i];
         if (hook.type === RYUNIX_TYPES.RYUNIX_EFFECT &&
             hook.isLayout &&
             is.function(hook.effect)) {
-            // Cancel previous layout cleanup if exists
             if (is.function(hook.cancel)) {
                 try {
                     hook.cancel();
@@ -820,11 +663,10 @@ const runLayoutEffects = (fiber) => {
                     }
                 }
             }
-            // Run new layout effect synchronously
             try {
                 const cleanup = hook.effect();
                 hook.cancel = is.function(cleanup)
-                    ? /** @type {() => void} */ cleanup
+                    ? cleanup
                     : null;
             }
             catch (error) {
@@ -837,20 +679,14 @@ const runLayoutEffects = (fiber) => {
         }
     }
 };
-/**
- * Run normal (non-layout) effects asynchronously after paint.
- * @param {RyunixFiber} fiber
- */
 const runNormalEffects = (fiber) => {
     if (!fiber?.hooks?.length)
         return;
     for (let i = 0; i < fiber.hooks.length; i++) {
-        /** @type {import('../types/internal.js').RyunixHook & { isLayout?: boolean }} */
         const hook = fiber.hooks[i];
         if (hook.type === RYUNIX_TYPES.RYUNIX_EFFECT &&
             !hook.isLayout &&
             is.function(hook.effect)) {
-            // Cancel previous cleanup if exists
             if (is.function(hook.cancel)) {
                 try {
                     hook.cancel();
@@ -861,11 +697,10 @@ const runNormalEffects = (fiber) => {
                     }
                 }
             }
-            // Run new effect
             try {
                 const cleanup = hook.effect();
                 hook.cancel = is.function(cleanup)
-                    ? /** @type {() => void} */ cleanup
+                    ? cleanup
                     : null;
             }
             catch (error) {
@@ -878,25 +713,17 @@ const runNormalEffects = (fiber) => {
         }
     }
 };
-/**
- * The `commitRoot` function commits the changes made to the virtual DOM by updating the actual DOM.
- */
 function commitRoot() {
     const state = getState();
     state.deletions.forEach(commitWork);
-    const finishedWork = /** @type {RyunixRootFiber} */ state.wipRoot;
-    // Swap the currentRoot pointer BEFORE running effects
-    // This allows dispatches inside effects to base their new work on the just-finished tree
+    const finishedWork = state.wipRoot;
     state.currentRoot = finishedWork;
-    // After hydration is done, reset the flag and cleanup unconsumed nodes
     if (state.isHydrating || state.hydrationFailed) {
         if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
             console.log(`[Ryunix Debug] commitRoot - isHydrating: ${state.isHydrating}, hydrationFailed: ${state.hydrationFailed}`);
         }
         if (state.hydrationFailed) ;
         else {
-            // If there is a cursor left, it means these are SSR nodes that weren't matched
-            // by any client fiber. We must remove them to avoid duplication.
             let cursor = state.hydrateCursor;
             let removed = 0;
             if (cursor &&
@@ -919,23 +746,17 @@ function commitRoot() {
         state.hydrateCursor = null;
     }
     commitWork(finishedWork.child);
-    // If wipRoot was not reassigned by a synchronous dispatch during effects, clear it
     if (state.wipRoot === finishedWork) {
         state.wipRoot = null;
     }
 }
-/**
- * @param {RyunixFiber | null | undefined} fiber
- */
 function commitWork(fiber) {
     if (!fiber) {
         return;
     }
-    // Handle portal fibers — they render into a different container
     if (fiber.type === RYUNIX_PORTAL || fiber._isPortal) {
         const portalContainer = fiber.containerInfo;
         if (portalContainer) {
-            // Process portal children into the portal container
             const portalFiber = fiber.child;
             if (portalFiber) {
                 commitPortalWork(portalFiber, portalContainer);
@@ -959,9 +780,7 @@ function commitWork(fiber) {
             }
             domParent.appendChild(fiber.dom);
         }
-        // Layout effects run synchronously during commit
         runLayoutEffects(fiber);
-        // Normal effects run after paint
         runNormalEffects(fiber);
     }
     else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
@@ -978,8 +797,6 @@ function commitWork(fiber) {
             if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
                 console.log('[Ryunix Debug] Hydration fallback PLACEMENT:', fiber.type);
             }
-            // Since container is cleared on fallback, treat as normal placement
-            // No need to check fiber.dom.parentNode !== domParent because the container was cleared.
             if (fiber.dom != null) {
                 domParent.appendChild(fiber.dom);
             }
@@ -998,7 +815,6 @@ function commitWork(fiber) {
         }
     }
     else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
-        // Run cleanups BEFORE removing DOM to allow cleanup functions to read DOM state
         cancelEffectsDeep(fiber);
         commitDeletion(fiber);
         return;
@@ -1006,11 +822,6 @@ function commitWork(fiber) {
     commitWork(fiber.child);
     commitWork(fiber.sibling);
 }
-/**
- * Commit work for portal children into a specific container
- * @param {RyunixFiber | null | undefined} fiber
- * @param {Element | DocumentFragment} portalContainer
- */
 const commitPortalWork = (fiber, portalContainer) => {
     if (!fiber)
         return;
@@ -1037,10 +848,6 @@ const commitPortalWork = (fiber, portalContainer) => {
     commitPortalWork(fiber.child, portalContainer);
     commitPortalWork(fiber.sibling, portalContainer);
 };
-/**
- * @param {RyunixFiber} fiber
- * @param {Node} domParent
- */
 const commitDeletion = (fiber, domParent) => {
     if (fiber.dom) {
         if (fiber.dom.parentNode) {
@@ -1130,852 +937,635 @@ const reconcileChildren = (wipFiber, elements) => {
     });
 };
 
-/**
- * Bridge module to break circular dependencies between hooks and workers.
- */
-/** @type {import('../types/internal.js').ScheduleWorkFn | null} */
-let scheduleWorkFn = null;
-/**
- * @param {import('../types/internal.js').ScheduleWorkFn} fn
- */
-const setScheduleWork = (fn) => {
-    scheduleWorkFn = fn;
+const getHydrationPolicy = () => {
+    const env = (globalThis.process && globalThis.process.env) || {};
+    const recoverRaw = env.RYUNIX_HYDRATION_RECOVER || 'boundary';
+    const boundariesRaw = env.RYUNIX_HYDRATION_BOUNDARIES || 'route';
+    const strict = env.RYUNIX_HYDRATION_STRICT === 'true';
+    const recover = recoverRaw === 'none' || recoverRaw === 'root' ? recoverRaw : 'boundary';
+    const boundaries = boundariesRaw === 'server-only' || boundariesRaw === 'all-layouts'
+        ? boundariesRaw
+        : 'route';
+    return {
+        recover,
+        boundaries,
+        strict,
+    };
 };
-/**
- * @param {import('../types/internal.js').RyunixRootFiber} root
- * @param {number} [priority]
- */
-const scheduleWork$1 = (root, priority) => {
-    if (scheduleWorkFn) {
-        return scheduleWorkFn(root, priority);
-    }
-    if (process.env.NODE_ENV !== 'production') {
-        console.warn('[Ryunix] scheduleWork called before being initialized.');
+const findNearestHydrationBoundary = (fiber) => {
+    let current = fiber || null;
+    while (current) {
+        const props = current.props;
+        if (props &&
+            Object.prototype.hasOwnProperty.call(props, 'data-ryunix-hydrate-boundary')) {
+            return current;
+        }
+        const type = current.type;
+        const maybeTyped = type;
+        if (type &&
+            typeof type === 'function' &&
+            (maybeTyped?.ryunix_type === 'RYUNIX_HYDRATION_BOUNDARY' ||
+                maybeTyped?.ryunix_type === 'RYUNIX_SERVER_BOUNDARY')) {
+            return current;
+        }
+        current = current.parent || null;
     }
+    return null;
 };
-
-let isBatching = false;
-let pendingUpdates = [];
-function batchUpdates(callback) {
-    const wasBatching = isBatching;
-    isBatching = true;
-    try {
-        callback();
-    }
-    finally {
-        isBatching = wasBatching;
-        if (!isBatching && pendingUpdates.length > 0) {
-            flushUpdates();
+const findBoundaryDomFromNode = (node) => {
+    let current = node ?? null;
+    while (current) {
+        if (current.nodeType === 1 &&
+            current.hasAttribute('data-ryunix-hydrate-boundary')) {
+            return current;
         }
+        current = current.parentNode;
     }
-}
-function queueUpdate(update) {
-    pendingUpdates.push(update);
-    if (!isBatching) {
-        flushUpdates();
-    }
-}
-function flushUpdates() {
-    if (pendingUpdates.length === 0)
-        return;
-    const updates = pendingUpdates;
-    pendingUpdates = [];
-    updates.forEach((update) => update());
-}
-
-/**
- * @typedef {import('../types/internal.js').RyunixComponent} RyunixComponent
- * @typedef {import('../types/internal.js').RyunixFiber} RyunixFiber
- */
-/**
- * Development warnings
- */
-process.env.NODE_ENV !== 'production';
-/**
- * Hook call validation
- */
-const validateHookContext = (hookName = 'A hook') => {
-    const state = getState();
-    if (!state.wipFiber) {
-        throw new Error(`${hookName} can only be called inside function components. ` +
-            'Make sure you are calling hooks at the top level of your component.');
+    return null;
+};
+const getBoundaryDom = (fiber) => {
+    if (!fiber)
+        return null;
+    if (fiber.dom && fiber.dom.nodeType === 1) {
+        const el = fiber.dom;
+        if (el.hasAttribute('data-ryunix-hydrate-boundary'))
+            return el;
     }
-    const wipFiber = /** @type {RyunixFiber} */ state.wipFiber;
-    if (!Array.isArray(wipFiber.hooks)) {
-        wipFiber.hooks = [];
+    let child = fiber.child || null;
+    while (child) {
+        if (child.dom && child.dom.nodeType === 1) {
+            const el = child.dom;
+            if (el.hasAttribute('data-ryunix-hydrate-boundary'))
+                return el;
+        }
+        child = child.child || child.sibling || null;
     }
+    return null;
 };
-
-/**
- * @typedef {import('../types/internal.js').RyunixFiber} RyunixFiber
- * @typedef {import('../types/internal.js').RyunixHook} RyunixHook
- * @typedef {import('../types/internal.js').RyunixRoute} RyunixRoute
- * @typedef {import('../types/internal.js').RyunixRouterContextValue} RyunixRouterContextValue
- * @typedef {import('../types/internal.js').RyunixMetadataTags} RyunixMetadataTags
- * @typedef {import('../types/internal.js').RyunixMetadataOptions} RyunixMetadataOptions
- * @typedef {import('../types/internal.js').RyunixRootFiber} RyunixRootFiber
- * @typedef {import('../types/internal.js').RyunixComponent} RyunixComponent
- */
-/**
- * @typedef {{ route: RyunixRoute | { component: RyunixComponent | null }, params: Record<string, string | string[]> }} RouteMatch
- */
-/**
- * @param {unknown[] | undefined} oldDeps
- * @param {unknown[] | undefined} newDeps
- * @returns {boolean}
- */
-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 skipHydrationSubtree = (cursor, boundaryRoot) => {
+    if (!cursor || !boundaryRoot)
+        return cursor;
+    if (cursor === boundaryRoot)
+        return boundaryRoot.nextSibling;
+    if (boundaryRoot.contains(cursor))
+        return boundaryRoot.nextSibling;
+    return cursor;
 };
-/**
- * @param {unknown} initialState
- * @param {number} [priority]
- * @returns {[unknown, (action: unknown, priority?: number) => void]}
- */
-const useStore = (initialState, priority = getCurrentPriority()) => {
-    // SSR safety check - more reliable than state.isServerRendering
-    if (typeof window === 'undefined') {
-        return [
-            is.function(initialState)
-                ? /** @type {() => unknown} */ initialState()
-                : initialState,
-            () => { },
-        ];
-    }
+const enqueueScopedRecovery = (boundaryFiber, boundaryDom, resumeCursor) => {
+    if (!boundaryFiber || !boundaryDom)
+        return;
     const state = getState();
-    if (state.isServerRendering) {
-        return [
-            is.function(initialState)
-                ? /** @type {() => unknown} */ initialState()
-                : initialState,
-            () => { },
-        ];
-    }
-    /**
-     * @param {unknown} state
-     * @param {unknown} action
-     */
-    const reducer = (state, action) => is.function(action) ? action(state) : action;
-    return useReducer(reducer, initialState, undefined, priority);
+    const queue = state.scopedRecoveryQueue || [];
+    queue.push({
+        boundaryFiber,
+        boundaryDom,
+        resumeCursor,
+        element: (Array.isArray(boundaryFiber.props?.children)
+            ? boundaryFiber.props.children[0]
+            : boundaryFiber.props?.children),
+    });
+    state.scopedRecoveryQueue = queue;
 };
-/**
- * @param {(state: unknown, action: unknown) => unknown} reducer
- * @param {unknown} initialState
- * @param {((initial: unknown) => unknown)=} [init]
- * @param {number} [defaultPriority]
- * @returns {[unknown, (action: unknown, priority?: number) => void]}
- */
-const useReducer = (reducer, initialState, init, defaultPriority = getCurrentPriority()) => {
-    // SSR safety check - more reliable than state.isServerRendering
-    if (typeof window === 'undefined') {
-        return [init ? init(initialState) : initialState, () => { }];
-    }
+
+const updateFunctionComponent = (fiber) => {
     const state = getState();
-    if (state.isServerRendering) {
-        return [init ? init(initialState) : initialState, () => { }];
-    }
-    validateHookContext();
-    const { hookIndex } = state;
-    const wipFiber = /** @type {RyunixFiber} */ state.wipFiber;
-    const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
-    const hook = {
-        hookID: hookIndex,
-        type: RYUNIX_TYPES.RYUNIX_STORE,
-        state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
-        queue: /** @type {unknown[]} */ [],
-    };
-    if (oldHook?.queue) {
-        oldHook.queue.forEach(
-        /** @param {unknown} action */ (action) => {
-            try {
-                hook.state = reducer(hook.state, action);
-            }
-            catch (error) {
-                if (process.env.NODE_ENV !== 'production') {
-                    console.error('Error in reducer:', error);
-                }
-            }
-        });
+    state.wipFiber = fiber;
+    state.hookIndex = 0;
+    state.wipFiber.hooks = [];
+    if (state.isHydrating) {
+        fiber.effectTag = EFFECT_TAGS.HYDRATE;
     }
-    /** @param {unknown} action @param {number} [priority] */
-    const dispatch = (action, priority = defaultPriority) => {
-        if (action === undefined) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn('dispatch called with undefined action');
+    const componentType = fiber.type;
+    if (componentType._isMemo && fiber.alternate) {
+        const { children: _pc, ...prevRest } = fiber.alternate.props || {};
+        const { children: _nc, ...nextRest } = fiber.props || {};
+        if (componentType._arePropsEqual?.(prevRest, nextRest)) {
+            fiber.hooks = fiber.alternate.hooks;
+            const oldChild = fiber.alternate.child;
+            if (oldChild) {
+                oldChild.parent = fiber;
+                fiber.child = oldChild;
             }
             return;
         }
-        hook.queue.push(action);
-        const currentState = getState();
-        const activeRoot = 
-        /** @type {RyunixRootFiber | null | undefined} */ currentState.currentRoot ||
-            currentState.wipRoot;
-        if (!activeRoot)
-            return;
-        const newRoot = /** @type {RyunixRootFiber} */ {
-            dom: activeRoot.dom,
-            props: activeRoot.props,
-            alternate: 
-            /** @type {RyunixRootFiber | null} */ currentState.currentRoot || null,
-        };
-        queueUpdate(() => scheduleWork$1(newRoot, priority));
-    };
-    wipFiber.hooks[hookIndex] = hook;
-    state.hookIndex++;
-    return [hook.state, dispatch];
-};
-/**
- * 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
- * @param {() => void | (() => void)} callback
- * @param {unknown[] | undefined} deps
- * @returns {void}
- */
-const useEffect = (callback, deps) => {
-    // SSR safety check - more reliable than state.isServerRendering
-    if (typeof window === 'undefined') {
-        return;
-    }
-    const state = getState();
-    if (state.isServerRendering) {
-        return;
-    }
-    validateHookContext();
-    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');
+    let children = [
+        componentType(fiber.props),
+    ];
+    if (componentType._contextId && fiber.props?.value !== undefined) {
+        fiber._contextId = componentType._contextId;
+        fiber._contextValue = fiber.props.value;
     }
-    const { hookIndex } = state;
-    const wipFiber = /** @type {RyunixFiber} */ state.wipFiber;
-    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++;
+    reconcileChildren(fiber, children);
 };
-/**
- * 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.
- * @param {unknown} initialValue
- * @returns {{ current: unknown }}
- */
-const useRef = (initialValue) => {
-    // SSR safety check - more reliable than state.isServerRendering
-    if (typeof window === 'undefined') {
-        return { current: initialValue };
+const isUnderClientOnlyBoundary = (fiber) => {
+    let current = fiber?.parent || null;
+    while (current) {
+        if (current._hydrateClientOnly)
+            return true;
+        current = current.parent || null;
     }
+    return false;
+};
+const updateHostComponent = (fiber) => {
     const state = getState();
-    if (state.isServerRendering) {
-        return { current: initialValue };
+    if (fiber.type === RYUNIX_TYPES.RYUNIX_CONTEXT) {
+        fiber._contextId =
+            fiber.props?._contextId;
+        fiber._contextValue = fiber.props?.value;
     }
-    validateHookContext();
-    const { hookIndex } = state;
-    const wipFiber = /** @type {RyunixFiber} */ state.wipFiber;
-    const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
-    const hook = {
-        hookID: hookIndex,
-        type: RYUNIX_TYPES.RYUNIX_REF,
-        value: oldHook
-            ? /** @type {{ value: { current: unknown } }} */ oldHook.value
-            : { current: initialValue },
-    };
-    wipFiber.hooks[hookIndex] = hook;
-    state.hookIndex++;
-    return /** @type {{ current: unknown }} */ 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
- * @param {() => unknown} compute
- * @param {unknown[]} deps
- * @returns {unknown}
- */
-const useMemo = (compute, deps) => {
-    // SSR safety check - more reliable than state.isServerRendering
-    if (typeof window === 'undefined') {
-        return compute();
-    }
-    const state = getState();
-    if (state.isServerRendering) {
-        return compute();
-    }
-    validateHookContext();
-    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 { hookIndex } = state;
-    const wipFiber = /** @type {RyunixFiber} */ state.wipFiber;
-    const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
-    let value;
-    if (oldHook && !haveDepsChanged(oldHook.deps, deps)) {
-        value = /** @type {{ value?: unknown }} */ oldHook.value;
+    const isPassthrough = fiber.type === RYUNIX_TYPES.RYUNIX_FRAGMENT ||
+        fiber.type === RYUNIX_TYPES.RYUNIX_CONTEXT ||
+        fiber.type === Symbol.for('ryunix.portal');
+    if (state.isHydrating && isPassthrough) {
+        fiber.effectTag = EFFECT_TAGS.HYDRATE;
     }
-    else {
-        try {
-            value = compute();
+    else if (state.isHydrating && isUnderClientOnlyBoundary(fiber)) {
+        if (!fiber.dom) {
+            fiber.dom = createDom(fiber);
+            fiber.effectTag = EFFECT_TAGS.PLACEMENT;
         }
-        catch (error) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.error('Error in useMemo computation:', error);
+    }
+    else if (!fiber.dom) {
+        if (state.isHydrating && state.hydrateCursor) {
+            const domNode = state.hydrateCursor;
+            const isText = fiber.type === RYUNIX_TYPES.TEXT_ELEMENT && domNode.nodeType === 3;
+            const isElement = typeof fiber.type === 'string' &&
+                domNode.nodeType === 1 &&
+                domNode.tagName.toLowerCase() === fiber.type.toLowerCase();
+            if (isText || isElement) {
+                fiber.dom = domNode;
+                fiber.effectTag = EFFECT_TAGS.HYDRATE;
+                if (isText &&
+                    fiber.props?.nodeValue != null &&
+                    domNode.nodeValue !== String(fiber.props.nodeValue)) {
+                    domNode.nodeValue = String(fiber.props.nodeValue);
+                    logHydrationRecoverable('text');
+                }
+                if (isElement &&
+                    domNode.hasAttribute('data-ryunix-hydrate-boundary')) {
+                    fiber._hydrateClientOnly = true;
+                }
+                state.hydrateCursor = nextValidSibling$1(domNode.firstChild);
             }
-            throw error;
+            else {
+                const policy = getHydrationPolicy();
+                const detail = `Mismatch at ${getTypeLabel(fiber.type)}. Expected ${domNode.nodeType === 1 ? domNode.tagName : 'text'} but got ${String(fiber.type)}.`;
+                const boundaryFiber = findNearestHydrationBoundary(fiber);
+                const boundaryDom = (boundaryFiber ? getBoundaryDom(boundaryFiber) : null) ??
+                    findBoundaryDomFromNode(state.hydrateCursor);
+                if (policy.recover === 'boundary' && boundaryFiber && boundaryDom) {
+                    logHydrationBoundaryMismatch(detail);
+                    enqueueScopedRecovery(boundaryFiber, boundaryDom, state.hydrateCursor ?? null);
+                    state.hydrateCursor = skipHydrationSubtree(state.hydrateCursor ?? null, boundaryDom);
+                    fiber.dom = createDom(fiber);
+                    fiber.effectTag = EFFECT_TAGS.PLACEMENT;
+                }
+                else if (policy.recover === 'none') {
+                    logHydrationFatal(detail);
+                    state.isHydrating = false;
+                    state.hydrateCursor = null;
+                    fiber.dom = createDom(fiber);
+                    fiber.effectTag = EFFECT_TAGS.PLACEMENT;
+                }
+                else {
+                    logHydrationMismatch(detail);
+                    state.isHydrating = false;
+                    state.hydrationFailed = true;
+                    state.hydrateCursor = null;
+                    fiber.dom = createDom(fiber);
+                    fiber.effectTag = EFFECT_TAGS.PLACEMENT;
+                }
+            }
+        }
+        else {
+            fiber.dom = createDom(fiber);
         }
     }
-    const hook = {
-        hookID: hookIndex,
-        type: RYUNIX_TYPES.RYUNIX_MEMO,
-        value,
-        deps,
-    };
-    wipFiber.hooks[hookIndex] = hook;
-    state.hookIndex++;
-    return value;
+    const children = fiber.props?.children || [];
+    reconcileChildren(fiber, children);
 };
-/**
- * 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
- * @param {(...args: never[]) => unknown} callback
- * @param {unknown[]} deps
- * @returns {(...args: never[]) => unknown}
- */
-const useCallback = (callback, deps) => {
-    if (!is.function(callback)) {
-        throw new Error('useCallback requires a function as first argument');
+const getTypeLabel = (type) => {
+    if (typeof type === 'symbol')
+        return type.description || type.toString();
+    if (typeof type === 'function')
+        return type.name || 'anonymous';
+    return String(type);
+};
+
+let scheduleWorkFn = null;
+const setScheduleWork = (fn) => {
+    scheduleWorkFn = fn;
+};
+const scheduleWork$1 = (root, priority) => {
+    if (scheduleWorkFn) {
+        return scheduleWorkFn(root, priority);
     }
-    return /** @type {(...args: never[]) => unknown} */ useMemo(() => callback, deps);
-};
-/**
- * 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
- * @param {string | symbol} [contextId]
- * @param {unknown} [defaultValue]
- * @returns {{ Provider: RyunixComponent & { _contextId?: string | symbol }, useContext: (ctxID?: string | symbol) => unknown }}
- */
-const createContext = (contextId = RYUNIX_TYPES.RYUNIX_CONTEXT, defaultValue = {}) => {
-    /** @param {{ value?: unknown, children?: import('../types/internal.js').RyunixNode }} props */
-    const Provider = ({ value, children }) => {
-        return createElement(RYUNIX_TYPES.RYUNIX_CONTEXT, { value, children, _contextId: contextId }, ...flattenArray([children]));
-    };
-    Provider._contextId = contextId;
-    /** @param {string | symbol} [ctxID] */
-    const useContext = (ctxID = contextId) => {
-        const state = getState();
-        if (state.isServerRendering) {
-            const ssrContexts = 
-            /** @type {Record<string | symbol, unknown> | undefined} */ state.ssrContexts;
-            return ssrContexts && ssrContexts[ctxID] !== undefined
-                ? ssrContexts[ctxID]
-                : defaultValue;
-        }
-        validateHookContext();
-        /** @type {RyunixFiber | null | undefined} */
-        let fiber = /** @type {RyunixFiber} */ state.wipFiber;
-        while (fiber) {
-            if (fiber._contextId === ctxID && fiber._contextValue !== undefined) {
-                return fiber._contextValue;
-            }
-            const fiberType = fiber.type;
-            if (fiberType?._contextId === ctxID && fiber.props?.value !== undefined) {
-                return fiber.props.value;
-            }
-            fiber = fiber.parent;
-        }
-        return defaultValue;
-    };
-    return {
-        Provider: 
-        /** @type {RyunixComponent & { _contextId?: string | symbol }} */ Provider,
-        useContext,
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn('[Ryunix] scheduleWork called before being initialized.');
+    }
+};
+
+const renderSubtree = (element, container) => {
+    clearContainer(container);
+    const root = {
+        dom: container,
+        props: { children: [element] },
+        isHydrating: false,
+        hydrateCursor: null,
     };
+    scheduleWork$1(root, undefined);
 };
-/**
- * The `useQuery` function extracts query parameters from the URL in a browser environment.
- * @returns {Record<string, string>}
- */
-const useQuery = () => {
-    if (typeof window === 'undefined')
-        return {};
-    const searchParams = new URLSearchParams(window.location.search);
-    /** @type {Record<string, string>} */
-    const query = {};
-    for (const [key, value] of searchParams.entries()) {
-        query[key] = value;
+const recoverScopedHydrationFailures = () => {
+    const state = getState();
+    const queue = state.scopedRecoveryQueue;
+    if (!queue?.length)
+        return;
+    state.scopedRecoveryQueue = [];
+    for (const item of queue) {
+        logHydrationBoundaryRecovery();
+        renderSubtree(item.element, item.boundaryDom);
     }
-    return query;
 };
-/**
- * The function `useHash` in JavaScript is used to manage and update the hash portion of the URL in a
- * web application.
- * @returns {string}
- */
-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 /** @type {string} */ hash;
-};
-/**
- * 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.
- * This hook can't be reached by google crawler.
- * @param {RyunixMetadataTags} [tags]
- * @param {RyunixMetadataOptions} [options]
- * @returns {void}
- */
-const useMetadata = (tags = {}, options = {}) => {
+const recoverHydrationFailureIfNeeded = () => {
     const state = getState();
-    if (state.isServerRendering) {
-        state.ssrMetadata = { ...state.ssrMetadata, ...tags };
+    if (!state.hydrationFailed || state.hydrationRecover)
         return;
-    }
-    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;
+    const policy = getHydrationPolicy();
+    if (policy.recover === 'none')
+        return;
+    const container = state.containerRoot || state.currentRoot?.dom;
+    const element = state.currentRoot?.props?.children?.[0];
+    if (!container || element == null)
+        return;
+    state.hydrationRecover = true;
+    state.hydrationFailed = false;
+    logHydrationFailure('');
+    logHydrationRecovery();
+    renderSubtree(element, container);
+};
+const runHydrationRecovery = () => {
+    recoverScopedHydrationFailures();
+    recoverHydrationFailureIfNeeded();
+};
+
+let workQueue = [];
+let isWorkLoopScheduled = false;
+function performUnitOfWork(fiber) {
+    const state = getState();
+    const isFunctionComponent = fiber.type instanceof Function || typeof fiber.type === 'function';
+    try {
+        if (isFunctionComponent) {
+            updateFunctionComponent(fiber);
         }
         else {
-            finalTitle = defaultTitle;
+            updateHostComponent(fiber);
         }
-        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);
+    }
+    catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.error('[Ryunix ErrorBoundary] Caught error during render:', error);
+            try {
+                const src = fiber.props && fiber.props.__source;
+                if (src && error && typeof error === 'object') {
+                    error.__ryunix_source = src;
+                }
+                let targetFiber = fiber;
+                while (!error.__ryunix_source && targetFiber) {
+                    if (targetFiber.props && targetFiber.props.__source) {
+                        error.__ryunix_source = targetFiber.props.__source;
+                    }
+                    targetFiber = targetFiber.parent;
+                }
             }
-            link.setAttribute('href', tags.canonical);
+            catch (e) { }
         }
-        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
-/** @type {ReturnType<typeof createContext>} */
-const RouterContext = createContext('ryunix.navigation', 
-/** @type {RyunixRouterContextValue} */ {
-    location: '/',
-    params: {},
-    query: {},
-    /** @param {string} _path */
-    navigate: (_path) => { },
-    route: null,
-});
-/**
- * @param {RyunixRoute[]} routes
- * @param {string} path
- * @returns {RouteMatch}
- */
-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;
+        let boundaryFiber = fiber.parent;
+        let foundBoundary = false;
+        while (boundaryFiber) {
+            if (boundaryFiber.type &&
+                boundaryFiber.type
+                    .ryunix_type === 'RYUNIX_ERROR_BOUNDARY') {
+                foundBoundary = true;
+                break;
+            }
+            boundaryFiber = boundaryFiber.parent;
         }
-        if (route.path === '*')
-            return notFound;
-        if (!route.path || typeof route.path !== 'string')
-            continue;
-        /** @type {{ key: string, isCatchAll: boolean }[]} */
-        const keys = [];
-        const pattern = new RegExp(`^${route.path.replace(/:(\.\.\.)?(\w+)/g, (
-        /** @type {string} */ match, 
-        /** @type {string | undefined} */ isCatchAll, 
-        /** @type {string} */ key) => {
-            keys.push({ key, isCatchAll: !!isCatchAll });
-            return isCatchAll ? '(.+)' : '([^/]+)';
-        })}$`);
-        const matchPath = pathname.match(pattern);
-        if (matchPath) {
-            const params = keys.reduce((acc, keyObj, index) => {
-                const val = matchPath[index + 1];
-                acc[keyObj.key] = keyObj.isCatchAll && val ? val.split('/') : val;
-                return acc;
-            }, 
-            /** @type {Record<string, string | string[]>} */ {});
-            return { route, params };
+        if (foundBoundary) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('[Ryunix ErrorBoundary] Recovering tree at nearest boundary.');
+            }
+            boundaryFiber.stateError = error;
+            fiber.child = null;
+            return boundaryFiber;
+        }
+        else {
+            console.error('[Ryunix] Fatal Uncaught Error. No ErrorBoundary was found in the tree to handle this exception:\n', error);
+            state.nextUnitOfWork = null;
+            return null;
         }
     }
-    return notFound;
-};
-/**
- * @returns {string}
- */
-const getSsrPathname = () => {
-    const pathname = globalThis?.window?.location?.pathname;
-    if (typeof pathname === 'string' && pathname) {
-        return pathname.split('?')[0].split('#')[0];
+    if (fiber.child) {
+        return fiber.child;
     }
-    return '/';
-};
-/**
- * The `RouterProvider` component manages routing in a Ryunix application by updating the location based
- * on window events and providing context for the current route.
- * @param {{ routes: RyunixRoute[], children?: import('../types/internal.js').RyunixNode }} props
- * @returns {import('./createElement.js').RyunixElement}
- */
-const RouterProvider = ({ routes, children }) => {
-    // SSR: Return server-safe version without hooks
-    if (typeof window === 'undefined') {
-        const location = getSsrPathname();
-        const currentRouteData = findRoute(routes, location);
-        /** @type {RyunixRouterContextValue} */
-        const contextValue = {
-            location,
-            params: currentRouteData.params || {},
-            query: {},
-            navigate: () => { },
-            route: currentRouteData.route,
-        };
-        return createElement(
-        /** @type {string | symbol | Function} */ RouterContext.Provider, { value: contextValue }, Fragment({ children }));
+    let nextFiber = fiber;
+    while (nextFiber) {
+        if (state.isHydrating && nextFiber.dom) {
+            state.hydrateCursor = nextValidSibling$1(nextFiber.dom.nextSibling);
+        }
+        if (nextFiber.sibling) {
+            return nextFiber.sibling;
+        }
+        nextFiber = nextFiber.parent;
     }
-    const [location, setLocation] = 
-    /** @type {[string, (action: unknown, priority?: number) => void]} */ 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);
-        };
-    }, []);
-    /** @param {string} path */
-    const navigate = (path) => {
-        if (typeof window !== 'undefined' && window.__RYUNIX_MPA__) {
-            window.location.assign(path);
-            return;
+}
+const workLoop = (deadline) => {
+    const state = getState();
+    let shouldYield = false;
+    while ((state.nextUnitOfWork || workQueue.length > 0) && !shouldYield) {
+        if (!state.nextUnitOfWork && workQueue.length > 0) {
+            const nextRoot = workQueue.shift();
+            state.wipRoot = nextRoot;
+            state.nextUnitOfWork = nextRoot;
+            state.deletions = [];
+            if (nextRoot.isHydrating !== undefined) {
+                state.isHydrating = nextRoot.isHydrating;
+                state.hydrateCursor = nextRoot.hydrateCursor;
+            }
         }
-        window.history.pushState({}, '', path);
-        setLocation(path);
-    };
-    const currentRouteData = findRoute(routes, location);
-    const query = useQuery();
-    /** @type {RyunixRouterContextValue} */
-    const contextValue = {
-        location,
-        params: currentRouteData.params || {},
-        query,
-        navigate,
-        route: currentRouteData.route,
-    };
-    return createElement(
-    /** @type {string | symbol | Function} */ RouterContext.Provider, { value: contextValue }, Fragment({ children }));
-};
-/**
- * The function `useRouter` returns the context of the Router for navigation in a Ryunix application.
- * @returns {RyunixRouterContextValue}
- */
-const useRouter = () => {
-    return RouterContext.useContext('ryunix.navigation');
-};
-/**
- * The `Children` function in JavaScript uses router hooks to handle scrolling to a specific element
- * based on the hash in the URL.
- * @returns {import('./createElement.js').RyunixElement | null}
- */
-const Children = () => {
-    const { route, params, query, location } = useRouter();
-    if (!route || !route.component)
-        return null;
-    const hash = useHash();
-    useEffect(() => {
-        if (hash) {
-            const id = /** @type {string} */ hash.slice(1);
-            const el = document.getElementById(id);
-            if (el)
-                el.scrollIntoView({ block: 'start', behavior: 'smooth' });
+        if (state.nextUnitOfWork) {
+            state.nextUnitOfWork = performUnitOfWork(state.nextUnitOfWork);
         }
-    }, [hash]);
-    return createElement(
-    /** @type {string | symbol | Function} */ route.component, {
-        key: location,
-        params,
-        query,
-        hash,
-        location,
-    });
-};
-/**
- * usePathname - Returns the current pathname
- * @returns {string}
- */
-const usePathname = () => {
-    const { location } = useRouter();
-    return location.split('?')[0].split('#')[0];
-};
-/**
- * useSearchParams - Returns the current URLSearchParams object
- * @returns {URLSearchParams}
- */
-const useSearchParams = () => {
-    const { query } = useRouter();
-    return new URLSearchParams(query);
+        shouldYield = deadline.timeRemaining() < 1;
+    }
+    if (!state.nextUnitOfWork && state.wipRoot) {
+        commitRoot();
+        runHydrationRecovery();
+    }
+    if (state.nextUnitOfWork || workQueue.length > 0) {
+        rIC(workLoop);
+    }
+    else {
+        isWorkLoopScheduled = false;
+    }
 };
-/**
- * Link - Base link component for SPA navigation
- * Supports optional prefetching of lazy components.
- * @param {{ to: string, prefetch?: boolean, children?: import('../types/internal.js').RyunixNode } & Record<string, unknown>} props
- * @returns {import('./createElement.js').RyunixElement}
- */
-const Link = ({ to, prefetch = true, ...props }) => {
-    const { navigate } = useRouter();
-    /** @param {MouseEvent} e */
-    const handleClick = (e) => {
-        if (e.button !== 0 || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {
-            return;
+const scheduleWork = (root, priority = getCurrentPriority()) => {
+    const state = getState();
+    if (state.wipRoot) {
+        workQueue.push(root);
+    }
+    else {
+        state.nextUnitOfWork = root;
+        state.wipRoot = root;
+        state.deletions = [];
+        if (root.isHydrating !== undefined) {
+            state.isHydrating = root.isHydrating;
+            state.hydrateCursor = root.hydrateCursor;
         }
-        e.preventDefault();
-        navigate(to);
-    };
-    const handleMouseEnter = () => {
-    };
-    const { className: _omitClassName, ...cleanedProps } = props;
-    return createElement('a', {
-        href: to,
-        onClick: handleClick,
-        onMouseEnter: handleMouseEnter,
-        className: props.className || props['ryunix-class'],
-        ...cleanedProps,
-    }, props.children);
-};
-/**
- * The NavLink function in JavaScript is a component that generates a link element with customizable
- * classes and active state based on the current location.
- * @param {{ to: string, exact?: boolean, children?: import('../types/internal.js').RyunixNode } & Record<string, unknown>} props
- * @returns {import('./createElement.js').RyunixElement}
- */
-const NavLink = ({ to, exact = false, ...props }) => {
-    const { location, navigate } = useRouter();
-    const isActive = exact ? location === to : location.startsWith(to);
-    /** @param {string | ((args: { isActive: boolean }) => string) | undefined} cls */
-    const resolveClass = (cls) => typeof cls === 'function' ? cls({ isActive }) : cls || '';
-    /** @param {MouseEvent} e */
-    const handleClick = (e) => {
-        if (e.button !== 0 || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {
-            return;
+    }
+    state.hookIndex = 0;
+    state.effects = [];
+    if (!isWorkLoopScheduled) {
+        isWorkLoopScheduled = true;
+        if (priority <= Priority.USER_BLOCKING) {
+            Promise.resolve().then(() => {
+                workLoop({ timeRemaining: () => 10, didTimeout: true });
+            });
         }
-        e.preventDefault();
-        navigate(to);
-    };
-    const classAttrName = props['ryunix-class'] ? 'ryunix-class' : 'className';
-    const classAttrValue = resolveClass(
-    /** @type {string | ((args: { isActive: boolean }) => string) | undefined} */ 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);
+        else {
+            rIC(workLoop);
+        }
+    }
 };
-/**
- * useStore with priority support
- * @param {unknown} initialState
- * @returns {[unknown, (action: unknown, priority?: number) => void]}
- */
-const useStorePriority = (initialState) => {
-    /** @param {unknown} state @param {{ value: unknown, priority?: number }} action */
-    const reducer = (state, action) => typeof action === 'function'
-        ? /** @type {{ value: (s: unknown) => unknown }} */ action.value(state)
-        : action.value;
-    const [state, baseDispatch] = useReducer(reducer, initialState, undefined);
-    /** @param {unknown} action @param {number} [priority] */
-    const dispatch = (action, priority = Priority.NORMAL) => {
-        const wrappedAction = {
-            value: action,
-            priority,
-        };
-        scheduleUpdate(() => baseDispatch(wrappedAction, priority), priority);
+setScheduleWork(scheduleWork);
+
+const render = (element, container) => {
+    const state = getState();
+    clearContainer(container);
+    const root = {
+        dom: container,
+        props: {
+            children: [
+                element,
+            ],
+        },
+        alternate: state.currentRoot,
+        isHydrating: false,
+        hydrateCursor: null,
     };
-    return [state, dispatch];
+    scheduleWork(root);
+    return root;
 };
-/**
- * useTransition - Mark updates as non-urgent
- * @returns {[boolean, (callback: () => void) => void]}
- */
-const useTransition = () => {
-    const [isPending, setIsPending] = useStorePriority(false);
-    /** @param {() => void} callback */
-    const startTransition = (callback) => {
-        setIsPending(true, Priority.IMMEDIATE);
-        setTimeout(() => {
-            runWithPriority(Priority.LOW, () => {
-                callback();
-                setIsPending(false, Priority.LOW);
-            });
-        }, 0);
-    };
-    return [/** @type {boolean} */ isPending, startTransition];
+const SSR_ROOT_ATTR = 'data-ryunix-ssr-root';
+const nextValidSibling = (node) => {
+    let next = node;
+    while (next &&
+        ((next.nodeType === 3 && !next.nodeValue.trim()) ||
+            next.nodeType === 8 ||
+            (next.nodeType === 1 &&
+                next.hasAttribute('data-ryunix-ssr')))) {
+        next = next.nextSibling;
+    }
+    return next;
 };
-/**
- * useDeferredValue - Defer value updates
- * @param {unknown} value
- * @returns {unknown}
- */
-const useDeferredValue = (value) => {
-    const [deferredValue, setDeferredValue] = useStorePriority(value);
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            setDeferredValue(value, Priority.LOW);
-        }, 100);
-        return () => clearTimeout(timeout);
-    }, [value]);
-    return deferredValue;
+const hydrate = (element, container) => {
+    const state = getState();
+    state.containerRoot = container;
+    const root = {
+        dom: container,
+        props: {
+            children: [
+                element,
+            ],
+        },
+        alternate: state.currentRoot,
+        isHydrating: true,
+        hydrateCursor: nextValidSibling(container.firstChild),
+    };
+    scheduleWork(root);
+    return root;
 };
-/**
- * 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.
- * @param {string} key
- * @param {unknown} [initialState]
- * @returns {[unknown, (value: unknown) => void]}
- */
-const usePersistentStore = (key, initialState = '') => {
-    const [state, dispatch] = useStore(() => {
-        try {
-            const item = window.localStorage.getItem(key);
-            return item ? JSON.parse(item) : initialState;
+const init = (MainElement, root = '__ryunix', components = {}) => {
+    const state = getState();
+    const container = document.getElementById(root);
+    state.containerRoot = container;
+    if (!container) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn(`[Ryunix] init: container #${root} not found.`);
         }
-        catch (error) {
-            return initialState;
+        return undefined;
+    }
+    resetHydrationLogFlags();
+    state.hydrationPolicy = getHydrationPolicy();
+    state.scopedRecoveryQueue = [];
+    state.hydrationRecover = false;
+    state.isHydrating = false;
+    state.hydrationFailed = false;
+    if (state.currentRoot) {
+        if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
+            console.log(`[Ryunix Debug] init: existing root detected. Client render on #${root}`);
         }
-    });
-    /**
-     * 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.
-     * @param {unknown} value
-     */
-    const setValue = (value) => {
-        try {
-            dispatch(value);
-            window.localStorage.setItem(key, JSON.stringify(value));
+        return render(MainElement, container);
+    }
+    const ssrEnabled = process.env.RYUNIX_SSR !== 'false';
+    const isSsrPayload = ssrEnabled &&
+        container.hasAttribute(SSR_ROOT_ATTR) &&
+        container.hasChildNodes();
+    if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
+        console.log(`[Ryunix Debug] init: isSsrPayload=${isSsrPayload}, hasChildNodes=${container.hasChildNodes()}`);
+    }
+    if (isSsrPayload) {
+        if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
+            console.log(`[Ryunix Debug] init: hydrating SSR markup on #${root}`);
         }
-        catch (error) {
-            console.error(error);
+        container.removeAttribute(SSR_ROOT_ATTR);
+        return hydrate(MainElement, container);
+    }
+    if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
+        console.log(`[Ryunix Debug] init: client render on #${root}`);
+    }
+    return render(MainElement, container);
+};
+const safeRender = (component, props, onError) => {
+    try {
+        return component(props);
+    }
+    catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.error('Component error:', error);
         }
-    };
-    return [state, setValue];
+        if (onError)
+            onError(error);
+        return null;
+    }
 };
-/**
- * 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`.
- * @param {boolean} [initialState]
- * @returns {[boolean, () => void]}
- */
-const useSwitch = (initialState = false) => {
-    const [state, dispatch] = useStore(initialState);
-    /**
-     * The function `toggle` toggles the state by dispatching the opposite value of the current state.
-     * Uses functional update to avoid stale closure issues with rapid calls.
-     */
-    const toggle = () => {
-        dispatch(/** @param {boolean} prev */ (prev) => !prev);
+
+let isBatching = false;
+let pendingUpdates = [];
+function batchUpdates(callback) {
+    const wasBatching = isBatching;
+    isBatching = true;
+    try {
+        callback();
+    }
+    finally {
+        isBatching = wasBatching;
+        if (!isBatching && pendingUpdates.length > 0) {
+            flushUpdates();
+        }
+    }
+}
+function queueUpdate(update) {
+    pendingUpdates.push(update);
+    if (!isBatching) {
+        flushUpdates();
+    }
+}
+function flushUpdates() {
+    if (pendingUpdates.length === 0)
+        return;
+    const updates = pendingUpdates;
+    pendingUpdates = [];
+    updates.forEach((update) => update());
+}
+
+process.env.NODE_ENV !== 'production';
+const validateHookContext = (hookName = 'A hook') => {
+    const state = getState();
+    if (!state.wipFiber) {
+        throw new Error(`${hookName} can only be called inside function components. ` +
+            'Make sure you are calling hooks at the top level of your component.');
+    }
+    const wipFiber = state.wipFiber;
+    if (!Array.isArray(wipFiber.hooks)) {
+        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, priority = getCurrentPriority()) => {
+    if (typeof window === 'undefined') {
+        return [
+            is.function(initialState)
+                ? initialState()
+                : initialState,
+            () => { },
+        ];
+    }
+    const state = getState();
+    if (state.isServerRendering) {
+        return [
+            is.function(initialState)
+                ? initialState()
+                : initialState,
+            () => { },
+        ];
+    }
+    const reducer = (state, action) => is.function(action) ? action(state) : action;
+    return useReducer(reducer, initialState, undefined, priority);
+};
+const useReducer = (reducer, initialState, init, defaultPriority = getCurrentPriority()) => {
+    if (typeof window === 'undefined') {
+        return [init ? init(initialState) : initialState, () => { }];
+    }
+    const state = getState();
+    if (state.isServerRendering) {
+        return [init ? init(initialState) : initialState, () => { }];
+    }
+    validateHookContext();
+    const { hookIndex } = state;
+    const wipFiber = state.wipFiber;
+    const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+    const hook = {
+        hookID: hookIndex,
+        type: RYUNIX_TYPES.RYUNIX_STORE,
+        state: oldHook ? oldHook.state : init ? init(initialState) : initialState,
+        queue: [],
     };
-    return [/** @type {boolean} */ state, toggle];
-};
-/**
- * useLayoutEffect - Like useEffect but runs synchronously after DOM mutations
- * and before the browser paints. Use for DOM measurements.
- * @param {() => void | (() => void)} callback - Effect callback
- * @param {unknown[] | undefined} deps - Dependencies array
- * @returns {void}
- */
-const useLayoutEffect = (callback, deps) => {
-    // SSR safety check - more reliable than state.isServerRendering
+    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, priority = defaultPriority) => {
+        if (action === undefined) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('dispatch called with undefined action');
+            }
+            return;
+        }
+        hook.queue.push(action);
+        const currentState = getState();
+        const activeRoot = currentState.currentRoot ||
+            currentState.wipRoot;
+        if (!activeRoot)
+            return;
+        const newRoot = {
+            dom: activeRoot.dom,
+            props: activeRoot.props,
+            alternate: currentState.currentRoot || null,
+        };
+        queueUpdate(() => scheduleWork$1(newRoot, priority));
+    };
+    wipFiber.hooks[hookIndex] =
+        hook;
+    state.hookIndex++;
+    return [hook.state, dispatch];
+};
+const useEffect = (callback, deps) => {
     if (typeof window === 'undefined') {
         return;
     }
@@ -1985,13 +1575,13 @@ const useLayoutEffect = (callback, deps) => {
     }
     validateHookContext();
     if (!is.function(callback)) {
-        throw new Error('useLayoutEffect callback must be a function');
+        throw new Error('useEffect callback must be a function');
     }
     if (deps !== undefined && !Array.isArray(deps)) {
-        throw new Error('useLayoutEffect dependencies must be an array or undefined');
+        throw new Error('useEffect dependencies must be an array or undefined');
     }
     const { hookIndex } = state;
-    const wipFiber = /** @type {RyunixFiber} */ state.wipFiber;
+    const wipFiber = state.wipFiber;
     const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
     const hasChanged = haveDepsChanged(oldHook?.deps, deps);
     const hook = {
@@ -2000,789 +1590,498 @@ const useLayoutEffect = (callback, deps) => {
         deps,
         effect: hasChanged ? callback : null,
         cancel: oldHook?.cancel,
-        isLayout: true, // Flag to run synchronously during commit
     };
-    wipFiber.hooks[hookIndex] = hook;
+    wipFiber.hooks[hookIndex] =
+        hook;
     state.hookIndex++;
 };
-// Counter for deterministic ID generation
-let idCounter = 0;
-/**
- * Reset the idCounter for useId - call this before each SSR renderToString
- * to ensure deterministic IDs across multiple renders
- * @returns {void}
- */
-const resetIdCounter = () => {
-    idCounter = 0;
-};
-/**
- * useId - Generate a deterministic, unique ID that is stable across SSR and hydration.
- * @returns {string} A unique ID string
- */
-const useId = () => {
+const useRef = (initialValue) => {
+    if (typeof window === 'undefined') {
+        return { current: initialValue };
+    }
     const state = getState();
     if (state.isServerRendering) {
-        // On server, use a simple incrementing counter (reset per renderToString call)
-        return `:r${idCounter++}:`;
+        return { current: initialValue };
     }
     validateHookContext();
     const { hookIndex } = state;
-    const wipFiber = /** @type {RyunixFiber} */ state.wipFiber;
+    const wipFiber = state.wipFiber;
     const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
     const hook = {
         hookID: hookIndex,
         type: RYUNIX_TYPES.RYUNIX_REF,
         value: oldHook
-            ? /** @type {{ value: string }} */ oldHook.value
-            : `:r${idCounter++}:`,
+            ? oldHook.value
+            : { current: initialValue },
     };
-    wipFiber.hooks[hookIndex] = hook;
+    wipFiber.hooks[hookIndex] =
+        hook;
     state.hookIndex++;
-    return /** @type {string} */ /** @type {{ value: string }} */ hook.value;
-};
-/**
- * useDebounce - Returns a debounced version of the value that only updates
- * after the specified delay has passed since the last change.
- * @param {unknown} value - Value to debounce
- * @param {number} delay - Delay in milliseconds (default: 300)
- * @returns {unknown} Debounced value
- */
-const useDebounce = (value, delay = 300) => {
-    const [debouncedValue, setDebouncedValue] = useStore(value);
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            setDebouncedValue(value);
-        }, delay);
-        return () => clearTimeout(timer);
-    }, [value, delay]);
-    return debouncedValue;
+    return hook.value;
 };
-/**
- * useThrottle - Returns a throttled version of the value that only updates
- * at most once per specified interval.
- * @param {unknown} value - Value to throttle
- * @param {number} interval - Minimum interval in milliseconds (default: 300)
- * @returns {unknown} Throttled value
- */
-const useThrottle = (value, interval = 300) => {
-    const [throttledValue, setThrottledValue] = useStore(value);
-    const lastUpdated = useRef(Date.now());
-    useEffect(() => {
-        const now = Date.now();
-        const elapsed = now - lastUpdated.current;
-        if (elapsed >= interval) {
-            lastUpdated.current = now;
-            setThrottledValue(value);
-        }
-        else {
-            const timer = setTimeout(() => {
-                lastUpdated.current = Date.now();
-                setThrottledValue(value);
-            }, interval - elapsed);
-            return () => clearTimeout(timer);
-        }
-    }, [value, interval]);
-    return throttledValue;
-};
-
-var hooks = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Children: Children,
-    Link: Link,
-    NavLink: NavLink,
-    RouterProvider: RouterProvider,
-    createContext: createContext,
-    resetIdCounter: resetIdCounter,
-    useCallback: useCallback,
-    useDebounce: useDebounce,
-    useDeferredValue: useDeferredValue,
-    useEffect: useEffect,
-    useHash: useHash,
-    useId: useId,
-    useLayoutEffect: useLayoutEffect,
-    useMemo: useMemo,
-    useMetadata: useMetadata,
-    usePathname: usePathname,
-    usePersistentStore: usePersistentStore,
-    usePersitentStore: usePersistentStore,
-    useQuery: useQuery,
-    useReducer: useReducer,
-    useRef: useRef,
-    useRouter: useRouter,
-    useSearchParams: useSearchParams,
-    useStore: useStore,
-    useStorePriority: useStorePriority,
-    useSwitch: useSwitch,
-    useThrottle: useThrottle,
-    useTransition: useTransition
-});
-
-const getHydrationPolicy = () => {
-    const env = typeof process !== 'undefined' && process.env ? process.env : {};
-    const recoverRaw = env.RYUNIX_HYDRATION_RECOVER || 'boundary';
-    const boundariesRaw = env.RYUNIX_HYDRATION_BOUNDARIES || 'route';
-    const strict = env.RYUNIX_HYDRATION_STRICT === 'true';
-    const recover = recoverRaw === 'none' || recoverRaw === 'root' ? recoverRaw : 'boundary';
-    const boundaries = boundariesRaw === 'server-only' || boundariesRaw === 'all-layouts'
-        ? boundariesRaw
-        : 'route';
-    return {
-        recover,
-        boundaries,
-        strict,
-    };
-};
-/**
- */
-const findNearestHydrationBoundary = (fiber) => {
-    let current = fiber || null;
-    while (current) {
-        const props = current.props;
-        if (props &&
-            Object.prototype.hasOwnProperty.call(props, 'data-ryunix-hydrate-boundary')) {
-            return current;
-        }
-        const type = current.type;
-        const maybeTyped = type;
-        if (type &&
-            typeof type === 'function' &&
-            (maybeTyped?.ryunix_type === 'RYUNIX_HYDRATION_BOUNDARY' ||
-                maybeTyped?.ryunix_type === 'RYUNIX_SERVER_BOUNDARY')) {
-            return current;
-        }
-        current = current.parent || null;
+const useMemo = (compute, deps) => {
+    if (typeof window === 'undefined') {
+        return compute();
     }
-    return null;
-};
-/**
- */
-const getBoundaryDom = (fiber) => {
-    if (!fiber)
-        return null;
-    if (fiber.dom && fiber.dom.nodeType === 1) {
-        const el = fiber.dom;
-        if (el.hasAttribute('data-ryunix-hydrate-boundary'))
-            return el;
+    const state = getState();
+    if (state.isServerRendering) {
+        return compute();
     }
-    let child = fiber.child || null;
-    while (child) {
-        if (child.dom && child.dom.nodeType === 1) {
-            const el = child.dom;
-            if (el.hasAttribute('data-ryunix-hydrate-boundary'))
-                return el;
-        }
-        child = child.child || child.sibling || null;
+    validateHookContext();
+    if (!is.function(compute)) {
+        throw new Error('useMemo callback must be a function');
     }
-    return null;
-};
-/**
- */
-const skipHydrationSubtree = (cursor, boundaryRoot) => {
-    if (!cursor || !boundaryRoot)
-        return cursor;
-    if (cursor === boundaryRoot)
-        return boundaryRoot.nextSibling;
-    if (boundaryRoot.contains(cursor))
-        return boundaryRoot.nextSibling;
-    return cursor;
-};
-/**
- */
-const enqueueScopedRecovery = (boundaryFiber, boundaryDom, resumeCursor) => {
-    if (!boundaryFiber || !boundaryDom)
-        return;
-    const state = getState();
-    const queue = state.scopedRecoveryQueue || [];
-    queue.push({
-        boundaryFiber,
-        boundaryDom,
-        resumeCursor,
-        element: (Array.isArray(boundaryFiber.props?.children)
-            ? boundaryFiber.props.children[0]
-            : boundaryFiber.props?.children),
-    });
-    state.scopedRecoveryQueue = queue;
-};
-
-/**
- * @typedef {import('../types/internal.js').RyunixFiber} RyunixFiber
- * @typedef {import('../types/internal.js').RyunixComponent} RyunixComponent
- * @typedef {import('../types/internal.js').RyunixNode} RyunixNode
- */
-/**
- * @param {RyunixFiber} fiber
- */
-const updateFunctionComponent = (fiber) => {
-    const state = getState();
-    state.wipFiber = fiber;
-    state.hookIndex = 0;
-    /** @type {RyunixFiber} */ state.wipFiber.hooks = [];
-    if (state.isHydrating) {
-        fiber.effectTag = EFFECT_TAGS.HYDRATE;
+    if (!Array.isArray(deps)) {
+        throw new Error('useMemo requires a dependencies array');
     }
-    // Memo bailout: skip re-render if props haven't changed
-    const componentType = 
-    /** @type {RyunixComponent & { _arePropsEqual?: (prev: Record<string, unknown>, next: Record<string, unknown>) => boolean }} */ fiber.type;
-    if (componentType._isMemo && fiber.alternate) {
-        const { children: _pc, ...prevRest } = fiber.alternate.props || {};
-        const { children: _nc, ...nextRest } = fiber.props || {};
-        if (componentType._arePropsEqual?.(prevRest, nextRest)) {
-            fiber.hooks = fiber.alternate.hooks;
-            const oldChild = fiber.alternate.child;
-            if (oldChild) {
-                oldChild.parent = fiber;
-                fiber.child = oldChild;
+    const { hookIndex } = state;
+    const wipFiber = state.wipFiber;
+    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);
             }
-            return;
+            throw error;
         }
     }
-    let children = [
-        /** @type {RyunixNode} */ /** @type {(props?: Record<string, unknown>) => unknown} */ componentType(fiber.props),
-    ];
-    if (componentType._contextId && fiber.props?.value !== undefined) {
-        fiber._contextId = componentType._contextId;
-        fiber._contextValue = fiber.props.value;
-    }
-    reconcileChildren(fiber, children);
+    const hook = {
+        hookID: hookIndex,
+        type: RYUNIX_TYPES.RYUNIX_MEMO,
+        value,
+        deps,
+    };
+    wipFiber.hooks[hookIndex] =
+        hook;
+    state.hookIndex++;
+    return value;
 };
-/**
- * @param {RyunixFiber | null | undefined} fiber
- * @returns {boolean}
- */
-const isUnderClientOnlyBoundary = (fiber) => {
-    let current = fiber?.parent || null;
-    while (current) {
-        if (current._hydrateClientOnly)
-            return true;
-        current = current.parent || null;
+const useCallback = (callback, deps) => {
+    if (!is.function(callback)) {
+        throw new Error('useCallback requires a function as first argument');
     }
-    return false;
+    return useMemo(() => callback, deps);
 };
-/**
- * @param {RyunixFiber} fiber
- */
-const updateHostComponent = (fiber) => {
-    const state = getState();
-    if (fiber.type === RYUNIX_TYPES.RYUNIX_CONTEXT) {
-        fiber._contextId =
-            /** @type {string | symbol | undefined} */ fiber.props?._contextId;
-        fiber._contextValue = fiber.props?.value;
-    }
-    const isPassthrough = fiber.type === RYUNIX_TYPES.RYUNIX_FRAGMENT ||
-        fiber.type === RYUNIX_TYPES.RYUNIX_CONTEXT ||
-        fiber.type === Symbol.for('ryunix.portal');
-    if (state.isHydrating && isPassthrough) {
-        fiber.effectTag = EFFECT_TAGS.HYDRATE;
-    }
-    else if (state.isHydrating && isUnderClientOnlyBoundary(fiber)) {
-        if (!fiber.dom) {
-            fiber.dom = /** @type {HTMLElement | Text | null} */ createDom(fiber);
-            fiber.effectTag = EFFECT_TAGS.PLACEMENT;
+const createContext = (contextId = RYUNIX_TYPES.RYUNIX_CONTEXT, defaultValue = {}) => {
+    const Provider = ({ value, children }) => {
+        return createElement(RYUNIX_TYPES.RYUNIX_CONTEXT, { value, children, _contextId: contextId }, ...flattenArray([children]));
+    };
+    Provider._contextId = contextId;
+    const useContext = (ctxID = contextId) => {
+        const state = getState();
+        if (state.isServerRendering) {
+            const ssrContexts = state.ssrContexts;
+            return ssrContexts && ssrContexts[ctxID] !== undefined
+                ? ssrContexts[ctxID]
+                : defaultValue;
         }
-    }
-    else if (!fiber.dom) {
-        if (state.isHydrating && state.hydrateCursor) {
-            const domNode = state.hydrateCursor;
-            const isText = fiber.type === RYUNIX_TYPES.TEXT_ELEMENT && domNode.nodeType === 3;
-            const isElement = typeof fiber.type === 'string' &&
-                domNode.nodeType === 1 &&
-                domNode.tagName.toLowerCase() === fiber.type.toLowerCase();
-            if (isText || isElement) {
-                fiber.dom = /** @type {HTMLElement | Text} */ domNode;
-                fiber.effectTag = EFFECT_TAGS.HYDRATE;
-                if (isText &&
-                    fiber.props?.nodeValue != null &&
-                    domNode.nodeValue !== String(fiber.props.nodeValue)) {
-                    domNode.nodeValue = String(fiber.props.nodeValue);
-                    logHydrationRecoverable('text');
-                }
-                if (isElement &&
-                    domNode.hasAttribute('data-ryunix-hydrate-boundary')) {
-                    fiber._hydrateClientOnly = true;
-                }
-                state.hydrateCursor = nextValidSibling$1(domNode.firstChild);
+        validateHookContext();
+        let fiber = state.wipFiber;
+        while (fiber) {
+            if (fiber._contextId === ctxID && fiber._contextValue !== undefined) {
+                return fiber._contextValue;
             }
-            else {
-                const policy = getHydrationPolicy();
-                const detail = `Mismatch at ${getTypeLabel(fiber.type)}. Expected ${domNode.nodeType === 1 ? domNode.tagName : 'text'} but got ${String(fiber.type)}.`;
-                const boundaryFiber = findNearestHydrationBoundary(fiber);
-                const boundaryDom = boundaryFiber ? getBoundaryDom(boundaryFiber) : null;
-                if (policy.recover === 'boundary' && boundaryFiber && boundaryDom) {
-                    logHydrationBoundaryMismatch(detail);
-                    enqueueScopedRecovery(boundaryFiber, boundaryDom, state.hydrateCursor ?? null);
-                    state.hydrateCursor = skipHydrationSubtree(state.hydrateCursor ?? null, boundaryDom);
-                    fiber.dom = /** @type {HTMLElement | Text | null} */ createDom(fiber);
-                    fiber.effectTag = EFFECT_TAGS.PLACEMENT;
-                }
-                else if (policy.recover === 'none') {
-                    logHydrationFatal(detail);
-                    state.isHydrating = false;
-                    state.hydrateCursor = null;
-                    fiber.dom = /** @type {HTMLElement | Text | null} */ createDom(fiber);
-                    fiber.effectTag = EFFECT_TAGS.PLACEMENT;
-                }
-                else {
-                    logHydrationMismatch(detail);
-                    state.isHydrating = false;
-                    state.hydrationFailed = true;
-                    state.hydrateCursor = null;
-                    fiber.dom = /** @type {HTMLElement | Text | null} */ createDom(fiber);
-                    fiber.effectTag = EFFECT_TAGS.PLACEMENT;
-                }
+            const fiberType = fiber.type;
+            if (fiberType?._contextId === ctxID && fiber.props?.value !== undefined) {
+                return fiber.props.value;
             }
+            fiber = fiber.parent;
         }
-        else {
-            fiber.dom = /** @type {HTMLElement | Text | null} */ createDom(fiber);
-        }
-    }
-    const children = fiber.props?.children || [];
-    reconcileChildren(fiber, children);
-};
-/**
- * @param {string | symbol | RyunixComponent | object} type
- * @returns {string}
- */
-const getTypeLabel = (type) => {
-    if (typeof type === 'symbol')
-        return type.description || type.toString();
-    if (typeof type === 'function')
-        return type.name || 'anonymous';
-    return String(type);
-};
-/**
- * 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.
- */
-/**
- * @param {{ src: string } & Record<string, unknown>} props
- * @returns {import('./createElement.js').RyunixElement}
- */
-const Image = ({ src, ...props }) => {
-    return createElement('img', { ...props, src });
-};
-const { Provider: MDXProvider, useContext: useMDXComponents } = createContext('ryunix.mdx', 
-/** @type {Record<string, RyunixComponent>} */ {});
-/**
- * Get merged MDX components from context and provided components
- * @param {Record<string, RyunixComponent>} [components] - Additional components to merge
- * @returns {Record<string, RyunixComponent>} Merged components object
- */
-const getMDXComponents = (components) => {
-    const contextComponents = useMDXComponents();
+        return defaultValue;
+    };
     return {
-        ...contextComponents,
-        ...components,
+        Provider: Provider,
+        useContext,
     };
 };
-/**
- * @param {string} tag
- * @param {Record<string, unknown>} props
- * @returns {RyunixNode}
- */
-const mdxHost = (tag, props) => 
-/** @type {RyunixNode} */ createElement(tag, props);
-/**
- * Default MDX components with Ryunix-optimized rendering
- * @type {Record<string, (props: Record<string, unknown>) => RyunixNode>}
- */
-const defaultComponents = {
-    // Headings
-    h1: (props) => mdxHost('h1', props),
-    h2: (props) => mdxHost('h2', props),
-    h3: (props) => mdxHost('h3', props),
-    h4: (props) => mdxHost('h4', props),
-    h5: (props) => mdxHost('h5', props),
-    h6: (props) => mdxHost('h6', props),
-    // Text
-    p: (props) => mdxHost('p', props),
-    a: (props) => mdxHost('a', props),
-    strong: (props) => mdxHost('strong', props),
-    em: (props) => mdxHost('em', props),
-    code: (props) => mdxHost('code', props),
-    // Lists
-    ul: (props) => mdxHost('ul', props),
-    ol: (props) => mdxHost('ol', props),
-    li: (props) => mdxHost('li', props),
-    // Blocks
-    blockquote: (props) => mdxHost('blockquote', props),
-    pre: (props) => mdxHost('pre', props),
-    hr: (props) => mdxHost('hr', props),
-    // Tables
-    table: (props) => mdxHost('table', props),
-    thead: (props) => mdxHost('thead', props),
-    tbody: (props) => mdxHost('tbody', props),
-    tr: (props) => mdxHost('tr', props),
-    th: (props) => mdxHost('th', props),
-    td: (props) => mdxHost('td', props),
-    // Media
-    img: (props) => mdxHost('img', props),
-};
-/**
- * MDX Wrapper component
- * Provides default styling and components for MDX content
- */
-/**
- * @param {{ children?: RyunixNode, components?: Record<string, RyunixComponent> }} props
- * @returns {import('./createElement.js').RyunixElement}
- */
-const MDXContent = ({ children, components = {} }) => {
-    const mergedComponents = getMDXComponents(components);
-    return createElement(
-    /** @type {string | symbol | Function} */ MDXProvider, { value: mergedComponents }, createElement('div', null, children));
+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;
 };
-
-/**
- * @param {RyunixNode} element
- * @param {Element | DocumentFragment} container
- */
-const renderSubtree = (element, container) => {
-    clearContainer(/** @type {HTMLElement} */ container);
-    /** @type {RyunixRootFiber} */
-    const root = {
-        dom: container,
-        props: { children: [element] },
-        isHydrating: false,
-        hydrateCursor: null,
-    };
-    scheduleWork$1(root, undefined);
+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 recoverScopedHydrationFailures = () => {
+const useMetadata = (tags = {}, options = {}) => {
     const state = getState();
-    const queue = state.scopedRecoveryQueue;
-    if (!queue?.length)
+    if (state.isServerRendering) {
+        state.ssrMetadata = { ...state.ssrMetadata, ...tags };
         return;
-    state.scopedRecoveryQueue = [];
-    for (const item of queue) {
-        logHydrationBoundaryRecovery();
-        renderSubtree(item.element, item.boundaryDom);
     }
-};
-const recoverHydrationFailureIfNeeded = () => {
-    const state = getState();
-    if (!state.hydrationFailed || state.hydrationRecover)
-        return;
-    const policy = getHydrationPolicy();
-    if (policy.recover === 'none')
-        return;
-    const container = state.containerRoot || state.currentRoot?.dom;
-    const element = state.currentRoot?.props?.children?.[0];
-    if (!container || element == null)
-        return;
-    state.hydrationRecover = true;
-    state.hydrationFailed = false;
-    logHydrationFailure('');
-    logHydrationRecovery();
-    renderSubtree(/** @type {RyunixNode} */ element, container);
-};
-const runHydrationRecovery = () => {
-    recoverScopedHydrationFailures();
-    recoverHydrationFailureIfNeeded();
-};
-
-/**
- * @typedef {import('../types/internal.js').RyunixFiber} RyunixFiber
- * @typedef {import('../types/internal.js').RyunixRootFiber} RyunixRootFiber
- */
-/** @type {RyunixRootFiber[]} */
-let workQueue = [];
-/** @type {boolean} */
-let isWorkLoopScheduled = false;
-/**
- * @param {RyunixFiber} fiber
- * @returns {RyunixFiber | null}
- */
-function performUnitOfWork(fiber) {
-    const state = getState();
-    const isFunctionComponent = fiber.type instanceof Function || typeof fiber.type === 'function';
-    try {
-        if (isFunctionComponent) {
-            updateFunctionComponent(fiber);
+    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 {
-            updateHostComponent(fiber);
-        }
-    }
-    catch (error) {
-        if (process.env.NODE_ENV !== 'production') {
-            console.error('[Ryunix ErrorBoundary] Caught error during render:', error);
-            try {
-                // Attempt to attach original JSX source map for DevOverlay lookup
-                const src = fiber.props && fiber.props.__source;
-                if (src && error && typeof error === 'object') {
-                    error.__ryunix_source = src;
-                }
-                let targetFiber = fiber;
-                while (!error.__ryunix_source && targetFiber) {
-                    if (targetFiber.props && targetFiber.props.__source) {
-                        error.__ryunix_source = targetFiber.props.__source;
-                    }
-                    targetFiber = targetFiber.parent;
-                }
-            }
-            catch (e) { }
+            finalTitle = defaultTitle;
         }
-        // Traverse upwards to find nearest ErrorBoundary
-        let boundaryFiber = fiber.parent;
-        let foundBoundary = false;
-        while (boundaryFiber) {
-            if (boundaryFiber.type &&
-                /** @type {{ ryunix_type?: string }} */ boundaryFiber.type
-                    .ryunix_type === 'RYUNIX_ERROR_BOUNDARY') {
-                foundBoundary = true;
-                break;
+        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);
             }
-            boundaryFiber = boundaryFiber.parent;
+            link.setAttribute('href', tags.canonical);
         }
-        if (foundBoundary) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn('[Ryunix ErrorBoundary] Recovering tree at nearest boundary.');
+        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);
             }
-            // Assign the error state to the boundary so it can render the fallback
-            boundaryFiber.stateError = error;
-            // Discard the corrupted children of the crashing fiber to prevent undefined behavior
-            fiber.child = null;
-            // Rewind the rendering context to the ErrorBoundary fiber
-            // so the work loop immediately starts re-evaluating the boundary branch
-            return boundaryFiber;
+            meta.setAttribute('content', value);
+        });
+    }, [JSON.stringify(tags), JSON.stringify(options)]);
+};
+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;
         }
-        else {
-            // Uncaught fatal error: stop the work loop entirely
-            console.error('[Ryunix] Fatal Uncaught Error. No ErrorBoundary was found in the tree to handle this exception:\n', error);
-            state.nextUnitOfWork = null;
-            return null;
+        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, isCatchAll, key) => {
+            keys.push({ key, isCatchAll: !!isCatchAll });
+            return isCatchAll ? '(.+)' : '([^/]+)';
+        })}$`);
+        const matchPath = pathname.match(pattern);
+        if (matchPath) {
+            const params = keys.reduce((acc, keyObj, index) => {
+                const val = matchPath[index + 1];
+                acc[keyObj.key] = keyObj.isCatchAll && val ? val.split('/') : val;
+                return acc;
+            }, {});
+            return { route, params };
         }
     }
-    if (fiber.child) {
-        return fiber.child;
+    return notFound;
+};
+const getSsrPathname = () => {
+    const pathname = globalThis?.window?.location?.pathname;
+    if (typeof pathname === 'string' && pathname) {
+        return pathname.split('?')[0].split('#')[0];
     }
-    let nextFiber = fiber;
-    while (nextFiber) {
-        // If we just finished a Host node during hydration,
-        // the next fiber (sibling) should start at the next DOM sibling.
-        if (state.isHydrating && nextFiber.dom) {
-            state.hydrateCursor = nextValidSibling$1(nextFiber.dom.nextSibling);
-        }
-        if (nextFiber.sibling) {
-            return nextFiber.sibling;
-        }
-        nextFiber = nextFiber.parent;
-        // When ascending, we don't need to do anything else,
-        // the loop will handle the parent's sibling or end.
+    return '/';
+};
+const RouterProvider = ({ routes, children }) => {
+    if (typeof window === 'undefined') {
+        const location = getSsrPathname();
+        const currentRouteData = findRoute(routes, location);
+        const contextValue = {
+            location,
+            params: currentRouteData.params || {},
+            query: {},
+            navigate: () => { },
+            route: currentRouteData.route,
+        };
+        return createElement(RouterContext.Provider, { value: contextValue }, Fragment({ children }));
     }
-}
-/**
- * @param {{ timeRemaining: () => number, didTimeout?: boolean }} deadline
- */
-const workLoop = (deadline) => {
-    const state = getState();
-    let shouldYield = false;
-    while ((state.nextUnitOfWork || workQueue.length > 0) && !shouldYield) {
-        if (!state.nextUnitOfWork && workQueue.length > 0) {
-            const nextRoot = workQueue.shift();
-            state.wipRoot = nextRoot;
-            state.nextUnitOfWork = nextRoot;
-            state.deletions = [];
-            // Restore specific hydration state for this root
-            if (nextRoot.isHydrating !== undefined) {
-                state.isHydrating = nextRoot.isHydrating;
-                state.hydrateCursor = nextRoot.hydrateCursor;
-            }
+    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 navigate = (path) => {
+        if (typeof window !== 'undefined' && window.__RYUNIX_MPA__) {
+            window.location.assign(path);
+            return;
         }
-        if (state.nextUnitOfWork) {
-            state.nextUnitOfWork = performUnitOfWork(state.nextUnitOfWork);
+        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' });
         }
-        shouldYield = deadline.timeRemaining() < 1;
-    }
-    if (!state.nextUnitOfWork && state.wipRoot) {
-        commitRoot();
-        runHydrationRecovery();
-    }
-    if (state.nextUnitOfWork || workQueue.length > 0) {
-        rIC(workLoop);
-    }
-    else {
-        isWorkLoopScheduled = false;
-    }
+    }, [hash]);
+    return createElement(route.component, {
+        key: location,
+        params,
+        query,
+        hash,
+        location,
+    });
 };
-/**
- * @param {RyunixRootFiber} root
- * @param {number} [priority]
- */
-const scheduleWork = (root, priority = getCurrentPriority()) => {
-    const state = getState();
-    if (state.wipRoot) {
-        workQueue.push(root);
-    }
-    else {
-        state.nextUnitOfWork = root;
-        state.wipRoot = root;
-        state.deletions = [];
-        // Set immediate hydration state
-        if (root.isHydrating !== undefined) {
-            state.isHydrating = root.isHydrating;
-            state.hydrateCursor = root.hydrateCursor;
+const usePathname = () => {
+    const { location } = useRouter();
+    return location.split('?')[0].split('#')[0];
+};
+const useSearchParams = () => {
+    const { query } = useRouter();
+    return new URLSearchParams(query);
+};
+const Link = ({ to, prefetch = true, ...props }) => {
+    const { navigate } = useRouter();
+    const handleClick = (e) => {
+        if (e.button !== 0 || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {
+            return;
         }
-    }
-    state.hookIndex = 0;
-    state.effects = [];
-    if (!isWorkLoopScheduled) {
-        isWorkLoopScheduled = true;
-        if (priority <= Priority.USER_BLOCKING) {
-            // High priority: run as soon as possible in a micro-task
-            // We provide a synthetic deadline that allows some work before yielding
-            Promise.resolve().then(() => {
-                workLoop({ timeRemaining: () => 10, didTimeout: true });
+        e.preventDefault();
+        navigate(to);
+    };
+    const handleMouseEnter = () => {
+    };
+    const { className: _omitClassName, ...cleanedProps } = props;
+    return createElement('a', {
+        href: to,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        className: props.className || props['ryunix-class'],
+        ...cleanedProps,
+    }, props.children);
+};
+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) => {
+        if (e.button !== 0 || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {
+            return;
+        }
+        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);
+};
+const useStorePriority = (initialState) => {
+    const reducer = (state, action) => typeof action === 'function'
+        ? action.value(state)
+        : action.value;
+    const [state, baseDispatch] = useReducer(reducer, initialState, undefined);
+    const dispatch = (action, priority = Priority.NORMAL) => {
+        const wrappedAction = {
+            value: action,
+            priority,
+        };
+        scheduleUpdate(() => baseDispatch(wrappedAction, priority), priority);
+    };
+    return [state, dispatch];
+};
+const useTransition = () => {
+    const [isPending, setIsPending] = useStorePriority(false);
+    const startTransition = (callback) => {
+        setIsPending(true, Priority.IMMEDIATE);
+        setTimeout(() => {
+            runWithPriority(Priority.LOW, () => {
+                callback();
+                setIsPending(false, Priority.LOW);
             });
+        }, 0);
+    };
+    return [isPending, startTransition];
+};
+const useDeferredValue = (value) => {
+    const [deferredValue, setDeferredValue] = useStorePriority(value);
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setDeferredValue(value, Priority.LOW);
+        }, 100);
+        return () => clearTimeout(timeout);
+    }, [value]);
+    return deferredValue;
+};
+const usePersistentStore = (key, initialState = '') => {
+    const [state, dispatch] = useStore(() => {
+        try {
+            const item = window.localStorage.getItem(key);
+            return item ? JSON.parse(item) : initialState;
         }
-        else {
-            // Low priority: wait for browser idleness
-            rIC(workLoop);
+        catch (error) {
+            return initialState;
+        }
+    });
+    const setValue = (value) => {
+        try {
+            dispatch(value);
+            window.localStorage.setItem(key, JSON.stringify(value));
+        }
+        catch (error) {
+            console.error(error);
         }
-    }
-};
-setScheduleWork(scheduleWork);
-
-/**
- * @typedef {import('./createElement.js').RyunixNode} RyunixNode
- * @typedef {import('../types/internal.js').RyunixRootFiber} RyunixRootFiber
- * @typedef {import('../types/internal.js').RyunixComponent} RyunixComponent
- */
-/**
- * The `render` function in JavaScript updates the DOM with a new element and schedules work to be done
- * on the element.
- * @param {RyunixNode} element
- * @param {Element | DocumentFragment} container
- * @returns {RyunixRootFiber}
- */
-const render = (element, container) => {
-    const state = getState();
-    // Clear container before CSR render to avoid duplication
-    clearContainer(/** @type {HTMLElement} */ container);
-    /** @type {RyunixRootFiber} */
-    const root = {
-        dom: container,
-        props: {
-            children: [
-                /** @type {import('../types/internal.js').RyunixNode} */ element,
-            ],
-        },
-        alternate: state.currentRoot,
-        isHydrating: false,
-        hydrateCursor: /** @type {ChildNode | null} */ null,
     };
-    scheduleWork(root);
-    return root;
-};
-/**
- * @param {ChildNode | null} node
- * @returns {ChildNode | null}
- */
-const nextValidSibling = (node) => {
-    let next = node;
-    while (next &&
-        ((next.nodeType === 3 && !next.nodeValue.trim()) ||
-            next.nodeType === 8 ||
-            (next.nodeType === 1 &&
-                /** @type {Element} */ next.hasAttribute('data-ryunix-ssr')))) {
-        next = next.nextSibling;
-    }
-    return next;
+    return [state, setValue];
 };
-/**
- * The `hydrate` function attaches Ryunix to an existing server-rendered DOM tree.
- * Instead of clearing and re-rendering, it walks the existing DOM nodes and
- * attaches event listeners and reconciles state, preserving SSR HTML.
- * @param {RyunixNode} element
- * @param {Element | DocumentFragment} container
- * @returns {RyunixRootFiber}
- */
-const hydrate = (element, container) => {
-    const state = getState();
-    state.containerRoot = container;
-    /** @type {RyunixRootFiber} */
-    const root = {
-        dom: container,
-        props: {
-            children: [
-                /** @type {import('../types/internal.js').RyunixNode} */ element,
-            ],
-        },
-        alternate: state.currentRoot,
-        isHydrating: true,
-        hydrateCursor: nextValidSibling(container.firstChild),
+const useSwitch = (initialState = false) => {
+    const [state, dispatch] = useStore(initialState);
+    const toggle = () => {
+        dispatch((prev) => !prev);
     };
-    scheduleWork(root);
-    return root;
+    return [state, toggle];
 };
-/**
- * @param {RyunixNode} MainElement
- * @param {string} [root]
- * @param {Record<string, unknown>} [components]
- * @returns {RyunixRootFiber | undefined}
- */
-const init = (MainElement, root = '__ryunix', components = {}) => {
+const useLayoutEffect = (callback, deps) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
     const state = getState();
-    state.containerRoot = document.getElementById(root);
-    resetHydrationLogFlags();
-    state.hydrationPolicy = getHydrationPolicy();
-    state.scopedRecoveryQueue = [];
-    state.hydrationRecover = false;
-    // Reset any stale hydration flags
-    state.isHydrating = false;
-    state.hydrationFailed = false;
-    // Auto-detect SSR based on child nodes - no need to manually set process.env.RYUNIX_SSR
-    const hasChildNodes = state.containerRoot && state.containerRoot.hasChildNodes();
-    if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
-        console.log(`[Ryunix Debug] init: hasChildNodes=${hasChildNodes}, has SSR content detected.`);
+    if (state.isServerRendering) {
+        return;
     }
-    // Auto-detect: if there's existing content, try to hydrate (SSR)
-    // If explicitly disabled via RYUNIX_SSR=false, skip hydration
-    const ssrEnabled = process.env.RYUNIX_SSR !== 'false';
-    if (hasChildNodes && ssrEnabled) {
-        if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
-            console.log(`[Ryunix Debug] init: SSR content detected. Starting hydration on #${root}`);
-        }
-        const res = hydrate(MainElement, state.containerRoot);
-        return res;
+    validateHookContext();
+    if (!is.function(callback)) {
+        throw new Error('useLayoutEffect callback must be a function');
     }
-    if (process.env.NODE_ENV !== 'production' && process.env.RYUNIX_DEBUG) {
-        console.log(`[Ryunix Debug] init: No SSR content or SSR disabled. Starting normal render on #${root}`);
+    if (deps !== undefined && !Array.isArray(deps)) {
+        throw new Error('useLayoutEffect dependencies must be an array or undefined');
     }
-    const res = render(MainElement, state.containerRoot);
-    return res;
+    const { hookIndex } = state;
+    const wipFiber = state.wipFiber;
+    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,
+        isLayout: true,
+    };
+    wipFiber.hooks[hookIndex] =
+        hook;
+    state.hookIndex++;
 };
-/**
- * @param {RyunixComponent} component
- * @param {Record<string, unknown>} props
- * @param {(error: unknown) => void} [onError]
- * @returns {RyunixNode}
- */
-const safeRender = (component, props, onError) => {
-    try {
-        return /** @type {RyunixNode} */ /** @type {(props: Record<string, unknown>) => RyunixNode} */ component(props);
+let idCounter = 0;
+const resetIdCounter = () => {
+    idCounter = 0;
+};
+const useId = () => {
+    const state = getState();
+    if (state.isServerRendering) {
+        return `:r${idCounter++}:`;
     }
-    catch (error) {
-        if (process.env.NODE_ENV !== 'production') {
-            console.error('Component error:', error);
+    validateHookContext();
+    const { hookIndex } = state;
+    const wipFiber = state.wipFiber;
+    const oldHook = wipFiber.alternate?.hooks?.[hookIndex];
+    const hook = {
+        hookID: hookIndex,
+        type: RYUNIX_TYPES.RYUNIX_REF,
+        value: oldHook
+            ? oldHook.value
+            : `:r${idCounter++}:`,
+    };
+    wipFiber.hooks[hookIndex] =
+        hook;
+    state.hookIndex++;
+    return hook.value;
+};
+const useDebounce = (value, delay = 300) => {
+    const [debouncedValue, setDebouncedValue] = useStore(value);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => clearTimeout(timer);
+    }, [value, delay]);
+    return debouncedValue;
+};
+const useThrottle = (value, interval = 300) => {
+    const [throttledValue, setThrottledValue] = useStore(value);
+    const lastUpdated = useRef(Date.now());
+    useEffect(() => {
+        const now = Date.now();
+        const elapsed = now - lastUpdated.current;
+        if (elapsed >= interval) {
+            lastUpdated.current = now;
+            setThrottledValue(value);
         }
-        if (onError)
-            onError(error);
-        return null;
-    }
+        else {
+            const timer = setTimeout(() => {
+                lastUpdated.current = Date.now();
+                setThrottledValue(value);
+            }, interval - elapsed);
+            return () => clearTimeout(timer);
+        }
+    }, [value, interval]);
+    return throttledValue;
 };
 
-/**
- * @typedef {import('./createElement.js').RyunixNode} RyunixNode
- * @typedef {import('./createElement.js').RyunixElement} RyunixElement
- * @typedef {import('../types/internal.js').RyunixRenderToStringOptions} RyunixRenderToStringOptions
- * @typedef {Promise<{ success: boolean, id: string, content: string, error?: unknown }>} RyunixSuspenseTask
- */
-/**
- * @param {unknown} unsafe
- * @returns {string}
- */
 const escapeHtml = (unsafe) => {
     if (typeof unsafe !== 'string')
         return String(unsafe);
@@ -2793,10 +2092,6 @@ const escapeHtml = (unsafe) => {
         .replace(/"/g, '&quot;')
         .replace(/'/g, '&#039;');
 };
-/**
- * @param {Record<string, unknown>} styleObj
- * @returns {string}
- */
 const renderStyle = (styleObj) => {
     if (!is.object(styleObj) || is.null(styleObj))
         return '';
@@ -2821,10 +2116,6 @@ const VOID_ELEMENTS = new Set([
     'track',
     'wbr',
 ]);
-/**
- * @param {RyunixNode | RyunixNode[]} element
- * @returns {string}
- */
 const renderToStringImpl = (element) => {
     if (element == null || typeof element === 'boolean') {
         return '';
@@ -2835,11 +2126,9 @@ const renderToStringImpl = (element) => {
     if (Array.isArray(element)) {
         return element.map((child) => renderToStringImpl(child)).join('');
     }
-    /** @type {RyunixElement} */
     const vnode = element;
     if (vnode.type === RYUNIX_TYPES.TEXT_ELEMENT) {
-        return escapeHtml(
-        /** @type {import('./createElement.js').RyunixTextElement} */ vnode.props
+        return escapeHtml(vnode.props
             .nodeValue);
     }
     if (vnode.type === RYUNIX_TYPES.RYUNIX_FRAGMENT) {
@@ -2847,11 +2136,9 @@ const renderToStringImpl = (element) => {
         return children.map((child) => renderToStringImpl(child)).join('');
     }
     if (vnode.type === RYUNIX_TYPES.RYUNIX_CONTEXT) {
-        // Context Providers just render their children transparently on the server
         const state = getState();
         state.ssrContexts = state.ssrContexts || {};
-        const ctxProps = 
-        /** @type {{ _contextId?: string, value?: unknown, children?: RyunixNode | RyunixNode[] }} */ vnode.props ||
+        const ctxProps = vnode.props ||
             {};
         const ctxId = ctxProps._contextId;
         const prevCtx = state.ssrContexts[ctxId];
@@ -2874,11 +2161,9 @@ const renderToStringImpl = (element) => {
     if (typeof vnode.type === 'function') {
         const type = vnode.type;
         const props = vnode.props || {};
-        const renderedElement = 
-        /** @type {(props: Record<string, unknown>) => RyunixNode} */ type(props);
+        const renderedElement = type(props);
         return renderToStringImpl(renderedElement);
     }
-    // It's a standard host element
     const type = String(vnode.type);
     const props = vnode.props || {};
     let attributes = '';
@@ -2890,7 +2175,7 @@ const renderToStringImpl = (element) => {
                 htmlChildren = value.map((child) => renderToStringImpl(child)).join('');
             }
             else {
-                htmlChildren = renderToStringImpl(/** @type {RyunixNode} */ value);
+                htmlChildren = renderToStringImpl(value);
             }
         }
         else if (key === 'dangerouslySetInnerHTML') {
@@ -2900,8 +2185,7 @@ const renderToStringImpl = (element) => {
             }
         }
         else if (key === STRINGS.STYLE || key === OLD_STRINGS.STYLE) {
-            const styleString = renderStyle(
-            /** @type {Record<string, unknown>} */ value);
+            const styleString = renderStyle(value);
             if (styleString) {
                 attributes += ` style="${escapeHtml(styleString)}"`;
             }
@@ -2912,6 +2196,8 @@ const renderToStringImpl = (element) => {
             }
         }
         else if (!key.startsWith('on') &&
+            key !== 'key' &&
+            key !== 'ref' &&
             key !== '__source' &&
             key !== '__self') {
             if (typeof value === 'boolean') {
@@ -2943,17 +2229,10 @@ function $RC(id, templateId) {
 `
     .replace(/\s+/g, ' ')
     .trim();
-/**
- * @param {RyunixNode | RyunixNode[]} element
- * @param {(chunk: string) => void} push
- * @param {RyunixSuspenseTask[]} [suspenseTasks]
- * @returns {Promise<void>}
- */
 const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
     if (element == null || typeof element === 'boolean') {
         return;
     }
-    // Await the element if it's a promise (e.g. from an async Server Component directly rendered)
     if (element instanceof Promise) {
         element = await element;
         if (element == null || typeof element === 'boolean')
@@ -2969,11 +2248,9 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
         }
         return;
     }
-    /** @type {RyunixElement} */
     const vnode = element;
     if (vnode.type === RYUNIX_TYPES.TEXT_ELEMENT) {
-        push(escapeHtml(
-        /** @type {import('./createElement.js').RyunixTextElement} */ vnode
+        push(escapeHtml(vnode
             .props.nodeValue));
         return;
     }
@@ -2987,8 +2264,7 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
     if (vnode.type === RYUNIX_TYPES.RYUNIX_CONTEXT) {
         const state = getState();
         state.ssrContexts = state.ssrContexts || {};
-        const ctxProps = 
-        /** @type {{ _contextId?: string, value?: unknown, children?: RyunixNode | RyunixNode[] }} */ vnode.props ||
+        const ctxProps = vnode.props ||
             {};
         const ctxId = ctxProps._contextId;
         const prevCtx = state.ssrContexts[ctxId];
@@ -3009,29 +2285,23 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
         }
         return;
     }
-    // Handle Suspense specifically
     const suspenseType = vnode.type;
     const isSuspenseBoundary = vnode.type === RYUNIX_TYPES.RYUNIX_SUSPENSE ||
         (typeof suspenseType === 'object' &&
             suspenseType != null &&
-            /** @type {{ type?: symbol }} */ suspenseType.type ===
+            suspenseType.type ===
                 RYUNIX_TYPES.RYUNIX_SUSPENSE);
     if (isSuspenseBoundary) {
-        const suspenseProps = 
-        /** @type {{ fallback?: RyunixNode, children?: RyunixNode | RyunixNode[] }} */ vnode.props ||
+        const suspenseProps = vnode.props ||
             {};
         const { fallback, children } = suspenseProps;
         const id = `s-${Math.random().toString(36).slice(2, 9)}`;
-        // In universal mode, Suspense renders children if ready, or fallback if pending.
-        // BUT we want to force a background task for the REAL children if we hit a lazy component.
         push(`<!--$?--><template id="B:${id}"></template><div id="S:${id}">`);
-        // 1. Start rendering the actual content in the background
         const task = (async () => {
             const state = getState();
             const wasBackground = state.isSuspenseBackground;
             state.isSuspenseBackground = true;
             let content = '';
-            /** @param {string} chunk */
             const subPush = (chunk) => {
                 content += chunk;
             };
@@ -3047,7 +2317,6 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
             }
         })();
         suspenseTasks.push(task);
-        // 2. Render fallback immediately for the main stream
         await renderToStreamImpl(fallback, push, suspenseTasks);
         push(`</div><!--$/-->`);
         return;
@@ -3058,11 +2327,10 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
         if (process.env.RYUNIX_DEBUG) {
             console.log('[SSR Debug] Rendering function:', type.name || 'anonymous');
         }
-        const renderedElement = await /** @type {(props: Record<string, unknown>) => RyunixNode | Promise<RyunixNode>} */ type(props);
+        const renderedElement = await type(props);
         await renderToStreamImpl(renderedElement, push, suspenseTasks);
         return;
     }
-    // It's a standard host element
     const hostTag = String(type);
     let attributes = '';
     let innerHTML = null;
@@ -3076,8 +2344,7 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
             }
         }
         else if (key === STRINGS.STYLE || key === OLD_STRINGS.STYLE) {
-            const styleString = renderStyle(
-            /** @type {Record<string, unknown>} */ value);
+            const styleString = renderStyle(value);
             if (styleString) {
                 attributes += ` style="${escapeHtml(styleString)}"`;
             }
@@ -3088,6 +2355,8 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
             }
         }
         else if (!key.startsWith('on') &&
+            key !== 'key' &&
+            key !== 'ref' &&
             key !== '__source' &&
             key !== '__self') {
             if (typeof value === 'boolean') {
@@ -3119,34 +2388,21 @@ const renderToStreamImpl = async (element, push, suspenseTasks = []) => {
         push(`</${hostTag}>`);
     }
 };
-/**
- * @param {RyunixNode} element
- * @param {RyunixRenderToStringOptions} [options]
- * @returns {ReadableStream<Uint8Array>}
- */
 const renderToReadableStream = (element, options = {}) => {
     const state = getState();
     const encoder = new TextEncoder();
-    // Reset idCounter for deterministic useId values
     resetIdCounter();
     return new ReadableStream({
         async start(controller) {
             const wasServerRendering = state.isServerRendering;
             state.isServerRendering = true;
             state.ssrMetadata = {};
-            /** @param {string} text */
             const push = (text) => controller.enqueue(encoder.encode(text));
-            /** @type {RyunixSuspenseTask[]} */
             const suspenseTasks = [];
             try {
-                // 0. Inject RC helper script first
                 const nonceAttr = options.nonce ? ` nonce="${options.nonce}"` : '';
                 push(`<script${nonceAttr} data-ryunix-ssr>${RC_SCRIPT}</script>`);
-                // 1. Render initial tree (with fallbacks)
                 await renderToStreamImpl(element, push, suspenseTasks);
-                // 2. Process suspense tasks as they complete
-                // For now, we wait for all, but in a real streaming scenario,
-                // we could push them as they resolve.
                 while (suspenseTasks.length > 0) {
                     const task = suspenseTasks.shift();
                     const res = await task;
@@ -3166,17 +2422,11 @@ const renderToReadableStream = (element, options = {}) => {
         },
     });
 };
-/**
- * @param {RyunixNode} element
- * @param {RyunixRenderToStringOptions} [options]
- * @returns {string}
- */
 const renderToString = (element, options = {}) => {
     const state = getState();
     const wasServerRendering = state.isServerRendering;
     state.isServerRendering = true;
     state.ssrMetadata = {};
-    // Reset idCounter for deterministic useId values
     resetIdCounter();
     try {
         return renderToStringImpl(element);
@@ -3185,11 +2435,6 @@ const renderToString = (element, options = {}) => {
         state.isServerRendering = wasServerRendering;
     }
 };
-/**
- * @param {RyunixNode} element
- * @param {RyunixRenderToStringOptions} [options]
- * @returns {Promise<string>}
- */
 const renderToStringAsync = async (element, options = {}) => {
     const stream = renderToReadableStream(element, options);
     const reader = stream.getReader();
@@ -3236,6 +2481,21 @@ function deepEqual(a, b) {
     return keysA.every((key) => deepEqual(a[key], b[key]));
 }
 
+function forwardRef(render) {
+    if (typeof render !== 'function') {
+        throw new Error('forwardRef requires a render function');
+    }
+    const ForwardRefComponent = ((props) => {
+        const { ref, ...restProps } = props || {};
+        return render(restProps, ref ?? null);
+    });
+    const named = render;
+    ForwardRefComponent.displayName = `ForwardRef(${named.displayName || named.name || 'Component'})`;
+    ForwardRefComponent._isForwardRef = true;
+    ForwardRefComponent._render = render;
+    return ForwardRefComponent;
+}
+
 const SUSPENSE_STATUS = {
     PENDING: 'pending',
     RESOLVED: 'resolved',
@@ -3328,6 +2588,45 @@ function preload(importFn) {
     return importFn();
 }
 
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Children: Children,
+    Link: Link,
+    NavLink: NavLink,
+    RouterProvider: RouterProvider,
+    Suspense: Suspense,
+    createContext: createContext,
+    deepEqual: deepEqual,
+    forwardRef: forwardRef,
+    lazy: lazy,
+    memo: memo,
+    preload: preload,
+    resetIdCounter: resetIdCounter,
+    shallowEqual: shallowEqual,
+    useCallback: useCallback,
+    useDebounce: useDebounce,
+    useDeferredValue: useDeferredValue,
+    useEffect: useEffect,
+    useHash: useHash,
+    useId: useId,
+    useLayoutEffect: useLayoutEffect,
+    useMemo: useMemo,
+    useMetadata: useMetadata,
+    usePathname: usePathname,
+    usePersistentStore: usePersistentStore,
+    usePersitentStore: usePersistentStore,
+    useQuery: useQuery,
+    useReducer: useReducer,
+    useRef: useRef,
+    useRouter: useRouter,
+    useSearchParams: useSearchParams,
+    useStore: useStore,
+    useStorePriority: useStorePriority,
+    useSwitch: useSwitch,
+    useThrottle: useThrottle,
+    useTransition: useTransition
+});
+
 const perfNow = () => typeof performance !== 'undefined' ? performance.now() : Date.now();
 class Profiler {
     enabled;
@@ -3449,43 +2748,10 @@ function withProfiler(Component, name) {
     return Profiled;
 }
 
-function forwardRef(render) {
-    if (typeof render !== 'function') {
-        throw new Error('forwardRef requires a render function');
-    }
-    const ForwardRefComponent = ((props) => {
-        const { ref, ...restProps } = props || {};
-        return render(restProps, ref ?? null);
-    });
-    const named = render;
-    ForwardRefComponent.displayName = `ForwardRef(${named.displayName || named.name || 'Component'})`;
-    ForwardRefComponent._isForwardRef = true;
-    ForwardRefComponent._render = render;
-    return ForwardRefComponent;
-}
-
-/**
- * Wraps content rendered exclusively on the server. During hydration Ryunix
- * preserves the server HTML inside this boundary.
- *
- * @param {object} props
- * @param {import('./createElement.js').RyunixNode} [props.children]
- * @param {string} [props.id]
- * @returns {import('./createElement.js').RyunixElement}
- */
 function ServerBoundary({ children, id }) {
     return createElement('div', { 'data-ryunix-server': id, style: { display: 'contents' } }, children);
 }
 ServerBoundary.ryunix_type = 'RYUNIX_SERVER_BOUNDARY';
-/**
- * Marks a DOM subtree for scoped hydration recovery. Mismatches inside this
- * boundary can be recovered locally without remounting the full app root.
- *
- * @param {object} props
- * @param {import('./createElement.js').RyunixNode} [props.children]
- * @param {string} [props.id]
- * @returns {import('./createElement.js').RyunixElement}
- */
 function HydrationBoundary({ children, id }) {
     return createElement('div', {
         'data-ryunix-hydrate-boundary': id ?? '',
@@ -3510,11 +2776,6 @@ function ErrorBoundary({ children, fallback, }) {
 ErrorBoundary.ryunix_type =
     'RYUNIX_ERROR_BOUNDARY';
 
-/**
- * Client proxy for a compiled server action.
- * @param {string} actionId - Build-time action identifier
- * @returns {(...args: unknown[]) => Promise<unknown>}
- */
 function createActionProxy(actionId) {
     return async function (...args) {
         const response = await fetch('/_ryunix/action', {
@@ -3533,80 +2794,66 @@ function createActionProxy(actionId) {
     };
 }
 
-/**
- * @typedef {object} OverlayError
- * @property {string} [name]
- * @property {string} [message]
- * @property {string | string[]} [stack]
- * @property {{ fileName?: string, lineNumber?: number }} [__ryunix_source]
- */
-/**
- * @param {unknown} propsOrError
- */
 function RyunixDevOverlay(propsOrError) {
-    /** @type {Record<string, unknown> | Error | null | undefined} */
-    const propsInput = 
-    /** @type {Record<string, unknown> | Error | null | undefined} */ propsOrError;
-    // If propsOrError is an event or wrapped object, try to extract error
+    const propsInput = propsOrError;
     const rawError = propsInput &&
         typeof propsInput === 'object' &&
         !(propsInput instanceof Error) &&
         propsInput.nativeEvent
         ? propsInput.error
         : propsInput;
-    /** @type {OverlayError | null} */
     let error = null;
     if (rawError instanceof Error) {
         error = rawError;
     }
     else if (rawError && typeof rawError === 'object') {
         if ('message' in rawError) {
-            error = /** @type {OverlayError} */ rawError;
+            error = rawError;
         }
         else if ('error' in rawError) {
-            const nested = /** @type {Record<string, unknown>} */ rawError.error;
+            const nested = rawError.error;
             error =
                 nested && typeof nested === 'object'
-                    ? /** @type {OverlayError} */ nested
+                    ? nested
                     : null;
         }
         else {
-            error = /** @type {OverlayError} */ rawError;
+            error = rawError;
         }
     }
-    // Debug string if error is broken
     const debugObjectStr = JSON.stringify(propsInput, Object.getOwnPropertyNames(propsInput || {}));
     const [snippetState, setSnippet] = useStore(null);
     const [startLineState, setStartLine] = useStore(1);
     const [errorFileState, setErrorFile] = useStore('');
     const [errorLineState, setErrorLine] = useStore(0);
-    const snippet = /** @type {string | null} */ snippetState;
-    const startLine = /** @type {number} */ startLineState;
-    const errorFile = /** @type {string} */ errorFileState;
-    const errorLine = /** @type {number} */ errorLineState;
-    // Normalize stack ensuring we have lines
-    /** @type {string[]} */
+    const snippet = snippetState;
+    const startLine = startLineState;
+    const errorFile = errorFileState;
+    const errorLine = errorLineState;
     let stackLines = [];
     if (error && error.stack) {
         stackLines =
             typeof error.stack === 'string'
-                ? error.stack.split('\n').filter((/** @type {string} */ line) => {
+                ? error.stack.split('\n').filter((line) => {
                     const trimmed = line.trim();
                     if (!trimmed)
                         return false;
                     if (trimmed.includes('node_modules'))
                         return false;
-                    // Filter out internal Ryunix core framework files to isolate user code
                     const isInternal = [
-                        'components.js',
+                        'fiber-update.js',
                         'workers.js',
                         'reconciler.js',
                         'commits.js',
+                        'hooks/hooks.js',
                         'hooks.js',
+                        'error-boundary.js',
                         'errorBoundary.js',
+                        'boundaries.js',
                         'serverBoundary.js',
                         'app-router.js',
                         'app-router-server.js',
+                        'render/render.js',
                         'render.js',
                         'createElement.js',
                         'index.js',
@@ -3614,7 +2861,7 @@ function RyunixDevOverlay(propsOrError) {
                     return !isInternal;
                 })
                 : Array.isArray(error.stack)
-                    ? /** @type {string[]} */ error.stack
+                    ? error.stack
                     : [];
     }
     const errorName = error && typeof error.name === 'string' ? error.name : 'Unknown Error Type';
@@ -3624,22 +2871,18 @@ function RyunixDevOverlay(propsOrError) {
     useEffect(() => {
         let targetPath = null;
         let targetLine = null;
-        // 1. Direct JSX __source mapping (injected by Webpack/SWC)
         const ryunixSource = error?.__ryunix_source;
         if (ryunixSource?.fileName) {
             targetPath = ryunixSource.fileName;
             targetLine = ryunixSource.lineNumber ?? null;
         }
-        // 2. Fallback to Regex Stack Parsing
         if (!targetPath || !targetLine) {
             for (let i = 0; i < stackLines.length; i++) {
                 const line = stackLines[i];
                 if (!line.includes(':'))
                     continue;
-                // Deterministic string-based parsing (no regex on uncontrolled data)
                 let matchedPath = null;
                 let matchedLine = null;
-                // V8 format: "at fn (file:line:col)" — extract content between parens
                 const parenOpen = line.indexOf('(');
                 const parenClose = line.lastIndexOf(')');
                 if (parenOpen !== -1 && parenClose > parenOpen) {
@@ -3655,7 +2898,6 @@ function RyunixDevOverlay(propsOrError) {
                         }
                     }
                 }
-                // V8 format without parens: "at file:line:col"
                 if (!matchedPath) {
                     const trimmed = line.trim();
                     if (trimmed.startsWith('at ')) {
@@ -3672,7 +2914,6 @@ function RyunixDevOverlay(propsOrError) {
                         }
                     }
                 }
-                // Ryunix format: "file.ryx:line" or "file.jsx:line"
                 if (!matchedPath) {
                     const exts = ['.ryx', '.jsx', '.js', '.ts', '.tsx'];
                     const c1 = line.lastIndexOf(':');
@@ -3780,7 +3021,6 @@ function RyunixDevOverlay(propsOrError) {
         maxHeight: '150px',
         height: 'auto',
     };
-    /** @param {boolean} isErrorLine */
     const lineStyle = (isErrorLine) => ({
         display: 'flex',
         backgroundColor: isErrorLine ? 'rgba(239, 68, 68, 0.15)' : 'transparent',
@@ -3838,9 +3078,7 @@ function RyunixDevOverlay(propsOrError) {
         }, createElement('path', {
             d: 'M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z',
         }), createElement('polyline', { points: '13 2 13 9 20 9' })), errorFile, ':', errorLine), snippet &&
-        createElement('div', { style: snippetContainerStyle }, createElement('div', { style: { display: 'flex', flexDirection: 'column' } }, ...snippetLines.map((
-        /** @type {string} */ lineText, 
-        /** @type {number} */ index) => {
+        createElement('div', { style: snippetContainerStyle }, createElement('div', { style: { display: 'flex', flexDirection: 'column' } }, ...snippetLines.map((lineText, index) => {
             const currentLineNumber = startLine + index;
             const isErrorLine = currentLineNumber === errorLine;
             return createElement('div', { key: index, style: lineStyle(isErrorLine) }, createElement('span', {
@@ -3877,16 +3115,14 @@ function RyunixDevOverlay(propsOrError) {
                 flexDirection: 'column',
                 gap: '12px',
             },
-        }, ...stackLines.map((/** @type {string} */ line, /** @type {number} */ i) => {
+        }, ...stackLines.map((line, i) => {
             if (i === 0 &&
                 (line.startsWith('Error:') ||
                     line.startsWith('TypeError:')))
                 return null;
-            // Deterministic string-based stack frame parsing (no polynomial regex)
             const trimmed = line.trim();
             let fnName = '<anonymous>';
             let filePath = line;
-            // V8 format: "at fnName (file:line:col)" or "at file:line:col"
             if (trimmed.startsWith('at ')) {
                 const rest = trimmed.slice(3);
                 const parenOpen = rest.indexOf('(');
@@ -3897,7 +3133,6 @@ function RyunixDevOverlay(propsOrError) {
                     filePath = rest.slice(parenOpen + 1, parenClose);
                 }
                 else {
-                    // "at file:line:col" — no function name
                     if (rest.includes(':')) {
                         fnName = '<anonymous>';
                     }
@@ -3907,13 +3142,11 @@ function RyunixDevOverlay(propsOrError) {
                     filePath = rest;
                 }
             }
-            // Firefox format: "fnName@file:line:col"
             else if (trimmed.includes('@')) {
                 const atIdx = trimmed.indexOf('@');
                 fnName = trimmed.slice(0, atIdx) || '<anonymous>';
                 filePath = trimmed.slice(atIdx + 1);
             }
-            // Ryunix format: "fnName file.ext:line"
             else {
                 const exts = ['.ryx', '.jsx', '.js', '.ts', '.tsx'];
                 const parts = trimmed.split(/\s+/);
@@ -3960,37 +3193,290 @@ function RyunixDevOverlay(propsOrError) {
         : createElement('div', { style: { color: '#6b7280', fontStyle: 'italic' } }, 'No stack trace available.'))))));
 }
 
-/**
- * Public API surface of `@unsetsoft/ryunixjs`.
- * Re-exports createElement, hooks, render, SSR helpers, and related utilities.
- *
- * @module lib/index
- */
+const DEFAULT_THEME_COOKIE_NAME = 'ryunix_theme';
+const THEME_PREFERENCES = ['light', 'system', 'dark'];
+function createThemeController(options = {}) {
+    const cookieName = options.cookieName ?? DEFAULT_THEME_COOKIE_NAME;
+    const defaultTheme = options.defaultTheme ?? 'dark';
+    const darkClass = options.darkClass ?? 'dark';
+    const maxAgeSeconds = options.maxAgeSeconds ?? 365 * 24 * 60 * 60;
+    const isThemePreference = (theme) => THEME_PREFERENCES.includes(theme);
+    const getThemeCookie = () => {
+        if (typeof document === 'undefined')
+            return null;
+        const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${cookieName}=(light|system|dark)(?:;|$)`));
+        return match ? match[1] : null;
+    };
+    const setThemeCookie = (theme) => {
+        if (typeof document === 'undefined' || !isThemePreference(theme))
+            return;
+        document.cookie = `${cookieName}=${theme}; path=/; max-age=${maxAgeSeconds}; SameSite=Lax`;
+    };
+    const resolveThemeFromCookie = () => getThemeCookie() || defaultTheme;
+    const getSystemColorScheme = () => {
+        if (typeof window === 'undefined')
+            return 'dark';
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+    };
+    const resolveEffectiveTheme = (theme) => {
+        const choice = isThemePreference(theme) ? theme : defaultTheme;
+        if (choice === 'system')
+            return getSystemColorScheme();
+        return choice;
+    };
+    const applyTheme = (theme) => {
+        if (typeof document === 'undefined')
+            return;
+        const preference = isThemePreference(theme) ? theme : defaultTheme;
+        const effective = resolveEffectiveTheme(preference);
+        const root = document.documentElement;
+        root.classList.toggle(darkClass, effective === 'dark');
+        root.dataset.theme = preference;
+        root.dataset.themeEffective = effective;
+        root.style.colorScheme = effective === 'dark' ? 'dark' : 'light';
+    };
+    const getInitScript = () => `(function(){try{var m=document.cookie.match(/(?:^|;\\s*)${cookieName}=(light|system|dark)(?:;|$)/);var t=m?m[1]:'${defaultTheme}';var dark=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;r.classList.toggle('${darkClass}',dark);r.dataset.theme=t;r.dataset.themeEffective=dark?'dark':'light';r.style.colorScheme=dark?'dark':'light';}catch(e){document.documentElement.classList.add('${darkClass}');}})();`;
+    const watchSystemTheme = (onChange) => {
+        if (typeof window === 'undefined')
+            return () => { };
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        const handler = () => onChange(getSystemColorScheme());
+        media.addEventListener('change', handler);
+        return () => media.removeEventListener('change', handler);
+    };
+    return {
+        cookieName,
+        defaultTheme,
+        themes: THEME_PREFERENCES,
+        getThemeCookie,
+        setThemeCookie,
+        resolveThemeFromCookie,
+        getSystemColorScheme,
+        resolveEffectiveTheme,
+        applyTheme,
+        getInitScript,
+        watchSystemTheme,
+    };
+}
+const themeController = createThemeController();
+const { cookieName: THEME_COOKIE_NAME, defaultTheme, themes, getThemeCookie, setThemeCookie, resolveThemeFromCookie, getSystemColorScheme, resolveEffectiveTheme, applyTheme, watchSystemTheme, } = themeController;
+const themeInitScript = themeController.getInitScript();
+
+const SunIcon = ({ className = '' }) => createElement('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.75,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    className,
+    'aria-hidden': true,
+}, createElement('circle', { cx: 12, cy: 12, r: 4 }), createElement('path', {
+    d: 'M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41',
+}));
+const MonitorIcon = ({ className = '' }) => createElement('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.75,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    className,
+    'aria-hidden': true,
+}, createElement('rect', { x: 2, y: 3, width: 20, height: 14, rx: 2 }), createElement('path', { d: 'M8 21h8M12 17v4' }));
+const MoonIcon = ({ className = '' }) => createElement('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.75,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    className,
+    'aria-hidden': true,
+}, createElement('path', {
+    d: 'M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z',
+}));
+const ICONS = {
+    light: SunIcon,
+    system: MonitorIcon,
+    dark: MoonIcon,
+};
+function ThemeToggle({ labels, className = '', controller = themeController, }) {
+    const [theme, setTheme] = useStore(controller.defaultTheme);
+    useEffect(() => {
+        const saved = controller.resolveThemeFromCookie();
+        setTheme(saved);
+        controller.applyTheme(saved);
+    }, []);
+    useEffect(() => {
+        if (theme !== 'system')
+            return undefined;
+        return controller.watchSystemTheme(() => controller.applyTheme('system'));
+    }, [theme]);
+    const selectTheme = (next) => {
+        if (next === theme)
+            return;
+        setTheme(next);
+        controller.setThemeCookie(next);
+        controller.applyTheme(next);
+    };
+    return createElement('div', {
+        className: `ryx-theme-segment ${className}`.trim(),
+        role: 'radiogroup',
+        'aria-label': labels.title,
+    }, ...controller.themes.map((id) => {
+        const active = theme === id;
+        const Icon = ICONS[id];
+        return createElement('button', {
+            key: id,
+            type: 'button',
+            role: 'radio',
+            'aria-checked': active ? 'true' : 'false',
+            title: labels[id],
+            className: `ryx-theme-segment-btn${active ? ' ryx-theme-segment-btn--active' : ''}`,
+            onClick: () => selectTheme(id),
+        }, Icon({ className: 'ryx-theme-segment-icon' }), createElement('span', { className: 'ryx-theme-segment-sr-only' }, labels[id]));
+    }));
+}
+function ThemeInitScript({ controller = themeController, } = {}) {
+    return createElement('script', {
+        dangerouslySetInnerHTML: { __html: controller.getInitScript() },
+    });
+}
+
+const renderBrand = ({ image, title, href = '/', imageAlt, blockClass, linkClass, imageClass, titleClass, }) => {
+    if (!image && !title)
+        return null;
+    const content = [
+        image
+            ? createElement('img', {
+                src: image,
+                alt: imageAlt ?? title ?? '',
+                className: imageClass,
+            })
+            : null,
+        title ? createElement('span', { className: titleClass }, title) : null,
+    ].filter(Boolean);
+    return createElement('div', { className: blockClass }, createElement('a', { href, className: linkClass }, ...content));
+};
+const renderChildren = (children) => {
+    if (children == null || children === false)
+        return [];
+    return flattenArray(Array.isArray(children) ? children : [children]).filter((child) => child != null && child !== false);
+};
+const renderSlot = (className, children) => {
+    const items = renderChildren(children);
+    if (items.length === 0)
+        return null;
+    return createElement('div', { className }, ...items);
+};
+function Main({ maxWidth, className = '', innerClassName = '', children, }) {
+    const innerStyle = maxWidth != null && maxWidth !== ''
+        ? { maxWidth, marginInline: 'auto', width: '100%' }
+        : undefined;
+    return createElement('main', {
+        className: `ryx-main ${className}`.trim(),
+    }, createElement('div', {
+        className: `ryx-main-inner ${innerClassName}`.trim(),
+        style: innerStyle,
+    }, ...renderChildren(children)));
+}
+function Header({ image, title, href = '/', imageAlt, sticky = true, className = '', children, }) {
+    const headerClass = [
+        'ryx-header',
+        sticky !== false ? 'ryx-header--sticky' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return createElement('header', {
+        className: headerClass,
+    }, createElement('div', { className: 'ryx-header-inner' }, createElement('div', { className: 'ryx-header-start' }, renderBrand({
+        image,
+        title,
+        href,
+        imageAlt,
+        blockClass: 'ryx-header-brand',
+        linkClass: 'ryx-header-brand-link',
+        imageClass: 'ryx-header-brand-image',
+        titleClass: 'ryx-header-brand-title',
+    })), renderSlot('ryx-header-end', children)));
+}
+function Footer({ image, title, description, href = '/', imageAlt, className = '', children, bottomStart, bottomEnd, }) {
+    const brand = renderBrand({
+        image,
+        title,
+        href,
+        imageAlt,
+        blockClass: 'ryx-footer-brand',
+        linkClass: 'ryx-footer-brand-link',
+        imageClass: 'ryx-footer-brand-image',
+        titleClass: 'ryx-footer-brand-title',
+    });
+    const brandColumn = brand || description
+        ? createElement('div', { className: 'ryx-footer-brand-column' }, brand, description
+            ? createElement('p', { className: 'ryx-footer-description' }, description)
+            : null)
+        : null;
+    const columns = renderChildren(children).map((child, index) => createElement('div', { key: index, className: 'ryx-footer-column' }, child));
+    const bottomStartSlot = renderSlot('ryx-footer-bottom-start', bottomStart);
+    const bottomEndSlot = renderSlot('ryx-footer-bottom-end', bottomEnd);
+    const bottomBar = bottomStartSlot || bottomEndSlot
+        ? createElement('div', { className: 'ryx-footer-bottom' }, bottomStartSlot, bottomEndSlot)
+        : null;
+    return createElement('footer', {
+        className: `ryx-footer ${className}`.trim(),
+    }, createElement('div', {
+        className: 'ryx-footer-accent',
+        'aria-hidden': 'true',
+    }), createElement('div', {
+        className: 'ryx-footer-glow',
+        'aria-hidden': 'true',
+    }), createElement('div', { className: 'ryx-footer-inner' }, brandColumn || columns.length > 0
+        ? createElement('div', { className: 'ryx-footer-grid' }, brandColumn, ...columns)
+        : null, bottomBar));
+}
 
 var Ryunix = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Children: Children,
+    DEFAULT_THEME_COOKIE_NAME: DEFAULT_THEME_COOKIE_NAME,
     ErrorBoundary: ErrorBoundary,
+    Footer: Footer,
     Fragment: Fragment,
-    Hooks: hooks,
+    Header: Header,
+    Hooks: index,
     HydrationBoundary: HydrationBoundary,
     Link: Link,
+    Main: Main,
     NavLink: NavLink,
     Priority: Priority,
     RouterProvider: RouterProvider,
     RyunixDevOverlay: RyunixDevOverlay,
     ServerBoundary: ServerBoundary,
     Suspense: Suspense,
+    THEME_PREFERENCES: THEME_PREFERENCES,
+    ThemeInitScript: ThemeInitScript,
+    ThemeToggle: ThemeToggle,
+    applyTheme: applyTheme,
     batchUpdates: batchUpdates,
     cloneElement: cloneElement,
     createActionProxy: createActionProxy,
     createContext: createContext,
     createElement: createElement,
     createPortal: createPortal,
+    createThemeController: createThemeController,
     deepEqual: deepEqual,
     escapeHtml: escapeHtml,
     forwardRef: forwardRef,
     getState: getState,
+    getSystemColorScheme: getSystemColorScheme,
+    getThemeCookie: getThemeCookie,
     hydrate: hydrate,
     init: init,
     isValidElement: isValidElement,
@@ -4008,8 +3494,13 @@ var Ryunix = /*#__PURE__*/Object.freeze({
     renderToString: renderToString,
     renderToStringAsync: renderToStringAsync,
     resetIdCounter: resetIdCounter,
+    resolveEffectiveTheme: resolveEffectiveTheme,
+    resolveThemeFromCookie: resolveThemeFromCookie,
     safeRender: safeRender,
+    setThemeCookie: setThemeCookie,
     shallowEqual: shallowEqual,
+    themeController: themeController,
+    themeInitScript: themeInitScript,
     useCallback: useCallback,
     useDebounce: useDebounce,
     useDeferredValue: useDeferredValue,
@@ -4033,10 +3524,79 @@ var Ryunix = /*#__PURE__*/Object.freeze({
     useSwitch: useSwitch,
     useThrottle: useThrottle,
     useTransition: useTransition,
+    watchSystemTheme: watchSystemTheme,
     withProfiler: withProfiler
 });
 
-if (typeof window !== 'undefined') window.Ryunix = Ryunix;
+const { Provider: MDXProvider, useContext: useMDXComponents } = createContext('ryunix.mdx', {});
+const getMDXComponents = (components) => {
+    const contextComponents = useMDXComponents();
+    return {
+        ...contextComponents,
+        ...components,
+    };
+};
+const RYUNIX_STYLE_ENABLED = globalThis.process && String(globalThis.process.env?.RYUNIX_STYLE) === 'true';
+const ryxProps = (props) => {
+    const { unstyled, ...rest } = props;
+    if (unstyled || rest['data-ryx-unstyled']) {
+        return { ...rest, 'data-ryx-unstyled': true };
+    }
+    return rest;
+};
+const mergeClassName = (existing, base) => {
+    if (!existing)
+        return base;
+    if (Array.isArray(existing))
+        return [...existing, base].join(' ');
+    return `${existing} ${base}`;
+};
+const styledMdxHost = (tag, ryxClass, props) => {
+    const next = ryxProps(props);
+    if (!RYUNIX_STYLE_ENABLED || !ryxClass || next['data-ryx-unstyled']) {
+        return createElement(tag, next);
+    }
+    return createElement(tag, {
+        ...next,
+        className: mergeClassName(next.className, ryxClass),
+    });
+};
+const defaultComponents = {
+    h1: (props) => styledMdxHost('h1', 'ryx-h1', props),
+    h2: (props) => styledMdxHost('h2', 'ryx-h2', props),
+    h3: (props) => styledMdxHost('h3', 'ryx-h3', props),
+    h4: (props) => styledMdxHost('h4', 'ryx-h4', props),
+    h5: (props) => styledMdxHost('h5', 'ryx-h5', props),
+    h6: (props) => styledMdxHost('h6', 'ryx-h6', props),
+    p: (props) => styledMdxHost('p', 'ryx-p', props),
+    a: (props) => styledMdxHost('a', 'ryx-a', props),
+    strong: (props) => styledMdxHost('strong', 'ryx-strong', props),
+    em: (props) => styledMdxHost('em', 'ryx-em', props),
+    code: (props) => styledMdxHost('code', 'ryx-code', props),
+    ul: (props) => styledMdxHost('ul', 'ryx-ul', props),
+    ol: (props) => styledMdxHost('ol', 'ryx-ol', props),
+    li: (props) => styledMdxHost('li', 'ryx-li', props),
+    blockquote: (props) => styledMdxHost('blockquote', 'ryx-blockquote', props),
+    pre: (props) => styledMdxHost('pre', 'ryx-pre', props),
+    hr: (props) => styledMdxHost('hr', 'ryx-hr', props),
+    table: (props) => styledMdxHost('table', 'ryx-table', props),
+    thead: (props) => styledMdxHost('thead', 'ryx-thead', props),
+    tbody: (props) => styledMdxHost('tbody', 'ryx-tbody', props),
+    tr: (props) => styledMdxHost('tr', 'ryx-tr', props),
+    th: (props) => styledMdxHost('th', 'ryx-th', props),
+    td: (props) => styledMdxHost('td', 'ryx-td', props),
+    img: (props) => styledMdxHost('img', 'ryx-img', props),
+};
+const Image = ({ src, ...props }) => {
+    return createElement('img', { ...props, src });
+};
+const MDXContent = ({ children, components = {} }) => {
+    const mergedComponents = getMDXComponents(components);
+    return createElement(MDXProvider, { value: mergedComponents }, createElement('div', null, children));
+};
+
+if (typeof window !== 'undefined')
+    window.Ryunix = Ryunix;
 
-export { Children, ErrorBoundary, Fragment, hooks as Hooks, HydrationBoundary, Image, Link, MDXContent, MDXProvider, NavLink, Priority, RouterProvider, RyunixDevOverlay, ServerBoundary, Suspense, batchUpdates, cloneElement, createActionProxy, createContext, createElement, createPortal, deepEqual, Ryunix as default, defaultComponents, escapeHtml, forwardRef, getMDXComponents, getState, hydrate, init, isValidElement, lazy, logHydrationBoundaryMismatch, logHydrationBoundaryRecovery, logHydrationFatal, logHydrationInfo, logHydrationRecoverable, memo, preload, profiler, render, renderToReadableStream, renderToString, renderToStringAsync, resetIdCounter, safeRender, shallowEqual, useCallback, useDebounce, useDeferredValue, useEffect, useHash, useId, useLayoutEffect, useMDXComponents, useMemo, useMetadata, usePathname, usePersistentStore, usePersistentStore as usePersitentStore, useProfiler, useQuery, useReducer, useRef, useRouter, useSearchParams, useStore, useStorePriority, useSwitch, useThrottle, useTransition, withProfiler };
+export { Children, DEFAULT_THEME_COOKIE_NAME, ErrorBoundary, Footer, Fragment, Header, index as Hooks, HydrationBoundary, Image, Link, MDXContent, MDXProvider, Main, NavLink, Priority, RouterProvider, RyunixDevOverlay, ServerBoundary, Suspense, THEME_PREFERENCES, ThemeInitScript, ThemeToggle, applyTheme, batchUpdates, cloneElement, createActionProxy, createContext, createElement, createPortal, createThemeController, deepEqual, Ryunix as default, defaultComponents, escapeHtml, forwardRef, getMDXComponents, getState, getSystemColorScheme, getThemeCookie, hydrate, init, isValidElement, lazy, logHydrationBoundaryMismatch, logHydrationBoundaryRecovery, logHydrationFatal, logHydrationInfo, logHydrationRecoverable, memo, preload, profiler, render, renderToReadableStream, renderToString, renderToStringAsync, resetIdCounter, resolveEffectiveTheme, resolveThemeFromCookie, ryxProps, safeRender, setThemeCookie, shallowEqual, themeController, themeInitScript, useCallback, useDebounce, useDeferredValue, useEffect, useHash, useId, useLayoutEffect, useMDXComponents, useMemo, useMetadata, usePathname, usePersistentStore, usePersistentStore as usePersitentStore, useProfiler, useQuery, useReducer, useRef, useRouter, useSearchParams, useStore, useStorePriority, useSwitch, useThrottle, useTransition, watchSystemTheme, withProfiler };
 //# sourceMappingURL=Ryunix.esm.js.map