@stacksjs/stx 0.2.153 → 0.2.155

package/dist/signals.js

@@ -1,4 +1,5 @@
 import { state, derived, effect, batch, onMount, onDestroy, isSignal, isDerived, untrack, peek } from "./signals-api.js";
+import { runtimeHandledXAttrsLiteral } from "./runtime-globals.js";
 
 export * from "./signals-api.js";
 export function generateSignalsRuntime() {
@@ -689,6 +690,12 @@ catch (e) { console.warn('[stx] dispose error:', e); } });
     return typeof v === 'function' && v._isSignal === true;
   }
 
+  // The derived brand is set at creation; this predicate was declared and
+  // auto-imported for years without ever existing here (#1804).
+  function isDerived(v) {
+    return typeof v === 'function' && v._isDerived === true;
+  }
+
   function untrack(v) {
     return isSignal(v) || (typeof v === 'function' && v._isDerived) ? v() : v;
   }
@@ -873,7 +880,13 @@ finally {
 
   function useFetch(urlOrFn, options = {}) {
     const data = state(options.initialData ?? null);
-    const loading = state(true);
+    // Starts false when nothing will be requested. It used to start true
+    // unconditionally while the only thing clearing it was the fetch that
+    // immediate:false suppresses \u2014 so the documented way to declare a deferred
+    // request produced a composable stuck loading forever, which is exactly the
+    // case where a template is most likely driving a spinner off it (#1818).
+    const immediate = options.immediate !== false;
+    const loading = state(immediate);
     const error = state(null);
     if (options.suspense) registerSuspense(loading, error);
 
@@ -927,20 +940,27 @@ finally {
       }
     };
 
-    // Auto-fetch on mount unless disabled
-    if (options.immediate !== false) {
-      onMount(fetchData);
-    }
-
-    // If urlOrFn is a function, watch for changes and refetch
+    // A reactive URL drives its own fetching: effect() runs eagerly on creation,
+    // so the first run IS the mount fetch. Registering onMount as well issued
+    // two requests for every function URL (#1818).
     if (typeof urlOrFn === 'function') {
+      var firstUrlRun = true;
       effect(() => {
         const url = urlOrFn();
-        if (url && options.immediate !== false) {
-          fetchData();
+        if (!url) return;
+        // Honour immediate:false for the FIRST evaluation only. A later change
+        // to the URL is a new request the caller asked for by changing it, not
+        // the initial one they deferred.
+        if (firstUrlRun) {
+          firstUrlRun = false;
+          if (!immediate) return;
         }
+        fetchData();
       });
     }
+else if (immediate) {
+      onMount(fetchData);
+    }
 
     return {
       data,
@@ -973,17 +993,26 @@ finally {
   // Navigation API
   // ==========================================================================
 
-  function navigate(url, forceReload) {
-    if (forceReload) {
-      window.location.href = url;
+  // Second argument is an options object: { replace, reload }.
+  //
+  // It used to be a bare forceReload boolean while the shipped declaration
+  // promised { replace?: boolean } \u2014 so the one call the type system invited,
+  // navigate(url, { replace: true }), took the truthy branch and did a full
+  // document load that PUSHED a history entry: the opposite of replace, at the
+  // cost of the SPA router, with no error (#1807).
+  //
+  // A bare boolean is still accepted and still means "full reload", because
+  // that was the real shipped behaviour and docs and examples contain it.
+  function navigate(url, options) {
+    var opts = (options && typeof options === 'object') ? options : { reload: !!options };
+    var replace = !!opts.replace;
+    var reload = !!(opts.reload || opts.forceReload);
+    if (!reload && window.stxRouter && typeof window.stxRouter.navigate === 'function') {
+      window.stxRouter.navigate(url, { replace: replace });
       return;
     }
-    if (window.stxRouter && typeof window.stxRouter.navigate === 'function') {
-      window.stxRouter.navigate(url);
-    }
-else {
-      window.location.href = url;
-    }
+    if (replace) window.location.replace(url);
+    else window.location.href = url;
   }
 
   function goBack() { window.history.back(); }
@@ -1038,20 +1067,66 @@ else {
     };
     window.addEventListener('popstate', syncFromUrl);
     window.addEventListener('stx:navigate', syncFromUrl);
+    // Own-property reads only. The backing object comes from Object.fromEntries,
+    // so it inherits Object.prototype \u2014 an unguarded params()[key] returned a
+    // FUNCTION for 'toString', 'constructor', 'valueOf' and friends, which is
+    // neither a string nor undefined and matches no declared return type.
+    var own = function(key) {
+      var current = params();
+      return Object.prototype.hasOwnProperty.call(current, key);
+    };
+    // pushState by default; replaceState when the caller asks for it (#1825).
+    //
+    // The canonical reason to delete a param is to CONSUME a one-shot value \u2014
+    // an OAuth callback result, ?checkout=success, a flash token \u2014 and the
+    // point of consuming it is that it must not survive a Back press. Under
+    // pushState the pre-delete URL, the one still carrying the param, becomes
+    // the previous entry, so Back replays the callback and whatever consuming
+    // it triggered runs again.
+    //
+    // Default stays pushState so nothing that works today changes, and the
+    // option is spelled { replace } to match navigate(), which already takes it.
+    var commit = function(url, options) {
+      // A plain truthy read of the replace property looks equivalent and is
+      // not: it asks whether the value HAS a replace property, and every string
+      // has String.prototype.replace \u2014 so delete(key, 'push') would have
+      // replaced, the exact opposite of what it reads as. Requiring an object
+      // also keeps this identical to the module implementation in
+      // composables/use-router.ts; with optional chaining alone the two
+      // disagreed on the empty string, which short-circuits in one and hits
+      // String.prototype.replace in the other.
+      //
+      // NB: no backticks anywhere in this block. This runtime is assembled as a
+      // template literal, so a backtick in a COMMENT ends the string and the
+      // rest of the runtime is parsed as code.
+      var replace = !!(options && typeof options === 'object' && options.replace);
+      if (replace)
+        window.history.replaceState({}, '', url);
+      else
+        window.history.pushState({}, '', url);
+      syncFromUrl();
+    };
     return {
       data: params,
-      get: function(key) { return params()[key]; },
-      set: function(key, value) {
+      get: function(key) { return own(key) ? params()[key] : undefined; },
+      has: own,
+      set: function(key, value, options) {
         var url = new URL(window.location.href);
         url.searchParams.set(key, value);
-        window.history.pushState({}, '', url);
-        syncFromUrl();
+        commit(url, options);
       },
-      setAll: function(obj) {
+      // delete and has were DECLARED but absent, so the compiler endorsed calls
+      // that threw in the browser; setAll and data were present but undeclared
+      // (#1806). Deleting writes history the same way set does, for consistency.
+      'delete': function(key, options) {
+        var url = new URL(window.location.href);
+        url.searchParams['delete'](key);
+        commit(url, options);
+      },
+      setAll: function(obj, options) {
         var url = new URL(window.location.href);
         Object.keys(obj).forEach(function(k) { url.searchParams.set(k, obj[k]); });
-        window.history.pushState({}, '', url);
-        syncFromUrl();
+        commit(url, options);
       }
     };
   }
@@ -1139,11 +1214,16 @@ finally {
       onMount(fetchData);
     }
 
-    // refetchOnFocus
+    // refetchOnFocus \u2014 removed on destroy, like refetchInterval right below.
+    // It used to add a listener and never remove it, so every instance leaked
+    // one for the life of the page and each SPA navigation added more; every
+    // stale listener still fired, refetching for components long gone (#1818).
     if (options.refetchOnFocus) {
-      document.addEventListener('visibilitychange', function() {
+      var onVisibility = function() {
         if (!document.hidden) fetchData();
-      });
+      };
+      document.addEventListener('visibilitychange', onVisibility);
+      onDestroy(function() { document.removeEventListener('visibilitychange', onVisibility); });
     }
 
     // refetchInterval
@@ -2189,7 +2269,7 @@ catch (e2) {
       // :attr still works for backward compat but is reserved for structural directives.
       // x-text, x-html, x-model, x-show, x-if, x-for, x-cloak, x-ref, x-data are
       // handled by their own code paths below \u2014 exclude them here.
-      var X_HANDLED = {'x-text':1,'x-html':1,'x-model':1,'x-show':1,'x-if':1,'x-for':1,'x-cloak':1,'x-ref':1,'x-data':1,'x-bind':1,'x-class':1,'x-style':1,'x-tooltip':1,'x-tooltip-position':1};
+      var X_HANDLED = ${runtimeHandledXAttrsLiteral()};
       if (name.startsWith('@bind:') || name.startsWith('x-bind:')
           || (name.startsWith(':') && !name.startsWith('::') && !DIRECTIVE_NAMES[name.slice(1).split('.')[0]] && !EVENT_RE.test(name.slice(1)))
           || (name.startsWith('x-') && !X_HANDLED[name.split('.')[0]] && !X_HANDLED[name])) {
@@ -2657,7 +2737,11 @@ catch (e) {
       });
     }
     else if (tag === 'select') {
-      var syncSelect = () => { el.value = getValue() ?? ''; };
+      // Same equality guard as the text branch. Harmless here \u2014 a select has
+      // no caret \u2014 but an unconditional write is still a needless DOM mutation
+      // on every signal change, and the inconsistency invites the text-branch
+      // bug being reintroduced by copying this one (#1799).
+      var syncSelect = () => { var next = getValue() ?? ''; if (el.value !== next) el.value = next; };
       el.__stx_model_sync = syncSelect;
       effect(syncSelect);
       if (!el.__stx_model_observer && typeof window.MutationObserver !== 'undefined') {
@@ -2677,7 +2761,41 @@ catch (e) {
       el.addEventListener('change', () => setValue(coerceValue(el.value)));
     }
 else {
-      effect(() => { el.value = getValue() ?? ''; });
+      // Writing el.value moves the text cursor to the END of the control, and
+      // typing forms a loop: input -> setValue -> the signal changes -> this
+      // effect re-runs -> the write. So every keystroke reset the caret
+      // (stacksjs/stx#1799).
+      //
+      // Invisible while appending at the end of a field, which is why a login
+      // form with x-model felt fine and a textarea people actually edit did
+      // not. Worse inside :for, where key-based reuse updates the item signal
+      // on reuse (#1669) and re-evaluates the reused row's bindings on every
+      // character.
+      //
+      // The equality guard alone fixes typing, because the value this effect
+      // computes IS the value just typed. The offset is preserved as well for
+      // the case the guard cannot cover: a value that legitimately changed
+      // from elsewhere while the field is focused \u2014 a formatter rewriting
+      // input, a remote sync.
+      effect(() => {
+        var next = getValue() ?? '';
+        if (el.value === next) return;
+        var active = typeof document !== 'undefined' && document.activeElement === el;
+        var start = null;
+        var end = null;
+        if (active) {
+          // selectionStart throws on input types that do not support
+          // selection (number, email, date), so it cannot be assumed present.
+          try { start = el.selectionStart; end = el.selectionEnd; }
+          catch (e) { start = null; end = null; }
+        }
+        el.value = next;
+        if (active && start !== null && typeof el.setSelectionRange === 'function') {
+          // Clamp: the incoming value may be shorter than the old offset.
+          try { el.setSelectionRange(Math.min(start, next.length), Math.min(end == null ? start : end, next.length)); }
+          catch (e) { /* type does not support selection */ }
+        }
+      });
       el.addEventListener(modifiers.includes('lazy') ? 'change' : 'input', () => setValue(coerceValue(el.value)));
     }
 
@@ -3944,9 +4062,6 @@ catch (e2) {
     const fullScope = { ...globalHelpers, ...capturedComponentScope, ...(capturedElementScope || {}) };
     const directSignal = fullScope[expr];
 
-    if (directSignal) {
-      console.log('[stx] bindIf direct signal for :if=' + expr, 'signal identity:', directSignal === componentScope[expr] ? 'SAME' : 'DIFFERENT', 'signal():', directSignal());
-    }
     effect(() => {
       var value;
       if (directSignal && (directSignal._isSignal || directSignal._isDerived)) {
@@ -4026,6 +4141,11 @@ else if (!value && isInserted) {
         // if) fire too. The if attribute was already removed, so no recursion.
         if (value && isInserted && !childrenProcessed) {
           childrenProcessed = true;
+          // Until this deferred pass runs, the shown subtree still holds literal
+          // {{ }}. Flag it so the hydration audit doesn't report those as a
+          // binding miss in the gap before the setTimeout fires \u2014 a :for nested
+          // in a :if binds a macrotask after the synchronous stx:load audit (#1773).
+          el.__stx_if_pending = true;
           setTimeout(function() {
             var childScope = { ...globalHelpers, ...capturedComponentScope, ...(capturedElementScope || {}) };
             // A false single-element conditional is detached before the
@@ -4043,6 +4163,8 @@ else if (!value && isInserted) {
             // :if children still have x-cloak and stay hidden.
             el.removeAttribute('x-cloak');
             el.querySelectorAll('[x-cloak]').forEach(function(c) { c.removeAttribute('x-cloak'); });
+            // Deferred bind complete \u2014 the audit may inspect this subtree now.
+            el.__stx_if_pending = false;
           }, 0);
         }
       }
@@ -4078,10 +4200,25 @@ else if (!value && isInserted) {
 
   // provide() \u2014 share values across components (like Vue's provide/inject)
   // Usage: provide('Modal', Modal) \u2014 makes Modal accessible in all components
+  //
+  // inject() was auto-imported but implemented nowhere, so half of the pair
+  // worked: provide() succeeded and the failure surfaced only in the consumer
+  // (#1804). Values are recorded in a private registry as well as on window,
+  // because the global write collides with native properties \u2014 provide('name',
+  // x) lands on window.name, which the browser coerces to a string.
+  var __stxProvided = Object.create(null);
+
   function provide(name, value) {
+    __stxProvided[name] = value;
     window[name] = value;
   }
 
+  function inject(name, defaultValue) {
+    if (name in __stxProvided) return __stxProvided[name];
+    if (name in window) return window[name];
+    return defaultValue;
+  }
+
   // ==========================================================================
   // Timer & Utility Composables
   // ==========================================================================
@@ -4363,6 +4500,33 @@ else if (timer === null) {
     });
   }
 
+  // Watch several sources at once, calling back with (newValues, oldValues).
+  // Declared and auto-imported but never implemented here (#1804). NOT an alias
+  // of $watch, which spreads the values and passes no oldValues \u2014 callers
+  // written against the declared contract would silently receive the wrong
+  // arguments. Sources may be signals, Vue-style refs, or plain values.
+  function watchMultiple(sources, callback, options) {
+    options = options || {};
+    var read = function() {
+      return sources.map(function(s) {
+        if (typeof s === 'function') return s();
+        if (s && typeof s === 'object' && 'value' in s) return s.value;
+        return s;
+      });
+    };
+    var oldValues = read();
+    var first = true;
+    return effect(function() {
+      var newValues = read();
+      if (first) {
+        first = false;
+        if (!options.immediate) return;
+      }
+      callback(newValues, oldValues);
+      oldValues = newValues;
+    });
+  }
+
   function useAsync(fn, options) {
     options = options || {};
     var asyncState = 'idle';
@@ -4409,16 +4573,31 @@ else if (timer === null) {
     try { boot = window.__STX_COLOR_MODE__ || null; } catch (e) {}
     // Explicit-undefined checks rather than ||, so an explicit darkClass:null
     // or attribute:null opts out instead of falling through to the default.
+    // An explicit null means "do not manage this", from the call site OR from
+    // app.colorMode. The boot payload is generated by stx and always carries
+    // every key, so absent and explicitly-null ARE distinguishable there, and
+    // rejecting null made the boot global the one path that could not say it
+    // (#1813). The asymmetry hid because it only bites where the fallback is
+    // non-null: attribute:null looked fine, darkClass:null silently became
+    // 'dark' \u2014 so opting out of the class required repeating the option at
+    // every call site, defeating the single-source arrangement the global
+    // exists for.
     function pick(a, b, fallback) {
       if (a !== undefined) return a;
-      if (b !== undefined && b !== null) return b;
+      if (b !== undefined) return b;
       return fallback;
     }
-    var storageKey = pick(options.storageKey, boot && boot.storageKey, 'stx-color-mode');
-    var initialMode = pick(options.initialMode, boot && boot.initialMode, 'auto');
-    var darkClass = pick(options.darkClass, boot && boot.darkClass, 'dark');
-    var attribute = pick(options.attribute, boot && boot.attribute, null);
-    var autoValueOption = pick(options.autoValue, boot && boot.autoValue, undefined);
+    // Read through a helper rather than a short-circuit on boot itself: that
+    // expression yields undefined for an undefined boot but NULL for a null
+    // one, which pick would now honour as an explicit opt-out.
+    function fromBoot(key) {
+      return (boot && typeof boot === 'object') ? boot[key] : undefined;
+    }
+    var storageKey = pick(options.storageKey, fromBoot('storageKey'), 'stx-color-mode');
+    var initialMode = pick(options.initialMode, fromBoot('initialMode'), 'auto');
+    var darkClass = pick(options.darkClass, fromBoot('darkClass'), 'dark');
+    var attribute = pick(options.attribute, fromBoot('attribute'), null);
+    var autoValueOption = pick(options.autoValue, fromBoot('autoValue'), undefined);
     var disableTransitions = options.disableTransitions !== false;
     var resolved = 'light';
     var listeners = [];
@@ -5366,16 +5545,25 @@ catch (e) {} }
   // Component mount system
   var mountQueue = [];
 
-  window.stx = {
+  // MERGE, never replace (#1804). Three client bundles assign window.stx and
+  // the last one used to erase the others. Object.assign also preserves the
+  // object IDENTITY, which matters because the generated store runtime captures
+  // window.stx in a closure variable \u2014 replacing the object leaves that closure
+  // calling a detached one.
+  window.stx = Object.assign(window.stx || {}, {
     hydrate: hydrateSubtree,
     state,
     derived,
     effect,
     batch,
     isSignal,
+    isDerived,
     untrack,
     peek,
+    inject,
+    watchMultiple,
     onMount,
+    onBeforeMount: onMount,
     onDestroy,
     onMounted: onMount,
     onBeforeUnmount: onDestroy,
@@ -5492,6 +5680,11 @@ catch (e) {} }
     defineSlots: function() {
       return window.__STX_CURRENT_SLOTS__ || {};
     },
+    // Vue spells the same lookup useSlots(); it was auto-imported with no
+    // implementation behind it (#1804).
+    useSlots: function() {
+      return window.__STX_CURRENT_SLOTS__ || {};
+    },
 
     _mountCallbacks: mountCallbacks,
     _destroyCallbacks: destroyCallbacks,
@@ -5908,7 +6101,7 @@ else {
         doMount();
       }
     }
-  };
+  });
 
   // Also expose globally for convenience
   window.state = state;
@@ -6147,10 +6340,20 @@ else {
       const setupName = el.getAttribute('data-stx');
       console.log('[DOMContentLoaded] data-stx:', setupName, 'el:', el.tagName, 'fn exists:', !!(setupName && window[setupName]));
       if (setupName && window[setupName]) {
-        const result = window[setupName]();
-        console.log('[DOMContentLoaded] setup returned:', result ? Object.keys(result).slice(0, 10) : 'null');
-        if (typeof result === 'object') {
-          Object.assign(componentScope, result);
+        // Contained, like the two sibling setup call sites. An uncaught throw
+        // here aborted the whole forEach and everything after it in this
+        // handler, so ONE bad name in ONE page's setup left every root on the
+        // page unhydrated \u2014 the user sees raw {{ }}, and the console names the
+        // identifier without saying it cost them the document (#1805).
+        try {
+          const result = window[setupName]();
+          console.log('[DOMContentLoaded] setup returned:', result ? Object.keys(result).slice(0, 10) : 'null');
+          if (typeof result === 'object' && result !== null) {
+            Object.assign(componentScope, result);
+          }
+        }
+        catch (e) {
+          console.error('[stx] page setup "' + setupName + '" threw; this root will not hydrate:', e);
         }
       }
     });
@@ -6242,7 +6445,7 @@ else {
         componentScope = { ...componentScope, ...scopeVars };
       }
 
-      console.log('[stx] calling processElement on scope:', scopeId, 'componentScope total keys:', Object.keys(componentScope).length, 'has openEventModal:', 'openEventModal' in componentScope, 'scopeVars keys:', Object.keys(scopeVars).length);
+      console.log('[stx] calling processElement on scope:', scopeId, 'componentScope keys:', Object.keys(componentScope).length, 'scopeVars keys:', Object.keys(scopeVars).length);
       var disposeEffects = trackEffects(function() { processElement(el); });
       el.__stx_disposers = disposeEffects;
       console.log('[stx] scope processed OK:', scopeId);
@@ -6500,6 +6703,14 @@ catch (e) {
       if (p.nodeType !== Node.ELEMENT_NODE) continue;
       if (AUDIT_SKIP_TAGS[p.tagName]) return true;
       if (p.hasAttribute && p.hasAttribute('data-stx-ignore')) return true;
+      // A :if whose deferred child-binding pass hasn't run yet legitimately holds
+      // literal {{ }} that binds a macrotask later \u2014 not a hydration miss (#1773).
+      if (p.__stx_if_pending) return true;
+      // A deferred island (client=visible|idle|\u2026) is unhydrated ON PURPOSE until
+      // its trigger fires, so its {{ }} legitimately stay literal in the meantime
+      // \u2014 not a miss (#1746). The stranded-scope pass already skips stx-hydrate;
+      // the literal sweep must too.
+      if (p.hasAttribute && p.hasAttribute('stx-hydrate') && !p.__stx_hydrated) return true;
     }
     return false;
   }

package/dist/site-builder/build.js

@@ -19,6 +19,7 @@ import { generateSitemap } from "./sitemap.js";
 import { generateRobots } from "./robots.js";
 import { injectRouterScript } from "./router.js";
 import { injectThemeBootstrap } from "./theme.js";
+import { buildIsolatingFailures } from "../isolated-build.js";
 import {
   applyTranslations,
   buildAlternateLinks,
@@ -31,18 +32,31 @@ export async function buildStaticSite(options) {
   if (!options.noClean)
     rmSync(outDir, { recursive: !0, force: !0 });
   mkdirSync(outDir, { recursive: !0 });
-  const glob = new Glob(`${pagesDir}/**/*.stx`), entrypoints = await Array.fromAsync(glob.scan("."));
+  const glob = new Glob(`${pagesDir}/**/*.stx`), discovered = await Array.fromAsync(glob.scan(".")), excludeDirs = options.excludeDirs ?? ["layouts", "partials", "components"], excluded = [], entrypoints = discovered.filter((file) => {
+    const rel = file.slice(pagesDir.length).replace(/^[\\/]+/, "");
+    if (rel.split(/[\\/]/).slice(0, -1).some((seg) => excludeDirs.includes(seg))) {
+      excluded.push(file);
+      return !1;
+    }
+    return !rel.split(/[\\/]/).some((seg) => seg.startsWith("_"));
+  });
+  if (excluded.length > 0)
+    console.warn(`[stx] ${excluded.length} file(s) under ${pagesDir}/ skipped as non-pages: ${excludeDirs.join(", ")}`);
   if (entrypoints.length === 0)
     throw Error(`No .stx files found in ${pagesDir}/`);
-  const result = await Bun.build({
-    entrypoints,
+  const isolated = await buildIsolatingFailures(entrypoints, (subset) => Bun.build({
+    entrypoints: subset,
     outdir: outDir,
     plugins: [stxPlugin()],
     naming: { entry: "[name].[ext]" }
-  });
-  if (!result.success) {
-    console.error(result.logs);
-    throw Error("Build failed");
+  }));
+  if (isolated.failed.length > 0) {
+    for (const { entrypoint, error } of isolated.failed)
+      console.error(`[stx] failed to build ${entrypoint}:
+  ${error}`);
+    if (isolated.succeeded.length === 0)
+      throw Error(`Build failed: none of the ${entrypoints.length} page(s) could be built`);
+    console.error(`[stx] ${isolated.failed.length} of ${entrypoints.length} page(s) skipped; the rest were built.`);
   }
   pruneEmptyJsChunks(outDir);
   const htmlFiles = listFiles(outDir).filter((f) => f.endsWith(".html")), i18n = resolveI18n(options, process.cwd()), knownPaths = new Set(htmlFiles.map(pathFromFile));

package/dist/site-builder/seo.js

@@ -18,30 +18,39 @@ export function injectSeo(html, site, page = {}, pagePath = "/") {
     html = html.replace(stxAutoBlockRe, "");
   html = html.replace(/<!--\s*SEO\s*-->[\s\S]*?<!--\s*\/SEO\s*-->\s*/g, "");
   html = html.replace(/<meta\s+name="title"\s+content="stx Project"[^>]*>\s*/g, "").replace(/<meta\s+name="description"\s+content="A website built with stx[^"]*"[^>]*>\s*/g, "").replace(/<meta\s+property="og:title"\s+content="stx Project"[^>]*>\s*/g, "").replace(/<meta\s+property="og:description"\s+content="A website built with stx[^"]*"[^>]*>\s*/g, "").replace(/<meta\s+name="twitter:title"\s+content="stx Project"[^>]*>\s*/g, "").replace(/<meta\s+name="twitter:description"\s+content="A website built with stx[^"]*"[^>]*>\s*/g, "");
-  const headEnd = html.search(/<\/head>/i), head = headEnd === -1 ? html : html.slice(0, headEnd), declared = (tag) => {
+  const headEnd = html.search(/<\/head>/i), head = headEnd === -1 ? html : html.slice(0, headEnd), PLACEHOLDER_TITLES = /^(?:stx App|stx Project|Document|Untitled)$/i, existingTitle = /<title[^>]*>([\s\S]*?)<\/title>/i.exec(head)?.[1]?.trim(), titleIsPlaceholder = existingTitle === void 0 || existingTitle === "" || PLACEHOLDER_TITLES.test(existingTitle), declared = (tag) => {
     if (/^<title[\s>]/i.test(tag))
-      return /<title[\s>]/i.test(head);
+      return /<title[\s>]/i.test(head) && !titleIsPlaceholder;
     if (/rel="canonical"/i.test(tag))
       return /<link[^>]+rel=["']canonical["']/i.test(head);
     const key = /(?:property|name)="([^"]+)"/i.exec(tag)?.[1];
     if (!key)
       return !1;
     return new RegExp(`<meta[^>]+(?:property|name)=["']${key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}["']`, "i").test(head);
-  }, missing = tags.filter((tag) => !declared(tag));
+  };
+  let missing = tags.filter((tag) => !declared(tag));
   if (missing.length === 0)
     return html;
+  let output = html;
+  const titleTag = missing.find((tag) => /^<title[\s>]/i.test(tag));
+  if (titleTag && titleIsPlaceholder && /<title[^>]*>[\s\S]*?<\/title>/i.test(output)) {
+    output = output.replace(/<title[^>]*>[\s\S]*?<\/title>/i, () => titleTag);
+    missing = missing.filter((tag) => tag !== titleTag);
+    if (missing.length === 0)
+      return output;
+  }
   const block = `<!-- SEO -->
 ${missing.join(`
 `)}
-<!-- /SEO -->`;
-  if (headEnd !== -1)
-    return `${html.slice(0, headEnd)}${block}
-${html.slice(headEnd)}`;
-  if (/<head[^>]*>/i.test(html))
-    return html.replace(/<head([^>]*)>/i, `<head$1>
+<!-- /SEO -->`, outEnd = output.search(/<\/head>/i);
+  if (outEnd !== -1)
+    return `${output.slice(0, outEnd)}${block}
+${output.slice(outEnd)}`;
+  if (/<head[^>]*>/i.test(output))
+    return output.replace(/<head([^>]*)>/i, `<head$1>
 ${block}`);
   return `${block}
-${html}`;
+${output}`;
 }
 function escapeAttr(s) {
   return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

package/dist/site-builder/theme.js

@@ -1,9 +1,10 @@
+import { COLOR_MODE_BOOT_MARKER } from "../color-mode-boot.js";
 const FAVICON_FN = `window.__stxThemeIcon=function(isDark){try{var want=isDark?'dark':'light';var pick=document.querySelector('link[rel~="icon"][media*="prefers-color-scheme: '+want+'"]');if(!pick)return;var live=document.querySelector('link[rel~="icon"]:not([media])');if(!live){live=document.createElement('link');live.setAttribute('rel','icon');document.head.appendChild(live)}if(pick.type)live.setAttribute('type',pick.type);var href=pick.getAttribute('href');if(live.getAttribute('href')!==href)live.setAttribute('href',href)}catch(e){}};`, FOUC_SCRIPT = (defaultTheme, storageKey, lightColor, darkColor) => `(function(){${FAVICON_FN}function read(){try{var k=${JSON.stringify(storageKey)};var t=localStorage.getItem(k);return t===null?(${JSON.stringify(defaultTheme)}==='dark'||(${JSON.stringify(defaultTheme)}==='auto'&&window.matchMedia('(prefers-color-scheme: dark)').matches)):t==='dark'}catch(e){return ${JSON.stringify(defaultTheme)}==='dark'}}function apply(){var isDark=read();var html=document.documentElement;html.classList[isDark?'add':'remove']('dark');var color=isDark?${JSON.stringify(darkColor)}:${JSON.stringify(lightColor)};if(!document.head)return;var tc=document.querySelector('meta[name="theme-color"]:not([media])');if(!tc){tc=document.createElement('meta');tc.setAttribute('name','theme-color');tc.setAttribute('data-stx-theme-meta','1')}tc.setAttribute('content',color);if(tc!==document.head.firstChild){document.head.insertBefore(tc,document.head.firstChild)}if(window.__stxThemeIcon)window.__stxThemeIcon(isDark)}apply();window.addEventListener('stx:navigate',apply);window.addEventListener('popstate',apply)})();`, TOGGLE_HANDLER = (storageKey, lightColor, darkColor) => `document.addEventListener('click',function(e){var t=e.target&&e.target.closest&&e.target.closest('#theme-toggle');if(!t)return;var html=document.documentElement;var isDark=html.classList.toggle('dark');try{localStorage.setItem(${JSON.stringify(storageKey)},isDark?'dark':'light')}catch(e){}var tc=document.querySelector('meta[name="theme-color"]:not([media])');if(tc)tc.setAttribute('content',isDark?${JSON.stringify(darkColor)}:${JSON.stringify(lightColor)});if(window.__stxThemeIcon)window.__stxThemeIcon(isDark)});`;
 export function injectThemeBootstrap(html, site) {
   if (site.theme === !1)
     return html;
-  const opts = typeof site.theme === "object" && site.theme !== null ? site.theme : {}, defaultTheme = opts.default ?? "dark", storageKey = opts.storageKey ?? "theme", lightColor = opts.colors?.light ?? "#ffffff", darkColor = opts.colors?.dark ?? "#000000";
-  if (defaultTheme === "dark") {
+  const colorModeOwnsTheme = html.includes(COLOR_MODE_BOOT_MARKER), opts = typeof site.theme === "object" && site.theme !== null ? site.theme : {}, defaultTheme = opts.default ?? "dark", storageKey = opts.storageKey ?? "theme", lightColor = opts.colors?.light ?? "#ffffff", darkColor = opts.colors?.dark ?? "#000000";
+  if (defaultTheme === "dark" && !colorModeOwnsTheme) {
     if (!/<html\b[^>]*\bclass=/.test(html))
       html = html.replace(/<html\b([^>]*)>/i, '<html$1 class="dark">');
     else if (!/<html\b[^>]*\bclass="[^"]*\bdark\b/.test(html))
@@ -19,12 +20,12 @@ export function injectThemeBootstrap(html, site) {
     html = html.replace(/<head\b([^>]*)>/i, `<head$1>
   ${metas}`);
   }
-  if (!html.includes("__stxThemeGuard") && /<head\b[^>]*>/i.test(html)) {
+  if (!colorModeOwnsTheme && !html.includes("__stxThemeGuard") && /<head\b[^>]*>/i.test(html)) {
     const guard = `<script data-stx-theme-guard="1">${FOUC_SCRIPT(defaultTheme, storageKey, lightColor, darkColor)};window.__stxThemeGuard=1;</script>`;
     html = html.replace(/<head\b([^>]*)>/i, `<head$1>
   ${guard}`);
   }
-  if (!html.includes("__stxThemeToggle") && /<\/body>/i.test(html)) {
+  if (!colorModeOwnsTheme && !html.includes("__stxThemeToggle") && /<\/body>/i.test(html)) {
     const handler = `<script data-stx-theme-toggle="1">${TOGGLE_HANDLER(storageKey, lightColor, darkColor)};window.__stxThemeToggle=1;</script>`;
     html = html.replace(/<\/body>/i, `${handler}
 </body>`);

package/dist/site-builder/types.d.ts

@@ -23,6 +23,7 @@ export declare interface SiteConfig {
   social?: SiteSocial
   seo?: SiteSeo
   pagesDir?: string
+  excludeDirs?: string[]
   publicDir?: string
   outDir?: string
   sitemap?: boolean