jops-core 1.0.15 → 1.1.0

package/lib/jops-core.min.js

@@ -1 +1 @@
-var R=Object.defineProperty;var d=(o,t)=>R(o,"name",{value:t,configurable:!0});var v=new URL(import.meta.url).origin!==location.origin,w=new Map;function f(o){if(!o)return o;if(v){if(o.startsWith("/"))return"."+o}else if(o.startsWith("./"))return o.slice(1);return o}d(f,"normalizePath");(()=>{console.log("JOPS initialized");let o=document.querySelector("script[data-app]"),t=o?.dataset.app??"./src/App.js";import(new URL(f(t),document.baseURI).href).then(e=>new e.default).catch(e=>console.error("JOPS: App.js not found or failed to load",e)),o?.dataset.nativeBack!=="off"&&V()})();function V(){document.addEventListener("deviceready",()=>{let o=window.Capacitor;o?.isNativePlatform?.()&&o.getPlatform()==="android"&&!o.isPluginAvailable("App")&&console.warn("JOPS: install @capacitor/app so the Android back button navigates instead of closing the app.");let t=0;document.addEventListener("backbutton",()=>{let e=Date.now();if(e-t<300)return;t=e;let s=m.singleton();s?.canGoBack()?s.back():!s&&window.navigation?.canGoBack?history.back():navigator.app.exitApp()})},{once:!0})}d(V,"installNativeBackButton");var p=class{static{d(this,"RawHTML")}constructor(t){this.html=t}},E=d(o=>new p(o),"raw");function P(o,...t){return o.reduce((e,s,i)=>{if(i>=t.length)return e+s;let n=t[i];return n==null?e+s:n instanceof p?e+s+n.html:e+s+String(n).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")},"")}d(P,"layout");var y=class{static{d(this,"Element")}constructor(t,e){this.element=t?.id===e?t:t.querySelector(`#${e}`)}set(t){this.element.innerHTML=t}value(){return this.element.innerHTML}},b=class o{static{d(this,"View")}#t=!1;#e=!1;constructor(t){this.loadLayout(t),this.subViews=[]}async loadLayout(t){if(t)if(t.endsWith(".js"))try{let e=await import(new URL(f(t),document.baseURI).href);this.layout=e.default}catch(e){console.error("JOPS: failed to load layout:",t,e)}else if(t.endsWith(".html")||t.endsWith(".htm"))try{let e=new URL(f(t),document.baseURI).href;if(w.has(e))this.layout=w.get(e);else{let s=await fetch(e);if(!s.ok)throw new Error(`HTTP ${s.status}`);let i=await s.text();w.set(e,i),this.layout=i}}catch(e){console.error("JOPS: failed to load layout:",t,e)}else this.layout=t}setStyle(t){if(t)if(this.style=t,t.endsWith(".css")){if(document.querySelector(`link[href="${t}"]`))return;let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)}else{if(document.querySelector(`style[data-jops="${t}"]`))return;let e=document.createElement("style");e.setAttribute("data-jops",t),e.textContent=t,document.head.appendChild(e)}}get(t){return new y(this.domNode,t)}bindEvents(){if(!this.domNode)return;let t=[...this.domNode.querySelectorAll("[jops-event-bind], [type='jops-event-bind']")];(this.domNode.hasAttribute("jops-event-bind")||this.domNode.getAttribute("type")==="jops-event-bind")&&t.unshift(this.domNode);for(let e of t)for(let s of e.attributes){if(!s.name.startsWith("on"))continue;let i=s.value.trim();typeof this[i]=="function"&&(e[s.name]=n=>this[i](n))}}inflate(){if(!this.layout||this.#t)return;this.#t=!0;let t=document.createElement("template");t.innerHTML=this.layout;let s=t.content.cloneNode(!0).firstElementChild;this.domNode=s}async addSubView(t,e){this.subViews.push(e),e.domNode||(await e.loadLayout(),e.inflate()),this.domNode.querySelector(`#${t}`).appendChild(e.domNode),await e?.onLayout?.(),await e?.onResume?.(),e?.bindEvents?.()}hide(){this.domNode.style.display="none"}show(){this.domNode.style.display=""}find(t){let e=[];for(let s of this.subViews)t(s)&&e.push(s),e.push(...s.find?.(t)??[]);return e}destroy(){this.subViews.forEach(t=>t.destroy?.()),this.subViews=[],this.domNode?.remove(),this.domNode=null,this.layout=null}removeSubView(t){t.destroy?.(),this.subViews=this.subViews.filter(e=>e!==t)}async insertSubView(t,e){t.domNode||(await t.loadLayout(),t.inflate());let s=this.domNode.children[e]??null;this.domNode.insertBefore(t.domNode,s),this.subViews.splice(e,0,t),await t?.onLayout?.(),await t?.onResume?.(),t?.bindEvents?.()}async render(){if(!this.layout||this.#e)return;this.#e=!0;let t=this.domNode??document.body;t===document.body&&(t.innerHTML=this.layout);let e=Array.from(t.querySelectorAll("[jops], [type='jops']")).filter(s=>s.tagName==="ROUTER"||!s.closest("router")||s.closest("router")===t);e.length!==0&&await Promise.all(e.map(async s=>{if(s.tagName==="ROUTER"){let c=new m(s);await c.render(),await c.onLayout();return}let i=s.getAttribute("layout"),n=s.getAttribute("src");if(!n&&!i)return;let r;if(n){let l=(await import(new URL(f(n),document.baseURI).href)).default;r=new l}else r=new o;this.subViews.push(r),await r.loadLayout(i);let a=document.createElement("template");a.innerHTML=r.layout??"";let h=a.content.cloneNode(!0);if(s.children.length>0){let c=h.firstElementChild??h;Array.from(s.children).forEach(l=>c.appendChild(l))}let u=h.firstElementChild;r.routePath=s.getAttribute("path"),s.replaceWith(h),r.domNode=u,await r.render(),await r?.onLayout?.(),await r?.onResume?.(),r?.bindEvents?.()}))}},_=class o{static{d(this,"EventBus")}static#t={};static subscribe(t,e){o.#t[t]||(o.#t[t]=[]),o.#t[t].push(e)}static send(t,e){o.#t[t]?.forEach(s=>s(e))}static unsubscribe(t,e){o.#t[t]&&(o.#t[t]=o.#t[t].filter(s=>s!==e))}},S=class o{static{d(this,"Store")}static#t=null;static singleton(){return o.#t||(o.#t=new o),o.#t}constructor(){this._state={}}get(t){return t.split(".").reduce((e,s)=>e?.[s],this._state)}set(t,e){let s=t.split("."),i=s.pop(),n=s.reduce((r,a)=>(r[a]||(r[a]={}),r[a]),this._state);n[i]=e}clear(){this._state={}}},m=class o extends b{static{d(this,"Router")}static#t=null;static singleton(){return o.#t}constructor(t){super(),o.#t=this,this.rootNode=t.parentNode,this.routerDomNode=t,this.domNode=t,this.layout=t.innerHTML,this.animation=t.getAttribute("animation")??"none"}async onLayout(){let t=document.createDocumentFragment();for(;this.routerDomNode.firstChild;)t.appendChild(this.routerDomNode.firstChild);this.routerDomNode.replaceWith(t),this.domNode=this.rootNode,this.initRouter()}initRouter(){this.routes={};for(let r of this.subViews)if(r.routePath){let a=r.routePath.slice(1).split("?")[0];this.routes[a]=r}this._navStack=[],this._baseView=null;for(let r of Object.values(this.routes))r.domNode.hidden=!0;let t=Object.keys(this.routes)[0],e=window.location.hash.slice(1),s=e.split("?")[0],i=s&&this.routes[s]?e:t;this._idx=history.state?.jopsIdx??0,history.replaceState({...history.state,jopsIdx:this._idx},"","#"+i);let n=d(()=>this._onHistoryChange(),"onHistoryChange");window.addEventListener("popstate",n),window.addEventListener("hashchange",n),this._switchTo(i)}_onHistoryChange(){let t=history.state?.jopsIdx;if(t===this._idx)return;if(t===void 0){this._idx+=1,history.replaceState({...history.state,jopsIdx:this._idx},"",location.href),this._onForward();return}let e=t<this._idx;this._idx=t,e?this._onBack():this._onForward()}_onBack(){if(this._navStack.length>0){let e=this._navStack.pop(),s=this._navStack.at(-1)??this._baseView;e?.onBackPressed?.(),this._animateTransition(e,s,"back").then(()=>e.destroy());return}let t=window.location.hash.slice(1).split("?")[0];if(!this.routes[t]){history.back();return}this._currentView?.onBackPressed?.(),this._switchToHash()}_onForward(){this._navStack.length>0&&(this._navStack.forEach(t=>t.destroy?.()),this._navStack=[],this._baseView=null),this._switchToHash()}_switchToHash(){let t=window.location.hash.slice(1),e=t.split("?")[0];e&&this.routes[e]&&this._switchTo(t)}async _animateTransition(t,e,s){this.animation==="slide"?await this._slideTransition(t,e,s):this.animation==="fade"?await this._fadeTransition(t,e):(t.domNode.hidden=!0,e.domNode.hidden=!1,this._currentView=e,e?.onResume?.())}async _slideTransition(t,e,s){let i=this.domNode,n=s==="forward",r=i.getBoundingClientRect(),a=t.domNode.getBoundingClientRect(),h=a.left-r.left,u=a.top-r.top,c=a.width,l=i.offsetWidth-h,N=`position:absolute;left:${h}px;top:${u}px;width:${c}px`;i.style.cssText=`position:relative;overflow:hidden;height:${i.offsetHeight}px`,t.domNode.style.cssText=`${N};z-index:${n?1:2}`,t.domNode.hidden=!1,e.domNode.style.cssText=`${N};z-index:${n?2:1}`,e.domNode.hidden=!1;let T=n?e.domNode:t.domNode,g=n?`${l}px`:"0px",L=n?"0px":`${l}px`,x=T.animate([{transform:`translateX(${g})`},{transform:`translateX(${L})`}],{duration:300,easing:"ease",fill:"forwards"});await x.finished,x.cancel(),t.domNode.hidden=!0,t.domNode.style.cssText="",e.domNode.style.cssText="",i.style.cssText="",this._currentView=e,e?.onResume?.()}async _fadeTransition(t,e){let s=this.domNode,i=s.getBoundingClientRect(),n=t.domNode.getBoundingClientRect(),r=n.left-i.left,a=n.top-i.top,h=n.width,u=`position:absolute;left:${r}px;top:${a}px;width:${h}px`;s.style.cssText=`position:relative;overflow:hidden;height:${s.offsetHeight}px`,t.domNode.style.cssText=u,t.domNode.hidden=!1,e.domNode.style.cssText=u,e.domNode.hidden=!1;let c=t.domNode.animate([{opacity:1},{opacity:0}],{duration:450,easing:"ease",fill:"forwards"}),l=e.domNode.animate([{opacity:0},{opacity:1}],{duration:450,easing:"ease",fill:"forwards"});await Promise.all([c.finished,l.finished]),c.cancel(),l.cancel(),t.domNode.hidden=!0,t.domNode.style.cssText="",e.domNode.style.cssText="",s.style.cssText="",this._currentView=e,e?.onResume?.()}_switchTo(t){let e=t.split("?")[0];for(let[s,i]of Object.entries(this.routes)){let n=s===e;i.domNode.hidden=!n,n&&(this._currentView=i,i?.onResume?.())}}back(){history.back()}canGoBack(){return this._idx>0}getParams(){let t=window.location.hash.split("?")[1];return t?Object.fromEntries(new URLSearchParams(t)):{}}async navigate(t,e){let[s,i]=t.replace(/^\//,"").split("?"),n=s,r=e??this.routes[n]?.constructor;if(!r){console.error(`JOPS Router: no class found for path "${t}"`);return}this._navStack.length===0&&(this._baseView=this._currentView);let a=new r;await a.loadLayout(),a.inflate(),this.domNode.appendChild(a.domNode),history.pushState({jopsNav:!0,jopsIdx:++this._idx},"","#"+n+(i?"?"+i:"")),await a.onLayout?.(),await a.onResume?.(),a.bindEvents?.(),this._navStack.push(a),this._animateTransition(this._currentView,a,"forward")}async replace(t,e){this._navStack.forEach(a=>a.destroy?.()),this._navStack=[];let[s,i]=t.replace(/^\//,"").split("?"),n=s,r="#"+n+(i?"?"+i:"");if(this.routes[n])history.replaceState({jopsIdx:this._idx},"",r),this._switchTo(n);else if(e){let a=new e;await a.loadLayout(),a.inflate(),this.domNode.appendChild(a.domNode),await a.onLayout?.(),await a.onResume?.(),a.bindEvents?.(),this._currentView&&(this._currentView.domNode.hidden=!0),this._currentView=a,history.replaceState({jopsIdx:this._idx},"",r)}else console.error(`JOPS Router: no instance or class found for path "${t}"`)}},k=class{static{d(this,"Thread")}#t=null;run(t){}onMessage(t){}start(t){if(typeof Worker>"u"){console.warn("JOPS Thread: Web Workers are not supported in this environment.");return}let e=this.run.toString();!e.startsWith("function")&&!e.startsWith("(")&&!e.startsWith("async")&&(e="function "+e);let s=new Blob([`const run = ${e};`,"self.onmessage = (e) => { run(e.data); };"],{type:"application/javascript"}),i=URL.createObjectURL(s);this.#t=new Worker(i),URL.revokeObjectURL(i),this.#t.onmessage=n=>this.onMessage(n),this.#t.postMessage(t)}terminate(){if(!this.#t){console.warn("JOPS Thread: no active worker to terminate.");return}this.#t.terminate(),this.#t=null}};export{_ as EventBus,m as Router,S as Store,k as Thread,b as View,P as layout,E as raw};
+var W=Object.defineProperty;var h=(o,t)=>W(o,"name",{value:t,configurable:!0});var B=new URL(import.meta.url).origin!==location.origin,k=new Map;function b(o){if(!o)return o;if(B){if(o.startsWith("/"))return"."+o}else if(o.startsWith("./"))return o.slice(1);return o}h(b,"normalizePath");var u=null,S=!1,m=0,v=new Set,_=null,I=new Set(["jops","src","layout","path","jops-event-bind"]);function H(o){let t={};for(let{name:e,value:s}of o.attributes)I.has(e)||e==="type"&&s==="jops"||(t[e.replace(/-([a-z])/g,(n,i)=>i.toUpperCase())]=s);return t}h(H,"tagProps");var j=new Set,O=!1;(()=>{if(console.log("JOPS initialized"),Array.from(document.querySelectorAll("script[src]")).find(s=>s.src===import.meta.url)?.dataset.host!==void 0){S=!0,window.JOPS={mount:D,unmount:V},window.dispatchEvent(new Event("jops:ready"));return}let t=document.querySelector("script[data-app]"),e=t?.dataset.app??"./src/App.js";t?.dataset.root&&(u=document.getElementById(t.dataset.root),u||console.warn(`JOPS: data-root element #${t.dataset.root} not found, rendering into <body>`)),import(new URL(b(e),document.baseURI).href).then(s=>new s.default).catch(s=>console.error("JOPS: App.js not found or failed to load",s)),t?.dataset.nativeBack!=="off"&&K()})();var T=!1,N=!1,C={},$={};function M(){if(!N){N=!0;for(let o of["pushState","replaceState"]){let t=history[o],e=h(function(...s){let n=t.apply(this,s);return T||queueMicrotask(()=>y.singleton()?._onHostNavigation()),n},"wrapper");C[o]=t,$[o]=e,history[o]=e}}}h(M,"installHostHistoryHook");function q(){if(!N)return;let o=!0;for(let t of["pushState","replaceState"])history[t]===$[t]?history[t]=C[t]:o=!1;o&&(N=!1)}h(q,"uninstallHostHistoryHook");async function D({app:o,root:t}){if(!(t instanceof HTMLElement))throw new TypeError("JOPS mount(): root must be an HTMLElement");u=t,M();let e=m,s=await import(new URL(b(o),document.baseURI).href);return e!==m?null:new s.default}h(D,"mount");function V(){m+=1,y.singleton()?.destroy(),v.forEach(o=>o.destroy()),v.clear(),u&&(u.innerHTML=""),u=null,P.singleton().clear(),L.clear(),q()}h(V,"unmount");function K(){document.addEventListener("deviceready",()=>{let o=window.Capacitor;o?.isNativePlatform?.()&&o.getPlatform()==="android"&&!o.isPluginAvailable("App")&&console.warn("JOPS: install @capacitor/app so the Android back button navigates instead of closing the app.");let t=0;document.addEventListener("backbutton",()=>{let e=Date.now();if(e-t<300)return;t=e;let s=y.singleton();s?.canGoBack()?s.back():!s&&window.navigation?.canGoBack?history.back():navigator.app.exitApp()})},{once:!0})}h(K,"installNativeBackButton");var x=class{static{h(this,"RawHTML")}constructor(t){this.html=t}},z=h(o=>new x(o),"raw");function G(o,...t){return o.reduce((e,s,n)=>{if(n>=t.length)return e+s;let i=t[n];return i==null?e+s:i instanceof x?e+s+i.html:e+s+String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")},"")}h(G,"layout");var g=class o{static{h(this,"Element")}constructor(t,e){this.id=e,this.inert=t.length===0,this.element=null;for(let s of t)if(this.element=s.id===e?s:s.querySelector(`[id="${CSS.escape(e)}"]`),this.element)break}static from(t,e){let s=new o([],e);return s.inert=!1,s.element=t,s}set(t){return this.element?(this.element.innerHTML=t,this):this.#t("set")}attr(t,e){return this.element?(e==null?this.element.removeAttribute(t):this.element.setAttribute(t,String(e)),this):this.#t("attr")}value(){return this.element?this.element.innerHTML:(this.#t("value"),"")}#t(t){return this.inert||console.warn(`JOPS: ${t}() on #${this.id}: no such element in the view`),this}},R=class o{static{h(this,"View")}#t=!1;#e=!1;#o=!1;#s=null;#i;constructor(t,e){this._generation=m;let s=_&&_.ClassDef===new.target?_.props:null;this.#i=Object.freeze({...e??s??{}}),this.loadLayout(t),this.subViews=[]}get props(){return this.#i}async loadLayout(t){if(this.#s)return this.#s;if(!(!t||this.#o))return this.#s=this.#n(t).finally(()=>{this.#o=this.layout!=null,this.#s=null}),this.#s}async#n(t){if(t.endsWith(".js"))try{let e=await import(new URL(b(t),document.baseURI).href);this.layout=e.default}catch(e){console.error("JOPS: failed to load layout:",t,e)}else if(t.endsWith(".html")||t.endsWith(".htm"))try{let e=new URL(b(t),document.baseURI).href;if(k.has(e))this.layout=k.get(e);else{let s=await fetch(e);if(!s.ok)throw new Error(`HTTP ${s.status}`);let n=await s.text();k.set(e,n),this.layout=n}}catch(e){console.error("JOPS: failed to load layout:",t,e)}else this.layout=t}setStyle(t){if(t){if(this.style=t,S){O||(O=!0,console.info("JOPS: setStyle() is ignored in hosted mode; the host provides the CSS."));return}if(t.endsWith(".css")){if(document.querySelector(`link[href="${CSS.escape(t)}"]`))return;let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)}else{if(j.has(t))return;j.add(t);let e=document.createElement("style");e.setAttribute("data-jops",""),e.textContent=t,document.head.appendChild(e)}}}get(t){return new g(this._roots(),t)}_roots(){return this.domNodes??(this.domNode?[this.domNode]:[])}_setHidden(t){for(let e of this._roots())e.hidden=t}bindEvents(){let t=this._roots().flatMap(e=>[...e.hasAttribute("jops-event-bind")||e.getAttribute("type")==="jops-event-bind"?[e]:[],...e.querySelectorAll("[jops-event-bind], [type='jops-event-bind']")]);for(let e of t)for(let s of e.attributes){if(!s.name.startsWith("on"))continue;let n=s.value.trim();typeof this[n]=="function"&&(e[s.name]=i=>this[n](i))}}inflate(){if(!this.layout||this.#t)return;this.#t=!0;let t=document.createElement("template");t.innerHTML=this.layout;let e=t.content.cloneNode(!0);this.domNodes=[...e.children],this.domNode=this.domNodes[0]}async addSubView(t,e){if(!this.domNode)return;if(e._destroyed){console.warn("JOPS: addSubView(): this view was destroyed; create a new instance");return}this.subViews.push(e),e.domNode||(await e.loadLayout(),e.inflate());let s=this.domNode?.querySelector(`#${t}`);if(!e.domNode||!s){this.subViews=this.subViews.filter(n=>n!==e),this.domNode&&console.warn(e.domNode?`JOPS: addSubView(): no element #${t} in the view`:"JOPS: addSubView(): the view has no layout");return}s.append(...e._roots()),await e?.onLayout?.(),await e?.onResume?.(),e?.bindEvents?.()}hide(){for(let t of this._roots())t.style.display="none"}show(){for(let t of this._roots())t.style.display=""}find(t){if(typeof t=="string")return this._roots().flatMap(s=>[...s.id===t?[s]:[],...s.querySelectorAll(`[id="${CSS.escape(t)}"]`)]).map(s=>g.from(s,t));let e=[];for(let s of this.subViews)t(s)&&e.push(s),e.push(...s.find?.(t)??[]);return e}destroy(){this._destroyed=!0,L.unsubscribeAll(this),this.subViews.forEach(e=>e.destroy?.()),this.subViews=[],this._borrowedDomNode||this.domNode&&(this.domNode===u||this.domNode===document.body)?this.domNode.innerHTML="":this._roots().forEach(e=>e.remove()),this.domNode=null,this.domNodes=null,this.layout=null}removeSubView(t){t.destroy?.(),this.subViews=this.subViews.filter(e=>e!==t)}async insertSubView(t,e){if(!this.domNode)return;if(t._destroyed){console.warn("JOPS: insertSubView(): this view was destroyed; create a new instance");return}if(t.domNode||(await t.loadLayout(),t.inflate()),!this.domNode)return;if(!t.domNode){console.warn("JOPS: insertSubView(): the view has no layout");return}let s=this.domNode.children[e]??null;for(let n of t._roots())this.domNode.insertBefore(n,s);this.subViews.splice(e,0,t),await t?.onLayout?.(),await t?.onResume?.(),t?.bindEvents?.()}async _startSubView(t){await t?.onResume?.(),t?.bindEvents?.()}async render(){if(!this.layout||this.#e||this._generation!==m)return;let t=!this.domNode;if(t&&S&&!u)return;this.#e=!0;let e=this.domNode??u??document.body;t&&(e.innerHTML=this.layout,v.add(this),this.domNode=e,this._borrowedDomNode=!0);let s=h(()=>this._generation!==m,"ended"),n=Array.from(e.querySelectorAll("[jops], [type='jops']")).filter(i=>i.tagName==="ROUTER"||!i.closest("router")||i.closest("router")===e);if(n.length>0&&await this.#r(n,e,s),!s()&&t){if(await this.onLayout?.(),s()||(await this.onResume?.(),s()))return;this.bindEvents()}}async#r(t,e,s){let n=new Array(t.length);await Promise.all(t.map(async(i,a)=>{if(i.tagName==="ROUTER"){let l=new y(i);if(await l.render(),s())return;await l.onLayout();return}let r=i.getAttribute("layout"),f=i.getAttribute("src");if(!f&&!r)return;let c;if(f){let l=await import(new URL(b(f),document.baseURI).href);if(s())return;let w=l.default;_={ClassDef:w,props:H(i)};try{c=new w}finally{_=null}}else c=new o(void 0,H(i));if(n[a]=c,await c.loadLayout(r),s())return;let p=document.createElement("template");p.innerHTML=c.layout??"";let d=p.content.cloneNode(!0);if(i.children.length>0){let l=d.firstElementChild??d;Array.from(i.children).forEach(w=>l.appendChild(w))}c.domNodes=[...d.children],c.routePath=i.getAttribute("path"),i.replaceWith(d),c.domNode=c.domNodes[0],await c.render(),!s()&&(await c?.onLayout?.(),!s()&&await this._startSubView(c))})),!s()&&this.subViews.push(...n.filter(Boolean))}},L=class o{static{h(this,"EventBus")}static#t={};static subscribe(...t){let[e,s,n]=typeof t[0]=="string"?[null,...t]:t;(o.#t[s]??=[]).push({callback:n,owner:e})}static send(t,e){let s=o.#t[t];if(s){o.#t[t]=s.filter(n=>!n.owner?._destroyed);for(let n of[...o.#t[t]])n.callback(e)}}static unsubscribe(t,e){o.#t[t]&&(o.#t[t]=o.#t[t].filter(s=>s.callback!==e))}static unsubscribeAll(t){for(let e of Object.keys(o.#t))o.#t[e]=o.#t[e].filter(s=>s.owner!==t)}static clear(){o.#t={}}},P=class o{static{h(this,"Store")}static#t=null;static singleton(){return o.#t||(o.#t=new o),o.#t}constructor(){this._state={}}get(t){return t.split(".").reduce((e,s)=>e?.[s],this._state)}set(t,e){let s=t.split("."),n=s.pop(),i=s.reduce((a,r)=>(a[r]||(a[r]={}),a[r]),this._state);i[n]=e}clear(){this._state={}}},y=class o extends R{static{h(this,"Router")}static#t=null;static#e=!1;static singleton(){return o.#t}constructor(t){super(),o.#t=this,this.rootNode=t.parentNode,this.routerDomNode=t,this.domNode=t,this.layout=t.innerHTML,this.animation=t.getAttribute("animation")??"none"}async onLayout(){let t=document.createDocumentFragment();for(;this.routerDomNode.firstChild;)t.appendChild(this.routerDomNode.firstChild);this.routerDomNode.replaceWith(t),this.domNode=this.rootNode,this.initRouter()}async _startSubView(t){t?.bindEvents?.()}initRouter(){if(this._generation!==m)return;this.routes={};for(let i of this.subViews)if(i.routePath){let a=i.routePath.slice(1).split("?")[0];this.routes[a]=i}this._navStack=[],this._baseView=null;for(let i of Object.values(this.routes))i._setHidden(!0);let t=Object.keys(this.routes)[0];this._defaultPath=t,this._pathname=location.pathname;let e=window.location.hash.slice(1),s=e.split("?")[0],n=s&&this.routes[s]?e:t;this._idx=history.state?.jopsIdx??0,this._history("replaceState",{...history.state,jopsIdx:this._idx},"#"+n),this._historyListener=()=>this._onHistoryChange(),window.addEventListener("popstate",this._historyListener),window.addEventListener("hashchange",this._historyListener),this._switchTo(n)}_onHistoryChange(){if(this._destroyed)return;if(location.pathname!==this._pathname){S&&V();return}let t=history.state?.jopsIdx;if(t===this._idx)return;if(t===void 0){this._idx+=1,this._history("replaceState",{...history.state,jopsIdx:this._idx},location.href),this._onForward();return}let e=t<this._idx;this._idx=t,e?this._onBack():this._onForward()}_onBack(){if(this._navStack.length>0){let e=this._navStack.pop(),s=this._navStack.at(-1)??this._baseView;e?.onBackPressed?.(),this._animateTransition(e,s,"back").then(()=>e.destroy());return}let t=window.location.hash.slice(1).split("?")[0];if(!this.routes[t]){history.back();return}this._currentView?.onBackPressed?.(),this._switchToHash()}_onForward(){this._closeStack(),this._switchToHash()}_closeStack(){this._navStack.length!==0&&(this._navStack.includes(this._currentView)&&(this._currentView=null),this._navStack.forEach(t=>t.destroy?.()),this._navStack=[],this._baseView=null)}_pauseCurrent(t){this._currentView&&this._currentView!==t&&this._currentView.onPause?.()}_switchToHash(){let t=window.location.hash.slice(1),e=t.split("?")[0];e?this.routes[e]&&this._switchTo(t):this._switchToDefault()}_switchToDefault(){this._history("replaceState",{...history.state,jopsIdx:this._idx},"#"+this._defaultPath),this._switchTo(this._defaultPath)}destroy(){this._destroyed||(this._destroyed=!0,this._historyListener&&(window.removeEventListener("popstate",this._historyListener),window.removeEventListener("hashchange",this._historyListener),this._historyListener=null),this._navStack?.forEach(t=>t.destroy?.()),this._navStack=[],this._baseView=null,this._currentView=null,this.routes={},o.#t===this&&(o.#t=null),super.destroy())}_history(t,e,s){T=!0;try{history[t](e,"",s)}finally{T=!1}}_onHostNavigation(){if(this._destroyed||!this.routes)return;if(location.pathname!==this._pathname){V();return}let t=location.hash.slice(1).split("?")[0],e=history.state?.jopsIdx===void 0;t?e&&this.routes[t]&&(this._idx+=1,this._history("replaceState",{...history.state,jopsIdx:this._idx},location.href),this._onForward()):(e&&(this._idx+=1),this._closeStack(),this._switchToDefault())}async _animateTransition(t,e,s){let n=s==="forward",i=t._roots().length>1||e._roots().length>1;i&&this.animation!=="none"&&!o.#e&&(o.#e=!0,console.info("JOPS: Router animations need single-root views; views with several root elements switch without animation.")),this.animation==="slide"&&!i?await this._slideTransition(t,e,s):this.animation==="fade"&&!i?await this._fadeTransition(t,e):(t._setHidden(!0),e._setHidden(!1),this._currentView=e),n||e?.onResume?.()}async _slideTransition(t,e,s){let n=this.domNode,i=s==="forward",a=n.getBoundingClientRect(),r=t.domNode.getBoundingClientRect(),f=r.left-a.left,c=r.top-a.top,p=r.width,d=n.offsetWidth-f,l=`position:absolute;left:${f}px;top:${c}px;width:${p}px`;n.style.cssText=`position:relative;overflow:hidden;height:${n.offsetHeight}px`,t.domNode.style.cssText=`${l};z-index:${i?1:2}`,t.domNode.hidden=!1,e.domNode.style.cssText=`${l};z-index:${i?2:1}`,e.domNode.hidden=!1;let w=i?e.domNode:t.domNode,J=i?`${d}px`:"0px",U=i?"0px":`${d}px`,E=w.animate([{transform:`translateX(${J})`},{transform:`translateX(${U})`}],{duration:300,easing:"ease",fill:"forwards"});await E.finished,E.cancel(),t.domNode.hidden=!0,t.domNode.style.cssText="",e.domNode.style.cssText="",n.style.cssText="",this._currentView=e}async _fadeTransition(t,e){let s=this.domNode,n=s.getBoundingClientRect(),i=t.domNode.getBoundingClientRect(),a=i.left-n.left,r=i.top-n.top,f=i.width,c=`position:absolute;left:${a}px;top:${r}px;width:${f}px`;s.style.cssText=`position:relative;overflow:hidden;height:${s.offsetHeight}px`,t.domNode.style.cssText=c,t.domNode.hidden=!1,e.domNode.style.cssText=c,e.domNode.hidden=!1;let p=t.domNode.animate([{opacity:1},{opacity:0}],{duration:450,easing:"ease",fill:"forwards"}),d=e.domNode.animate([{opacity:0},{opacity:1}],{duration:450,easing:"ease",fill:"forwards"});await Promise.all([p.finished,d.finished]),p.cancel(),d.cancel(),t.domNode.hidden=!0,t.domNode.style.cssText="",e.domNode.style.cssText="",s.style.cssText="",this._currentView=e}_switchTo(t){let e=t.split("?")[0],s=this.routes[e];s&&this._pauseCurrent(s);for(let[n,i]of Object.entries(this.routes)){let a=n===e;i._setHidden(!a),a&&(this._currentView=i,i?.onResume?.())}}back(){history.back()}canGoBack(){return this._idx>0}getParams(){let t=window.location.hash.split("?")[1];return t?Object.fromEntries(new URLSearchParams(t)):{}}async navigate(t,e){let[s,n]=t.replace(/^\//,"").split("?"),i=s,a=e??this.routes[i]?.constructor;if(!a){console.error(`JOPS Router: no class found for path "${t}"`);return}this._navStack.length===0&&(this._baseView=this._currentView);let r=new a;await r.loadLayout(),r.inflate(),this.domNode.append(...r._roots()),this._history("pushState",{jopsNav:!0,jopsIdx:++this._idx},"#"+i+(n?"?"+n:"")),this._pauseCurrent(r),await r.onLayout?.(),await r.onResume?.(),r.bindEvents?.(),this._navStack.push(r),this._animateTransition(this._currentView,r,"forward")}async replace(t,e){this._closeStack();let[s,n]=t.replace(/^\//,"").split("?"),i=s,a="#"+i+(n?"?"+n:"");if(this.routes[i])this._history("replaceState",{...history.state,jopsIdx:this._idx},a),this._switchTo(i);else if(e){let r=new e;await r.loadLayout(),r.inflate(),this.domNode.append(...r._roots()),this._pauseCurrent(r),await r.onLayout?.(),await r.onResume?.(),r.bindEvents?.(),this._currentView&&this._currentView._setHidden(!0),this._currentView=r,this._history("replaceState",{...history.state,jopsIdx:this._idx},a)}else console.error(`JOPS Router: no instance or class found for path "${t}"`)}},A=class{static{h(this,"Thread")}#t=null;run(t){}onMessage(t){}start(t){if(typeof Worker>"u"){console.warn("JOPS Thread: Web Workers are not supported in this environment.");return}let e=this.run.toString();!e.startsWith("function")&&!e.startsWith("(")&&!e.startsWith("async")&&(e="function "+e);let s=new Blob([`const run = ${e};`,"self.onmessage = (e) => { run(e.data); };"],{type:"application/javascript"}),n=URL.createObjectURL(s);this.#t=new Worker(n),URL.revokeObjectURL(n),this.#t.onmessage=i=>this.onMessage(i),this.#t.postMessage(t)}terminate(){if(!this.#t){console.warn("JOPS Thread: no active worker to terminate.");return}this.#t.terminate(),this.#t=null}};export{L as EventBus,y as Router,P as Store,A as Thread,R as View,G as layout,D as mount,z as raw,V as unmount};

package/lib/nextjs/JopsApp.d.ts

@@ -0,0 +1,35 @@
+export type JopsAppProps = {
+    /** URL of the JOPS app's entry module, e.g. "/quotes/App.js". */
+    app: string;
+    /** id for the root <div> (CSS, tests, debugging). Does not choose the mount target. */
+    id?: string;
+    /** className for the root <div>. */
+    className?: string;
+    /** jops-core library URL; also used for the import map. Defaults to "/lib/jops-core.min.js". */
+    lib?: string;
+};
+type JopsGlobal = {
+    mount(options: {
+        app: string;
+        root: HTMLElement;
+    }): Promise<unknown>;
+    /** Ends the app completely (Router, views, Store, EventBus, history hook). */
+    unmount(): void;
+};
+declare global {
+    interface Window {
+        JOPS?: JopsGlobal;
+    }
+}
+/**
+ * Hosts a JOPS SPA inside a Next.js page. Renders an empty <div> that becomes
+ * the JOPS root; React never renders children into it, so JOPS owns its DOM.
+ *
+ * @example
+ * import JopsApp from "jops-core/nextjs";
+ * export default function Page() {
+ *   return <JopsApp app="/quotes/App.js" id="jops-quotes-root" />;
+ * }
+ */
+export default function JopsApp({ app, id, className, lib }: JopsAppProps): import("react").JSX.Element;
+export {};

package/lib/nextjs/JopsApp.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const DEFAULT_LIB = "/lib/jops-core.min.js";
+const SCRIPT_ID = "jops-core";
+const IMPORT_MAP_ID = "jops-core-importmap";
+function ensureImportMap(lib) {
+  if (document.getElementById(IMPORT_MAP_ID)) return;
+  const map = document.createElement("script");
+  map.type = "importmap";
+  map.id = IMPORT_MAP_ID;
+  map.textContent = JSON.stringify({ imports: { "jops-core": lib } });
+  document.head.appendChild(map);
+}
+function loadJops(lib) {
+  if (window.JOPS) return Promise.resolve(window.JOPS);
+  return new Promise((resolve, reject) => {
+    window.addEventListener("jops:ready", () => resolve(window.JOPS), { once: true });
+    if (!document.getElementById(SCRIPT_ID)) {
+      ensureImportMap(lib);
+      const script = document.createElement("script");
+      script.type = "module";
+      script.src = lib;
+      script.id = SCRIPT_ID;
+      script.dataset.host = "next";
+      script.onerror = () => reject(new Error(`JOPS: failed to load ${lib}`));
+      document.head.appendChild(script);
+    }
+  });
+}
+function JopsApp({ app, id, className, lib = DEFAULT_LIB }) {
+  const rootRef = useRef(null);
+  useEffect(() => {
+    let cancelled = false;
+    let jops = null;
+    loadJops(lib).then((loaded) => {
+      if (cancelled || !rootRef.current) return;
+      jops = loaded;
+      return loaded.mount({ app, root: rootRef.current });
+    }).catch((err) => console.error(err));
+    return () => {
+      cancelled = true;
+      jops?.unmount();
+    };
+  }, [app, lib]);
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, id, className, "data-jops-root": "", style: { position: "relative" } });
+}
+export {
+  JopsApp as default
+};

package/package.json

@@ -1,9 +1,18 @@
 {
   "name": "jops-core",
-  "version": "1.0.15",
+  "version": "1.1.0",
   "description": "A no-bundler, OOP-first SPA framework with Android-style view composition",
   "type": "module",
-  "exports": "./lib/jops-core.min.js",
+  "exports": {
+    ".": {
+      "types": "./lib/jops-core.d.ts",
+      "default": "./lib/jops-core.min.js"
+    },
+    "./nextjs": {
+      "types": "./lib/nextjs/JopsApp.d.ts",
+      "default": "./lib/nextjs/JopsApp.js"
+    }
+  },
   "browser": "./lib/jops-core.min.js",
   "types": "./lib/jops-core.d.ts",
   "bin": {
@@ -12,11 +21,13 @@
   "files": [
     "lib/jops-core.min.js",
     "lib/jops-core.d.ts",
+    "lib/nextjs/",
     "bin/init.js",
     "templates/"
   ],
   "scripts": {
-    "build": "esbuild src/jops-core.js --bundle --format=esm --minify --keep-names --outfile=lib/jops-core.min.js && tsc -p tsconfig.types.json && npm pack"
+    "build:nextjs": "esbuild jops-nextjs/JopsApp.tsx --format=esm --jsx=automatic --target=es2022 --outdir=lib/nextjs && tsc -p tsconfig.nextjs.json",
+    "build": "esbuild src/jops-core.js --bundle --format=esm --minify --keep-names --outfile=lib/jops-core.min.js && tsc -p tsconfig.types.json && npm run build:nextjs && npm pack"
   },
   "homepage": "https://cdn.ui-db.com",
   "repository": {
@@ -52,13 +63,30 @@
     "ios",
     "hybrid-app",
     "phonegap",
-    "hybrid-mobile"
+    "hybrid-mobile",
+    "nextjs",
+    "next-js",
+    "next.js",
+    "ssr"
   ],
   "author": "arik@ui-db.com",
   "license": "MIT",
   "devDependencies": {
+    "@types/react": "^19.3.0",
     "esbuild": "^0.25.12",
     "typescript": "^7.0.2"
   },
-  "packageManager": "npm@12.0.2+sha512.b885e890b9418fa1693544d05f53e64f9a73ec194837d4258b15fecdd692347b1dd2a517b1b0cbaf9d31cd8e92c3b70956bd2ecc72833a57b4b3098f5bfa7943"
+  "packageManager": "npm@12.0.2+sha512.b885e890b9418fa1693544d05f53e64f9a73ec194837d4258b15fecdd692347b1dd2a517b1b0cbaf9d31cd8e92c3b70956bd2ecc72833a57b4b3098f5bfa7943",
+  "peerDependencies": {
+    "react": ">=18",
+    "next": ">=15"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    }
+  }
 }

package/templates/nextjs-jops-spa/README.md

@@ -0,0 +1,34 @@
+# Next.js + JOPS embedded SPA
+
+A Next.js (App Router) project that hosts a [JOPS](https://github.com/uidb-dev/jops-core) single-page app on one of its pages. Created by `npx jops-core init` (template 3) in the current folder: in an empty folder, or merged into a fresh npm project (an existing `package.json` keeps its entries, an installed `jops-core` included).
+
+```bash
+npm run dev
+```
+
+Open http://localhost:3000/about and http://localhost:3000/jops-spa.
+
+## What's inside
+
+| Path | What it is |
+|---|---|
+| `src/app/about/page.tsx` | A React-only page (no JOPS). |
+| `src/app/jops-spa/page.tsx` | Renders `<JopsApp app="/jops-spa/App.js" />` from `jops-core/nextjs`, which launches the JOPS SPA. |
+| `src/app/api/quotes/route.ts` | `GET /api/quotes[?status=…]`: the SPA's backend, reading `data/quotes.json`. |
+| `public/jops-spa/` | The JOPS SPA: plain ES modules and HTML layouts, served as-is. A Router with `#login` (mock login, no request) and `#quotes` (quotes list with status filters). |
+| `public/lib/jops-core.min.js` | The JOPS library, vendored. |
+
+## Conventions
+
+- **Absolute paths** for everything JOPS loads (`/jops-spa/Quotes.js`, `/jops-spa/layout/quotes.html`).
+- **Vendored library:** `public/lib/jops-core.min.js`, which must match the `lib` URL used by `JopsApp` (default `/lib/jops-core.min.js`). After updating the `jops-core` package, run `npm run jops:update` to copy the new version into `public/lib/`.
+- **One stylesheet:** Tailwind is generated by Next.js and also covers the classes used in `public/jops-spa/`. `setStyle()` has no effect in an embedded JOPS app.
+- **Lifecycle:** leaving `/jops-spa` (a link or Back) ends the JOPS app completely; returning launches it again. The mock login is kept in the JOPS `Store`, so it is cleared too.
+
+## Deploying
+
+This is a standard Next.js app: `npm run build` produces `.next/` (not a static `dist/` folder), and it runs on a Node.js server because of the Route Handler (`/api/quotes`). Deploy it like any Next.js app; see the [Next.js deployment docs](https://nextjs.org/docs/app/getting-started/deploying). Three points specific to the embedded JOPS app:
+
+- **Deploy `public/` with the app.** The whole JOPS SPA and the library live there. With `output: "standalone"`, Next.js leaves `public/` and `.next/static/` out of `.next/standalone/` on purpose; copy both in, or the JOPS app is missing.
+- **Caching:** files in `public/` are not content-hashed, so a CDN or the browser can keep serving an old `/jops-spa/*.js` or `/lib/jops-core.min.js` after a deploy. Use short cache headers for those paths, or versioned paths.
+- **Library version:** after updating the `jops-core` package, run `npm run jops:update` before `npm run build`, so `public/lib/jops-core.min.js` matches the installed version.

package/templates/nextjs-jops-spa/data/quotes.json

@@ -0,0 +1,62 @@
+[
+  {
+    "id": "q4",
+    "number": "Q-2026-0004",
+    "companyName": "Greenfield Foods",
+    "dealTitle": "Onboarding package",
+    "status": "rejected",
+    "createdAt": "2026-09-17T00:00:00.000Z",
+    "totals": {
+      "gross": 9600.0,
+      "discount": 0.0,
+      "subtotal": 9600.0,
+      "tax": 1632.0,
+      "total": 11232.0
+    }
+  },
+  {
+    "id": "q3",
+    "number": "Q-2026-0003",
+    "companyName": "Copperleaf Software",
+    "dealTitle": "Fleet expansion",
+    "status": "accepted",
+    "createdAt": "2026-09-13T00:00:00.000Z",
+    "totals": {
+      "gross": 36000.0,
+      "discount": 3320.0,
+      "subtotal": 32680.0,
+      "tax": 5555.6,
+      "total": 38235.6
+    }
+  },
+  {
+    "id": "q2",
+    "number": "Q-2026-0002",
+    "companyName": "Blue Harbor Health",
+    "dealTitle": "Support renewal",
+    "status": "sent",
+    "createdAt": "2026-09-09T00:00:00.000Z",
+    "totals": {
+      "gross": 15700.0,
+      "discount": 480.0,
+      "subtotal": 15220.0,
+      "tax": 2587.4,
+      "total": 17807.4
+    }
+  },
+  {
+    "id": "q1",
+    "number": "Q-2026-0001",
+    "companyName": "Acme Robotics",
+    "dealTitle": "Pilot project",
+    "status": "draft",
+    "createdAt": "2026-09-05T00:00:00.000Z",
+    "totals": {
+      "gross": 10800.0,
+      "discount": 0.0,
+      "subtotal": 10800.0,
+      "tax": 1836.0,
+      "total": 12636.0
+    }
+  }
+]

package/templates/nextjs-jops-spa/gitignore

@@ -0,0 +1,21 @@
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+*.tsbuildinfo
+next-env.d.ts
+
+# debug
+npm-debug.log*
+
+# env files
+.env*

package/templates/nextjs-jops-spa/next.config.ts

@@ -0,0 +1,15 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  cacheComponents: true,
+  turbopack: {
+    rules: {
+      "*.css": {
+        loaders: ["@tailwindcss/turbopack"],
+        as: "*.css",
+      },
+    },
+  },
+};
+
+export default nextConfig;

package/templates/nextjs-jops-spa/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nextjs-jops-spa",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "jops:update": "jops-core update"
+  },
+  "dependencies": {
+    "jops-core": "^1.1.0",
+    "next": "16.4.2",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/turbopack": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/templates/nextjs-jops-spa/public/jops-spa/App.js

@@ -0,0 +1,10 @@
+import { View } from "jops-core";
+
+// Entry module launched by <JopsApp app="/jops-spa/App.js"> on the /jops-spa
+// page. The root view renders layout/main.html into JopsApp's <div>.
+export default class App {
+  constructor() {
+    const root = new View();
+    root.loadLayout("/jops-spa/layout/main.html").then(() => root.render());
+  }
+}

package/templates/nextjs-jops-spa/public/jops-spa/Login.js

@@ -0,0 +1,26 @@
+import { View, Router, Store } from "jops-core";
+
+// #login: a mock login. The user is kept in the JOPS Store only (no request);
+// the Store is cleared when the app ends, so leaving the page logs out.
+export default class Login extends View {
+  constructor() {
+    super();
+  }
+
+  onResume() {
+    // Already signed in: go straight to the quotes. Deferred, so it does not
+    // run inside the Router's own route switch.
+    if (Store.singleton().get("user")) {
+      queueMicrotask(() => Router.singleton().replace("/quotes"));
+    }
+  }
+
+  // The browser has checked the required fields before the submit event.
+  login(event) {
+    event.preventDefault();
+    const name = new FormData(event.target).get("username");
+    Store.singleton().set("user", { name });
+    event.target.reset();
+    location.hash = "#quotes";
+  }
+}

package/templates/nextjs-jops-spa/public/jops-spa/Quotes.js

@@ -0,0 +1,102 @@
+import { View, Router, Store, layout } from "jops-core";
+import { getQuotes } from "./api.js";
+import { formatDate, formatMoney } from "./format.js";
+import { BADGE } from "./badge.js";
+import { tableSkeleton } from "./skeleton.js";
+
+// Full class names, so Tailwind finds them in this file.
+const TAB = {
+  active: "rounded-md px-3 py-1.5 text-sm capitalize bg-indigo-600 text-white",
+  inactive:
+    "rounded-md px-3 py-1.5 text-sm capitalize bg-white text-slate-600 ring-1 ring-slate-200 hover:bg-slate-50",
+};
+
+// #quotes: the quotes list with status filter tabs. Only for a signed-in user.
+export default class Quotes extends View {
+  constructor() {
+    super();
+    this.status = "";
+  }
+
+  onResume() {
+    const user = Store.singleton().get("user");
+    if (!user) {
+      // Not signed in: back to the login. Deferred, so it does not run inside
+      // the Router's own route switch.
+      queueMicrotask(() => Router.singleton().replace("/login"));
+      return;
+    }
+    this.get("user_name").set(layout`${user.name}`);
+    this.loadQuotes();
+  }
+
+  // Filter tab click: highlight the tab, then load that status.
+  filterQuotes(event) {
+    this.status = event.target.dataset.status;
+    for (const tab of this.get("tabs").element.children) {
+      tab.className = tab === event.target ? TAB.active : TAB.inactive;
+    }
+    this.loadQuotes();
+  }
+
+  async loadQuotes() {
+    const rows = this.get("quote-rows");
+    const table = this.get("quotes-table");
+    const empty = this.get("quotes-empty");
+    const loading = this.get("quotes-loading");
+    const request = (this.request = {}); // a later click wins
+
+    loading.set(tableSkeleton());
+    table.attr("hidden", "");
+    empty.attr("hidden", "");
+    try {
+      const quotes = await getQuotes(this.status);
+      if (this.request !== request) return;
+      this.subViews
+        .filter((v) => v instanceof QuoteRow)
+        .forEach((v) => this.removeSubView(v));
+      // Awaited one by one, so the rows are added in the API's order.
+      for (const quote of quotes) await this.addSubView("quote-rows", new QuoteRow(quote));
+      empty.attr("hidden", quotes.length ? "" : null);
+    } catch (err) {
+      if (this.request !== request) return;
+      rows.set(
+        layout`<tr><td colspan="6" class="px-4 py-6 text-center text-red-600">Could not load quotes: ${err.message}</td></tr>`,
+      );
+    } finally {
+      if (this.request === request) {
+        loading.set("");
+        table.attr("hidden", null);
+      }
+    }
+  }
+
+  logout() {
+    Store.singleton().set("user", null);
+    Router.singleton().replace("/login");
+  }
+}
+
+// One table row, created in code and added with addSubView().
+class QuoteRow extends View {
+  constructor(quote) {
+    super();
+    this.quote = quote;
+  }
+
+  loadLayout() {
+    return super.loadLayout("/jops-spa/layout/quotes_row.html");
+  }
+
+  onLayout() {
+    const q = this.quote;
+    this.get("quote_number").set(layout`${q.number}`);
+    this.get("company_name").set(layout`${q.companyName ?? "—"}`);
+    this.get("deal_title").set(layout`${q.dealTitle ?? "—"}`);
+    this.get("quote_status").set(
+      layout`<span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium capitalize ring-1 ring-inset ${BADGE[q.status] ?? BADGE.draft}">${q.status}</span>`,
+    );
+    this.get("created_at").set(layout`${formatDate(q.createdAt)}`);
+    this.get("total").set(layout`${formatMoney(q.totals.total)}`);
+  }
+}

package/templates/nextjs-jops-spa/public/jops-spa/api.js

@@ -0,0 +1,15 @@
+// Calls to the Next.js backend (Route Handlers in src/app/api/). Same origin,
+// so cookies would be sent automatically if you add authentication.
+
+async function request(url) {
+  const res = await fetch(url, { headers: { Accept: "application/json" } });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error ?? `Request failed (${res.status})`);
+  return data;
+}
+
+// GET /api/quotes[?status=…] → the quotes, newest number first.
+export async function getQuotes(status) {
+  const qs = status ? `?status=${encodeURIComponent(status)}` : "";
+  return (await request(`/api/quotes${qs}`)).data;
+}

package/templates/nextjs-jops-spa/public/jops-spa/badge.js

@@ -0,0 +1,8 @@
+// Status badge colours. Full class names (not built from parts), so Tailwind
+// finds them when it scans this file.
+export const BADGE = {
+  draft: "bg-slate-100 text-slate-700 ring-slate-300",
+  sent: "bg-sky-50 text-sky-700 ring-sky-200",
+  accepted: "bg-emerald-50 text-emerald-700 ring-emerald-200",
+  rejected: "bg-red-50 text-red-700 ring-red-200",
+};

package/templates/nextjs-jops-spa/public/jops-spa/format.js

@@ -0,0 +1,5 @@
+const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+export const formatMoney = (value) => money.format(value);
+
+const date = new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeZone: "UTC" });
+export const formatDate = (iso) => date.format(new Date(iso));

package/templates/nextjs-jops-spa/public/jops-spa/layout/login.html

@@ -0,0 +1,34 @@
+<div class="mx-auto mt-8 max-w-sm rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
+  <h1 class="text-xl font-semibold text-slate-900">Sign in</h1>
+  <p class="mt-1 text-sm text-slate-500">
+    Mock login: any username and password work. Nothing is sent to a server.
+  </p>
+  <form id="login_form" jops-event-bind onsubmit="login" class="mt-6 space-y-4">
+    <label class="block text-sm">
+      <span class="font-medium text-slate-700">Username</span>
+      <input
+        id="username"
+        name="username"
+        required
+        autocomplete="username"
+        class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2"
+      />
+    </label>
+    <label class="block text-sm">
+      <span class="font-medium text-slate-700">Password</span>
+      <input
+        name="password"
+        type="password"
+        required
+        autocomplete="current-password"
+        class="mt-1 w-full rounded-md border border-slate-300 px-3 py-2"
+      />
+    </label>
+    <button
+      type="submit"
+      class="w-full rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500"
+    >
+      Sign in
+    </button>
+  </form>
+</div>

package/templates/nextjs-jops-spa/public/jops-spa/layout/main.html

@@ -0,0 +1,17 @@
+<div class="jops-spa">
+  <!-- The first route is the default one: a fresh visit opens the login. -->
+  <Router jops>
+    <Login
+      jops
+      path="/login"
+      src="/jops-spa/Login.js"
+      layout="/jops-spa/layout/login.html"
+    ></Login>
+    <Quotes
+      jops
+      path="/quotes"
+      src="/jops-spa/Quotes.js"
+      layout="/jops-spa/layout/quotes.html"
+    ></Quotes>
+  </Router>
+</div>