mnfst 0.5.81 → 0.5.82

package/lib/manifest.code.js

@@ -1,974 +1,934 @@
 /*  Manifest Code
 /*  By Andrew Matlock under MIT license
-/*  https://github.com/andrewmatlock/Manifest
+/*  https://manifestx.dev
 /*
 /*  With reference to:
 /*  - highlight.js (https://highlightjs.org)
-/*  - Marked JS (https://marked.js.org)
+/*  - CodeJar       (https://github.com/antonmedv/codejar)
 /*
 /*  Requires Alpine JS (alpinejs.dev) to operate.
+/*
+/*  Public API
+/*  ----------
+/*  <pre x-code>                               Block; auto-detect language
+/*  <pre x-code="javascript">                  Block; explicit language
+/*  <pre x-code="javascript" lines copy>       Line numbers + floating copy button
+/*  <pre x-code="javascript" name="API call">  Adds a header/title bar
+/*  <pre x-code="javascript" collapse>         Collapsed when long; default 20 lines
+/*  <pre x-code="javascript" collapse="10">    Collapsed to first 10 lines
+/*  <pre x-code="javascript" edit>             CodeJar-powered editor
+/*  <pre x-code="html" from="#demo-id">        Content sourced from another element's innerHTML
+/*
+/*  <code x-code="bash">npm i mnfst</code>     Inline; highlighted in place
+/*  <code x-code="bash" copy>npm i mnfst</code>Inline; click-to-copy
+/*
+/*  <div x-code-group>                         Tab strip across direct children with [name]
+/*    <aside class="frame" name="HTML">…       Frame is a tab panel
+/*    <pre x-code="html" name="HTML">…         Code block is a tab panel
+/*    …                                        Children without [name] are always visible
+/*  </div>
 */
 
-// Cache for highlight.js loading
-let hljsPromise = null;
+// ─── Library loaders ─────────────────────────────────────────────────────────
+
+// Highlight.js loading is a two-mode affair:
+//
+//   Lean mode (preferred):  core.min.js (~8 KB gz) + one language module
+//                           (~2-7 KB gz each, depending on grammar) per
+//                           distinct language on the page. Used when every
+//                           code block declares an explicit language.
+//                           Loaded via ESM dynamic imports from esm.run
+//                           (jsDelivr's CJS→ESM transpiler); the npm
+//                           package's lib/core and lib/languages/* are
+//                           CommonJS-only, so we go through esm.run to
+//                           get browser-native ESM.
+//
+//   Full mode (fallback):   highlight.min.js (~42 KB gz with ~36 common
+//                           languages, IIFE-wrapped). Used when any block
+//                           requests auto-detect (empty/auto x-code value)
+//                           since hljs needs the whole language set to
+//                           pick. Loaded as a classic <script> from
+//                           cdn-release because it's the only build with
+//                           the languages baked in.
+//
+// We decide once on first call by scanning the page. If a later markdown
+// injection introduces an auto-detect block, the next loadHighlightJS()
+// transparently switches to full mode — the prior core load is harmless
+// (hljs is a single global namespace, the full bundle overwrites it).
+
+const HLJS_FULL_URL = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js';
+// esm.run resolves extension-less specifiers; including ".js" triggers a
+// deprecation warning at module-evaluation time.
+const HLJS_CORE_URL = 'https://esm.run/highlight.js@11.11.1/lib/core';
+const HLJS_LANG_BASE = 'https://esm.run/highlight.js@11.11.1/lib/languages/';
+
+let hljsCorePromise = null;
+let hljsFullPromise = null;
+const langLoadPromises = new Map();
+// Becomes true once we've committed to the full bundle (any auto-detect
+// block, any language-module load failure). Once flipped, never resets —
+// we keep using the full bundle for the rest of the page lifecycle.
+let usingFullBundle = false;
+
+function injectScript(src) {
+    return new Promise((resolve, reject) => {
+        const existing = document.querySelector(`script[src="${src}"]`);
+        if (existing) {
+            if (existing.dataset.loaded === 'yes') return resolve();
+            existing.addEventListener('load', () => resolve());
+            existing.addEventListener('error', () => reject(new Error(`load failed: ${src}`)));
+            return;
+        }
+        const s = document.createElement('script');
+        s.src = src;
+        s.async = false;
+        s.onload = () => { s.dataset.loaded = 'yes'; resolve(); };
+        s.onerror = () => reject(new Error(`load failed: ${src}`));
+        document.head.appendChild(s);
+    });
+}
 
-// Load highlight.js from CDN
-async function loadHighlightJS() {
-    if (typeof hljs !== 'undefined') {
+async function loadHighlightFull() {
+    if (hljsFullPromise) return hljsFullPromise;
+    hljsFullPromise = injectScript(HLJS_FULL_URL).then(() => {
+        if (typeof hljs === 'undefined') throw new Error('hljs undefined after full load');
         return hljs;
-    }
-
-    // Return existing promise if already loading
-    if (hljsPromise) {
-        return hljsPromise;
-    }
+    });
+    return hljsFullPromise;
+}
 
-    hljsPromise = new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.src = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js';
-        script.onload = () => {
-            // Initialize highlight.js
-            if (typeof hljs !== 'undefined') {
-                resolve(hljs);
-            } else {
-                console.error('[Manifest Code] Highlight.js failed to load - hljs is undefined');
-                hljsPromise = null; // Reset so we can try again
-                reject(new Error('highlight.js failed to load'));
-            }
-        };
-        script.onerror = (error) => {
-            console.error('[Manifest Code] Script failed to load:', error);
-            hljsPromise = null; // Reset so we can try again
-            reject(error);
-        };
-        document.head.appendChild(script);
+async function loadHighlightCore() {
+    if (hljsCorePromise) return hljsCorePromise;
+    hljsCorePromise = import(HLJS_CORE_URL).then(mod => {
+        // esm.run's CJS→ESM shim exposes hljs as the default export. Mirror
+        // it onto window so existing call sites (Alpine evaluator, the hero
+        // editor, etc.) that read `hljs` as a global keep working.
+        const hl = mod.default;
+        if (!hl) throw new Error('hljs undefined after core ESM import');
+        window.hljs = hl;
+        return hl;
     });
+    return hljsCorePromise;
+}
+
+async function registerLanguage(lang) {
+    if (!lang || lang === 'auto') return;
+    const resolved = LANGUAGE_ALIASES[lang] || lang;
+    const core = await loadHighlightCore();
+    if (core.listLanguages().includes(resolved)) return;
+    if (langLoadPromises.has(resolved)) return langLoadPromises.get(resolved);
+    const p = import(`${HLJS_LANG_BASE}${resolved}`)
+        .then(mod => { core.registerLanguage(resolved, mod.default); })
+        .catch(() => {
+            // If a language module fails to load (typo, network, deprecated
+            // grammar, etc.) the next call will fall back to the full bundle
+            // so the block at least renders with auto-detect.
+            usingFullBundle = true;
+            langLoadPromises.delete(resolved);
+        });
+    langLoadPromises.set(resolved, p);
+    return p;
+}
 
-    return hljsPromise;
+// Public entry point. Called per code block with the block's requested
+// language (or null/empty for auto-detect). Returns hljs ready to highlight
+// `requestedLang`, or to auto-detect if we're in full mode.
+async function loadHighlightJS(requestedLang = null) {
+    // Once we've committed to the full bundle (a prior block needed
+    // auto-detect, or a language module load failed) every subsequent
+    // call funnels through it.
+    if (usingFullBundle || hljsFullPromise) return loadHighlightFull();
+    // A per-block call asking for auto-detect → escalate.
+    if (!requestedLang || requestedLang === 'auto') {
+        usingFullBundle = true;
+        return loadHighlightFull();
+    }
+    // Lean path: core + just this language.
+    const core = await loadHighlightCore();
+    await registerLanguage(requestedLang);
+    return core;
 }
 
-// Optional optimization: Configure utilities plugin if present
+let codeJarPromise = null;
+async function loadCodeJar() {
+    if (typeof window.CodeJar === 'function') return window.CodeJar;
+    if (codeJarPromise) return codeJarPromise;
+    // codejar@4.3.0 ships as an ESM-only module. Import dynamically and expose
+    // on window for downstream consumers (e.g. the hero-editor demo).
+    codeJarPromise = import('https://cdn.jsdelivr.net/npm/codejar@4.3.0/dist/codejar.js')
+        .then(mod => {
+            window.CodeJar = mod.CodeJar;
+            return mod.CodeJar;
+        })
+        .catch(err => {
+            codeJarPromise = null;
+            throw err;
+        });
+    return codeJarPromise;
+}
+
+// Tell the utilities plugin to ignore code-related classes / elements so its
+// utility-class scanner doesn't fight with hljs's mutations.
 if (window.ManifestUtilities) {
-    // Tell utilities plugin to ignore code-related DOM changes and classes
     window.ManifestUtilities.addIgnoredClassPattern(/^hljs/);
     window.ManifestUtilities.addIgnoredClassPattern(/^language-/);
     window.ManifestUtilities.addIgnoredClassPattern(/^copy$/);
     window.ManifestUtilities.addIgnoredClassPattern(/^copied$/);
     window.ManifestUtilities.addIgnoredClassPattern(/^lines$/);
     window.ManifestUtilities.addIgnoredClassPattern(/^selected$/);
-
+    window.ManifestUtilities.addIgnoredClassPattern(/^expand$/);
     window.ManifestUtilities.addIgnoredElementSelector('pre');
     window.ManifestUtilities.addIgnoredElementSelector('code');
-    window.ManifestUtilities.addIgnoredElementSelector('x-code');
-    window.ManifestUtilities.addIgnoredElementSelector('x-code-group');
 }
 
-// Process existing pre/code blocks
-async function processExistingCodeBlocks() {
-    try {
-        const hljs = await loadHighlightJS();
+// ─── Language resolution ─────────────────────────────────────────────────────
 
-        // Find all pre > code blocks that aren't already processed
-        // Exclude elements with frame class but allow those inside asides (frames)
-        const codeBlocks = document.querySelectorAll('pre > code:not(.hljs):not([data-highlighted="yes"]):not(.frame)');
+// Common shortenings that authors expect to work. highlight.js accepts most of
+// these via its own alias system, but we resolve here so we can short-circuit
+// the supported-language check before calling hljs.
+const LANGUAGE_ALIASES = {
+    js: 'javascript', ts: 'typescript', py: 'python', rb: 'ruby',
+    sh: 'bash', shell: 'bash', yml: 'yaml', html: 'xml', svg: 'xml'
+};
 
-        for (const codeBlock of codeBlocks) {
-            try {
-
-                // Skip if the element contains HTML (has child elements)
-                if (codeBlock.children.length > 0) {
-                    continue;
-                }
-
-                // Skip if the content looks like HTML (contains tags)
-                let content = codeBlock.textContent || '';
-                if (content.includes('<') && content.includes('>') && content.includes('</')) {
-                    // This looks like HTML content, skip highlighting to avoid security warnings
-                    continue;
-                }
-
-                // Special handling for frames - clean up content
-                const isInsideFrame = codeBlock.closest('aside');
-                if (isInsideFrame) {
-                    // Remove leading empty lines and whitespace
-                    content = content.replace(/^\s*\n+/, '');
-                    // Remove trailing empty lines and whitespace
-                    content = content.replace(/\n+\s*$/, '');
-                    // Also trim any remaining leading/trailing whitespace
-                    content = content.trim();
-                    // Update the code block content
-                    codeBlock.textContent = content;
-                }
-
-                const pre = codeBlock.parentElement;
-
-                // Add title if present
-                if (pre.hasAttribute('name') || pre.hasAttribute('title')) {
-                    const title = pre.getAttribute('name') || pre.getAttribute('title');
-                    const header = document.createElement('header');
-
-                    const titleElement = document.createElement('div');
-                    titleElement.textContent = title;
-                    header.appendChild(titleElement);
-
-                    pre.insertBefore(header, codeBlock);
-                }
-
-                // Add line numbers if requested
-                if (pre.hasAttribute('numbers')) {
-                    const codeText = codeBlock.textContent;
-                    const lines = codeText.split('\n');
-
-                    const linesContainer = document.createElement('div');
-                    linesContainer.className = 'lines';
-
-                    for (let i = 0; i < lines.length; i++) {
-                        const lineSpan = document.createElement('span');
-                        lineSpan.textContent = (i + 1).toString();
-                        linesContainer.appendChild(lineSpan);
-                    }
-
-                    pre.insertBefore(linesContainer, codeBlock);
-                }
-
-                // Check if element has a supported language class
-                const languageMatch = codeBlock.className.match(/language-(\w+)/);
-                if (languageMatch) {
-                    const language = languageMatch[1];
-
-                    // Skip non-programming languages
-                    if (language === 'frame') {
-                        continue;
-                    }
-
-                    const supportedLanguages = hljs.listLanguages();
-                    const languageAliases = {
-                        'js': 'javascript',
-                        'ts': 'typescript',
-                        'py': 'python',
-                        'rb': 'ruby',
-                        'sh': 'bash',
-                        'yml': 'yaml'
-                    };
-
-                    let actualLanguage = language;
-                    if (languageAliases[language]) {
-                        actualLanguage = languageAliases[language];
-                        // Update the class name to use the correct language
-                        codeBlock.className = codeBlock.className.replace(`language-${language}`, `language-${actualLanguage}`);
-                    }
-
-                    // Only highlight if the language is supported
-                    if (!supportedLanguages.includes(actualLanguage)) {
-                        // Skip unsupported languages instead of warning
-                        continue;
-                    }
-                } else {
-                    // Add default language class if not present
-                    codeBlock.className += ' language-css'; // Default to CSS for the example
-                }
-
-                // Highlight the code block
-                hljs.highlightElement(codeBlock);
-
-            } catch (error) {
-                console.warn('[Manifest] Failed to process code block:', error);
-            }
-        }
-    } catch (error) {
-        console.warn('[Manifest] Failed to process existing code blocks:', error);
-    }
+function resolveLanguage(hljs, langAttr) {
+    if (!langAttr || langAttr === 'auto') return null;
+    const lang = LANGUAGE_ALIASES[langAttr] || langAttr;
+    return hljs.listLanguages().includes(lang) ? lang : null;
 }
 
-// Initialize plugin when either DOM is ready or Alpine is ready
-function initializeCodePlugin() {
-    // Configuration object for the code plugin
-    const config = {
-        // Auto-highlight all code blocks
-        autoHighlight: true,
-        // Enable line numbers by default
-        lineNumbers: false,
-        // Show titles by default
-        showTitles: true
-    };
+// ─── Content prep helpers ────────────────────────────────────────────────────
 
-    // X-Code-Group custom element for tabbed code blocks
-    class XCodeGroupElement extends HTMLElement {
-        constructor() {
-            super();
-        }
-
-        static get observedAttributes() {
-            return ['numbers', 'copy'];
-        }
-
-        get numbers() {
-            return this.hasAttribute('numbers');
-        }
+// Drop one leading and one trailing newline if present. Authors typically write
+// <pre x-code> on its own line, which leaves stray newlines that throw off line
+// numbering and the collapse threshold.
+function trimWrappingNewlines(text) {
+    return text.replace(/^\n/, '').replace(/\n$/, '');
+}
 
-        get copy() {
-            return this.hasAttribute('copy');
-        }
+// Remove the smallest common leading-whitespace block from every non-empty
+// line. Sourced text that came indented under HTML markup looks indented
+// inside the code block too, which is rarely what the author wants.
+function dedent(text) {
+    const lines = text.split('\n');
+    let minIndent = Infinity;
+    for (const line of lines) {
+        if (line.trim() === '') continue;
+        const indent = line.length - line.trimStart().length;
+        if (indent < minIndent) minIndent = indent;
+    }
+    if (minIndent === Infinity || minIndent === 0) return text;
+    return lines.map(l => l.length >= minIndent ? l.slice(minIndent) : l).join('\n');
+}
 
-        connectedCallback() {
-            // Small delay to ensure x-code elements are initialized
-            setTimeout(() => {
-                this.setupCodeGroup();
-            }, 0);
-        }
+// Convert the raw textContent / innerHTML pulled from a host element into the
+// canonical source string we feed to hljs and CodeJar.
+function prepSource(raw) {
+    return dedent(trimWrappingNewlines(raw));
+}
 
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (oldValue !== newValue) {
-                if (name === 'numbers' || name === 'copy') {
-                    this.updateAttributes();
-                }
-            }
-        }
+// Resolve the content for an element, honouring `from="#id"` (which reads the
+// referenced element's innerHTML, preserving HTML markup as the rendered
+// source) before falling back to the host element's own content.
+//
+// HTML examples are the special case: authors expect to write the literal
+// markup (`<button>`, `<div>` etc.) without entity-escaping every char. The
+// browser parses those into real DOM nodes inside the <pre>, so textContent
+// would only see "ClickMe" instead of `<button>ClickMe</button>`. Reading
+// innerHTML serialises the DOM back to source text, and a textarea-based
+// decode unwraps any `&lt;`/`&gt;` entities so mixed-style authoring also
+// works. For non-HTML languages we keep textContent — JS/CSS/etc. content
+// rarely contains tags, and innerHTML would re-encode any entities the
+// author DID write back as &lt; (preserving them in the highlighted output
+// as literal text, which is wrong).
+function resolveSource(el) {
+    const fromRef = el.getAttribute('from');
+    if (fromRef) {
+        const target = document.querySelector(fromRef);
+        if (target) return prepSource(target.innerHTML);
+    }
+    const lang = (el.getAttribute('x-code') || el.getAttribute('language') || '').toLowerCase();
+    if (HTML_LIKE_LANGS.has(lang)) {
+        const decoder = document.createElement('textarea');
+        decoder.innerHTML = el.innerHTML;
+        return prepSource(decoder.value);
+    }
+    return prepSource(el.textContent);
+}
 
-        setupCodeGroup() {
-            // Idempotency: if a tab header is already present (from prerender output
-            // or a previous connection), skip rebuilding it.  Otherwise the DOM ends
-            // up with a doubled tab row when the static page rehydrates.
-            if (this.querySelector(':scope > header[aria-label="Code examples"]')) {
-                return;
-            }
+// hljs aliases (resolved upstream) map to "xml" internally, but authors may
+// type any of these. Keep them all in the set so the source-reading path
+// behaves the same regardless of the spelling used in the attribute.
+const HTML_LIKE_LANGS = new Set(['html', 'xml', 'svg', 'xhtml', 'rss', 'atom']);
+
+// ─── Highlighting ────────────────────────────────────────────────────────────
+
+// Apply syntax highlighting to a <code> element's textContent. Returns the
+// language hljs actually used (or null when no highlighting was applied), so
+// callers can mark the host element accordingly.
+function highlightInto(codeEl, source, hljs, requestedLang) {
+    const lang = resolveLanguage(hljs, requestedLang);
+    if (lang) {
+        const result = hljs.highlight(source, { language: lang, ignoreIllegals: true });
+        codeEl.innerHTML = result.value;
+        codeEl.className = `hljs language-${lang}`;
+        codeEl.dataset.highlighted = 'yes';
+        return lang;
+    }
+    // Auto-detect path. Skip when the content looks like HTML markup — hljs
+    // logs a noisy warning for content that contains < and > in close
+    // proximity, which fires constantly on any HTML-fragment example.
+    codeEl.textContent = source;
+    if (!/^[^<]*<\w[^>]*>[^<]*<\/\w/.test(source)) {
+        try {
+            hljs.highlightElement(codeEl);
+            const detected = (codeEl.className.match(/language-([\w-]+)/) || [])[1] || null;
+            return detected;
+        } catch (e) { /* swallow; leave content as plain text */ }
+    }
+    return null;
+}
 
-            // Find all x-code elements within this group
-            const codeElements = this.querySelectorAll('x-code');
+// ─── Inline (<code x-code>, <span x-code>, etc.) ─────────────────────────────
 
-            if (codeElements.length === 0) {
-                return;
-            }
+async function setupInline(el, hljs) {
+    const source = resolveSource(el);
+    const requested = el.getAttribute('x-code') || el.getAttribute('language');
+    highlightInto(el, source, hljs, requested);
+    if (el.hasAttribute('copy')) setupInlineCopy(el);
+}
 
-            // Set default tab to first named code element
-            // Always initialize codeTabs to prevent "codeTabs is not defined" errors
-            const firstNamedCode = Array.from(codeElements).find(code => code.getAttribute('name'));
-            if (firstNamedCode) {
-                const defaultTab = firstNamedCode.getAttribute('name');
-                this.setAttribute('x-data', `{ codeTabs: '${defaultTab}' }`);
-            } else {
-                // Initialize with empty string if no named code blocks exist
-                // This prevents errors when buttons reference codeTabs
-                this.setAttribute('x-data', `{ codeTabs: '' }`);
-            }
+function setupInlineCopy(el) {
+    if (!el.hasAttribute('role')) el.setAttribute('role', 'button');
+    if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');
+    if (!el.hasAttribute('aria-label')) el.setAttribute('aria-label', 'Click to copy');
+    const fire = async (ev) => {
+        if (ev.type === 'keydown' && ev.key !== 'Enter' && ev.key !== ' ') return;
+        if (ev.type === 'keydown') ev.preventDefault();
+        try {
+            await navigator.clipboard.writeText(el.textContent);
+            el.classList.add('copied');
+            setTimeout(() => el.classList.remove('copied'), 1500);
+            // Progressive enhancement: when the tooltip plugin is loaded and
+            // the author hasn't already bound an x-tooltip to this element,
+            // flash the copied-icon in a tooltip as confirmation. Skipped
+            // entirely if either condition isn't met — the .copied class
+            // toggle above is always the baseline feedback.
+            if (window.ManifestTooltips && typeof window.ManifestTooltips.showTransient === 'function'
+                && !el.hasAttribute('x-tooltip')) {
+                window.ManifestTooltips.showTransient(
+                    el,
+                    '<span class="code-copied-icon" aria-hidden="true"></span>',
+                    1500,
+                    ['top', 'end']
+                );
+            }
+        } catch { /* clipboard rejected (browser permissions) — fail silently */ }
+    };
+    el.addEventListener('click', fire);
+    el.addEventListener('keydown', fire);
+}
 
-            // Create header for tabs
-            const header = document.createElement('header');
-
-            // Process each code element
-            codeElements.forEach((codeElement, index) => {
-                const name = codeElement.getAttribute('name');
-
-                if (!name) {
-                    return; // Skip if no name attribute
-                }
-
-                // Create tab button
-                const tabButton = document.createElement('button');
-                tabButton.setAttribute('x-on:click', `codeTabs = '${name}'`);
-                tabButton.setAttribute('x-bind:class', `codeTabs === '${name}' ? 'selected' : ''`);
-                tabButton.setAttribute('role', 'tab');
-                tabButton.setAttribute('aria-controls', `code-${name.replace(/\s+/g, '-').toLowerCase()}`);
-                tabButton.setAttribute('x-bind:aria-selected', `codeTabs === '${name}' ? 'true' : 'false'`);
-                tabButton.textContent = name;
-
-                // Add keyboard navigation
-                tabButton.addEventListener('keydown', (e) => {
-                    const tabs = header.querySelectorAll('button[role="tab"]');
-                    const currentIndex = Array.from(tabs).indexOf(tabButton);
-
-                    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-                        e.preventDefault();
-                        const nextIndex = e.key === 'ArrowRight'
-                            ? (currentIndex + 1) % tabs.length
-                            : (currentIndex - 1 + tabs.length) % tabs.length;
-                        tabs[nextIndex].focus();
-                        tabs[nextIndex].click();
-                    }
-                });
-
-                header.appendChild(tabButton);
-
-                // Set up the code element for tabs
-                codeElement.setAttribute('x-show', `codeTabs === '${name}'`);
-                codeElement.setAttribute('id', `code-${name.replace(/\s+/g, '-').toLowerCase()}`);
-                codeElement.setAttribute('role', 'tabpanel');
-                codeElement.setAttribute('aria-labelledby', `tab-${name.replace(/\s+/g, '-').toLowerCase()}`);
-
-                // Apply numbers and copy attributes from group if present
-                if (this.numbers && !codeElement.hasAttribute('numbers')) {
-                    codeElement.setAttribute('numbers', '');
-                }
-                if (this.copy && !codeElement.hasAttribute('copy')) {
-                    codeElement.setAttribute('copy', '');
-                }
-            });
-
-            // Set up header with proper ARIA attributes
-            header.setAttribute('aria-label', 'Code examples');
-
-            // Insert header at the beginning
-            this.insertBefore(header, this.firstChild);
-
-            // Set initial tab IDs after header is added
-            const tabs = header.querySelectorAll('button[role="tab"]');
-            tabs.forEach((tab, index) => {
-                const name = tab.textContent.replace(/\s+/g, '-').toLowerCase();
-                tab.setAttribute('id', `tab-${name}`);
-            });
-        }
+// ─── Block (<pre x-code>) ────────────────────────────────────────────────────
+
+async function setupBlock(pre, hljs) {
+    // Build-once guard. setupBlock can reach this function from two paths
+    // (processCodeElement for standalone, setupCodeGroup for panels) and a
+    // re-entry would read pre.textContent — which now includes the .lines
+    // gutter's "1\n2\n…" — as fresh source, repeatedly prepending the
+    // gutter digits to the code.
+    if (pre.dataset.codeBlockBuilt === 'yes') return;
+    pre.dataset.codeBlockBuilt = 'yes';
+
+    const source = resolveSource(pre);
+    const requested = pre.getAttribute('x-code') || pre.getAttribute('language');
+
+    // Reset internal structure. We always rebuild deterministically so the
+    // first call is the only one that lays anything out.
+    pre.innerHTML = '';
+
+    // ARIA: region + label when titled
+    const title = pre.getAttribute('name') || pre.getAttribute('title');
+    if (title && !pre.hasAttribute('aria-label')) pre.setAttribute('aria-label', title);
+    if (!pre.hasAttribute('role')) pre.setAttribute('role', 'region');
+
+    // Title bar — render only when not inside a code-group (the group's tab
+    // strip already shows the [name], so a per-panel title bar would
+    // duplicate it visually). The aria-label is set either way for assistive
+    // tech.
+    const inGroup = !!pre.closest('[x-code-group]');
+    if (title && !inGroup) {
+        const header = document.createElement('header');
+        const titleEl = document.createElement('div');
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
+        pre.appendChild(header);
+    }
 
-        updateAttributes() {
-            const codeElements = this.querySelectorAll('x-code');
-            codeElements.forEach(codeElement => {
-                if (this.numbers) {
-                    codeElement.setAttribute('numbers', '');
-                } else {
-                    codeElement.removeAttribute('numbers');
-                }
-                if (this.copy) {
-                    codeElement.setAttribute('copy', '');
-                } else {
-                    codeElement.removeAttribute('copy');
-                }
-            });
+    // Line numbers
+    if (pre.hasAttribute('lines')) {
+        const lines = document.createElement('div');
+        lines.className = 'lines';
+        lines.setAttribute('aria-hidden', 'true');
+        const count = source.split('\n').length;
+        for (let i = 1; i <= count; i++) {
+            const span = document.createElement('span');
+            span.textContent = String(i);
+            lines.appendChild(span);
         }
+        pre.appendChild(lines);
     }
 
-    // X-Code custom element
-    class XCodeElement extends HTMLElement {
-        constructor() {
-            super();
-        }
+    // Code element (the highlight target)
+    const code = document.createElement('code');
+    const actualLang = highlightInto(code, source, hljs, requested);
+    pre.appendChild(code);
+
+    // Copy button (floating, top-end). Suppressed when this block is a
+    // panel inside an [x-code-group] — the group itself owns the single
+    // wrapper-level copy button (which targets the active panel) so the
+    // affordance stays at the outermost container's top-end regardless
+    // of which child(ren) carry [copy].
+    if (pre.hasAttribute('copy') && !inGroup) setupBlockCopy(pre, code);
+
+    // Collapse
+    if (pre.hasAttribute('collapse')) setupCollapse(pre, code);
+
+    // Editor (lazy CodeJar)
+    if (pre.hasAttribute('edit')) {
+        const lang = actualLang || resolveLanguage(hljs, requested);
+        setupEditor(pre, code, lang, hljs);
+    }
+}
 
-        static get observedAttributes() {
-            return ['language', 'numbers', 'title', 'copy'];
-        }
+function setupBlockCopy(pre, code) {
+    const btn = document.createElement('button');
+    btn.className = 'copy';
+    btn.type = 'button';
+    btn.setAttribute('aria-label', 'Copy code to clipboard');
+    btn.addEventListener('click', async () => {
+        try {
+            await navigator.clipboard.writeText(code.textContent);
+            btn.classList.add('copied');
+            setTimeout(() => btn.classList.remove('copied'), 1500);
+        } catch { /* clipboard rejected (browser permissions) — fail silently */ }
+    });
+    pre.appendChild(btn);
+}
 
-        get language() {
-            return this.getAttribute('language') || 'auto';
-        }
+function setupCollapse(pre, code) {
+    const value = pre.getAttribute('collapse');
+    const threshold = parseInt(value, 10);
+    const collapseAt = Number.isFinite(threshold) && threshold > 0 ? threshold : 20;
+    const lineCount = code.textContent.split('\n').length;
+    if (lineCount <= collapseAt) return;
+
+    // Expose the threshold to CSS so the max-height matches the visible-line
+    // count exactly. Line-height in our typography is 1.5, so N lines === N
+    // × 1.5em of content height (plus pre padding handled by the selector).
+    pre.style.setProperty('--collapse-lines', String(collapseAt));
+    pre.setAttribute('data-collapsed', '');
+
+    const btn = document.createElement('button');
+    btn.className = 'expand';
+    btn.type = 'button';
+    btn.setAttribute('aria-expanded', 'false');
+    const hiddenCount = lineCount - collapseAt;
+    // Visual label is locale-safe (no translatable strings) — "+N" reads
+    // universally as "expand to see N more", "−" (U+2212 minus sign) as
+    // "collapse". Screen readers receive an explicit English aria-label
+    // so the action remains intelligible regardless of the visual glyph.
+    const updateLabel = () => {
+        const collapsed = pre.hasAttribute('data-collapsed');
+        btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+        btn.textContent = collapsed ? `+${hiddenCount}` : '−';
+        btn.setAttribute('aria-label', collapsed
+            ? `Show ${hiddenCount} more line${hiddenCount === 1 ? '' : 's'}`
+            : 'Show less');
+    };
+    btn.addEventListener('click', () => {
+        if (pre.hasAttribute('data-collapsed')) pre.removeAttribute('data-collapsed');
+        else pre.setAttribute('data-collapsed', '');
+        updateLabel();
+    });
+    updateLabel();
+    pre.appendChild(btn);
+}
 
-        get numbers() {
-            return this.hasAttribute('numbers');
+async function setupEditor(pre, code, lang, hljs) {
+    try {
+        const CodeJar = await loadCodeJar();
+        code.setAttribute('contenteditable', 'plaintext-only');
+        // Some browsers (older Safari) don't support plaintext-only — fall back
+        // to plain "true". CodeJar handles paste sanitization either way.
+        if (code.getAttribute('contenteditable') !== 'plaintext-only' && code.contentEditable !== 'plaintext-only') {
+            code.setAttribute('contenteditable', 'true');
         }
-
-        get title() {
-            return this.getAttribute('name') || this.getAttribute('title');
+        code.setAttribute('spellcheck', 'false');
+        if (!pre.hasAttribute('aria-label')) {
+            pre.setAttribute('aria-label', lang ? `${lang} editor` : 'Code editor');
         }
 
-        get copy() {
-            return this.hasAttribute('copy');
-        }
+        const editor = CodeJar(code, (el) => {
+            if (!lang) { /* no language: leave textContent as-is */ return; }
+            const text = el.textContent;
+            const result = hljs.highlight(text, { language: lang, ignoreIllegals: true });
+            el.innerHTML = result.value;
+        }, {
+            tab: '  ',
+            indentOn: /[{[(]\s*$|<[a-zA-Z][^<>]*(?<!\/)>$/,
+            addClosing: true
+        });
+        // CodeJar applies white-space: pre-wrap. Our convention for code blocks
+        // is true no-wrap (lines extend, parent scrolls), so override.
+        code.style.whiteSpace = 'pre';
+        // Expose the editor instance on the host so consumers (e.g. the hero
+        // editor) can wire onUpdate / updateCode / save / restore without
+        // re-mounting CodeJar themselves.
+        pre._codeJar = editor;
+        pre.dispatchEvent(new CustomEvent('code:editor-ready', { detail: { editor } }));
+    } catch { /* CodeJar load / mount failed — fail silently */ }
+}
 
-        get contentElement() {
-            return this.querySelector('code') || this;
-        }
+// ─── Dispatch ────────────────────────────────────────────────────────────────
 
-        connectedCallback() {
-            // Idempotency: if the element already has a fully-rendered structure
-            // (a <pre><code> child from prerender output), skip the rebuild.
-            // Reading innerHTML and re-setting it as textContent (extractContent
-            // line ~524) treats the prerendered hljs <span> markup as code
-            // source, producing nested highlight-of-highlight output.
-            const alreadyRendered =
-                this.querySelector(':scope > pre > code') &&
-                (this.hasAttribute('data-pre-rendered') ||
-                 this.querySelector(':scope > pre > code.hljs, :scope > pre > code[data-highlighted="yes"]'));
-            if (!alreadyRendered) {
-                this.setupElement();
-                this.highlightCode();
-            }
-        }
+// Process one host element. Routes to inline vs block based on tag.
+async function processCodeElement(el) {
+    if (el.dataset.codeProcessed === 'yes') return;
+    // Group-owned panels are handled wholesale by setupCodeGroup: each
+    // <pre x-code> sibling is consumed into a <code> child of the new
+    // group wrapper. Skip here so we don't double-process / re-parent.
+    if (el.parentElement && el.parentElement.hasAttribute('x-code-group')) return;
+    el.dataset.codeProcessed = 'yes';
 
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (oldValue !== newValue) {
-                if (name === 'language') {
-                    this.highlightCode();
-                } else if (name === 'numbers') {
-                    this.updateLineNumbers();
-                } else if (name === 'title') {
-                    this.updateTitle();
-                } else if (name === 'copy' && typeof this.updateCopyButton === 'function') {
-                    this.updateCopyButton();
-                }
-            }
+    try {
+        // Pass the requested language to the loader so it can stay in lean
+        // mode (core + only this language) when the rest of the page only
+        // uses explicit languages too.
+        const requestedLang = el.getAttribute('x-code') || el.getAttribute('language');
+        const hljs = await loadHighlightJS(requestedLang);
+        const tag = el.tagName;
+        const inPre = tag === 'CODE' && el.parentElement && el.parentElement.tagName === 'PRE';
+
+        if (tag === 'PRE') {
+            await setupBlock(el, hljs);
+        } else if (tag === 'CODE' && !inPre) {
+            await setupInline(el, hljs);
+        } else if (inPre) {
+            // <pre><code x-code="…"> — bubble up to the <pre> as the block host
+            const pre = el.parentElement;
+            // Migrate x-code attribute up to pre so the structure is uniform
+            if (!pre.hasAttribute('x-code')) {
+                pre.setAttribute('x-code', el.getAttribute('x-code') || '');
+            }
+            await setupBlock(pre, hljs);
+        } else {
+            // Arbitrary element (div, span, etc.) — treat as inline
+            await setupInline(el, hljs);
         }
+    } catch { /* highlight / setup failure — leave the block as plain text */ }
+}
 
-        setupElement() {
-            // Extract content BEFORE adding any UI elements
-            let content = this.extractContent();
-
-            // Check if we have preserved original content for complete HTML documents
-            const originalContent = this.getAttribute('data-original-content');
-            if (originalContent) {
-                // Use the preserved original content that includes document-level tags
-                content = originalContent;
-                // Remove the data attribute as we no longer need it
-                this.removeAttribute('data-original-content');
-            }
-
-            // Create semantically correct structure: pre > code
-            const pre = document.createElement('pre');
-            const code = document.createElement('code');
-
-            // Use textContent to preserve HTML tags as literal text
-            // This ensures highlight.js treats the content as code, not HTML
-            code.textContent = content;
-            pre.appendChild(code);
-            this.textContent = '';
-            this.appendChild(pre);
-
-            // Create title if present (after pre element is created) - but only if not in a code group
-            if (this.title && !this.closest('x-code-group')) {
-                const header = document.createElement('header');
-
-                const title = document.createElement('div');
-                title.textContent = this.title;
-                header.appendChild(title);
-
-                this.insertBefore(header, pre);
-            }
-
-            // Add line numbers if enabled
-            if (this.numbers) {
-                this.setupLineNumbers();
-            }
-
-            // Add copy button if enabled (after content extraction)
-            if (this.copy) {
-                this.setupCopyButton();
-            }
-
-            // If this is in a code group, ensure copy button comes after title in tab order
-            const codeGroup = this.closest('x-code-group');
-            if (codeGroup && this.copy) {
-                const copyButton = this.querySelector('.copy');
-                if (copyButton) {
-                    // Set tabindex to ensure it comes after header buttons in tab order
-                    copyButton.setAttribute('tabindex', '0');
-                }
+// ─── Code groups (tab strip across [name] siblings) ──────────────────────────
+
+// Build the canonical group structure:
+//
+//   <pre x-code-group>                         ← wrapper coordinates tabs
+//     <header role=tablist>                      (a <div x-code-group> source
+//       <button role=tab>HTML</button>           is normalized to <pre> at
+//       <button role=tab>CSS</button>            process time)
+//     </header>
+//     <pre x-code="html" name=HTML role=tabpanel>...full block...</pre>
+//     <pre x-code="css"  name=CSS  role=tabpanel style="display:none">...</pre>
+//     <aside class=frame name=Preview role=tabpanel style="display:none">...</aside>
+//     <button.copy>                              ← present when wrapper has [copy]
+//   </pre>
+//
+// Each code panel is a full <pre x-code> block with its own line numbers,
+// collapse toggle, editor — i.e. it runs through setupBlock. The wrapper
+// inherits per-panel feature attributes (lines, edit, collapse) to child
+// panels that don't set them, so:
+//
+//   <pre x-code-group lines>
+//     <pre x-code="html" name=HTML>...</pre>
+//     <pre x-code="css"  name=CSS>...</pre>
+//   </pre>
+//
+// behaves as if each child had `lines` written on it directly. Children
+// that DO set the attribute (or set it to a different value, e.g. per-panel
+// collapse="5") win over inheritance.
+//
+// `copy` is NOT inherited — instead, when present on the wrapper, the
+// plugin attaches a single copy button to the wrapper itself that targets
+// whichever panel is currently active. This keeps the button on the
+// element that actually carries the [copy] attribute, and avoids the
+// visual clutter of one button per tab.
+const GROUP_INHERITABLE_ATTRS = ['lines', 'edit', 'collapse'];
+
+async function setupCodeGroup(group) {
+    if (group.dataset.groupProcessed === 'yes') return;
+
+    const sourcePanels = Array.from(group.children).filter(c => c.hasAttribute('name'));
+    if (sourcePanels.length === 0) return;
+    // Claim the group synchronously so re-entrant callers (the directive +
+    // observer can both arrive before the first call's `await` resolves)
+    // bail out — otherwise the wrapper accumulates duplicate tab strips.
+    group.dataset.groupProcessed = 'yes';
+
+    // Inherit feature attributes from wrapper to child <pre x-code> panels
+    // that don't set them. Run BEFORE setupBlock so the inherited attrs
+    // drive that block's setup.
+    for (const panel of sourcePanels) {
+        if (panel.tagName !== 'PRE') continue;
+        for (const attr of GROUP_INHERITABLE_ATTRS) {
+            if (group.hasAttribute(attr) && !panel.hasAttribute(attr)) {
+                panel.setAttribute(attr, group.getAttribute(attr));
             }
         }
+    }
 
-        extractContent() {
-            // Get the content and preserve original formatting
-            let content = this.textContent;
-
-            // Preserve intentional line breaks at the beginning and end
-            // Only trim if there are no intentional line breaks
-            const hasLeadingLineBreak = content.startsWith('\n');
-            const hasTrailingLineBreak = content.endsWith('\n');
-
-            // Trim but preserve intentional line breaks
-            if (hasLeadingLineBreak) {
-                content = '\n' + content.trimStart();
-            } else {
-                content = content.trimStart();
-            }
-
-            if (hasTrailingLineBreak) {
-                content = content.trimEnd() + '\n';
-            } else {
-                content = content.trimEnd();
-            }
-
-            // Check if this is markdown-generated content (has preserved indentation)
-            // Also check if this is inside a frame (aside element)
-            const isInsideFrame = this.closest('aside');
-            const hasPreservedIndentation = content.includes('\n    ') || content.includes('\n\t');
-
-            // Special handling for frames - remove leading and trailing empty lines
-            if (isInsideFrame) {
-                // If we have a title and the content starts with it, remove it
-                if (this.title && content.startsWith(this.title)) {
-                    content = content.substring(this.title.length);
-                    // Remove any leading newline after removing title
-                    content = content.replace(/^\n+/, '');
-                }
-
-                // Remove leading empty lines and whitespace
-                content = content.replace(/^\s*\n+/, '');
-                // Remove trailing empty lines and whitespace
-                content = content.replace(/\n+\s*$/, '');
-                // Also trim any remaining leading/trailing whitespace
-                content = content.trim();
-            }
-
-            if (!hasPreservedIndentation && content.includes('\n') && !isInsideFrame) {
-                // Only normalize indentation for non-markdown content
-                const hasTrailingLineBreakText = content.endsWith('\n');
-                const lines = content.split('\n');
-
-                // Find the minimum indentation (excluding empty lines and lines with no indentation)
-                let minIndent = Infinity;
-                for (const line of lines) {
-                    if (line.trim() !== '') {
-                        const indent = line.length - line.trimStart().length;
-                        if (indent > 0) { // Only consider lines that actually have indentation
-                            minIndent = Math.min(minIndent, indent);
-                        }
-                    }
-                }
-
-                // Remove the common indentation from all lines
-                if (minIndent < Infinity) {
-                    content = lines.map(line => {
-                        if (line.trim() === '') return '';
-                        const indent = line.length - line.trimStart().length;
-                        // Only remove indentation if the line has enough spaces
-                        return indent >= minIndent ? line.slice(minIndent) : line;
-                    }).join('\n');
-
-                    // Preserve trailing line break if it was originally there
-                    if (hasTrailingLineBreakText) {
-                        content += '\n';
-                    }
-                }
-            }
-
-            // Check if the content was interpreted as HTML (has child nodes)
-            if (this.children.length > 0) {
-                // Extract the original HTML from the child nodes
-                content = this.innerHTML;
-
-                // Preserve intentional line breaks at the beginning and end
-                const hasLeadingLineBreak = content.startsWith('\n');
-                const hasTrailingLineBreak = content.endsWith('\n');
-
-                // Trim but preserve intentional line breaks
-                if (hasLeadingLineBreak) {
-                    content = '\n' + content.trimStart();
-                } else {
-                    content = content.trimStart();
-                }
-
-                if (hasTrailingLineBreak) {
-                    content = content.trimEnd() + '\n';
-                } else {
-                    content = content.trimEnd();
-                }
-
-                // Remove any copy button that might have been included
-                content = content.replace(/<button[^>]*class="copy"[^>]*>.*?<\/button>/g, '');
-
-                // Clean up empty attribute values (data-head="" -> data-head)
-                content = content.replace(/(\w+)=""/g, '$1');
-
-                // For HTML content, normalize indentation (but not for frames)
-                const isInsideFrame = this.closest('aside');
-                const hasTrailingLineBreakHtml = content.endsWith('\n');
-                const lines = content.split('\n');
-                if (lines.length > 1 && !isInsideFrame) {
-                    // Find the minimum indentation
-                    let minIndent = Infinity;
-                    for (const line of lines) {
-                        if (line.trim() !== '') {
-                            const indent = line.length - line.trimStart().length;
-                            if (indent > 0) {
-                                minIndent = Math.min(minIndent, indent);
-                            }
-                        }
-                    }
-
-                    // Remove the common indentation from all lines
-                    if (minIndent < Infinity) {
-                        content = lines.map(line => {
-                            if (line.trim() === '') return '';
-                            const indent = line.length - line.trimStart().length;
-                            return indent >= minIndent ? line.slice(minIndent) : line;
-                        }).join('\n');
-
-                        // Preserve trailing line break if it was originally there
-                        if (hasTrailingLineBreakHtml) {
-                            content += '\n';
-                        }
-                    }
-                }
-            }
+    // Ordered unique tab names. Multiple panels may share a name (e.g. a
+    // frame + a code block co-visible under one tab); each panel is shown
+    // independently when its tab activates.
+    const tabNames = [];
+    for (const p of sourcePanels) {
+        const n = p.getAttribute('name');
+        if (!tabNames.includes(n)) tabNames.push(n);
+    }
+    const active = tabNames[0];
+    const slugify = s => s.replace(/\s+/g, '-').toLowerCase();
+
+    // Preload hljs + every language needed across the group so each panel's
+    // setupBlock can synchronously highlight without re-loading.
+    const codeLangs = sourcePanels
+        .filter(p => p.tagName === 'PRE' && p.hasAttribute('x-code'))
+        .map(p => p.getAttribute('x-code'))
+        .filter(Boolean);
+    let hljs = null;
+    if (codeLangs.length > 0) {
+        hljs = await loadHighlightJS(codeLangs[0]);
+        for (const l of codeLangs.slice(1)) await registerLanguage(l);
+    }
 
-            return content;
+    // Normalize wrapper to <pre>. Authors may write <div x-code-group> or
+    // <pre x-code-group>; we always end up with a <pre> for CSS uniformity.
+    // When converting from <div>, transplant children rather than re-creating
+    // — the same <pre x-code> nodes that Alpine has wired up keep their
+    // identity, so subsequent processOne calls (and any author refs into
+    // them) stay valid.
+    let pre;
+    if (group.tagName === 'PRE') {
+        pre = group;
+    } else {
+        pre = document.createElement('pre');
+        for (const a of group.attributes) pre.setAttribute(a.name, a.value);
+        while (group.firstChild) pre.appendChild(group.firstChild);
+        group.replaceWith(pre);
+    }
+    pre.dataset.groupProcessed = 'yes';
+    if (!pre.hasAttribute('role')) pre.setAttribute('role', 'region');
+
+    // Run each code panel through setupBlock so it gets its full feature
+    // treatment (line numbers, copy button, collapse, editor). Frames stay
+    // as-is. setupBlock detects [x-code-group] ancestor and suppresses the
+    // per-panel title bar — the tab strip header serves that role.
+    for (const panel of sourcePanels) {
+        if (panel.tagName === 'PRE' && panel.hasAttribute('x-code')) {
+            await setupBlock(panel, hljs);
+            panel.dataset.codeProcessed = 'yes';
         }
+    }
 
-        async setupLineNumbers() {
-            try {
-                // Ensure the pre element exists and has content
-                const pre = this.querySelector('pre');
-
-                if (pre && !this.querySelector('.lines')) {
-                    // Make sure the pre element is properly set up first
-                    if (!pre.querySelector('code')) {
-                        const code = document.createElement('code');
-                        code.textContent = pre.textContent;
-                        pre.textContent = '';
-                        pre.appendChild(code);
-                    }
-
-                    // Count the lines using the actual DOM content
-                    const codeText = pre.textContent;
-                    const lines = codeText.split('\n');
-
-                    // Create the lines container
-                    const linesContainer = document.createElement('div');
-                    linesContainer.className = 'lines';
-
-                    // Add line number items for all lines (including empty ones)
-                    for (let i = 0; i < lines.length; i++) {
-                        const lineSpan = document.createElement('span');
-                        lineSpan.textContent = (i + 1).toString();
-                        linesContainer.appendChild(lineSpan);
-                    }
-
-                    // Insert line numbers before the pre element
-                    this.insertBefore(linesContainer, pre);
-                }
-            } catch (error) {
-                console.warn('[Manifest] Failed to setup line numbers:', error);
+    // Tab strip. The <header> is purely a layout container; the role=tablist
+    // sits on an inner <div> that holds the tab buttons. That way the
+    // tablist can have its own overflow-x scrolling (when there are too
+    // many tabs to fit) without dragging sibling header content into the
+    // scroll region. CSS targets the inner element via [role="tablist"]
+    // — no extra class needed.
+    const header = document.createElement('header');
+    const tablist = document.createElement('div');
+    tablist.setAttribute('role', 'tablist');
+    tablist.setAttribute('aria-label', 'Code examples');
+    header.appendChild(tablist);
+
+    const tabButtons = tabNames.map((name, i) => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.setAttribute('role', 'tab');
+        btn.id = `${slugify(name)}-tab-${i}`;
+        btn.textContent = name;
+        btn.setAttribute('aria-selected', name === active ? 'true' : 'false');
+        btn.tabIndex = name === active ? 0 : -1;
+        btn.addEventListener('click', () => activate(name));
+        tablist.appendChild(btn);
+        return btn;
+    });
+    tabButtons.forEach((btn, idx) => {
+        btn.addEventListener('keydown', (ev) => {
+            if (ev.key === 'ArrowRight' || ev.key === 'ArrowLeft') {
+                ev.preventDefault();
+                const next = ev.key === 'ArrowRight'
+                    ? (idx + 1) % tabButtons.length
+                    : (idx - 1 + tabButtons.length) % tabButtons.length;
+                tabButtons[next].focus();
+                tabButtons[next].click();
+            } else if (ev.key === 'Home') {
+                ev.preventDefault(); tabButtons[0].focus(); tabButtons[0].click();
+            } else if (ev.key === 'End') {
+                ev.preventDefault(); tabButtons[tabButtons.length - 1].focus(); tabButtons[tabButtons.length - 1].click();
             }
+        });
+    });
+    pre.insertBefore(header, pre.firstChild);
+
+    // Wire ARIA / IDs on each panel so screen-reader navigation maps tab → panel.
+    // setupBlock sets role="region" on its <pre>; override to "tabpanel" here
+    // because the group context is more specific (the tablist is what labels it).
+    sourcePanels.forEach((panel, i) => {
+        const name = panel.getAttribute('name');
+        const tabBtn = tabButtons[tabNames.indexOf(name)];
+        panel.id = panel.id || `${slugify(name)}-panel-${i}`;
+        panel.setAttribute('role', 'tabpanel');
+        if (tabBtn && !panel.hasAttribute('aria-labelledby')) {
+            panel.setAttribute('aria-labelledby', tabBtn.id);
         }
+    });
 
-        async setupCopyButton() {
+    // Wrapper-level copy button. Created when [copy] is on the wrapper OR on
+    // any child panel — the button always lives at the group's top-end so
+    // the affordance is in the same spot regardless of which child carries
+    // [copy]. setupBlock suppresses the per-panel copy button when inside a
+    // group (the inGroup check) so we never duplicate.
+    //
+    // Appended as a direct child of the <pre> (sibling to the header) so it
+    // can be absolutely positioned over the top-end of the wrapper without
+    // competing with the header's own overflow-scroll region. Same
+    // positioning rule as for a standalone <pre x-code copy>.
+    const wrapperHasCopy = pre.hasAttribute('copy');
+    const anyPanelCopy = sourcePanels.some(p => p.hasAttribute('copy'));
+    let copyBtn = null;
+    if (wrapperHasCopy || anyPanelCopy) {
+        copyBtn = document.createElement('button');
+        copyBtn.className = 'copy';
+        copyBtn.type = 'button';
+        copyBtn.setAttribute('aria-label', 'Copy code to clipboard');
+        copyBtn.addEventListener('click', async () => {
+            // When multiple panels share the active name (e.g. a paired
+            // frame + code), prefer the <pre x-code> for copy — the source
+            // is what an author wants to take, not the rendered frame's
+            // text content.
+            const sameName = sourcePanels.filter(p => p.getAttribute('name') === activeName);
+            const activePanel = sameName.find(p => p.tagName === 'PRE' && p.hasAttribute('x-code')) || sameName[0];
+            if (!activePanel) return;
+            const code = activePanel.querySelector(':scope > code') || activePanel;
             try {
-                const copyButton = document.createElement('button');
-                copyButton.className = 'copy';
-                copyButton.setAttribute('aria-label', 'Copy code to clipboard');
-                copyButton.setAttribute('type', 'button');
-
-                copyButton.addEventListener('click', () => {
-                    this.copyCodeToClipboard();
-                });
-
-                // Add keyboard support
-                copyButton.addEventListener('keydown', (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        this.copyCodeToClipboard();
-                    }
-                });
-
-                this.appendChild(copyButton);
-            } catch (error) {
-                console.warn('[Manifest] Failed to setup copy button:', error);
-            }
-        }
+                await navigator.clipboard.writeText(code.textContent);
+                copyBtn.classList.add('copied');
+                setTimeout(() => copyBtn.classList.remove('copied'), 1500);
+            } catch { /* clipboard rejected (browser permissions) — fail silently */ }
+        });
+        pre.appendChild(copyBtn);
+    }
 
-        async copyCodeToClipboard() {
-            try {
-                const codeElement = this.contentElement;
-                const codeText = codeElement.textContent;
-
-                await navigator.clipboard.writeText(codeText);
-
-                // Show copied state using CSS classes
-                const copyButton = this.querySelector('.copy');
-                if (copyButton) {
-                    copyButton.classList.add('copied');
-                    setTimeout(() => {
-                        copyButton.classList.remove('copied');
-                    }, 2000);
-                }
-            } catch (error) {
-                console.warn('[Manifest] Failed to copy code:', error);
-            }
+    // Visibility toggle. Explicit style.display rather than the [hidden]
+    // attribute, because pre's display:flex from typography.css outweighs
+    // the UA `[hidden] { display: none }` rule. Also flips the copy button
+    // visibility per-tab: when [copy] sits on the wrapper it stays visible
+    // for every tab; when it sits only on individual panels, the button
+    // shows for tabs whose panels carry [copy] and hides for the rest.
+    let activeName = active;
+    function activate(name) {
+        activeName = name;
+        tabButtons.forEach(btn => {
+            const isActive = btn.textContent === name;
+            btn.setAttribute('aria-selected', isActive ? 'true' : 'false');
+            btn.tabIndex = isActive ? 0 : -1;
+        });
+        sourcePanels.forEach(panel => {
+            panel.style.display = panel.getAttribute('name') === name ? '' : 'none';
+        });
+        if (copyBtn) {
+            const activeCanCopy = wrapperHasCopy || sourcePanels
+                .filter(p => p.getAttribute('name') === name)
+                .some(p => p.hasAttribute('copy'));
+            copyBtn.style.display = activeCanCopy ? '' : 'none';
         }
+    }
+    activate(active);
+}
 
-        updateLineNumbers() {
-            if (this.numbers) {
-                this.setupLineNumbers();
-            } else {
-                // Remove line numbers if disabled
-                const lines = this.querySelector('.lines');
-                if (lines) {
-                    lines.remove();
-                }
-            }
+// ─── Page scan + observation ─────────────────────────────────────────────────
+
+// Markdown emits <pre><code class="language-X">…</code></pre>. Promote these
+// to first-class hosts by setting x-code on the <pre> when we encounter them,
+// so they flow through the same processor as authored <pre x-code> blocks.
+// Accepts either a Document/Element (scans descendants) or a single <pre>
+// element (adopts just that one).
+function adoptMarkdownBlocks(root = document) {
+    if (root && root.tagName === 'PRE' && !root.hasAttribute('x-code')) {
+        const code = root.querySelector(':scope > code[class*="language-"]');
+        if (!code) return;
+        const match = code.className.match(/language-([\w-]+)/);
+        root.setAttribute('x-code', match ? match[1] : '');
+        if (!root.hasAttribute('name') && root.hasAttribute('title')) {
+            root.setAttribute('name', root.getAttribute('title'));
         }
-
-        async highlightCode() {
-            try {
-                // Ensure highlight.js is loaded
-                const hljs = await loadHighlightJS();
-
-                const codeElement = this.contentElement;
-
-                // Skip if this element contains HTML (has child elements)
-                if (codeElement.children.length > 0) {
-                    return;
-                }
-
-                // Only skip HTML content for auto-detection, not when language is explicitly specified
-                const content = codeElement.textContent || '';
-
-                // Reset highlighting if already highlighted
-                if (codeElement.dataset.highlighted === 'yes') {
-                    delete codeElement.dataset.highlighted;
-                    // Clear all highlight.js related classes
-                    codeElement.className = codeElement.className.replace(/\bhljs\b|\blanguage-\w+\b/g, '').trim();
-                }
-
-                // Set language class if specified
-                if (this.language && this.language !== 'auto') {
-                    // Skip non-programming languages
-                    if (this.language === 'frame') {
-                        return;
-                    }
-
-                    // Check if the language is supported by highlight.js
-                    const supportedLanguages = hljs.listLanguages();
-                    const languageAliases = {
-                        'js': 'javascript',
-                        'ts': 'typescript',
-                        'py': 'python',
-                        'rb': 'ruby',
-                        'sh': 'bash',
-                        'yml': 'yaml',
-                        'html': 'xml'
-                    };
-
-                    let actualLanguage = this.language;
-                    if (languageAliases[this.language]) {
-                        actualLanguage = languageAliases[this.language];
-                    }
-
-                    // Only highlight if language is supported, otherwise skip highlighting
-                    if (supportedLanguages.includes(actualLanguage)) {
-                        // Use hljs.highlight() with specific language to avoid auto-detection
-                        const result = hljs.highlight(codeElement.textContent, { language: actualLanguage });
-                        codeElement.innerHTML = result.value;
-                        codeElement.className = `language-${actualLanguage} hljs`;
-                        codeElement.dataset.highlighted = 'yes';
-                    } else {
-                        // Skip unsupported languages
-                        return;
-                    }
-                } else {
-                    // For auto-detection, only proceed if content doesn't look like HTML
-                    if (content.includes('<') && content.includes('>') && content.includes('</')) {
-                        // Skip HTML-like content to avoid security warnings during auto-detection
-                        return;
-                    }
-
-                    // Remove any existing language class for auto-detection
-                    codeElement.className = codeElement.className.replace(/\blanguage-\w+/g, '');
-
-                    // Use highlightElement for auto-detection when no specific language
-                    hljs.highlightElement(codeElement);
-                }
-
-            } catch (error) {
-                console.warn(`[Manifest] Failed to highlight code:`, error);
-            }
+        return;
+    }
+    const candidates = root.querySelectorAll('pre:not([x-code]):not([data-code-processed]) > code[class*="language-"]');
+    for (const code of candidates) {
+        const pre = code.parentElement;
+        if (!pre) continue;
+        const match = code.className.match(/language-([\w-]+)/);
+        const lang = match ? match[1] : '';
+        pre.setAttribute('x-code', lang);
+        if (!pre.hasAttribute('name') && pre.hasAttribute('title')) {
+            pre.setAttribute('name', pre.getAttribute('title'));
         }
+    }
+}
 
-        update() {
-            this.highlightCode();
+// Per-element IntersectionObserver — each candidate processes on its own
+// when it scrolls into view. This is important for two reasons:
+//   1. SPA routes that aren't currently visible (display:none from the
+//      router) shouldn't trigger loadHighlightJS for their hidden blocks.
+//      A page-wide scan would scoop them up and an auto-detect block in a
+//      hidden route would push the loader into full-bundle mode even
+//      though the visible route is lean-mode eligible.
+//   2. Long pages with many code blocks don't pay the highlight cost up
+//      front — each block runs hljs only when it nears the viewport.
+let codeIO = null;
+
+function ensureObserver() {
+    if (codeIO) return codeIO;
+    codeIO = new IntersectionObserver((entries, observer) => {
+        for (const entry of entries) {
+            if (!entry.isIntersecting) continue;
+            // The router uses display:none to hide inactive SPA routes. There's
+            // a small window during initial Alpine boot where the IO's initial
+            // entry for an element fires as "intersecting" before the router
+            // has applied display:none. checkVisibility() is the source of
+            // truth; if the element is actually hidden, leave it observed so
+            // a future route change re-fires the IO when it becomes visible.
+            const t = entry.target;
+            if (typeof t.checkVisibility === 'function' && !t.checkVisibility()) continue;
+            observer.unobserve(t);
+            handleVisible(t);
         }
+    }, { rootMargin: '100px', threshold: 0 });
+    return codeIO;
+}
 
-        updateTitle() {
-            let titleElement = this.querySelector('header div');
-            if (this.title) {
-                if (!titleElement) {
-                    titleElement = document.createElement('div');
-                    titleElement.textContent = this.title;
-                    this.insertBefore(titleElement, this.firstChild);
-                }
-                titleElement.textContent = this.title;
-            } else if (titleElement) {
-                titleElement.remove();
-            }
-        }
+function handleVisible(el) {
+    // When any code element in the active route first crosses into view,
+    // eagerly process every currently-visible candidate on the page. This
+    // avoids the "popping" effect of incremental highlighting as the user
+    // scrolls — once hljs is loaded, everything currently on screen gets
+    // styled at once. Below-the-fold and hidden-route candidates stay
+    // observed and process when they later become visible.
+    const candidates = document.querySelectorAll(
+        '[x-code]:not([data-code-processed]),' +
+        '[x-code-group]:not([data-group-processed]),' +
+        'pre:not([x-code]):not([data-code-processed]) > code[class*="language-"]'
+    );
+    // Always include the triggering element (it's already known to be visible).
+    processOne(el);
+    for (const c of candidates) {
+        if (c === el) continue;
+        const visible = typeof c.checkVisibility === 'function' ? c.checkVisibility() : true;
+        if (!visible) continue;
+        codeIO && codeIO.unobserve(c);
+        processOne(c);
+    }
+}
 
-        updateCopyButton() {
-            const existingCopyButton = this.querySelector('.copy');
-
-            if (this.copy) {
-                if (!existingCopyButton) {
-                    // Only add copy button if setupElement has already been called
-                    // (i.e., if we have a pre element)
-                    if (this.querySelector('pre')) {
-                        this.setupCopyButton();
-                    }
-                    // Otherwise, the copy button will be added in setupElement()
-                }
-            } else {
-                if (existingCopyButton) {
-                    existingCopyButton.remove();
-                }
-            }
-        }
+function processOne(el) {
+    if (el.hasAttribute && el.hasAttribute('x-code-group')) {
+        setupCodeGroup(el);
+    } else if (el.hasAttribute && el.hasAttribute('x-code')) {
+        processCodeElement(el);
+    } else if (el.matches && el.matches('pre > code[class*="language-"]')) {
+        adoptMarkdownBlocks(el.parentElement);
+        processCodeElement(el.parentElement);
     }
+}
 
-    // Initialize the plugin
-    async function initialize() {
-        try {
-            // Register the custom element
-            if (!customElements.get('x-code')) {
-                customElements.define('x-code', XCodeElement);
-            }
-            if (!customElements.get('x-code-group')) {
-                customElements.define('x-code-group', XCodeGroupElement);
-            }
+// Start observing every candidate in `root` that hasn't already been
+// processed. Idempotent — re-observation of an already-observed element
+// is a no-op per the IntersectionObserver spec.
+function observeAll(root = document) {
+    const io = ensureObserver();
+    root.querySelectorAll('[x-code]:not([data-code-processed])').forEach(el => io.observe(el));
+    root.querySelectorAll('[x-code-group]:not([data-group-processed])').forEach(el => io.observe(el));
+    root.querySelectorAll('pre:not([x-code]):not([data-code-processed]) > code[class*="language-"]').forEach(el => io.observe(el));
+}
 
-            // Listen for markdown plugin conversions (always process when new blocks appear)
-            const runProcess = () => processExistingCodeBlocks();
-            document.addEventListener('manifest:code-blocks-converted', runProcess);
-            if (document.body) {
-                document.body.addEventListener('manifest:code-blocks-converted', runProcess);
-            }
+// Re-scan after markdown injections (the markdown plugin dispatches this
+// when a fenced-code render is appended to the DOM).
+function onCodeBlocksConverted() {
+    observeAll();
+}
 
-            // Defer loading highlight.js until first code block is in view (or process immediately if none to observe)
-            const codeTargets = document.querySelectorAll('pre > code:not(.hljs):not([data-highlighted="yes"]), x-code:not([data-highlighted="yes"])');
-            if (codeTargets.length === 0) {
-                return;
-            }
-            const io = new IntersectionObserver((entries) => {
-                if (!entries.some(e => e.isIntersecting)) return;
-                io.disconnect();
-                runProcess();
-            }, { rootMargin: '100px', threshold: 0 });
-            codeTargets.forEach(el => io.observe(el));
-        } catch (error) {
-            console.error('[Manifest] Failed to initialize code plugin:', error);
-        }
-    }
+// ─── Initialization ──────────────────────────────────────────────────────────
 
-    // Alpine.js directive for code highlighting (only if Alpine is available)
-    if (typeof Alpine !== 'undefined') {
-        Alpine.directive('code', (el, { expression, modifiers }, { effect, evaluateLater }) => {
-            // Create x-code element
-            const codeElement = document.createElement('x-code');
-
-            // Get language from various possible sources
-            let language = 'auto';
-
-            // Check for language attribute first
-            const languageAttr = el.getAttribute('language');
-            if (languageAttr) {
-                language = languageAttr;
-            } else if (expression && typeof expression === 'string' && !expression.includes('.')) {
-                // Fallback to expression if it's a simple string
-                language = expression;
-            } else if (modifiers.length > 0) {
-                // Fallback to first modifier
-                language = modifiers[0];
-            }
+let codePluginInitialized = false;
+
+function registerAlpine() {
+    if (typeof Alpine === 'undefined' || typeof Alpine.directive !== 'function') return;
+    if (window.__manifestCodeDirectivesRegistered) return;
+    window.__manifestCodeDirectivesRegistered = true;
+
+    // `x-code="language"` on any element. Alpine fires the callback once
+    // when the element enters its tree. We don't process immediately —
+    // observe instead, so a hidden route's blocks don't run hljs until the
+    // user actually navigates there.
+    Alpine.directive('code', (el) => {
+        if (el.dataset.codeProcessed === 'yes') return;
+        ensureObserver().observe(el);
+    });
 
-            codeElement.setAttribute('language', language);
+    // `x-code-group` on a wrapper element; sets up tabs across [name]
+    // children. The wrapper has no expression value.
+    Alpine.directive('code-group', (el) => {
+        if (el.dataset.groupProcessed === 'yes') return;
+        ensureObserver().observe(el);
+    });
+}
 
-            // Enable line numbers if specified
-            if (modifiers.includes('numbers') || modifiers.includes('line-numbers') || el.hasAttribute('numbers')) {
-                codeElement.setAttribute('numbers', '');
-            }
+async function ensureCodePluginInitialized() {
+    if (codePluginInitialized) return;
+    codePluginInitialized = true;
 
-            // Set title from various possible sources
-            const title = el.getAttribute('name') || el.getAttribute('title') || el.getAttribute('data-title');
-            if (title) {
-                codeElement.setAttribute('name', title);
-            }
+    registerAlpine();
+    document.addEventListener('alpine:init', registerAlpine);
 
-            // Move content to x-code element
-            const content = el.textContent.trim();
-            codeElement.textContent = content;
-            el.textContent = '';
-            el.appendChild(codeElement);
-
-            // Handle dynamic content updates only if expression is a variable
-            if (expression && (expression.includes('.') || !['javascript', 'css', 'html', 'python', 'ruby', 'php', 'java', 'c', 'cpp', 'csharp', 'go', 'sql', 'json', 'yaml', 'markdown', 'typescript', 'jsx', 'tsx', 'scss', 'sass', 'less', 'xml', 'markup'].includes(expression))) {
-                const getContent = evaluateLater(expression);
-                effect(() => {
-                    getContent((content) => {
-                        if (content && typeof content === 'string') {
-                            codeElement.textContent = content;
-                            codeElement.update();
-                        }
-                    });
-                });
-            }
-        });
+    // Markdown plugin hand-off
+    document.addEventListener('manifest:code-blocks-converted', onCodeBlocksConverted);
+    if (document.body) {
+        document.body.addEventListener('manifest:code-blocks-converted', onCodeBlocksConverted);
     }
 
-    // Handle both DOMContentLoaded and alpine:init
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initialize);
+        document.addEventListener('DOMContentLoaded', () => observeAll());
     } else {
-        initialize();
+        observeAll();
     }
 
-    // Listen for Alpine initialization (only if Alpine is available)
-    if (typeof Alpine !== 'undefined') {
-        document.addEventListener('alpine:init', initialize);
-    } else {
-        // If Alpine isn't available yet, listen for it to become available
-        document.addEventListener('alpine:init', () => {
-            // Re-register the directive when Alpine becomes available
-            if (typeof Alpine !== 'undefined') {
-                Alpine.directive('code', (el, { expression, modifiers }, { effect, evaluateLater }) => {
-                    // Create x-code element
-                    const codeElement = document.createElement('x-code');
-
-                    // Get language from various possible sources
-                    let language = 'auto';
-
-                    // Check for language attribute first
-                    const languageAttr = el.getAttribute('language');
-                    if (languageAttr) {
-                        language = languageAttr;
-                    } else if (expression && typeof expression === 'string' && !expression.includes('.')) {
-                        // Fallback to expression if it's a simple string
-                        language = expression;
-                    } else if (modifiers.length > 0) {
-                        // Fallback to first modifier
-                        language = modifiers[0];
-                    }
-
-                    codeElement.setAttribute('language', language);
-
-                    // Enable line numbers if specified
-                    if (modifiers.includes('numbers') || modifiers.includes('line-numbers') || el.hasAttribute('numbers')) {
-                        codeElement.setAttribute('numbers', '');
-                    }
-
-                    // Set title from various possible sources
-                    const title = el.getAttribute('name') || el.getAttribute('title') || el.getAttribute('data-title');
-                    if (title) {
-                        codeElement.setAttribute('name', title);
-                    }
-
-                    // Move content to x-code element
-                    const content = el.textContent.trim();
-                    codeElement.textContent = content;
-                    el.textContent = '';
-                    el.appendChild(codeElement);
-
-                    // Handle dynamic content updates only if expression is a variable
-                    if (expression && (expression.includes('.') || !['javascript', 'css', 'html', 'python', 'ruby', 'php', 'java', 'c', 'cpp', 'csharp', 'go', 'sql', 'json', 'yaml', 'markdown', 'typescript', 'jsx', 'tsx', 'scss', 'sass', 'less', 'xml', 'markup'].includes(expression))) {
-                        const getContent = evaluateLater(expression);
-                        effect(() => {
-                            getContent((content) => {
-                                if (content && typeof content === 'string') {
-                                    codeElement.textContent = content;
-                                    codeElement.update();
-                                }
-                            });
-                        });
-                    }
-                });
-            }
-        });
-    }
-}
-
-// Track initialization to prevent duplicates
-let codePluginInitialized = false;
-
-async function ensureCodePluginInitialized() {
-    if (codePluginInitialized) return;
-    codePluginInitialized = true;
-    await initializeCodePlugin();
+    // Re-observe after SPA route changes so newly-visible routes' blocks
+    // are picked up (Alpine directives already fired on initial mount).
+    window.addEventListener('manifest:route-change', () => observeAll());
 }
 
-// Expose on window for loader to call if needed
 window.ensureCodePluginInitialized = ensureCodePluginInitialized;
 
-// Initialize the plugin
-ensureCodePluginInitialized(); 
+// Expose select internals so the markdown plugin and other consumers can hook
+// in without re-implementing the loaders or processors.
+window.ManifestCode = {
+    loadHighlightJS,
+    loadCodeJar,
+    processCodeElement,
+    setupCodeGroup,
+    observeAll
+};
+
+ensureCodePluginInitialized();