@stacksjs/stx 0.2.112 → 0.2.114

package/dist/client-script-bundler.js

@@ -2,7 +2,7 @@ import path from "node:path";
 import fs from "node:fs";
 import { getPublicEnvDefine } from "./public-env.js";
 import { stateDir } from "./state-dir.js";
-const EXTERNAL_PATTERNS = [
+const BUNDLE_CACHE_VERSION = 4, EXTERNAL_PATTERNS = [
   /^stx$/,
   /^@stacksjs\/stx$/,
   /^@stores$/,
@@ -10,10 +10,7 @@ const EXTERNAL_PATTERNS = [
   /^@composables$/
 ];
 export function hasUserImports(code) {
-  const importRegex = /^\s*import\s+(?!type\s)/gm;
-  if (!code.match(importRegex))
-    return !1;
-  const fullImportRegex = /^\s*import\s+(?!type\s).*?\s+from\s+['"]([^'"]+)['"]/gm;
+  const fullImportRegex = /^[ \t]*import[ \t]+(?!type(?:[ \t]|{))[\s\S]*?\s+from\s+['"]([^'"]+)['"][ \t]*;?/gm;
   let match;
   while ((match = fullImportRegex.exec(code)) !== null) {
     const source = match[1];
@@ -22,7 +19,7 @@ export function hasUserImports(code) {
       return !0;
     }
   }
-  const sideEffectRegex = /^\s*import\s+['"]([^'"]+)['"]/gm;
+  const sideEffectRegex = /^[ \t]*import[ \t]+['"]([^'"]+)['"]/gm;
   while ((match = sideEffectRegex.exec(code)) !== null) {
     const source = match[1];
     if (/\.css(?:\?.*)?$/.test(source))
@@ -66,6 +63,14 @@ function createBundlePlugin(projectRoot, templateDir, tmpEntry, inputFiles) {
         path: args.path,
         external: !0
       }));
+      build.onResolve({ filter: /^\// }, (args) => {
+        if (fs.existsSync(args.path))
+          return { path: args.path };
+        return {
+          path: args.path,
+          external: !0
+        };
+      });
       build.onResolve({ filter: /^\.\.?\// }, (args) => {
         const resolved = resolveRelative(args.importer, args.path);
         inputFiles.add(resolved);
@@ -98,7 +103,7 @@ function createBundlePlugin(projectRoot, templateDir, tmpEntry, inputFiles) {
 }
 export async function bundleClientScript(code, filePath, options = {}) {
   const projectRoot = options.projectRoot || process.cwd(), minify = options.minify ?? !1, cacheDir = options.cacheDir || stateDir(projectRoot, "bundle-cache"), hasher = new Bun.CryptoHasher("md5");
-  hasher.update(code + filePath);
+  hasher.update(`${BUNDLE_CACHE_VERSION}\x00${code}\x00${filePath}`);
   const hash = hasher.digest("hex").slice(0, 12), cachePath = path.join(cacheDir, `${hash}.js`), depsPath = path.join(cacheDir, `${hash}.deps.json`), cacheFile = Bun.file(cachePath);
   if (await cacheFile.exists()) {
     const depsFile = Bun.file(depsPath);
@@ -176,19 +181,31 @@ export { ${declNames.join(", ")} }` : "";
       bundled = await output.text();
       break;
     }
-    const renamePairs = [];
+    const exposedBindings = [];
     for (const exp of bundled.matchAll(/^\s*export\s*\{([^}]*)\}\s*;?\s*$/gm))
       for (const spec of exp[1].split(",")) {
         const asMatch = spec.trim().match(/^([A-Za-z_$][\w$]*)\s+as\s+([A-Za-z_$][\w$]*)$/);
-        if (asMatch && asMatch[1] !== asMatch[2])
-          renamePairs.push([asMatch[2], asMatch[1]]);
+        if (asMatch) {
+          exposedBindings.push([asMatch[2], asMatch[1]]);
+          continue;
+        }
+        const name = spec.trim();
+        if (/^[A-Za-z_$][\w$]*$/.test(name))
+          exposedBindings.push([name, name]);
       }
-    bundled = bundled.replace(/^\s*export\s*\{[^}]*\}\s*;?\s*$/gm, "").replace(/^\s*export\s+default\s+.*$/gm, "").trim();
-    if (renamePairs.length > 0) {
-      const entries = renamePairs.map(([orig, id]) => `${JSON.stringify(orig)}: ${id}`).join(", ");
-      bundled += `
-var __stxScopeRenames = { ${entries} };`;
-    }
+    const externalImports = bundled.match(/^\s*import\s+[^;]+;?\s*$/gm) || [];
+    bundled = bundled.replace(/^\s*import\s+[^;]+;?\s*$/gm, "").replace(/^\s*export\s*\{[^}]*\}\s*;?\s*$/gm, "").replace(/^\s*export\s+default\s+.*$/gm, "").trim();
+    const namespace = `__stxBundle_${hash}`, returnedBindings = exposedBindings.map(([publicName, localName]) => `${JSON.stringify(publicName)}: ${localName}`).join(", "), publicDeclarations = exposedBindings.map(([publicName]) => `var ${publicName} = undefined;`).join(`
+`), publicAssignments = exposedBindings.map(([publicName]) => `${publicName} = ${namespace}[${JSON.stringify(publicName)}];`).join(`
+`);
+    bundled = `${externalImports.join(`
+`)}
+${publicDeclarations}
+var ${namespace} = (function() {
+${bundled}
+return { ${returnedBindings} };
+})();
+${publicAssignments}`.trim();
     console.log("[stx:bundler] bundled:", hash, "output:", bundled.length, "bytes");
     fs.mkdirSync(cacheDir, { recursive: !0 });
     await Bun.write(cachePath, bundled);

package/dist/client-script.js

@@ -184,6 +184,11 @@ const STX_AUTO_IMPORTS = [
   "useAsync",
   "useColorMode",
   "useDark",
+  "useMediaQuery",
+  "usePreferredDark",
+  "usePreferredLight",
+  "usePreferredReducedMotion",
+  "usePreferredContrast",
   "ref",
   "reactive",
   "computed",
@@ -210,6 +215,7 @@ const STX_AUTO_IMPORTS = [
   "useAttrs",
   "createStore",
   "defineStore",
+  "registerStoresClient",
   "useStore",
   "action",
   "createSelector",
@@ -294,7 +300,7 @@ function transformAutoImports(code) {
   const usedStxImports = new Set, usedBrowserImports = new Set;
   let transformedCode = code;
   transformedCode = transformedCode.replace(/^\s*import\s+type\s+\{[^}]*\}\s+from\s+['"][^'"]+['"]\s*;?\s*$/gm, "// [type import stripped]");
-  const existingImports = new Set, importRegex = /^\s*import\s+(?:type\s+)?{\s*([^}]+)\s*}\s+from\s+['"](@stacksjs\/browser|stx)['"]\s*;?\s*$/gm;
+  const existingImports = new Set, importRegex = /^\s*import\s+(?:type\s+)?{\s*([^}]+)\s*}\s+from\s+['"](@stacksjs\/browser|@stacksjs\/stx|stx)['"]\s*;?\s*$/gm;
   let match;
   while ((match = importRegex.exec(code)) !== null) {
     const imports = match[1], source = match[2];
@@ -302,7 +308,7 @@ function transformAutoImports(code) {
       continue;
     imports.split(",").map((s) => s.trim().split(/\s+as\s+/)[0]).filter((s) => s.length > 0).forEach((name) => {
       existingImports.add(name);
-      if (source === "stx")
+      if (source === "stx" || source === "@stacksjs/stx")
         usedStxImports.add(name);
       else
         usedBrowserImports.add(name);
@@ -374,6 +380,34 @@ export function extractBridgeData(context) {
   }
   return out;
 }
+function extractDestructuredBindings(pattern, objectPattern) {
+  const bindings = new Set;
+  for (const rawPart of pattern.split(",")) {
+    let part = rawPart.trim().replace(/^\.\.\./, "").trim();
+    if (!part)
+      continue;
+    if (objectPattern) {
+      const colon = part.lastIndexOf(":");
+      if (colon !== -1)
+        part = part.slice(colon + 1).trim();
+    }
+    part = part.split("=")[0].trim();
+    if (/^[A-Za-z_$][\w$]*$/.test(part))
+      bindings.add(part);
+  }
+  return bindings;
+}
+function declaresClientIdentifier(code, name) {
+  if (new RegExp(`(?:const|let|var|function|class)\\s+${name}\\b`).test(code))
+    return !0;
+  for (const match of code.matchAll(/(?:const|let|var)\s*\{([^}]*)\}/g))
+    if (extractDestructuredBindings(match[1], !0).has(name))
+      return !0;
+  for (const match of code.matchAll(/(?:const|let|var)\s*\[([^\]]*)\]/g))
+    if (extractDestructuredBindings(match[1], !1).has(name))
+      return !0;
+  return !1;
+}
 export function generateServerDataBridge(code, serverData) {
   if (!serverData)
     return "";
@@ -383,7 +417,7 @@ export function generateServerDataBridge(code, serverData) {
       continue;
     if (!new RegExp(`\\b${name}\\b`).test(code))
       continue;
-    if (new RegExp(`(?:const|let|var|function|class)\\s+${name}\\b`).test(code))
+    if (declaresClientIdentifier(code, name))
       continue;
     let json;
     try {
@@ -439,8 +473,13 @@ function generateSingleEventBinding(binding, index) {
   let handlerBody = "";
   if (checks)
     handlerBody += `${checks}; `;
-  const escapedHandler = handler.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  const escapedHandler = handler.replace(/\\/g, "\\\\").replace(/'/g, "\\'"), emitHelper = `var $emit = function(name, detail) {
+        $el.dispatchEvent(new CustomEvent(name, { detail: detail, bubbles: true, cancelable: true }))
+      };`;
   function scopeAwareHandler(h) {
+    if (/\$emit\s*\(/.test(h))
+      return `${emitHelper}
+      ${h}`;
     return `var scope = $el.closest('[data-stx-scope]');
       if (scope && scope.__stx_execute) {
         scope.__stx_execute('${escapedHandler}', $event, $el);
@@ -474,6 +513,12 @@ else {
       }
     }${optionsStr})
   })()`;
+  if (/\$emit\s*\(/.test(handler))
+    return `  var $el = document.getElementById('${elementId}')
+  if ($el) $el.addEventListener('${event}', function($event) {
+    ${handlerBody}${emitHelper}
+    ${handler}
+  }${optionsStr})`;
   return `  var $el = document.getElementById('${elementId}')
   if ($el) $el.addEventListener('${event}', function($event) {
     ${handlerBody}var scope = $el.closest('[data-stx-scope]');
@@ -740,7 +785,7 @@ ${autoImportCode}${code}
 ${eventCode}
 </script>`;
   }
-  const usesSignals = /\b(state|derived|effect|ref|reactive|computed|watch|watchEffect|useLocalStorage|useSessionStorage|useRef|useEventListener|useFetch|useDebounce|useDebouncedValue|useThrottle|useInterval|useTimeout|useToggle|useCounter|useClickOutside|useFocus|useAsync|useColorMode|useDark|useWebSocket|useRoute|useSearchParams|onMount|onDestroy|batch|untrack|peek)\s*(?:<[^>]*>)?\s*\(/.test(scriptContent), isSfcWrapped = /function __stx_setup_/.test(code), alreadyMounts = /\bstx\.mount\s*\(|\bstx\.mountEl\s*\(/.test(scriptContent);
+  const usesSignals = /\b(state|derived|effect|ref|reactive|computed|watch|watchEffect|useLocalStorage|useSessionStorage|useRef|useEventListener|useFetch|useDebounce|useDebouncedValue|useThrottle|useInterval|useTimeout|useToggle|useCounter|useClickOutside|useFocus|useAsync|useColorMode|useDark|useWebSocket|useRoute|useSearchParams|onMount|onDestroy|onMounted|onBeforeUnmount|onUnmounted|batch|untrack|peek)\s*(?:<[^>]*>)?\s*\(/.test(scriptContent), isSfcWrapped = /function __stx_setup_/.test(code), alreadyMounts = /\bstx\.mount\s*\(|\bstx\.mountEl\s*\(/.test(scriptContent);
   function wrapInMount(declarations) {
     const returnStmt = declarations.length > 0 ? `
   return { ${declarations.join(", ")} };` : "";

package/dist/component-renderer.js

@@ -1,12 +1,13 @@
 import { registry } from "./component-registry.js";
 import { registerBuiltins } from "./builtins/index.js";
 import { decodeStxProp, findComponentTags, parseMultilineAttributes, pascalToKebab, restoreStashedScripts, stashScriptElements } from "./component-processing.js";
+import { maskAtElementPosition, matchHtmlComment } from "./html-masking.js";
 import { renderComponentWithSlot, userComponentFileExists } from "./utils.js";
 import { createSafeFunction, isExpressionSafe, safeEvaluateObject } from "./safe-evaluator.js";
 import fs from "node:fs";
 import path from "node:path";
 let builtinsRegistered = !1;
-const htmlTags = new Set([
+const BOOLEAN_ATTRIBUTE_SENTINEL = "\x00stx-boolean-attribute", htmlTags = new Set([
   "a",
   "abbr",
   "address",
@@ -212,7 +213,7 @@ function parseComponentProps(rawProps, context, options) {
       continue;
     }
     if (attrName.startsWith(":")) {
-      const propName = kebabToCamel(attrName.slice(1)), expression = attrValue === "true" ? propName : attrValue;
+      const propName = kebabToCamel(attrName.slice(1)), expression = attrValue === BOOLEAN_ATTRIBUTE_SENTINEL ? propName : attrValue;
       try {
         if (!isExpressionSafe(expression)) {
           if (options.debug)
@@ -274,7 +275,7 @@ function parseComponentProps(rawProps, context, options) {
       }
       continue;
     }
-    resolved.static[attrName] = attrValue;
+    resolved.static[attrName] = attrValue === BOOLEAN_ATTRIBUTE_SENTINEL ? "true" : attrValue;
   }
   return resolved;
 }
@@ -326,7 +327,7 @@ function parseAllAttributes(attributesStr) {
         }
       props[name] = value;
     } else
-      props[name] = "true";
+      props[name] = BOOLEAN_ATTRIBUTE_SENTINEL;
   }
   return props;
 }
@@ -621,10 +622,10 @@ async function processCustomElementTags(template, context, filePath, options, de
       if (Object.keys(resolvedProps.clientReactive).length > 0)
         finalContent = emitClientReactiveAttrs(finalContent, resolvedProps.clientReactive);
       if (Object.keys(resolvedProps.events).length > 0) {
-        const firstTagMatch = finalContent.match(/^(\s*<)([a-zA-Z][a-zA-Z0-9-]*)(\s|>|\/)/s);
-        if (firstTagMatch) {
-          const eventAttrs = Object.entries(resolvedProps.events).map(([event, handler]) => `${event}="${escapeAttribute(handler)}"`).join(" "), insertPos = firstTagMatch[1].length + firstTagMatch[2].length;
-          finalContent = finalContent.substring(0, insertPos) + " " + eventAttrs + finalContent.substring(insertPos);
+        const root = findRenderedComponentRoot(finalContent);
+        if (root) {
+          const eventAttrs = Object.entries(resolvedProps.events).map(([event, handler]) => `${event}="${escapeAttribute(handler)}"`).join(" "), parentEvents = Object.keys(resolvedProps.events).map((event) => event.replace(/^@/, "").split(".")[0]).join(" ");
+          finalContent = finalContent.substring(0, root.insertPos) + ` data-stx-parent-events="${parentEvents}" ${eventAttrs}` + finalContent.substring(root.insertPos);
         }
       }
       result = result.substring(0, tag.startIndex) + finalContent + result.substring(tag.endIndex);
@@ -633,11 +634,48 @@ async function processCustomElementTags(template, context, filePath, options, de
   }
 }
 function emitClientReactiveAttrs(html, clientReactive) {
-  const firstTagMatch = html.match(/^(\s*<)([a-zA-Z][a-zA-Z0-9-]*)(\s|>|\/)/s);
-  if (!firstTagMatch)
+  const root = findRenderedComponentRoot(html);
+  if (!root)
     return html;
-  const reactiveAttrs = Object.entries(clientReactive).map(([key, expr]) => `:${key}="${expr.replace(/"/g, "&quot;")}"`).join(" "), insertPos = firstTagMatch[1].length + firstTagMatch[2].length;
-  return html.substring(0, insertPos) + " " + reactiveAttrs + html.substring(insertPos);
+  const structuralBindings = new Set(["if", "for", "show"]), reactiveAttrs = Object.entries(clientReactive).map(([key, expr]) => `:${pascalToKebab(key)}="${expr.replace(/"/g, "&quot;")}"`).join(" "), parentBindings = Object.keys(clientReactive).filter((key) => !structuralBindings.has(key)).map((key) => pascalToKebab(key)).join(" "), parentBindingAttr = parentBindings ? ` data-stx-parent-bindings="${parentBindings}"` : "";
+  return html.substring(0, root.insertPos) + `${parentBindingAttr} ${reactiveAttrs}` + html.substring(root.insertPos);
+}
+function findRenderedComponentRoot(html) {
+  const scopedRoot = /<([a-zA-Z][a-zA-Z0-9-]*)\b[^>]*\bdata-stx-scope(?:\s|=|>)/i.exec(html);
+  if (scopedRoot)
+    return {
+      insertPos: scopedRoot.index + 1 + scopedRoot[1].length
+    };
+  let cursor = 0;
+  while (cursor < html.length) {
+    const rest = html.slice(cursor), whitespace = rest.match(/^\s+/);
+    if (whitespace) {
+      cursor += whitespace[0].length;
+      continue;
+    }
+    if (rest.startsWith("<!--")) {
+      const end = html.indexOf("-->", cursor + 4);
+      if (end === -1)
+        return null;
+      cursor = end + 3;
+      continue;
+    }
+    const nonRootTag = rest.match(/^<(script|style)\b[^>]*>/i);
+    if (nonRootTag) {
+      const closeTag = `</${nonRootTag[1].toLowerCase()}>`, end = html.toLowerCase().indexOf(closeTag, cursor + nonRootTag[0].length);
+      if (end === -1)
+        return null;
+      cursor = end + closeTag.length;
+      continue;
+    }
+    const root = rest.match(/^<([a-zA-Z][a-zA-Z0-9-]*)(?:\s|>|\/)/);
+    if (!root)
+      return null;
+    return {
+      insertPos: cursor + 1 + root[1].length
+    };
+  }
+  return null;
 }
 export async function processComponents(template, context, filePath, options, dependencies) {
   if (!builtinsRegistered) {
@@ -647,12 +685,17 @@ export async function processComponents(template, context, filePath, options, de
   let output = await processESImports(template, context, filePath, options, dependencies);
   output = await processImports(output, context, filePath, options, dependencies);
   output = await processComponentDirectives(output, context, filePath, options, dependencies);
+  const nestedComments = [];
   for (let pass = 0;pass < 3; pass++) {
+    const masked = maskAtElementPosition(output, matchHtmlComment, (_token, index) => `\x00STX_COMPONENT_COMMENT_${nestedComments.length + index}\x00`);
+    nestedComments.push(...masked.tokens);
     const before = output;
-    output = await processCustomElementTags(output, context, filePath, options, dependencies);
+    output = await processCustomElementTags(masked.output, context, filePath, options, dependencies);
     if (output === before)
       break;
   }
+  if (nestedComments.length > 0)
+    output = output.replace(/\x00STX_COMPONENT_COMMENT_(\d+)\x00/g, (_match, index) => nestedComments[Number(index)] ?? "");
   if (options.debug) {
     const unresolved = findUnresolvedBuiltinTags(output);
     if (unresolved.length > 0)

package/dist/composable-loader.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Discover composable files and bundle them into a single script that
+ * populates `window.__composables`.
+ *
+ * Every file is concatenated into ONE IIFE, so composables can call each other
+ * directly without importing — their declarations share a scope once the
+ * import statements are stripped.
+ *
+ * Returns `null` when there is nothing to load, so callers can skip injection.
+ */
+export declare function getComposableScript(composablesDir?: string): Promise<string | null>;
+/**
+ * Clear the cached composable script (for dev mode hot reload).
+ */
+export declare function clearComposableCache(): void;

package/dist/composable-loader.js

@@ -0,0 +1,117 @@
+import path from "node:path";
+import { loadStxConfig } from "./config.js";
+import { getPublicEnvDefine } from "./public-env.js";
+import { STX_RUNTIME_GLOBALS } from "./runtime-globals.js";
+import { transformStoreImports } from "./store-imports.js";
+const _cachedComposableScripts = new Map, _cachedDirs = new Map, DEFAULT_DIR_CANDIDATES = ["composables", "functions"];
+function isSkippedFile(file) {
+  const name = path.basename(file, ".ts");
+  return name === "index" || name === "types" || file.endsWith(".d.ts");
+}
+async function resolveComposablesDir(composablesDir) {
+  if (composablesDir)
+    return path.resolve(composablesDir);
+  const cacheKey = `<default>:${process.cwd()}`, cachedDir = _cachedDirs.get(cacheKey);
+  if (cachedDir !== void 0)
+    return cachedDir;
+  const resolved = await probeDefaultDirs();
+  _cachedDirs.set(cacheKey, resolved);
+  return resolved;
+}
+async function probeDefaultDirs() {
+  const config = await loadStxConfig(), root = config.root || process.cwd(), configured = config.composablesDir;
+  if (configured)
+    return path.resolve(root, configured);
+  for (const candidate of DEFAULT_DIR_CANDIDATES) {
+    const dir = path.resolve(root, candidate);
+    try {
+      const glob = new Bun.Glob("**/*.ts");
+      for await (const file of glob.scan({ cwd: dir, absolute: !0 }))
+        if (!isSkippedFile(file))
+          return dir;
+    } catch {}
+  }
+  return null;
+}
+export async function getComposableScript(composablesDir) {
+  const resolvedDir = await resolveComposablesDir(composablesDir);
+  if (!resolvedDir)
+    return null;
+  const cached = _cachedComposableScripts.get(resolvedDir);
+  if (cached !== void 0)
+    return cached || null;
+  const composableFiles = [];
+  try {
+    const glob = new Bun.Glob("**/*.ts");
+    for await (const file of glob.scan({ cwd: resolvedDir, absolute: !0 })) {
+      if (isSkippedFile(file))
+        continue;
+      composableFiles.push(file);
+    }
+  } catch {
+    _cachedComposableScripts.set(resolvedDir, "");
+    return null;
+  }
+  if (composableFiles.length === 0) {
+    _cachedComposableScripts.set(resolvedDir, "");
+    return null;
+  }
+  composableFiles.sort();
+  const transpiler = new Bun.Transpiler({ loader: "ts", target: "browser", define: getPublicEnvDefine() }), chunks = [], exportedNames = new Set, declaredNames = new Set;
+  for (const file of composableFiles)
+    try {
+      let code = await Bun.file(file).text();
+      const composableName = path.basename(file, ".ts");
+      for (const match of code.matchAll(/\b(?:const|let|var|function|class)\s+([A-Z_a-z$][\w$]*)/g))
+        if (match[1])
+          declaredNames.add(match[1]);
+      try {
+        for (const name of transpiler.scan(code).exports)
+          if (name !== "default")
+            exportedNames.add(name);
+      } catch {}
+      code = transformStoreImports(code);
+      code = code.replace(/^import\s+.*from\s+['"][^'"]+['"]\s*;?\s*$/gm, "");
+      code = code.replace(/^export\s+(default\s+)?/gm, "");
+      code = transpiler.transformSync(code);
+      chunks.push(`// Composable: ${composableName}
+${code.trim()}`);
+    } catch (e) {
+      console.warn(`[stx] Failed to load composable ${file}:`, e);
+    }
+  if (chunks.length === 0 || exportedNames.size === 0) {
+    _cachedComposableScripts.set(resolvedDir, "");
+    return null;
+  }
+  const assignments = [...exportedNames].map((name) => `  try { __c[${JSON.stringify(name)}] = ${name}; } catch (e) {}`).join(`
+`), globalNames = JSON.stringify([...exportedNames]), joinedChunks = chunks.join(`
+
+`), code = `;(function(){
+window.__composables = window.__composables || {};
+var __c = window.__composables;
+var __stx = window.stx || {};
+${STX_RUNTIME_GLOBALS.filter((name) => !declaredNames.has(name) && new RegExp(`\\b${name}\\b`).test(joinedChunks)).map((name) => `var ${name} = __stx[${JSON.stringify(name)}];`).join(`
+`)}
+${joinedChunks}
+${assignments}
+  var __names = ${globalNames};
+  for (var __i = 0; __i < __names.length; __i++) {
+    var __n = __names[__i];
+    if (!(__n in __c)) continue;
+    var __takenByBuiltin = !!(window.stx && __n in window.stx);
+    if (__takenByBuiltin || __n in window) {
+      console.warn('[stx] composable "' + __n + '" is not available as a bare identifier: '
+        + (__takenByBuiltin ? 'a built-in of that name already exists' : 'window already defines that property')
+        + '. Rename it, or use: import { ' + __n + ' } from "@composables"');
+      continue;
+    }
+    window[__n] = __c[__n];
+  }
+})();`;
+  _cachedComposableScripts.set(resolvedDir, code);
+  return code;
+}
+export function clearComposableCache() {
+  _cachedComposableScripts.clear();
+  _cachedDirs.clear();
+}

package/dist/desktop.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Native desktop APIs.
+ *
+ * stx bundles `@stacksjs/desktop` so an app needs one dependency rather than
+ * three. Import windows, system tray, preferences, power management, global
+ * shortcuts and the rest of the native surface from here:
+ *
+ * ```typescript
+ * import { caffeinate, createPreferences, createWindow } from '@stacksjs/stx/desktop'
+ * ```
+ *
+ * For a menu bar app, prefer `@stacksjs/stx/menubar`, which composes these into
+ * a single declarative call.
+ */
+export * from '@stacksjs/desktop';

package/dist/desktop.js

@@ -0,0 +1 @@
+export * from "@stacksjs/desktop";

package/dist/dev-server/crosswind.js

@@ -49,8 +49,8 @@ async function tryImportCrosswind(importPath) {
   } catch {}
   return null;
 }
-function findCrosswindPaths() {
-  const paths = [], homeDir = process.env.HOME || process.env.USERPROFILE || "";
+function findProjectCrosswindPaths() {
+  const paths = [];
   let currentDir = process.cwd();
   while (currentDir !== path.dirname(currentDir)) {
     paths.push(path.join(currentDir, "node_modules", "@cwcss", "crosswind", "dist", "index.js"));
@@ -61,6 +61,10 @@ function findCrosswindPaths() {
     paths.push(path.join(currentDir, "pantry", "@stacksjs", "crosswind", "dist", "index.js"));
     currentDir = path.dirname(currentDir);
   }
+  return paths;
+}
+function findDevCrosswindPaths() {
+  const paths = [], homeDir = process.env.HOME || process.env.USERPROFILE || "";
   if (homeDir) {
     const devPaths = [
       path.join(homeDir, "Code", "Tools", "crosswind", "packages", "crosswind", "dist", "index.js"),
@@ -81,6 +85,23 @@ export async function loadCrosswind() {
     return crosswindModule;
   crosswindLoadAttempted = !0;
   try {
+    const loadFrom = async (candidates) => {
+      for (const candidate of candidates) {
+        if (!await Bun.file(candidate).exists())
+          continue;
+        const result = await tryImportCrosswind(candidate);
+        if (result) {
+          if (!process.env.STACKS_DEV_QUIET)
+            console.log(`${colors.green}[Crosswind]${colors.reset} CSS engine loaded from ${path.dirname(path.dirname(candidate))}`);
+          return result;
+        }
+      }
+      return null;
+    }, projectModule = await loadFrom(findProjectCrosswindPaths());
+    if (projectModule) {
+      crosswindModule = projectModule;
+      return crosswindModule;
+    }
     const importPaths = [
       "@cwcss/crosswind",
       "@cwcss/crosswind/dist/index.js",
@@ -96,17 +117,11 @@ export async function loadCrosswind() {
         return crosswindModule;
       }
     }
-    const localPaths = findCrosswindPaths();
-    for (const localPath of localPaths)
-      if (await Bun.file(localPath).exists()) {
-        const result = await tryImportCrosswind(localPath);
-        if (result) {
-          crosswindModule = result;
-          if (!process.env.STACKS_DEV_QUIET)
-            console.log(`${colors.green}[Crosswind]${colors.reset} CSS engine loaded from ${path.dirname(path.dirname(localPath))}`);
-          return crosswindModule;
-        }
-      }
+    const devModule = await loadFrom(findDevCrosswindPaths());
+    if (devModule) {
+      crosswindModule = devModule;
+      return crosswindModule;
+    }
     throw Error("Crosswind CSSGenerator not found in any location");
   } catch {
     console.warn(`${colors.yellow}[Crosswind] CSS engine not available, Tailwind styles will not be generated${colors.reset}`);

package/dist/dev-server/serve-app.js

@@ -319,7 +319,7 @@ export async function serveApp(appDir = ".", options = {}) {
     actualHmrPort = hmrServer.start(desiredHmrPort);
   }
   const injectRouteParams = (content, params) => {
-    const paramsScript = `<script>(function(){var s=typeof stx!=='undefined'?stx:{};s._rp=${JSON.stringify(params)};if(s.setRouteParams)s.setRouteParams(s._rp);})()</script>`;
+    const paramsScript = `<script data-stx-route-params>(function(){var p=${JSON.stringify(params).replace(/</g, "\\u003C").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029")};window.__stx_rp=p;if(window.stx){window.stx._rp=p;if(window.stx.setRouteParams)window.stx.setRouteParams(p)}})()</script>`;
     if (content.includes("</head>"))
       return content.replace("</head>", `${paramsScript}</head>`);
     if (content.includes("<body"))

package/dist/expressions.js

@@ -352,7 +352,7 @@ export function processExpressions(template, context, filePath, options) {
   output = maskInto(output, styleMatcher, styleBlocks, (n) => `<!--__STX_STYLE_${n}__-->`);
   const scriptBlocks = [];
   output = maskInto(output, matchScriptElement, scriptBlocks, (n) => `<!--__STX_SCRIPT_EXPR_${n}__-->`);
-  const hasSignals = options?.forceSignals === !0 || context?.__stx_force_signals === !0 || usesSignalsInScript(template);
+  const hasSignals = options?.forceSignals === !0 || context?.__stx_force_signals === !0 || Array.isArray(context?.__stx_client_signal_names) || usesSignalsInScript(template), clientSignalNames = new Set(Array.isArray(context?.__stx_client_signal_names) ? context.__stx_client_signal_names : []), preservedClientExpressions = new Set(Array.isArray(context?.__stx_preserved_client_expressions) ? context.__stx_preserved_client_expressions : []);
   output = output.replace(/\{\{\{([\s\S]*?)\}\}\}/g, (match, expr, offset) => {
     try {
       const value = evaluateExpression(expr, context);
@@ -378,17 +378,24 @@ export function processExpressions(template, context, filePath, options) {
   output = maskInto(output, matchScriptElement, scriptBlocks, (n) => `<!--__STX_SCRIPT_EXPR_${n}__-->`);
   output = maskInto(output, styleMatcher, styleBlocks, (n) => `<!--__STX_STYLE_${n}__-->`);
   output = output.replace(/\{\{([\s\S]*?)\}\}/g, (match, expr, offset) => {
-    const trimmedExpr = expr.trim(), jsBuiltins = ["parseInt", "parseFloat", "String", "Number", "Boolean", "Array", "Object", "JSON", "Math", "Date", "encodeURIComponent", "decodeURIComponent", "encodeURI", "decodeURI", "true", "false", "null", "undefined"], identifierPattern = /^([a-zA-Z_$][a-zA-Z0-9_$]*)/, firstVarName = trimmedExpr.match(identifierPattern)?.[1], firstVarInContext = firstVarName && ((firstVarName in context) || jsBuiltins.includes(firstVarName)), directFunctionCall = /^([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/, directFuncMatch = trimmedExpr.match(directFunctionCall), isLikelySignal = directFuncMatch && !jsBuiltins.includes(directFuncMatch[1]) && !(directFuncMatch[1] in context);
+    const trimmedExpr = expr.trim();
+    if (preservedClientExpressions.has(trimmedExpr))
+      return match;
+    const jsBuiltins = ["parseInt", "parseFloat", "String", "Number", "Boolean", "Array", "Object", "JSON", "Math", "Date", "encodeURIComponent", "decodeURIComponent", "encodeURI", "decodeURI", "true", "false", "null", "undefined"], identifierPattern = /^([a-zA-Z_$][a-zA-Z0-9_$]*)/, firstVarName = trimmedExpr.match(identifierPattern)?.[1], firstVarInContext = firstVarName && ((firstVarName in context) || jsBuiltins.includes(firstVarName)), firstVarIsClientSignal = Boolean(firstVarName && clientSignalNames.has(firstVarName)), directFunctionCall = /^([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/, directFuncMatch = trimmedExpr.match(directFunctionCall), isLikelySignal = directFuncMatch && !jsBuiltins.includes(directFuncMatch[1]) && !(directFuncMatch[1] in context);
     if (/^__[A-Z_]+__$/.test(trimmedExpr))
       return "";
     try {
       const value = evaluateExpression(expr, context);
+      if (firstVarIsClientSignal)
+        return match;
       if (hasSignals && !expressionUsesOnlyContextVars(trimmedExpr, context))
         return match;
       if (value === void 0 && context.__stx_buildMode === "compile" && !hasSignals)
         return createPlaceholder("expr", trimmedExpr);
       return value !== void 0 && value !== null ? escapeHtml(String(value)) : "";
     } catch (error) {
+      if (firstVarIsClientSignal)
+        return match;
       if (hasSignals && !expressionUsesOnlyContextVars(trimmedExpr, context))
         return match;
       if (isLikelySignal)

package/dist/includes.js

@@ -1,7 +1,9 @@
+import { findSfcTemplateBlock } from "./sfc-template.js";
 import path from "node:path";
 import { processConditionals } from "./conditionals.js";
 import { isProduction, isTest } from "./env.js";
 import { processExpressions, usesSignalsInScript } from "./expressions.js";
+import { buildRuntimeGlobalsDestructure } from "./runtime-globals.js";
 import { LRUCache } from "./performance-utils.js";
 import { createSafeFunction, isExpressionSafe, safeEvaluate, safeEvaluateObject } from "./safe-evaluator.js";
 import { transformStoreImports } from "./store-imports.js";
@@ -180,7 +182,7 @@ function extractExports(setupContent) {
 function wrapClientScript(scriptContent, tail = "") {
   return `
 (function() {
-  var { state, derived, effect, batch, onMount, onDestroy, defineStore, useStore, useFetch, useRef, useQuery, useMutation, useOptimistic, useDebounce, useDebouncedValue, useThrottle, useInterval, useTimeout, useToggle, useCounter, useClickOutside, useFocus, useAsync, useLocalStorage, useSessionStorage, useCookie, useReactiveProp, useEventListener, useWebSocket, useColorMode, useDark, useHead, useSeoMeta, definePageMeta, useRoute, useSearchParams, navigate, goBack, goForward, provide, ref, reactive, computed, watch, watchEffect, defineProps, withDefaults, defineEmits, defineExpose, defineSlots } = window.stx;
+  ${buildRuntimeGlobalsDestructure("var")}
   var __destroyHooks = [];
   var __origOnDestroy = onDestroy;
   onDestroy = function(fn) { __origOnDestroy(fn); __destroyHooks.push(fn); };
@@ -545,9 +547,9 @@ export async function processIncludes(template, context, filePath, options, depe
         if (options.debug)
           console.warn(`[stx] partial ES import extraction skipped for ${includeFilePath}:`, err instanceof Error ? err.message : err);
       }
-      const templateMatch = workingContent.match(/<template\b(?![^>]*(?:\b(?:id|x-for|x-if|x-else|@for|@if|@else|:for|:if|:else)\s*=|\s#[\w-]|\bv-slot|\bslot\s*=))[^>]*>([\s\S]*?)<\/template>/i);
-      if (templateMatch)
-        workingContent = templateMatch[1].trim();
+      const templateBlock = findSfcTemplateBlock(workingContent);
+      if (templateBlock)
+        workingContent = templateBlock.content.trim();
       const styleMatch = partialContent.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "").match(/<style\b([^>]*)>([\s\S]*?)<\/style>/i);
       let preservedStyle = "";
       if (styleMatch)