@webtypen/webframez-react 0.0.24 → 0.0.27

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 `assetsBaseUrl`.
+That base URL is applied to `favicon` and `links[].href`, which is useful for CSS
+files and other head assets served from a CDN or shared asset host.
+
+```ts
+export function Head() {
+  return {
+    title: "Dashboard",
+    assetsBaseUrl: "https://cdn.example.com/app",
+    favicon: "/favicon.ico",
+    links: [{ rel: "stylesheet", href: "/styles/dashboard.css" }],
+  };
+}
+```
+
+Absolute URLs like `https://...` or `//...` stay unchanged.
+
 ## Recommended Project Structure
 
 ```txt

package/defaults/webpack.client.cjs

@@ -6,9 +6,14 @@ const frameworkDistDir = path.resolve(__dirname, "..", "dist");
 const clientEntry = process.env.WEBFRAMEZ_REACT_CLIENT_ENTRY
   ? path.resolve(projectRoot, process.env.WEBFRAMEZ_REACT_CLIENT_ENTRY)
   : path.resolve(projectRoot, "src/client.tsx");
+const isWatchMode = process.argv.includes("--watch");
+const mode =
+  process.env.NODE_ENV === "production" || (typeof process.env.NODE_ENV === "undefined" && !isWatchMode)
+    ? "production"
+    : "development";
 
 module.exports = {
-  mode: process.env.NODE_ENV === "production" ? "production" : "development",
+  mode,
   entry: {
     client: clientEntry,
   },
@@ -38,6 +43,8 @@ module.exports = {
   optimization: {
     splitChunks: false,
     runtimeChunk: false,
+    moduleIds: "named",
+    chunkIds: "named",
   },
   plugins: [
     new ReactFlightWebpackPlugin({

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 H=Object.create;var f=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var W=(e,n)=>{for(var t in n)f(e,t,{get:n[t],enumerable:!0})},v=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of z(n))!M.call(e,r)&&r!==t&&f(e,r,{get:()=>n[r],enumerable:!(o=N(n,r))||o.enumerable});return e};var D=(e,n,t)=>(t=e!=null?H(B(e)):{},v(n||!e||!e.__esModule?f(t,"default",{value:e,enumerable:!0}):t,e)),F=e=>v(f({},"__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"),u=require("react-server-dom-webpack/client");var G=/^(?:[a-zA-Z][a-zA-Z\d+\-.]*:|\/\/|#)/;function g(e){let n=e?.trim();if(n)return n==="/"?"/":n.replace(/\/+$/,"")}function x(e,n){let t=e.trim(),o=g(n);return!t||!o||G.test(t)||o!=="/"&&(t===o||t.startsWith(`${o}/`))?t:o==="/"?t.startsWith("/")?t:`/${t}`:t.startsWith("/")?`${o}${t}`:`${o}/${t}`}function E(e,n){if(!e)return;let t=g(e.assetsBaseUrl)??g(n),o={...e,...t?{assetsBaseUrl:t}:{}};return o.favicon&&(o.favicon=x(o.favicon,t)),o.links&&(o.links=o.links.map(r=>({...r,href:x(r.href,t)}))),o}var s=require("react/jsx-runtime"),Y={push:()=>{},replace:()=>{},refresh:()=>{}},p=typeof i.default.createContext=="function"?i.default.createContext(null):null,U="__WEBFRAMEZ_ROUTER__",Z="[data-webframez-head='true']";function q(){return typeof window>"u"?null:window[U]??null}function j(e){typeof window>"u"||(window[U]=e)}function S(){let e={},n=typeof document>"u"?"":document.cookie;if(!n||n.trim()==="")return e;for(let t of n.split(";")){let o=t.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 k(e,n,t={}){let o=[`${e}=${encodeURIComponent(n)}`];return t.path&&o.push(`Path=${t.path}`),t.domain&&o.push(`Domain=${t.domain}`),typeof t.maxAge=="number"&&o.push(`Max-Age=${Math.floor(t.maxAge)}`),t.expires&&o.push(`Expires=${t.expires.toUTCString()}`),t.sameSite&&o.push(`SameSite=${t.sameSite}`),t.secure&&o.push("Secure"),o.join("; ")}function X(){return i.default.useMemo(()=>({all:()=>S(),get:e=>S()[e],set:(e,n,t)=>{typeof document>"u"||(document.cookie=k(e,n,t))},remove:(e,n)=>{typeof document>"u"||(document.cookie=k(e,"",{...n??{},maxAge:0}))}}),[])}function K(){let e=p?i.default.useContext(p):null;if(!e){let n=q();if(n)return n;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 I(e){let n=document.createElement("meta");n.setAttribute("data-webframez-head","true");let t=Object.entries(e).filter(([,o])=>!!o);for(let[o,r]of t)n.setAttribute(o,String(r));document.head.appendChild(n)}function b(e){let n=document.createElement("link");n.setAttribute("data-webframez-head","true");let t=Object.entries(e).filter(([,o])=>!!o);for(let[o,r]of t)n.setAttribute(o,String(r));document.head.appendChild(n)}function P(e){if(typeof document>"u")return;let n=E(e)??e;document.title=n.title||"Webframez React";for(let t of document.head.querySelectorAll(Z))t.remove();n.description&&I({name:"description",content:n.description}),n.favicon&&b({rel:"icon",href:n.favicon});for(let t of n.meta??[])I(t);for(let t of n.links??[])b(t)}function J(e){let n=new TextEncoder;return new ReadableStream({start(t){t.enqueue(n.encode(e)),t.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,u.createFromReadableStream)(J(e)))}function ee(e){return Q()??(0,u.createFromFetch)(fetch(`${e}?path=${encodeURIComponent(window.location.pathname)}&search=${encodeURIComponent(window.location.search)}`,{headers:{Accept:"text/x-component"}}))}function te(e,n){return function(){let o=i.default.use(e),[r,d]=(0,i.useState)(o.model),[c,h]=(0,i.useState)(o.head),[O,w]=(0,i.useState)(!1),[T,$]=(0,i.useState)(!1);async function l(a,A="push"){w(!0);try{let m=await(0,u.createFromFetch)(fetch(`${n}?path=${encodeURIComponent(a.pathname)}&search=${encodeURIComponent(a.search)}`,{headers:{Accept:"text/x-component"}}));P(m.head),h(m.head),d(m.model);let _=`${a.pathname}${a.search}`;A==="replace"?history.replaceState(null,"",_):A==="push"&&history.pushState(null,"",_)}catch(y){console.error("[webframez-react] Failed to render route",y),d((0,s.jsx)("p",{children:"Failed to load route."}))}finally{w(!1)}}(0,i.useEffect)(()=>{P(c)},[c]),(0,i.useEffect)(()=>{$(!0);let a=()=>{l(new URL(window.location.href),"none")};return window.addEventListener("popstate",a),()=>{window.removeEventListener("popstate",a)}},[]);let R=i.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")}}),[]);j(R);let C=(0,s.jsxs)(s.Fragment,{children:[T?(0,s.jsx)(V,{active:O}):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 n=e.rootId??"root",t=document.getElementById(n);if(!t)throw new Error(`Missing #${n} 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)(t,(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 l}from"react";import{hydrateRoot as H}from"react-dom/client";import{createFromFetch as P,createFromReadableStream as N}from"react-server-dom-webpack/client";var $=/^(?:[a-zA-Z][a-zA-Z\d+\-.]*:|\/\/|#)/;function m(t){let n=t?.trim();if(n)return n==="/"?"/":n.replace(/\/+$/,"")}function _(t,n){let e=t.trim(),o=m(n);return!e||!o||$.test(e)||o!=="/"&&(e===o||e.startsWith(`${o}/`))?e:o==="/"?e.startsWith("/")?e:`/${e}`:e.startsWith("/")?`${o}${e}`:`${o}/${e}`}function v(t,n){if(!t)return;let e=m(t.assetsBaseUrl)??m(n),o={...t,...e?{assetsBaseUrl:e}:{}};return o.favicon&&(o.favicon=_(o.favicon,e)),o.links&&(o.links=o.links.map(r=>({...r,href:_(r.href,e)}))),o}import{Fragment as q,jsx as d,jsxs as j}from"react/jsx-runtime";var z={push:()=>{},replace:()=>{},refresh:()=>{}},f=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={},n=typeof document>"u"?"":document.cookie;if(!n||n.trim()==="")return t;for(let e of n.split(";")){let o=e.trim();if(!o)continue;let r=o.indexOf("="),a=r>=0?o.slice(0,r).trim():o,s=r>=0?o.slice(r+1):"";a&&(t[a]=decodeURIComponent(s))}return t}function S(t,n,e={}){let o=[`${t}=${encodeURIComponent(n)}`];return e.path&&o.push(`Path=${e.path}`),e.domain&&o.push(`Domain=${e.domain}`),typeof e.maxAge=="number"&&o.push(`Max-Age=${Math.floor(e.maxAge)}`),e.expires&&o.push(`Expires=${e.expires.toUTCString()}`),e.sameSite&&o.push(`SameSite=${e.sameSite}`),e.secure&&o.push("Secure"),o.join("; ")}function ee(){return c.useMemo(()=>({all:()=>E(),get:t=>E()[t],set:(t,n,e)=>{typeof document>"u"||(document.cookie=S(t,n,e))},remove:(t,n)=>{typeof document>"u"||(document.cookie=S(t,"",{...n??{},maxAge:0}))}}),[])}function te(){let t=f?c.useContext(f):null;if(!t){let n=M();if(n)return n;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 k(t){let n=document.createElement("meta");n.setAttribute("data-webframez-head","true");let e=Object.entries(t).filter(([,o])=>!!o);for(let[o,r]of e)n.setAttribute(o,String(r));document.head.appendChild(n)}function I(t){let n=document.createElement("link");n.setAttribute("data-webframez-head","true");let e=Object.entries(t).filter(([,o])=>!!o);for(let[o,r]of e)n.setAttribute(o,String(r));document.head.appendChild(n)}function b(t){if(typeof document>"u")return;let n=v(t)??t;document.title=n.title||"Webframez React";for(let e of document.head.querySelectorAll(B))e.remove();n.description&&k({name:"description",content:n.description}),n.favicon&&I({rel:"icon",href:n.favicon});for(let e of n.meta??[])k(e);for(let e of n.links??[])I(e)}function F(t){let n=new TextEncoder;return new ReadableStream({start(e){e.enqueue(n.encode(t)),e.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,N(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,n){return function(){let o=c.use(t),[r,a]=l(o.model),[s,g]=l(o.head),[U,h]=l(!1),[O,T]=l(!1);async function u(i,C="push"){h(!0);try{let p=await P(fetch(`${n}?path=${encodeURIComponent(i.pathname)}&search=${encodeURIComponent(i.search)}`,{headers:{Accept:"text/x-component"}}));b(p.head),g(p.head),a(p.model);let y=`${i.pathname}${i.search}`;C==="replace"?history.replaceState(null,"",y):C==="push"&&history.pushState(null,"",y)}catch(A){console.error("[webframez-react] Failed to render route",A),a(d("p",{children:"Failed to load route."}))}finally{h(!1)}}x(()=>{b(s)},[s]),x(()=>{T(!0);let i=()=>{u(new URL(window.location.href),"none")};return window.addEventListener("popstate",i),()=>{window.removeEventListener("popstate",i)}},[]);let w=c.useMemo(()=>({push:i=>{u(new URL(i,window.location.origin),"push")},replace:i=>{u(new URL(i,window.location.origin),"replace")},refresh:()=>{u(new URL(window.location.href),"none")}}),[]);W(w);let R=j(q,{children:[O?d(D,{active:U}):null,r??d("p",{style:{padding:24},children:"Loading..."})]});return f?d(f.Provider,{value:w,children:R}):R}}function ne(t={}){let n=t.rootId??"root",e=document.getElementById(n);if(!e)throw new Error(`Missing #${n} element`);let o=typeof window<"u"&&window.__RSC_ENDPOINT,r=t.rscEndpoint??o??"/rsc",a=Y(r),s=Z(a,r);return H(e,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 normalizeAssetsBaseUrl(value) {
+  const trimmed = value?.trim();
+  if (!trimmed) {
+    return void 0;
+  }
+  if (trimmed === "/") {
+    return "/";
+  }
+  return trimmed.replace(/\/+$/, "");
+}
+function resolveHeadAssetUrl(assetUrl, assetsBaseUrl) {
+  const normalizedAssetUrl = assetUrl.trim();
+  const normalizedAssetsBaseUrl = normalizeAssetsBaseUrl(assetsBaseUrl);
+  if (!normalizedAssetUrl || !normalizedAssetsBaseUrl) {
+    return normalizedAssetUrl;
+  }
+  if (ABSOLUTE_ASSET_URL_PATTERN.test(normalizedAssetUrl)) {
+    return normalizedAssetUrl;
+  }
+  if (normalizedAssetsBaseUrl !== "/" && (normalizedAssetUrl === normalizedAssetsBaseUrl || normalizedAssetUrl.startsWith(`${normalizedAssetsBaseUrl}/`))) {
+    return normalizedAssetUrl;
+  }
+  if (normalizedAssetsBaseUrl === "/") {
+    return normalizedAssetUrl.startsWith("/") ? normalizedAssetUrl : `/${normalizedAssetUrl}`;
+  }
+  if (normalizedAssetUrl.startsWith("/")) {
+    return `${normalizedAssetsBaseUrl}${normalizedAssetUrl}`;
+  }
+  return `${normalizedAssetsBaseUrl}/${normalizedAssetUrl}`;
+}
+function normalizeHeadConfig(head, inheritedAssetsBaseUrl) {
+  if (!head) {
+    return void 0;
+  }
+  const effectiveAssetsBaseUrl = normalizeAssetsBaseUrl(head.assetsBaseUrl) ?? normalizeAssetsBaseUrl(inheritedAssetsBaseUrl);
+  const normalizedHead = {
+    ...head,
+    ...effectiveAssetsBaseUrl ? { assetsBaseUrl: effectiveAssetsBaseUrl } : {}
+  };
+  if (normalizedHead.favicon) {
+    normalizedHead.favicon = resolveHeadAssetUrl(
+      normalizedHead.favicon,
+      effectiveAssetsBaseUrl
+    );
+  }
+  if (normalizedHead.links) {
+    normalizedHead.links = normalizedHead.links.map((link) => ({
+      ...link,
+      href: resolveHeadAssetUrl(link.href, effectiveAssetsBaseUrl)
+    }));
+  }
+  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.assetsBaseUrl);
     if (!config) {
       continue;
     }
@@ -375,6 +432,9 @@ function mergeHead(...configs) {
     if (config.description) {
       merged.description = config.description;
     }
+    if (config.assetsBaseUrl) {
+      merged.assetsBaseUrl = config.assetsBaseUrl;
+    }
     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} />`);
   }
@@ -732,7 +793,21 @@ globalThis.__webpack_require__ = function __webframezNodeRequire(id) {
   }
 
   if (id.startsWith("./")) {
-    return require(path.resolve(process.cwd(), id.slice(2)));
+    const relativeId = id.slice(2);
+    const candidates = [
+      path.resolve(process.cwd(), relativeId),
+      path.resolve(process.cwd(), "..", relativeId)
+    ];
+    for (const candidate of candidates) {
+      try {
+        return require(candidate);
+      } catch (error) {
+        const missingCandidate = error && error.code === "MODULE_NOT_FOUND" && typeof error.message === "string" && error.message.includes("'" + candidate + "'");
+        if (!missingCandidate) {
+          throw error;
+        }
+      }
+    }
   }
 
   return require(id);
@@ -1036,22 +1111,64 @@ function normalizeClientManifest(manifest, options) {
 }
 function createServerConsumerManifest(manifest) {
   const consumerManifest = {};
+  const normalizeWorkerModuleId = (requestKey, rawModuleId) => {
+    if (typeof rawModuleId === "string" && rawModuleId.trim() !== "") {
+      return rawModuleId;
+    }
+    if (typeof rawModuleId !== "number" || !Number.isFinite(rawModuleId)) {
+      return null;
+    }
+    if (!requestKey || requestKey.trim() === "") {
+      return String(rawModuleId);
+    }
+    if (requestKey.startsWith("file://")) {
+      try {
+        return (0, import_node_url.fileURLToPath)(requestKey);
+      } catch {
+        return String(rawModuleId);
+      }
+    }
+    if (requestKey.startsWith("/")) {
+      return requestKey;
+    }
+    if (requestKey.startsWith("./")) {
+      return requestKey;
+    }
+    if (requestKey.startsWith("node_modules/") || requestKey.startsWith("build/")) {
+      return `./${requestKey}`;
+    }
+    return requestKey;
+  };
+  const addReference = (lookupKey, reference) => {
+    if (!lookupKey || lookupKey.trim() === "") {
+      return;
+    }
+    if (lookupKey in consumerManifest) {
+      return;
+    }
+    consumerManifest[lookupKey] = {
+      "*": reference
+    };
+  };
   for (const [key, value] of Object.entries(manifest)) {
     if (!value || typeof value !== "object") {
       continue;
     }
     const entry = value;
-    if (typeof entry.id !== "string" || entry.id.trim() === "") {
+    const workerModuleId = normalizeWorkerModuleId(key, entry.id);
+    if (!workerModuleId) {
       continue;
     }
-    consumerManifest[key] = {
-      "*": {
-        id: entry.id,
-        chunks: [],
-        name: entry.name ?? "*",
-        ...entry.async ? { async: entry.async } : {}
-      }
+    const reference = {
+      id: workerModuleId,
+      chunks: Array.isArray(entry.chunks) ? entry.chunks : [],
+      name: entry.name ?? "*",
+      ...entry.async ? { async: entry.async } : {}
     };
+    addReference(key, reference);
+    if (typeof entry.id === "number" && Number.isFinite(entry.id)) {
+      addReference(String(entry.id), reference);
+    }
   }
   return consumerManifest;
 }

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 normalizeAssetsBaseUrl(value) {
+  const trimmed = value?.trim();
+  if (!trimmed) {
+    return void 0;
+  }
+  if (trimmed === "/") {
+    return "/";
+  }
+  return trimmed.replace(/\/+$/, "");
+}
+function resolveHeadAssetUrl(assetUrl, assetsBaseUrl) {
+  const normalizedAssetUrl = assetUrl.trim();
+  const normalizedAssetsBaseUrl = normalizeAssetsBaseUrl(assetsBaseUrl);
+  if (!normalizedAssetUrl || !normalizedAssetsBaseUrl) {
+    return normalizedAssetUrl;
+  }
+  if (ABSOLUTE_ASSET_URL_PATTERN.test(normalizedAssetUrl)) {
+    return normalizedAssetUrl;
+  }
+  if (normalizedAssetsBaseUrl !== "/" && (normalizedAssetUrl === normalizedAssetsBaseUrl || normalizedAssetUrl.startsWith(`${normalizedAssetsBaseUrl}/`))) {
+    return normalizedAssetUrl;
+  }
+  if (normalizedAssetsBaseUrl === "/") {
+    return normalizedAssetUrl.startsWith("/") ? normalizedAssetUrl : `/${normalizedAssetUrl}`;
+  }
+  if (normalizedAssetUrl.startsWith("/")) {
+    return `${normalizedAssetsBaseUrl}${normalizedAssetUrl}`;
+  }
+  return `${normalizedAssetsBaseUrl}/${normalizedAssetUrl}`;
+}
+function normalizeHeadConfig(head, inheritedAssetsBaseUrl) {
+  if (!head) {
+    return void 0;
+  }
+  const effectiveAssetsBaseUrl = normalizeAssetsBaseUrl(head.assetsBaseUrl) ?? normalizeAssetsBaseUrl(inheritedAssetsBaseUrl);
+  const normalizedHead = {
+    ...head,
+    ...effectiveAssetsBaseUrl ? { assetsBaseUrl: effectiveAssetsBaseUrl } : {}
+  };
+  if (normalizedHead.favicon) {
+    normalizedHead.favicon = resolveHeadAssetUrl(
+      normalizedHead.favicon,
+      effectiveAssetsBaseUrl
+    );
+  }
+  if (normalizedHead.links) {
+    normalizedHead.links = normalizedHead.links.map((link) => ({
+      ...link,
+      href: resolveHeadAssetUrl(link.href, effectiveAssetsBaseUrl)
+    }));
+  }
+  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.assetsBaseUrl);
     if (!config) {
       continue;
     }
@@ -350,6 +407,9 @@ function mergeHead(...configs) {
     if (config.description) {
       merged.description = config.description;
     }
+    if (config.assetsBaseUrl) {
+      merged.assetsBaseUrl = config.assetsBaseUrl;
+    }
     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} />`);
   }
@@ -707,7 +768,21 @@ globalThis.__webpack_require__ = function __webframezNodeRequire(id) {
   }
 
   if (id.startsWith("./")) {
-    return require(path.resolve(process.cwd(), id.slice(2)));
+    const relativeId = id.slice(2);
+    const candidates = [
+      path.resolve(process.cwd(), relativeId),
+      path.resolve(process.cwd(), "..", relativeId)
+    ];
+    for (const candidate of candidates) {
+      try {
+        return require(candidate);
+      } catch (error) {
+        const missingCandidate = error && error.code === "MODULE_NOT_FOUND" && typeof error.message === "string" && error.message.includes("'" + candidate + "'");
+        if (!missingCandidate) {
+          throw error;
+        }
+      }
+    }
   }
 
   return require(id);
@@ -1011,22 +1086,64 @@ function normalizeClientManifest(manifest, options) {
 }
 function createServerConsumerManifest(manifest) {
   const consumerManifest = {};
+  const normalizeWorkerModuleId = (requestKey, rawModuleId) => {
+    if (typeof rawModuleId === "string" && rawModuleId.trim() !== "") {
+      return rawModuleId;
+    }
+    if (typeof rawModuleId !== "number" || !Number.isFinite(rawModuleId)) {
+      return null;
+    }
+    if (!requestKey || requestKey.trim() === "") {
+      return String(rawModuleId);
+    }
+    if (requestKey.startsWith("file://")) {
+      try {
+        return fileURLToPath(requestKey);
+      } catch {
+        return String(rawModuleId);
+      }
+    }
+    if (requestKey.startsWith("/")) {
+      return requestKey;
+    }
+    if (requestKey.startsWith("./")) {
+      return requestKey;
+    }
+    if (requestKey.startsWith("node_modules/") || requestKey.startsWith("build/")) {
+      return `./${requestKey}`;
+    }
+    return requestKey;
+  };
+  const addReference = (lookupKey, reference) => {
+    if (!lookupKey || lookupKey.trim() === "") {
+      return;
+    }
+    if (lookupKey in consumerManifest) {
+      return;
+    }
+    consumerManifest[lookupKey] = {
+      "*": reference
+    };
+  };
   for (const [key, value] of Object.entries(manifest)) {
     if (!value || typeof value !== "object") {
       continue;
     }
     const entry = value;
-    if (typeof entry.id !== "string" || entry.id.trim() === "") {
+    const workerModuleId = normalizeWorkerModuleId(key, entry.id);
+    if (!workerModuleId) {
       continue;
     }
-    consumerManifest[key] = {
-      "*": {
-        id: entry.id,
-        chunks: [],
-        name: entry.name ?? "*",
-        ...entry.async ? { async: entry.async } : {}
-      }
+    const reference = {
+      id: workerModuleId,
+      chunks: Array.isArray(entry.chunks) ? entry.chunks : [],
+      name: entry.name ?? "*",
+      ...entry.async ? { async: entry.async } : {}
     };
+    addReference(key, reference);
+    if (typeof entry.id === "number" && Number.isFinite(entry.id)) {
+      addReference(String(entry.id), reference);
+    }
   }
   return consumerManifest;
 }