webhanger-front 1.0.12 → 1.0.14

package/browser.min.js

@@ -1 +1 @@
-!function(e){const t="components",n="wh2_",r=[],o={};function a(e,t){o[e]||(o[e]=[]),o[e].push(t)}function s(e,t){(o[e]||[]).forEach(e=>e(t))}const c={loads:0,cacheHits:0,errors:0,totalTime:0};function i(e,t){e in c&&(c[e]+=t),s("metric",{name:e,value:t,metrics:{...c}})}const d=new Map;async function l(e,t,n){if(!e)return"";try{const r=e.split(":");if(3!==r.length)return console.warn("[WebHanger] decryptChunk: unexpected format, parts:",r.length),"";const[o,a,s]=r,c=Uint8Array.from(atob(o),e=>e.charCodeAt(0)),i=Uint8Array.from(atob(a),e=>e.charCodeAt(0)),l=Uint8Array.from(atob(s),e=>e.charCodeAt(0)),u=new Uint8Array(l.length+i.length);u.set(l),u.set(i,l.length);const h=await async function(e,t){const n=e+t;if(d.has(n))return d.get(n);const r=new TextEncoder,o=await crypto.subtle.digest("SHA-256",r.encode(e+t)),a=await crypto.subtle.importKey("raw",o,{name:"AES-GCM"},!1,["decrypt"]);return d.set(n,a),a}(t,n),f=await crypto.subtle.decrypt({name:"AES-GCM",iv:c},h,u);return(new TextDecoder).decode(f)}catch(e){return console.warn("[WebHanger] decryptChunk failed:",n,e.message),""}}function u(){return new Promise((e,n)=>{const r=indexedDB.open("webhanger_v2",1);r.onupgradeneeded=e=>e.target.result.createObjectStore(t),r.onsuccess=t=>e(t.target.result),r.onerror=()=>n(r.error)})}async function h(e,r){try{if(r.length<51200)return void localStorage.setItem(n+e,r)}catch(e){}await async function(e,n){const r=await u();return new Promise((o,a)=>{const s=r.transaction(t,"readwrite").objectStore(t).put(n,e);s.onsuccess=()=>o(),s.onerror=()=>a(s.error)})}(e,r)}async function f(e,r){const o=await async function(e){try{const t=localStorage.getItem(n+e);if(t)return t}catch(e){}return await async function(e){const n=await u();return new Promise((r,o)=>{const a=n.transaction(t,"readonly").objectStore(t).get(e);a.onsuccess=()=>r(a.result),a.onerror=()=>o(a.error)})}(e)}(e);if(o)return i("cacheHits",1),r().then(t=>{t&&t!==o&&h(e,t)}).catch(()=>{}),{data:o,source:"cache"};const a=await r();return a&&await h(e,a),{data:a,source:"cdn"}}async function m(e,t,n){const r=Array.isArray(e)?e:[e];let o;for(const e of r)try{const r=n?`${e}?token=${t}&expires=${n}`:`${e}?token=${t}`,o=await fetch(r);if(!o.ok)throw Error("HTTP "+o.status);return await o.text()}catch(t){console.warn(`[WebHanger] CDN failed (${e}): ${t.message} \u2014 trying next...`),o=t}throw Error("All CDN endpoints failed. Last error: "+o?.message)}function w(e){return new Promise(t=>{if("style"===e.type?document.querySelector(`link[href="${e.url}"]`):document.querySelector(`script[src="${e.url}"]`))return t();if("style"===e.type){const n=document.createElement("link");n.rel="stylesheet",n.href=e.url,n.onload=t,n.onerror=t,document.head.appendChild(n)}else{const n=document.createElement("script");n.src=e.url,e.defer&&(n.defer=!0),e.async&&(n.async=!0),n.onload=t,n.onerror=t,document.head.appendChild(n)}})}async function p(e=[]){for(const t of e)await w(t)}async function y(e,t){const n=`${e.cdnUrl}@${e.expires}`,{data:r}=await f(n,()=>m(e.cdnUrl,e.token,e.expires));if(!r)return;let o;try{o=JSON.parse(r)}catch(e){return}o.assets&&o.assets.length&&await p(o.assets);const a=await l(o.c,t,"::css");if(a&&!document.querySelector(`style[data-wh-dep="${e.name}@${e.version}"]`)){const t=document.createElement("style");t.setAttribute("data-wh-dep",`${e.name}@${e.version}`),t.textContent=a,document.head.appendChild(t)}const s=await l(o.h,t,"::html");if(s){const t=document.querySelector(`[data-wh-${e.name}]`);t&&(t.innerHTML=s)}const c=await l(o.j,t,"::js");if(c){const e=document.createElement("script");e.textContent=c,document.head.appendChild(e),document.head.removeChild(e)}}async function g(t,n,r,o,a="[data-wh]",c=null,d=[],u={}){if(!t||!n||!r||null==o)return void console.error("[WebHanger] Missing required params");if(0!==o&&Math.floor(Date.now()/1e3)>o)return void console.warn("[WebHanger] Token expired.");const h=function(e){return(t,n={})=>{"function"==typeof e&&e({stage:t,...n}),s(t,n)}}(c),w=function(e){const t=document.querySelector(e||"[data-wh]");if(!t)return{show:()=>{},hide:()=>{}};const n=document.createElement("div");return n.setAttribute("data-wh-loader",""),n.style.cssText="display:flex;align-items:center;justify-content:center;padding:24px;width:100%;box-sizing:border-box;",n.innerHTML='<div style="width:28px;height:28px;border:3px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;animation:wh-spin 0.7s linear infinite;"></div><style>@keyframes wh-spin{to{transform:rotate(360deg);}}</style>',{show(){t.appendChild(n)},hide(){n.parentNode&&n.parentNode.removeChild(n)}}}(a),g=performance.now();h("start",{cdnUrl:t,selector:a}),w.show(),i("loads",1);const b=`${t}@${o}`;try{h("fetching");const{data:c,source:v}=await f(b,()=>m(t,r,o));let x;try{x=JSON.parse(c)}catch(e){x={}}x.assets&&x.assets.length&&(h("assets",{count:x.assets.length}),await p(x.assets));const C=[...d,...x.dependencies||[]];if(C.length){h("deps",{count:C.length});for(const e of C)"object"==typeof e&&e.cdnUrl&&await y(e,n)}h("injecting"),w.hide(),await async function(t,n,r,o={}){const{sandbox:a=!1,allowedDomains:c,beforeMount:i,afterMount:d}=o,u=document.querySelector(r||"[data-wh]");if(!u)return void console.warn("[WebHanger] No mount target found.");let h;try{h=JSON.parse(t)}catch(e){return void console.error("[WebHanger] Invalid payload.")}if(!function(t){if(!t||!t.length)return!0;const n=e.location?.hostname||"";return t.some(e=>n===e||n.endsWith("."+e))}(c))return console.error("[WebHanger] Domain not allowed: "+e.location?.hostname),void s("error",{reason:"domain_restricted"});const f=await l(h.c,n,"::css"),m=await l(h.h,n,"::html"),w=await l(h.j,n,"::js");if(h.integrity&&(m||w)){const e=await async function(e,t,n,r){if(!r)return!0;const o=(new TextEncoder).encode(e+t+n),a=await crypto.subtle.digest("SHA-256",o);return Array.from(new Uint8Array(a)).map(e=>e.toString(16).padStart(2,"0")).join("")===r}(m,f,w,h.integrity);if(!e)return console.error("[WebHanger] Integrity check failed \u2014 bundle may be tampered or re-deploy needed."),void s("error",{reason:"integrity_failed"})}if("function"==typeof i&&i({target:u,html:m,css:f}),s("beforeMount",{target:u,selector:r}),a)!function(e,t,n){const r=e.attachShadow({mode:"closed"});if(n){const e=document.createElement("style");e.textContent=n,r.appendChild(e)}if(t){const e=document.createElement("div");e.innerHTML=t,r.appendChild(e)}}(u,m,f);else{if(f){const e=document.createElement("style");e.textContent=f,document.head.appendChild(e)}m&&(u.innerHTML=m)}if(w){const e=document.createElement("script");e.textContent=w,document.head.appendChild(e),document.head.removeChild(e)}"function"==typeof d&&d({target:u}),s("afterMount",{target:u,selector:r})}(c,n,a,u);const S=Math.round(performance.now()-g);i("totalTime",S),h("done",{time:S,source:v}),s("load",{cdnUrl:t,time:S,source:v,selector:a})}catch(e){w.hide(),i("errors",1),h("error",{message:e.message}),"function"==typeof u.onError&&u.onError(e),console.error("[WebHanger] Load failed:",e.message)}}let b=null,v="./wh-manifest.json";"undefined"!=typeof customElements&&customElements.define("wh-component",class extends HTMLElement{async connectedCallback(){b&&await this._load()}async _load(){const e=this.getAttribute("name"),t=this.hasAttribute("sandbox");if(!e)return void console.error("[WebHanger] <wh-component> missing 'name' attribute");const n=b||await fetch(this.getAttribute("src")||v).then(e=>e.json()),r=n.components[e];if(!r)return void console.error(`[WebHanger] <wh-component>: "${e}" not found in manifest`);this.setAttribute("data-wh-el",e);const o=`wh-component[data-wh-el="${e}"]`;await g(r.urls||r.url,n.pid,r.token,r.expires,o,null,[],{sandbox:t})}}),e.WebHangerFront={load:g,clearCache:async function(){Object.keys(localStorage).filter(e=>e.startsWith(n)).forEach(e=>localStorage.removeItem(e));try{(await u()).transaction(t,"readwrite").objectStore(t).clear()}catch(e){}if("caches"in window){const e=await caches.keys();await Promise.all(e.map(e=>caches.delete(e)))}if("serviceWorker"in navigator){const e=await navigator.serviceWorker.getRegistrations();await Promise.all(e.map(e=>e.unregister()))}Object.keys(sessionStorage).filter(e=>e.startsWith(n)).forEach(e=>sessionStorage.removeItem(e))},use:function(e){"function"==typeof e.install&&e.install({on:a,emit:s}),r.push(e)},on:a,metrics:c,initialize:async function(e="./wh-manifest.json"){v=e;const t=await fetch(e);b=await t.json(),document.querySelectorAll("wh-component[name]").forEach(e=>e._load())},version:"2.0.0"}}(window);
+!function(e){const t="components",n="wh2_",r=[],o={};function a(e,t){o[e]||(o[e]=[]),o[e].push(t)}function s(e,t){(o[e]||[]).forEach(e=>e(t))}const c={loads:0,cacheHits:0,errors:0,totalTime:0};function i(e,t){e in c&&(c[e]+=t),s("metric",{name:e,value:t,metrics:{...c}})}const d=new Map;async function l(e,t,n){if(!e)return"";try{const r=e.split(":");if(3!==r.length)return console.warn("[WebHanger] decryptChunk: unexpected format, parts:",r.length),"";const[o,a,s]=r,c=Uint8Array.from(atob(o),e=>e.charCodeAt(0)),i=Uint8Array.from(atob(a),e=>e.charCodeAt(0)),l=Uint8Array.from(atob(s),e=>e.charCodeAt(0)),u=new Uint8Array(l.length+i.length);u.set(l),u.set(i,l.length);const f=await async function(e,t){const n=e+t;if(d.has(n))return d.get(n);const r=new TextEncoder,o=await crypto.subtle.digest("SHA-256",r.encode(e+t)),a=await crypto.subtle.importKey("raw",o,{name:"AES-GCM"},!1,["decrypt"]);return d.set(n,a),a}(t,n),h=await crypto.subtle.decrypt({name:"AES-GCM",iv:c},f,u);return(new TextDecoder).decode(h)}catch(e){return console.warn("[WebHanger] decryptChunk failed:",n,e.message),""}}function u(){return new Promise((e,n)=>{const r=indexedDB.open("webhanger_v2",1);r.onupgradeneeded=e=>e.target.result.createObjectStore(t),r.onsuccess=t=>e(t.target.result),r.onerror=()=>n(r.error)})}async function f(e,r){try{if(r.length<51200)return void localStorage.setItem(n+e,r)}catch(e){}await async function(e,n){const r=await u();return new Promise((o,a)=>{const s=r.transaction(t,"readwrite").objectStore(t).put(n,e);s.onsuccess=()=>o(),s.onerror=()=>a(s.error)})}(e,r)}async function h(e,r){const o=await async function(e){try{const t=localStorage.getItem(n+e);if(t)return t}catch(e){}return await async function(e){const n=await u();return new Promise((r,o)=>{const a=n.transaction(t,"readonly").objectStore(t).get(e);a.onsuccess=()=>r(a.result),a.onerror=()=>o(a.error)})}(e)}(e);if(o)return i("cacheHits",1),r().then(t=>{t&&t!==o&&f(e,t)}).catch(()=>{}),{data:o,source:"cache"};const a=await r();return a&&await f(e,a),{data:a,source:"cdn"}}async function p(e,t,n){const r=Array.isArray(e)?e:[e];let o;for(const e of r)try{const r=n?`${e}?token=${t}&expires=${n}`:`${e}?token=${t}`,o=await fetch(r);if(!o.ok)throw Error("HTTP "+o.status);return await o.text()}catch(t){console.warn(`[WebHanger] CDN failed (${e}): ${t.message} \u2014 trying next...`),o=t}throw Error("All CDN endpoints failed. Last error: "+o?.message)}function m(e){return new Promise(t=>{if("style"===e.type?document.querySelector(`link[href="${e.url}"]`):document.querySelector(`script[src="${e.url}"]`))return t();if("style"===e.type){const n=document.createElement("link");n.rel="stylesheet",n.href=e.url,n.onload=t,n.onerror=t,document.head.appendChild(n)}else{const n=document.createElement("script");n.src=e.url,e.defer&&(n.defer=!0),e.async&&(n.async=!0),n.onload=t,n.onerror=t,document.head.appendChild(n)}})}async function w(e=[]){for(const t of e)await m(t)}function y(e,t){return e&&t?e.replace(/\{\{wh\.([^}]+)\}\}/g,function(e,n){return void 0!==t[n]?t[n]+"":""}):e}async function g(e,t){const n=`${e.cdnUrl}@${e.expires}`,{data:r}=await h(n,()=>p(e.cdnUrl,e.token,e.expires));if(!r)return;let o;try{o=JSON.parse(r)}catch(e){return}o.assets&&o.assets.length&&await w(o.assets);const a=await l(o.c,t,"::css");if(a&&!document.querySelector(`style[data-wh-dep="${e.name}@${e.version}"]`)){const t=document.createElement("style");t.setAttribute("data-wh-dep",`${e.name}@${e.version}`),t.textContent=a,document.head.appendChild(t)}const s=await l(o.h,t,"::html");if(s){const t=document.querySelector(`[data-wh-${e.name}]`);t&&(t.innerHTML=s)}const c=await l(o.j,t,"::js");if(c){const e=document.createElement("script");e.textContent=c,document.head.appendChild(e),document.head.removeChild(e)}}async function b(t,n,r,o,a="[data-wh]",c=null,d=[],u={}){if(!t||!n||!r||null==o)return void console.error("[WebHanger] Missing required params");if(0!==o&&Math.floor(Date.now()/1e3)>o)return void console.warn("[WebHanger] Token expired.");const f=function(e){return(t,n={})=>{"function"==typeof e&&e({stage:t,...n}),s(t,n)}}(c),m=function(e){const t=document.querySelector(e||"[data-wh]");if(!t)return{show:()=>{},hide:()=>{}};const n=document.createElement("div");return n.setAttribute("data-wh-loader",""),n.style.cssText="display:flex;align-items:center;justify-content:center;padding:24px;width:100%;box-sizing:border-box;",n.innerHTML='<div style="width:28px;height:28px;border:3px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;animation:wh-spin 0.7s linear infinite;"></div><style>@keyframes wh-spin{to{transform:rotate(360deg);}}</style>',{show(){t.appendChild(n)},hide(){n.parentNode&&n.parentNode.removeChild(n)}}}(a),b=performance.now();f("start",{cdnUrl:t,selector:a}),m.show(),i("loads",1);const v=`${t}@${o}`;try{f("fetching");const{data:c,source:S}=await h(v,()=>p(t,r,o));let x;try{x=JSON.parse(c)}catch(e){x={}}x.assets&&x.assets.length&&(f("assets",{count:x.assets.length}),await w(x.assets));const C=[...d,...x.dependencies||[]];if(C.length){f("deps",{count:C.length});for(const e of C)"object"==typeof e&&e.cdnUrl&&await g(e,n)}f("injecting"),m.hide(),await async function(t,n,r,o={}){const{sandbox:a=!1,allowedDomains:c,beforeMount:i,afterMount:d,props:u={}}=o,f=document.querySelector(r||"[data-wh]");if(!f)return void console.warn("[WebHanger] No mount target found.");let h;try{h=JSON.parse(t)}catch(e){return void console.error("[WebHanger] Invalid payload.")}if(!function(t){if(!t||!t.length)return!0;const n=e.location?.hostname||"";return t.some(e=>n===e||n.endsWith("."+e))}(c))return console.error("[WebHanger] Domain not allowed: "+e.location?.hostname),void s("error",{reason:"domain_restricted"});const p=await l(h.c,n,"::css");let m=await l(h.h,n,"::html"),w=await l(h.j,n,"::js");if(h.integrity&&(m||w)){const e=await async function(e,t,n,r){if(!r)return!0;const o=(new TextEncoder).encode(e+t+n),a=await crypto.subtle.digest("SHA-256",o);return Array.from(new Uint8Array(a)).map(e=>e.toString(16).padStart(2,"0")).join("")===r}(m,p,w,h.integrity);if(!e)return console.error("[WebHanger] Integrity check failed \u2014 bundle may be tampered or re-deploy needed."),void s("error",{reason:"integrity_failed"})}const g=(v=u,S={},Object.keys((b=h.props)||{}).forEach(function(e){var t=b[e];S[e]=void 0!==t.default?t.default:""}),Object.keys(v||{}).forEach(function(e){var t=e.replace(/^wh-/,"").replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}),n=v[e],r=b&&b[t];if(r&&"json"===r.type)try{n=JSON.parse(n)}catch(e){}S[t]=n}),S);var b,v,S;if(console.log("[WebHanger] props schema:",JSON.stringify(h.props),"| userProps:",JSON.stringify(u),"| resolved:",JSON.stringify(g)),m=y(m,g),w=y(w,g),"function"==typeof i&&i({target:f,html:m,css:p}),s("beforeMount",{target:f,selector:r}),a)!function(e,t,n){const r=e.attachShadow({mode:"closed"});if(n){const e=document.createElement("style");e.textContent=n,r.appendChild(e)}if(t){const e=document.createElement("div");e.innerHTML=t,r.appendChild(e)}}(f,m,p);else{if(p){const e=document.createElement("style");e.textContent=p,document.head.appendChild(e)}m&&(f.innerHTML=m)}if(w){const e=document.createElement("script");e.textContent=w,document.head.appendChild(e),document.head.removeChild(e)}"function"==typeof d&&d({target:f}),s("afterMount",{target:f,selector:r})}(c,n,a,u);const E=Math.round(performance.now()-b);i("totalTime",E),f("done",{time:E,source:S}),s("load",{cdnUrl:t,time:E,source:S,selector:a})}catch(e){m.hide(),i("errors",1),f("error",{message:e.message}),"function"==typeof u.onError&&u.onError(e),console.error("[WebHanger] Load failed:",e.message)}}let v=null,S="./wh-manifest.json";"undefined"!=typeof customElements&&customElements.define("wh-component",class extends HTMLElement{async connectedCallback(){v&&await this._load()}async _load(){const e=this.getAttribute("name"),t=this.hasAttribute("sandbox");if(!e)return void console.error("[WebHanger] <wh-component> missing 'name' attribute");const n={};for(const e of this.attributes)e.name.startsWith("wh-")&&"wh-component"!==e.name&&(n[e.name]=e.value);const r=v||await fetch(this.getAttribute("src")||S).then(e=>e.json()),o=r.components[e];if(!o)return void console.error(`[WebHanger] <wh-component>: "${e}" not found in manifest`);this.setAttribute("data-wh-el",e);const a=`wh-component[data-wh-el="${e}"]`;await b(o.urls||o.url,r.pid,o.token,o.expires,a,null,[],{sandbox:t,props:n})}});const x={supported:!1,adapter:null,device:null};!async function(){if(!navigator.gpu)return!1;try{const e=await navigator.gpu.requestAdapter();if(!e)return!1;const t=await e.requestDevice();return x.supported=!0,x.adapter=e,x.device=t,s("gpu",{supported:!0,adapter:e}),!0}catch(e){return!1}}(),e.WebHangerFront={load:b,clearCache:async function(){Object.keys(localStorage).filter(e=>e.startsWith(n)).forEach(e=>localStorage.removeItem(e));try{(await u()).transaction(t,"readwrite").objectStore(t).clear()}catch(e){}if("caches"in window){const e=await caches.keys();await Promise.all(e.map(e=>caches.delete(e)))}if("serviceWorker"in navigator){const e=await navigator.serviceWorker.getRegistrations();await Promise.all(e.map(e=>e.unregister()))}Object.keys(sessionStorage).filter(e=>e.startsWith(n)).forEach(e=>sessionStorage.removeItem(e))},use:function(e){"function"==typeof e.install&&e.install({on:a,emit:s}),r.push(e)},on:a,metrics:c,initialize:async function(e="./wh-manifest.json"){S=e;const t=await fetch(e);v=await t.json(),document.querySelectorAll("wh-component[name]").forEach(e=>e._load())},registerSW:async function(e="/webhanger.sw.js"){if("serviceWorker"in navigator)try{s("sw",{registered:!0,scope:(await navigator.serviceWorker.register(e)).scope})}catch(e){console.warn("[WebHanger] SW registration failed:",e.message)}},setOfflinePage:async function(e="",t=""){if(!("serviceWorker"in navigator))return;const n=await navigator.serviceWorker.ready;n.active?.postMessage({type:"SET_OFFLINE_PAGE",html:e,css:t})},gpu:x,version:"2.0.0"}}(window);

package/index.js

@@ -1,25 +1,75 @@
-// WebHanger Frontend SDK — ESM
-// Use with bundlers (Vite, Webpack, Rollup) or native ESM
+/**
+ * WebHanger Frontend SDK — ESM (for bundlers: Next.js, Vite, Webpack, Rollup)
+ * Full feature parity with browser.js IIFE build.
+ * Tree-shakeable named exports.
+ */
 
-const VERSION = "1.0.0";
-const IDB_NAME = "webhanger_cache";
+const VERSION = "2.0.0";
+const IDB_NAME = "webhanger_v2";
 const IDB_STORE = "components";
-const LS_PREFIX = "wh_";
+const LS_PREFIX = "wh2_";
 const SIZE_THRESHOLD = 50 * 1024;
 
-// ─── Decrypt ─────────────────────────────────────────────────────────────────
-
-// UTF-8 safe XOR decrypt
-function decrypt(b64, projectId, salt) {
-    if (!b64) return "";
-    const key = projectId + salt;
-    const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
-    const keyBytes = new TextEncoder().encode(key);
-    const out = new Uint8Array(bytes.length);
-    for (let i = 0; i < bytes.length; i++) {
-        out[i] = bytes[i] ^ keyBytes[i % keyBytes.length];
+// ─── Plugin system ────────────────────────────────────────────────────────────
+
+const _plugins = [];
+const _listeners = {};
+
+export function use(plugin) {
+    if (typeof plugin.install === "function") plugin.install({ on, emit });
+    _plugins.push(plugin);
+}
+
+export function on(event, fn) {
+    if (!_listeners[event]) _listeners[event] = [];
+    _listeners[event].push(fn);
+}
+
+export function emit(event, data) {
+    (_listeners[event] || []).forEach(fn => fn(data));
+}
+
+// ─── Metrics ──────────────────────────────────────────────────────────────────
+
+export const metrics = { loads: 0, cacheHits: 0, errors: 0, totalTime: 0 };
+
+function recordMetric(name, value) {
+    if (name in metrics) metrics[name] += value;
+    emit("metric", { name, value, metrics: { ...metrics } });
+}
+
+// ─── AES-256-GCM decrypt ──────────────────────────────────────────────────────
+
+const _keyCache = new Map();
+
+async function deriveKey(projectId, salt) {
+    const k = projectId + salt;
+    if (_keyCache.has(k)) return _keyCache.get(k);
+    const enc = new TextEncoder();
+    const hashBuf = await crypto.subtle.digest("SHA-256", enc.encode(k));
+    const key = await crypto.subtle.importKey("raw", hashBuf, { name: "AES-GCM" }, false, ["decrypt"]);
+    _keyCache.set(k, key);
+    return key;
+}
+
+async function decryptChunk(encoded, projectId, salt) {
+    if (!encoded) return "";
+    try {
+        const parts = encoded.split(":");
+        if (parts.length !== 3) return "";
+        const [ivB64, tagB64, dataB64] = parts;
+        const iv   = Uint8Array.from(atob(ivB64),   c => c.charCodeAt(0));
+        const tag  = Uint8Array.from(atob(tagB64),  c => c.charCodeAt(0));
+        const data = Uint8Array.from(atob(dataB64), c => c.charCodeAt(0));
+        const combined = new Uint8Array(data.length + tag.length);
+        combined.set(data); combined.set(tag, data.length);
+        const key = await deriveKey(projectId, salt);
+        const dec = await crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, combined);
+        return new TextDecoder().decode(dec);
+    } catch (err) {
+        console.warn("[WebHanger] decryptChunk failed:", salt, err.message);
+        return "";
     }
-    return new TextDecoder().decode(out);
 }
 
 // ─── IndexedDB ────────────────────────────────────────────────────────────────
@@ -27,8 +77,8 @@ function decrypt(b64, projectId, salt) {
 function openIDB() {
     return new Promise((resolve, reject) => {
         const req = indexedDB.open(IDB_NAME, 1);
-        req.onupgradeneeded = (e) => e.target.result.createObjectStore(IDB_STORE);
-        req.onsuccess = (e) => resolve(e.target.result);
+        req.onupgradeneeded = e => e.target.result.createObjectStore(IDB_STORE);
+        req.onsuccess = e => resolve(e.target.result);
         req.onerror = () => reject(req.error);
     });
 }
@@ -36,8 +86,7 @@ function openIDB() {
 async function idbGet(key) {
     const db = await openIDB();
     return new Promise((resolve, reject) => {
-        const tx = db.transaction(IDB_STORE, "readonly");
-        const req = tx.objectStore(IDB_STORE).get(key);
+        const req = db.transaction(IDB_STORE, "readonly").objectStore(IDB_STORE).get(key);
         req.onsuccess = () => resolve(req.result);
         req.onerror = () => reject(req.error);
     });
@@ -46,179 +95,282 @@ async function idbGet(key) {
 async function idbSet(key, value) {
     const db = await openIDB();
     return new Promise((resolve, reject) => {
-        const tx = db.transaction(IDB_STORE, "readwrite");
-        const req = tx.objectStore(IDB_STORE).put(value, key);
+        const req = db.transaction(IDB_STORE, "readwrite").objectStore(IDB_STORE).put(value, key);
         req.onsuccess = () => resolve();
         req.onerror = () => reject(req.error);
     });
 }
 
-// ─── Cache ────────────────────────────────────────────────────────────────────
+// ─── Cache (stale-while-revalidate) ──────────────────────────────────────────
 
 async function cacheGet(key) {
-    try {
-        const ls = localStorage.getItem(LS_PREFIX + key);
-        if (ls) return ls;
-    } catch (_) {}
+    try { const v = localStorage.getItem(LS_PREFIX + key); if (v) return v; } catch (_) {}
     return await idbGet(key);
 }
 
 async function cacheSet(key, value) {
-    try {
-        if (value.length < SIZE_THRESHOLD) {
-            localStorage.setItem(LS_PREFIX + key, value);
-            return;
-        }
-    } catch (_) {}
+    try { if (value.length < SIZE_THRESHOLD) { localStorage.setItem(LS_PREFIX + key, value); return; } } catch (_) {}
     await idbSet(key, value);
 }
 
-// ─── Load external CDN assets ─────────────────────────────────────────────────
+async function cacheGetSWR(key, fetchFn) {
+    const cached = await cacheGet(key);
+    if (cached) {
+        recordMetric("cacheHits", 1);
+        fetchFn().then(fresh => { if (fresh && fresh !== cached) cacheSet(key, fresh); }).catch(() => {});
+        return { data: cached, source: "cache" };
+    }
+    const fresh = await fetchFn();
+    if (fresh) await cacheSet(key, fresh);
+    return { data: fresh, source: "cdn" };
+}
+
+// ─── Fetch with multi-CDN failover ────────────────────────────────────────────
+
+async function fetchComponent(cdnUrls, token, expires) {
+    const urls = Array.isArray(cdnUrls) ? cdnUrls : [cdnUrls];
+    let lastErr;
+    for (const url of urls) {
+        try {
+            const u = expires ? `${url}?token=${token}&expires=${expires}` : `${url}?token=${token}`;
+            const res = await fetch(u);
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            return await res.text();
+        } catch (err) {
+            console.warn(`[WebHanger] CDN failed (${url}): ${err.message}`);
+            lastErr = err;
+        }
+    }
+    throw new Error("All CDN endpoints failed: " + lastErr?.message);
+}
+
+// ─── CDN asset loader ─────────────────────────────────────────────────────────
 
 function loadAsset(asset) {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
         const existing = asset.type === "style"
             ? document.querySelector(`link[href="${asset.url}"]`)
             : document.querySelector(`script[src="${asset.url}"]`);
         if (existing) return resolve();
-
         if (asset.type === "style") {
-            const link = document.createElement("link");
-            link.rel = "stylesheet";
-            link.href = asset.url;
-            link.onload = resolve;
-            link.onerror = resolve;
-            document.head.appendChild(link);
+            const el = document.createElement("link");
+            el.rel = "stylesheet"; el.href = asset.url;
+            el.onload = resolve; el.onerror = resolve;
+            document.head.appendChild(el);
         } else {
-            const script = document.createElement("script");
-            script.src = asset.url;
-            if (asset.defer) script.defer = true;
-            if (asset.async) script.async = true;
-            script.onload = resolve;
-            script.onerror = resolve;
-            document.head.appendChild(script);
+            const el = document.createElement("script");
+            el.src = asset.url;
+            if (asset.defer) el.defer = true;
+            if (asset.async) el.async = true;
+            el.onload = resolve; el.onerror = resolve;
+            document.head.appendChild(el);
         }
     });
 }
 
 async function loadAssets(assets = []) {
-    for (const asset of assets) await loadAsset(asset);
+    for (const a of assets) await loadAsset(a);
 }
 
-// ─── Fetch ────────────────────────────────────────────────────────────────────
+// ─── Props resolution ─────────────────────────────────────────────────────────
 
-async function fetchComponent(cdnUrl, token, expires) {
-    const url = expires
-        ? `${cdnUrl}?token=${token}&expires=${expires}`
-        : `${cdnUrl}?token=${token}`;
-    const res = await fetch(url);
-    if (!res.ok) throw new Error(`Failed to fetch component: ${res.status}`);
-    return await res.text();
+export function resolveProps(schema, attrs) {
+    const props = {};
+    Object.keys(schema || {}).forEach(key => {
+        const def = schema[key];
+        props[key] = def.default !== undefined ? def.default : "";
+    });
+    Object.keys(attrs || {}).forEach(attrKey => {
+        const propKey = attrKey.replace(/^wh-/, "").replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+        let val = attrs[attrKey];
+        const schemaEntry = schema && schema[propKey];
+        if (schemaEntry && schemaEntry.type === "json") {
+            try { val = JSON.parse(val); } catch (_) {}
+        }
+        props[propKey] = val;
+    });
+    return props;
 }
 
-// ─── Inject ───────────────────────────────────────────────────────────────────
+export function applyProps(str, props) {
+    if (!str || !props) return str;
+    return str.replace(/\{\{wh\.([^}]+)\}\}/g, (_, key) =>
+        props[key] !== undefined ? String(props[key]) : ""
+    );
+}
+
+// ─── Inject component ─────────────────────────────────────────────────────────
 
-function injectComponent(encryptedPayload, projectId, targetSelector) {
-    const target = document.querySelector(targetSelector || "[data-wh]");
+async function injectComponent(payload, projectId, selector, options = {}) {
+    const { sandbox = false, allowedDomains, beforeMount, afterMount, props: userProps = {} } = options;
+    const target = document.querySelector(selector || "[data-wh]");
     if (!target) { console.warn("[WebHanger] No mount target found."); return; }
 
-    let payload;
-    try { payload = JSON.parse(encryptedPayload); }
-    catch (_) { console.error("[WebHanger] Invalid component payload."); return; }
+    let parsed;
+    try { parsed = JSON.parse(payload); } catch (_) { console.error("[WebHanger] Invalid payload."); return; }
 
-    const css = decrypt(payload.c, projectId, "::css");
-    if (css) {
-        const style = document.createElement("style");
-        style.textContent = css;
-        document.head.appendChild(style);
+    if (allowedDomains?.length) {
+        const host = window.location?.hostname || "";
+        const ok = allowedDomains.some(d => host === d || host.endsWith("." + d));
+        if (!ok) { emit("error", { reason: "domain_restricted" }); return; }
+    }
+
+    const css  = await decryptChunk(parsed.c, projectId, "::css");
+    let   html = await decryptChunk(parsed.h, projectId, "::html");
+    let   js   = await decryptChunk(parsed.j, projectId, "::js");
+
+    if (parsed.integrity && (html || js)) {
+        const enc = new TextEncoder();
+        const buf = await crypto.subtle.digest("SHA-256", enc.encode(html + css + js));
+        const hash = Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, "0")).join("");
+        if (hash !== parsed.integrity) {
+            console.error("[WebHanger] Integrity check failed.");
+            emit("error", { reason: "integrity_failed" });
+            return;
+        }
     }
 
-    const html = decrypt(payload.h, projectId, "::html");
-    if (html) target.innerHTML = html;
+    // Resolve props and apply {{wh.x}} placeholders
+    const resolvedProps = resolveProps(parsed.props, userProps);
+    html = applyProps(html, resolvedProps);
+    js   = applyProps(js,   resolvedProps);
+
+    if (typeof beforeMount === "function") beforeMount({ target, html, css });
+    emit("beforeMount", { target, selector });
+
+    if (sandbox) {
+        const shadow = target.attachShadow({ mode: "closed" });
+        if (css) { const s = document.createElement("style"); s.textContent = css; shadow.appendChild(s); }
+        if (html) { const d = document.createElement("div"); d.innerHTML = html; shadow.appendChild(d); }
+    } else {
+        if (css) { const s = document.createElement("style"); s.textContent = css; document.head.appendChild(s); }
+        if (html) target.innerHTML = html;
+    }
 
-    const js = decrypt(payload.j, projectId, "::js");
     if (js) {
-        const script = document.createElement("script");
-        script.textContent = js;
-        document.head.appendChild(script);
-        document.head.removeChild(script);
+        const s = document.createElement("script");
+        s.textContent = js;
+        document.head.appendChild(s);
+        document.head.removeChild(s);
     }
+
+    if (typeof afterMount === "function") afterMount({ target });
+    emit("afterMount", { target, selector });
 }
 
-// ─── Public API ───────────────────────────────────────────────────────────────
+// ─── Main load ────────────────────────────────────────────────────────────────
 
-/**
- * Load a WebHanger component into the DOM.
- *
- * @param {string} cdnUrl     - Full CDN URL of the component
- * @param {string} projectId  - Your WebHanger project ID (decrypt key)
- * @param {string} token      - HMAC signed token
- * @param {number} expires    - Unix timestamp expiry (0 = never)
- * @param {string} [selector] - CSS selector for mount target (default: [data-wh])
- */
-export async function load(cdnUrl, projectId, token, expires, selector = "[data-wh]") {
+export async function load(cdnUrl, projectId, token, expires, selector = "[data-wh]", onSignal = null, deps = [], options = {}) {
     if (!cdnUrl || !projectId || !token || expires === undefined || expires === null) {
-        console.error("[WebHanger] Missing required params: cdnUrl, projectId, token, expires");
-        return;
+        console.error("[WebHanger] Missing required params"); return;
     }
-
     if (expires !== 0 && Math.floor(Date.now() / 1000) > expires) {
-        console.warn("[WebHanger] Token expired.");
-        return;
+        console.warn("[WebHanger] Token expired."); return;
     }
 
-    const cacheKey = `${cdnUrl}@${expires}`;
+    const signal = (stage, detail = {}) => {
+        if (typeof onSignal === "function") onSignal({ stage, ...detail });
+        emit(stage, detail);
+    };
+
+    const preloader = (() => {
+        const t = document.querySelector(selector || "[data-wh]");
+        if (!t) return { show: () => {}, hide: () => {} };
+        const el = document.createElement("div");
+        el.setAttribute("data-wh-loader", "");
+        el.style.cssText = "display:flex;align-items:center;justify-content:center;padding:24px;width:100%;box-sizing:border-box;";
+        el.innerHTML = '<div style="width:28px;height:28px;border:3px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;animation:wh-spin 0.7s linear infinite;"></div><style>@keyframes wh-spin{to{transform:rotate(360deg);}}</style>';
+        return { show() { t.appendChild(el); }, hide() { el.parentNode?.removeChild(el); } };
+    })();
+
+    const start = performance.now();
+    signal("start", { cdnUrl, selector });
+    preloader.show();
+    recordMetric("loads", 1);
 
+    const cacheKey = `${cdnUrl}@${expires}`;
     try {
-        let payload = await cacheGet(cacheKey);
-        if (!payload) {
-            payload = await fetchComponent(cdnUrl, token, expires);
-            await cacheSet(cacheKey, payload);
-        }
+        signal("fetching");
+        const { data: payload, source } = await cacheGetSWR(cacheKey, () => fetchComponent(cdnUrl, token, expires));
 
-        try {
-            const parsed = JSON.parse(payload);
-            if (parsed.assets && parsed.assets.length) await loadAssets(parsed.assets);
-        } catch (_) {}
+        let parsed;
+        try { parsed = JSON.parse(payload); } catch (_) { parsed = {}; }
 
-        injectComponent(payload, projectId, selector);
+        if (parsed.assets?.length) { signal("assets", { count: parsed.assets.length }); await loadAssets(parsed.assets); }
+
+        const allDeps = [...deps, ...(parsed.dependencies || [])];
+        if (allDeps.length) signal("deps", { count: allDeps.length });
+
+        signal("injecting");
+        preloader.hide();
+        await injectComponent(payload, projectId, selector, options);
+
+        const elapsed = Math.round(performance.now() - start);
+        recordMetric("totalTime", elapsed);
+        signal("done", { time: elapsed, source });
+        emit("load", { cdnUrl, time: elapsed, source, selector });
     } catch (err) {
+        preloader.hide();
+        recordMetric("errors", 1);
+        signal("error", { message: err.message });
+        if (typeof options.onError === "function") options.onError(err);
         console.error("[WebHanger] Load failed:", err.message);
     }
 }
 
-/**
- * Clear cached components from localStorage + IndexedDB.
- */
-export async function clearCache() {
-    // localStorage
-    Object.keys(localStorage)
-        .filter(k => k.startsWith(LS_PREFIX))
-        .forEach(k => localStorage.removeItem(k));
+// ─── Initialize (manifest-based) ─────────────────────────────────────────────
 
-    // IndexedDB
-    try {
-        const db = await openIDB();
-        const tx = db.transaction(IDB_STORE, "readwrite");
-        tx.objectStore(IDB_STORE).clear();
-    } catch (_) {}
+let _manifest = null;
+let _manifestUrl = "./wh-manifest.json";
 
-    // Service worker caches
-    if ("caches" in window) {
-        const keys = await caches.keys();
-        await Promise.all(keys.map(k => caches.delete(k)));
-    }
+export async function initialize(manifestUrl = "./wh-manifest.json") {
+    _manifestUrl = manifestUrl;
+    const res = await fetch(manifestUrl);
+    _manifest = await res.json();
+    document.querySelectorAll("wh-component[name]").forEach(el => el._load?.());
+}
+
+// ─── Service Worker ───────────────────────────────────────────────────────────
 
-    // Unregister service workers
-    if ("serviceWorker" in navigator) {
-        const regs = await navigator.serviceWorker.getRegistrations();
-        await Promise.all(regs.map(r => r.unregister()));
+export async function registerSW(swUrl = "/webhanger.sw.js") {
+    if (!("serviceWorker" in navigator)) return;
+    try {
+        const reg = await navigator.serviceWorker.register(swUrl);
+        emit("sw", { registered: true, scope: reg.scope });
+    } catch (err) {
+        console.warn("[WebHanger] SW registration failed:", err.message);
     }
+}
 
-    // sessionStorage
-    Object.keys(sessionStorage)
-        .filter(k => k.startsWith(LS_PREFIX))
-        .forEach(k => sessionStorage.removeItem(k));
+export async function setOfflinePage(html = "", css = "") {
+    if (!("serviceWorker" in navigator)) return;
+    const reg = await navigator.serviceWorker.ready;
+    reg.active?.postMessage({ type: "SET_OFFLINE_PAGE", html, css });
 }
 
-export const version = VERSION;
+// ─── Hard flush ───────────────────────────────────────────────────────────────
+
+export async function clearCache() {
+    Object.keys(localStorage).filter(k => k.startsWith(LS_PREFIX)).forEach(k => localStorage.removeItem(k));
+    try { (await openIDB()).transaction(IDB_STORE, "readwrite").objectStore(IDB_STORE).clear(); } catch (_) {}
+    if ("caches" in window) { const keys = await caches.keys(); await Promise.all(keys.map(k => caches.delete(k))); }
+    if ("serviceWorker" in navigator) { const regs = await navigator.serviceWorker.getRegistrations(); await Promise.all(regs.map(r => r.unregister())); }
+    Object.keys(sessionStorage).filter(k => k.startsWith(LS_PREFIX)).forEach(k => sessionStorage.removeItem(k));
+}
+
+// ─── WebGPU ───────────────────────────────────────────────────────────────────
+
+export const gpu = { supported: false, adapter: null, device: null };
+
+(async () => {
+    if (!("gpu" in navigator)) return;
+    try {
+        const adapter = await navigator.gpu.requestAdapter();
+        if (!adapter) return;
+        const device = await adapter.requestDevice();
+        gpu.supported = true; gpu.adapter = adapter; gpu.device = device;
+        emit("gpu", { supported: true, adapter });
+    } catch (_) {}
+})();
+
+export { VERSION as version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webhanger-front",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "WebHanger browser SDK — load encrypted UI components from CDN",
   "main": "index.js",
   "module": "index.js",