rip-lang 3.13.71 → 3.13.73

package/README.md

@@ -9,7 +9,7 @@
 </p>
 
 <p align="center">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.71-blue.svg" alt="Version"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.13.73-blue.svg" alt="Version"></a>
   <a href="#zero-dependencies"><img src="https://img.shields.io/badge/dependencies-ZERO-brightgreen.svg" alt="Dependencies"></a>
   <a href="#"><img src="https://img.shields.io/badge/tests-1%2C436%2F1%2C436-brightgreen.svg" alt="Tests"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>

package/docs/dist/rip.js

@@ -8751,8 +8751,8 @@ globalThis.zip    ??= (...a) => a[0].map((_, i) => a.map(b => b[i]));
     return new CodeGenerator({}).getComponentRuntime();
   }
   // src/browser.js
-  var VERSION = "3.13.70";
-  var BUILD_DATE = "2026-03-02@08:04:50GMT";
+  var VERSION = "3.13.72";
+  var BUILD_DATE = "2026-03-02@17:47:10GMT";
   if (typeof globalThis !== "undefined") {
     if (!globalThis.__rip)
       new Function(getReactiveRuntime())();
@@ -8856,6 +8856,29 @@ ${c.js}
         await ui.launch("", opts);
       }
     }
+    if (runtimeTag?.hasAttribute("data-reload")) {
+      let ready = false;
+      const es = new EventSource("/watch");
+      es.addEventListener("connected", () => {
+        if (ready)
+          location.reload();
+        ready = true;
+      });
+      es.addEventListener("reload", (e) => {
+        if (e.data === "styles") {
+          const t = Date.now();
+          document.querySelectorAll('link[rel="stylesheet"]').forEach((l) => {
+            if (new URL(l.href).origin !== location.origin)
+              return;
+            const url = new URL(l.href);
+            url.searchParams.set("_r", t);
+            l.href = url.toString();
+          });
+        } else {
+          location.reload();
+        }
+      });
+    }
   }
   async function importRip(url) {
     for (const [key, mod] of Object.entries(importRip.modules)) {

package/docs/dist/rip.min.js

@@ -718,13 +718,13 @@ globalThis.sleep  ??= (ms) => new Promise(r => setTimeout(r, ms));
 globalThis.todo   ??= (msg) => { throw new Error(msg || "Not implemented"); };
 globalThis.warn   ??= console.warn;
 globalThis.zip    ??= (...a) => a[0].map((_, i) => a.map(b => b[i]));
-`}function z1(){return new l({}).getReactiveRuntime()}function K1(){return new l({}).getComponentRuntime()}var D2="3.13.70",M2="2026-03-02@08:04:50GMT";if(typeof globalThis<"u"){if(!globalThis.__rip)Function(z1())();if(!globalThis.__ripComponent)Function(K1())()}var x3=($)=>{let U=$.match(/^[ \t]*(?=\S)/gm),F=Math.min(...(U||[]).map((W)=>W.length));return $.replace(RegExp(`^[ 	]{${F}}`,"gm"),"").trim()};async function H2(){let $=[],U=document.querySelector('script[src$="rip.min.js"], script[src$="rip.js"]'),F=U?.getAttribute("data-src");if(F){for(let u of F.trim().split(/\s+/))if(u)$.push({url:u})}for(let u of document.querySelectorAll('script[type="text/rip"]'))if(u.src)$.push({url:u.src});else{let f=x3(u.textContent);if(f)$.push({code:f})}if($.length>0){await Promise.all($.map(async(Y)=>{if(!Y.url)return;try{let A=await fetch(Y.url);if(!A.ok){console.error(`Rip: failed to fetch ${Y.url} (${A.status})`);return}Y.code=await A.text()}catch(A){console.error(`Rip: failed to fetch ${Y.url}:`,A.message)}}));let u={skipRuntimes:!0,skipExports:!0},f=[];for(let Y of $){if(!Y.code)continue;try{let A=t(Y.code,u);f.push({js:A,url:Y.url||"inline"})}catch(A){console.error(`Rip compile error in ${Y.url||"inline"}:`,A.message)}}if(f.length>0){let Y=f.map((_)=>_.js).join(`
+`}function z1(){return new l({}).getReactiveRuntime()}function K1(){return new l({}).getComponentRuntime()}var D2="3.13.72",M2="2026-03-02@17:47:10GMT";if(typeof globalThis<"u"){if(!globalThis.__rip)Function(z1())();if(!globalThis.__ripComponent)Function(K1())()}var x3=($)=>{let U=$.match(/^[ \t]*(?=\S)/gm),F=Math.min(...(U||[]).map((W)=>W.length));return $.replace(RegExp(`^[ 	]{${F}}`,"gm"),"").trim()};async function H2(){let $=[],U=document.querySelector('script[src$="rip.min.js"], script[src$="rip.js"]'),F=U?.getAttribute("data-src");if(F){for(let u of F.trim().split(/\s+/))if(u)$.push({url:u})}for(let u of document.querySelectorAll('script[type="text/rip"]'))if(u.src)$.push({url:u.src});else{let f=x3(u.textContent);if(f)$.push({code:f})}if($.length>0){await Promise.all($.map(async(Y)=>{if(!Y.url)return;try{let A=await fetch(Y.url);if(!A.ok){console.error(`Rip: failed to fetch ${Y.url} (${A.status})`);return}Y.code=await A.text()}catch(A){console.error(`Rip: failed to fetch ${Y.url}:`,A.message)}}));let u={skipRuntimes:!0,skipExports:!0},f=[];for(let Y of $){if(!Y.code)continue;try{let A=t(Y.code,u);f.push({js:A,url:Y.url||"inline"})}catch(A){console.error(`Rip compile error in ${Y.url||"inline"}:`,A.message)}}if(f.length>0){let Y=f.map((_)=>_.js).join(`
 `),A=U?.getAttribute("data-mount");if(A){let _=U.getAttribute("data-target")||"body";Y+=`
 ${A}.mount(${JSON.stringify(_)});`}try{await(0,eval)(`(async()=>{
 ${Y}
 })()`)}catch(_){if(_ instanceof SyntaxError){console.error(`Rip syntax error in combined output: ${_.message}`);for(let Z of f)try{Function(`(async()=>{
 ${Z.js}
-})()`)}catch(R){console.error(`  → source: ${Z.url}`,R.message)}}else console.error("Rip runtime error:",_)}}}let W=document.querySelector("script[data-launch]");if(W&&!globalThis.__ripLaunched){let u=$1.modules?.["ui.rip"];if(u?.launch){let f=W.getAttribute("data-launch")||"",Y=W.getAttribute("data-hash"),A=W.getAttribute("data-persist"),_={hash:Y!=="false"};if(f)_.bundleUrl=f;if(A!=null)_.persist=A==="local"?"local":!0;await u.launch("",_)}}}async function $1($){for(let[Y,A]of Object.entries($1.modules))if($.includes(Y))return A;let U=await fetch($).then((Y)=>{if(!Y.ok)throw Error(`importRip: ${$} (${Y.status})`);return Y.text()}),F=t(U),W=`// ${$}
+})()`)}catch(R){console.error(`  → source: ${Z.url}`,R.message)}}else console.error("Rip runtime error:",_)}}}let W=document.querySelector("script[data-launch]");if(W&&!globalThis.__ripLaunched){let u=$1.modules?.["ui.rip"];if(u?.launch){let f=W.getAttribute("data-launch")||"",Y=W.getAttribute("data-hash"),A=W.getAttribute("data-persist"),_={hash:Y!=="false"};if(f)_.bundleUrl=f;if(A!=null)_.persist=A==="local"?"local":!0;await u.launch("",_)}}if(U?.hasAttribute("data-reload")){let u=!1,f=new EventSource("/watch");f.addEventListener("connected",()=>{if(u)location.reload();u=!0}),f.addEventListener("reload",(Y)=>{if(Y.data==="styles"){let A=Date.now();document.querySelectorAll('link[rel="stylesheet"]').forEach((_)=>{if(new URL(_.href).origin!==location.origin)return;let Z=new URL(_.href);Z.searchParams.set("_r",A),_.href=Z.toString()})}else location.reload()})}}async function $1($){for(let[Y,A]of Object.entries($1.modules))if($.includes(Y))return A;let U=await fetch($).then((Y)=>{if(!Y.ok)throw Error(`importRip: ${$} (${Y.status})`);return Y.text()}),F=t(U),W=`// ${$}
 `,u=new Blob([W+F],{type:"application/javascript"});return await import(URL.createObjectURL(u))}$1.modules={};function q2($){try{let U=$.replace(/^/gm,"  "),W=t(`do ->
 ${U}`).replace(/^let\s+[^;]+;\s*\n\s*/m,"");W=W.replace(/^const\s+(\w+)\s*=/gm,"globalThis.$1 =");let u=(0,eval)(W);if(u&&typeof u.then==="function")return u.then((f)=>{if(f!==void 0)globalThis._=f;return f});if(u!==void 0)globalThis._=u;return u}catch(U){console.error("Rip compilation error:",U.message);return}}if(typeof globalThis<"u")globalThis.rip=q2,globalThis.importRip=$1,globalThis.compileToJS=t,globalThis.__ripExports={compile:I1,compileToJS:t,formatSExpr:d,getStdlibCode:X1,VERSION:D2,BUILD_DATE:M2,getReactiveRuntime:z1,getComponentRuntime:K1};if(typeof document<"u")globalThis.__ripScriptsReady=new Promise(($)=>{let U=()=>H2().then($);if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",()=>queueMicrotask(U));else queueMicrotask(U)});var T1={};t1(T1,{throttle:()=>n3,stash:()=>c2,setContext:()=>j2,raw:()=>g2,launch:()=>d3,isStash:()=>k3,hold:()=>p3,hasContext:()=>S2,getContext:()=>T2,delay:()=>v2,debounce:()=>i3,createRouter:()=>x2,createResource:()=>m3,createRenderer:()=>k2,createComponents:()=>l2});var O2,i1,_1,e,N1,G2,U1,g,x1,M1,H1,n1,P2,I2,E1,B1,E2,B2,N2,k1,m1,T2,L2,p1,S2,D1,d1,h2,V2,j2,C2,y2,r1,b2;globalThis.abort??=($)=>{if($)console.error($);process.exit(1)};globalThis.assert??=($,U)=>{if(!$)throw Error(U||"Assertion failed")};globalThis.exit??=($)=>process.exit($||0);globalThis.kind??=($)=>$!=null?($.constructor?.name||Object.prototype.toString.call($).slice(8,-1)).toLowerCase():String($);globalThis.noop??=()=>{};globalThis.p??=console.log;globalThis.pp??=($)=>{return console.log(JSON.stringify($,null,2)),$};globalThis.raise??=($,U)=>{throw U!==void 0?new $(U):Error($)};globalThis.rand??=($,U)=>U!==void 0?($>U&&([$,U]=[U,$]),Math.floor(Math.random()*(U-$+1)+$)):$?Math.floor(Math.random()*$):Math.random();globalThis.sleep??=($)=>new Promise((U)=>setTimeout(U,$));globalThis.todo??=($)=>{throw Error($||"Not implemented")};globalThis.warn??=console.warn;globalThis.zip??=(...$)=>$[0].map((U,F)=>$.map((W)=>W[F]));({__state:g,__effect:U1,__batch:G2}=globalThis.__rip);({setContext:j2,getContext:T2,hasContext:S2}=globalThis.__ripComponent||{});N1=Symbol("stash");e=Symbol("signals");_1=Symbol("raw");i1=new WeakMap;x1=0;n1=g(0);p1=function($,U){let F;if(!$[e])Object.defineProperty($,e,{value:new Map,enumerable:!1});if(F=$[e].get(U),!F)F=g($[U]),$[e].set(U,F);return F};D1=function($){return p1($,Symbol.for("keys"))};b2=function($){let U;if(!($!=null&&typeof $==="object"))return $;if($[N1])return $;if($ instanceof Date||$ instanceof RegExp||$ instanceof Map||$ instanceof Set||$ instanceof Promise)return $;if(U=i1.get($),U)return U;return d1($)};d1=function($){let U,F;return F=null,U={get:function(W,u){let f,Y;if(u===N1)return!0;if(u===_1)return W;if(typeof u==="symbol")return Reflect.get(W,u);if(u==="length"&&Array.isArray(W))return D1(W).value,W.length;if(u==="get")return function(A){return C2(F,A)};if(u==="set")return function(A,_){return y2(F,A,_)};if(f=p1(W,u),Y=f.value,Y!=null&&typeof Y==="object")return b2(Y);return Y},set:function(W,u,f){let Y,A;if(Y=W[u],A=f?.[_1]?f[_1]:f,A===Y)return!0;if(W[u]=A,W[e]?.has(u))W[e].get(u).value=A;if(Y===void 0&&A!==void 0)D1(W).value=++x1;return n1.value++,!0},deleteProperty:function(W,u){let f;if(delete W[u],f=W[e]?.get(u),f!=null)f.value=void 0;return D1(W).value=++x1,!0},ownKeys:function(W){return D1(W).value,Reflect.ownKeys(W)}},F=new Proxy($,U),i1.set($,F),F};O2=/([./][^./\[\s]+|\[[-+]?\d+\]|\[(?:"[^"]+"|'[^']+')\])/;r1=function($){let U,F,W,u,f;W=("."+$).split(O2),W.shift(),f=[],F=0;while(F<W.length){if(u=W[F],U=u[0],U==="."||U==="/")f.push(u.slice(1));else if(U==="[")if(u[1]==='"'||u[1]==="'")f.push(u.slice(2,-2));else f.push(+u.slice(1,-1));F+=2}return f};C2=function($,U){let F,W;W=r1(U),F=$;for(let u of W){if(F==null)return;F=F[u]}return F};y2=function($,U,F){let W,u;u=r1(U),W=$;for(let f=0;f<u.length;f++){let Y=u[f];if(f===u.length-1)W[Y]=F;else{if(W[Y]==null)W[Y]={};W=W[Y]}}return F};var c2=function($={}){return d1($)},g2=function($){return $?.[_1]?$[_1]:$},k3=function($){return $?.[N1]===!0},m3=function($,U={}){let F,W,u,f,Y;if(F=g(U.initial||null),u=g(!1),W=g(null),f=async function(){let A;return u.value=!0,W.value=null,(async()=>{try{return A=await $(),F.value=A}catch(_){return W.value=_}finally{u.value=!1}})()},Y={data:void 0,loading:void 0,error:void 0,refetch:f},Object.defineProperty(Y,"data",{get:function(){return F.value}}),Object.defineProperty(Y,"loading",{get:function(){return u.value}}),Object.defineProperty(Y,"error",{get:function(){return W.value}}),!U.lazy)f();return Y};H1=function($){return typeof $==="function"?$:function(){return $.value}};M1=function($,U){let F;return F={read:function(){return $.read()}},Object.defineProperty(F,"value",{get:function(){return $.value},set:function(W){return U.value=W}}),F};var v2=function($,U){let F,W;return F=H1(U),W=g(!!F()),U1(function(){let u;if(F())return u=setTimeout(function(){return W.value=!0},$),function(){return clearTimeout(u)};else return W.value=!1}),typeof U!=="function"?M1(W,U):W},i3=function($,U){let F,W;return F=H1(U),W=g(F()),U1(function(){let u,f;return f=F(),u=setTimeout(function(){return W.value=f},$),function(){return clearTimeout(u)}}),typeof U!=="function"?M1(W,U):W},n3=function($,U){let F,W,u;return F=H1(U),u=g(F()),W=0,U1(function(){let f,Y,A,_;if(_=F(),f=Date.now(),Y=$-(f-W),Y<=0)return u.value=_,W=f;else return A=setTimeout(function(){return u.value=F(),W=Date.now()},Y),function(){return clearTimeout(A)}}),typeof U!=="function"?M1(u,U):u},p3=function($,U){let F,W;return F=H1(U),W=g(!!F()),U1(function(){let u;if(F())return W.value=!0;else return u=setTimeout(function(){return W.value=!1},$),function(){return clearTimeout(u)}}),typeof U!=="function"?M1(W,U):W},l2=function(){let $,U,F,W;return U=new Map,W=[],$=new Map,F=function(u,f){for(let Y of W)Y(u,f)},{read:function(u){return U.get(u)},write:function(u,f){let Y;return Y=!U.has(u),U.set(u,f),$.delete(u),F(Y?"create":"change",u)},del:function(u){return U.delete(u),$.delete(u),F("delete",u)},exists:function(u){return U.has(u)},size:function(){return U.size},list:function(u=""){let f,Y,A;A=[],f=u?u+"/":"";for(let[_]of U)if(_.startsWith(f)){if(Y=_.slice(f.length),Y.includes("/"))continue;A.push(_)}return A},listAll:function(u=""){let f,Y;Y=[],f=u?u+"/":"";for(let[A]of U)if(A.startsWith(f))Y.push(A);return Y},load:function(u){for(let f in u){let Y=u[f];U.set(f,Y)}},watch:function(u){return W.push(u),function(){return W.splice(W.indexOf(u),1)}},getCompiled:function(u){return $.get(u)},setCompiled:function(u,f){return $.set(u,f)}}};N2=function($){let U;if(U=$.replace(/\.rip$/,""),U=U.replace(/\[\.\.\.(\w+)\]/g,"*$1"),U=U.replace(/\[(\w+)\]/g,":$1"),U==="index")return"/";return U=U.replace(/\/index$/,""),"/"+U};V2=function($){let U,F;return U=[],F=$.replace(/\*(\w+)/g,function(W,u){return U.push(u),"(.+)"}).replace(/:(\w+)/g,function(W,u){return U.push(u),"([^/]+)"}),{regex:new RegExp("^"+F+"$"),names:U}};h2=function($,U){let F,W;for(let u of U)if(F=$.match(u.regex.regex),F){W={};for(let f=0;f<u.regex.names.length;f++){let Y=u.regex.names[f];W[Y]=decodeURIComponent(F[f+1])}return{route:u,params:W}}return null};E1=function($,U="components"){let F,W,u,f,Y,A,_,Z,R;_=[],u=new Map,F=$.listAll(U);for(let Q of F){if(A=Q.slice(U.length+1),!A.endsWith(".rip"))continue;if(f=A.split("/").pop(),f==="_layout.rip"){W=A==="_layout.rip"?"":A.slice(0,-12),u.set(W,Q);continue}if(f.startsWith("_"))continue;if(Z=A.split("/"),Z.length>1&&Z.some(function(z,J){return J<Z.length-1&&z.startsWith("_")}))continue;R=N2(A),Y=V2(R),_.push({pattern:R,regex:Y,file:Q,rel:A})}return _.sort(function(Q,z){let J,D,M,X;if(D=(Q.pattern.match(/:/g)||[]).length,X=(z.pattern.match(/:/g)||[]).length,J=Q.pattern.includes("*")?1:0,M=z.pattern.includes("*")?1:0,J!==M)return J-M;if(D!==X)return D-X;return Q.pattern.localeCompare(z.pattern)}),{routes:_,layouts:u}};L2=function($,U,F){let W,u,f,Y;if(W=[],f=$.slice(U.length+1),Y=f.split("/"),u="",F.has(""))W.push(F.get(""));for(let A=0;A<Y.length;A++){let _=Y[A];if(A===Y.length-1)break;if(u=u?u+"/"+_:_,F.has(u))W.push(F.get(u))}return W};var x2=function($,U={}){let F,W,u,f,Y,A,_,Z,R,Q,z,J,D,M,X,w,K,q,O,P,G;if(K=U.root||"components",R=U.base||"",Q=U.hash||!1,D=U.onError||null,O=function(H){return R&&H.startsWith(R)?H.slice(R.length)||"/":H},Z=function(H){return R?R+H:H},X=function(){let H;if(Q){if(H=location.hash.slice(1),!H)return"/";return H[0]==="/"?H:"/"+H}else return location.pathname+location.search+location.hash},G=function(H){return Q?H==="/"?location.pathname:"#"+H.slice(1):Z(H)},Y=g(O(Q?X():location.pathname)),f=g({}),_=g(null),W=g([]),A=g({}),F=g(""),u=v2(100,g(!1)),P=E1($,K),z=new Set,$.watch(function(H,I){if(!I.startsWith(K+"/"))return;return P=E1($,K)}),w=function(H){let I,E,N,B,T;if(B=H.split("?")[0].split("#")[0],E=O(B),E=E[0]==="/"?E:"/"+E,N=H.split("?")[1]?.split("#")[0]||"",I=H.includes("#")?H.split("#")[1]:"",T=h2(E,P.routes),T){G2(function(){return Y.value=E,f.value=T.params,_.value=T.route,W.value=L2(T.route.file,K,P.layouts),A.value=Object.fromEntries(new URLSearchParams(N)),F.value=I});for(let C of z)C(q.current);return!0}if(D)D({status:404,path:E});return!1},M=function(){return w(X())},typeof window<"u")window.addEventListener("popstate",M);if(J=function(H){let I,E,N;if(H.button!==0||H.metaKey||H.ctrlKey||H.shiftKey||H.altKey)return;E=H.target;while(E&&E.tagName!=="A")E=E.parentElement;if(!E?.href)return;if(N=new URL(E.href,location.origin),N.origin!==location.origin)return;if(E.target==="_blank"||E.hasAttribute("data-external"))return;return H.preventDefault(),I=Q&&N.hash?N.hash.slice(1)||"/":N.pathname+N.search+N.hash,q.push(I)},typeof document<"u")document.addEventListener("click",J);return q={push:function(H){return w(H)?history.pushState(null,"",G(Y.read())):void 0},replace:function(H){return w(H)?history.replaceState(null,"",G(Y.read())):void 0},back:function(){return history.back()},forward:function(){return history.forward()},current:void 0,path:void 0,params:void 0,route:void 0,layouts:void 0,query:void 0,hash:void 0,navigating:void 0,onNavigate:function(H){return z.add(H),function(){return z.delete(H)}},rebuild:function(){return P=E1($,K)},routes:void 0,init:function(){return w(X()),q},destroy:function(){if(typeof window<"u")window.removeEventListener("popstate",M);if(typeof document<"u")document.removeEventListener("click",J);return z.clear()}},Object.defineProperty(q,"current",{get:function(){return{path:Y.value,params:f.value,route:_.value,layouts:W.value,query:A.value,hash:F.value}}}),Object.defineProperty(q,"path",{get:function(){return Y.value}}),Object.defineProperty(q,"params",{get:function(){return f.value}}),Object.defineProperty(q,"route",{get:function(){return _.value}}),Object.defineProperty(q,"layouts",{get:function(){return W.value}}),Object.defineProperty(q,"query",{get:function(){return A.value}}),Object.defineProperty(q,"hash",{get:function(){return F.value}}),Object.defineProperty(q,"navigating",{get:function(){return u.value},set:function(H){return u.value=H}}),Object.defineProperty(q,"routes",{get:function(){return P.routes}}),q};P2=function($,U){if($.length!==U.length)return!1;for(let F=0;F<$.length;F++)if($[F]!==U[F])return!1;return!0};m1=function($){for(let U in $){let F=$[U];if(typeof F==="function"&&(F.prototype?.mount||F.prototype?._create))return F}return typeof $.default==="function"?$.default:void 0};k1=function($){let U;U={};for(let F in $){let W=$[F];if(typeof W==="function"&&(W.prototype?.mount||W.prototype?._create))U[F]=W}return U};B2=function($){let U;return U=$.split("/").pop().replace(/\.rip$/,""),U.replace(/(^|[-_])([a-z])/g,function(F,W,u){return u.toUpperCase()})};I2=function($,U="components"){let F,W,u;W={};for(let f of $.listAll(U)){if(!f.endsWith(".rip"))continue;if(F=f.split("/").pop(),F.startsWith("_"))continue;if(u=B2(f),W[u])console.warn(`[Rip] Component name collision: ${u} (${W[u]} vs ${f})`);W[u]=f}return W};B1=async function($,U,F=null,W=null,u=null){let f,Y,A,_,Z,R,Q,z,J,D,M,X;if(F&&W){if(Y=F.getCompiled(W),Y)return Y}if(Q=U($),u){D={};for(let w in u.map){let K=u.map[w];if(K!==W&&Q.includes(`new ${w}(`)){if(!u.classes[w]){if(_=F.read(K),_){A=await B1(_,U,F,K,u),Z=k1(A);for(let q in Z){let O=Z[q];u.classes[q]=O}}}if(u.classes[w])D[w]=!0}}if(J=Object.keys(D),J.length>0)M=`const {${J.join(", ")}} = globalThis['${u.key}'];
 `,Q=M+Q}if(R=W?`// ${W}

package/docs/ui/alert-dialog.rip

@@ -0,0 +1,96 @@
+# AlertDialog — accessible headless non-dismissable modal
+#
+# A Dialog variant that requires explicit user action to close.
+# Cannot be dismissed by clicking outside or pressing Escape.
+# Use for destructive confirmations, unsaved changes, etc.
+# Ships zero CSS.
+#
+# Usage:
+#   AlertDialog open <=> showConfirm
+#     h2 "Delete account?"
+#     p "This action cannot be undone."
+#     button @click: (=> showConfirm = false), "Cancel"
+#     button @click: handleDelete, "Delete"
+
+alertDialogStack = []
+
+export AlertDialog = component
+  @open := false
+  @initialFocus := null
+
+  _prevFocus = null
+  _cleanupTrap = null
+  _scrollY = 0
+  _id =! "adlg-#{Math.random().toString(36).slice(2, 8)}"
+
+  _wireAria: ->
+    panel = @_panel
+    return unless panel
+    heading = panel.querySelector('h1,h2,h3,h4,h5,h6')
+    if heading
+      heading.id ?= "#{_id}-title"
+      panel.setAttribute 'aria-labelledby', heading.id
+    desc = panel.querySelector('p')
+    if desc
+      desc.id ?= "#{_id}-desc"
+      panel.setAttribute 'aria-describedby', desc.id
+
+  ~>
+    if @open
+      _prevFocus = document.activeElement
+      _scrollY = window.scrollY
+      alertDialogStack.push this
+      document.body.style.position = 'fixed'
+      document.body.style.top = "-#{_scrollY}px"
+      document.body.style.width = '100%'
+
+      setTimeout =>
+        panel = @_panel
+        if panel
+          @_wireAria()
+          if @initialFocus
+            target = if typeof @initialFocus is 'string' then panel.querySelector(@initialFocus) else @initialFocus
+            target?.focus()
+          else
+            focusable = panel.querySelectorAll 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+            focusable[0]?.focus()
+          _cleanupTrap = (e) ->
+            return unless e.key is 'Tab'
+            list = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')).filter (f) -> f.offsetParent isnt null
+            return unless list.length
+            first = list[0]
+            last = list[list.length - 1]
+            if e.shiftKey
+              if document.activeElement is first then (e.preventDefault(); last.focus())
+            else
+              if document.activeElement is last then (e.preventDefault(); first.focus())
+          panel.addEventListener 'keydown', _cleanupTrap
+      , 0
+
+      return ->
+        idx = alertDialogStack.indexOf this
+        alertDialogStack.splice(idx, 1) if idx >= 0
+        document.body.style.position = '' unless alertDialogStack.length
+        document.body.style.top = '' unless alertDialogStack.length
+        document.body.style.width = '' unless alertDialogStack.length
+        window.scrollTo 0, _scrollY unless alertDialogStack.length
+        _prevFocus?.focus()
+    else
+      idx = alertDialogStack.indexOf this
+      alertDialogStack.splice(idx, 1) if idx >= 0
+      unless alertDialogStack.length
+        document.body.style.position = ''
+        document.body.style.top = ''
+        document.body.style.width = ''
+        window.scrollTo 0, _scrollY
+      _prevFocus?.focus()
+
+  close: ->
+    @open = false
+    @emit 'close'
+
+  render
+    if @open
+      div ref: "_backdrop", $open: true
+        div ref: "_panel", role: "alertdialog", aria-modal: "true", tabindex: "-1"
+          slot

package/docs/ui/badge.rip

@@ -0,0 +1,15 @@
+# Badge — accessible headless inline label
+#
+# Decorative label for status, counts, or categories.
+# Ships zero CSS.
+#
+# Usage:
+#   Badge "New"
+#   Badge variant: "outline", "Beta"
+
+export Badge = component
+  @variant := 'solid'
+
+  render
+    span $variant: @variant
+      slot

package/docs/ui/breadcrumb.rip

@@ -0,0 +1,46 @@
+# Breadcrumb — accessible headless navigation breadcrumb
+#
+# Renders a navigation trail with separator between items.
+# The last item is automatically marked as the current page.
+# Ships zero CSS.
+#
+# Usage:
+#   Breadcrumb
+#     a $item: true, href: "/", "Home"
+#     a $item: true, href: "/products", "Products"
+#     span $item: true, "Widget Pro"
+#
+#   Breadcrumb separator: ">"
+#     a $item: true, href: "/", "Home"
+#     span $item: true, "Settings"
+
+export Breadcrumb = component
+  @separator := '/'
+  @label := 'Breadcrumb'
+
+  _ready := false
+
+  mounted: -> _ready = true
+
+  _items ~=
+    return [] unless _ready
+    return [] unless @_content
+    Array.from(@_content.querySelectorAll('[data-item]') or [])
+
+  ~>
+    return unless _ready
+    items = _items
+    return unless items.length
+    items.forEach (el, idx) =>
+      isLast = idx is items.length - 1
+      if isLast
+        el.setAttribute 'aria-current', 'page'
+        el.toggleAttribute 'data-current', true
+      else
+        el.removeAttribute 'aria-current'
+        el.removeAttribute 'data-current'
+
+  render
+    nav aria-label: @label
+      ol ref: "_content"
+        slot

package/docs/ui/button-group.rip

@@ -0,0 +1,26 @@
+# ButtonGroup — accessible headless button group
+#
+# Groups related buttons with proper ARIA semantics.
+# Ships zero CSS.
+#
+# Usage:
+#   ButtonGroup
+#     Button "Cut"
+#     Button "Copy"
+#     Button "Paste"
+#   ButtonGroup orientation: "vertical", label: "Text formatting"
+#     Toggle pressed <=> isBold, "Bold"
+#     Toggle pressed <=> isItalic, "Italic"
+
+export ButtonGroup = component
+  @orientation := 'horizontal'
+  @disabled := false
+  @label := ''
+
+  render
+    div role: "group"
+      aria-label: @label?!
+      aria-orientation: @orientation
+      $orientation: @orientation
+      $disabled: @disabled?!
+      slot

package/docs/ui/card.rip

@@ -0,0 +1,25 @@
+# Card — accessible headless content container
+#
+# Structured container with optional header, content, and footer sections.
+# Use $header, $content, $footer on children to mark sections.
+# Ships zero CSS.
+#
+# Usage:
+#   Card
+#     div $header: true
+#       h3 "Title"
+#     div $content: true
+#       p "Body text"
+#     div $footer: true
+#       Button "Action"
+#
+#   Card interactive: true, @click: handleClick
+#     p "Clickable card"
+
+export Card = component
+  @interactive := false
+
+  render
+    div tabindex: (if @interactive then "0" else undefined)
+      $interactive: @interactive?!
+      slot

package/docs/ui/carousel.rip

@@ -0,0 +1,110 @@
+# Carousel — accessible headless slide carousel
+#
+# Displays one slide at a time with arrow key navigation, optional
+# autoplay, and loop mode. Discovers slides from [data-slide] children.
+# Ships zero CSS.
+#
+# Usage:
+#   Carousel loop: true
+#     div $slide: true
+#       img src: "slide1.jpg"
+#     div $slide: true
+#       img src: "slide2.jpg"
+#     div $slide: true
+#       img src: "slide3.jpg"
+#
+#   Carousel autoplay: true, interval: 5000, @change: handleSlide
+#     div $slide: true, "Slide A"
+#     div $slide: true, "Slide B"
+
+export Carousel = component
+  @orientation := 'horizontal'
+  @loop := false
+  @autoplay := false
+  @interval := 4000
+  @label := 'Carousel'
+
+  activeIndex := 0
+  _ready := false
+  _timer = null
+
+  _slides ~=
+    return [] unless _ready
+    return [] unless @_content
+    Array.from(@_content.querySelectorAll('[data-slide]') or [])
+
+  totalSlides ~= _slides.length
+
+  mounted: ->
+    _ready = true
+    @_startAutoplay() if @autoplay
+
+  beforeUnmount: ->
+    @_stopAutoplay()
+
+  _startAutoplay: ->
+    @_stopAutoplay()
+    _timer = setInterval (=> @next()), @interval
+
+  _stopAutoplay: ->
+    clearInterval _timer if _timer
+    _timer = null
+
+  goto: (idx) ->
+    count = totalSlides
+    return unless count
+    if @loop
+      idx = idx %% count
+    else
+      idx = Math.max(0, Math.min(idx, count - 1))
+    activeIndex = idx
+    @emit 'change', activeIndex
+
+  next: -> @goto(activeIndex + 1)
+  prev: -> @goto(activeIndex - 1)
+
+  onKeydown: (e) ->
+    horiz = @orientation is 'horizontal'
+    switch e.key
+      when (if horiz then 'ArrowRight' else 'ArrowDown')
+        e.preventDefault()
+        @next()
+      when (if horiz then 'ArrowLeft' else 'ArrowUp')
+        e.preventDefault()
+        @prev()
+      when 'Home'
+        e.preventDefault()
+        @goto(0)
+      when 'End'
+        e.preventDefault()
+        @goto(totalSlides - 1)
+
+  ~>
+    return unless _ready
+    _slides.forEach (el, idx) =>
+      isActive = idx is activeIndex
+      el.hidden = not isActive
+      el.toggleAttribute 'data-active', isActive
+      el.setAttribute 'role', 'tabpanel'
+      el.setAttribute 'aria-roledescription', 'slide'
+      el.setAttribute 'aria-label', "Slide #{idx + 1} of #{totalSlides}"
+
+  onMouseenter: -> @_stopAutoplay() if @autoplay
+  onMouseleave: -> @_startAutoplay() if @autoplay
+
+  render
+    div role: "region", aria-roledescription: "carousel", aria-label: @label, tabindex: "0"
+      $orientation: @orientation
+      @keydown: @onKeydown
+      @mouseenter: @onMouseenter
+      @mouseleave: @onMouseleave
+      button $prev: true, aria-label: "Previous slide"
+        disabled: not @loop and activeIndex <= 0
+        $disabled: (not @loop and activeIndex <= 0)?!
+        @click: (=> @prev())
+      div ref: "_content"
+        slot
+      button $next: true, aria-label: "Next slide"
+        disabled: not @loop and activeIndex >= totalSlides - 1
+        $disabled: (not @loop and activeIndex >= totalSlides - 1)?!
+        @click: (=> @next())

package/docs/ui/collapsible.rip

@@ -0,0 +1,50 @@
+# Collapsible — accessible headless expand/collapse section
+#
+# Single open/close section. Simpler than Accordion (no item IDs,
+# no single/multiple mode). Exposes content dimensions as CSS
+# custom properties for animated expand/collapse. Ships zero CSS.
+#
+# Usage:
+#   Collapsible open <=> isOpen
+#     button $trigger: true, "Show details"
+#     div $content: true
+#       p "Hidden content here"
+
+export Collapsible = component
+  @open := false
+  @disabled := false
+
+  _ready := false
+
+  mounted: ->
+    _ready = true
+    trigger = @_root?.querySelector('[data-trigger]')
+    return unless trigger
+    trigger.addEventListener 'click', => @toggle() unless @disabled
+    trigger.addEventListener 'keydown', (e) =>
+      if e.key in ['Enter', ' '] and not @disabled
+        e.preventDefault()
+        @toggle()
+
+  toggle: ->
+    @open = not @open
+    @emit 'change', @open
+
+  ~>
+    return unless _ready
+    trigger = @_root?.querySelector('[data-trigger]')
+    content = @_root?.querySelector('[data-content]')
+    if trigger
+      trigger.setAttribute 'aria-expanded', !!@open
+      trigger.setAttribute 'aria-disabled', true if @disabled
+      trigger.tabIndex = if @disabled then -1 else 0
+    if content
+      content.hidden = not @open
+      if @open
+        rect = content.getBoundingClientRect()
+        content.style.setProperty '--collapsible-height', "#{rect.height}px"
+        content.style.setProperty '--collapsible-width', "#{rect.width}px"
+
+  render
+    div ref: "_root", $open: @open?!, $disabled: @disabled?!
+      slot