chore: wip

Author: glennmichael123

packages/router/src/client.ts

@@ -99,21 +99,49 @@ else {
       var curStyles=document.querySelectorAll('head style');
       var newStyles=doc.querySelectorAll('head style');
 
+      // Merge crosswind styles instead of replacing — persistent elements
+      // (nav, footer) outside <main> still need their utility classes
+      var curCrosswind=document.querySelector('head style[data-crosswind]');
+      var newCrosswind=null;
+      newStyles.forEach(function(s){if(s.getAttribute('data-crosswind'))newCrosswind=s});
+
+      if(curCrosswind&&newCrosswind){
+        // Parse existing rules to avoid duplicates
+        var existing=curCrosswind.textContent||'';
+        var incoming_css=newCrosswind.textContent||'';
+        // Extract individual rule blocks from new CSS
+        var newRules=[];
+        incoming_css.replace(/([^{}]+\\{[^{}]*\\})/g,function(m){
+          if(existing.indexOf(m.trim())===-1)newRules.push(m);
+          return m;
+        });
+        if(newRules.length>0){
+          curCrosswind.textContent=existing+'\\n'+newRules.join('\\n');
+        }
+      }
+
       var incoming=[];
       newStyles.forEach(function(s){
-        if(!keepIds[s.id]){
+        if(!keepIds[s.id]&&!s.getAttribute('data-crosswind')){
           var ns=document.createElement('style');
           ns.textContent=s.textContent;
           ns.setAttribute('data-stx-incoming','');
-          if(s.getAttribute('data-crosswind'))ns.setAttribute('data-crosswind',s.getAttribute('data-crosswind'));
           document.head.appendChild(ns);
           incoming.push(ns);
         }
       });
 
-      // Remove old styles (except persistent ones and incoming)
+      // If no existing crosswind but new page has one, add it
+      if(!curCrosswind&&newCrosswind){
+        var ns=document.createElement('style');
+        ns.textContent=newCrosswind.textContent;
+        ns.setAttribute('data-crosswind',newCrosswind.getAttribute('data-crosswind'));
+        document.head.appendChild(ns);
+      }
+
+      // Remove old styles (except persistent ones, crosswind, and incoming)
       curStyles.forEach(function(s){
-        if(!keepIds[s.id]&&!s.hasAttribute('data-stx-incoming'))s.remove();
+        if(!keepIds[s.id]&&!s.hasAttribute('data-stx-incoming')&&!s.hasAttribute('data-crosswind'))s.remove();
       });
 
       incoming.forEach(function(s){s.removeAttribute('data-stx-incoming')});

packages/stx/src/events.ts

@@ -578,7 +578,11 @@ export function processEventDirectives(
   }
 
   // SFC mode: collect bindings, don't generate standalone script
+  // But skip if template has x-data scopes - reactive system handles events in those
   if (context.__stx_sfc_mode) {
+    if (/x-data\s*=\s*["']/.test(template)) {
+      return template
+    }
     const { template: processed, bindings } = extractAndProcessEvents(template)
     const existing = (context.__stx_event_bindings || []) as ParsedEvent[]
     context.__stx_event_bindings = [...existing, ...bindings]

packages/stx/src/process.ts

@@ -669,6 +669,74 @@ export function injectRouterScript(template: string): string {
   return template.slice(0, bodyCloseIdx) + routerScript + '\n</body>' + template.slice(bodyCloseIdx + 7)
 }
 
+/**
+ * Add x-cloak to HTML elements that contain unresolved {{ }} expressions.
+ * These expressions were preserved for client-side evaluation (signals, loop vars, etc.).
+ * x-cloak hides them until the JS runtime processes and reveals them — prevents FOUC.
+ */
+function addCloakToUnresolvedExpressions(html: string): string {
+  // Add x-cloak to elements whose text content contains {{ }} expressions.
+  // We parse tag boundaries carefully to avoid breaking attributes that contain ">".
+  const tagNames = 'div|span|p|h[1-6]|td|th|li|a|button|label|section|article|header|footer|main|nav|aside|dd|dt|figcaption|summary|caption|blockquote|pre|code|em|strong|small|sub|sup|time|mark|abbr|cite|q|s|u|b|i'
+  const tagStartRe = new RegExp(`<(${tagNames})\\b`, 'gi')
+  let result = ''
+  let lastIndex = 0
+  let tagMatch: RegExpExecArray | null
+
+  // eslint-disable-next-line no-cond-assign
+  while ((tagMatch = tagStartRe.exec(html)) !== null) {
+    const tagOpenStart = tagMatch.index
+
+    // Find the real closing ">" of this opening tag, skipping ">" inside quoted attributes
+    let i = tagOpenStart + tagMatch[0].length
+    let inSingleQuote = false
+    let inDoubleQuote = false
+    let tagCloseIdx = -1
+
+    while (i < html.length) {
+      const ch = html[i]
+      if (inSingleQuote) {
+        if (ch === '\'') inSingleQuote = false
+      }
+      else if (inDoubleQuote) {
+        if (ch === '"') inDoubleQuote = false
+      }
+      else if (ch === '\'') {
+        inSingleQuote = true
+      }
+      else if (ch === '"') {
+        inDoubleQuote = true
+      }
+      else if (ch === '>') {
+        tagCloseIdx = i
+        break
+      }
+      i++
+    }
+
+    if (tagCloseIdx === -1) continue
+
+    const fullTag = html.slice(tagOpenStart, tagCloseIdx + 1)
+
+    // Skip if already has x-cloak
+    if (fullTag.includes('x-cloak')) continue
+
+    // Look at text content after this tag until the next "</" or "<" tag
+    const afterTag = html.slice(tagCloseIdx + 1)
+    const closingIdx = afterTag.indexOf('</')
+    const textContent = closingIdx >= 0 ? afterTag.slice(0, closingIdx) : afterTag.slice(0, 200)
+
+    if (/\{\{[\s\S]*?\}\}/.test(textContent)) {
+      // Insert x-cloak before the closing >
+      result += html.slice(lastIndex, tagCloseIdx) + ' x-cloak>'
+      lastIndex = tagCloseIdx + 1
+    }
+  }
+
+  result += html.slice(lastIndex)
+  return result
+}
+
 /**
  * Process STX signals in template.
  * Handles script setup, runtime injection, and transforms.
@@ -1911,6 +1979,11 @@ async function processOtherDirectives(
   // Process expressions now (delayed to allow other directives to generate expressions)
   output = await processExpressions(output, context, filePath)
 
+  // Add x-cloak to elements containing unresolved {{ }} expressions (preserved for client-side).
+  // This prevents FOUC — raw mustache syntax flashing before the JS runtime processes them.
+  // The signals runtime removes x-cloak after binding, identical to Vue's v-cloak approach.
+  output = addCloakToUnresolvedExpressions(output)
+
   // Process reactive bindings (:class, :text, stx-class, stx-bind:class, etc.)
   // This generates client-side JS for store-aware reactive updates
   output = processTemplateBindings(output)