mnfst 0.5.217 → 0.5.219

package/lib/manifest.router.js

@@ -333,26 +333,7 @@ async function handleRouteChange() {
     if (!window.location.hash) {
         setTimeout(() => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
-
-            // Also reset any scrollable containers.
-            const potentialContainers = document.querySelectorAll('div, main, section, article, aside, nav, header, footer, .prose');
-            potentialContainers.forEach(element => {
-                const computedStyle = window.getComputedStyle(element);
-                const isScrollable = (
-                    computedStyle.overflowY === 'auto' ||
-                    computedStyle.overflowY === 'scroll' ||
-                    computedStyle.overflow === 'auto' ||
-                    computedStyle.overflow === 'scroll'
-                ) && element.scrollHeight > element.clientHeight;
-
-                if (isScrollable) {
-                    element.scrollTop = 0;
-                }
-            });
-        }, 50);
-    } else {
-        setTimeout(() => {
-            // Let the browser scroll to the anchor once content has loaded.
+            resetScrolledContainers();
         }, 50);
     }
 
@@ -377,6 +358,51 @@ async function handleRouteChange() {
     }
 }
 
+// Scroll containers reset on route change. Only elements that fired a scroll
+// event can be off top, so track those instead of sweeping the document.
+const SCROLL_CONTAINER_SELECTOR = 'div, main, section, article, aside, nav, header, footer, .prose';
+const scrolledContainers = new Set();
+// Loaded after parse began → elements may have scrolled unseen; first reset sweeps once
+let scrollSweepPending = document.readyState !== 'loading';
+
+document.addEventListener('scroll', (event) => {
+    const el = event.target;
+    if (!el || el.nodeType !== 1 || scrolledContainers.has(el)) return;
+    // Prune detached entries so long single-route sessions don't retain them
+    if (scrolledContainers.size >= 64) {
+        for (const tracked of scrolledContainers) if (!tracked.isConnected) scrolledContainers.delete(tracked);
+    }
+    scrolledContainers.add(el);
+}, { capture: true, passive: true });
+
+// True when done with the element: reset, or rendered and nothing to reset.
+// A container under a hidden route reads scrollTop 0 but keeps its offset: stay tracked.
+// data-scroll-keep (on the container or an ancestor) opts out of every reset.
+function resetContainer(element) {
+    if (element.closest('[data-scroll-keep]')) return false;
+    if (!element.getClientRects().length) return false;
+    if (!element.scrollTop) return true;
+    const computedStyle = window.getComputedStyle(element);
+    const isScrollable = (
+        computedStyle.overflowY === 'auto' ||
+        computedStyle.overflowY === 'scroll' ||
+        computedStyle.overflow === 'auto' ||
+        computedStyle.overflow === 'scroll'
+    ) && element.scrollHeight > element.clientHeight;
+    if (isScrollable) element.scrollTop = 0;
+    return true;
+}
+
+function resetScrolledContainers() {
+    if (scrollSweepPending) {
+        scrollSweepPending = false;
+        document.querySelectorAll(SCROLL_CONTAINER_SELECTOR).forEach(resetContainer);
+    }
+    for (const element of scrolledContainers) {
+        if (!element.isConnected || !element.matches(SCROLL_CONTAINER_SELECTOR) || resetContainer(element)) scrolledContainers.delete(element);
+    }
+}
+
 // Whether SPA route changes run inside a View Transition. Priority:
 // data-no-view-transitions → off, data-view-transitions → on, else auto
 // (on under VT_AUTO_THRESHOLD elements). Auto threshold: VT rasterizes the
@@ -393,7 +419,7 @@ function shouldUseViewTransition() {
     if (html.hasAttribute('data-no-view-transitions')) return false;
     if (html.hasAttribute('data-view-transitions')) return true;
     try {
-        return document.querySelectorAll('*').length < VT_AUTO_THRESHOLD;
+        return !document.getElementsByTagName('*')[VT_AUTO_THRESHOLD - 1];
     } catch {
         return false;
     }
@@ -739,13 +765,14 @@ function isRouteActive(element, normalizedPath) {
 // Activation hook fires before the route becomes visible so deferred content renders first
 function showRoute(element) {
     element.dispatchEvent(new CustomEvent('manifest:route-activate'));
-    element.removeAttribute('hidden');
-    element.style.display = '';
+    if (element.hasAttribute('hidden')) element.removeAttribute('hidden');
+    if (element.style.display) element.style.display = '';
 }
 
+// Skip no-op writes: each one is a mutation record for every observer
 function hideRoute(element) {
-    element.setAttribute('hidden', '');
-    element.style.display = 'none';
+    if (!element.hasAttribute('hidden')) element.setAttribute('hidden', '');
+    if (element.style.display !== 'none') element.style.display = 'none';
 }
 
 // Process visibility for all elements with x-route
@@ -830,11 +857,9 @@ window.ManifestRoutingVisibility = {
 
 // Router head
 
-function isPrerenderedStaticMPA() {
+// Prerendered MPA output has route head content baked in
+function headIsPrerenderedMPA() {
     try {
-        if (window.ManifestRoutingVisibility && typeof window.ManifestRoutingVisibility.isPrerenderedStaticMPA === 'function') {
-            return window.ManifestRoutingVisibility.isPrerenderedStaticMPA();
-        }
         return document.querySelector('meta[name="manifest:prerendered"][content="1"]') !== null;
     } catch (e) {
         return false;
@@ -996,27 +1021,11 @@ function processElementHeadContent(element, normalizedPath) {
 
 // Process all head content in the DOM
 function processAllHeadContent(normalizedPath) {
-    if (isPrerenderedStaticMPA()) return;
+    if (headIsPrerenderedMPA()) return;
 
     // Find all elements with head templates
     const elementsWithHead = document.querySelectorAll('template[data-head]');
 
-    // Debug: Let's see what's actually in the DOM
-    const allTemplates = document.querySelectorAll('template');
-    allTemplates.forEach((template, index) => {
-        if (template.hasAttribute('data-head')) {
-        } else {
-            // Check if this might be the about template
-            if (template.getAttribute('x-route') === 'about') {
-            }
-        }
-    });
-
-    // Also try a more specific selector to see if we can find the about template
-    const aboutTemplate = document.querySelector('template[x-route="about"]');
-    if (aboutTemplate) {
-    }
-
     // Process each element's head content
     elementsWithHead.forEach((template, index) => {
 
@@ -1075,27 +1084,17 @@ function initializeHeadContent() {
     function processHeadContentAfterComponentsReady() {
         // Process initial head content after a longer delay to let components settle
         setTimeout(() => {
-            if (isPrerenderedStaticMPA()) return;
+            if (headIsPrerenderedMPA()) return;
             const currentPath = window.ManifestRoutingNavigation?.getCurrentRoute() ?? window.location.pathname;
             const normalizedPath = currentPath === '/' ? '/' : currentPath.replace(/^\/|\/$/g, '');
 
-            // Debug: Check if about component exists
-            const aboutComponent = document.querySelector('[data-component="about-1"]');
-            if (aboutComponent) {
-            }
-
-            // Debug: Check what placeholders exist
-            const placeholders = document.querySelectorAll('x-about, x-home, x-ui');
-            placeholders.forEach((placeholder, index) => {
-            });
-
             processAllHeadContent(normalizedPath);
         }, 200);
     }
 
     // Function to process head content immediately (for projects without components)
     function processHeadContentImmediately() {
-        if (isPrerenderedStaticMPA()) return;
+        if (headIsPrerenderedMPA()) return;
         const currentPath = window.ManifestRoutingNavigation?.getCurrentRoute() ?? window.location.pathname;
         const normalizedPath = currentPath === '/' ? '/' : currentPath.replace(/^\/|\/$/g, '');
         processAllHeadContent(normalizedPath);
@@ -1129,21 +1128,11 @@ function initializeHeadContent() {
 
         // Wait a bit for components to settle after route change
         setTimeout(() => {
-            if (isPrerenderedStaticMPA()) return;
+            if (headIsPrerenderedMPA()) return;
             // Process head content immediately to catch components before they're reverted
             const currentPath = window.ManifestRoutingNavigation?.getCurrentRoute() ?? window.location.pathname;
             const normalizedPath = currentPath === '/' ? '/' : currentPath.replace(/^\/|\/$/g, '');
 
-            // Debug: Check if about component exists
-            const aboutComponent = document.querySelector('[data-component="about-1"]');
-            if (aboutComponent) {
-            }
-
-            // Debug: Check what placeholders exist
-            const placeholders = document.querySelectorAll('x-about, x-home, x-ui');
-            placeholders.forEach((placeholder, index) => {
-            });
-
             processAllHeadContent(normalizedPath);
         }, 100);
     });

package/lib/manifest.sw.js

@@ -16,7 +16,7 @@
 
 // Build stamps the published version here; unstamped (dev) falls back to the
 // registration URL's `v`, then 'dev'.
-const BUILD_VERSION = '0.5.217';
+const BUILD_VERSION = '0.5.219';
 const CACHE_PREFIX = 'mnfst-sw:';
 const META_CACHE = CACHE_PREFIX + 'meta';
 // Sized to hold a full precache.json warm-up (PRECACHE_MAX_ENTRIES server-side)

package/lib/manifest.text.edit.css

@@ -39,6 +39,26 @@
         }
     }
 
+    /* ---- Selection menu (x-text-edit-menu) ----
+       Positioned by the --text-edit-selection-* variables the plugin writes to
+       :root, so the default needs no script; restyle or reposition freely. */
+    :where([data-text-edit-menu]) {
+        position: fixed;
+        margin: 0;
+        inset: auto;
+        left: var(--text-edit-selection-center);
+        top: var(--text-edit-selection-y);
+        transform: translate(-50%, calc(-100% - 0.5rem));
+        display: flex;
+        gap: 0.25rem;
+        align-items: center;
+        padding: 0.25rem;
+        background: var(--color-surface-1);
+        border: 1px solid var(--color-line);
+        border-radius: var(--radius);
+        box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
+    }
+
     /* ---- Controls ----
        A control is marked wherever it lives, so a toolbar is optional markup and
        never a requirement. The reset already dims [aria-disabled=true]. */

package/lib/manifest.text.edit.js

@@ -1011,12 +1011,24 @@
 
     /* ---- Links ----
        An <input x-text-edit.a> is the whole define / edit / clear surface: it shows
-       the current href, sets it on change, and clears the link when emptied. */
+       the current href, sets it on change, and clears the link when emptied. The
+       `unlink` command is the explicit button form of clearing it. */
+    // What counts as a link: an explicit scheme (https, mailto, tel, …), a relative
+    // path, an anchor — or a bare domain, which gets https:// so "example.com"
+    // does what the writer meant. Anything else (spaces, no dot, no scheme) is
+    // not applied; the field re-syncs to the real href, showing it didn't take.
+    function normalizeUrl(url) {
+        if (/\s/.test(url) || /^\s*javascript:/i.test(url)) return null;
+        if (/^[a-z][a-z0-9+.-]*:/i.test(url) || /^[/#?.]/.test(url)) return url;
+        if (/^[\w-]+(\.[\w-]+)+(\/|$|\?|#)/.test(url)) return 'https://' + url;
+        return null;
+    }
     function setLink(href) {
         const existing = ancestor('a');
-        const url = href == null ? '' : String(href).trim();
-        if (!url) { if (existing) existing.replaceWith(...existing.childNodes); return; }
-        if (/^\s*javascript:/i.test(url)) return;
+        const raw = href == null ? '' : String(href).trim();
+        if (!raw) { if (existing) existing.replaceWith(...existing.childNodes); return; }
+        const url = normalizeUrl(raw);
+        if (!url) return;
         if (existing) { existing.setAttribute('href', url); return; }
         const made = wrapInline('a');
         if (made.length) made.forEach(a => a.setAttribute('href', url));
@@ -1029,6 +1041,11 @@
     const insertImage = (src, alt) => { if (src && !/^\s*javascript:/i.test(src)) insertHTML(`<img src="${src}" alt="${alt || ''}">`); };
 
     function insertTable(spec) {
+        // A table dropped at a caret that is already in a table would nest a grid
+        // inside a cell. Land it after the outermost table instead.
+        let host = ancestor('table');
+        while (host && host.parentElement && withinArea(host, host.parentElement.closest('table'))) host = host.parentElement.closest('table');
+        if (host) { const p = document.createElement('p'); p.appendChild(document.createElement('br')); host.after(p); caretIn(p, 0); }
         const [rows, cols] = String(spec || '3x3').split(/[x×,]/).map(n => Math.max(1, Math.min(20, parseInt(n, 10) || 3)));
         const row = `<tr>${'<td><br></td>'.repeat(cols)}</tr>`;
         insertHTML(`<table><tbody>${row.repeat(rows)}</tbody></table><p><br></p>`);
@@ -1111,6 +1128,7 @@
     };
     Object.assign(COMMANDS, {
         a: { md: 1, run: setLink, active: () => !!ancestor('a'), reflect: linkHref, enabled: () => !!ancestor('a') || hasSelection() },
+        unlink: { md: 1, run: () => { const a = ancestor('a'); if (a) a.replaceWith(...a.childNodes); }, active: () => false, enabled: () => !!ancestor('a') },
         ul: { md: 1, block: 1, run: () => toggleList('ul'), active: () => !!ancestor('ul') && !ancestor('ul').hasAttribute('data-checklist') },
         ol: { md: 1, block: 1, run: () => toggleList('ol'), active: () => !!ancestor('ol') },
         checklist: { md: 1, block: 1, run: toggleChecklist, active: () => !!ancestor('ul[data-checklist]') },
@@ -1299,6 +1317,45 @@
         return best;
     }
 
+    // A finished inline mark converts the moment its closing marker is typed —
+    // **bold**, *italic*, `code`, ~~struck~~, [text](url) — like any modern
+    // editor, rather than waiting for Enter. Only a pattern ending exactly at
+    // the caret is taken, so half-typed markers never convert under the caret.
+    function endInline(text) {
+        let best = null;
+        for (const rule of INLINE_RULES) {
+            const re = new RegExp(rule.re.source, 'g');
+            let m;
+            while ((m = re.exec(text))) {
+                if (m.index + m[0].length !== text.length) continue;
+                const skip = rule.pre ? m[rule.pre].length : 0;
+                best = { rule, m, start: m.index + skip, len: m[0].length - skip };
+                break;
+            }
+        }
+        return best;
+    }
+
+    function convertInlineAtCaret(area) {
+        const r = range(); if (!r || !r.collapsed) return false;
+        const node = r.startContainer;
+        if (!node || node.nodeType !== 3 || !node.parentElement) return false;
+        const host = node.parentElement.closest('code, pre, a');
+        if (host && area.contains(host)) return false;             // literal contexts keep their text
+        const hit = endInline(node.nodeValue.slice(0, r.startOffset));
+        if (!hit) return false;
+        const el = inlineEl(hit.rule, hit.m); if (!el) return false;
+        record(area);
+        const tail = node.splitText(hit.start);
+        tail.deleteData(0, hit.len);
+        tail.parentNode.insertBefore(el, tail);
+        const s = sel(), nr = document.createRange();
+        nr.setStart(tail, 0); nr.collapse(true);
+        s.removeAllRanges(); s.addRange(nr);
+        record(area);
+        return true;
+    }
+
     function convertInline(root) {
         const nodes = [];
         const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
@@ -1320,7 +1377,13 @@
     // Returns the element now holding the line's content — an <li> for a list, so the
     // caller knows to continue the list rather than start a paragraph.
     function convertLine(b) {
-        if (!b || b.closest('pre')) return b;
+        if (!b) return b;
+        // Bounded like every other ancestor lookup: only a <pre> INSIDE the
+        // editor means "we're in a code block". An editor hosted within someone
+        // else's <pre> (a docs code-group wrapper) still converts markdown.
+        const area = b.closest('[data-text-edit]');
+        const pre = b.closest('pre');
+        if (pre && (!area || area.contains(pre))) return b;
         const text = b.textContent;
         for (const rule of LINE_RULES) {
             const m = text.match(rule.re); if (!m) continue;
@@ -1446,8 +1509,13 @@
     function onEnter(area, autoformat) {
         let holder = ancestor('li') || blockEl() || ensureBlock(area);
 
+        // Bounded to the area, like ancestor(): an editor that happens to LIVE
+        // inside someone else's <pre> (a docs frame inside a code-group wrapper)
+        // must not treat that wrapper as its own code block — the exit path below
+        // rewrites and can remove the pre, destroying the host markup around the
+        // editor.
         const pre = holder.closest('pre');
-        if (pre) {
+        if (pre && pre !== area && area.contains(pre)) {
             // An empty last line leaves the code block — the one case the browser
             // cannot do, and without it the block has no keyboard exit.
             while (pre.lastChild && (pre.lastChild.nodeName === 'BR' || !pre.lastChild.textContent.trim())) pre.lastChild.remove();
@@ -1512,7 +1580,10 @@
     const recordSoon = (area) => {
         const h = area._history; if (!h || h.restoring) return;
         clearTimeout(h.timer);
-        h.timer = setTimeout(() => record(area), IDLE);
+        // Re-sync once the burst lands: undo/redo controls gate on history state,
+        // and the reset's [aria-disabled] rule blocks pointer events — without
+        // this, Undo stays visually dead until some unrelated event syncs.
+        h.timer = setTimeout(() => { record(area); sync(); }, IDLE);
     };
 
     function step(area, by) {
@@ -1663,19 +1734,6 @@
         sync();
     }
 
-    // A link at the caret comes off; a selection gets one, through the area's own url
-    // control where there is one.
-    function toggleLink(area) {
-        if (ancestor('a')) { run(area, 'a'); return; }
-        if (!hasSelection()) return;
-        saveRange(area);
-        const field = [...controls].find(c => c._te && c._te.id === 'a' && !c._te.page
-            && 'value' in c && c.tagName !== 'BUTTON' && resolve(c) === area);
-        if (field) { field.focus(); if (field.select) field.select(); return; }
-        const url = typeof window.prompt === 'function' ? window.prompt('Link URL', '') : null;
-        if (url) run(area, 'a', url);
-    }
-
     // Reflect caret state onto every control pointing at the area that owns it.
     function sync() {
         controls.forEach(c => {
@@ -1711,10 +1769,20 @@
                 : area(el, modifiers, expression, { effect, evaluateLater, cleanup });
         });
 
-        // $text — the area this element sits in, or the last focused one.
+        // x-text-edit-menu — the turnkey selection bubble: put commands inside,
+        // and the plugin shows the element over the selection of the area it
+        // resolves to (same rules as any control) and hides it when the
+        // selection is gone. Positioning is the stylesheet's, off the
+        // --text-edit-selection-* variables, so it can be restyled freely.
+        Alpine.directive('text-edit-menu', (el, _, { cleanup }) => selectionMenu(el, cleanup));
+
+        // $text — the area this element sits in, resolved like a control's:
+        // containment first (nearest ancestor holding exactly one area), the
+        // last focused area second. Never "the first area on the page" — a
+        // button at the bottom must not act on, and scroll to, the top one.
         Alpine.magic('text', (el) => {
             const own = el.closest('[data-text-edit]');
-            const a = own && areas.has(own) ? own : preferred([...areas]);
+            const a = own && areas.has(own) ? own : resolve(el);
             return a ? a._te.api : {
                 value: '', link: '', selection: null, page: {}, run() { }, active: () => false,
                 can: () => false, focus() { }, selectAll() { }, markdown: () => '', html: () => ''
@@ -1802,6 +1870,25 @@
         area.dispatchEvent(new CustomEvent('text-edit:selection', { bubbles: true, detail: shape }));
     }
 
+    // The selection bubble: a popover shown while its area has a selection. The
+    // element is promoted to popover="manual" (an auto popover closes on the very
+    // click that makes the selection); show/hide follow text-edit:selection.
+    function selectionMenu(el, cleanup) {
+        if (!el.hasAttribute('popover')) el.setAttribute('popover', 'manual');
+        el.setAttribute('data-text-edit-menu', '');
+        const onSel = (e) => {
+            const area = elementAt(e.target) && elementAt(e.target).closest('[data-text-edit]');
+            if (!area || resolve(el) !== area) return;
+            const want = !!e.detail && !e.detail.collapsed;
+            try {
+                if (want && !el.matches(':popover-open')) el.showPopover();
+                if (!want && el.matches(':popover-open')) el.hidePopover();
+            } catch { }
+        };
+        document.addEventListener('text-edit:selection', onSel);
+        cleanup(() => { document.removeEventListener('text-edit:selection', onSel); try { el.hidePopover(); } catch { } });
+    }
+
     function control(el, id, modifiers, expression, evaluate, cleanup) {
         // `.h2` and `.align.center` carry a static argument as the next modifier; an
         // expression is the dynamic form (`x-text-edit.a="url"`).
@@ -1818,7 +1905,36 @@
         const valued = 'value' in el && el.tagName !== 'BUTTON';
         if (valued) {
             const fire = () => { const a = resolve(el); if (a) run(a, id, el.value, el._te); };
-            el.addEventListener('change', fire);
+            if (el.type === 'color') {
+                // Colour previews live: the first input tick wraps the selection
+                // (recorded once, so undo removes the whole pass in one step) and
+                // every later tick restyles those same spans. Works with the
+                // browser picker, Manifest's, or anything that fires `input`.
+                const prop = id === 'background' ? 'backgroundColor' : 'color';
+                let live = null;
+                el.addEventListener('input', () => {
+                    const a = resolve(el); if (!a) return;
+                    if (el._te.page) { run(a, id, el.value, el._te); return; }   // page vars are cheap to set per tick
+                    if (live && live.length && live.every(s => s.isConnected)) {
+                        live.forEach(s => { s.style[prop] = el.value; });
+                        a.dispatchEvent(new Event('input', { bubbles: true }));
+                        return;
+                    }
+                    if (!allows(a, id, el._te)) return;
+                    restoreRange(a);
+                    const r = range(); if (!r || !a.contains(r.startContainer)) return;
+                    record(a);
+                    live = wrapInline('span', { [prop]: el.value });
+                    saveRange(a);
+                    a.dispatchEvent(new Event('input', { bubbles: true }));
+                });
+                el.addEventListener('change', () => {
+                    if (live) { const a = resolve(el); live = null; if (a) { record(a); sync(); } return; }   // applied live already
+                    fire();
+                });
+            } else {
+                el.addEventListener('change', fire);
+            }
             el.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); fire(); } });
         } else {
             el.addEventListener('pointerdown', e => e.preventDefault());   // never take the caret
@@ -1927,6 +2043,14 @@
             sync();
         });
 
+        // A link inside the editor is content, not navigation: clicking it places
+        // the caret to edit it. Without this, the router (or the browser) follows
+        // the href and the page changes out from under the writer.
+        el.addEventListener('click', (e) => {
+            const a = e.target && e.target.closest && e.target.closest('a');
+            if (a && el.contains(a)) e.preventDefault();
+        });
+
         el.addEventListener('focusin', () => { lastFocused = el; sync(); });
         // Focus gone somewhere that is neither this area nor one of its controls.
         el.addEventListener('focusout', (e) => {
@@ -1936,6 +2060,7 @@
         });
         el.addEventListener('input', (e) => {
             if (!writing && e.data && applyPending(el, e.data)) { commitValue(); }
+            if (!writing && e.data && autoformat && convertInlineAtCaret(el)) { commitValue(); }
             settle(); sync();
         });
         el.addEventListener('change', e => {
@@ -2003,11 +2128,12 @@
             if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'z') {
                 e.preventDefault(); run(el, e.shiftKey ? 'redo' : 'undo'); return;
             }
+            // No Cmd/Ctrl+K: that chord belongs to site search almost everywhere
+            // now (including our own docs) — links go through an `a` control.
             if (!(e.metaKey || e.ctrlKey)) return;
-            const id = { b: 'strong', i: 'em', u: 'u', k: 'a' }[e.key.toLowerCase()];
+            const id = { b: 'strong', i: 'em', u: 'u' }[e.key.toLowerCase()];
             if (!id || !allows(el, id)) return;
             e.preventDefault();
-            if (id === 'a') { toggleLink(el); return; }
             run(el, id);
         });