@stacksjs/stx 0.2.171 → 0.2.173

package/dist/render.js

@@ -27,24 +27,11 @@ function parseTemplate(content) {
     let sMatch;
     const removeRanges = [];
     while ((sMatch = serverScriptOpenRe.exec(templateContent)) !== null) {
-      const tagEnd = sMatch.index + sMatch[0].length;
-      let sDepth = 1, sPos = tagEnd;
-      while (sPos < templateContent.length && sDepth > 0) {
-        const nextOpen = templateContent.indexOf("<script", sPos), nextClose = templateContent.indexOf("</script>", sPos);
-        if (nextClose === -1)
-          break;
-        if (nextOpen !== -1 && nextOpen < nextClose) {
-          sDepth++;
-          sPos = nextOpen + 7;
-        } else {
-          sDepth--;
-          if (sDepth === 0) {
-            removeRanges.push({ start: sMatch.index, end: nextClose + 9 });
-            break;
-          }
-          sPos = nextClose + 9;
-        }
-      }
+      const tagEnd = sMatch.index + sMatch[0].length, closeAt = templateContent.indexOf("</script>", tagEnd);
+      if (closeAt === -1)
+        continue;
+      removeRanges.push({ start: sMatch.index, end: closeAt + 9 });
+      serverScriptOpenRe.lastIndex = closeAt + 9;
     }
     for (let ri = removeRanges.length - 1;ri >= 0; ri--)
       templateContent = templateContent.substring(0, removeRanges[ri].start) + templateContent.substring(removeRanges[ri].end);

package/dist/script-validation.d.ts

@@ -1,10 +1,3 @@
-/**
- * Script validation module for STX templates.
- *
- * Validates client-side script content against prohibited DOM API patterns,
- * enforcing the use of STX composables and Vue-style alternatives instead
- * of raw browser APIs.
- */
 import type { StrictModeConfig } from './types';
 /**
  * Prohibited DOM API patterns in client scripts.

package/dist/script-validation.js

@@ -1,3 +1,4 @@
+import { stripCommentsAndLiterals } from "./strip-literals.js";
 export const PROHIBITED_DOM_PATTERNS = [
   {
     pattern: /document\.getElementById\s*\(/g,
@@ -126,21 +127,22 @@ export const PROHIBITED_DOM_PATTERNS = [
   }
 ];
 export function validateClientScript(content, filePath, strict, originFilePath) {
-  const strictConfig = typeof strict === "boolean" ? { enabled: strict, failOnViolation: strict } : strict ?? { enabled: !1 }, allowPatterns = strictConfig.allowPatterns ?? [], errors = [];
+  const strictConfig = typeof strict === "boolean" ? { enabled: strict, failOnViolation: strict } : strict ?? { enabled: !1 }, allowPatterns = strictConfig.allowPatterns ?? [], errors = [], scannable = stripCommentsAndLiterals(content.replace(/\{\{--[\s\S]*?--\}\}/g, (match) => match.replace(/[^\n]/g, " ")));
   for (const { pattern, message, suggestion } of PROHIBITED_DOM_PATTERNS) {
     if (allowPatterns.some((allowed) => /\w/.test(allowed) && message.includes(allowed)))
       continue;
     pattern.lastIndex = 0;
-    const matches = content.match(pattern);
+    const matches = scannable.match(pattern);
     if (matches && matches.length > 0) {
-      const lines = content.split(`
+      const lines = scannable.split(`
+`), sourceLines = content.split(`
 `), lineNumbers = [];
       lines.forEach((line, index) => {
         pattern.lastIndex = 0;
         if (pattern.test(line))
           lineNumbers.push(index + 1);
       });
-      const locationInfo = lineNumbers.length > 0 ? ` (script line${lineNumbers.length > 1 ? "s" : ""} ${lineNumbers.join(", ")})` : "", quoted = lineNumbers.slice(0, 3).map((n) => `        ${n} | ${(lines[n - 1] ?? "").trim().slice(0, 100)}`).join(`
+      const locationInfo = lineNumbers.length > 0 ? ` (script line${lineNumbers.length > 1 ? "s" : ""} ${lineNumbers.join(", ")})` : "", quoted = lineNumbers.slice(0, 3).map((n) => `        ${n} | ${(sourceLines[n - 1] ?? "").trim().slice(0, 100)}`).join(`
 `), snippet = quoted ? `
 ${quoted}` : "";
       errors.push(`  \u2717 ${message}${locationInfo}

package/dist/server-bindings.js

@@ -20,7 +20,50 @@ const BOOLEAN_ATTRS = new Set([
   "playsinline",
   "reversed",
   "selected"
+]), VOID_TAGS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
 ]);
+function reactiveLoopRanges(template) {
+  const ranges = [], openingTag = /<([a-zA-Z][a-zA-Z0-9-]*)\b((?:[^>"']|"[^"]*"|'[^']*')*)\s*\/?>/g;
+  let match;
+  while ((match = openingTag.exec(template)) !== null) {
+    const attributes = match[2] || "";
+    if (!/(?:^|\s)(?::for|x-for|v-for|@for)\s*=/.test(attributes))
+      continue;
+    const start = match.index, openingEnd = start + match[0].length, tagName = match[1].toLowerCase();
+    if (match[0].endsWith("/>") || VOID_TAGS.has(tagName)) {
+      ranges.push([start, openingEnd]);
+      continue;
+    }
+    const escapedTag = tagName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), sameTag = new RegExp(`<\\/?${escapedTag}\\b(?:[^>"']|"[^"]*"|'[^']*')*>`, "gi");
+    sameTag.lastIndex = openingEnd;
+    let depth = 1, closingEnd = openingEnd, nested;
+    while ((nested = sameTag.exec(template)) !== null)
+      if (nested[0].startsWith("</")) {
+        depth--;
+        if (depth === 0) {
+          closingEnd = nested.index + nested[0].length;
+          break;
+        }
+      } else if (!nested[0].endsWith("/>"))
+        depth++;
+    ranges.push([start, closingEnd]);
+  }
+  return ranges;
+}
 function resolveClassBinding(value) {
   if (typeof value === "string")
     return value;
@@ -38,10 +81,11 @@ export function processServerBindings(template, context) {
   let match;
   while ((match = scriptStyleRegex.exec(template)) !== null)
     protectedRanges.push([match.index, match.index + match[0].length]);
+  protectedRanges.push(...reactiveLoopRanges(template));
   function isProtected(pos) {
     return protectedRanges.some(([start, end]) => pos >= start && pos < end);
   }
-  const tagRegex = /<([a-zA-Z][a-zA-Z0-9-]*)((?:\s+(?:[^>"']|"[^"]*"|'[^']*'))*)\s*\/?>/g, replacements = [];
+  const tagRegex = /<([a-zA-Z][a-zA-Z0-9-]*)\b((?:[^>"']|"[^"]*"|'[^']*')*)\s*\/?>/g, replacements = [];
   while ((match = tagRegex.exec(output)) !== null) {
     if (isProtected(match.index))
       continue;

package/dist/signals.js

@@ -5637,6 +5637,36 @@ catch (e) {} }
     }, 300);
   }
 
+  /*
+   * Is the APP in dark mode, not just the OS?
+   *
+   * stx's own color-mode boot writes a class (default 'dark') and/or an
+   * attribute (data-theme / data-color-mode) onto <html>, so an app pinned to
+   * light on a dark OS must not get a dark overlay over a light page. An
+   * explicit override wins over both, and the media query is the last resort.
+   *
+   * One function rather than the resolution inlined per surface. #1875 fixed
+   * this at the two dialog call sites, and toast kept the OS-only version and
+   * shipped the exact bug #1875 describes; that is what a per-call-site fix
+   * costs. See #1912.
+   */
+  function _resolveDark(override) {
+    if (override != null)
+      return !!override;
+
+    var root = document.documentElement;
+    if (root.classList.contains('dark'))
+      return true;
+
+    var attr = root.getAttribute('data-theme') || root.getAttribute('data-color-mode');
+    if (attr === 'dark')
+      return true;
+    if (attr === 'light')
+      return false;
+
+    return !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  }
+
   function addToast(type, message, options) {
     var container = _getToastContainer();
     if (!container) {
@@ -5648,6 +5678,26 @@ catch (e) {} }
     var id = ++_toastId;
     var maxToasts = parseInt(container.getAttribute('data-stx-toast-max') || '5', 10);
 
+    /*
+     * A semantic id replaces its own toast in place (stacksjs/stx#1913).
+     *
+     * Without it, a persistent 'Publishing...' toast and the call that clears
+     * it on completion have to thread the numeric return value between two
+     * different functions by hand, which is the state management the primitive
+     * exists to remove. With an id of 'publish' the second call simply replaces
+     * the first, and toast.dismiss('publish') ends it.
+     */
+    var key = opts.id != null ? String(opts.id) : '';
+    if (key) {
+      var prior = container.querySelector('[data-stx-toast-key="' + key.replace(/"/g, '') + '"]');
+      // Removed outright rather than through removeToast, which animates for
+      // 300ms first. This is a REPLACEMENT, not a dismissal: animating the old
+      // one out while the new one animates in shows both at once, in the same
+      // slot, which is exactly the flicker a keyed toast exists to avoid.
+      if (prior && prior.parentNode)
+        prior.parentNode.removeChild(prior);
+    }
+
     // Enforce max toasts \u2014 remove oldest
     var existing = container.querySelectorAll('[data-stx-toast]');
     while (existing.length >= maxToasts && existing.length > 0) {
@@ -5659,7 +5709,7 @@ catch (e) {} }
     var anims = _getToastAnimClass(container);
     var borderColor = _toastColors[type] || _toastColors.info;
     var icon = _toastIcons[type] || _toastIcons.info;
-    var isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    var isDark = _resolveDark(opts.dark);
     var bg = isDark ? '#1f2937' : '#ffffff';
     var textColor = isDark ? '#f3f4f6' : '#1f2937';
     var shadow = isDark ? '0 4px 12px rgba(0,0,0,0.4)' : '0 4px 12px rgba(0,0,0,0.15)';
@@ -5667,6 +5717,8 @@ catch (e) {} }
     var el = document.createElement('div');
     el.id = 'stx-toast-' + id;
     el.setAttribute('data-stx-toast', String(id));
+    if (key)
+      el.setAttribute('data-stx-toast-key', key);
     el.setAttribute('role', 'alert');
     el.setAttribute('aria-live', 'assertive');
     el.style.cssText = 'pointer-events:auto;display:flex;align-items:flex-start;gap:0.75rem;padding:0.875rem 1rem;border-radius:0.5rem;border-left:4px solid ' + borderColor + ';background:' + bg + ';color:' + textColor + ';box-shadow:' + shadow + ';animation:' + anims.inAnim + ' 0.3s ease;font-family:system-ui,-apple-system,sans-serif;font-size:0.875rem;line-height:1.4;max-width:100%';
@@ -5675,9 +5727,32 @@ catch (e) {} }
     iconSpan.style.cssText = 'flex-shrink:0;display:flex;align-items:center;margin-top:1px';
     iconSpan.innerHTML = icon;
 
-    var msgSpan = document.createElement('span');
+    /*
+     * Title above message, when one is given (#1913).
+     *
+     * Collapsing the two into one string loses the hierarchy that makes a toast
+     * scannable, and every one of the 16 call sites in the reporting app passed
+     * a title. A wrapper is used only when there IS a title, so the untitled
+     * shape renders exactly as it did.
+     */
+    var msgSpan = document.createElement(opts.title ? 'div' : 'span');
     msgSpan.style.cssText = 'flex:1;word-wrap:break-word';
-    msgSpan.textContent = message;
+
+    if (opts.title) {
+      var titleEl = document.createElement('div');
+      titleEl.setAttribute('data-stx-toast-title', '');
+      titleEl.style.cssText = 'font-weight:600;margin-bottom:0.125rem';
+      titleEl.textContent = opts.title;
+      msgSpan.appendChild(titleEl);
+
+      var bodyEl = document.createElement('div');
+      bodyEl.style.cssText = 'opacity:0.9';
+      bodyEl.textContent = message;
+      msgSpan.appendChild(bodyEl);
+    }
+    else {
+      msgSpan.textContent = message;
+    }
 
     var closeBtn = document.createElement('button');
     closeBtn.type = 'button';
@@ -5704,7 +5779,20 @@ catch (e) {} }
     info: function(message, options) { return addToast('info', message, options); },
     warning: function(message, options) { return addToast('warning', message, options); },
     dismiss: function(id) {
-      if (id !== undefined) { removeToast(id); return; }
+      if (id !== undefined) {
+        // A string id is the semantic key the caller passed; a number is the
+        // handle addToast returned. Both dismiss, so a caller does not have to
+        // know which kind it is holding (#1913).
+        if (typeof id === 'string') {
+          var c = _getToastContainer();
+          var match = c && c.querySelector('[data-stx-toast-key="' + id.replace(/"/g, '') + '"]');
+          if (match)
+            removeToast(match.getAttribute('data-stx-toast'));
+          return;
+        }
+        removeToast(id);
+        return;
+      }
       var container = _getToastContainer();
       if (!container) return;
       var all = container.querySelectorAll('[data-stx-toast]');
@@ -5782,17 +5870,7 @@ catch (e) {} }
     // (e.g. data-theme) onto <html>, so an app pinned to light on a dark OS used
     // to get a dark dialog over a light page. An explicit opts.dark wins over
     // both, and the media query stays as the last resort. See #1875.
-    var _root = document.documentElement;
-    var _attrTheme = _root.getAttribute('data-theme') || _root.getAttribute('data-color-mode');
-    var isDark = opts.dark != null
-      ? !!opts.dark
-      : _root.classList.contains('dark')
-        ? true
-        : _attrTheme === 'dark'
-          ? true
-          : _attrTheme === 'light'
-            ? false
-            : !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    var isDark = _resolveDark(opts.dark);
     var bg = isDark ? '#1f2937' : '#ffffff';
     var textColor = isDark ? '#f3f4f6' : '#1f2937';
     var subColor = isDark ? '#9ca3af' : '#6b7280';