mnfst 0.5.71 → 0.5.74

package/lib/manifest.components.js

@@ -776,6 +776,158 @@ window.ManifestComponentsMutation = {
     }
 }; 
 
+// Components — route-level prefetch.
+//
+// Two enhancements that run on top of the existing on-encounter loader:
+//
+//   1. Parallel batch on route change. When manifest:route-change fires,
+//      scan the [x-route] subtrees that match the new route and call
+//      loadComponent() on every <x-*> tag inside them. The loader
+//      deduplicates fetches, so calling it for components that the
+//      regular swapping logic is already mounting is harmless — but
+//      pre-issuing in parallel saves 50–200 ms vs. one-by-one fetches.
+//
+//   2. Prefetch on hover. When the pointer enters an internal <a href>,
+//      derive the target pathname, find the [x-route] subtree(s) that
+//      would match it, and prefetch their components. By the time the
+//      user clicks the link, the components are warm in the loader's
+//      cache and navigation feels instant.
+//
+// Both phases require zero author configuration. Manifest auto-discovers
+// what to prefetch from the existing [x-route] DOM structure.
+
+(function () {
+    'use strict';
+
+    // <x-*> tag pattern — lowercase, hyphenated.
+    const TAG_RE = /^x-[a-z][a-z0-9-]*$/;
+
+    // Framework-provided web components (registered by Manifest plugins
+    // themselves, not as project components in manifest.json). Skip these
+    // when scanning for project components to prefetch.
+    const FRAMEWORK_TAGS = new Set(['code', 'code-group']);
+
+    // Anchors we've already issued a hover-prefetch for. WeakSet so DOM
+    // garbage-collects naturally as elements leave the tree.
+    const prefetchedAnchors = new WeakSet();
+
+    function loader() { return window.ManifestComponentsLoader; }
+
+    // Match a single route pattern against a normalized pathname (no
+    // leading/trailing slashes, '/' represented as '/'). Mirrors the
+    // router visibility logic so prefetch targets the same subtrees.
+    function routeMatches(routeValue, pathname) {
+        const pieces = String(routeValue || '').split(',').map((s) => s.trim()).filter(Boolean);
+        let matched = false;
+        let negated = false;
+        for (const piece of pieces) {
+            if (piece === '!*') continue; // catch-all only handled by visibility plugin
+            if (piece.startsWith('!')) {
+                if (piece.slice(1) === pathname) negated = true;
+                continue;
+            }
+            if (piece.startsWith('=')) {
+                if (piece.slice(1) === pathname) matched = true;
+                continue;
+            }
+            if (piece.endsWith('/*')) {
+                const prefix = piece.slice(0, -2);
+                if (pathname === prefix || pathname.startsWith(prefix + '/')) matched = true;
+                continue;
+            }
+            if (piece === pathname) { matched = true; continue; }
+            if (pathname.startsWith(piece + '/')) matched = true;
+        }
+        return matched && !negated;
+    }
+
+    function findRouteSubtrees(pathname) {
+        const normalized = (pathname || '/') === '/' ? '/' : pathname.replace(/^\/|\/$/g, '');
+        const out = [];
+        document.querySelectorAll('[x-route]').forEach((el) => {
+            const value = el.getAttribute('x-route') || '';
+            if (routeMatches(value, normalized)) out.push(el);
+        });
+        return out;
+    }
+
+    function discoverComponentNames(root) {
+        const names = new Set();
+        if (!root || !root.querySelectorAll) return names;
+        // querySelectorAll('*') is the fastest path for "every descendant".
+        // We filter by tag name in JS — there's no CSS selector for "tag
+        // name starts with x-". A page typically has a few thousand nodes,
+        // which scans in well under a millisecond.
+        root.querySelectorAll('*').forEach((el) => {
+            const tag = el.tagName.toLowerCase();
+            if (!tag.startsWith('x-') || !TAG_RE.test(tag)) return;
+            const name = tag.slice(2);
+            if (!FRAMEWORK_TAGS.has(name)) names.add(name);
+        });
+        return names;
+    }
+
+    function prefetchForRoute(pathname) {
+        const L = loader();
+        if (!L || typeof L.loadComponent !== 'function') return;
+        const subtrees = findRouteSubtrees(pathname);
+        if (!subtrees.length) return;
+        const names = new Set();
+        for (const subtree of subtrees) {
+            discoverComponentNames(subtree).forEach((n) => names.add(n));
+        }
+        names.forEach((name) => {
+            try { L.loadComponent(name); } catch { /* swallow — dedup is internal */ }
+        });
+    }
+
+    function hrefToPathname(href) {
+        if (!href) return null;
+        if (/^(#|mailto:|tel:|javascript:)/i.test(href)) return null;
+        try {
+            const url = new URL(href, window.location.href);
+            if (url.origin !== window.location.origin) return null;
+            return url.pathname || '/';
+        } catch {
+            return null;
+        }
+    }
+
+    function initialize() {
+        // 1) Parallel batch on route change.
+        window.addEventListener('manifest:route-change', (event) => {
+            const detail = (event && event.detail) || {};
+            const path = detail.normalizedPath || detail.to || '/';
+            const pathname = String(path).startsWith('/') ? String(path) : '/' + String(path);
+            prefetchForRoute(pathname);
+        });
+
+        // 2) Hover prefetch. Use pointerover (bubbles) and check the closest
+        // anchor on each event so we get a single trigger per anchor entry
+        // without needing pointerenter (which doesn't bubble). Dedup via
+        // a WeakSet so repeat moves within the anchor don't re-scan.
+        document.addEventListener('pointerover', (e) => {
+            if (!e.target || !e.target.closest) return;
+            const a = e.target.closest('a[href]');
+            if (!a || prefetchedAnchors.has(a)) return;
+            // Author opt-out: `data-no-prefetch` skips this anchor.
+            if (a.hasAttribute('data-no-prefetch')) return;
+            const href = a.getAttribute('href');
+            const pathname = hrefToPathname(href);
+            if (!pathname) return;
+            prefetchedAnchors.add(a);
+            prefetchForRoute(pathname);
+        });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initialize);
+    } else {
+        initialize();
+    }
+})();
+
+
 // Main initialization for Manifest Components
 function initializeComponents() {
     if (window.ManifestComponentsRegistry) window.ManifestComponentsRegistry.initialize();

package/lib/manifest.export.js

@@ -0,0 +1,453 @@
+/* Manifest Export — runtime download of pages, regions, or data sources.
+ *
+ * The `x-export` directive turns its host element into a download action.
+ * What gets downloaded depends on the host element type:
+ *
+ *   <button x-export>                       → click downloads the whole page
+ *   <button x-export="{ target: '#x' }">    → click downloads the element with id="x"
+ *   <a x-export href="#section">            → click downloads #section (no scroll-to)
+ *   <a x-export href="/other-page">         → appends ?export=<format> to the href
+ *                                             so the destination page auto-exports
+ *                                             itself after navigation
+ *
+ * For the destination of a cross-page export, declare what's exportable:
+ *
+ *   <div x-export="{ trigger: 'url', target: '#report' }"></div>
+ *
+ * On page load, this checks `?export=<format>` in the URL. If present and a
+ * known format, it fires the export against the configured target. If the
+ * URL has no param, the page renders normally — random visitors never
+ * trigger downloads.
+ *
+ * For programmatic use, the `$export` magic runs an export from any
+ * Alpine expression and returns a promise:
+ *
+ *   <form @submit.prevent="if (valid) await $export({ format: 'csv', source: 'rows' })">
+ *
+ * Supported formats: pdf (default), png, jpeg, webp, csv, json.
+ *
+ * Library dependencies (html-to-image, jsPDF) are loaded lazily on first
+ * use from jsDelivr; pages that never export pay nothing.
+ *
+ * Elements with `data-no-export` are excluded from visual snapshots.
+ */
+
+function initializeExportPlugin() {
+
+    Alpine.directive('export', (el, { modifiers, expression }, { evaluate, cleanup }) => {
+
+        const opts = resolveOptions(expression, modifiers, evaluate);
+        const format = (opts.format || 'pdf').toLowerCase();
+        const isAnchor = el.tagName === 'A';
+        const href = isAnchor ? el.getAttribute('href') : null;
+
+        // ----- URL-trigger destination behavior -----
+        // The page declares "I'm exportable; fire if the URL says so." Runs
+        // once per page load, regardless of how many elements declare it.
+        if (opts.trigger === 'url') {
+            if (urlTriggerFired) return;
+            const paramName = opts.urlParam || 'export';
+            const paramValue = new URLSearchParams(window.location.search).get(paramName);
+            if (paramValue) {
+                urlTriggerFired = true;
+                const fmt = isKnownFormat(paramValue) ? paramValue : format;
+                setTimeout(() => {
+                    runExport(fmt, opts, opts.filename || defaultFilename(fmt))
+                        .catch((err) => emitError(fmt, err));
+                }, Number(opts.delay) > 0 ? Number(opts.delay) : 0);
+            }
+            return;
+        }
+
+        // ----- Anchor with cross-page href -----
+        // Pre-arm the href with ?export=<format> so default browser navigation
+        // delivers the user to the destination URL with the export signal.
+        // Hover-prefetch, middle-click, right-click-copy all see the same URL.
+        if (isAnchor && href && !href.startsWith('#') && !href.startsWith('javascript:')
+            && !/^(mailto|tel):/i.test(href)) {
+            try {
+                const url = new URL(href, window.location.href);
+                const paramName = opts.urlParam || 'export';
+                url.searchParams.set(paramName, format);
+                // Preserve the original href shape: relative stays relative.
+                if (url.origin === window.location.origin && !href.startsWith('http')) {
+                    el.setAttribute('href', url.pathname + url.search + url.hash);
+                } else {
+                    el.setAttribute('href', url.toString());
+                }
+            } catch (err) {
+                console.warn('[x-export] could not parse href for cross-page export:', err.message);
+            }
+            return;
+        }
+
+        // ----- Anchor with same-page fragment href -----
+        // The href IS the target. Click downloads the matched element
+        // instead of jumping the page.
+        if (isAnchor && href && href.startsWith('#')) {
+            const onClick = async (e) => {
+                if (e && typeof e.preventDefault === 'function') e.preventDefault();
+                const filename = opts.filename || defaultFilename(format);
+                try {
+                    await runExport(format, { ...opts, target: href }, filename);
+                } catch (err) {
+                    emitError(format, err);
+                }
+            };
+            el.addEventListener('click', onClick);
+            cleanup(() => el.removeEventListener('click', onClick));
+            return;
+        }
+
+        // ----- Default: click anywhere else triggers export -----
+        const onClick = async (e) => {
+            if (e && typeof e.preventDefault === 'function') e.preventDefault();
+            const filename = opts.filename || defaultFilename(format);
+            try {
+                await runExport(format, opts, filename);
+            } catch (err) {
+                emitError(format, err);
+            }
+        };
+        el.addEventListener('click', onClick);
+        cleanup(() => el.removeEventListener('click', onClick));
+    });
+
+    // ----- $export magic — programmatic trigger from any expression -----
+    Alpine.magic('export', () => async (opts = {}) => {
+        const format = String(opts.format || 'pdf').toLowerCase();
+        const filename = opts.filename || defaultFilename(format);
+        return runExport(format, opts, filename);
+    });
+
+    // ------- Options + format helpers -----------------------------------
+
+    function resolveOptions(expression, modifiers, evaluate) {
+        let opts = {};
+        if (expression && expression.trim()) {
+            try {
+                const v = evaluate(expression);
+                if (v && typeof v === 'object') opts = { ...v };
+                else if (typeof v === 'string') opts.format = v;
+            } catch (err) {
+                console.warn('[x-export] could not evaluate options expression:', err.message);
+            }
+        }
+        if (!opts.format && Array.isArray(modifiers) && modifiers.length) {
+            const found = modifiers.find((m) => isKnownFormat(String(m).toLowerCase()));
+            if (found) opts.format = String(found).toLowerCase();
+        }
+        return opts;
+    }
+
+    function isKnownFormat(f) {
+        return f === 'pdf' || f === 'png' || f === 'jpeg' || f === 'jpg' || f === 'webp' || f === 'csv' || f === 'json';
+    }
+
+    function defaultFilename(format) {
+        const ext = format === 'jpeg' || format === 'jpg' ? 'jpg' : format;
+        const ts = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-');
+        return `export-${ts}.${ext}`;
+    }
+
+    // Transparent 1×1 PNG, used as a fallback when an inline image fails to fetch.
+    // html-to-image would otherwise reject the whole snapshot on a single CORS or 404.
+    const TRANSPARENT_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=';
+
+    // html-to-image rejects with the raw `image.onerror` Event when the assembled
+    // SVG fails to decode (oversized clones, malformed inline assets, etc.).
+    // Translate those into something readable before logging.
+    function describeExportError(err) {
+        if (err && err.message) return err;
+        if (err && typeof Event !== 'undefined' && err instanceof Event) {
+            const tag = err.target && err.target.tagName ? err.target.tagName.toLowerCase() : 'image';
+            return new Error(
+                `failed to render ${tag} during export. ` +
+                `Common causes: cross-origin images without CORS headers, ` +
+                `an oversized target element, or a no-target snapshot of a complex page. ` +
+                `Pass a "target" option to scope the snapshot.`
+            );
+        }
+        return new Error(String(err));
+    }
+
+    function emitError(format, err) {
+        const e = describeExportError(err);
+        console.error('[x-export] export failed:', e.message);
+        try {
+            window.dispatchEvent(new CustomEvent('manifest:export-error', {
+                detail: { format, error: e.message }
+            }));
+        } catch { /* ignore */ }
+    }
+
+    async function runExport(format, opts, filename) {
+        switch (format) {
+            case 'pdf': return exportPdf(opts, filename);
+            case 'png': return exportImage(opts, filename, 'png');
+            case 'jpeg':
+            case 'jpg': return exportImage(opts, filename, 'jpeg');
+            case 'webp': return exportImage(opts, filename, 'webp');
+            case 'csv': return exportCsv(opts, filename);
+            case 'json': return exportJson(opts, filename);
+            default: throw new Error(`Unknown format "${format}". Supported: pdf, png, jpeg, webp, csv, json.`);
+        }
+    }
+
+    // ------- Visual exports (PDF, PNG, JPEG, WebP) ----------------------
+
+    function resolveTarget(opts) {
+        if (opts.target) {
+            const t = typeof opts.target === 'string'
+                ? document.querySelector(opts.target)
+                : opts.target;
+            if (!t) throw new Error(`target "${opts.target}" matched no element`);
+            return t;
+        }
+        return document.body;
+    }
+
+    function snapshotOptions(opts) {
+        // Filter callback for html-to-image — exclude opt-out elements.
+        const filter = (node) => {
+            if (!node || node.nodeType !== 1) return true;
+            return !(node.hasAttribute && node.hasAttribute('data-no-export'));
+        };
+        const out = {
+            pixelRatio: Number(opts.resolution) > 0 ? Number(opts.resolution) : 2,
+            cacheBust: true,
+            // A single cross-origin image without CORS headers would otherwise
+            // reject the whole snapshot. Substitute a transparent pixel so the
+            // export still produces a usable file.
+            imagePlaceholder: TRANSPARENT_PIXEL,
+            filter
+        };
+        if (opts.backgroundColor) out.backgroundColor = opts.backgroundColor;
+        if (opts.width) out.canvasWidth = Number(opts.width);
+        if (opts.height) out.canvasHeight = Number(opts.height);
+        return out;
+    }
+
+    // Run an html-to-image call once. If it rejects with a raw Event (the SVG
+    // failed to decode — usually a font or oversized clone issue), retry once
+    // with safer options before propagating the error. Most real-world failures
+    // recover on the second attempt.
+    async function snapshotWithFallback(lib, fn, target, so) {
+        try {
+            return await lib[fn](target, so);
+        } catch (err) {
+            if (err && err.message) throw err; // a real Error — don't mask it
+            const safer = { ...so, skipFonts: true, pixelRatio: Math.min(so.pixelRatio || 2, 1) };
+            return await lib[fn](target, safer);
+        }
+    }
+
+    async function exportImage(opts, filename, ext) {
+        const lib = await loadHtmlToImage();
+        const target = resolveTarget(opts);
+        const so = snapshotOptions(opts);
+        let dataUrl;
+        if (ext === 'png') dataUrl = await snapshotWithFallback(lib, 'toPng', target, so);
+        else if (ext === 'jpeg') {
+            if (!so.backgroundColor) so.backgroundColor = effectivePageBackground();
+            so.quality = Number(opts.quality) > 0 && Number(opts.quality) <= 1
+                ? Number(opts.quality)
+                : 0.95;
+            dataUrl = await snapshotWithFallback(lib, 'toJpeg', target, so);
+        } else if (ext === 'webp') {
+            const webpOpts = { ...so, type: 'image/webp', quality: opts.quality || 0.95 };
+            const blob = await snapshotWithFallback(lib, 'toBlob', target, webpOpts);
+            dataUrl = URL.createObjectURL(blob);
+        }
+        triggerDownload(dataUrl, filename);
+    }
+
+    async function exportPdf(opts, filename) {
+        const [imgLib, jsPDFCtor] = await Promise.all([loadHtmlToImage(), loadJsPDF()]);
+        const target = resolveTarget(opts);
+        const so = snapshotOptions(opts);
+        if (!so.backgroundColor) so.backgroundColor = effectivePageBackground();
+        const dataUrl = await snapshotWithFallback(imgLib, 'toPng', target, so);
+        const img = await loadImage(dataUrl);
+        const orientation = img.width > img.height ? 'landscape' : 'portrait';
+        const pdf = new jsPDFCtor({ orientation, unit: 'pt', format: opts.pageSize || 'a4' });
+        const pageW = pdf.internal.pageSize.getWidth();
+        const pageH = pdf.internal.pageSize.getHeight();
+        const ratio = Math.min(pageW / img.width, pageH / img.height);
+        const renderW = img.width * ratio;
+        const renderH = img.height * ratio;
+        const offsetX = (pageW - renderW) / 2;
+        const offsetY = (pageH - renderH) / 2;
+        pdf.addImage(dataUrl, 'PNG', offsetX, offsetY, renderW, renderH);
+        pdf.save(filename);
+    }
+
+    function effectivePageBackground() {
+        let el = document.body;
+        while (el && el !== document.documentElement.parentElement) {
+            const cs = getComputedStyle(el);
+            const bg = cs.backgroundColor;
+            if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
+            el = el.parentElement;
+        }
+        return '#ffffff';
+    }
+
+    function loadImage(dataUrl) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = dataUrl;
+        });
+    }
+
+    // ------- Tabular exports (CSV, JSON) --------------------------------
+
+    function resolveDataset(opts) {
+        if (Array.isArray(opts.data)) return opts.data;
+        if (opts.data && typeof opts.data === 'object') return opts.data;
+        if (opts.source) {
+            const x = window.$x || (window.Alpine && window.Alpine.magic && window.Alpine.magic('x'));
+            if (x && x[opts.source] != null) return x[opts.source];
+        }
+        throw new Error('csv/json export needs `source: "<name>"` or `data: <value>`');
+    }
+
+    function exportCsv(opts, filename) {
+        const data = resolveDataset(opts);
+        if (!Array.isArray(data)) throw new Error('csv export expects an array data source');
+        if (data.length === 0) {
+            triggerDownload(blobUrl('', 'text/csv'), filename);
+            return;
+        }
+        const headers = [];
+        const seen = new Set();
+        for (const row of data) {
+            if (!row || typeof row !== 'object') continue;
+            for (const k of Object.keys(row)) {
+                if (!seen.has(k)) { seen.add(k); headers.push(k); }
+            }
+        }
+        const lines = [headers.map(csvCell).join(',')];
+        for (const row of data) {
+            lines.push(headers.map((h) => csvCell(row && row[h])).join(','));
+        }
+        triggerDownload(blobUrl(lines.join('\n') + '\n', 'text/csv;charset=utf-8'), filename);
+    }
+
+    function exportJson(opts, filename) {
+        const data = resolveDataset(opts);
+        const serializable = sanitize(data);
+        triggerDownload(blobUrl(JSON.stringify(serializable, null, 2), 'application/json'), filename);
+    }
+
+    function sanitize(value) {
+        if (Array.isArray(value)) return value.map(sanitize);
+        if (value && typeof value === 'object') {
+            const out = {};
+            for (const k of Object.keys(value)) {
+                if (k.startsWith('$') || k === '_loading' || k === '_error') continue;
+                out[k] = sanitize(value[k]);
+            }
+            return out;
+        }
+        return value;
+    }
+
+    function csvCell(v) {
+        if (v == null) return '';
+        const s = typeof v === 'object' ? JSON.stringify(v) : String(v);
+        return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+    }
+
+    // ------- Helpers ----------------------------------------------------
+
+    function blobUrl(content, type) {
+        return URL.createObjectURL(new Blob([content], { type }));
+    }
+
+    function triggerDownload(url, filename) {
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        if (url.startsWith('blob:')) setTimeout(() => { try { URL.revokeObjectURL(url); } catch { /* ignore */ } }, 2000);
+    }
+
+    // Lazy library loaders — cached promises.
+
+    let htmlToImagePromise = null;
+    function loadHtmlToImage() {
+        if (htmlToImagePromise) return htmlToImagePromise;
+        htmlToImagePromise = loadScript('https://cdn.jsdelivr.net/npm/html-to-image@1.11.13/dist/html-to-image.min.js')
+            .then(() => {
+                if (!window.htmlToImage) throw new Error('html-to-image failed to load');
+                return window.htmlToImage;
+            });
+        return htmlToImagePromise;
+    }
+
+    let jsPDFPromise = null;
+    function loadJsPDF() {
+        if (jsPDFPromise) return jsPDFPromise;
+        jsPDFPromise = loadScript('https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.min.js')
+            .then(() => {
+                const ctor = window.jspdf && window.jspdf.jsPDF;
+                if (!ctor) throw new Error('jsPDF failed to load');
+                return ctor;
+            });
+        return jsPDFPromise;
+    }
+
+    function loadScript(src) {
+        return new Promise((resolve, reject) => {
+            const existing = document.querySelector(`script[src="${src}"]`);
+            if (existing) {
+                if (existing._loaded) resolve();
+                else {
+                    existing.addEventListener('load', () => resolve());
+                    existing.addEventListener('error', reject);
+                }
+                return;
+            }
+            const s = document.createElement('script');
+            s.src = src;
+            s.async = true;
+            s.addEventListener('load', () => { s._loaded = true; resolve(); });
+            s.addEventListener('error', () => reject(new Error('Failed to load ' + src)));
+            document.head.appendChild(s);
+        });
+    }
+}
+
+// Module-level guard: URL-triggered exports fire at most once per page load,
+// regardless of how many elements declare `trigger: 'url'`.
+let urlTriggerFired = false;
+
+// Standard plugin init lifecycle.
+let exportPluginInitialized = false;
+function ensureExportPluginInitialized() {
+    if (exportPluginInitialized) return;
+    if (!window.Alpine || typeof window.Alpine.directive !== 'function') return;
+    exportPluginInitialized = true;
+    initializeExportPlugin();
+}
+window.ensureExportPluginInitialized = ensureExportPluginInitialized;
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureExportPluginInitialized);
+}
+document.addEventListener('alpine:init', ensureExportPluginInitialized);
+if (window.Alpine && typeof window.Alpine.directive === 'function') {
+    setTimeout(ensureExportPluginInitialized, 0);
+} else {
+    const checkAlpine = setInterval(() => {
+        if (window.Alpine && typeof window.Alpine.directive === 'function') {
+            clearInterval(checkAlpine);
+            ensureExportPluginInitialized();
+        }
+    }, 10);
+    setTimeout(() => clearInterval(checkAlpine), 5000);
+}

package/lib/manifest.js

@@ -199,7 +199,9 @@
 		'slides',
 		'resize',
 		'colorpicker',
-		'url-parameters'
+		'url-parameters',
+		'virtual',
+		'export'
 	];
 
 	// Appwrite integration plugins (opt-in only, never auto-loaded)

package/lib/manifest.virtual.js

@@ -0,0 +1,319 @@
+/* Manifest Virtual — variable-height list virtualization for Alpine.
+ *
+ * Renders only the rows visible in the scroll viewport (plus an overscan
+ * buffer), so a list of tens of thousands of rows can scroll smoothly with
+ * a low DOM count. Row heights are measured on render and the spacer
+ * recalculates, so authors aren't bound to a fixed row height.
+ *
+ * Usage — wrap an x-for template with x-virtual on the scrolling container:
+ *
+ *   <div x-virtual style="height: 600px; overflow: auto">
+ *     <template x-for="row in $x.customers" :key="row.id">
+ *       <div class="row">
+ *         <span x-text="row.name"></span>
+ *       </div>
+ *     </template>
+ *   </div>
+ *
+ * Options (object expression on the directive):
+ *
+ *   <div x-virtual="{ estimate: 48, overscan: 5 }" style="height: 600px">
+ *
+ *     estimate   Initial per-row height in px (default 50). Used for rows
+ *                that haven't been measured yet. Closer estimates mean
+ *                less scroll-position drift on first render.
+ *     overscan   Rows to render above/below the visible window (default 3).
+ *                Higher = smoother scroll, more DOM.
+ *
+ * Notes:
+ *
+ *   - Only one template child is supported. It must have x-for and :key.
+ *   - The container element must have a bounded height (CSS height /
+ *     max-height) and scroll. The plugin sets overflow: auto + position:
+ *     relative if not already set.
+ *   - Heights are remeasured automatically if a row's content changes.
+ */
+
+function initializeVirtualPlugin() {
+
+    Alpine.directive('virtual', (el, { expression }, { effect, evaluate, evaluateLater, cleanup }) => {
+
+        // --- Find and parse the template ---
+        const template = el.querySelector(':scope > template');
+        if (!template) {
+            console.warn('[x-virtual] expects a child <template> with x-for, e.g. <template x-for="row in $x.items" :key="row.id">…');
+            return;
+        }
+        const forExpr = template.getAttribute('x-for');
+        if (!forExpr) {
+            console.warn('[x-virtual] child <template> must have x-for');
+            return;
+        }
+        const m = /^\s*(\S+|\(\s*\S+\s*,\s*\S+\s*\))\s+(?:in|of)\s+(.+?)\s*$/.exec(forExpr);
+        if (!m) {
+            console.warn('[x-virtual] could not parse x-for expression: ' + forExpr);
+            return;
+        }
+        const itemName = m[1].trim();
+        const sourceExpr = m[2].trim();
+        const keyExpr =
+            template.getAttribute(':key') ||
+            template.getAttribute('x-bind:key') ||
+            `${itemName}.id`;
+
+        // Remove x-for/:key so Alpine doesn't try to render the full list, but
+        // KEEP the template in the DOM as our render source. We'll clone its
+        // contents per visible row.
+        template.removeAttribute('x-for');
+        template.removeAttribute(':key');
+        template.removeAttribute('x-bind:key');
+
+        // --- Options ---
+        const options = expression ? evaluate(expression) || {} : {};
+        const initialEstimate = Number(options.estimate) > 0 ? Number(options.estimate) : 50;
+        const overscan = Number.isFinite(options.overscan) && options.overscan >= 0 ? Number(options.overscan) : 3;
+
+        // --- Container setup ---
+        const cs = getComputedStyle(el);
+        if (cs.overflow === 'visible' && cs.overflowY === 'visible') el.style.overflow = 'auto';
+        if (cs.position === 'static') el.style.position = 'relative';
+
+        // The spacer holds the rendered (absolutely positioned) rows and sizes
+        // itself to the total virtual height so the scrollbar is correct.
+        const spacer = document.createElement('div');
+        spacer.dataset.virtualSpacer = '';
+        spacer.style.position = 'relative';
+        spacer.style.width = '100%';
+        spacer.style.height = '0px';
+        el.appendChild(spacer);
+
+        // --- State ---
+        // heights: key -> measured pixel height (only for rows that have been
+        // mounted at least once and measured).
+        const heights = new Map();
+        let measuredSum = 0;
+        let measuredCount = 0;
+        // rendered: key -> wrapper element currently in the DOM
+        const rendered = new Map();
+        // data: latest snapshot of the source array
+        let data = [];
+        // Cached cumulative offsets — index i holds the sum of heights of rows
+        // 0..(i-1). Length is data.length + 1; final entry is total height.
+        let cumulative = new Float64Array(1);
+
+        const getAvg = () => (measuredCount > 0 ? measuredSum / measuredCount : initialEstimate);
+        const rowHeightFor = (key) => heights.get(key) ?? getAvg();
+
+        // Evaluate the key expression against an item without going through
+        // Alpine — `new Function` is fast and isolates from the surrounding
+        // scope. Expression usually looks like `row.id` or `row.$id`.
+        const keyFn = buildKeyFn(itemName, keyExpr);
+
+        function rebuildCumulative() {
+            const n = data.length;
+            cumulative = new Float64Array(n + 1);
+            let y = 0;
+            for (let i = 0; i < n; i++) {
+                cumulative[i] = y;
+                const k = keyFn(data[i]);
+                y += rowHeightFor(k);
+            }
+            cumulative[n] = y;
+            spacer.style.height = y + 'px';
+        }
+
+        // Find the first index whose offset is >= scrollTop. Cumulative is
+        // monotonic so binary search works.
+        function findStartIndex(scrollTop) {
+            let lo = 0, hi = data.length;
+            while (lo < hi) {
+                const mid = (lo + hi) >>> 1;
+                if (cumulative[mid + 1] <= scrollTop) lo = mid + 1;
+                else hi = mid;
+            }
+            return Math.max(0, lo - overscan);
+        }
+
+        function findEndIndex(scrollBottom, startHint) {
+            let i = startHint;
+            const n = data.length;
+            while (i < n && cumulative[i] < scrollBottom) i++;
+            return Math.min(n, i + overscan);
+        }
+
+        function renderVisible() {
+            if (!data.length) {
+                for (const [, node] of rendered) node.remove();
+                rendered.clear();
+                return;
+            }
+            const scrollTop = el.scrollTop;
+            const viewportHeight = el.clientHeight;
+            const start = findStartIndex(scrollTop);
+            const end = findEndIndex(scrollTop + viewportHeight, start);
+
+            // Track which keys remain visible
+            const stillVisible = new Set();
+            for (let i = start; i < end; i++) {
+                const item = data[i];
+                if (item == null) continue;
+                const key = keyFn(item);
+                if (key == null) continue; // skip un-keyable rows
+                stillVisible.add(key);
+
+                let node = rendered.get(key);
+                if (!node) {
+                    node = mountRow(i);
+                    if (!node) continue;
+                    rendered.set(key, node);
+                    spacer.appendChild(node);
+                    // x-data on the row needs the parent scope (where the
+                    // source array lives) to resolve, so we MUST init after
+                    // append, not before.
+                    Alpine.initTree(node);
+                    // Measure on next frame so Alpine has bound everything.
+                    requestAnimationFrame(() => measureRow(key, node));
+                }
+                node.style.top = cumulative[i] + 'px';
+                node.dataset.virtualIndex = i;
+            }
+
+            // Remove rows no longer in the window
+            for (const [key, node] of rendered) {
+                if (!stillVisible.has(key)) {
+                    node.remove();
+                    rendered.delete(key);
+                }
+            }
+        }
+
+        function mountRow(index) {
+            const tplChild = template.content.firstElementChild;
+            if (!tplChild) return null;
+            const node = tplChild.cloneNode(true);
+            node.style.position = 'absolute';
+            node.style.left = '0';
+            node.style.right = '0';
+            // Inject a per-row Alpine scope. Because we reference the source
+            // expression with the index baked in via a getter, Alpine tracks
+            // the dependency and re-renders this row when its data updates.
+            const scopeExpr = `{ get ${itemName}() { return (${sourceExpr})[${index}]; } }`;
+            // Merge with any existing x-data on the cloned root.
+            const existing = node.getAttribute('x-data');
+            node.setAttribute('x-data', existing ? `Object.assign({}, ${scopeExpr}, ${existing})` : scopeExpr);
+            // Note: caller must Alpine.initTree(node) AFTER appending to the
+            // DOM, otherwise the scope can't resolve identifiers (e.g. the
+            // source array) from outer x-data contexts.
+            return node;
+        }
+
+        function measureRow(key, node) {
+            if (!node.isConnected) return;
+            const h = node.offsetHeight;
+            if (!h) return;
+            const prev = heights.get(key);
+            if (prev === h) return;
+            if (prev !== undefined) measuredSum -= prev;
+            else measuredCount++;
+            measuredSum += h;
+            heights.set(key, h);
+            // Recompute cumulative offsets and re-render so positions reflect
+            // the new heights AND any rows now in/out of the visible window.
+            rebuildCumulative();
+            renderVisible();
+        }
+
+        // --- Reactive data source subscription ---
+        const sourceGetter = evaluateLater(sourceExpr);
+        effect(() => {
+            sourceGetter((value) => {
+                data = Array.isArray(value) ? value : (value ? Array.from(value) : []);
+                // When the data identity or length changes, drop any rendered
+                // rows whose keys no longer exist in the new data.
+                const validKeys = new Set();
+                for (const item of data) {
+                    if (item != null) validKeys.add(keyFn(item));
+                }
+                for (const [key, node] of rendered) {
+                    if (!validKeys.has(key)) {
+                        node.remove();
+                        rendered.delete(key);
+                    }
+                }
+                rebuildCumulative();
+                renderVisible();
+            });
+        });
+
+        // --- Scroll + resize handlers ---
+        let scrollScheduled = false;
+        const onScroll = () => {
+            if (scrollScheduled) return;
+            scrollScheduled = true;
+            requestAnimationFrame(() => {
+                scrollScheduled = false;
+                renderVisible();
+            });
+        };
+        el.addEventListener('scroll', onScroll, { passive: true });
+
+        const ro = new ResizeObserver(() => renderVisible());
+        ro.observe(el);
+
+        cleanup(() => {
+            el.removeEventListener('scroll', onScroll);
+            ro.disconnect();
+            for (const [, node] of rendered) node.remove();
+            rendered.clear();
+            spacer.remove();
+        });
+    });
+
+}
+
+// Build a key-evaluator function for a given itemName + keyExpr.
+// `keyFn(item)` returns the row's key. Falls back to identity if it fails.
+function buildKeyFn(itemName, keyExpr) {
+    try {
+        // eslint-disable-next-line no-new-func
+        const fn = new Function(itemName, `return (${keyExpr});`);
+        return (item) => {
+            try { return fn(item); } catch { return item; }
+        };
+    } catch {
+        return (item) => item;
+    }
+}
+
+// Track initialization to prevent duplicates
+let virtualPluginInitialized = false;
+
+function ensureVirtualPluginInitialized() {
+    if (virtualPluginInitialized) return;
+    if (!window.Alpine || typeof window.Alpine.directive !== 'function') return;
+    virtualPluginInitialized = true;
+    initializeVirtualPlugin();
+}
+
+// Expose on window for loader to call if needed
+window.ensureVirtualPluginInitialized = ensureVirtualPluginInitialized;
+
+// Handle both DOMContentLoaded and alpine:init
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureVirtualPluginInitialized);
+}
+
+document.addEventListener('alpine:init', ensureVirtualPluginInitialized);
+
+// If Alpine is already initialized when this script loads, initialize immediately
+if (window.Alpine && typeof window.Alpine.directive === 'function') {
+    setTimeout(ensureVirtualPluginInitialized, 0);
+} else {
+    const checkAlpine = setInterval(() => {
+        if (window.Alpine && typeof window.Alpine.directive === 'function') {
+            clearInterval(checkAlpine);
+            ensureVirtualPluginInitialized();
+        }
+    }, 10);
+    setTimeout(() => clearInterval(checkAlpine), 5000);
+}

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "mnfst",
-    "version": "0.5.71",
+    "version": "0.5.74",
     "private": false,
     "workspaces": [
         "templates/starter",
         "packages/render",
         "packages/types",
-        "packages/test"
+        "packages/test",
+        "packages/export"
     ],
     "main": "lib/manifest.js",
     "style": "lib/manifest.css",
@@ -32,8 +33,9 @@
         "release:render": "cd packages/render && npm version patch --no-git-tag-version && npm publish --auth-type=web",
         "release:types": "cd packages/types && npm version patch --no-git-tag-version && npm publish --auth-type=web",
         "release:test": "cd packages/test && npm version patch --no-git-tag-version && npm publish --auth-type=web",
+        "release:export": "cd packages/export && npm version patch --no-git-tag-version && npm publish --auth-type=web",
         "release:starter": "cd packages/create-starter && npm version patch --no-git-tag-version && npm publish --auth-type=web",
-        "release:all": "npm run release:run && npm run release:render && npm run release:types && npm run release:test && npm run release:starter && npm run release",
+        "release:all": "npm run release:run && npm run release:render && npm run release:types && npm run release:test && npm run release:export && npm run release:starter && npm run release",
         "prepublishOnly": "npm run build",
         "test": "vitest run",
         "lint": "echo 'No linting configured'"