mnfst 0.5.80 → 0.5.82

package/lib/manifest.svg.js

@@ -2,6 +2,64 @@
 
 const svgCache = new Map();
 
+// Shared DOMPurify loader (only fetched when the .safe modifier is used).
+// SVG natively supports <script>, on* event handlers, javascript: URLs in
+// href, and <foreignObject> with HTML inside — any of which become an XSS
+// vector when the SVG source is user-supplied. The .safe modifier opts into
+// DOMPurify with the SVG profile so authors rendering user-uploaded SVGs
+// (e.g. profile avatars from an Appwrite bucket) don't have to write
+// per-source sanitization.
+//
+// Defined on window so manifest.markdown.js can share the same loader and
+// in-flight promise — otherwise both plugins' top-level `let purifyPromise`
+// declarations collide in the realm's global lexical env and the second
+// script throws SyntaxError ("Identifier 'purifyPromise' has already been
+// declared") at parse time, taking the whole plugin offline.
+if (!window.ManifestDOMPurify) {
+    window.ManifestDOMPurify = {
+        _promise: null,
+        load() {
+            if (typeof window.DOMPurify !== 'undefined') return Promise.resolve(window.DOMPurify);
+            if (this._promise) return this._promise;
+            this._promise = new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/dompurify@latest/dist/purify.min.js';
+                script.onload = () => {
+                    if (typeof window.DOMPurify !== 'undefined') {
+                        resolve(window.DOMPurify);
+                    } else {
+                        this._promise = null;
+                        reject(new Error('DOMPurify failed to load'));
+                    }
+                };
+                script.onerror = (err) => {
+                    this._promise = null;
+                    reject(err);
+                };
+                document.head.appendChild(script);
+            });
+            return this._promise;
+        }
+    };
+}
+
+// Return a sanitized SVG string when the .safe modifier is on; pass through
+// otherwise. Uses DOMPurify's SVG profile which strips <script>, on* event
+// handlers, javascript: URLs, and dangerous foreignObject HTML — while
+// keeping the visual SVG markup intact.
+async function maybeSanitizeSvg(svgText, safe) {
+    if (!safe) return svgText;
+    try {
+        const DOMPurify = await window.ManifestDOMPurify.load();
+        return DOMPurify.sanitize(svgText, {
+            USE_PROFILES: { svg: true, svgFilters: true }
+        });
+    } catch {
+        console.warn('[Manifest SVG] x-svg.safe: DOMPurify unavailable — skipping injection.');
+        return '';
+    }
+}
+
 function resolveFetchPath(pathOrContent) {
     let resolved = pathOrContent;
     if (!pathOrContent.startsWith('/')) {
@@ -123,11 +181,17 @@ async function initializeSvgPlugin() {
             document.querySelector('meta[name="manifest:prerendered"]').getAttribute('content') !== '0'
         );
 
-        Alpine.directive('svg', (el, { expression }, { effect, evaluateLater }) => {
+        Alpine.directive('svg', (el, { expression, modifiers }, { effect, evaluateLater }) => {
             if (!expression) {
                 return;
             }
 
+            // Opt-in DOMPurify sanitization for user-supplied SVG. Default is
+            // unsanitized — Manifest keeps full SVG fidelity (filters, scripts
+            // used for animations, etc.). Use .safe when the SVG source can
+            // come from untrusted parties (uploaded avatars, third-party APIs).
+            const safe = Array.isArray(modifiers) && modifiers.includes('safe');
+
             const hasBakedContent =
                 isPrerenderedPage &&
                 el.querySelector('svg') &&
@@ -172,13 +236,19 @@ async function initializeSvgPlugin() {
                         return;
                     }
 
-                    const text = resolved.text || '';
-                    if (text === lastText) {
+                    const rawText = resolved.text || '';
+                    if (rawText === lastText) {
+                        return;
+                    }
+                    lastText = rawText;
+
+                    if (!rawText.trim()) {
+                        el.replaceChildren();
                         return;
                     }
-                    lastText = text;
 
-                    if (!text.trim()) {
+                    const text = await maybeSanitizeSvg(rawText, safe);
+                    if (!text || !text.trim()) {
                         el.replaceChildren();
                         return;
                     }

package/lib/manifest.switch.css

@@ -21,23 +21,23 @@
             width: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
             height: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
             border-radius: 50%;
-            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 60%, var(--color-field-inverse, oklch(16.6% 0.026 267)));
+            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 60%, var(--color-field-inverse, darkslategray));
             box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
             transition: var(--transition, all .05s ease-in-out)
         }
 
         /* Checked */
         &:checked {
-            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+            background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
 
             /* Marker */
             &::before {
                 left: calc(100% - (var(--spacing-field-height, 2.25rem) * 0.65) + 0.125rem);
-                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267))
+                background-color: var(--color-field-inverse, darkslategray)
             }
 
             &:hover {
-                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
+                background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
             }
         }
     }

package/lib/manifest.table.css

@@ -17,8 +17,8 @@
 
         /* Header row */
         :where(thead, .grid-header > *) {
-            background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87));
-            border-bottom: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
+            background-color: var(--color-surface-1, whitesmoke);
+            border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent))
         }
 
         /* Header cell */
@@ -28,7 +28,7 @@
 
         /* Row */
         :where(tr, .grid-row > *) {
-            border-bottom: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
+            border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent))
         }
 
         /* Cell */
@@ -59,7 +59,7 @@
         /* Striped utility class */
         &.striped {
             :where(tr:nth-child(even), .grid-row:nth-child(even)) {
-                background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87))
+                background-color: var(--color-surface-1, whitesmoke)
             }
 
             :where(tr:nth-child(odd), .grid-row:nth-child(odd)) {

package/lib/manifest.theme.css

@@ -8,19 +8,19 @@
 ::selection {
 
     /* Default palette */
-    --color-50: oklch(100% 0 0);
-    --color-100: oklch(98.17% 0.0005 95.87);
-    --color-200: oklch(96.27% 0.0026 252.34);
-    --color-300: oklch(91.79% 0.0029 264.26);
-    --color-400: oklch(89.24% 0.0024 12.48);
-    --color-500: oklch(67.4% 0.0318 251.27);
-    --color-600: oklch(48.26% 0.0365 255.09);
-    --color-700: oklch(28.7% 0.030787 270.1);
-    --color-800: oklch(20.7% 0.026326 268.7);
-    --color-900: oklch(16.6% 0.026 267);
-    --color-950: oklch(3.89% 0.0181 262.25);
+    --color-50: white;
+    --color-100: whitesmoke;
+    --color-200: gainsboro;
+    --color-300: lightgray;
+    --color-400: silver;
+    --color-500: darkgray;
+    --color-600: gray;
+    --color-700: slategray;
+    --color-800: dimgray;
+    --color-900: darkslategray;
+    --color-950: black;
 
-    /* Light theme */
+    /* Light mode */
     --color-page: var(--color-50);
     --color-surface-1: var(--color-100);
     --color-surface-2: var(--color-200);
@@ -28,35 +28,35 @@
     --color-content-stark: var(--color-900);
     --color-content-neutral: var(--color-600);
     --color-content-subtle: var(--color-500);
-    --color-field-surface: var(--color-300);
-    --color-field-surface-hover: var(--color-400);
+    --color-field-surface: color-mix(var(--color-content-stark) 10%, transparent);
+    --color-field-surface-hover: color-mix(var(--color-content-stark) 15%, transparent);
     --color-field-inverse: var(--color-content-stark);
     --color-popover-surface: var(--color-page);
-    --color-line: color-mix(in oklch, var(--color-content-stark) 11%, transparent);
-    --color-brand-surface: #f6c07b;
-    --color-brand-surface-hover: #f19b46;
-    --color-brand-inverse: #763518;
-    --color-brand-content: #de6618;
-    --color-accent-surface: #ffccd3;
-    --color-accent-surface-hover: #ffa1ad;
-    --color-accent-inverse: #a50036;
-    --color-accent-content: #ff637e;
-    --color-positive-surface: #16a34a;
-    --color-positive-surface-hover: #166534;
-    --color-positive-inverse: white;
-    --color-positive-content: var(--color-positive-surface);
-    --color-negative-surface: #ef4444;
-    --color-negative-surface-hover: #dc2626;
-    --color-negative-inverse: white;
-    --color-negative-content: var(--color-negative-surface);
+    --color-line: color-mix(var(--color-content-stark) 10%, transparent);
+    --color-brand-surface: goldenrod;
+    --color-brand-surface-hover: darkgoldenrod;
+    --color-brand-inverse: white;
+    --color-brand-content: goldenrod;
+    --color-accent-surface: var(--color-content-stark);
+    --color-accent-surface-hover: color-mix(var(--color-content-stark) 90%, var(--color-page));
+    --color-accent-inverse: var(--color-page);
+    --color-accent-content: var(--color-content-stark);
+    --color-positive-surface: palegreen;
+    --color-positive-surface-hover: lightgreen;
+    --color-positive-inverse: darkgreen;
+    --color-positive-content: limegreen;
+    --color-negative-surface: salmon;
+    --color-negative-surface-hover: lightcoral;
+    --color-negative-inverse: maroon;
+    --color-negative-content: crimson;
 
     /* Fonts */
-    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
     /* Sizes */
     --radius: 0.5rem;
     --spacing: 0.25rem;
-    --spacing-content-width: 68.75rem;
+    --spacing-content-width: 74rem;
     --spacing-field-padding: calc(var(--spacing) * 2.5);
     --spacing-field-height: calc(var(--spacing) * 9);
     --spacing-popover-offset: calc(var(--spacing) * 2);
@@ -75,7 +75,7 @@
     --icon-toast-dismiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
 }
 
-/* Dark theme overrides */
+/* Dark mode overrides */
 .dark {
     --color-page: var(--color-950);
     --color-surface-1: var(--color-900);
@@ -83,20 +83,25 @@
     --color-surface-3: var(--color-700);
     --color-field-surface: var(--color-700);
     --color-field-surface-hover: var(--color-600);
-    --color-popover-surface: var(--color-700);
+    --color-popover-surface: var(--color-900);
     --color-content-stark: var(--color-50);
     --color-content-neutral: var(--color-400);
     --color-content-subtle: var(--color-500);
-    --color-brand-content: #f6c07b;
-    --color-accent-content: #ffa1ad;
 
     /* Popover form elements */
     :where([popover]) {
-        --color-field-surface: color-mix(in oklch, var(--color-600) 60%, var(--color-700));
-        --color-field-surface-hover: color-mix(in oklch, var(--color-600) 80%, var(--color-700));
+        --color-field-surface: color-mix(var(--color-600) 60%, var(--color-700));
+        --color-field-surface-hover: color-mix(var(--color-600) 80%, var(--color-700))
     }
 }
 
+@font-face {
+    font-family: 'Inter';
+    src: url('/assets/fonts/Inter.woff2') format('woff2');
+    font-weight: 400 500 600 700;
+    font-display: swap
+}
+
 @layer base {
 
     /* Default font and colors */
@@ -110,12 +115,12 @@
 
     /* Text selection */
     ::selection {
-        background-color: color-mix(in oklch, var(--color-content-stark) 90%, transparent);
+        background-color: color-mix(currentColor 25%, transparent)
     }
 
     /* Focus state */
     :where(:focus-visible, label:has(input[type=search], input[type=file]):focus-within) {
         outline: none;
-        box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 35%, transparent);
+        box-shadow: 0 0 0 2px color-mix(var(--color-content-stark) 30%, transparent)
     }
 }

package/lib/manifest.toast.css

@@ -17,8 +17,8 @@
     :where(.toast) {
         display: flex;
         max-width: 90vw;
-        background-color: var(--color-popover-surface, oklch(100% 0 0));
-        border: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
+        background-color: var(--color-popover-surface, white);
+        border: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
         border-radius: calc(var(--radius, 0.5rem) * 2);
         box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
         overflow: hidden;
@@ -47,7 +47,7 @@
         /* Dismiss button */
         :where(.toast-dismiss-button) {
             position: relative;
-            border-inline-start: 1px solid color-mix(in oklch, var(--color-content-stark, oklch(16.6% 0.026 267)) 20%, transparent);
+            border-inline-start: 1px solid color-mix(in oklch, var(--color-content-stark, darkslategray) 20%, transparent);
             border-radius: 0;
 
             /* Icon */
@@ -58,7 +58,7 @@
                 left: 50%;
                 width: 50%;
                 height: 50%;
-                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
+                background-color: var(--color-field-inverse, darkslategray);
                 mask-image: var(--icon-toast-dismiss, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"));
                 mask-repeat: no-repeat;
                 mask-size: 100% 100%;
@@ -70,11 +70,11 @@
 
     /* Brand, accent, positive, negative utility class overrides (see Utilities) */
     :where(.toast.brand, .toast.accent, .toast.positive, .toast.negative) {
-        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
-        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+        color: var(--color-field-inverse, darkslategray);
+        background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
 
         :where(.toast-dismiss-button) {
-            border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, oklch(16.6% 0.026 267)) 20%, transparent);
+            border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, darkslategray) 20%, transparent);
         }
     }
 

package/lib/manifest.tooltip.css

@@ -42,14 +42,14 @@
         margin: var(--spacing-popover-offset, 0.5rem) 0;
         padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
         font-size: 0.875rem;
-        color: var(--color-page, oklch(100% 0 0));
-        background-color: var(--color-content-stark, oklch(16.6% 0.026 267));
+        color: var(--color-page, white);
+        background-color: var(--color-content-stark, darkslategray);
         border: 0 none;
         border-radius: var(--radius, 0.5rem);
         box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
         &:hover {
-            transition-delay: var(--tooltip-hover-delay, 1s)
+            transition-delay: var(--tooltip-hover-delay, .5s)
         }
 
         /* Leading icon */

package/lib/manifest.tooltips.js

@@ -306,6 +306,47 @@ function initializeTooltipPlugin() {
         if (t.classList && t.classList.contains('tooltip') && t.getAttribute('popover') === 'hint') return;
         hideAnySingleton();
     }, true);
+
+    // ---- Public programmatic-show API ----
+    //
+    // Flash a tooltip in response to an action (e.g. the code plugin's inline
+    // copy confirmation) without requiring the trigger to carry an x-tooltip
+    // directive. The trigger element acts as the anchor; the singleton is
+    // reused, so this respects chain mode / focus behaviour just like a
+    // hover-shown tooltip would. Auto-hides after `durationMs`.
+    //
+    // `positions` accepts the same vocabulary as the x-tooltip directive's
+    // modifiers — array of any subset of ['top','bottom','start','end',
+    // 'center','corner']. Joined with '-' to form the position class
+    // (e.g. ['top','end'] → '.top-end'), matching what `x-tooltip.top.end`
+    // would emit.
+    window.ManifestTooltips = window.ManifestTooltips || {};
+    window.ManifestTooltips.showTransient = function (triggerEl, contentHtml, durationMs, positions) {
+        if (!triggerEl) return;
+        const duration = typeof durationMs === 'number' ? durationMs : 1500;
+        const validPositions = ['top', 'bottom', 'start', 'end', 'center', 'corner'];
+        let resolvedPositions = [];
+        if (Array.isArray(positions)) {
+            resolvedPositions = positions.filter(p => validPositions.includes(p));
+        } else if (typeof positions === 'string' && positions) {
+            resolvedPositions = positions.split(/[.\-\s]+/).filter(p => validPositions.includes(p));
+        }
+        cancelPendingShow();
+        cancelPendingHide();
+        showSingletonFor(triggerEl, contentHtml || '', resolvedPositions);
+        clearTimeout(triggerEl._tooltipTransientTimer);
+        triggerEl._tooltipTransientTimer = setTimeout(() => {
+            triggerEl._tooltipTransientTimer = null;
+            const host = getTooltipHostForTrigger(triggerEl);
+            const s = _singletons.get(host);
+            if (s && s.activeTrigger === triggerEl && s.el.matches(':popover-open')) {
+                try { s.el.hidePopover(); } catch { /* popover already closed */ }
+                s.activeTrigger = null;
+                markTooltipHidden();
+                scheduleAnchorRestore(triggerEl);
+            }
+        }, duration);
+    };
 }
 
 // ---- Plugin init boilerplate ----