@stacksjs/stx 0.2.152 → 0.2.154

package/dist/animation.js

@@ -62,7 +62,7 @@ function generateTransitionCSS(type, options = {}) {
 }
 function generateMotionPreferencesScript() {
   return `
-<script data-stx-scoped>
+<script data-stx-scoped data-stx-run="once">
   // Motion preferences handling
   (function() {
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -107,7 +107,7 @@ function hasAnimationDirectives(template) {
 }
 function generateIntersectionObserverScript(threshold = 0.1, rootMargin = "0px") {
   return `
-<script data-stx-scoped>
+<script data-stx-scoped data-stx-run="always">
   // Intersection Observer for scroll animations
   (function() {
     const initObserver = () => {
@@ -272,7 +272,7 @@ function generateBaseAnimationStyles() {
 function generateAnimationGroup(groupName, elements, options = {}) {
   const { staggerDelay = 50, sequence = !1 } = options;
   return `
-<script data-stx-scoped>
+<script data-stx-scoped data-stx-run="always">
   // Animation Group: ${groupName}
   (function() {
     const elements = ${JSON.stringify(elements)};
@@ -444,7 +444,7 @@ export const keyframeDirective = {
 };
 function generateStaggerScript(containerId, childSelector, baseDelay, staggerDelay, animationClass) {
   return `
-<script data-stx-scoped>
+<script data-stx-scoped data-stx-run="always">
 (function() {
   const container = document.getElementById('${containerId}');
   if (!container) return;
@@ -522,7 +522,7 @@ export const springDirective = {
 export function createAnimationTimeline(entries) {
   const _timelineId = `stx-timeline-${Math.random().toString(36).slice(2, 9)}`;
   return `
-<script data-stx-scoped>
+<script data-stx-scoped data-stx-run="always">
 (function() {
   const timeline = ${JSON.stringify(entries)};
 
@@ -599,7 +599,7 @@ export function parseAnimationShorthand(shorthand) {
 }
 export function generateAnimationRuntime() {
   return `
-<script data-stx-scoped>
+<script data-stx-scoped data-stx-run="once">
 window.__stxAnimation = {
   // Registry of animations
   animations: new Map(),

package/dist/app-shell.js

@@ -1,5 +1,6 @@
 var {require}=import.meta;import path from "node:path";
 import { classifyAllScripts } from "./script-classifier.js";
+import { startsDocument } from "./document-shell.js";
 export { extractLayoutMetadata } from "stx-router/layout-metadata";
 const PAGE_HEAD_MARKER = "stx-page-head:", PAGE_HEAD_MARKER_RE = /<!--stx-page-head:([A-Za-z0-9+/=]+)-->\n?/;
 let _cachedRouterScript = null;
@@ -116,7 +117,7 @@ ${routerScript}
 }
 export function stripDocumentWrapper(html, options = {}) {
   const trimmed = html.trim();
-  if (!/<!DOCTYPE\b/i.test(trimmed) && !/^<html[\s>]/i.test(trimmed))
+  if (!startsDocument(trimmed))
     return html;
   const headStyles = [], headMatch = trimmed.match(/<head\b[^>]*>([\s\S]*?)<\/head>/i);
   if (headMatch) {

package/dist/browser-composables.d.ts

@@ -1,6 +1,11 @@
 /**
  * Reactive localStorage with automatic serialization.
  *
+ * @deprecated Returns `{ value, remove }` — a third shape for this name, and
+ * one the signals runtime cannot see. Use `useLocalStorage` from
+ * `@stacksjs/stx`, which returns a Signal (`s()` reads, `s.set(v)` writes) on
+ * every import path (stacksjs/stx#1797).
+ *
  * @example
  * ```typescript
  * const theme = useLocalStorage('theme', 'dark')
@@ -12,6 +17,9 @@ export declare function useLocalStorage<T>(key: string, defaultValue: T): { valu
 /**
  * Reactive sessionStorage with automatic serialization.
  *
+ * @deprecated See {@link useLocalStorage} above — use the Signal-returning
+ * version from `@stacksjs/stx` (stacksjs/stx#1797).
+ *
  * @example
  * ```typescript
  * const token = useSessionStorage('auth_token', null)

package/dist/build-id.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The current process's build id.
+ *
+ * Stable for the lifetime of the process, which is the unit that matters: a
+ * `bun --watch` restart produces a new process and therefore a new id, while a
+ * production build stamps every page it renders with one value.
+ *
+ * `STX_BUILD_ID` overrides it, for deployments that render across several
+ * processes and need them to agree.
+ */
+export declare function getBuildId(): string;
+/** @internal test-only — force the id, or with `null` restore generation. */
+export declare function __setBuildIdForTest(id: string | null): void;
+/**
+ * Add `<meta name="stx-build">` to `<head>` if it isn't already there.
+ *
+ * Idempotent, and a no-op for output with no `<head>` — SPA fragments carry the
+ * id in a response header instead, since they have nowhere to put a meta.
+ */
+export declare function injectBuildId(html: string, buildId?: string): string;
+/**
+ * Per-process build identity, used to detect runtime/fragment skew
+ * (stacksjs/stx#1772).
+ *
+ * Under `bun --watch`, a loaded page holds the client runtime from build N. A
+ * file save restarts the server, and the next SPA navigation fetches a fragment
+ * rendered by build N+1. Fragments legitimately carry preserved `{{ }}`
+ * moustaches for client-side binding, so any drift in the scoped-script or
+ * binding format between the two builds leaves the OLD runtime unable to
+ * hydrate the NEW fragment: literal moustaches on screen, dead `:show`, stale
+ * canvas. It is sporadic and never reproduces from a clean boot, which is
+ * exactly its signature.
+ *
+ * Stamping the identity on both sides lets the router notice the mismatch and
+ * fall back to a full page navigation — the same thing Next and Vite's HMR
+ * clients do on a version mismatch. It does not fix format drift; it makes the
+ * whole class of skew symptoms impossible to observe.
+ *
+ * The comparison is deliberately conservative: the router only acts when BOTH
+ * sides are known. A missing id means "no information", never "mismatch".
+ * That keeps statically hosted output (no headers to send) and any consumer on
+ * an older server working exactly as before.
+ *
+ * @module build-id
+ */
+/** `<meta name="stx-build">` on every rendered page. */
+export declare const BUILD_ID_META: 'stx-build';
+/** Response header carrying the id that rendered an SPA fragment. */
+export declare const BUILD_ID_HEADER: 'X-STX-Build';

package/dist/build-id.js

@@ -0,0 +1,20 @@
+export const BUILD_ID_META = "stx-build", BUILD_ID_HEADER = "X-STX-Build";
+let cached = null;
+export function getBuildId() {
+  if (cached === null)
+    cached = process.env.STX_BUILD_ID || `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
+  return cached;
+}
+export function __setBuildIdForTest(id) {
+  cached = id;
+}
+export function injectBuildId(html, buildId = getBuildId()) {
+  if (html.includes(`name="${BUILD_ID_META}"`))
+    return html;
+  const headOpen = /<head\b[^>]*>/i.exec(html);
+  if (!headOpen)
+    return html;
+  const insertAt = headOpen.index + headOpen[0].length;
+  return `${html.slice(0, insertAt)}
+  <meta name="${BUILD_ID_META}" content="${buildId}">${html.slice(insertAt)}`;
+}

package/dist/build-message.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Render a build failure as `path:line:column: message`, falling back to the
+ * plain message when no position is available.
+ *
+ * @param error whatever was thrown — BuildMessage, AggregateError, Error, or
+ * anything else
+ * @param sourcePath the real file being compiled. Preferred over the position's
+ * own `file`, which is a synthetic entry name on the transpiler path.
+ */
+export declare function formatBuildFailure(error: unknown, sourcePath?: string): string;

package/dist/build-message.js

@@ -0,0 +1,26 @@
+function isBuildMessageLike(value) {
+  if (!value || typeof value !== "object")
+    return !1;
+  const candidate = value;
+  return typeof candidate.message === "string" && (candidate.name === "BuildMessage" || candidate.name === "ResolveMessage" || ("position" in candidate));
+}
+function unwrap(error) {
+  if (error && typeof error === "object" && Array.isArray(error.errors))
+    return error.errors;
+  return [error];
+}
+export function formatBuildFailure(error, sourcePath) {
+  const parts = [];
+  for (const item of unwrap(error)) {
+    if (isBuildMessageLike(item)) {
+      const position = item.position || void 0, file = sourcePath || position?.file, where = file ? `${file}${position?.line ? `:${position.line}${position.column ? `:${position.column}` : ""}` : ""}` : "", snippet = position?.lineText ? `
+    ${position.lineText.trim()}` : "";
+      parts.push(where ? `${where}: ${item.message}${snippet}` : `${item.message}${snippet}`);
+      continue;
+    }
+    const message = item instanceof Error ? item.message : String(item);
+    parts.push(sourcePath ? `${sourcePath}: ${message}` : message);
+  }
+  return parts.join(`
+`);
+}

package/dist/builtins/attrs.js

@@ -1,4 +1,5 @@
 import { escapeAttr } from "./escape.js";
+import { BOOLEAN_ATTRIBUTE_SENTINEL, stripControlChars } from "../prop-sentinels.js";
 export function forwardStaticAttrs(props, consumed) {
   const attrs = [];
   for (const [key, value] of Object.entries(props.static)) {
@@ -10,7 +11,11 @@ export function forwardStaticAttrs(props, consumed) {
         attrs.push(escapeAttr(name));
       continue;
     }
-    attrs.push(`${escapeAttr(name)}="${escapeAttr(value)}"`);
+    if (value === BOOLEAN_ATTRIBUTE_SENTINEL) {
+      attrs.push(escapeAttr(name));
+      continue;
+    }
+    attrs.push(`${escapeAttr(name)}="${escapeAttr(stripControlChars(String(value)))}"`);
   }
   return attrs;
 }