mnfst 0.5.111 → 0.5.112

package/lib/manifest.code.js

@@ -910,7 +910,11 @@ function handleVisible(el) {
     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-"]'
+        'pre:not([x-code]):not([data-code-processed]) > code[class*="language-"],' +
+        // Copy-only inline codespans from markdown (`text`{copy}). Skip those
+        // that also carry x-code — they're already covered by the first
+        // selector — and skip <code copy> inside a <pre> (block-level path).
+        'code[copy]:not([x-code]):not([data-code-processed]):not(pre > code)'
     );
     // Always include the triggering element (it's already known to be visible).
     processOne(el);
@@ -931,6 +935,14 @@ function processOne(el) {
     } else if (el.matches && el.matches('pre > code[class*="language-"]')) {
         adoptMarkdownBlocks(el.parentElement);
         processCodeElement(el.parentElement);
+    } else if (el.tagName === 'CODE' && el.hasAttribute('copy')) {
+        // Copy-only inline codespan (`text`{copy} in markdown) — no x-code,
+        // no highlighting, just wire the click-to-copy handler. Marking it
+        // as processed prevents re-discovery on subsequent scans.
+        if (el.dataset.codeProcessed !== 'yes') {
+            el.dataset.codeProcessed = 'yes';
+            setupInlineCopy(el);
+        }
     }
 }
 
@@ -946,7 +958,11 @@ function observeAll(root = document) {
     const candidates = [
         ...root.querySelectorAll('[x-code]:not([data-code-processed])'),
         ...root.querySelectorAll('[x-code-group]:not([data-group-processed])'),
-        ...root.querySelectorAll('pre:not([x-code]):not([data-code-processed]) > code[class*="language-"]')
+        ...root.querySelectorAll('pre:not([x-code]):not([data-code-processed]) > code[class*="language-"]'),
+        // Copy-only inline codespans (no x-code, not inside <pre>) — markdown's
+        // `text`{copy} syntax. These need only the copy handler wired, no
+        // highlighting work.
+        ...root.querySelectorAll('code[copy]:not([x-code]):not([data-code-processed]):not(pre > code)')
     ];
     for (const el of candidates) {
         io.observe(el);

package/lib/manifest.export.js

@@ -249,7 +249,16 @@ function initializeExportPlugin() {
             scrollX: 0,
             scrollY: 0,
         };
-        if (opts.backgroundColor) out.backgroundColor = opts.backgroundColor;
+        // `backgroundColor: 'transparent'` is the explicit opt-out for raster
+        // exports — useful for icons and logos that should composite onto an
+        // arbitrary surface. We translate it to null because html2canvas-pro
+        // uses `null` (not the string 'transparent') to disable its default
+        // white fill.
+        if (opts.backgroundColor === 'transparent') {
+            out.backgroundColor = null;
+        } else if (opts.backgroundColor) {
+            out.backgroundColor = opts.backgroundColor;
+        }
         if (opts.width) out.width = Number(opts.width);
         if (opts.height) out.height = Number(opts.height);
         return out;
@@ -291,7 +300,14 @@ function initializeExportPlugin() {
         const lib = await loadSnapshotLib();
         const target = resolveTarget(opts);
         const so = snapshotOptions(opts);
-        if ((ext === 'jpeg' || ext === 'webp') && !so.backgroundColor) {
+        // Default raster exports to the page's effective background so the
+        // snapshot looks like the page itself — a Sales Chart exported from
+        // a dark-mode page comes out on a dark background. Callers can
+        // explicitly opt into transparency with `backgroundColor: 'transparent'`,
+        // which snapshotOptions() translates to the null value html2canvas-pro
+        // wants. (Previously only JPEG/WebP got a default fill; PNG defaulted
+        // to transparent and rendered white text on a white viewer background.)
+        if (so.backgroundColor === undefined) {
             so.backgroundColor = effectivePageBackground();
         }
         await waitForImages(target);
@@ -306,49 +322,98 @@ function initializeExportPlugin() {
         triggerDownload(dataUrl, filename);
     }
 
-    // Whole-page PDF: route through the browser's native print pipeline.
-    // It handles multi-page layout, page breaks, vector text, and the page's
-    // own @media print CSS — far more reliable than rasterizing a long page
-    // and embedding it as a single image. The user sees the print dialog and
-    // picks "Save as PDF" (or any installed PDF printer). Element-scoped PDFs
-    // continue to use html2canvas-pro + jsPDF.
+    // PDFs (whole-page or element-scoped) route through the browser's native
+    // print pipeline. It handles multi-page layout, page breaks, vector text,
+    // and the page's own @media print CSS — far more reliable than
+    // rasterizing a long page and embedding it as a single image, and gives
+    // selectable / copy-pasteable text in the resulting file. The user sees
+    // the print dialog and picks "Save as PDF" (or any installed PDF
+    // printer). For element-scoped PDFs, a temporary print stylesheet is
+    // injected that hides everything outside the target subtree.
     async function exportPdf(opts, filename) {
-        if (!opts.target) {
-            return printToPdf(filename);
-        }
-        const [imgLib, jsPDFCtor] = await Promise.all([loadSnapshotLib(), loadJsPDF()]);
-        const target = resolveTarget(opts);
-        const so = snapshotOptions(opts);
-        if (!so.backgroundColor) so.backgroundColor = effectivePageBackground();
-        await waitForImages(target);
-        const canvas = await snapshotToCanvas(imgLib, target, so);
-        const dataUrl = canvas.toDataURL('image/png');
-        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);
+        // Both whole-page and targeted PDFs route through the browser's print
+        // pipeline. That gives us:
+        //   - Vector text (selectable, copy/pasteable in the PDF)
+        //   - Real layout (browser's actual rendering of the target's CSS,
+        //     including cascade layers, custom properties, and computed
+        //     fonts — html2canvas-pro's computed-style walker mis-renders
+        //     heading classes inside @layer rules)
+        //   - Multi-page flow for tall content
+        //   - The page's own @media print rules
+        // Whole-page is the default; passing a target adds a temporary
+        // @media print stylesheet that hides everything outside that subtree.
+        return printToPdf(filename, opts.target ? resolveTarget(opts) : null);
     }
 
-    function printToPdf(filename) {
-        // The browser's "Save as PDF" dialog seeds its default filename from
-        // document.title. Swap it briefly so the suggested name matches the
-        // user's intent, then restore after the dialog closes.
+    // Trigger the browser's "Save as PDF" dialog. When `target` is provided,
+    // the print is scoped to that element via injected @media print CSS;
+    // otherwise the whole page prints. Filename uses the document.title swap
+    // trick — the print dialog seeds its suggested name from the title.
+    function printToPdf(filename, target) {
         const original = document.title;
         const cleaned = String(filename || '').replace(/\.pdf$/i, '') || original;
         document.title = cleaned;
+
+        let style = null;
+        let injectedId = null;
+        if (target && target.nodeType === 1) {
+            // The target needs an id we can reference from the stylesheet.
+            // Give it a throwaway one if it doesn't already have one; we'll
+            // remove it on cleanup so we don't leak DOM mutations.
+            if (!target.id) {
+                injectedId = 'mnfst-print-target-' + Math.random().toString(36).slice(2, 9);
+                target.id = injectedId;
+            }
+            const id = target.id;
+            style = document.createElement('style');
+            style.setAttribute('data-mnfst-print-scope', '');
+            // visibility:hidden preserves layout space (so absolute/fixed
+            // positioning calculations remain sane), then we un-hide the
+            // target subtree and pin it to the top-left of the print page.
+            style.textContent =
+                '@media print {' +
+                  'body * { visibility: hidden !important; }' +
+                  '#' + cssEscape(id) + ', #' + cssEscape(id) + ' * { visibility: visible !important; }' +
+                  '#' + cssEscape(id) + ' {' +
+                    'position: absolute !important;' +
+                    'left: 0 !important; top: 0 !important;' +
+                    'width: 100% !important; max-width: none !important;' +
+                    'margin: 0 !important;' +
+                  '}' +
+                  '[data-no-export] { display: none !important; }' +
+                '}';
+            document.head.appendChild(style);
+        }
+
+        const cleanup = () => {
+            document.title = original;
+            if (style) style.remove();
+            if (injectedId && target) target.removeAttribute('id');
+            window.removeEventListener('afterprint', onAfter);
+        };
+        const onAfter = () => cleanup();
+        window.addEventListener('afterprint', onAfter);
+
         try { window.print(); }
-        finally {
-            // Wait one frame so the print dialog reads the swapped title first.
-            setTimeout(() => { document.title = original; }, 0);
+        catch (err) {
+            // If print() throws synchronously (rare), tear down immediately.
+            cleanup();
+            throw err;
+        }
+        // Some browsers don't fire afterprint reliably (e.g. when the user
+        // cancels with Esc in older Safari). Schedule a fallback teardown
+        // a few seconds out so we don't leak the title swap or the style tag.
+        setTimeout(cleanup, 30000);
+    }
+
+    // CSS.escape polyfill — used to safely build #id selectors from arbitrary
+    // ids. Real `CSS.escape` is widely available; fall back for very old
+    // browsers to a conservative regex.
+    function cssEscape(value) {
+        if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+            return CSS.escape(String(value));
         }
+        return String(value).replace(/[^a-zA-Z0-9_-]/g, (c) => '\\' + c);
     }
 
     function effectivePageBackground() {

package/lib/manifest.integrity.json

@@ -2,18 +2,18 @@
   "manifest.appwrite.auth.js": "sha384-Kvv9SjOFBFY2LELQunQpKLr3uDT+supgouo93eahEL4dAHntq0F9u8Hoyx85eQKr",
   "manifest.appwrite.data.js": "sha384-00ulLT+GAIuPHA/rRT9p98vYlsyDzkyKXtg86BDQ6FGQa5vVVN+W6kuforniBAsz",
   "manifest.appwrite.presence.js": "sha384-uxRpx9/Jj0kGtklH5QmUlAzD3zdSvFRfK6bcJQqxl+Bsf5tOo4zgwqJTQgtZoHQP",
-  "manifest.code.js": "sha384-jYW7i5F+K+mL5d/HKpw/Xoo0vOz/pmlvotGd7MUPOu+CB+O28OohqgPAEI4y6bSS",
+  "manifest.code.js": "sha384-0uQckfvrEyDVV1Er8SpciZM5egnBzgJG4QFl7ZNdFOWiNLkENeLcRjJKzPLlQO6G",
   "manifest.color.js": "sha384-Z9G/lzt0vVMxjz4wkPuGG1X9mmQAJR15aOoGX3ephf7r2wnlUWet5GLgkUMtT4vt",
   "manifest.colorpicker.js": "sha384-0EVn+Ha06h7FIvOxc6WjZYnKYXzi+zba08yKvczSEGTRkWRxyKN2TFrZHI1SDCXu",
   "manifest.components.js": "sha384-3dCTD5EwCZTiX+1obYtDNM3WWwPh2JDQUQQsdRUUK3gs6FXjse1ShkKaT/2jsNaI",
   "manifest.data.js": "sha384-pgX6RJRWP7jmWO4ALb+GbS7Gm5JGOrCtxjEOnEcj1aJ8HoGbFjOniyjsntf8IA+B",
   "manifest.dropdowns.js": "sha384-WMrFoSpKfJuo81dyrwhVrDO8rq+rDwh2x8x4nH01BY5ZHkvjE+/SaT2gWCI0zOn+",
-  "manifest.export.js": "sha384-qvdGz1TiGEDOeWJ5os1z03RURdKX+ezZEQ1KyV+9iC7X0esLK83mtY87t4MQv45t",
+  "manifest.export.js": "sha384-kTZBHsXPtj6RuLSyR323lCjIm0VTtZ64IdpyvOULMMJHqw/kIXjtQDyph5Ak/Ryv",
   "manifest.icons.js": "sha384-uOkboYrovjCpl22eey3Jaxpey+pOnot5NDnRRumcRxiR7IOVaRh1i20gYnWXR5dW",
   "manifest.localization.js": "sha384-M40EWrbWs2MoJvUiYVQaPxPiOzMYBn/ywuMR02rvoSXG77eIHT/aRoYub9r6+jC+",
-  "manifest.markdown.js": "sha384-H/Zg0ANrfokWWLR0js9zKd6yasP62sG+aga5r5WnmTd+LPMb93H97JlS8OQV7Ox9",
+  "manifest.markdown.js": "sha384-jJFVCg46bYcP/xglX6QguG2qsGi2I/0o9kXLpM2RMq7edbTYpgx6WQ9iNB7kKHmN",
   "manifest.resize.js": "sha384-Ak5gf44ERfh9pOSAD1qZzJSysslpwBCkevIlz7R3dszTUyzUKGKGF4pn5arOtgG0",
-  "manifest.router.js": "sha384-n6xmIfWnYzd/0kkVTFuHhFzHuxiDgZ1Lg1W0yB6/w3Myw5pQ6PgE6SJBHfVsO7/D",
+  "manifest.router.js": "sha384-/JWAmVtxin3AKAdtIgXLjilMDj9RztBFn1W/ZSu/OPngfj2K8f3oYvz4UKXLwBRm",
   "manifest.slides.js": "sha384-3uRTkyK9XPLmnxI2+igZlpi4EyPlU/7IHj5j3BZJJ2KN455vXyk99fiXV3feO/XY",
   "manifest.svg.js": "sha384-nc+3spSGNS2l+82maL/OFz2iOGUhLZ0kqeooj28CEcdElM4OZa34e0tbnokZHVI6",
   "manifest.tabs.js": "sha384-v6Ti0zHfdLhkFHbTMg0FH6uMrThuBvZrL2PQgVBeeXhDjuN7x4MtoNWogPbAQTaD",

package/lib/manifest.markdown.js

@@ -375,7 +375,16 @@ function applyInlineCodeAttributes(html) {
                     language = tok;
                 }
             }
-            let attrs = ` x-code="${escapeForAttribute(language)}"`;
+            // Only emit x-code when the author actually requested a language.
+            // `inline`{copy} should produce `<code copy>` — copy is a UI flag,
+            // not a request for syntax highlighting. Previously we always
+            // wrote `x-code=""`, which the code plugin treated as auto-detect
+            // and ran hljs.highlightElement on the codespan, colouring
+            // identifiers like `x-code` themselves as tokens. Authors who
+            // want highlighting opt in explicitly via `code`{bash} or by
+            // hand-writing `<code x-code="bash">…</code>`.
+            let attrs = '';
+            if (language) attrs += ` x-code="${escapeForAttribute(language)}"`;
             for (const flag of flags) attrs += ` ${flag}`;
             if (classes.length) attrs += ` class="${escapeForAttribute(classes.join(' '))}"`;
             for (const [k, v] of kv) attrs += ` ${k}="${escapeForAttribute(v)}"`;

package/lib/manifest.router.js

@@ -587,6 +587,20 @@ function interceptLinkClicks() {
         // Handle pure anchor links normally - don't intercept them
         if (href.startsWith('#')) return;
 
+        // Don't intercept blob: or data: URLs. The export plugin creates a
+        // throwaway <a href="blob:…" download="…"> and programmatically
+        // clicks it to trigger a file save; if the router treats it as a
+        // SPA link, `new URL("blob:http://localhost/UUID", origin).pathname`
+        // resolves to "http://localhost/UUID" which then pushState pushes
+        // as a same-origin path, producing /http://localhost/UUID and
+        // landing the user on a 404 instead of downloading.
+        if (href.startsWith('blob:') || href.startsWith('data:')) return;
+
+        // Honor `download` — the link is opting out of SPA navigation in
+        // favor of letting the browser save its target. Same intent as
+        // blob:/data:, just expressed via the standard HTML attribute.
+        if (link.hasAttribute('download')) return;
+
         // Check if it's an external link FIRST (before any other processing)
         let isExternalLink = false;
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.111",
+    "version": "0.5.112",
     "private": false,
     "workspaces": [
         "templates/starter",