mnfst 0.5.162 → 0.5.164

package/lib/manifest.markdown.js

@@ -1,28 +1,19 @@
 /* Manifest Markdown */
 
-// Cache for marked.js loading
 let markedPromise = null;
 
-// Cache for fetched markdown files to prevent duplicate requests
 const markdownCache = new Map();
 
-// Invalidate the markdown fetch cache when mnfst-run signals a data file
-// changed on disk. Without this, a saved .md file is re-read by the data
-// plugin but x-markdown still serves the old content from cache; combined
-// with the lastProcessedContent short-circuit in the directive's effect,
-// the article appears blank until the user manually reloads.
+// Invalidate the fetch cache on dev-reload, else a saved .md serves stale
+// cached content (and the lastProcessedContent short-circuit leaves it blank).
 if (typeof window !== 'undefined') {
     window.addEventListener('manifest:dev-reload', () => {
         markdownCache.clear();
     });
 }
 
-// DOMPurify config tuned for Manifest's markdown output. The markdown
-// extensions emit <x-icon> custom elements and `x-*` directive attributes that must
-// survive sanitization, so custom-element handling is enabled with a
-// tag-name allowlist (x-*) and an attribute filter that rejects event
-// handlers (on*). DOMPurify's defaults handle <script>, javascript: URLs,
-// srcdoc, and the usual XSS vectors for standard HTML tags.
+// DOMPurify config for Manifest markdown: allow x-* custom elements and
+// directive attributes to survive, but reject on* event handlers.
 const MARKDOWN_PURIFY_CONFIG = {
     CUSTOM_ELEMENT_HANDLING: {
         tagNameCheck: /^x-[a-z][\w-]*$/,
@@ -31,10 +22,8 @@ const MARKDOWN_PURIFY_CONFIG = {
     }
 };
 
-// DOMPurify loader is defined on window by whichever of svg/markdown loads
-// first (see manifest.svg.js). Declaring `let purifyPromise` here at top
-// level collides with svg.js's identical declaration in the realm's shared
-// global lexical environment, so we use the shared loader instead.
+// Shared DOMPurify loader on window (svg.js or markdown, whichever loads first).
+// A top-level `let purifyPromise` would collide with svg.js's identical one.
 if (!window.ManifestDOMPurify) {
     window.ManifestDOMPurify = {
         _promise: null,
@@ -43,10 +32,7 @@ if (!window.ManifestDOMPurify) {
             if (this._promise) return this._promise;
             this._promise = new Promise((resolve, reject) => {
                 const script = document.createElement('script');
-                // Pinned + Subresource Integrity: a moving `@latest` (or a
-                // tampered CDN file) would otherwise run arbitrary JS in the
-                // user's page. The browser rejects the script if the bytes don't
-                // match the hash. Bump version AND integrity together.
+                // Pinned + SRI (browser rejects on hash mismatch). Bump version AND integrity together.
                 script.src = 'https://cdn.jsdelivr.net/npm/dompurify@3.4.10/dist/purify.min.js';
                 script.integrity = 'sha384-eguRoJERj8ghOpzO//Rl7+ScQsQIR1cH+ajll7+fG+IpbNPlkZsQn9h8ccr+wPXx';
                 script.crossOrigin = 'anonymous';
@@ -69,19 +55,15 @@ if (!window.ManifestDOMPurify) {
     };
 }
 
-// Sanitize HTML if the .safe modifier was used; pass-through otherwise.
-// Manifest's default is unsanitized so authors can render arbitrary HTML and
-// the markdown custom-element extensions work — but the .safe opt-in lets
-// authors render data-source content (e.g. user-submitted markdown from
-// Appwrite) without an XSS sink.
+// Sanitize HTML when .safe is set; pass-through otherwise (default is
+// unsanitized so custom-element extensions work). Use .safe for untrusted source.
 async function maybeSanitizeMarkdownHtml(html, safe) {
     if (!safe) return html;
     try {
         const DOMPurify = await window.ManifestDOMPurify.load();
         return DOMPurify.sanitize(html, MARKDOWN_PURIFY_CONFIG);
     } catch {
-        // Loader failure — fall back to escaping rather than silently emitting
-        // un-sanitized HTML. The author asked for safe; honour that.
+        // Loader failure — escape rather than emit un-sanitized HTML (.safe was asked for).
         const escaped = String(html)
             .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
         console.warn('[Manifest Markdown] x-markdown.safe: DOMPurify unavailable — emitting escaped text.');
@@ -102,8 +84,7 @@ async function loadMarkedJS() {
 
     markedPromise = new Promise((resolve, reject) => {
         const script = document.createElement('script');
-        // Pinned + Subresource Integrity (see DOMPurify loader above) — a
-        // floating version or tampered CDN file can't inject arbitrary JS.
+        // Pinned + SRI (see DOMPurify loader above).
         script.src = 'https://cdn.jsdelivr.net/npm/marked@15.0.12/marked.min.js';
         script.integrity = 'sha384-948ahk4ZmxYVYOc+rxN1H2gM1EJ2Duhp7uHtZ4WSLkV4Vtx5MUqnV+l7u9B+jFv+';
         script.crossOrigin = 'anonymous';
@@ -128,10 +109,8 @@ async function loadMarkedJS() {
     return markedPromise;
 }
 
-// HTML-escape a string for safe interpolation inside an attribute value.
-// Used by the code-fence renderer below — title/language strings come from
-// the markdown source, so without escaping a fence like ```js " onclick=alert(1) x="
-// could inject arbitrary attributes onto the <pre> element.
+// HTML-escape for safe interpolation in an attribute value — fence title/language
+// strings come from source and could otherwise inject attributes onto the <pre>.
 function escapeForAttribute(s) {
     return String(s)
         .replace(/&/g, '&amp;')
@@ -140,9 +119,7 @@ function escapeForAttribute(s) {
         .replace(/>/g, '&gt;');
 }
 
-// Escape a literal HTML fragment so it displays as source text when placed
-// inside a <code> element. Used for the ::: frame demo modifier, where the
-// same content is rendered live AND shown below as its own source.
+// Escape a literal HTML fragment to display as source text inside a <code>.
 function escapeForText(s) {
     return String(s)
         .replace(/&/g, '&amp;')
@@ -154,10 +131,8 @@ function escapeForText(s) {
 async function configureMarked(marked) {
     marked.use({
         renderer: {
-            // Render fenced code blocks as <pre x-code="…"><code>…</code></pre>.
-            // The code plugin's directive then handles highlighting, copy
-            // buttons, collapse, line numbers, etc. — same code path whether
-            // the block was authored in HTML or markdown.
+            // Render fenced blocks as <pre x-code><code>…</code></pre>; the code
+            // plugin handles highlighting/copy/collapse/lines from there.
             code(token) {
                 const lang = token.lang || '';
                 const text = token.text || '';
@@ -165,8 +140,7 @@ async function configureMarked(marked) {
                 const attrs = parseLanguageString(lang);
 
                 let preAttrs = '';
-                // x-code carries the language as its value (empty string for
-                // "no explicit language; auto-detect")
+                // x-code value = language ('' means auto-detect)
                 preAttrs += ` x-code="${attrs.language ? escapeForAttribute(attrs.language) : ''}"`;
                 if (attrs.title)    preAttrs += ` name="${escapeForAttribute(attrs.title)}"`;
                 if (attrs.lines)    preAttrs += ' lines';
@@ -179,13 +153,8 @@ async function configureMarked(marked) {
                 }
                 if (attrs.from) preAttrs += ` from="${escapeForAttribute(attrs.from)}"`;
 
-                // Escape the fence body before injection. Newer marked versions
-                // pass `token.text` raw, and if we leave it unescaped an HTML
-                // fence like ```html <script>…</script>``` becomes a live
-                // element in the document instead of source text. Escaping
-                // here keeps the <code> body as pure text — the code plugin's
-                // resolveSource reads textContent which decodes the entities
-                // back to the original source.
+                // Escape the fence body so an HTML fence stays source text, not a
+                // live element (the code plugin reads textContent back to source).
                 return `<pre${preAttrs}><code>${escapeForText(text)}</code></pre>\n`;
             }
         },
@@ -207,12 +176,9 @@ async function configureMarked(marked) {
                 const openMatch = src.match(/^:::(.*?)(?:\n|$)/);
                 if (!openMatch) return;
 
-                // Parse the opening line for classes, icon, and an optional
-                // quoted name. The name follows the same convention as the
-                // fenced-code info-string (`::: frame "header.html"`) — it
-                // becomes the `name` attribute on the rendered <aside>, which
-                // lets the code plugin pair the frame with a fenced block
-                // sharing the same name inside an <x-code-group>.
+                // Parse the opening line for classes, icon, and an optional quoted
+                // name (`::: frame "header.html"`) → `name` attr on the <aside>,
+                // used to pair with a same-named fence inside an <x-code-group>.
                 const openingLine = openMatch[1].trim();
                 let classes = '';
                 let iconValue = '';
@@ -259,34 +225,27 @@ async function configureMarked(marked) {
                 const iconValue = token.iconValue || '';
                 const nameValue = token.nameValue || '';
 
-                // `::: frame demo` — render the frame contents live AND emit
-                // a sibling <pre x-code="html"> showing the same source. Lets
-                // authors write the example once and have it both rendered
-                // and documented. Strip `demo` from the class list so the
-                // resulting <aside> has just `frame`.
+                // `::: frame demo` — render the frame live AND emit a sibling
+                // <pre x-code="html"> of the same source. Strip `demo` from classes.
                 const isDemo = /\bframe\b/.test(classes) && /\bdemo\b/.test(classes);
                 if (isDemo) classes = classes.replace(/\bdemo\b/, '').replace(/\s+/g, ' ').trim();
 
-                // For frame callouts, don't parse as markdown to avoid wrapping HTML in <p> tags
+                // Frame callouts keep raw HTML (parsing would wrap it in <p>).
                 let parsedContent;
                 if (classes.includes('frame')) {
-                    // Use raw content for frame callouts to preserve HTML structure
                     parsedContent = token.text;
                 } else {
-                    // Parse the content as markdown to support nested markdown syntax
                     parsedContent = marked.parse(token.text);
                 }
 
                 const iconHtml = iconValue ? `<span x-icon="${escapeForAttribute(iconValue)}"></span>` : '';
 
-                // Create a temporary div to count top-level elements
+                // Count top-level elements
                 const temp = document.createElement('div');
                 temp.innerHTML = parsedContent;
                 const elementCount = temp.children.length;
 
-                // Only wrap in a div if:
-                // 1. There are 2 or more elements AND
-                // 2. There's an icon (which needs the content to be wrapped as a sibling)
+                // Wrap only when there's an icon plus 2+ elements (icon needs a sibling wrapper).
                 const needsWrapper = elementCount >= 2 && iconValue;
                 const wrappedContent = needsWrapper ?
                     `<div>${parsedContent}</div>` :
@@ -309,11 +268,8 @@ async function configureMarked(marked) {
     });
 }
 
-// Markdown preprocessor: ensure that block-level HTML containers (the
-// wrappers authors use to group fenced code blocks into tabs, frames, etc.)
-// have a blank line after their opening tag so marked treats the contents
-// as block-level markdown rather than raw inline HTML. Without this, a
-// fenced ```js immediately after `<div x-code-group>` is treated as text.
+// Insert a newline after block HTML containers (x-code-group wrappers) so marked
+// treats their contents as block markdown rather than raw inline HTML.
 function renderXCodeGroup(markdown) {
     return markdown.replace(
         /(<(?:div|section|article|aside)[^>]*\bx-code-group\b[^>]*>)(?!\s*\n)/g,
@@ -321,13 +277,11 @@ function renderXCodeGroup(markdown) {
     );
 }
 
-// Post-process HTML to enable checkboxes by removing disabled attribute
+// Enable task-list checkboxes by removing marked's disabled attribute.
 function enableCheckboxes(html) {
-    // Create a temporary DOM element to parse the HTML
     const temp = document.createElement('div');
     temp.innerHTML = html;
 
-    // Find all checkbox inputs and remove disabled attribute
     const checkboxes = temp.querySelectorAll('input[type="checkbox"]');
     checkboxes.forEach(checkbox => {
         checkbox.removeAttribute('disabled');
@@ -336,34 +290,15 @@ function enableCheckboxes(html) {
     return temp.innerHTML;
 }
 
-// Apply trailing `{…}` attribute lists to inline `<code>` elements emitted
-// by marked. Authors write ``` `npm i mnfst`{copy} ``` or ``` `code`{bash copy} ```
-// in markdown; marked's default codespan handling drops the trailing brace
-// block as literal text. We rewrite it post-parse so the code plugin's
-// directive sees the attributes and wires copy / syntax highlighting.
-//
-// Supported tokens inside the braces:
-//   copy                        → adds the `copy` attribute (click-to-copy)
-//   <language>                  → bareword like `bash`, `js`, `html` becomes
-//                                 the `x-code="…"` value (drives highlighting)
-//   .class                      → appended to the element's class list
-//   key=value, key="quoted"     → arbitrary attribute (rarely needed)
-//
-// Multiple tokens separate by whitespace: `cmd`{bash copy} works.
+// Rewrite marked codespans with a trailing `{…}` attribute list into real
+// attributes (`` `cmd`{bash copy} `` → `<code x-code="bash" copy>`), so the code
+// plugin wires copy / highlighting. Tokens: `copy`/`lines`/`edit` flags, a bare
+// language word, `.class`, and `key=value`.
 function applyInlineCodeAttributes(html) {
-    // marked emits `<code>…</code>` for codespans (no attributes). When we see
-    // `<code>X</code>{tokens}` we rewrite into `<code x-code[=lang] tokens>X</code>`.
-    // Be conservative: only rewrite when the brace block immediately follows
-    // a `<code>` close tag (no whitespace), so prose like "foo `bar` {note}" is
-    // untouched.
-    //
-    // Body capture is `[^<]*` (not `[\s\S]*?`) so the match can't span across
-    // intermediate `<` characters — without this guard, an unmatched
-    // `<code>foo</code>` followed later by `<code>bar</code>{copy}` would be
-    // captured as ONE big match with body = "foo</code><…><code>bar". That
-    // bug surfaces noticeably in tables, where multiple codespans per row mix
-    // marked and unmarked instances. Marked HTML-escapes any literal `<` in
-    // codespan content to `&lt;`, so the restriction is safe.
+    // Only rewrite when `{…}` immediately follows a `</code>` (no whitespace).
+    // Body capture is `[^<]*` (not `[\s\S]*?`) so it can't span `<` — without this
+    // an unmatched codespan could be swallowed into a later match (notably in
+    // tables). Marked escapes literal `<` in codespans, so this is safe.
     return html.replace(
         /<code>([^<]*)<\/code>\{([^}\n]+)\}/g,
         (_, body, attrString) => {
@@ -385,14 +320,8 @@ function applyInlineCodeAttributes(html) {
                     language = tok;
                 }
             }
-            // Only emit x-code when the author actually requested a language.
-            // `inline`{copy} should produce `<code copy>` — copy is a UI flag,
-            // not a request for syntax highlighting. Previously we always
-            // wrote `x-code=""`, which the code plugin treated as auto-detect
-            // and ran hljs.highlightElement on the codespan, colouring
-            // identifiers like `x-code` themselves as tokens. Authors who
-            // want highlighting opt in explicitly via `code`{bash} or by
-            // hand-writing `<code x-code="bash">…</code>`.
+            // Only emit x-code when a language was given — `foo`{copy} is copy-only,
+            // not a highlight request (an empty x-code would auto-detect and mis-colour).
             let attrs = '';
             if (language) attrs += ` x-code="${escapeForAttribute(language)}"`;
             for (const flag of flags) attrs += ` ${flag}`;
@@ -511,10 +440,8 @@ async function initializeMarkdownPlugin() {
         // Check if there are any elements with x-markdown already on the page
         const existingMarkdownElements = document.querySelectorAll('[x-markdown]');
 
-        // Detect whether this page was produced by the prerender.  On
-        // prerendered pages, x-markdown elements arrive with their content
-        // already rendered to HTML — we must NOT hide them on init or the
-        // user sees a flash of empty content while the plugin re-fetches.
+        // Prerendered pages arrive with x-markdown content already rendered —
+        // don't hide on init or the user sees a flash of empty content.
         const isPrerenderedPage = !!(
             document.querySelector('meta[name="manifest:prerendered"]') &&
             document.querySelector('meta[name="manifest:prerendered"]').getAttribute('content') !== '0'
@@ -528,25 +455,17 @@ async function initializeMarkdownPlugin() {
                 return;
             }
 
-            // Opt-in sanitization. When `.safe` is on the directive
-            // (`x-markdown.safe="$x.user.bio"`), parsed HTML is run through
-            // DOMPurify before injection. Default is unsanitized — Manifest's
-            // design lets authors render raw HTML and custom-element extensions
-            // (x-icon, callouts) and directive attributes (x-code, etc.) freely.
-            // Use .safe when the markdown
-            // source can contain content from untrusted parties (Appwrite
-            // collections, API responses, crowdsourced translations, etc.).
+            // `.safe` runs parsed HTML through DOMPurify before injection. Default
+            // is unsanitized (raw HTML + custom-element extensions); use .safe for
+            // untrusted source (Appwrite, API responses, crowdsourced translations).
             const safe = Array.isArray(modifiers) && modifiers.includes('safe');
 
-            // Prerender idempotency: if the page is a prerendered MPA and this
-            // element already has rendered HTML children, the content was baked
-            // at build time and is authoritative for SEO + no-JS users.  Skip
-            // the initial hide-and-re-render step entirely.  We still register
-            // the reactive effect below so the content can update if its
-            // expression is dynamic and later changes (e.g. via $route).
+            // Prerender idempotency: baked HTML children are build-time authoritative
+            // — skip the initial hide-and-re-render, but still register the effect
+            // below so a dynamic expression can still update.
             const hasBakedContent = isPrerenderedPage && el.innerHTML && el.innerHTML.trim() !== '';
             if (!hasBakedContent) {
-                // Hide element initially to prevent flicker (live SPA behaviour)
+                // Hide initially to prevent flicker (live SPA)
                 el.style.opacity = '0';
                 el.style.transition = 'opacity 0.15s ease-in-out';
             }
@@ -595,16 +514,12 @@ async function initializeMarkdownPlugin() {
                     // Post-process HTML to enable checkboxes (remove disabled attribute)
                     html = enableCheckboxes(html);
 
-                    // Promote inline code attribute blocks (`foo`{copy}) to
-                    // real attributes so the code plugin can wire copy/highlight.
+                    // Promote inline `foo`{copy} blocks to real attributes.
                     html = applyInlineCodeAttributes(html);
 
-                    // Apply opt-in DOMPurify sanitization for x-markdown.safe
                     html = await maybeSanitizeMarkdownHtml(html, safe);
 
-                    // Only update if content has changed and isn't empty
                     if (element.innerHTML !== html && html.trim() !== '') {
-                        // Create a temporary container to hold the HTML
                         const temp = document.createElement('div');
                         temp.innerHTML = html;
 
@@ -614,10 +529,8 @@ async function initializeMarkdownPlugin() {
                             element.appendChild(temp.firstChild);
                         }
 
-                        // Notify the code plugin to scan the new subtree —
-                        // fenced blocks and `inline`{copy} elements are added
-                        // outside Alpine's initial walk and won't otherwise
-                        // be picked up by the IntersectionObserver.
+                        // Notify the code plugin to scan the new subtree (added
+                        // outside Alpine's initial walk).
                         if (window.ManifestCode?.observeAll) {
                             window.ManifestCode.observeAll(element);
                         }
@@ -677,21 +590,16 @@ async function initializeMarkdownPlugin() {
                 return;
             }
 
-            // Prerender idempotency: on prerendered MPA pages with baked content,
-            // the x-markdown element is already correct — skip the reactive effect
-            // entirely.  Navigation on MPA is full page loads, so there's no
-            // dynamic re-resolution to handle; each route serves its own prerendered
-            // HTML with the right baked content.
+            // Prerendered MPA pages with baked content are already correct — skip
+            // the effect (MPA navigation is full page loads).
             if (hasBakedContent) {
                 return;
             }
 
-            // Handle expressions (file paths, inline strings, content references)
-            // Check if this is a simple string literal that needs to be quoted
+            // Quote bare string literals so Alpine doesn't treat them as expressions.
             let processedExpression = expression;
             if (!expression.includes('+') && !expression.includes('`') && !expression.includes('${') &&
                 !expression.startsWith('$') && !expression.startsWith("'") && !expression.startsWith('"')) {
-                // Wrap simple string literals in quotes to prevent Alpine from treating them as expressions
                 processedExpression = `'${expression.replace(/'/g, "\\'")}'`;
             }
             const getMarkdownContent = evaluateLater(processedExpression);
@@ -758,12 +666,8 @@ async function initializeMarkdownPlugin() {
                         }
                     }
 
-                    // Skip re-render if content hasn't changed, but still restore
-                    // visibility — during a dev-reload the data plugin briefly
-                    // clears its source cache, which makes the expression
-                    // resolve to undefined and pushes opacity to 0; if we
-                    // early-return here without restoring it, the article stays
-                    // hidden even though innerHTML is intact.
+                    // Content unchanged: skip re-render but restore visibility — a
+                    // dev-reload can transiently push opacity to 0 while innerHTML is intact.
                     if (markdownContent === lastProcessedContent) {
                         if (el.innerHTML && el.innerHTML.trim() !== '') {
                             hasContent = true;
@@ -787,14 +691,11 @@ async function initializeMarkdownPlugin() {
                     // Post-process HTML to enable checkboxes (remove disabled attribute)
                     html = enableCheckboxes(html);
 
-                    // Promote inline code attribute blocks (`foo`{copy}) to
-                    // real attributes so the code plugin can wire copy/highlight.
+                    // Promote inline `foo`{copy} blocks to real attributes.
                     html = applyInlineCodeAttributes(html);
 
-                    // Apply opt-in DOMPurify sanitization for x-markdown.safe
                     html = await maybeSanitizeMarkdownHtml(html, safe);
 
-                    // Only update DOM if HTML actually changed
                     if (el.innerHTML !== html) {
                         // Create temporary container
                         const temp = document.createElement('div');
@@ -888,9 +789,8 @@ async function initializeMarkdownPlugin() {
                             element.appendChild(temp.firstChild);
                         }
 
-                        // Ensure Alpine processes the newly inserted HTML
-                        // This is critical for data source expressions like $x.projects
-                        // Try to wait for magic methods, but proceed anyway if not ready
+                        // Let Alpine process the inserted HTML (needed for $x.* exprs);
+                        // wait briefly for magic methods, but proceed if not ready.
                         const initAlpine = (retryCount = 0) => {
                             if (!window.Alpine || typeof window.Alpine.initTree !== 'function') {
                                 if (retryCount < 5) {
@@ -942,13 +842,11 @@ async function initializeMarkdownPlugin() {
                     const content = expression.slice(1, -1);
                     updateContent(el, content);
                 } else {
-                    // For complex expressions, we need to force Alpine to re-process this element
-
-                    // Remove and re-add the attribute to force Alpine to re-process it
+                    // Complex expressions: remove + re-add the attribute to force
+                    // Alpine to re-process once the directive is registered.
                     const originalExpression = expression;
                     el.removeAttribute('x-markdown');
 
-                    // Use a small delay to ensure the directive is registered
                     setTimeout(() => {
                         el.setAttribute('x-markdown', originalExpression);
                     }, 50);
@@ -964,8 +862,7 @@ async function initializeMarkdownPlugin() {
 // Track initialization to prevent duplicates
 let markdownPluginInitialized = false;
 
-// True once Alpine has completed its initial DOM walk. Listener is bound at
-// module load so we never miss the event, whatever the script order.
+// True once Alpine finished its initial DOM walk; listener bound at module load.
 let markdownAlpineHasWalked = false;
 document.addEventListener('alpine:initialized', () => { markdownAlpineHasWalked = true; });
 
@@ -980,17 +877,11 @@ async function ensureMarkdownPluginInitialized() {
     markdownPluginInitialized = true;
     await initializeMarkdownPlugin();
 
-    // Only walk existing [x-markdown] subtrees ourselves when Alpine has ALREADY
-    // finished its initial walk (i.e. this plugin loaded late, e.g. after a
-    // component was swapped in). In the normal flow we register the directive
-    // during `alpine:init`, before Alpine's one boot walk — so Alpine processes
-    // every element with all sibling directives (x-icon, x-tooltip, …) already
-    // registered. Walking here during boot would re-init those subtrees before
-    // the other directives exist, dropping nested plugin content.
+    // Only walk existing subtrees ourselves when Alpine already finished its boot
+    // walk (late load). Walking during boot would drop nested plugin content.
     if (markdownAlpineHasWalked && typeof window.Alpine.initTree === 'function') {
         const existingMarkdownElements = document.querySelectorAll('[x-markdown]');
         existingMarkdownElements.forEach(el => {
-            // Only process if not already processed by Alpine
             if (!el.__x) {
                 window.Alpine.initTree(el);
             }