@stacksjs/stx 0.2.123 → 0.2.125

package/dist/cli.js

@@ -4226,7 +4226,10 @@ catch (e) {
       }
     }
     if (el.nodeType === Node.TEXT_NODE) {
-      const text = el.textContent;
+      // DOM textContent is specified as a string, but lightweight DOM
+      // implementations and user-created nodes can retain a numeric value
+      // assigned by a binding. Normalize before interpolation detection.
+      const text = el.textContent == null ? '' : String(el.textContent);
       if (text && text.includes('{{')) {
         const parts = text.split(/(\\{\\{[\\s\\S]+?\\}\\})/g);
         if (parts.length > 1) {
@@ -5136,13 +5139,24 @@ else if (typeof value === 'string') {
   var __forComponentSetupFactories = new Map();
 
   function forEachGroupElement(nodes, callback) {
-    nodes.forEach(function(node) {
+    function visit(node, insideTemplateContent) {
       if (!node || node.nodeType !== Node.ELEMENT_NODE) return;
-      callback(node);
-      if (node.querySelectorAll) {
-        node.querySelectorAll('*').forEach(function(child) { callback(child); });
-      }
-    });
+      callback(node, insideTemplateContent);
+
+      // HTMLTemplateElement children live in template.content, outside the
+      // element's ordinary descendant tree. Component roots and setup scripts
+      // wrapped by caller-owned :if/:for directives must still be discoverable
+      // for scope remapping before those templates are cloned.
+      var entersTemplateContent = node.tagName === 'TEMPLATE' && node.content;
+      var childRoot = entersTemplateContent
+        ? node.content
+        : node;
+      Array.from(childRoot.childNodes || []).forEach(function(child) {
+        visit(child, insideTemplateContent || entersTemplateContent);
+      });
+    }
+
+    nodes.forEach(function(node) { visit(node, false); });
   }
 
   // A signal component expanded inside <template :for> carries a compiled
@@ -5190,7 +5204,11 @@ else if (typeof value === 'string') {
   function hydrateComponentScopes(nodes, callerScope) {
     var roots = [];
     var scripts = [];
-    forEachGroupElement(nodes, function(node) {
+    forEachGroupElement(nodes, function(node, insideTemplateContent) {
+      // A template's content is inert source material. Remapping must traverse
+      // it, but setup and event hydration belong to the live clones inserted by
+      // bindIf/bindFor, where the correct iteration scope is available.
+      if (insideTemplateContent) return;
       if (node.hasAttribute && node.hasAttribute('data-stx-scope')) roots.push(node);
       if (node.tagName === 'SCRIPT' && node.hasAttribute('data-stx-scoped')) scripts.push(node);
     });
@@ -6020,37 +6038,38 @@ catch (e2) {
         pick.el.__stx_shown_at = performance.now();
         if (!pick.childrenProcessed) {
           pick.childrenProcessed = true;
-          // Defer child processing (same rationale as bindIf, CLAUDE.md
-          // item 35): keep child effects from subscribing to THIS chain
-          // effect's tracked signals.
-          (function (branch) {
-            setTimeout(function () {
-              var childScope = { ...globalHelpers, ...capturedComponentScope, ...(branch.capturedElementScope || {}) };
-              // Components compiled inside any branch of an if/else-if/else
-              // chain carry scoped setup scripts with them. Branch nodes are
-              // detached before those scripts can execute, so simply
-              // re-inserting the selected branch leaves component props,
-              // events, directives, and projected slot expressions inert.
-              // Hydrate those scopes before the normal subtree walk, matching
-              // the single-template :if and :for insertion paths.
-              var previouslyTrackedNodes = new Set();
-              branch.nodes.forEach(function (n) {
-                if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
-              });
-              hydrateComponentScopes(branch.nodes, childScope);
-              branch.nodes.forEach(function (n) {
-                if (n.nodeType !== 1) return; // whitespace/text between template children
-                // A scoped component receives its disposer in the outer scope
-                // walk immediately after processElement returns from binding
-                // this conditional. That first pass intentionally stops at
-                // :if, so a disposer does not mean its children were hydrated.
-                if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
-                  processElement(n, childScope);
-                n.removeAttribute('x-cloak');
-                n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
-              });
-            }, 0);
-          })(pick);
+          // Hydrate before the outer scope walk can see the inserted branch.
+          // Chromium executes scripts cloned from template.content as soon as
+          // they are connected, so deferring this pass allowed the global walk
+          // to process projected slot expressions without the loop caller
+          // scope. peek() keeps this synchronous pass from subscribing child
+          // reads to the current chain effect.
+          peek(function () {
+            var childScope = { ...globalHelpers, ...capturedComponentScope, ...(pick.capturedElementScope || {}) };
+            // Components compiled inside any branch of an if/else-if/else
+            // chain carry scoped setup scripts with them. Branch nodes are
+            // detached before those scripts can execute, so simply
+            // re-inserting the selected branch leaves component props,
+            // events, directives, and projected slot expressions inert.
+            // Hydrate those scopes before the normal subtree walk, matching
+            // the single-template :if and :for insertion paths.
+            var previouslyTrackedNodes = new Set();
+            pick.nodes.forEach(function (n) {
+              if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
+            });
+            hydrateComponentScopes(pick.nodes, childScope);
+            pick.nodes.forEach(function (n) {
+              if (n.nodeType !== 1) return; // whitespace/text between template children
+              // A scoped component receives its disposer in the outer scope
+              // walk immediately after processElement returns from binding
+              // this conditional. That first pass intentionally stops at
+              // :if, so a disposer does not mean its children were hydrated.
+              if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
+                processElement(n, childScope);
+              n.removeAttribute('x-cloak');
+              n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
+            });
+          });
         }
       }
 
@@ -6221,10 +6240,13 @@ else if (!value && isInserted) {
         else if (value && isInserted && !childrenProcessed) {
           // Initial template content is cloned before the effect runs. Process
           // it after the condition is confirmed so hidden branches stay inert.
+          // Keep hydration synchronous so the outer scope walk cannot bind
+          // caller-owned slot expressions first, while peek() prevents child
+          // reads from subscribing to this conditional effect.
           childrenProcessed = true;
-          setTimeout(function() {
+          peek(function() {
             if (isInserted) processTemplateNodes(currentNodes);
-          }, 0);
+          });
         }
       }
 else {
@@ -22422,7 +22444,7 @@ else {
 `)}function QR($,Z){let Y="  ".repeat(Z),X=[];for(let[K,W]of Object.entries($.props))if(W.type==="literal"){let U=typeof W.value==="string"?`"${W.value}"`:String(W.value);X.push(`${K}: ${U}`)}let J=X.length>0?`{ ${X.join(", ")} }`:"{}",Q=$.children.map((K)=>K.type==="text"?`"${K.props.text?.type==="literal"?K.props.text.value:""}"`:QR(K,Z+1)),G=Q.length>0?`,
 ${Y}  [${Q.join(`,
 ${Y}    `)}]`:"";return`Craft.create("${$.zigType}", ${J}${G})`}function ih($,Z,Y){if(Z.target==="universal"){let X=[];X.push("// Universal entry point"),X.push("");for(let[J,Q]of Y)X.push(`// --- ${J.toUpperCase()} ---`),X.push(`#if ${J.toUpperCase()}`),X.push(Q),X.push("#endif"),X.push("");return X.join(`
-`)}return Y.get(Z.target)||fU($,Z)}function nh($,Z,Y){let X=[];function J(Q){X.push({name:Q.zigType,hash:KR(JSON.stringify(Q.props)),props:Object.keys(Q.props),events:Array.from(Q.events.keys()),slots:[],isNative:Q.zigType.startsWith("craft.")});for(let G of Q.children)J(G)}return J(Z),{version:"1.0.0",components:X,entry:$.id,assets:[],styles:$.styles}}function rh($,Z){return JSON.stringify({version:3,file:"output.zig",sources:["input.stx"],mappings:""})}function GR(){return`id_${++ah}`}function KR($){let Z=0;for(let Y=0;Y<$.length;Y++){let X=$.charCodeAt(Y);Z=(Z<<5)-Z+X,Z=Z&Z}return Math.abs(Z).toString(36)}function sh($){return $.charAt(0).toUpperCase()+$.slice(1)}function oh($){let Z=[],Y=/<script[^>]*>([\s\S]*?)<\/script>/gi,X;while((X=Y.exec($))!==null)Z.push(X[1]);return Z}function th($){let Z=[],Y=/<style[^>]*>([\s\S]*?)<\/style>/gi,X;while((X=Y.exec($))!==null)Z.push(X[1]);return Z}function gU($){let Z=$.type==="component"?1:0;if($.children)for(let Y of $.children)Z+=gU(Y);return Z}function hU($){let Z=$.zigType.startsWith("craft.")?1:0;for(let Y of $.children)Z+=hU(Y);return Z}function WR($){return{start:async()=>{console.log("[craft-compiler] Hot reload server started")},stop:async()=>{console.log("[craft-compiler] Hot reload server stopped")},notifyChange:(Z)=>{console.log(`[craft-compiler] File changed: ${Z}`)}}}var dU,ah=0,eh,$d;var zR=D(()=>{dU=new Map([["craft-button",{name:"Button",zigType:"craft.Button",props:[{name:"variant",type:"string",required:!1,default:"primary"},{name:"disabled",type:"boolean",required:!1,default:!1},{name:"onclick",type:"callback",required:!1}],children:"single"}],["craft-text-input",{name:"TextInput",zigType:"craft.TextInput",props:[{name:"value",type:"string",required:!1,default:""},{name:"placeholder",type:"string",required:!1},{name:"disabled",type:"boolean",required:!1,default:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-textarea",{name:"TextArea",zigType:"craft.TextArea",props:[{name:"value",type:"string",required:!1,default:""},{name:"placeholder",type:"string",required:!1},{name:"rows",type:"number",required:!1,default:3},{name:"disabled",type:"boolean",required:!1,default:!1}],children:"none"}],["craft-checkbox",{name:"Checkbox",zigType:"craft.Checkbox",props:[{name:"checked",type:"boolean",required:!1,default:!1},{name:"label",type:"string",required:!1},{name:"disabled",type:"boolean",required:!1,default:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-select",{name:"Select",zigType:"craft.Select",props:[{name:"value",type:"string",required:!1},{name:"options",type:"array",required:!0},{name:"disabled",type:"boolean",required:!1,default:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-slider",{name:"Slider",zigType:"craft.Slider",props:[{name:"value",type:"number",required:!1,default:0},{name:"min",type:"number",required:!1,default:0},{name:"max",type:"number",required:!1,default:100},{name:"step",type:"number",required:!1,default:1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-toggle",{name:"Toggle",zigType:"craft.Toggle",props:[{name:"checked",type:"boolean",required:!1,default:!1},{name:"disabled",type:"boolean",required:!1,default:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-modal",{name:"Modal",zigType:"craft.Modal",props:[{name:"open",type:"boolean",required:!1,default:!1},{name:"title",type:"string",required:!1},{name:"closable",type:"boolean",required:!1,default:!0},{name:"onclose",type:"callback",required:!1}],children:"multiple"}],["craft-alert",{name:"Alert",zigType:"craft.Alert",props:[{name:"variant",type:"string",required:!1,default:"info"},{name:"title",type:"string",required:!1},{name:"dismissible",type:"boolean",required:!1,default:!1}],children:"single"}],["craft-progress",{name:"ProgressBar",zigType:"craft.ProgressBar",props:[{name:"value",type:"number",required:!1,default:0},{name:"max",type:"number",required:!1,default:100},{name:"indeterminate",type:"boolean",required:!1,default:!1}],children:"none"}],["craft-spinner",{name:"Spinner",zigType:"craft.Spinner",props:[{name:"size",type:"number",required:!1,default:24}],children:"none"}],["craft-avatar",{name:"Avatar",zigType:"craft.Avatar",props:[{name:"src",type:"string",required:!1},{name:"alt",type:"string",required:!1},{name:"size",type:"number",required:!1,default:40}],children:"none"}],["craft-badge",{name:"Badge",zigType:"craft.Badge",props:[{name:"variant",type:"string",required:!1,default:"default"}],children:"single"}],["craft-card",{name:"Card",zigType:"craft.Card",props:[{name:"padding",type:"number",required:!1,default:16}],children:"multiple"}],["craft-sidebar",{name:"Sidebar",zigType:"craft.NativeSidebar",props:[{name:"id",type:"string",required:!1},{name:"variant",type:"string",required:!1,default:"desktop"},{name:"material",type:"string",required:!1,default:"sidebar"},{name:"backgroundEffect",type:"string",required:!1,default:"shimmer"},{name:"allowsVibrancy",type:"boolean",required:!1,default:!0},{name:"materialOpacity",type:"number",required:!1,default:0.68},{name:"minWidth",type:"number",required:!1,default:240},{name:"maxWidth",type:"number",required:!1,default:340},{name:"canCollapse",type:"boolean",required:!1,default:!0},{name:"selectedItem",type:"string",required:!1},{name:"sections",type:"array",required:!1}],children:"multiple",platform:["macos"],fallback:"aside"}],["craft-sidebar-section",{name:"SidebarSection",zigType:"craft.NativeSidebarSection",props:[{name:"id",type:"string",required:!0},{name:"title",type:"string",required:!1},{name:"header",type:"string",required:!1}],children:"multiple",platform:["macos"],fallback:"section"}],["craft-sidebar-item",{name:"SidebarItem",zigType:"craft.NativeSidebarItem",props:[{name:"id",type:"string",required:!0},{name:"label",type:"string",required:!0},{name:"icon",type:"string",required:!1},{name:"badge",type:"string",required:!1},{name:"tintColor",type:"color",required:!1}],children:"none",platform:["macos"],fallback:"button"}],["craft-accordion",{name:"Accordion",zigType:"craft.Accordion",props:[{name:"title",type:"string",required:!0},{name:"open",type:"boolean",required:!1,default:!1}],children:"multiple"}],["craft-tabs",{name:"TabView",zigType:"craft.TabView",props:[{name:"activeTab",type:"number",required:!1,default:0},{name:"ontabchange",type:"callback",required:!1}],children:"multiple"}],["craft-tooltip",{name:"Tooltip",zigType:"craft.Tooltip",props:[{name:"content",type:"string",required:!0},{name:"position",type:"string",required:!1,default:"top"}],children:"single"}],["craft-date-picker",{name:"DatePicker",zigType:"craft.DatePicker",props:[{name:"value",type:"string",required:!1},{name:"min",type:"string",required:!1},{name:"max",type:"string",required:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-time-picker",{name:"TimePicker",zigType:"craft.TimePicker",props:[{name:"value",type:"string",required:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-color-picker",{name:"ColorPicker",zigType:"craft.ColorPicker",props:[{name:"value",type:"color",required:!1,default:"#000000"},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-data-table",{name:"DataTable",zigType:"craft.DataTable",props:[{name:"data",type:"array",required:!0},{name:"columns",type:"array",required:!0},{name:"sortable",type:"boolean",required:!1,default:!1},{name:"paginated",type:"boolean",required:!1,default:!1}],children:"none"}],["craft-virtual-list",{name:"VirtualList",zigType:"craft.VirtualList",props:[{name:"items",type:"array",required:!0},{name:"itemHeight",type:"number",required:!1,default:48},{name:"renderItem",type:"callback",required:!0}],children:"none"}],["craft-tree-view",{name:"TreeView",zigType:"craft.TreeView",props:[{name:"data",type:"object",required:!0},{name:"expandable",type:"boolean",required:!1,default:!0}],children:"none"}]]);eh={compileToNative:$R,createHotReloadServer:WR,NATIVE_COMPONENTS:dU},$d=eh});import{spawn as qR}from"child_process";import f0 from"fs";import Zd from"os";import Y0 from"path";import v from"process";import{CLI as Yd}from"@stacksjs/clapp";var E6="0.2.123";j$();jU();AK();kK();r4();EK();OK();JU();var __dirname="/home/runner/work/stx/stx/packages/stx/bin",V0=new Yd("stx");function _R($){let Z=typeof $==="string"?Number.parseInt($,10):$;if(Number.isNaN(Z))return{isValid:!1,error:"Port must be a valid number",suggestion:"Try using a number between 1024 and 65535"};if(Z<1024||Z>65535)return{isValid:!1,error:"Port must be between 1024 and 65535",suggestion:"Try using a port between 1024 and 65535"};return{isValid:!0}}function BR($){try{if(!f0.existsSync($)){let Y=Y0.dirname($),X=Y0.basename($);if(f0.existsSync(Y)){let Q=f0.readdirSync(Y).filter((K)=>K.toLowerCase().includes(X.toLowerCase().substring(0,3))||K.endsWith(".stx")||K.endsWith(".md")),G=Q.length>0?`File not found. Similar files in ${Y}: ${Q.slice(0,3).join(", ")}`:`File not found. Directory ${Y} exists but doesn't contain the specified file.`;return{isValid:!1,error:`File does not exist: ${$}`,suggestion:G}}return{isValid:!1,error:`File does not exist: ${$}`,suggestion:"Check the file path and try again"}}if(f0.statSync($).isDirectory())return{isValid:!1,error:`Expected file but got directory: ${$}`,suggestion:"Specify a .stx or .md file path"};return{isValid:!0}}catch(Z){return{isValid:!1,error:`Cannot access file: ${$}`,suggestion:"Check file permissions and path"}}}function uU($){let Z=typeof $==="string"?Number.parseInt($,10):$;if(Number.isNaN(Z))return{isValid:!1,error:"Timeout must be a valid number",suggestion:"Specify timeout in milliseconds (e.g., 5000 for 5 seconds)"};if(Z<100)return{isValid:!1,error:"Timeout too short (minimum 100ms)",suggestion:"Use a timeout of at least 100ms"};if(Z>300000)return{isValid:!1,error:"Timeout too long (maximum 5 minutes)",suggestion:"Use a timeout of less than 300000ms (5 minutes)"};return{isValid:!0}}var e5=($)=>$.includes("*")||$.includes("?")||$.includes("{")||$.includes("["),Xd=($)=>$.endsWith(".stx")||$.endsWith(".md");function t5($,Z=1){if(console.error(`\u274C ${$.error}`),$.suggestion)console.error(`\uD83D\uDCA1 suggestion: ${$.suggestion}`);v.exit(Z)}function Jd($){if(!$)return;let Z;try{Z=JSON.parse($)}catch(Y){console.error(`\u274C --info-plist is not valid JSON: ${Y.message}`),v.exit(1)}if(typeof Z!=="object"||Z===null||Array.isArray(Z))console.error(`\u274C --info-plist must be a JSON object, e.g. '{"NSFocusStatusUsageDescription":"\u2026"}'`),v.exit(1);for(let[Y,X]of Object.entries(Z))if(typeof X!=="string"&&typeof X!=="number"&&typeof X!=="boolean")console.error(`\u274C --info-plist value for "${Y}" must be a string, number or boolean`),v.exit(1);return Z}async function Qd($,Z){try{let Y=["test"],X=[];if($&&$.length>0)for(let W of $)if(e5(W))try{let U=await Array.fromAsync(new Bun.Glob(W).scan({onlyFiles:!0,absolute:!0}));if(U.length===0)console.warn(`Warning: No files found matching pattern: ${W}`);else if(X.push(...U),Z.verbose)console.log(`Found ${U.length} file(s) matching pattern: ${W}`)}catch(U){return console.error(`Error expanding glob pattern ${W}:`,U),!1}else X.push(W);if(X.length===0)return console.error("Error: No test files found matching the provided patterns."),!1;if(Y.push(...X),Z.filter)Y.push("--pattern",Z.filter);if(Z.timeout)Y.push("--timeout",Z.timeout.toString());if(Z.reporter&&Z.reporter!=="default")if(Z.reporter==="junit"){let W=Y0.join(Zd.tmpdir(),`stx-test-report-${Date.now()}.xml`);Y.push("--reporter",Z.reporter),Y.push("--reporter-outfile",W)}else console.warn(`Warning: Reporter '${Z.reporter}' is not supported. Using default reporter.`);if(Z.coverage)Y.push("--coverage");if(Z.watch)Y.push("--watch");Y.push("--preload",Y0.join(__dirname,"../../../test-utils/happy-dom.ts"));let J={...v.env,STX_TEST_MODE:"true",STX_TEST_UI:Z.ui?"true":"false",STX_TEST_VERBOSE:Z.verbose?"true":"false"},Q="bun";if(Z.verbose)console.log(`Running: ${Q} ${Y.join(" ")}`);let G=performance.now(),K=qR(Q,Y,{stdio:"inherit",shell:!1,env:J});return new Promise((W)=>{K.on("close",(U)=>{let _=((performance.now()-G)/1000).toFixed(2);if(U===0)W(!0);else W(!1)}),v.on("SIGINT",()=>{console.log(`
+`)}return Y.get(Z.target)||fU($,Z)}function nh($,Z,Y){let X=[];function J(Q){X.push({name:Q.zigType,hash:KR(JSON.stringify(Q.props)),props:Object.keys(Q.props),events:Array.from(Q.events.keys()),slots:[],isNative:Q.zigType.startsWith("craft.")});for(let G of Q.children)J(G)}return J(Z),{version:"1.0.0",components:X,entry:$.id,assets:[],styles:$.styles}}function rh($,Z){return JSON.stringify({version:3,file:"output.zig",sources:["input.stx"],mappings:""})}function GR(){return`id_${++ah}`}function KR($){let Z=0;for(let Y=0;Y<$.length;Y++){let X=$.charCodeAt(Y);Z=(Z<<5)-Z+X,Z=Z&Z}return Math.abs(Z).toString(36)}function sh($){return $.charAt(0).toUpperCase()+$.slice(1)}function oh($){let Z=[],Y=/<script[^>]*>([\s\S]*?)<\/script>/gi,X;while((X=Y.exec($))!==null)Z.push(X[1]);return Z}function th($){let Z=[],Y=/<style[^>]*>([\s\S]*?)<\/style>/gi,X;while((X=Y.exec($))!==null)Z.push(X[1]);return Z}function gU($){let Z=$.type==="component"?1:0;if($.children)for(let Y of $.children)Z+=gU(Y);return Z}function hU($){let Z=$.zigType.startsWith("craft.")?1:0;for(let Y of $.children)Z+=hU(Y);return Z}function WR($){return{start:async()=>{console.log("[craft-compiler] Hot reload server started")},stop:async()=>{console.log("[craft-compiler] Hot reload server stopped")},notifyChange:(Z)=>{console.log(`[craft-compiler] File changed: ${Z}`)}}}var dU,ah=0,eh,$d;var zR=D(()=>{dU=new Map([["craft-button",{name:"Button",zigType:"craft.Button",props:[{name:"variant",type:"string",required:!1,default:"primary"},{name:"disabled",type:"boolean",required:!1,default:!1},{name:"onclick",type:"callback",required:!1}],children:"single"}],["craft-text-input",{name:"TextInput",zigType:"craft.TextInput",props:[{name:"value",type:"string",required:!1,default:""},{name:"placeholder",type:"string",required:!1},{name:"disabled",type:"boolean",required:!1,default:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-textarea",{name:"TextArea",zigType:"craft.TextArea",props:[{name:"value",type:"string",required:!1,default:""},{name:"placeholder",type:"string",required:!1},{name:"rows",type:"number",required:!1,default:3},{name:"disabled",type:"boolean",required:!1,default:!1}],children:"none"}],["craft-checkbox",{name:"Checkbox",zigType:"craft.Checkbox",props:[{name:"checked",type:"boolean",required:!1,default:!1},{name:"label",type:"string",required:!1},{name:"disabled",type:"boolean",required:!1,default:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-select",{name:"Select",zigType:"craft.Select",props:[{name:"value",type:"string",required:!1},{name:"options",type:"array",required:!0},{name:"disabled",type:"boolean",required:!1,default:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-slider",{name:"Slider",zigType:"craft.Slider",props:[{name:"value",type:"number",required:!1,default:0},{name:"min",type:"number",required:!1,default:0},{name:"max",type:"number",required:!1,default:100},{name:"step",type:"number",required:!1,default:1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-toggle",{name:"Toggle",zigType:"craft.Toggle",props:[{name:"checked",type:"boolean",required:!1,default:!1},{name:"disabled",type:"boolean",required:!1,default:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-modal",{name:"Modal",zigType:"craft.Modal",props:[{name:"open",type:"boolean",required:!1,default:!1},{name:"title",type:"string",required:!1},{name:"closable",type:"boolean",required:!1,default:!0},{name:"onclose",type:"callback",required:!1}],children:"multiple"}],["craft-alert",{name:"Alert",zigType:"craft.Alert",props:[{name:"variant",type:"string",required:!1,default:"info"},{name:"title",type:"string",required:!1},{name:"dismissible",type:"boolean",required:!1,default:!1}],children:"single"}],["craft-progress",{name:"ProgressBar",zigType:"craft.ProgressBar",props:[{name:"value",type:"number",required:!1,default:0},{name:"max",type:"number",required:!1,default:100},{name:"indeterminate",type:"boolean",required:!1,default:!1}],children:"none"}],["craft-spinner",{name:"Spinner",zigType:"craft.Spinner",props:[{name:"size",type:"number",required:!1,default:24}],children:"none"}],["craft-avatar",{name:"Avatar",zigType:"craft.Avatar",props:[{name:"src",type:"string",required:!1},{name:"alt",type:"string",required:!1},{name:"size",type:"number",required:!1,default:40}],children:"none"}],["craft-badge",{name:"Badge",zigType:"craft.Badge",props:[{name:"variant",type:"string",required:!1,default:"default"}],children:"single"}],["craft-card",{name:"Card",zigType:"craft.Card",props:[{name:"padding",type:"number",required:!1,default:16}],children:"multiple"}],["craft-sidebar",{name:"Sidebar",zigType:"craft.NativeSidebar",props:[{name:"id",type:"string",required:!1},{name:"variant",type:"string",required:!1,default:"desktop"},{name:"material",type:"string",required:!1,default:"sidebar"},{name:"backgroundEffect",type:"string",required:!1,default:"shimmer"},{name:"allowsVibrancy",type:"boolean",required:!1,default:!0},{name:"materialOpacity",type:"number",required:!1,default:0.68},{name:"minWidth",type:"number",required:!1,default:240},{name:"maxWidth",type:"number",required:!1,default:340},{name:"canCollapse",type:"boolean",required:!1,default:!0},{name:"selectedItem",type:"string",required:!1},{name:"sections",type:"array",required:!1}],children:"multiple",platform:["macos"],fallback:"aside"}],["craft-sidebar-section",{name:"SidebarSection",zigType:"craft.NativeSidebarSection",props:[{name:"id",type:"string",required:!0},{name:"title",type:"string",required:!1},{name:"header",type:"string",required:!1}],children:"multiple",platform:["macos"],fallback:"section"}],["craft-sidebar-item",{name:"SidebarItem",zigType:"craft.NativeSidebarItem",props:[{name:"id",type:"string",required:!0},{name:"label",type:"string",required:!0},{name:"icon",type:"string",required:!1},{name:"badge",type:"string",required:!1},{name:"tintColor",type:"color",required:!1}],children:"none",platform:["macos"],fallback:"button"}],["craft-accordion",{name:"Accordion",zigType:"craft.Accordion",props:[{name:"title",type:"string",required:!0},{name:"open",type:"boolean",required:!1,default:!1}],children:"multiple"}],["craft-tabs",{name:"TabView",zigType:"craft.TabView",props:[{name:"activeTab",type:"number",required:!1,default:0},{name:"ontabchange",type:"callback",required:!1}],children:"multiple"}],["craft-tooltip",{name:"Tooltip",zigType:"craft.Tooltip",props:[{name:"content",type:"string",required:!0},{name:"position",type:"string",required:!1,default:"top"}],children:"single"}],["craft-date-picker",{name:"DatePicker",zigType:"craft.DatePicker",props:[{name:"value",type:"string",required:!1},{name:"min",type:"string",required:!1},{name:"max",type:"string",required:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-time-picker",{name:"TimePicker",zigType:"craft.TimePicker",props:[{name:"value",type:"string",required:!1},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-color-picker",{name:"ColorPicker",zigType:"craft.ColorPicker",props:[{name:"value",type:"color",required:!1,default:"#000000"},{name:"onchange",type:"callback",required:!1}],children:"none"}],["craft-data-table",{name:"DataTable",zigType:"craft.DataTable",props:[{name:"data",type:"array",required:!0},{name:"columns",type:"array",required:!0},{name:"sortable",type:"boolean",required:!1,default:!1},{name:"paginated",type:"boolean",required:!1,default:!1}],children:"none"}],["craft-virtual-list",{name:"VirtualList",zigType:"craft.VirtualList",props:[{name:"items",type:"array",required:!0},{name:"itemHeight",type:"number",required:!1,default:48},{name:"renderItem",type:"callback",required:!0}],children:"none"}],["craft-tree-view",{name:"TreeView",zigType:"craft.TreeView",props:[{name:"data",type:"object",required:!0},{name:"expandable",type:"boolean",required:!1,default:!0}],children:"none"}]]);eh={compileToNative:$R,createHotReloadServer:WR,NATIVE_COMPONENTS:dU},$d=eh});import{spawn as qR}from"child_process";import f0 from"fs";import Zd from"os";import Y0 from"path";import v from"process";import{CLI as Yd}from"@stacksjs/clapp";var E6="0.2.125";j$();jU();AK();kK();r4();EK();OK();JU();var __dirname="/home/runner/work/stx/stx/packages/stx/bin",V0=new Yd("stx");function _R($){let Z=typeof $==="string"?Number.parseInt($,10):$;if(Number.isNaN(Z))return{isValid:!1,error:"Port must be a valid number",suggestion:"Try using a number between 1024 and 65535"};if(Z<1024||Z>65535)return{isValid:!1,error:"Port must be between 1024 and 65535",suggestion:"Try using a port between 1024 and 65535"};return{isValid:!0}}function BR($){try{if(!f0.existsSync($)){let Y=Y0.dirname($),X=Y0.basename($);if(f0.existsSync(Y)){let Q=f0.readdirSync(Y).filter((K)=>K.toLowerCase().includes(X.toLowerCase().substring(0,3))||K.endsWith(".stx")||K.endsWith(".md")),G=Q.length>0?`File not found. Similar files in ${Y}: ${Q.slice(0,3).join(", ")}`:`File not found. Directory ${Y} exists but doesn't contain the specified file.`;return{isValid:!1,error:`File does not exist: ${$}`,suggestion:G}}return{isValid:!1,error:`File does not exist: ${$}`,suggestion:"Check the file path and try again"}}if(f0.statSync($).isDirectory())return{isValid:!1,error:`Expected file but got directory: ${$}`,suggestion:"Specify a .stx or .md file path"};return{isValid:!0}}catch(Z){return{isValid:!1,error:`Cannot access file: ${$}`,suggestion:"Check file permissions and path"}}}function uU($){let Z=typeof $==="string"?Number.parseInt($,10):$;if(Number.isNaN(Z))return{isValid:!1,error:"Timeout must be a valid number",suggestion:"Specify timeout in milliseconds (e.g., 5000 for 5 seconds)"};if(Z<100)return{isValid:!1,error:"Timeout too short (minimum 100ms)",suggestion:"Use a timeout of at least 100ms"};if(Z>300000)return{isValid:!1,error:"Timeout too long (maximum 5 minutes)",suggestion:"Use a timeout of less than 300000ms (5 minutes)"};return{isValid:!0}}var e5=($)=>$.includes("*")||$.includes("?")||$.includes("{")||$.includes("["),Xd=($)=>$.endsWith(".stx")||$.endsWith(".md");function t5($,Z=1){if(console.error(`\u274C ${$.error}`),$.suggestion)console.error(`\uD83D\uDCA1 suggestion: ${$.suggestion}`);v.exit(Z)}function Jd($){if(!$)return;let Z;try{Z=JSON.parse($)}catch(Y){console.error(`\u274C --info-plist is not valid JSON: ${Y.message}`),v.exit(1)}if(typeof Z!=="object"||Z===null||Array.isArray(Z))console.error(`\u274C --info-plist must be a JSON object, e.g. '{"NSFocusStatusUsageDescription":"\u2026"}'`),v.exit(1);for(let[Y,X]of Object.entries(Z))if(typeof X!=="string"&&typeof X!=="number"&&typeof X!=="boolean")console.error(`\u274C --info-plist value for "${Y}" must be a string, number or boolean`),v.exit(1);return Z}async function Qd($,Z){try{let Y=["test"],X=[];if($&&$.length>0)for(let W of $)if(e5(W))try{let U=await Array.fromAsync(new Bun.Glob(W).scan({onlyFiles:!0,absolute:!0}));if(U.length===0)console.warn(`Warning: No files found matching pattern: ${W}`);else if(X.push(...U),Z.verbose)console.log(`Found ${U.length} file(s) matching pattern: ${W}`)}catch(U){return console.error(`Error expanding glob pattern ${W}:`,U),!1}else X.push(W);if(X.length===0)return console.error("Error: No test files found matching the provided patterns."),!1;if(Y.push(...X),Z.filter)Y.push("--pattern",Z.filter);if(Z.timeout)Y.push("--timeout",Z.timeout.toString());if(Z.reporter&&Z.reporter!=="default")if(Z.reporter==="junit"){let W=Y0.join(Zd.tmpdir(),`stx-test-report-${Date.now()}.xml`);Y.push("--reporter",Z.reporter),Y.push("--reporter-outfile",W)}else console.warn(`Warning: Reporter '${Z.reporter}' is not supported. Using default reporter.`);if(Z.coverage)Y.push("--coverage");if(Z.watch)Y.push("--watch");Y.push("--preload",Y0.join(__dirname,"../../../test-utils/happy-dom.ts"));let J={...v.env,STX_TEST_MODE:"true",STX_TEST_UI:Z.ui?"true":"false",STX_TEST_VERBOSE:Z.verbose?"true":"false"},Q="bun";if(Z.verbose)console.log(`Running: ${Q} ${Y.join(" ")}`);let G=performance.now(),K=qR(Q,Y,{stdio:"inherit",shell:!1,env:J});return new Promise((W)=>{K.on("close",(U)=>{let _=((performance.now()-G)/1000).toFixed(2);if(U===0)W(!0);else W(!1)}),v.on("SIGINT",()=>{console.log(`
 Test run interrupted`),K.kill("SIGINT"),v.exit(1)})})}catch(Y){return console.error("Error running tests:",Y instanceof Error?Y.message:String(Y)),!1}}var Gd=v.argv.length>=3&&(Xd(v.argv[2])&&f0.existsSync(v.argv[2])||e5(v.argv[2]));if(Gd){let $=v.argv[2],Z={port:3000,watch:!0,cache:!0,markdown:{syntaxHighlighting:{enabled:!0,serverSide:!0,defaultTheme:"github-dark",highlightUnknownLanguages:!0}}};for(let Y=3;Y<v.argv.length;Y++){let X=v.argv[Y];if(X==="--port"&&Y+1<v.argv.length){let J=_R(v.argv[++Y]);if(!J.isValid)t5(J);Z.port=Number.parseInt(v.argv[Y],10)}else if(X==="--no-watch")Z.watch=!1;else if(X==="--highlight-theme"&&Y+1<v.argv.length){if(!Z.markdown)Z.markdown={};if(!Z.markdown.syntaxHighlighting)Z.markdown.syntaxHighlighting={};Z.markdown.syntaxHighlighting.defaultTheme=v.argv[++Y]}else if(X==="--no-highlight"){if(!Z.markdown)Z.markdown={};if(!Z.markdown.syntaxHighlighting)Z.markdown.syntaxHighlighting={};Z.markdown.syntaxHighlighting.enabled=!1}else if(X==="--no-highlight-unknown"){if(!Z.markdown)Z.markdown={};if(!Z.markdown.syntaxHighlighting)Z.markdown.syntaxHighlighting={};Z.markdown.syntaxHighlighting.highlightUnknownLanguages=!1}else if(X==="--no-cache")Z.cache=!1;else if(X==="--native")Z.native=!0}if(e5($))try{let Y=await Array.fromAsync(new Bun.Glob($).scan({onlyFiles:!0,absolute:!0})),X=$.endsWith(".stx")?Y.filter((K)=>K.endsWith(".stx")):$.endsWith(".md")?Y.filter((K)=>K.endsWith(".md")):Y.filter((K)=>K.endsWith(".stx")||K.endsWith(".md")),J=$.split("*")[0].replace(/\/$/,"")||".",Q=Y0.resolve(J);try{let K=new Bun.Glob("**/*.stx"),U=(await Array.fromAsync(K.scan({cwd:Q,onlyFiles:!0,absolute:!0}))).filter((z)=>/\[.+\]/.test(Y0.basename(z)));for(let z of U)if(!X.includes(z))X.push(z)}catch{}if(X.length===0)console.error(`Error: No STX or Markdown files found matching pattern: ${$}`),v.exit(1);if(!await w3(X,Z))v.exit(1)}catch(Y){console.error("Failed to process files:",Y),v.exit(1)}else N3($,Z).catch((Y)=>{console.error("Failed to start dev server:",Y),v.exit(1)})}else{let $=function(X,J){let Q=[];for(let G=0;G<=J.length;G++)Q[G]=[G];for(let G=0;G<=X.length;G++)Q[0][G]=G;for(let G=1;G<=J.length;G++)for(let K=1;K<=X.length;K++)if(J.charAt(G-1)===X.charAt(K-1))Q[G][K]=Q[G-1][K-1];else Q[G][K]=Math.min(Q[G-1][K-1]+1,Q[G][K-1]+1,Q[G-1][K]+1);return Q[J.length][X.length]};V0.command("docs","Generate documentation for components, templates, and directives").option("--output <dir>","Output directory for documentation",{default:"docs"}).option("--format <format>","Documentation format (markdown, html, json)",{default:"markdown"}).option("--components-dir <dir>","Components directory",{default:"components"}).option("--templates-dir <dir>","Templates directory",{default:"."}).option("--no-components","Disable components documentation").option("--no-templates","Disable templates documentation").option("--no-directives","Disable directives documentation").option("--extra-content <content>","Extra content to include in documentation").example("stx docs --output docs --format html").action(async(X)=>{try{if(await FK(X))console.log("Documentation generated successfully."),v.exit(0);else console.error("Documentation generation failed."),v.exit(1)}catch(J){console.error("Error generating documentation:",J),v.exit(1)}}),V0.command("iconify <command>","Generate Iconify icon packages").option("--output <dir>","Output directory for generated packages",{default:"packages"}).option("--icons <icons>","Comma-separated list of specific icons to generate").example("stx iconify list").example("stx iconify generate mdi").example("stx iconify generate lucide --icons home,settings,user").action(async(X,J)=>{try{let{fetchCollections:Q,generatePackage:G}=await import("@stacksjs/iconify-generator");if(X==="list"){console.log(`
 \uD83D\uDCDA Fetching available icon collections...
 `);let K=await Q(),W=Object.entries(K).sort((U,z)=>z[1].total-U[1].total);console.log(`Available collections:

package/dist/craft.js

@@ -3986,7 +3986,10 @@ catch (e) {
       }
     }
     if (el.nodeType === Node.TEXT_NODE) {
-      const text = el.textContent;
+      // DOM textContent is specified as a string, but lightweight DOM
+      // implementations and user-created nodes can retain a numeric value
+      // assigned by a binding. Normalize before interpolation detection.
+      const text = el.textContent == null ? '' : String(el.textContent);
       if (text && text.includes('{{')) {
         const parts = text.split(/(\\{\\{[\\s\\S]+?\\}\\})/g);
         if (parts.length > 1) {
@@ -4896,13 +4899,24 @@ else if (typeof value === 'string') {
   var __forComponentSetupFactories = new Map();
 
   function forEachGroupElement(nodes, callback) {
-    nodes.forEach(function(node) {
+    function visit(node, insideTemplateContent) {
       if (!node || node.nodeType !== Node.ELEMENT_NODE) return;
-      callback(node);
-      if (node.querySelectorAll) {
-        node.querySelectorAll('*').forEach(function(child) { callback(child); });
-      }
-    });
+      callback(node, insideTemplateContent);
+
+      // HTMLTemplateElement children live in template.content, outside the
+      // element's ordinary descendant tree. Component roots and setup scripts
+      // wrapped by caller-owned :if/:for directives must still be discoverable
+      // for scope remapping before those templates are cloned.
+      var entersTemplateContent = node.tagName === 'TEMPLATE' && node.content;
+      var childRoot = entersTemplateContent
+        ? node.content
+        : node;
+      Array.from(childRoot.childNodes || []).forEach(function(child) {
+        visit(child, insideTemplateContent || entersTemplateContent);
+      });
+    }
+
+    nodes.forEach(function(node) { visit(node, false); });
   }
 
   // A signal component expanded inside <template :for> carries a compiled
@@ -4950,7 +4964,11 @@ else if (typeof value === 'string') {
   function hydrateComponentScopes(nodes, callerScope) {
     var roots = [];
     var scripts = [];
-    forEachGroupElement(nodes, function(node) {
+    forEachGroupElement(nodes, function(node, insideTemplateContent) {
+      // A template's content is inert source material. Remapping must traverse
+      // it, but setup and event hydration belong to the live clones inserted by
+      // bindIf/bindFor, where the correct iteration scope is available.
+      if (insideTemplateContent) return;
       if (node.hasAttribute && node.hasAttribute('data-stx-scope')) roots.push(node);
       if (node.tagName === 'SCRIPT' && node.hasAttribute('data-stx-scoped')) scripts.push(node);
     });
@@ -5780,37 +5798,38 @@ catch (e2) {
         pick.el.__stx_shown_at = performance.now();
         if (!pick.childrenProcessed) {
           pick.childrenProcessed = true;
-          // Defer child processing (same rationale as bindIf, CLAUDE.md
-          // item 35): keep child effects from subscribing to THIS chain
-          // effect's tracked signals.
-          (function (branch) {
-            setTimeout(function () {
-              var childScope = { ...globalHelpers, ...capturedComponentScope, ...(branch.capturedElementScope || {}) };
-              // Components compiled inside any branch of an if/else-if/else
-              // chain carry scoped setup scripts with them. Branch nodes are
-              // detached before those scripts can execute, so simply
-              // re-inserting the selected branch leaves component props,
-              // events, directives, and projected slot expressions inert.
-              // Hydrate those scopes before the normal subtree walk, matching
-              // the single-template :if and :for insertion paths.
-              var previouslyTrackedNodes = new Set();
-              branch.nodes.forEach(function (n) {
-                if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
-              });
-              hydrateComponentScopes(branch.nodes, childScope);
-              branch.nodes.forEach(function (n) {
-                if (n.nodeType !== 1) return; // whitespace/text between template children
-                // A scoped component receives its disposer in the outer scope
-                // walk immediately after processElement returns from binding
-                // this conditional. That first pass intentionally stops at
-                // :if, so a disposer does not mean its children were hydrated.
-                if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
-                  processElement(n, childScope);
-                n.removeAttribute('x-cloak');
-                n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
-              });
-            }, 0);
-          })(pick);
+          // Hydrate before the outer scope walk can see the inserted branch.
+          // Chromium executes scripts cloned from template.content as soon as
+          // they are connected, so deferring this pass allowed the global walk
+          // to process projected slot expressions without the loop caller
+          // scope. peek() keeps this synchronous pass from subscribing child
+          // reads to the current chain effect.
+          peek(function () {
+            var childScope = { ...globalHelpers, ...capturedComponentScope, ...(pick.capturedElementScope || {}) };
+            // Components compiled inside any branch of an if/else-if/else
+            // chain carry scoped setup scripts with them. Branch nodes are
+            // detached before those scripts can execute, so simply
+            // re-inserting the selected branch leaves component props,
+            // events, directives, and projected slot expressions inert.
+            // Hydrate those scopes before the normal subtree walk, matching
+            // the single-template :if and :for insertion paths.
+            var previouslyTrackedNodes = new Set();
+            pick.nodes.forEach(function (n) {
+              if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
+            });
+            hydrateComponentScopes(pick.nodes, childScope);
+            pick.nodes.forEach(function (n) {
+              if (n.nodeType !== 1) return; // whitespace/text between template children
+              // A scoped component receives its disposer in the outer scope
+              // walk immediately after processElement returns from binding
+              // this conditional. That first pass intentionally stops at
+              // :if, so a disposer does not mean its children were hydrated.
+              if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
+                processElement(n, childScope);
+              n.removeAttribute('x-cloak');
+              n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
+            });
+          });
         }
       }
 
@@ -5981,10 +6000,13 @@ else if (!value && isInserted) {
         else if (value && isInserted && !childrenProcessed) {
           // Initial template content is cloned before the effect runs. Process
           // it after the condition is confirmed so hidden branches stay inert.
+          // Keep hydration synchronous so the outer scope walk cannot bind
+          // caller-owned slot expressions first, while peek() prevents child
+          // reads from subscribing to this conditional effect.
           childrenProcessed = true;
-          setTimeout(function() {
+          peek(function() {
             if (isInserted) processTemplateNodes(currentNodes);
-          }, 0);
+          });
         }
       }
 else {

package/dist/pwa.js

@@ -3895,7 +3895,10 @@ catch (e) {
       }
     }
     if (el.nodeType === Node.TEXT_NODE) {
-      const text = el.textContent;
+      // DOM textContent is specified as a string, but lightweight DOM
+      // implementations and user-created nodes can retain a numeric value
+      // assigned by a binding. Normalize before interpolation detection.
+      const text = el.textContent == null ? '' : String(el.textContent);
       if (text && text.includes('{{')) {
         const parts = text.split(/(\\{\\{[\\s\\S]+?\\}\\})/g);
         if (parts.length > 1) {
@@ -4805,13 +4808,24 @@ else if (typeof value === 'string') {
   var __forComponentSetupFactories = new Map();
 
   function forEachGroupElement(nodes, callback) {
-    nodes.forEach(function(node) {
+    function visit(node, insideTemplateContent) {
       if (!node || node.nodeType !== Node.ELEMENT_NODE) return;
-      callback(node);
-      if (node.querySelectorAll) {
-        node.querySelectorAll('*').forEach(function(child) { callback(child); });
-      }
-    });
+      callback(node, insideTemplateContent);
+
+      // HTMLTemplateElement children live in template.content, outside the
+      // element's ordinary descendant tree. Component roots and setup scripts
+      // wrapped by caller-owned :if/:for directives must still be discoverable
+      // for scope remapping before those templates are cloned.
+      var entersTemplateContent = node.tagName === 'TEMPLATE' && node.content;
+      var childRoot = entersTemplateContent
+        ? node.content
+        : node;
+      Array.from(childRoot.childNodes || []).forEach(function(child) {
+        visit(child, insideTemplateContent || entersTemplateContent);
+      });
+    }
+
+    nodes.forEach(function(node) { visit(node, false); });
   }
 
   // A signal component expanded inside <template :for> carries a compiled
@@ -4859,7 +4873,11 @@ else if (typeof value === 'string') {
   function hydrateComponentScopes(nodes, callerScope) {
     var roots = [];
     var scripts = [];
-    forEachGroupElement(nodes, function(node) {
+    forEachGroupElement(nodes, function(node, insideTemplateContent) {
+      // A template's content is inert source material. Remapping must traverse
+      // it, but setup and event hydration belong to the live clones inserted by
+      // bindIf/bindFor, where the correct iteration scope is available.
+      if (insideTemplateContent) return;
       if (node.hasAttribute && node.hasAttribute('data-stx-scope')) roots.push(node);
       if (node.tagName === 'SCRIPT' && node.hasAttribute('data-stx-scoped')) scripts.push(node);
     });
@@ -5689,37 +5707,38 @@ catch (e2) {
         pick.el.__stx_shown_at = performance.now();
         if (!pick.childrenProcessed) {
           pick.childrenProcessed = true;
-          // Defer child processing (same rationale as bindIf, CLAUDE.md
-          // item 35): keep child effects from subscribing to THIS chain
-          // effect's tracked signals.
-          (function (branch) {
-            setTimeout(function () {
-              var childScope = { ...globalHelpers, ...capturedComponentScope, ...(branch.capturedElementScope || {}) };
-              // Components compiled inside any branch of an if/else-if/else
-              // chain carry scoped setup scripts with them. Branch nodes are
-              // detached before those scripts can execute, so simply
-              // re-inserting the selected branch leaves component props,
-              // events, directives, and projected slot expressions inert.
-              // Hydrate those scopes before the normal subtree walk, matching
-              // the single-template :if and :for insertion paths.
-              var previouslyTrackedNodes = new Set();
-              branch.nodes.forEach(function (n) {
-                if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
-              });
-              hydrateComponentScopes(branch.nodes, childScope);
-              branch.nodes.forEach(function (n) {
-                if (n.nodeType !== 1) return; // whitespace/text between template children
-                // A scoped component receives its disposer in the outer scope
-                // walk immediately after processElement returns from binding
-                // this conditional. That first pass intentionally stops at
-                // :if, so a disposer does not mean its children were hydrated.
-                if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
-                  processElement(n, childScope);
-                n.removeAttribute('x-cloak');
-                n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
-              });
-            }, 0);
-          })(pick);
+          // Hydrate before the outer scope walk can see the inserted branch.
+          // Chromium executes scripts cloned from template.content as soon as
+          // they are connected, so deferring this pass allowed the global walk
+          // to process projected slot expressions without the loop caller
+          // scope. peek() keeps this synchronous pass from subscribing child
+          // reads to the current chain effect.
+          peek(function () {
+            var childScope = { ...globalHelpers, ...capturedComponentScope, ...(pick.capturedElementScope || {}) };
+            // Components compiled inside any branch of an if/else-if/else
+            // chain carry scoped setup scripts with them. Branch nodes are
+            // detached before those scripts can execute, so simply
+            // re-inserting the selected branch leaves component props,
+            // events, directives, and projected slot expressions inert.
+            // Hydrate those scopes before the normal subtree walk, matching
+            // the single-template :if and :for insertion paths.
+            var previouslyTrackedNodes = new Set();
+            pick.nodes.forEach(function (n) {
+              if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
+            });
+            hydrateComponentScopes(pick.nodes, childScope);
+            pick.nodes.forEach(function (n) {
+              if (n.nodeType !== 1) return; // whitespace/text between template children
+              // A scoped component receives its disposer in the outer scope
+              // walk immediately after processElement returns from binding
+              // this conditional. That first pass intentionally stops at
+              // :if, so a disposer does not mean its children were hydrated.
+              if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
+                processElement(n, childScope);
+              n.removeAttribute('x-cloak');
+              n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
+            });
+          });
         }
       }
 
@@ -5890,10 +5909,13 @@ else if (!value && isInserted) {
         else if (value && isInserted && !childrenProcessed) {
           // Initial template content is cloned before the effect runs. Process
           // it after the condition is confirmed so hidden branches stay inert.
+          // Keep hydration synchronous so the outer scope walk cannot bind
+          // caller-owned slot expressions first, while peek() prevents child
+          // reads from subscribing to this conditional effect.
           childrenProcessed = true;
-          setTimeout(function() {
+          peek(function() {
             if (isInserted) processTemplateNodes(currentNodes);
-          }, 0);
+          });
         }
       }
 else {

package/dist/signals.js

@@ -1970,7 +1970,10 @@ catch (e) {
       }
     }
     if (el.nodeType === Node.TEXT_NODE) {
-      const text = el.textContent;
+      // DOM textContent is specified as a string, but lightweight DOM
+      // implementations and user-created nodes can retain a numeric value
+      // assigned by a binding. Normalize before interpolation detection.
+      const text = el.textContent == null ? '' : String(el.textContent);
       if (text && text.includes('{{')) {
         const parts = text.split(/(\\{\\{[\\s\\S]+?\\}\\})/g);
         if (parts.length > 1) {
@@ -2880,13 +2883,24 @@ else if (typeof value === 'string') {
   var __forComponentSetupFactories = new Map();
 
   function forEachGroupElement(nodes, callback) {
-    nodes.forEach(function(node) {
+    function visit(node, insideTemplateContent) {
       if (!node || node.nodeType !== Node.ELEMENT_NODE) return;
-      callback(node);
-      if (node.querySelectorAll) {
-        node.querySelectorAll('*').forEach(function(child) { callback(child); });
-      }
-    });
+      callback(node, insideTemplateContent);
+
+      // HTMLTemplateElement children live in template.content, outside the
+      // element's ordinary descendant tree. Component roots and setup scripts
+      // wrapped by caller-owned :if/:for directives must still be discoverable
+      // for scope remapping before those templates are cloned.
+      var entersTemplateContent = node.tagName === 'TEMPLATE' && node.content;
+      var childRoot = entersTemplateContent
+        ? node.content
+        : node;
+      Array.from(childRoot.childNodes || []).forEach(function(child) {
+        visit(child, insideTemplateContent || entersTemplateContent);
+      });
+    }
+
+    nodes.forEach(function(node) { visit(node, false); });
   }
 
   // A signal component expanded inside <template :for> carries a compiled
@@ -2934,7 +2948,11 @@ else if (typeof value === 'string') {
   function hydrateComponentScopes(nodes, callerScope) {
     var roots = [];
     var scripts = [];
-    forEachGroupElement(nodes, function(node) {
+    forEachGroupElement(nodes, function(node, insideTemplateContent) {
+      // A template's content is inert source material. Remapping must traverse
+      // it, but setup and event hydration belong to the live clones inserted by
+      // bindIf/bindFor, where the correct iteration scope is available.
+      if (insideTemplateContent) return;
       if (node.hasAttribute && node.hasAttribute('data-stx-scope')) roots.push(node);
       if (node.tagName === 'SCRIPT' && node.hasAttribute('data-stx-scoped')) scripts.push(node);
     });
@@ -3764,37 +3782,38 @@ catch (e2) {
         pick.el.__stx_shown_at = performance.now();
         if (!pick.childrenProcessed) {
           pick.childrenProcessed = true;
-          // Defer child processing (same rationale as bindIf, CLAUDE.md
-          // item 35): keep child effects from subscribing to THIS chain
-          // effect's tracked signals.
-          (function (branch) {
-            setTimeout(function () {
-              var childScope = { ...globalHelpers, ...capturedComponentScope, ...(branch.capturedElementScope || {}) };
-              // Components compiled inside any branch of an if/else-if/else
-              // chain carry scoped setup scripts with them. Branch nodes are
-              // detached before those scripts can execute, so simply
-              // re-inserting the selected branch leaves component props,
-              // events, directives, and projected slot expressions inert.
-              // Hydrate those scopes before the normal subtree walk, matching
-              // the single-template :if and :for insertion paths.
-              var previouslyTrackedNodes = new Set();
-              branch.nodes.forEach(function (n) {
-                if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
-              });
-              hydrateComponentScopes(branch.nodes, childScope);
-              branch.nodes.forEach(function (n) {
-                if (n.nodeType !== 1) return; // whitespace/text between template children
-                // A scoped component receives its disposer in the outer scope
-                // walk immediately after processElement returns from binding
-                // this conditional. That first pass intentionally stops at
-                // :if, so a disposer does not mean its children were hydrated.
-                if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
-                  processElement(n, childScope);
-                n.removeAttribute('x-cloak');
-                n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
-              });
-            }, 0);
-          })(pick);
+          // Hydrate before the outer scope walk can see the inserted branch.
+          // Chromium executes scripts cloned from template.content as soon as
+          // they are connected, so deferring this pass allowed the global walk
+          // to process projected slot expressions without the loop caller
+          // scope. peek() keeps this synchronous pass from subscribing child
+          // reads to the current chain effect.
+          peek(function () {
+            var childScope = { ...globalHelpers, ...capturedComponentScope, ...(pick.capturedElementScope || {}) };
+            // Components compiled inside any branch of an if/else-if/else
+            // chain carry scoped setup scripts with them. Branch nodes are
+            // detached before those scripts can execute, so simply
+            // re-inserting the selected branch leaves component props,
+            // events, directives, and projected slot expressions inert.
+            // Hydrate those scopes before the normal subtree walk, matching
+            // the single-template :if and :for insertion paths.
+            var previouslyTrackedNodes = new Set();
+            pick.nodes.forEach(function (n) {
+              if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
+            });
+            hydrateComponentScopes(pick.nodes, childScope);
+            pick.nodes.forEach(function (n) {
+              if (n.nodeType !== 1) return; // whitespace/text between template children
+              // A scoped component receives its disposer in the outer scope
+              // walk immediately after processElement returns from binding
+              // this conditional. That first pass intentionally stops at
+              // :if, so a disposer does not mean its children were hydrated.
+              if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
+                processElement(n, childScope);
+              n.removeAttribute('x-cloak');
+              n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
+            });
+          });
         }
       }
 
@@ -3965,10 +3984,13 @@ else if (!value && isInserted) {
         else if (value && isInserted && !childrenProcessed) {
           // Initial template content is cloned before the effect runs. Process
           // it after the condition is confirmed so hidden branches stay inert.
+          // Keep hydration synchronous so the outer scope walk cannot bind
+          // caller-owned slot expressions first, while peek() prevents child
+          // reads from subscribing to this conditional effect.
           childrenProcessed = true;
-          setTimeout(function() {
+          peek(function() {
             if (isInserted) processTemplateNodes(currentNodes);
-          }, 0);
+          });
         }
       }
 else {

package/dist/ssg.js

@@ -2704,7 +2704,10 @@ catch (e) {
       }
     }
     if (el.nodeType === Node.TEXT_NODE) {
-      const text = el.textContent;
+      // DOM textContent is specified as a string, but lightweight DOM
+      // implementations and user-created nodes can retain a numeric value
+      // assigned by a binding. Normalize before interpolation detection.
+      const text = el.textContent == null ? '' : String(el.textContent);
       if (text && text.includes('{{')) {
         const parts = text.split(/(\\{\\{[\\s\\S]+?\\}\\})/g);
         if (parts.length > 1) {
@@ -3614,13 +3617,24 @@ else if (typeof value === 'string') {
   var __forComponentSetupFactories = new Map();
 
   function forEachGroupElement(nodes, callback) {
-    nodes.forEach(function(node) {
+    function visit(node, insideTemplateContent) {
       if (!node || node.nodeType !== Node.ELEMENT_NODE) return;
-      callback(node);
-      if (node.querySelectorAll) {
-        node.querySelectorAll('*').forEach(function(child) { callback(child); });
-      }
-    });
+      callback(node, insideTemplateContent);
+
+      // HTMLTemplateElement children live in template.content, outside the
+      // element's ordinary descendant tree. Component roots and setup scripts
+      // wrapped by caller-owned :if/:for directives must still be discoverable
+      // for scope remapping before those templates are cloned.
+      var entersTemplateContent = node.tagName === 'TEMPLATE' && node.content;
+      var childRoot = entersTemplateContent
+        ? node.content
+        : node;
+      Array.from(childRoot.childNodes || []).forEach(function(child) {
+        visit(child, insideTemplateContent || entersTemplateContent);
+      });
+    }
+
+    nodes.forEach(function(node) { visit(node, false); });
   }
 
   // A signal component expanded inside <template :for> carries a compiled
@@ -3668,7 +3682,11 @@ else if (typeof value === 'string') {
   function hydrateComponentScopes(nodes, callerScope) {
     var roots = [];
     var scripts = [];
-    forEachGroupElement(nodes, function(node) {
+    forEachGroupElement(nodes, function(node, insideTemplateContent) {
+      // A template's content is inert source material. Remapping must traverse
+      // it, but setup and event hydration belong to the live clones inserted by
+      // bindIf/bindFor, where the correct iteration scope is available.
+      if (insideTemplateContent) return;
       if (node.hasAttribute && node.hasAttribute('data-stx-scope')) roots.push(node);
       if (node.tagName === 'SCRIPT' && node.hasAttribute('data-stx-scoped')) scripts.push(node);
     });
@@ -4498,37 +4516,38 @@ catch (e2) {
         pick.el.__stx_shown_at = performance.now();
         if (!pick.childrenProcessed) {
           pick.childrenProcessed = true;
-          // Defer child processing (same rationale as bindIf, CLAUDE.md
-          // item 35): keep child effects from subscribing to THIS chain
-          // effect's tracked signals.
-          (function (branch) {
-            setTimeout(function () {
-              var childScope = { ...globalHelpers, ...capturedComponentScope, ...(branch.capturedElementScope || {}) };
-              // Components compiled inside any branch of an if/else-if/else
-              // chain carry scoped setup scripts with them. Branch nodes are
-              // detached before those scripts can execute, so simply
-              // re-inserting the selected branch leaves component props,
-              // events, directives, and projected slot expressions inert.
-              // Hydrate those scopes before the normal subtree walk, matching
-              // the single-template :if and :for insertion paths.
-              var previouslyTrackedNodes = new Set();
-              branch.nodes.forEach(function (n) {
-                if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
-              });
-              hydrateComponentScopes(branch.nodes, childScope);
-              branch.nodes.forEach(function (n) {
-                if (n.nodeType !== 1) return; // whitespace/text between template children
-                // A scoped component receives its disposer in the outer scope
-                // walk immediately after processElement returns from binding
-                // this conditional. That first pass intentionally stops at
-                // :if, so a disposer does not mean its children were hydrated.
-                if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
-                  processElement(n, childScope);
-                n.removeAttribute('x-cloak');
-                n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
-              });
-            }, 0);
-          })(pick);
+          // Hydrate before the outer scope walk can see the inserted branch.
+          // Chromium executes scripts cloned from template.content as soon as
+          // they are connected, so deferring this pass allowed the global walk
+          // to process projected slot expressions without the loop caller
+          // scope. peek() keeps this synchronous pass from subscribing child
+          // reads to the current chain effect.
+          peek(function () {
+            var childScope = { ...globalHelpers, ...capturedComponentScope, ...(pick.capturedElementScope || {}) };
+            // Components compiled inside any branch of an if/else-if/else
+            // chain carry scoped setup scripts with them. Branch nodes are
+            // detached before those scripts can execute, so simply
+            // re-inserting the selected branch leaves component props,
+            // events, directives, and projected slot expressions inert.
+            // Hydrate those scopes before the normal subtree walk, matching
+            // the single-template :if and :for insertion paths.
+            var previouslyTrackedNodes = new Set();
+            pick.nodes.forEach(function (n) {
+              if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
+            });
+            hydrateComponentScopes(pick.nodes, childScope);
+            pick.nodes.forEach(function (n) {
+              if (n.nodeType !== 1) return; // whitespace/text between template children
+              // A scoped component receives its disposer in the outer scope
+              // walk immediately after processElement returns from binding
+              // this conditional. That first pass intentionally stops at
+              // :if, so a disposer does not mean its children were hydrated.
+              if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
+                processElement(n, childScope);
+              n.removeAttribute('x-cloak');
+              n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
+            });
+          });
         }
       }
 
@@ -4699,10 +4718,13 @@ else if (!value && isInserted) {
         else if (value && isInserted && !childrenProcessed) {
           // Initial template content is cloned before the effect runs. Process
           // it after the condition is confirmed so hidden branches stay inert.
+          // Keep hydration synchronous so the outer scope walk cannot bind
+          // caller-owned slot expressions first, while peek() prevents child
+          // reads from subscribing to this conditional effect.
           childrenProcessed = true;
-          setTimeout(function() {
+          peek(function() {
             if (isInserted) processTemplateNodes(currentNodes);
-          }, 0);
+          });
         }
       }
 else {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/stx",
   "type": "module",
-  "version": "0.2.123",
+  "version": "0.2.125",
   "description": "A performant UI Framework. Powered by Bun.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -117,12 +117,12 @@
   "dependencies": {
     "@cwcss/crosswind": "^0.2.12",
     "@stacksjs/clapp": "^0.2.0",
-    "@stacksjs/desktop": "0.2.123",
-    "@stacksjs/sanitizer": "0.2.123",
+    "@stacksjs/desktop": "0.2.125",
+    "@stacksjs/sanitizer": "0.2.125",
     "@stacksjs/ts-i18n": "^0.1.11",
-    "bun-plugin-stx": "0.2.123",
+    "bun-plugin-stx": "0.2.125",
     "bunfig": "^0.15.15",
-    "stx-router": "0.2.123",
+    "stx-router": "0.2.125",
     "ts-broadcasting": "^0.0.9",
     "ts-images": "^0.1.9",
     "ts-syntax-highlighter": "^0.2.1"