@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/pwa.d.ts

@@ -0,0 +1,52 @@
+/// <reference path="./stx.d.ts" />
+import type { StxOptions } from './types';
+/**
+ * Build all PWA assets
+ *
+ * Generates manifest.json, service worker, icons, and offline page.
+ *
+ * @param options - stx configuration options
+ * @param outputDir - Directory to write PWA assets
+ * @returns Build result with file paths and status
+ */
+export declare function buildPwaAssets(options: StxOptions, outputDir: string): Promise<PwaBuildResult>;
+/**
+ * Process HTML to inject PWA tags
+ *
+ * Convenience function that wraps injectPwaTags.
+ *
+ * @param html - HTML content to process
+ * @param options - stx configuration options
+ * @returns HTML with PWA tags injected
+ */
+export declare function processPwaHtml(html: string, options: StxOptions): string;
+/**
+ * Check if PWA is enabled in options
+ */
+export declare function isPwaEnabled(options: StxOptions): boolean;
+/**
+ * PWA build result
+ */
+export declare interface PwaBuildResult {
+  success: boolean
+  files: {
+    manifest?: string
+    serviceWorker?: string
+    offlinePage?: string
+    icons: string[]
+  }
+  errors: string[]
+  warnings: string[]
+  precacheStats?: {
+    fileCount: number
+    totalSize: number
+  }
+}
+export * from './pwa/audit';
+export * from './pwa/directives';
+export * from './pwa/icons';
+export * from './pwa/inject';
+export * from './pwa/manifest';
+export * from './pwa/offline';
+export * from './pwa/precache';
+export * from './pwa/service-worker';

package/dist/pwa.js

@@ -0,0 +1,236 @@
+// @bun
+import{Hk as wq,Ik as dq,Jk as Cq,Kk as mq,Lk as gq}from"./chunk-hpybjwwf.js";import{Mk as S,Nk as Tq,Ok as _q,Pk as z,Qk as D,Rk as P,Sk as kq,Tk as vq,Uk as w,Vk as Iq,Wk as d,Xk as Hq,Yk as Oq,Zk as Mq}from"./chunk-1q4y74mh.js";import{$u as Sq,Zu as Aq,_u as bq,av as zq,bv as Dq,cv as Pq}from"./chunk-x650vjcp.js";import{gv as N}from"./chunk-qc1f74ek.js";import p from"fs";import E from"path";import C from"fs";import L from"path";var k=[72,96,128,144,152,192,384,512],v=[120,152,167,180],I=[16,32];async function H(G,B){let q={success:!0,generatedFiles:[],errors:[],warnings:[]},K=G.pwa?.icons;if(!K?.src)return q.errors.push("No source icon specified in pwa.icons.src"),q.success=!1,q;let Y=L.isAbsolute(K.src)?K.src:L.resolve(process.cwd(),K.src);if(!await Bun.file(Y).exists())return q.errors.push(`Source icon not found: ${Y}`),q.success=!1,q;let Q=L.resolve(B,K.outputDir||"pwa-icons");try{C.mkdirSync(Q,{recursive:!0})}catch{return q.errors.push(`Failed to create output directory: ${Q}`),q.success=!1,q}let X=K.sizes||k,j=K.generateWebP??!0,J=K.generateAppleIcons??!0;try{let y;try{y=await import("sharp")}catch{return q.errors.push(`sharp is not installed. Install it with: bun add sharp
+Icon generation requires the sharp package for image processing.`),q.success=!1,q}let R=await y.default(Y).metadata();if(R.width&&R.width<512)q.warnings.push(`Source icon is ${R.width}x${R.height}. Recommend using at least 512x512 for best quality.`);for(let $ of X){let x=L.join(Q,`icon-${$}x${$}.png`);if(await y.default(Y).resize($,$,{fit:"contain",background:{r:0,g:0,b:0,alpha:0}}).png().toFile(x),q.generatedFiles.push(x),j){let F=L.join(Q,`icon-${$}x${$}.webp`);await y.default(Y).resize($,$,{fit:"contain",background:{r:0,g:0,b:0,alpha:0}}).webp({quality:90}).toFile(F),q.generatedFiles.push(F)}}if(J){for(let x of v){let F=L.join(Q,`apple-touch-icon-${x}x${x}.png`);await y.default(Y).resize(x,x,{fit:"contain",background:{r:255,g:255,b:255,alpha:1}}).png().toFile(F),q.generatedFiles.push(F)}let $=L.join(Q,"apple-touch-icon.png");await y.default(Y).resize(180,180,{fit:"contain",background:{r:255,g:255,b:255,alpha:1}}).png().toFile($),q.generatedFiles.push($)}for(let $ of I){let x=L.join(Q,`favicon-${$}x${$}.png`);await y.default(Y).resize($,$,{fit:"contain",background:{r:0,g:0,b:0,alpha:0}}).png().toFile(x),q.generatedFiles.push(x)}let U=512,T=L.join(Q,`icon-maskable-${U}x${U}.png`),Z=Math.floor(U*0.1),_=U-Z*2;await y.default(Y).resize(_,_,{fit:"contain",background:{r:0,g:0,b:0,alpha:0}}).extend({top:Z,bottom:Z,left:Z,right:Z,background:{r:255,g:255,b:255,alpha:1}}).png().toFile(T),q.generatedFiles.push(T)}catch(y){let V=y instanceof Error?y.message:String(y);q.errors.push(`Icon generation failed: ${V}`),q.success=!1}return q}function n(G){let B=G.sizes||k,q=G.outputDir?`/${G.outputDir}`:"/pwa-icons",K=G.generateWebP??!0,Y=G.generateAppleIcons??!0,Q=[];for(let X of B)if(Q.push(`${q}/icon-${X}x${X}.png`),K)Q.push(`${q}/icon-${X}x${X}.webp`);if(Y){Q.push(`${q}/apple-touch-icon.png`);for(let X of v)Q.push(`${q}/apple-touch-icon-${X}x${X}.png`)}for(let X of I)Q.push(`${q}/favicon-${X}x${X}.png`);return Q.push(`${q}/icon-maskable-512x512.png`),Q}async function O(){try{return await import("sharp"),!0}catch{return!1}}function m(G,B,q,K){let Y=[],Q=K.join(" ");for(let X of G)if(Y.push({src:`${B}/icon-${X}x${X}.png`,sizes:`${X}x${X}`,type:"image/png",purpose:Q}),q)Y.push({src:`${B}/icon-${X}x${X}.webp`,sizes:`${X}x${X}`,type:"image/webp",purpose:Q});return Y}function g(G){return G.map((B)=>({name:B.name,short_name:B.shortName,description:B.description,url:B.url,icons:B.icons?.map((q)=>({src:q.src,sizes:q.sizes,type:q.type}))}))}function h(G){let B=G.pwa?.shareTarget;if(!B?.enabled)return;let q={action:B.action||"/share",method:B.method||"POST",enctype:B.enctype||"multipart/form-data",params:{title:B.params?.title||"title",text:B.params?.text||"text",url:B.params?.url||"url"}};if(B.acceptFiles&&B.acceptFiles.length>0)q.params.files=B.acceptFiles.map((K)=>({name:K.name,accept:K.accept}));return q}function c(G){let B=G.pwa?.fileHandlers;if(!B?.enabled||!B.accept)return;let q=[{action:B.action||"/",accept:B.accept,launch_type:B.launchType||"single-client"}];if(B.icons)q[0].icons=B.icons.map((K)=>({src:K.src,sizes:K.sizes,type:K.type}));return q}function l(G){let B=G.pwa?.protocolHandlers;if(!B||B.length===0)return;return B.map((q)=>({protocol:q.protocol,url:q.url}))}function u(G){let B=G.pwa;if(!B?.enabled||!B.manifest)return null;let{manifest:q,icons:K}=B,Y=K?.sizes||[72,96,128,144,152,192,384,512],Q=K?.outputDir?`/${K.outputDir}`:"/pwa-icons",X=K?.generateWebP??!0,j=K?.purpose||["any","maskable"],J={name:q.name,short_name:q.shortName||q.name,description:q.description,start_url:q.startUrl||"/",display:q.display||"standalone",display_override:q.displayOverride,orientation:q.orientation,theme_color:q.themeColor,background_color:q.backgroundColor,scope:q.scope||"/",lang:q.lang,dir:q.dir,id:q.id,categories:q.categories,icons:m(Y,Q,X,j)};if(q.shortcuts&&q.shortcuts.length>0)J.shortcuts=g(q.shortcuts);if(q.screenshots&&q.screenshots.length>0)J.screenshots=q.screenshots.map((U)=>({src:U.src,sizes:U.sizes,type:U.type,label:U.label,form_factor:U.platform}));let y=h(G);if(y)J.share_target=y;let V=c(G);if(V)J.file_handlers=V;let R=l(G);if(R)J.protocol_handlers=R;if(q.launchHandler)J.launch_handler={client_mode:q.launchHandler};if(q.handleLinks)J.handle_links=q.handleLinks;if(q.edgeSidePanel?.enabled)J.edge_side_panel={preferred_width:q.edgeSidePanel.preferredWidth};return J}function M(G){let B=u(G);if(!B)return"";let q=JSON.parse(JSON.stringify(B));return JSON.stringify(q,null,2)}function i(G,B){return{...B,...G,shortcuts:G.shortcuts||B.shortcuts,screenshots:G.screenshots||B.screenshots,categories:G.categories||B.categories}}function s(G){let B=[],q=G.pwa;if(!q?.enabled)return B;let K=q.manifest;if(!K)return B.push("PWA manifest configuration is missing"),B;if(!K.name)B.push("Manifest name is required");let Y=["fullscreen","standalone","minimal-ui","browser"];if(K.display&&!Y.includes(K.display))B.push(`Invalid display mode: ${K.display}. Must be one of: ${Y.join(", ")}`);let Q=["any","natural","landscape","landscape-primary","landscape-secondary","portrait","portrait-primary","portrait-secondary"];if(K.orientation&&!Q.includes(K.orientation))B.push(`Invalid orientation: ${K.orientation}`);let X=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;if(K.themeColor&&!X.test(K.themeColor))B.push(`Invalid theme color: ${K.themeColor}. Must be a valid hex color.`);if(K.backgroundColor&&!X.test(K.backgroundColor))B.push(`Invalid background color: ${K.backgroundColor}. Must be a valid hex color.`);if(q.shareTarget?.enabled){if(!q.shareTarget.action)B.push("Share target action URL is required")}if(q.fileHandlers?.enabled){if(!q.fileHandlers.accept||Object.keys(q.fileHandlers.accept).length===0)B.push("File handlers must specify accepted MIME types")}if(q.protocolHandlers)for(let j of q.protocolHandlers){if(!j.protocol)B.push("Protocol handler missing protocol");if(!j.url||!j.url.includes("%s"))B.push(`Protocol handler URL must contain %s placeholder: ${j.protocol}`)}return B}import A from"path";async function b(G){let B=G.pwa?.offline;if(!B?.enabled)return"";if(B.page){let q=A.isAbsolute(B.page)?B.page:A.resolve(process.cwd(),B.page);if(await Bun.file(q).exists())try{let{processDirectives:K}=await import("./chunk-r7r66978.js"),Y=await Bun.file(q).text();return await K(Y,{},q,G,new Set)}catch(K){console.warn(`[PWA] Failed to process custom offline page: ${K}`)}else console.warn(`[PWA] Custom offline page not found: ${q}`)}return f(G)}function f(G){let B=G.pwa?.offline,q=G.pwa?.manifest,K=B?.fallbackTitle||"You are offline",Y=B?.fallbackMessage||"Please check your internet connection and try again.",Q=q?.themeColor||"#4f46e5",X=q?.shortName||q?.name||"App";return`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="${Q}">
+  <title>${W(K)} - ${W(X)}</title>
+  <style>
+    :root {
+      --theme-color: ${Q};
+      --text-primary: #1a1a2e;
+      --text-secondary: #666;
+      --bg-gradient-start: #f5f7fa;
+      --bg-gradient-end: #c3cfe2;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --text-primary: #f0f0f0;
+        --text-secondary: #a0a0a0;
+        --bg-gradient-start: #1a1a2e;
+        --bg-gradient-end: #16213e;
+      }
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
+      padding: 20px;
+    }
+
+    .offline-container {
+      text-align: center;
+      max-width: 400px;
+      padding: 48px 40px;
+      background: white;
+      border-radius: 20px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .offline-container {
+        background: #242438;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+      }
+    }
+
+    .offline-icon {
+      width: 96px;
+      height: 96px;
+      margin-bottom: 28px;
+      color: var(--theme-color);
+      animation: float 3s ease-in-out infinite;
+    }
+
+    @keyframes float {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
+    }
+
+    h1 {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: 16px;
+      letter-spacing: -0.5px;
+    }
+
+    p {
+      color: var(--text-secondary);
+      line-height: 1.7;
+      margin-bottom: 32px;
+      font-size: 16px;
+    }
+
+    .retry-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 36px;
+      background: var(--theme-color);
+      color: white;
+      border: none;
+      border-radius: 12px;
+      font-size: 16px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
+    }
+
+    .retry-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
+    }
+
+    .retry-btn:active {
+      transform: translateY(0);
+    }
+
+    .retry-btn svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .status-indicator {
+      margin-top: 24px;
+      padding: 10px 16px;
+      background: rgba(255, 193, 7, 0.1);
+      border-radius: 8px;
+      font-size: 14px;
+      color: #b8860b;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .status-indicator {
+        background: rgba(255, 193, 7, 0.15);
+        color: #ffc107;
+      }
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      background: #ffc107;
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .online .status-indicator {
+      background: rgba(40, 167, 69, 0.1);
+      color: #28a745;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .online .status-indicator {
+        background: rgba(40, 167, 69, 0.15);
+      }
+    }
+
+    .online .status-dot {
+      background: #28a745;
+      animation: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="offline-container" id="container">
+    <svg class="offline-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M1 1l22 22"/>
+      <path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/>
+      <path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/>
+      <path d="M10.71 5.05A16 16 0 0 1 22.58 9"/>
+      <path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/>
+      <path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>
+      <circle cx="12" cy="20" r="1"/>
+    </svg>
+
+    <h1>${W(K)}</h1>
+    <p>${W(Y)}</p>
+
+    <button class="retry-btn" onclick="window.location.reload()">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="23 4 23 10 17 10"></polyline>
+        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
+      </svg>
+      Try Again
+    </button>
+
+    <div class="status-indicator">
+      <span class="status-dot"></span>
+      <span id="status-text">Waiting for connection...</span>
+    </div>
+  </div>
+
+  <script>
+    // Update status and auto-reload when online
+    var reloadTimeout = null;
+    var checkInterval = null;
+
+    function updateStatus() {
+      var container = document.getElementById('container');
+      var statusText = document.getElementById('status-text');
+
+      if (navigator.onLine) {
+        container.classList.add('online');
+        statusText.textContent = 'Back online! Reloading...';
+        if (!reloadTimeout) {
+          if (checkInterval) { clearInterval(checkInterval); checkInterval = null; }
+          reloadTimeout = setTimeout(function() { window.location.reload(); }, 1000);
+        }
+      }
+      else {
+        container.classList.remove('online');
+        statusText.textContent = 'Waiting for connection...';
+        if (reloadTimeout) { clearTimeout(reloadTimeout); reloadTimeout = null; }
+      }
+    }
+
+    window.addEventListener('online', updateStatus);
+    window.addEventListener('offline', updateStatus);
+
+    // Initial check
+    updateStatus();
+
+    // Periodic check every 5 seconds
+    checkInterval = setInterval(function() {
+      if (!navigator.onLine) {
+        fetch('/', { method: 'HEAD', cache: 'no-store' })
+          .then(function() { updateStatus(); })
+          .catch(function() { /* Still offline */ });
+      }
+    }, 5000);
+  </script>
+</body>
+</html>`}function W(G){return G.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}z();w();z();w();async function jq(G,B){let q={success:!0,files:{icons:[]},errors:[],warnings:[]},K=G.pwa;if(!K?.enabled)return q;try{p.mkdirSync(B,{recursive:!0})}catch{return q.errors.push(`Failed to create output directory: ${B}`),q.success=!1,q}try{let Q=M(G);if(Q){let X=E.join(B,"manifest.json");await Bun.write(X,Q),q.files.manifest=X}}catch(Q){let X=Q instanceof Error?Q.message:String(Q);q.errors.push(`Failed to generate manifest.json: ${X}`),q.success=!1}if(K.icons?.src)if(await O()){let X=await H(G,B);if(q.files.icons=X.generatedFiles,q.warnings.push(...X.warnings),!X.success)q.errors.push(...X.errors),q.success=!1}else q.warnings.push("sharp is not installed. Skipping icon generation. Install with: bun add sharp");if(K.offline?.enabled)try{let Q=await b(G);if(Q){let X=E.join(B,"offline.html");await Bun.write(X,Q),q.files.offlinePage=X}}catch(Q){let X=Q instanceof Error?Q.message:String(Q);q.errors.push(`Failed to generate offline page: ${X}`),q.success=!1}let Y;if(K.precache?.enabled){let Q=S(B,G);Y={fileCount:Q.fileCount,totalSize:Q.totalSize},q.precacheStats=Y}try{let Q=D(G,B);if(Q){let X=P(G),j=E.join(B,X);await Bun.write(j,Q),q.files.serviceWorker=j}}catch(Q){let X=Q instanceof Error?Q.message:String(Q);q.errors.push(`Failed to generate service worker: ${X}`),q.success=!1}return q}function Jq(G,B){return d(G,B)}function Uq(G){return G.pwa?.enabled===!0}export{s as validateManifest,mq as runPwaAudit,Pq as registerPwaDirectives,bq as pwaUpdateDirective,zq as pwaPushDirective,Sq as pwaOfflineDirective,Aq as pwaInstallDirective,Dq as pwaDirectives,Jq as processPwaHtml,i as mergeManifestConfig,kq as isWorkboxEnabled,O as isSharpAvailable,Uq as isPwaEnabled,d as injectPwaTags,P as getServiceWorkerFileName,n as getExpectedIconPaths,Mq as generateThemeColorMeta,Hq as generateSwRegistrationScript,vq as generateServiceWorkerAuto,D as generateServiceWorker,Iq as generatePwaTags,H as generatePwaIcons,Tq as generatePrecacheManifestJs,S as generatePrecacheManifest,b as generateOfflinePage,Oq as generateManifestLink,M as generateManifestJson,u as generateManifest,_q as formatSize,gq as formatAuditResult,Cq as calculateAuditResult,jq as buildPwaAssets,wq as auditConfig,dq as auditBuildOutput,I as FAVICON_SIZES,k as DEFAULT_ICON_SIZES,v as APPLE_TOUCH_ICON_SIZES};

package/dist/reactive-bindings.d.ts

@@ -0,0 +1,47 @@
+/**
+ * STX Reactive Bindings
+ *
+ * Provides reactive bindings for STX templates with store integration.
+ *
+ * Syntax:
+ * - class="{{ $appStore.isActive ? 'active' : '' }}"
+ * - text="{{ $appStore.message }}"
+ * - disabled="{{ $appStore.isLoading }}"
+ *
+ * Store references:
+ * - $storeName.property (e.g., $appStore.isRecording)
+ *
+ * Example:
+ * <button
+ *   class="{{ $appStore.isRecording ? 'border-pink' : 'border-gray' }}"
+ *   disabled="{{ $appStore.isProcessing }}"
+ *   @click="voide.toggleRecording()"
+ * >
+ *   <span text="{{ $appStore.isRecording ? '🔴' : '🎤' }}"></span>
+ * </button>
+ */
+interface BindingInfo {
+    elementId: string;
+    attribute: string;
+    expression: string;
+    stores: string[];
+}
+interface ProcessedBindings {
+    html: string;
+    bindings: BindingInfo[];
+    stores: Set<string>;
+}
+/**
+ * Process reactive bindings in HTML template
+ * Detects {{ $store.value }} patterns in attribute values
+ */
+export declare function processReactiveBindings(html: string): ProcessedBindings;
+/**
+ * Generate the client-side JavaScript for reactive bindings
+ */
+export declare function generateBindingsRuntime(bindings: BindingInfo[], stores: Set<string>): string;
+/**
+ * Process template with reactive bindings and generate runtime
+ */
+export declare function processTemplateBindings(html: string): string;
+export {};

package/dist/reactive-bindings.js

@@ -0,0 +1,268 @@
+import * as crypto from "node:crypto";
+function extractStoreRefs(expression) {
+  const storePattern = /\$(\w+)\./g, stores = [];
+  let match;
+  while ((match = storePattern.exec(expression)) !== null)
+    if (!stores.includes(match[1]))
+      stores.push(match[1]);
+  return stores;
+}
+function generateElementId() {
+  return `stx-${crypto.randomBytes(4).toString("hex")}`;
+}
+function hasStoreRefs(expression) {
+  return /\$\w+\./.test(expression);
+}
+export function processReactiveBindings(html) {
+  if (!html.includes("{{") || !/\$\w+\./.test(html))
+    return { html, bindings: [], stores: new Set };
+  const bindings = [], stores = new Set, tagPattern = /<(\w+)([^>]*?)(\s*\/?>)/g;
+  let result = html;
+  result = result.replace(tagPattern, (match, tagName, attributes, closing) => {
+    if (["script", "style", "template"].includes(tagName.toLowerCase()))
+      return match;
+    const elementBindings = [];
+    let hasBindings = !1, processedAttrs = attributes;
+    const attrPattern = /(\w+(?:-\w+)*)\s*=\s*"([^"]*\{\{[^}]*\$\w+[^}]*\}\}[^"]*)"/g, attrMatches = [...attributes.matchAll(attrPattern)];
+    for (const attrMatch of attrMatches) {
+      const fullAttrMatch = attrMatch[0], attrName = attrMatch[1], attrValue = attrMatch[2];
+      if (hasStoreRefs(attrValue)) {
+        hasBindings = !0;
+        const exprMatch = attrValue.match(/\{\{\s*([\s\S]+?)\s*\}\}/);
+        if (exprMatch) {
+          const expression = exprMatch[1];
+          elementBindings.push({
+            attr: attrName,
+            expr: expression,
+            fullMatch: fullAttrMatch,
+            originalAttr: attrName
+          });
+          extractStoreRefs(expression).forEach((s) => stores.add(s));
+          if (attrName === "text")
+            processedAttrs = processedAttrs.replace(fullAttrMatch, "");
+          else if (attrName === "class")
+            processedAttrs = processedAttrs.replace(fullAttrMatch, 'class=""');
+          else if (attrName === "disabled" || attrName === "hidden")
+            processedAttrs = processedAttrs.replace(fullAttrMatch, "");
+          else
+            processedAttrs = processedAttrs.replace(fullAttrMatch, `${attrName}=""`);
+        }
+      }
+    }
+    if (!hasBindings)
+      return match;
+    const idMatch = processedAttrs.match(/\bid\s*=\s*"([^"]+)"/);
+    let elementId;
+    if (idMatch)
+      elementId = idMatch[1];
+    else {
+      elementId = generateElementId();
+      processedAttrs = ` id="${elementId}"${processedAttrs}`;
+    }
+    for (const binding of elementBindings)
+      bindings.push({
+        elementId,
+        attribute: binding.attr,
+        expression: binding.expr,
+        stores: extractStoreRefs(binding.expr)
+      });
+    return `<${tagName}${processedAttrs}${closing}`;
+  });
+  return { html: result, bindings, stores };
+}
+export function generateBindingsRuntime(bindings, stores) {
+  if (bindings.length === 0)
+    return "";
+  const storeNames = Array.from(stores);
+  let code = `
+<script>
+(function() {
+  'use strict';
+
+  // Wait for stores to be available
+  function initBindings() {
+    var stores = window.VoideStores;
+    if (!stores) {
+      setTimeout(initBindings, 10);
+      return;
+    }
+
+    // Store references for expressions
+    // eslint-disable-next-line pickier/no-unused-vars
+    var $state = {};
+`;
+  for (const storeName of storeNames)
+    code += `    $state.${storeName} = stores.${storeName} ? stores.${storeName}.get() : {};
+`;
+  code += `
+    // Binding update functions
+    function updateBindings() {
+`;
+  for (const binding of bindings) {
+    const { elementId, attribute, expression } = binding, evalExpr = expression.replace(/\$(\w+)\./g, "$state.$1.");
+    if (attribute === "text")
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            el.textContent = ${evalExpr};
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+    else if (attribute === "html")
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            el.innerHTML = ${evalExpr};
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+    else if (attribute === "class")
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            var value = ${evalExpr};
+            if (typeof value === 'string') {
+              // Dynamic class string - merge with existing static classes
+              // eslint-disable-next-line pickier/no-unused-vars
+              var staticClasses = el.getAttribute('data-static-class') || el.className;
+              if (!el.hasAttribute('data-static-class')) {
+                el.setAttribute('data-static-class', el.className);
+              }
+              el.className = (el.getAttribute('data-static-class') + ' ' + value).trim();
+            }
+else if (typeof value === 'object') {
+              // Object syntax: { 'class-name': condition }
+              for (var cls in value) {
+                if (value[cls]) {
+                  el.classList.add(cls);
+                }
+else {
+                  el.classList.remove(cls);
+                }
+              }
+            }
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+    else if (attribute === "show")
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            el.style.display = (${evalExpr}) ? '' : 'none';
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+    else if (attribute === "if")
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            el.style.visibility = (${evalExpr}) ? 'visible' : 'hidden';
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+    else
+      code += `      (function() {
+        var el = document.getElementById('${elementId}');
+        if (el) {
+          try {
+            var value = ${evalExpr};
+            if (value === false || value === null || value === undefined) {
+              el.removeAttribute('${attribute}');
+            }
+else if (value === true) {
+              el.setAttribute('${attribute}', '');
+            }
+else {
+              el.setAttribute('${attribute}', value);
+            }
+          }
+catch (e) { console.error('Binding error:', e); }
+        }
+      })();
+`;
+  }
+  code += `    }
+
+    // Subscribe to stores and update on changes. Capture the disposers so
+    // SPA fragment swaps can tear down old bindings before the next page's
+    // runtime takes over \u2014 without this, every navigation between pages
+    // using reactive-bindings stacked another subscription on every store,
+    // walking detached DOM forever. See stacksjs/stx#1709.
+    var _disposers = [];
+`;
+  for (const storeName of storeNames)
+    code += `    if (stores.${storeName}) {
+      var _unsub_${storeName} = stores.${storeName}.subscribe(function(state) {
+        $state.${storeName} = state;
+        updateBindings();
+      });
+      // store.subscribe() may return the disposer (preferred) or void; both
+      // are tolerated here.
+      if (typeof _unsub_${storeName} === 'function') _disposers.push(_unsub_${storeName});
+    }
+`;
+  code += `
+    // Initial update
+    updateBindings();
+
+    // Register this runtime's cleanup so SPA navigation can run it before
+    // swapping pages. The router (and any code) can call
+    // window.__stxCleanupBindings() to dispose subscriptions; we also wire
+    // 'popstate' and 'beforeunload' as a safety net for browser-driven nav.
+    function _cleanup() {
+      for (var i = 0; i < _disposers.length; i++) {
+        try { _disposers[i](); } catch (e) { /* swallow */ }
+      }
+      _disposers.length = 0;
+    }
+    if (!window.__stxBindingsCleanups) window.__stxBindingsCleanups = [];
+    window.__stxBindingsCleanups.push(_cleanup);
+    if (!window.__stxCleanupBindings) {
+      window.__stxCleanupBindings = function() {
+        var fns = window.__stxBindingsCleanups || [];
+        for (var i = 0; i < fns.length; i++) {
+          try { fns[i](); } catch (e) { /* swallow */ }
+        }
+        window.__stxBindingsCleanups = [];
+      };
+      window.addEventListener('popstate', window.__stxCleanupBindings);
+      window.addEventListener('beforeunload', window.__stxCleanupBindings);
+    }
+  }
+
+  // Start when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBindings);
+  }
+else {
+    initBindings();
+  }
+})();
+</script>
+`;
+  return code;
+}
+export function processTemplateBindings(html) {
+  const { html: processedHtml, bindings, stores } = processReactiveBindings(html);
+  if (bindings.length === 0)
+    return html;
+  const runtime = generateBindingsRuntime(bindings, stores), bodyIdx = processedHtml.lastIndexOf("</body>");
+  if (bodyIdx !== -1)
+    return processedHtml.slice(0, bodyIdx) + runtime + processedHtml.slice(bodyIdx);
+  return processedHtml + runtime;
+}