@webtypen/webframez-react 0.0.25 → 0.0.28

package/README.md

@@ -14,7 +14,7 @@ React Server Components (RSC) extension for `@webtypen/webframez-core`.
 
 - Node.js `>= 20`
 - `@webtypen/webframez-core`
-- React Experimental (matching the package peer dependencies)
+- React 19.x with matching `react-dom` and `react-server-dom-webpack`
 
 ## Installation
 
@@ -130,6 +130,25 @@ Route.renderReact("/app", {
 - Additional route options forwarded to `webframez-core`.
 - Typical use case: middleware.
 
+## `Head()` Assets
+
+Inside a page, layout, or error `Head()` method you can set `basename`.
+That basename is applied to `favicon` and `links[].href`, and also updates the
+router basename used by `Link`, `Redirect`, and client-side navigation.
+
+```ts
+export function Head() {
+  return {
+    title: "Dashboard",
+    basename: "/app",
+    favicon: "/favicon.ico",
+    links: [{ rel: "stylesheet", href: "/styles/dashboard.css" }],
+  };
+}
+```
+
+Absolute URLs like `https://...` or `//...` stay unchanged.
+
 ## Recommended Project Structure
 
 ```txt

package/dist/client.cjs

@@ -1 +1 @@
-var T=Object.create;var f=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var n in t)f(e,n,{get:t[n],enumerable:!0})},v=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of U(t))!M.call(e,i)&&i!==n&&f(e,i,{get:()=>t[i],enumerable:!(o=N(t,i))||o.enumerable});return e};var W=(e,t,n)=>(n=e!=null?T($(e)):{},v(t||!e||!e.__esModule?f(n,"default",{value:e,enumerable:!0}):n,e)),D=e=>v(f({},"__esModule",{value:!0}),e);var Q={};H(Q,{mountWebframezClient:()=>J,useCookie:()=>Y,useRouter:()=>q});module.exports=D(Q);var r=W(require("react"),1),S=require("react-dom/client"),u=require("react-server-dom-webpack/client"),s=require("react/jsx-runtime"),F={push:()=>{},replace:()=>{},refresh:()=>{}},p=typeof r.default.createContext=="function"?r.default.createContext(null):null,k="__WEBFRAMEZ_ROUTER__",B="[data-webframez-head='true']";function z(){return typeof window>"u"?null:window[k]??null}function G(e){typeof window>"u"||(window[k]=e)}function A(){let e={},t=typeof document>"u"?"":document.cookie;if(!t||t.trim()==="")return e;for(let n of t.split(";")){let o=n.trim();if(!o)continue;let i=o.indexOf("="),c=i>=0?o.slice(0,i).trim():o,d=i>=0?o.slice(i+1):"";c&&(e[c]=decodeURIComponent(d))}return e}function x(e,t,n={}){let o=[`${e}=${encodeURIComponent(t)}`];return n.path&&o.push(`Path=${n.path}`),n.domain&&o.push(`Domain=${n.domain}`),typeof n.maxAge=="number"&&o.push(`Max-Age=${Math.floor(n.maxAge)}`),n.expires&&o.push(`Expires=${n.expires.toUTCString()}`),n.sameSite&&o.push(`SameSite=${n.sameSite}`),n.secure&&o.push("Secure"),o.join("; ")}function Y(){return r.default.useMemo(()=>({all:()=>A(),get:e=>A()[e],set:(e,t,n)=>{typeof document>"u"||(document.cookie=x(e,t,n))},remove:(e,t)=>{typeof document>"u"||(document.cookie=x(e,"",{...t??{},maxAge:0}))}}),[])}function q(){let e=p?r.default.useContext(p):null;if(!e){let t=z();if(t)return t;if(typeof window>"u")return F;throw new Error("useRouter must be used inside mountWebframezClient()")}return e}function Z({active:e}){return(0,s.jsx)("div",{style:{position:"fixed",top:0,left:0,width:"100%",height:3,zIndex:9999,transformOrigin:"left",transform:e?"scaleX(1)":"scaleX(0)",transition:"transform 180ms ease",background:"linear-gradient(90deg, #0ea5e9, #22c55e)"}})}function E(e){let t=document.createElement("meta");t.setAttribute("data-webframez-head","true");let n=Object.entries(e).filter(([,o])=>!!o);for(let[o,i]of n)t.setAttribute(o,String(i));document.head.appendChild(t)}function I(e){let t=document.createElement("link");t.setAttribute("data-webframez-head","true");let n=Object.entries(e).filter(([,o])=>!!o);for(let[o,i]of n)t.setAttribute(o,String(i));document.head.appendChild(t)}function b(e){if(!(typeof document>"u")){document.title=e.title||"Webframez React";for(let t of document.head.querySelectorAll(B))t.remove();e.description&&E({name:"description",content:e.description}),e.favicon&&I({rel:"icon",href:e.favicon});for(let t of e.meta??[])E(t);for(let t of e.links??[])I(t)}}function j(e){let t=new TextEncoder;return new ReadableStream({start(n){n.enqueue(t.encode(e)),n.close()}})}function X(){if(typeof window>"u")return null;let e=window.__RSC_INITIAL_PAYLOAD;return typeof e!="string"||e===""?null:(delete window.__RSC_INITIAL_PAYLOAD,(0,u.createFromReadableStream)(j(e)))}function K(e){return X()??(0,u.createFromFetch)(fetch(`${e}?path=${encodeURIComponent(window.location.pathname)}&search=${encodeURIComponent(window.location.search)}`,{headers:{Accept:"text/x-component"}}))}function V(e,t){return function(){let o=r.default.use(e),[i,c]=(0,r.useState)(o.model),[d,g]=(0,r.useState)(o.head),[P,w]=(0,r.useState)(!1),[L,O]=(0,r.useState)(!1);async function l(a,C="push"){w(!0);try{let m=await(0,u.createFromFetch)(fetch(`${t}?path=${encodeURIComponent(a.pathname)}&search=${encodeURIComponent(a.search)}`,{headers:{Accept:"text/x-component"}}));b(m.head),g(m.head),c(m.model);let _=`${a.pathname}${a.search}`;C==="replace"?history.replaceState(null,"",_):C==="push"&&history.pushState(null,"",_)}catch(y){console.error("[webframez-react] Failed to render route",y),c((0,s.jsx)("p",{children:"Failed to load route."}))}finally{w(!1)}}(0,r.useEffect)(()=>{b(d)},[d]),(0,r.useEffect)(()=>{O(!0);let a=()=>{l(new URL(window.location.href),"none")};return window.addEventListener("popstate",a),()=>{window.removeEventListener("popstate",a)}},[]);let R=r.default.useMemo(()=>({push:a=>{l(new URL(a,window.location.origin),"push")},replace:a=>{l(new URL(a,window.location.origin),"replace")},refresh:()=>{l(new URL(window.location.href),"none")}}),[]);G(R);let h=(0,s.jsxs)(s.Fragment,{children:[L?(0,s.jsx)(Z,{active:P}):null,i??(0,s.jsx)("p",{style:{padding:24},children:"Loading..."})]});return p?(0,s.jsx)(p.Provider,{value:R,children:h}):h}}function J(e={}){let t=e.rootId??"root",n=document.getElementById(t);if(!n)throw new Error(`Missing #${t} element`);let o=typeof window<"u"&&window.__RSC_ENDPOINT,i=e.rscEndpoint??o??"/rsc",c=K(i),d=V(c,i);return(0,S.hydrateRoot)(n,(0,s.jsx)(d,{}))}
+var N=Object.create;var m=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var n in t)m(e,n,{get:t[n],enumerable:!0})},v=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of z(t))!M.call(e,r)&&r!==n&&m(e,r,{get:()=>t[r],enumerable:!(o=U(t,r))||o.enumerable});return e};var D=(e,t,n)=>(n=e!=null?N(B(e)):{},v(t||!e||!e.__esModule?m(n,"default",{value:e,enumerable:!0}):n,e)),F=e=>v(m({},"__esModule",{value:!0}),e);var oe={};W(oe,{mountWebframezClient:()=>ne,useCookie:()=>X,useRouter:()=>K});module.exports=F(oe);var i=D(require("react"),1),L=require("react-dom/client"),l=require("react-server-dom-webpack/client");var G=/^(?:[a-zA-Z][a-zA-Z\d+\-.]*:|\/\/|#)/;function u(e){let t=e?.trim();if(t)return t==="/"?"/":t.replace(/\/+$/,"")}function x(e,t){let n=e.trim(),o=u(t);return!n||!o||G.test(n)||o!=="/"&&(n===o||n.startsWith(`${o}/`))?n:o==="/"?n.startsWith("/")?n:`/${n}`:n.startsWith("/")?`${o}${n}`:`${o}/${n}`}function E(e,t){if(!e)return;let n=u(e.basename)??u(t),o={...e,...n?{basename:n}:{}};return o.favicon&&(o.favicon=x(o.favicon,n)),o.links&&(o.links=o.links.map(r=>({...r,href:x(r.href,n)}))),o}var s=require("react/jsx-runtime"),Y={push:()=>{},replace:()=>{},refresh:()=>{}},p=typeof i.default.createContext=="function"?i.default.createContext(null):null,O="__WEBFRAMEZ_ROUTER__",Z="[data-webframez-head='true']";function q(){return typeof window>"u"?null:window[O]??null}function j(e){typeof window>"u"||(window[O]=e)}function S(){let e={},t=typeof document>"u"?"":document.cookie;if(!t||t.trim()==="")return e;for(let n of t.split(";")){let o=n.trim();if(!o)continue;let r=o.indexOf("="),d=r>=0?o.slice(0,r).trim():o,c=r>=0?o.slice(r+1):"";d&&(e[d]=decodeURIComponent(c))}return e}function b(e,t,n={}){let o=[`${e}=${encodeURIComponent(t)}`];return n.path&&o.push(`Path=${n.path}`),n.domain&&o.push(`Domain=${n.domain}`),typeof n.maxAge=="number"&&o.push(`Max-Age=${Math.floor(n.maxAge)}`),n.expires&&o.push(`Expires=${n.expires.toUTCString()}`),n.sameSite&&o.push(`SameSite=${n.sameSite}`),n.secure&&o.push("Secure"),o.join("; ")}function X(){return i.default.useMemo(()=>({all:()=>S(),get:e=>S()[e],set:(e,t,n)=>{typeof document>"u"||(document.cookie=b(e,t,n))},remove:(e,t)=>{typeof document>"u"||(document.cookie=b(e,"",{...t??{},maxAge:0}))}}),[])}function K(){let e=p?i.default.useContext(p):null;if(!e){let t=q();if(t)return t;if(typeof window>"u")return Y;throw new Error("useRouter must be used inside mountWebframezClient()")}return e}function V({active:e}){return(0,s.jsx)("div",{style:{position:"fixed",top:0,left:0,width:"100%",height:3,zIndex:9999,transformOrigin:"left",transform:e?"scaleX(1)":"scaleX(0)",transition:"transform 180ms ease",background:"linear-gradient(90deg, #0ea5e9, #22c55e)"}})}function k(e){let t=document.createElement("meta");t.setAttribute("data-webframez-head","true");let n=Object.entries(e).filter(([,o])=>!!o);for(let[o,r]of n)t.setAttribute(o,String(r));document.head.appendChild(t)}function I(e){let t=document.createElement("link");t.setAttribute("data-webframez-head","true");let n=Object.entries(e).filter(([,o])=>!!o);for(let[o,r]of n)t.setAttribute(o,String(r));document.head.appendChild(t)}function P(e){if(typeof document>"u")return;let t=E(e)??e,n=u(t.basename);window.__RSC_BASENAME=n??"",document.title=t.title||"Webframez React";for(let o of document.head.querySelectorAll(Z))o.remove();t.description&&k({name:"description",content:t.description}),t.favicon&&I({rel:"icon",href:t.favicon});for(let o of t.meta??[])k(o);for(let o of t.links??[])I(o)}function J(e){let t=new TextEncoder;return new ReadableStream({start(n){n.enqueue(t.encode(e)),n.close()}})}function Q(){if(typeof window>"u")return null;let e=window.__RSC_INITIAL_PAYLOAD;return typeof e!="string"||e===""?null:(delete window.__RSC_INITIAL_PAYLOAD,(0,l.createFromReadableStream)(J(e)))}function ee(e){return Q()??(0,l.createFromFetch)(fetch(`${e}?path=${encodeURIComponent(window.location.pathname)}&search=${encodeURIComponent(window.location.search)}`,{headers:{Accept:"text/x-component"}}))}function te(e,t){return function(){let o=i.default.use(e),[r,d]=(0,i.useState)(o.model),[c,w]=(0,i.useState)(o.head),[T,h]=(0,i.useState)(!1),[$,H]=(0,i.useState)(!1);async function f(a,_="push"){h(!0);try{let g=await(0,l.createFromFetch)(fetch(`${t}?path=${encodeURIComponent(a.pathname)}&search=${encodeURIComponent(a.search)}`,{headers:{Accept:"text/x-component"}}));P(g.head),w(g.head),d(g.model);let y=`${a.pathname}${a.search}`;_==="replace"?history.replaceState(null,"",y):_==="push"&&history.pushState(null,"",y)}catch(A){console.error("[webframez-react] Failed to render route",A),d((0,s.jsx)("p",{children:"Failed to load route."}))}finally{h(!1)}}(0,i.useEffect)(()=>{P(c)},[c]),(0,i.useEffect)(()=>{H(!0);let a=()=>{f(new URL(window.location.href),"none")};return window.addEventListener("popstate",a),()=>{window.removeEventListener("popstate",a)}},[]);let R=i.default.useMemo(()=>({push:a=>{f(new URL(a,window.location.origin),"push")},replace:a=>{f(new URL(a,window.location.origin),"replace")},refresh:()=>{f(new URL(window.location.href),"none")}}),[]);j(R);let C=(0,s.jsxs)(s.Fragment,{children:[$?(0,s.jsx)(V,{active:T}):null,r??(0,s.jsx)("p",{style:{padding:24},children:"Loading..."})]});return p?(0,s.jsx)(p.Provider,{value:R,children:C}):C}}function ne(e={}){let t=e.rootId??"root",n=document.getElementById(t);if(!n)throw new Error(`Missing #${t} element`);let o=typeof window<"u"&&window.__RSC_ENDPOINT,r=e.rscEndpoint??o??"/rsc",d=ee(r),c=te(d,r);return(0,L.hydrateRoot)(n,(0,s.jsx)(c,{}))}

package/dist/client.js

@@ -1 +1 @@
-import d,{useEffect as _,useState as l}from"react";import{hydrateRoot as O}from"react-dom/client";import{createFromFetch as b,createFromReadableStream as T}from"react-server-dom-webpack/client";import{Fragment as z,jsx as c,jsxs as G}from"react/jsx-runtime";var N={push:()=>{},replace:()=>{},refresh:()=>{}},f=typeof d.createContext=="function"?d.createContext(null):null,S="__WEBFRAMEZ_ROUTER__",U="[data-webframez-head='true']";function $(){return typeof window>"u"?null:window[S]??null}function M(e){typeof window>"u"||(window[S]=e)}function v(){let e={},t=typeof document>"u"?"":document.cookie;if(!t||t.trim()==="")return e;for(let n of t.split(";")){let o=n.trim();if(!o)continue;let i=o.indexOf("="),a=i>=0?o.slice(0,i).trim():o,s=i>=0?o.slice(i+1):"";a&&(e[a]=decodeURIComponent(s))}return e}function A(e,t,n={}){let o=[`${e}=${encodeURIComponent(t)}`];return n.path&&o.push(`Path=${n.path}`),n.domain&&o.push(`Domain=${n.domain}`),typeof n.maxAge=="number"&&o.push(`Max-Age=${Math.floor(n.maxAge)}`),n.expires&&o.push(`Expires=${n.expires.toUTCString()}`),n.sameSite&&o.push(`SameSite=${n.sameSite}`),n.secure&&o.push("Secure"),o.join("; ")}function j(){return d.useMemo(()=>({all:()=>v(),get:e=>v()[e],set:(e,t,n)=>{typeof document>"u"||(document.cookie=A(e,t,n))},remove:(e,t)=>{typeof document>"u"||(document.cookie=A(e,"",{...t??{},maxAge:0}))}}),[])}function X(){let e=f?d.useContext(f):null;if(!e){let t=$();if(t)return t;if(typeof window>"u")return N;throw new Error("useRouter must be used inside mountWebframezClient()")}return e}function H({active:e}){return c("div",{style:{position:"fixed",top:0,left:0,width:"100%",height:3,zIndex:9999,transformOrigin:"left",transform:e?"scaleX(1)":"scaleX(0)",transition:"transform 180ms ease",background:"linear-gradient(90deg, #0ea5e9, #22c55e)"}})}function x(e){let t=document.createElement("meta");t.setAttribute("data-webframez-head","true");let n=Object.entries(e).filter(([,o])=>!!o);for(let[o,i]of n)t.setAttribute(o,String(i));document.head.appendChild(t)}function E(e){let t=document.createElement("link");t.setAttribute("data-webframez-head","true");let n=Object.entries(e).filter(([,o])=>!!o);for(let[o,i]of n)t.setAttribute(o,String(i));document.head.appendChild(t)}function I(e){if(!(typeof document>"u")){document.title=e.title||"Webframez React";for(let t of document.head.querySelectorAll(U))t.remove();e.description&&x({name:"description",content:e.description}),e.favicon&&E({rel:"icon",href:e.favicon});for(let t of e.meta??[])x(t);for(let t of e.links??[])E(t)}}function W(e){let t=new TextEncoder;return new ReadableStream({start(n){n.enqueue(t.encode(e)),n.close()}})}function D(){if(typeof window>"u")return null;let e=window.__RSC_INITIAL_PAYLOAD;return typeof e!="string"||e===""?null:(delete window.__RSC_INITIAL_PAYLOAD,T(W(e)))}function F(e){return D()??b(fetch(`${e}?path=${encodeURIComponent(window.location.pathname)}&search=${encodeURIComponent(window.location.search)}`,{headers:{Accept:"text/x-component"}}))}function B(e,t){return function(){let o=d.use(e),[i,a]=l(o.model),[s,m]=l(o.head),[k,g]=l(!1),[P,L]=l(!1);async function u(r,h="push"){g(!0);try{let p=await b(fetch(`${t}?path=${encodeURIComponent(r.pathname)}&search=${encodeURIComponent(r.search)}`,{headers:{Accept:"text/x-component"}}));I(p.head),m(p.head),a(p.model);let y=`${r.pathname}${r.search}`;h==="replace"?history.replaceState(null,"",y):h==="push"&&history.pushState(null,"",y)}catch(C){console.error("[webframez-react] Failed to render route",C),a(c("p",{children:"Failed to load route."}))}finally{g(!1)}}_(()=>{I(s)},[s]),_(()=>{L(!0);let r=()=>{u(new URL(window.location.href),"none")};return window.addEventListener("popstate",r),()=>{window.removeEventListener("popstate",r)}},[]);let w=d.useMemo(()=>({push:r=>{u(new URL(r,window.location.origin),"push")},replace:r=>{u(new URL(r,window.location.origin),"replace")},refresh:()=>{u(new URL(window.location.href),"none")}}),[]);M(w);let R=G(z,{children:[P?c(H,{active:k}):null,i??c("p",{style:{padding:24},children:"Loading..."})]});return f?c(f.Provider,{value:w,children:R}):R}}function K(e={}){let t=e.rootId??"root",n=document.getElementById(t);if(!n)throw new Error(`Missing #${t} element`);let o=typeof window<"u"&&window.__RSC_ENDPOINT,i=e.rscEndpoint??o??"/rsc",a=F(i),s=B(a,i);return O(n,c(s,{}))}export{K as mountWebframezClient,j as useCookie,X as useRouter};
+import c,{useEffect as x,useState as f}from"react";import{hydrateRoot as N}from"react-dom/client";import{createFromFetch as P,createFromReadableStream as U}from"react-server-dom-webpack/client";var H=/^(?:[a-zA-Z][a-zA-Z\d+\-.]*:|\/\/|#)/;function u(t){let o=t?.trim();if(o)return o==="/"?"/":o.replace(/\/+$/,"")}function y(t,o){let n=t.trim(),e=u(o);return!n||!e||H.test(n)||e!=="/"&&(n===e||n.startsWith(`${e}/`))?n:e==="/"?n.startsWith("/")?n:`/${n}`:n.startsWith("/")?`${e}${n}`:`${e}/${n}`}function v(t,o){if(!t)return;let n=u(t.basename)??u(o),e={...t,...n?{basename:n}:{}};return e.favicon&&(e.favicon=y(e.favicon,n)),e.links&&(e.links=e.links.map(r=>({...r,href:y(r.href,n)}))),e}import{Fragment as q,jsx as d,jsxs as j}from"react/jsx-runtime";var z={push:()=>{},replace:()=>{},refresh:()=>{}},m=typeof c.createContext=="function"?c.createContext(null):null,L="__WEBFRAMEZ_ROUTER__",B="[data-webframez-head='true']";function M(){return typeof window>"u"?null:window[L]??null}function W(t){typeof window>"u"||(window[L]=t)}function E(){let t={},o=typeof document>"u"?"":document.cookie;if(!o||o.trim()==="")return t;for(let n of o.split(";")){let e=n.trim();if(!e)continue;let r=e.indexOf("="),a=r>=0?e.slice(0,r).trim():e,s=r>=0?e.slice(r+1):"";a&&(t[a]=decodeURIComponent(s))}return t}function S(t,o,n={}){let e=[`${t}=${encodeURIComponent(o)}`];return n.path&&e.push(`Path=${n.path}`),n.domain&&e.push(`Domain=${n.domain}`),typeof n.maxAge=="number"&&e.push(`Max-Age=${Math.floor(n.maxAge)}`),n.expires&&e.push(`Expires=${n.expires.toUTCString()}`),n.sameSite&&e.push(`SameSite=${n.sameSite}`),n.secure&&e.push("Secure"),e.join("; ")}function ee(){return c.useMemo(()=>({all:()=>E(),get:t=>E()[t],set:(t,o,n)=>{typeof document>"u"||(document.cookie=S(t,o,n))},remove:(t,o)=>{typeof document>"u"||(document.cookie=S(t,"",{...o??{},maxAge:0}))}}),[])}function te(){let t=m?c.useContext(m):null;if(!t){let o=M();if(o)return o;if(typeof window>"u")return z;throw new Error("useRouter must be used inside mountWebframezClient()")}return t}function D({active:t}){return d("div",{style:{position:"fixed",top:0,left:0,width:"100%",height:3,zIndex:9999,transformOrigin:"left",transform:t?"scaleX(1)":"scaleX(0)",transition:"transform 180ms ease",background:"linear-gradient(90deg, #0ea5e9, #22c55e)"}})}function b(t){let o=document.createElement("meta");o.setAttribute("data-webframez-head","true");let n=Object.entries(t).filter(([,e])=>!!e);for(let[e,r]of n)o.setAttribute(e,String(r));document.head.appendChild(o)}function k(t){let o=document.createElement("link");o.setAttribute("data-webframez-head","true");let n=Object.entries(t).filter(([,e])=>!!e);for(let[e,r]of n)o.setAttribute(e,String(r));document.head.appendChild(o)}function I(t){if(typeof document>"u")return;let o=v(t)??t,n=u(o.basename);window.__RSC_BASENAME=n??"",document.title=o.title||"Webframez React";for(let e of document.head.querySelectorAll(B))e.remove();o.description&&b({name:"description",content:o.description}),o.favicon&&k({rel:"icon",href:o.favicon});for(let e of o.meta??[])b(e);for(let e of o.links??[])k(e)}function F(t){let o=new TextEncoder;return new ReadableStream({start(n){n.enqueue(o.encode(t)),n.close()}})}function G(){if(typeof window>"u")return null;let t=window.__RSC_INITIAL_PAYLOAD;return typeof t!="string"||t===""?null:(delete window.__RSC_INITIAL_PAYLOAD,U(F(t)))}function Y(t){return G()??P(fetch(`${t}?path=${encodeURIComponent(window.location.pathname)}&search=${encodeURIComponent(window.location.search)}`,{headers:{Accept:"text/x-component"}}))}function Z(t,o){return function(){let e=c.use(t),[r,a]=f(e.model),[s,g]=f(e.head),[O,w]=f(!1),[T,$]=f(!1);async function l(i,C="push"){w(!0);try{let p=await P(fetch(`${o}?path=${encodeURIComponent(i.pathname)}&search=${encodeURIComponent(i.search)}`,{headers:{Accept:"text/x-component"}}));I(p.head),g(p.head),a(p.model);let A=`${i.pathname}${i.search}`;C==="replace"?history.replaceState(null,"",A):C==="push"&&history.pushState(null,"",A)}catch(_){console.error("[webframez-react] Failed to render route",_),a(d("p",{children:"Failed to load route."}))}finally{w(!1)}}x(()=>{I(s)},[s]),x(()=>{$(!0);let i=()=>{l(new URL(window.location.href),"none")};return window.addEventListener("popstate",i),()=>{window.removeEventListener("popstate",i)}},[]);let h=c.useMemo(()=>({push:i=>{l(new URL(i,window.location.origin),"push")},replace:i=>{l(new URL(i,window.location.origin),"replace")},refresh:()=>{l(new URL(window.location.href),"none")}}),[]);W(h);let R=j(q,{children:[T?d(D,{active:O}):null,r??d("p",{style:{padding:24},children:"Loading..."})]});return m?d(m.Provider,{value:h,children:R}):R}}function ne(t={}){let o=t.rootId??"root",n=document.getElementById(o);if(!n)throw new Error(`Missing #${o} element`);let e=typeof window<"u"&&window.__RSC_ENDPOINT,r=t.rscEndpoint??e??"/rsc",a=Y(r),s=Z(a,r);return N(n,d(s,{}))}export{ne as mountWebframezClient,ee as useCookie,te as useRouter};

package/dist/http.cjs

@@ -150,6 +150,62 @@ var import_node_fs = __toESM(require("node:fs"), 1);
 var import_node_module2 = __toESM(require("node:module"), 1);
 var import_node_path2 = __toESM(require("node:path"), 1);
 
+// src/head.ts
+var ABSOLUTE_ASSET_URL_PATTERN = /^(?:[a-zA-Z][a-zA-Z\d+\-.]*:|\/\/|#)/;
+function normalizeHeadBasename(value) {
+  const trimmed = value?.trim();
+  if (!trimmed) {
+    return void 0;
+  }
+  if (trimmed === "/") {
+    return "/";
+  }
+  return trimmed.replace(/\/+$/, "");
+}
+function resolveHeadAssetUrl(assetUrl, basename) {
+  const normalizedAssetUrl = assetUrl.trim();
+  const normalizedBasename = normalizeHeadBasename(basename);
+  if (!normalizedAssetUrl || !normalizedBasename) {
+    return normalizedAssetUrl;
+  }
+  if (ABSOLUTE_ASSET_URL_PATTERN.test(normalizedAssetUrl)) {
+    return normalizedAssetUrl;
+  }
+  if (normalizedBasename !== "/" && (normalizedAssetUrl === normalizedBasename || normalizedAssetUrl.startsWith(`${normalizedBasename}/`))) {
+    return normalizedAssetUrl;
+  }
+  if (normalizedBasename === "/") {
+    return normalizedAssetUrl.startsWith("/") ? normalizedAssetUrl : `/${normalizedAssetUrl}`;
+  }
+  if (normalizedAssetUrl.startsWith("/")) {
+    return `${normalizedBasename}${normalizedAssetUrl}`;
+  }
+  return `${normalizedBasename}/${normalizedAssetUrl}`;
+}
+function normalizeHeadConfig(head, inheritedBasename) {
+  if (!head) {
+    return void 0;
+  }
+  const effectiveBasename = normalizeHeadBasename(head.basename) ?? normalizeHeadBasename(inheritedBasename);
+  const normalizedHead = {
+    ...head,
+    ...effectiveBasename ? { basename: effectiveBasename } : {}
+  };
+  if (normalizedHead.favicon) {
+    normalizedHead.favicon = resolveHeadAssetUrl(
+      normalizedHead.favicon,
+      effectiveBasename
+    );
+  }
+  if (normalizedHead.links) {
+    normalizedHead.links = normalizedHead.links.map((link) => ({
+      ...link,
+      href: resolveHeadAssetUrl(link.href, effectiveBasename)
+    }));
+  }
+  return normalizedHead;
+}
+
 // src/router-runtime.tsx
 var import_react = __toESM(require("react"), 1);
 var ROUTE_CHILDREN_TAG = "webframez-route-children";
@@ -365,7 +421,8 @@ function mergeHead(...configs) {
     meta: [],
     links: []
   };
-  for (const config of configs) {
+  for (const candidate of configs) {
+    const config = normalizeHeadConfig(candidate, merged.basename);
     if (!config) {
       continue;
     }
@@ -375,6 +432,9 @@ function mergeHead(...configs) {
     if (config.description) {
       merged.description = config.description;
     }
+    if (config.basename) {
+      merged.basename = config.basename;
+    }
     if (config.favicon) {
       merged.favicon = config.favicon;
     }
@@ -388,22 +448,23 @@ function mergeHead(...configs) {
   return merged;
 }
 function renderHeadToString(head) {
+  const normalizedHead = normalizeHeadConfig(head) ?? head;
   const tags = [];
-  if (head.description) {
+  if (normalizedHead.description) {
     tags.push(
-      `<meta ${createManagedAttributes()} name="description" content="${escapeHtml(head.description)}" />`
+      `<meta ${createManagedAttributes()} name="description" content="${escapeHtml(normalizedHead.description)}" />`
     );
   }
-  if (head.favicon) {
+  if (normalizedHead.favicon) {
     tags.push(
-      `<link ${createManagedAttributes()} rel="icon" href="${escapeHtml(head.favicon)}" />`
+      `<link ${createManagedAttributes()} rel="icon" href="${escapeHtml(normalizedHead.favicon)}" />`
     );
   }
-  for (const meta of head.meta ?? []) {
+  for (const meta of normalizedHead.meta ?? []) {
     const attrs = Object.entries(meta).filter(([, value]) => Boolean(value)).map(([key, value]) => `${key}="${escapeHtml(String(value))}"`).join(" ");
     tags.push(`<meta ${createManagedAttributes()} ${attrs} />`);
   }
-  for (const link of head.links ?? []) {
+  for (const link of normalizedHead.links ?? []) {
     const attrs = Object.entries(link).filter(([, value]) => Boolean(value)).map(([key, value]) => `${key}="${escapeHtml(String(value))}"`).join(" ");
     tags.push(`<link ${createManagedAttributes()} ${attrs} />`);
   }
@@ -619,6 +680,12 @@ function createFileRouter(options) {
       params: {},
       searchParams: input.searchParams,
       cookies: input.cookies ?? {},
+      request: input.request ?? {
+        host: null,
+        pathname,
+        originalPathname: pathname,
+        headers: {}
+      },
       abort: (options2) => {
         throw createAbort(options2);
       }
@@ -846,6 +913,60 @@ function normalizeBasePath(basePath) {
   const withLeadingSlash = basePath.startsWith("/") ? basePath : `/${basePath}`;
   return withLeadingSlash.endsWith("/") ? withLeadingSlash.slice(0, -1) : withLeadingSlash;
 }
+function normalizeRequestHostValue(value) {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const firstValue = trimmed.split(",")[0]?.trim() || "";
+  if (!firstValue) {
+    return null;
+  }
+  if (firstValue.startsWith("[")) {
+    const closingIndex = firstValue.indexOf("]");
+    if (closingIndex > 0) {
+      return firstValue.slice(1, closingIndex).toLowerCase();
+    }
+  }
+  return firstValue.replace(/:\d+$/, "").toLowerCase();
+}
+function getRequestHost(req) {
+  const candidates = [
+    req.headers["x-forwarded-host"],
+    req.headers["x-original-host"],
+    req.headers.host
+  ];
+  for (const candidate of candidates) {
+    if (Array.isArray(candidate)) {
+      for (const singleValue of candidate) {
+        if (typeof singleValue !== "string") {
+          continue;
+        }
+        const normalized2 = normalizeRequestHostValue(singleValue);
+        if (normalized2) {
+          return normalized2;
+        }
+      }
+      continue;
+    }
+    if (typeof candidate !== "string") {
+      continue;
+    }
+    const normalized = normalizeRequestHostValue(candidate);
+    if (normalized) {
+      return normalized;
+    }
+  }
+  return null;
+}
+function createRouteRequestContext(req, pathname, originalPathname) {
+  return {
+    host: getRequestHost(req),
+    pathname,
+    originalPathname,
+    headers: req.headers
+  };
+}
 function stripBasePath(pathname, basePath) {
   if (!basePath) {
     return pathname;
@@ -1191,13 +1312,19 @@ function createNodeRequestHandler(options) {
     }
     if (url.pathname === rscPath) {
       const pathname = stripBasePath(url.searchParams.get("path") || "/", basePath);
+      const requestContext = createRouteRequestContext(
+        req,
+        pathname,
+        url.searchParams.get("path") || "/"
+      );
       const search = new URLSearchParams(url.searchParams.get("search") || "");
       const resolved2 = await withRequestBasename(
         basePath,
         () => router.resolve({
           pathname,
           searchParams: parseSearchParams(search),
-          cookies: requestCookies
+          cookies: requestCookies,
+          request: requestContext
         })
       );
       const payload = {
@@ -1237,7 +1364,12 @@ function createNodeRequestHandler(options) {
       () => router.resolve({
         pathname: stripBasePath(url.pathname, basePath),
         searchParams: parseSearchParams(url.searchParams),
-        cookies: requestCookies
+        cookies: requestCookies,
+        request: createRouteRequestContext(
+          req,
+          stripBasePath(url.pathname, basePath),
+          url.pathname
+        )
       })
     );
     const initialPayload = {
@@ -1281,7 +1413,7 @@ function createNodeRequestHandler(options) {
               rscEndpoint: rscPath,
               rootHtml: createInitialHtmlErrorMarkup("Initial HTML render failed."),
               initialFlightData,
-              basename: basePath,
+              basename: resolved?.head?.basename ?? basePath,
               liveReloadPath: liveReloadPath || void 0,
               liveReloadServerId: liveReloadPath ? devServerId : void 0
             })
@@ -1300,7 +1432,7 @@ function createNodeRequestHandler(options) {
         rscEndpoint: rscPath,
         rootHtml,
         initialFlightData,
-        basename: basePath,
+        basename: resolved.head.basename ?? basePath,
         liveReloadPath: liveReloadPath || void 0,
         liveReloadServerId: liveReloadPath ? devServerId : void 0
       })

package/dist/http.js

@@ -125,6 +125,62 @@ import fs from "node:fs";
 import Module from "node:module";
 import path2 from "node:path";
 
+// src/head.ts
+var ABSOLUTE_ASSET_URL_PATTERN = /^(?:[a-zA-Z][a-zA-Z\d+\-.]*:|\/\/|#)/;
+function normalizeHeadBasename(value) {
+  const trimmed = value?.trim();
+  if (!trimmed) {
+    return void 0;
+  }
+  if (trimmed === "/") {
+    return "/";
+  }
+  return trimmed.replace(/\/+$/, "");
+}
+function resolveHeadAssetUrl(assetUrl, basename) {
+  const normalizedAssetUrl = assetUrl.trim();
+  const normalizedBasename = normalizeHeadBasename(basename);
+  if (!normalizedAssetUrl || !normalizedBasename) {
+    return normalizedAssetUrl;
+  }
+  if (ABSOLUTE_ASSET_URL_PATTERN.test(normalizedAssetUrl)) {
+    return normalizedAssetUrl;
+  }
+  if (normalizedBasename !== "/" && (normalizedAssetUrl === normalizedBasename || normalizedAssetUrl.startsWith(`${normalizedBasename}/`))) {
+    return normalizedAssetUrl;
+  }
+  if (normalizedBasename === "/") {
+    return normalizedAssetUrl.startsWith("/") ? normalizedAssetUrl : `/${normalizedAssetUrl}`;
+  }
+  if (normalizedAssetUrl.startsWith("/")) {
+    return `${normalizedBasename}${normalizedAssetUrl}`;
+  }
+  return `${normalizedBasename}/${normalizedAssetUrl}`;
+}
+function normalizeHeadConfig(head, inheritedBasename) {
+  if (!head) {
+    return void 0;
+  }
+  const effectiveBasename = normalizeHeadBasename(head.basename) ?? normalizeHeadBasename(inheritedBasename);
+  const normalizedHead = {
+    ...head,
+    ...effectiveBasename ? { basename: effectiveBasename } : {}
+  };
+  if (normalizedHead.favicon) {
+    normalizedHead.favicon = resolveHeadAssetUrl(
+      normalizedHead.favicon,
+      effectiveBasename
+    );
+  }
+  if (normalizedHead.links) {
+    normalizedHead.links = normalizedHead.links.map((link) => ({
+      ...link,
+      href: resolveHeadAssetUrl(link.href, effectiveBasename)
+    }));
+  }
+  return normalizedHead;
+}
+
 // src/router-runtime.tsx
 import React from "react";
 var ROUTE_CHILDREN_TAG = "webframez-route-children";
@@ -340,7 +396,8 @@ function mergeHead(...configs) {
     meta: [],
     links: []
   };
-  for (const config of configs) {
+  for (const candidate of configs) {
+    const config = normalizeHeadConfig(candidate, merged.basename);
     if (!config) {
       continue;
     }
@@ -350,6 +407,9 @@ function mergeHead(...configs) {
     if (config.description) {
       merged.description = config.description;
     }
+    if (config.basename) {
+      merged.basename = config.basename;
+    }
     if (config.favicon) {
       merged.favicon = config.favicon;
     }
@@ -363,22 +423,23 @@ function mergeHead(...configs) {
   return merged;
 }
 function renderHeadToString(head) {
+  const normalizedHead = normalizeHeadConfig(head) ?? head;
   const tags = [];
-  if (head.description) {
+  if (normalizedHead.description) {
     tags.push(
-      `<meta ${createManagedAttributes()} name="description" content="${escapeHtml(head.description)}" />`
+      `<meta ${createManagedAttributes()} name="description" content="${escapeHtml(normalizedHead.description)}" />`
     );
   }
-  if (head.favicon) {
+  if (normalizedHead.favicon) {
     tags.push(
-      `<link ${createManagedAttributes()} rel="icon" href="${escapeHtml(head.favicon)}" />`
+      `<link ${createManagedAttributes()} rel="icon" href="${escapeHtml(normalizedHead.favicon)}" />`
     );
   }
-  for (const meta of head.meta ?? []) {
+  for (const meta of normalizedHead.meta ?? []) {
     const attrs = Object.entries(meta).filter(([, value]) => Boolean(value)).map(([key, value]) => `${key}="${escapeHtml(String(value))}"`).join(" ");
     tags.push(`<meta ${createManagedAttributes()} ${attrs} />`);
   }
-  for (const link of head.links ?? []) {
+  for (const link of normalizedHead.links ?? []) {
     const attrs = Object.entries(link).filter(([, value]) => Boolean(value)).map(([key, value]) => `${key}="${escapeHtml(String(value))}"`).join(" ");
     tags.push(`<link ${createManagedAttributes()} ${attrs} />`);
   }
@@ -594,6 +655,12 @@ function createFileRouter(options) {
       params: {},
       searchParams: input.searchParams,
       cookies: input.cookies ?? {},
+      request: input.request ?? {
+        host: null,
+        pathname,
+        originalPathname: pathname,
+        headers: {}
+      },
       abort: (options2) => {
         throw createAbort(options2);
       }
@@ -821,6 +888,60 @@ function normalizeBasePath(basePath) {
   const withLeadingSlash = basePath.startsWith("/") ? basePath : `/${basePath}`;
   return withLeadingSlash.endsWith("/") ? withLeadingSlash.slice(0, -1) : withLeadingSlash;
 }
+function normalizeRequestHostValue(value) {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const firstValue = trimmed.split(",")[0]?.trim() || "";
+  if (!firstValue) {
+    return null;
+  }
+  if (firstValue.startsWith("[")) {
+    const closingIndex = firstValue.indexOf("]");
+    if (closingIndex > 0) {
+      return firstValue.slice(1, closingIndex).toLowerCase();
+    }
+  }
+  return firstValue.replace(/:\d+$/, "").toLowerCase();
+}
+function getRequestHost(req) {
+  const candidates = [
+    req.headers["x-forwarded-host"],
+    req.headers["x-original-host"],
+    req.headers.host
+  ];
+  for (const candidate of candidates) {
+    if (Array.isArray(candidate)) {
+      for (const singleValue of candidate) {
+        if (typeof singleValue !== "string") {
+          continue;
+        }
+        const normalized2 = normalizeRequestHostValue(singleValue);
+        if (normalized2) {
+          return normalized2;
+        }
+      }
+      continue;
+    }
+    if (typeof candidate !== "string") {
+      continue;
+    }
+    const normalized = normalizeRequestHostValue(candidate);
+    if (normalized) {
+      return normalized;
+    }
+  }
+  return null;
+}
+function createRouteRequestContext(req, pathname, originalPathname) {
+  return {
+    host: getRequestHost(req),
+    pathname,
+    originalPathname,
+    headers: req.headers
+  };
+}
 function stripBasePath(pathname, basePath) {
   if (!basePath) {
     return pathname;
@@ -1166,13 +1287,19 @@ function createNodeRequestHandler(options) {
     }
     if (url.pathname === rscPath) {
       const pathname = stripBasePath(url.searchParams.get("path") || "/", basePath);
+      const requestContext = createRouteRequestContext(
+        req,
+        pathname,
+        url.searchParams.get("path") || "/"
+      );
       const search = new URLSearchParams(url.searchParams.get("search") || "");
       const resolved2 = await withRequestBasename(
         basePath,
         () => router.resolve({
           pathname,
           searchParams: parseSearchParams(search),
-          cookies: requestCookies
+          cookies: requestCookies,
+          request: requestContext
         })
       );
       const payload = {
@@ -1212,7 +1339,12 @@ function createNodeRequestHandler(options) {
       () => router.resolve({
         pathname: stripBasePath(url.pathname, basePath),
         searchParams: parseSearchParams(url.searchParams),
-        cookies: requestCookies
+        cookies: requestCookies,
+        request: createRouteRequestContext(
+          req,
+          stripBasePath(url.pathname, basePath),
+          url.pathname
+        )
       })
     );
     const initialPayload = {
@@ -1256,7 +1388,7 @@ function createNodeRequestHandler(options) {
               rscEndpoint: rscPath,
               rootHtml: createInitialHtmlErrorMarkup("Initial HTML render failed."),
               initialFlightData,
-              basename: basePath,
+              basename: resolved?.head?.basename ?? basePath,
               liveReloadPath: liveReloadPath || void 0,
               liveReloadServerId: liveReloadPath ? devServerId : void 0
             })
@@ -1275,7 +1407,7 @@ function createNodeRequestHandler(options) {
         rscEndpoint: rscPath,
         rootHtml,
         initialFlightData,
-        basename: basePath,
+        basename: resolved.head.basename ?? basePath,
         liveReloadPath: liveReloadPath || void 0,
         liveReloadServerId: liveReloadPath ? devServerId : void 0
       })