mnfst 0.5.79 → 0.5.81

package/lib/manifest.css

@@ -2416,7 +2416,7 @@
 
 @layer components {
 
-    :where(aside[popover]) {
+    :where(nav[popover]) {
         inset-inline-start: auto;
         inset-inline-end: 0;
         width: fit-content;
@@ -2456,7 +2456,7 @@
         }
     }
 
-    :where(aside[popover].appear-start) {
+    :where(nav[popover].appear-start) {
         inset-inline-start: 0;
         inset-inline-end: auto;
 
@@ -2481,7 +2481,7 @@
     }
 
     /* Dark mode override */
-    .dark :where(aside[popover]) {
+    .dark :where(nav[popover]) {
         background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87))
     }
 }
@@ -2951,18 +2951,10 @@
     .h4,
     .h5,
     .h6 {
-        font-weight: bolder;
+        font-weight: 550;
         word-wrap: break-word
     }
 
-    :where(h1, h2, h3, h4):not(.unstyle),
-    .h1,
-    .h2,
-    .h3,
-    .h4 {
-        font-weight: 700;
-    }
-
     :where(h1, h2, h3):not(.unstyle),
     .h1,
     .h2,
@@ -2972,18 +2964,18 @@
 
     :where(h1):not(.unstyle),
     .h1 {
-        font-size: 2.25rem;
+        font-size: 3rem;
         line-height: 1.25
     }
 
     :where(h2):not(.unstyle),
     .h2 {
-        font-size: 1.5rem
+        font-size: 2.25rem
     }
 
     :where(h3):not(.unstyle),
     .h3 {
-        font-size: 1.25rem;
+        font-size: 1.75rem;
         line-height: 1.4
     }
 
@@ -2994,18 +2986,21 @@
 
     :where(h5):not(.unstyle),
     .h5 {
-        font-weight: 600;
-        font-size: .875rem;
+        font-size: 1rem;
         line-height: 1rem;
-        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
+        color: var(--color-content-neutral, black);
+
+        & a:hover {
+            color: var(--color-content-stark, black)
+        }
     }
 
     :where(h6):not(.unstyle),
     .h6 {
-        font-weight: 600;
+        font-family: var(--font-mono);
         font-size: 0.8125rem;
         line-height: 1.4;
-        text-transform: uppercase;
+        color: var(--color-brand-content, black)
     }
 
     /* Paragraphs */
@@ -3016,18 +3011,15 @@
 
     /* Links */
     :where(a:not([role=button]), button.link):not(.unstyle) {
-        text-decoration: underline;
-        text-underline-offset: 2px;
+        text-align: unset;
+        text-decoration: none;
         cursor: pointer;
-        transition: var(--transition, all .05s ease-in-out);
-
-        &:hover {
-            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
-        }
+        transition: var(--transition, all .05s ease-in-out)
+    }
 
-        &:active {
-            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
-        }
+    :where(abbr, address, blockquote, code, del, figcaption, h1, h2, h3, h4, h5, h6, ins, legend, p, small, cite, q, .h1, .h2, .h3, .h4, .h5, .h6, .paragraph, .small, .caption, .label):not(.unstyle)>a {
+        text-decoration: underline;
+        text-underline-offset: 2px
     }
 
     /* Blockquotes */
@@ -3037,8 +3029,8 @@
         max-width: 100%;
         margin: calc(var(--spacing, 0.25rem) * 4) 0;
         padding: 0 calc(var(--spacing, 0.25rem) * 4);
-        color: var(--color-content-stark, oklch(16.6% 0.026 267));
-        border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, oklch(16.6% 0.026 267)) 25%, transparent);
+        color: var(--color-content-stark, black);
+        border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, black) 25%, transparent);
         border-inline-end: none;
 
         & * {
@@ -3051,12 +3043,13 @@
         display: inline-block;
         width: fit-content;
         height: fit-content;
-        padding: 0.1ch 0.5ch;
+        padding: 0 0.7ch;
         font-size: 82.5%;
+        line-height: 1.4;
         word-wrap: break-word;
-        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
-        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 10%, transparent);
-        border: 1px solid color-mix(in oklch, var(--color-content-subtle, oklch(67.4% 0.0318 251.27)) 10%, transparent);
+        color: var(--color-content-neutral, grey);
+        background-color: color-mix(in oklch, var(--color-content-neutral, grey) 10%, transparent);
+        border: 1px solid color-mix(in oklch, var(--color-content-subtle, silver) 10%, transparent);
         border-radius: var(--radius, 0.5rem)
     }
 
@@ -3064,11 +3057,10 @@
     :where(figcaption):not(.unstyle),
     .caption {
         font-size: 0.8125rem;
-        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
+        color: var(--color-content-neutral, grey);
 
-        & a {
-            font-weight: inherit;
-            color: inherit
+        & a:hover {
+            color: var(--color-content-stark, black)
         }
     }
 
@@ -3081,7 +3073,11 @@
     :where(small):not(.unstyle),
     .small {
         font-size: 0.875rem;
-        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
+        color: var(--color-content-neutral, grey);
+
+        & a:hover {
+            color: var(--color-content-stark, black)
+        }
     }
 
     /* Icons */
@@ -3108,8 +3104,8 @@
         font-weight: 600;
         line-height: 1;
         text-align: center;
-        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
-        background-color: color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 10%, transparent);
+        color: var(--color-content-neutral, grey);
+        background-color: color-mix(in oklch, var(--color-content-neutral, grey) 10%, transparent);
         border-radius: calc(var(--radius, 0.5rem) / 1.5);
 
         &:not(:last-of-type) {
@@ -3152,7 +3148,7 @@
         font-weight: 500;
         font-size: 0.75rem;
         line-height: 1;
-        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
+        color: var(--color-field-inverse, black);
         background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
         border-radius: 100px;
 
@@ -3473,7 +3469,7 @@
 
     /* Prose styles for long-form content */
     :where(.prose, .prose details) {
-        width: 65ch;
+        width: 42rem;
         max-width: 100%;
 
         /* Asides inside a prose element are used as callouts */
@@ -3544,6 +3540,10 @@
             }
         }
 
+        &>h1 {
+            font-size: 2.25rem
+        }
+
         &>h1+p {
             margin-top: 0.625rem;
             font-size: 1.125rem;
@@ -3551,11 +3551,13 @@
         }
 
         &>h2 {
+            font-size: 1.75rem;
             margin-top: 1rem;
             margin-bottom: calc(1rem * 0.6667)
         }
 
         &>h3 {
+            font-size: 1.25rem;
             margin-top: calc(1rem * 2.4)
         }
 

package/lib/manifest.data.js

@@ -12,7 +12,9 @@ async function ensureManifest() {
     try {
         const manifestUrl = (document.querySelector('link[rel="manifest"]')?.getAttribute('href')) || '/manifest.json';
         const response = await fetch(manifestUrl);
-        return await response.json();
+        const manifest = await response.json();
+        interpolateManifest(manifest);
+        return manifest;
     } catch (error) {
         console.error('[Manifest Data] Failed to load manifest:', error);
         return null;
@@ -36,6 +38,33 @@ function interpolateEnvVars(str) {
     });
 }
 
+// Recursively walk a manifest object and interpolate every string value in
+// place. Object keys are left untouched. Called once at manifest-load time so
+// downstream consumers (auth, data, appwrite) read already-resolved values.
+function interpolateManifest(obj) {
+    if (obj === null || typeof obj !== 'object') return obj;
+    if (Array.isArray(obj)) {
+        for (let i = 0; i < obj.length; i++) {
+            const v = obj[i];
+            if (typeof v === 'string') {
+                obj[i] = interpolateEnvVars(v);
+            } else if (v !== null && typeof v === 'object') {
+                interpolateManifest(v);
+            }
+        }
+        return obj;
+    }
+    for (const key of Object.keys(obj)) {
+        const v = obj[key];
+        if (typeof v === 'string') {
+            obj[key] = interpolateEnvVars(v);
+        } else if (v !== null && typeof v === 'object') {
+            interpolateManifest(v);
+        }
+    }
+    return obj;
+}
+
 // Helper to get nested value from object
 function getNestedValue(obj, path) {
     return path.split('.').reduce((current, key) => {
@@ -179,6 +208,7 @@ function getQueries(dataSource) {
 window.ManifestDataConfig = {
     ensureManifest,
     interpolateEnvVars,
+    interpolateManifest,
     getNestedValue,
     getDefaultLocale,
     parseContentPath,
@@ -1202,6 +1232,13 @@ window.ManifestDataStore = {
 
 /* Manifest Data Sources - File Loaders */
 
+// Key names that would walk into Object's prototype chain if used as nested-
+// path segments. Rejecting them in setNestedValue and deepMergeWithFallback
+// prevents a CSV row like `__proto__.polluted, true` (or a malicious JSON
+// locale file containing `{"__proto__": {...}}`) from polluting
+// Object.prototype and silently affecting every plain object on the page.
+const POLLUTING_KEYS = new Set(['__proto__', 'constructor', 'prototype']);
+
 // Dynamic js-yaml loader
 let jsyaml = null;
 let yamlLoadingPromise = null;
@@ -1336,6 +1373,7 @@ function deepMergeWithFallback(currentData, fallbackData) {
         !Array.isArray(currentData) && !Array.isArray(fallbackData)) {
         const merged = { ...fallbackData };
         for (const key in currentData) {
+            if (POLLUTING_KEYS.has(key)) continue;
             if (key.startsWith('_')) {
                 // Preserve metadata from current locale
                 merged[key] = currentData[key];
@@ -1363,6 +1401,9 @@ function deepMergeWithFallback(currentData, fallbackData) {
 // Numeric path segments (e.g. cards.0.title) create real arrays so x-for="card in $x....cards" works.
 function setNestedValue(obj, path, value) {
     const keys = path.split('.');
+    // Drop the whole row if any segment would walk into the prototype chain.
+    // `foo.constructor.prototype.polluted` is just as dangerous as `__proto__.polluted`.
+    if (keys.some(k => POLLUTING_KEYS.has(k))) return;
     let current = obj;
 
     for (let i = 0; i < keys.length - 1; i++) {

package/lib/manifest.integrity.json

@@ -0,0 +1,26 @@
+{
+  "manifest.appwrite.auth.js": "sha384-to37ssZJXGeOS6+rf2VI47ox2mEqgsi5oQ1E5vv8XU/lDspbDFE1KHEMm8TxBhxW",
+  "manifest.appwrite.data.js": "sha384-00ulLT+GAIuPHA/rRT9p98vYlsyDzkyKXtg86BDQ6FGQa5vVVN+W6kuforniBAsz",
+  "manifest.appwrite.presence.js": "sha384-uxRpx9/Jj0kGtklH5QmUlAzD3zdSvFRfK6bcJQqxl+Bsf5tOo4zgwqJTQgtZoHQP",
+  "manifest.code.js": "sha384-e6s5v78qYi7GgrXqXRAtWerh7g5f2m9k8bPZnxk+CeBWXOImWvZFWpT7uZUcWHqT",
+  "manifest.color.js": "sha384-Z9G/lzt0vVMxjz4wkPuGG1X9mmQAJR15aOoGX3ephf7r2wnlUWet5GLgkUMtT4vt",
+  "manifest.colorpicker.js": "sha384-0EVn+Ha06h7FIvOxc6WjZYnKYXzi+zba08yKvczSEGTRkWRxyKN2TFrZHI1SDCXu",
+  "manifest.colors.js": "sha384-u8iD6kapVj4OjeCILxBkYQKgXtDQ7LdEodILkQuknzPMwzSMBmDHN25UuzxepHby",
+  "manifest.components.js": "sha384-3dCTD5EwCZTiX+1obYtDNM3WWwPh2JDQUQQsdRUUK3gs6FXjse1ShkKaT/2jsNaI",
+  "manifest.data.js": "sha384-dLvmRs4rC/s3tg4lePwJgKb1Q/cAKc7uFTjHzpusnQgcnfXahmGdAW4g5MOF2V8M",
+  "manifest.dropdowns.js": "sha384-WMrFoSpKfJuo81dyrwhVrDO8rq+rDwh2x8x4nH01BY5ZHkvjE+/SaT2gWCI0zOn+",
+  "manifest.icons.js": "sha384-uOkboYrovjCpl22eey3Jaxpey+pOnot5NDnRRumcRxiR7IOVaRh1i20gYnWXR5dW",
+  "manifest.localization.js": "sha384-eKdBIMEAwsugPP2p2fuPzQUkU44f1+Y0JgukMJ1KXLQY1/AYvpcGsEiritVDElsN",
+  "manifest.markdown.js": "sha384-ykEREUXsGW26uQcPfTy05lXjaBdNPduUsiTOsr9btQ4NiOy5dMgEk2fMD669p9Pn",
+  "manifest.resize.js": "sha384-Ak5gf44ERfh9pOSAD1qZzJSysslpwBCkevIlz7R3dszTUyzUKGKGF4pn5arOtgG0",
+  "manifest.router.js": "sha384-n6xmIfWnYzd/0kkVTFuHhFzHuxiDgZ1Lg1W0yB6/w3Myw5pQ6PgE6SJBHfVsO7/D",
+  "manifest.slides.js": "sha384-3uRTkyK9XPLmnxI2+igZlpi4EyPlU/7IHj5j3BZJJ2KN455vXyk99fiXV3feO/XY",
+  "manifest.svg.js": "sha384-gulBJnHAlmmBo9nIxMNO+4rjF6Xdvrv8la8PPYAC5vOA2uAou/twI6rXrp+vOKIC",
+  "manifest.tabs.js": "sha384-v6Ti0zHfdLhkFHbTMg0FH6uMrThuBvZrL2PQgVBeeXhDjuN7x4MtoNWogPbAQTaD",
+  "manifest.tailwind.js": "sha384-aHLvl2oSuUgy06VaBqhhByn5wWxqvnqxw6KCwehakKUS00F/s/Nb62umeASS6Y4P",
+  "manifest.toasts.js": "sha384-ytd5rDbax/Ou9z23uedFXPZbxDPsk2E/pxCTq4WLvfv+os1qTI6kELp0kPp07g24",
+  "manifest.tooltips.js": "sha384-ppK+/G3UH8/J1Dn48comIwXcPjVVKiCNEJr/L1B+6eZQr2DLoBohwbIUR7w40jZf",
+  "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
+  "manifest.utilities.js": "sha384-Q98oZClq/iRKFmuwHolisLgEitsTZiEPHxUW29liKlnL1Gx+YGq8MMivYbDlGDD6",
+  "manifest.js": "sha384-KyKrxpjCNpSBv30BPYliAWOonAQ6cKW+IHF6+twjmyiGGx6UNV9YVDqGZmjtr/i/"
+}

package/lib/manifest.js

@@ -175,6 +175,41 @@
 	const DEFAULT_VERSION = 'latest';
 	const ALPINE_CDN_URL = 'https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js';
 
+	// SRI integrity map: { 'manifest.foo.min.js': 'sha384-...', ... }
+	// Inlined by build.mjs's emitIntegrityMap() step. Empty in source so the
+	// unbuilt loader works in dev (where files are served from the local
+	// project, same-origin, no SRI needed). Built artifact in lib/ carries
+	// the populated map. Looked up by the filename suffix of every script URL
+	// addScript() injects — when the file is in the map, the matching
+	// integrity + crossorigin attributes are set, and the browser refuses to
+	// execute the script if the bytes don't match (defends against CDN
+	// poisoning / npm hijack).
+	const INTEGRITY = {
+  "manifest.appwrite.auth.js": "sha384-to37ssZJXGeOS6+rf2VI47ox2mEqgsi5oQ1E5vv8XU/lDspbDFE1KHEMm8TxBhxW",
+  "manifest.appwrite.data.js": "sha384-00ulLT+GAIuPHA/rRT9p98vYlsyDzkyKXtg86BDQ6FGQa5vVVN+W6kuforniBAsz",
+  "manifest.appwrite.presence.js": "sha384-uxRpx9/Jj0kGtklH5QmUlAzD3zdSvFRfK6bcJQqxl+Bsf5tOo4zgwqJTQgtZoHQP",
+  "manifest.code.js": "sha384-e6s5v78qYi7GgrXqXRAtWerh7g5f2m9k8bPZnxk+CeBWXOImWvZFWpT7uZUcWHqT",
+  "manifest.color.js": "sha384-Z9G/lzt0vVMxjz4wkPuGG1X9mmQAJR15aOoGX3ephf7r2wnlUWet5GLgkUMtT4vt",
+  "manifest.colorpicker.js": "sha384-0EVn+Ha06h7FIvOxc6WjZYnKYXzi+zba08yKvczSEGTRkWRxyKN2TFrZHI1SDCXu",
+  "manifest.colors.js": "sha384-u8iD6kapVj4OjeCILxBkYQKgXtDQ7LdEodILkQuknzPMwzSMBmDHN25UuzxepHby",
+  "manifest.components.js": "sha384-3dCTD5EwCZTiX+1obYtDNM3WWwPh2JDQUQQsdRUUK3gs6FXjse1ShkKaT/2jsNaI",
+  "manifest.data.js": "sha384-dLvmRs4rC/s3tg4lePwJgKb1Q/cAKc7uFTjHzpusnQgcnfXahmGdAW4g5MOF2V8M",
+  "manifest.dropdowns.js": "sha384-WMrFoSpKfJuo81dyrwhVrDO8rq+rDwh2x8x4nH01BY5ZHkvjE+/SaT2gWCI0zOn+",
+  "manifest.icons.js": "sha384-uOkboYrovjCpl22eey3Jaxpey+pOnot5NDnRRumcRxiR7IOVaRh1i20gYnWXR5dW",
+  "manifest.localization.js": "sha384-eKdBIMEAwsugPP2p2fuPzQUkU44f1+Y0JgukMJ1KXLQY1/AYvpcGsEiritVDElsN",
+  "manifest.markdown.js": "sha384-ykEREUXsGW26uQcPfTy05lXjaBdNPduUsiTOsr9btQ4NiOy5dMgEk2fMD669p9Pn",
+  "manifest.resize.js": "sha384-Ak5gf44ERfh9pOSAD1qZzJSysslpwBCkevIlz7R3dszTUyzUKGKGF4pn5arOtgG0",
+  "manifest.router.js": "sha384-n6xmIfWnYzd/0kkVTFuHhFzHuxiDgZ1Lg1W0yB6/w3Myw5pQ6PgE6SJBHfVsO7/D",
+  "manifest.slides.js": "sha384-3uRTkyK9XPLmnxI2+igZlpi4EyPlU/7IHj5j3BZJJ2KN455vXyk99fiXV3feO/XY",
+  "manifest.svg.js": "sha384-gulBJnHAlmmBo9nIxMNO+4rjF6Xdvrv8la8PPYAC5vOA2uAou/twI6rXrp+vOKIC",
+  "manifest.tabs.js": "sha384-v6Ti0zHfdLhkFHbTMg0FH6uMrThuBvZrL2PQgVBeeXhDjuN7x4MtoNWogPbAQTaD",
+  "manifest.tailwind.js": "sha384-aHLvl2oSuUgy06VaBqhhByn5wWxqvnqxw6KCwehakKUS00F/s/Nb62umeASS6Y4P",
+  "manifest.toasts.js": "sha384-ytd5rDbax/Ou9z23uedFXPZbxDPsk2E/pxCTq4WLvfv+os1qTI6kELp0kPp07g24",
+  "manifest.tooltips.js": "sha384-ppK+/G3UH8/J1Dn48comIwXcPjVVKiCNEJr/L1B+6eZQr2DLoBohwbIUR7w40jZf",
+  "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
+  "manifest.utilities.js": "sha384-Q98oZClq/iRKFmuwHolisLgEitsTZiEPHxUW29liKlnL1Gx+YGq8MMivYbDlGDD6"
+};
+
 	// Get base URL for a given version
 	function getBaseUrl(version = DEFAULT_VERSION) {
 		return `https://cdn.jsdelivr.net/npm/mnfst@${version}/lib`;
@@ -199,9 +234,7 @@
 		'slides',
 		'resize',
 		'colorpicker',
-		'url-parameters',
-		'virtual',
-		'export'
+		'url-parameters'
 	];
 
 	// Appwrite integration plugins (opt-in only, never auto-loaded)
@@ -211,10 +244,16 @@
 		'appwrite-presence'
 	];
 
-	// Plugin dependencies: plugins that require other plugins to be loaded first
+	// Plugin dependencies: plugins that require other plugins to be loaded first.
+	// All Appwrite plugins depend on `data` for env-var interpolation at
+	// manifest-load time (window.ManifestDataConfig.interpolateManifest); auth
+	// and presence also share the data plugin's manifest-fetch plumbing.
+	// Localization reads data-source URLs that may carry ${VAR} references.
 	const PLUGIN_DEPENDENCIES = {
+		'appwrite-auth': ['data'],
 		'appwrite-data': ['data'],
-		'appwrite-presence': ['data']
+		'appwrite-presence': ['data'],
+		'localization': ['data']
 	};
 
 	// Derive default plugin list from manifest (only load data/localization/components when manifest needs them)
@@ -315,6 +354,15 @@
 			const script = document.createElement('script');
 			script.src = url;
 			script.async = false; // Ensure scripts execute in order
+			// Apply SRI when the file is in the inlined integrity map. The map
+			// keys files by basename, so it works whether the URL points at
+			// jsDelivr or a user-configured pluginBase mirror — as long as the
+			// served bytes match what this loader version was built against.
+			const fileName = url.split('/').pop().split('?')[0];
+			if (INTEGRITY[fileName]) {
+				script.integrity = INTEGRITY[fileName];
+				script.crossOrigin = 'anonymous';
+			}
 			script.onload = () => resolve();
 			script.onerror = () => reject(new Error(`Failed to load ${pluginName} from ${url}`));
 			document.head.appendChild(script);
@@ -522,6 +570,13 @@
 				manifest = await manifestPromise;
 			}
 			if (manifest && typeof window !== 'undefined') {
+				// Resolve ${VAR} env-var references once, at the canonical load
+				// point, so downstream plugins (auth, data, appwrite) read
+				// already-interpolated values instead of each handling env-var
+				// substitution themselves.
+				if (window.ManifestDataConfig?.interpolateManifest) {
+					window.ManifestDataConfig.interpolateManifest(manifest);
+				}
 				window.__manifestLoaded = manifest;
 				if (window.ManifestComponentsRegistry) {
 					window.ManifestComponentsRegistry.manifest = manifest;

package/lib/manifest.markdown.js

@@ -17,6 +17,68 @@ if (typeof window !== 'undefined') {
     });
 }
 
+// Cache for DOMPurify loading (only fetched when the .safe modifier is used)
+let purifyPromise = null;
+
+// DOMPurify config tuned for Manifest's markdown output. The markdown
+// extensions emit <x-code>, <x-icon>, and other x-* custom elements that must
+// survive sanitization, so custom-element handling is enabled with a
+// tag-name allowlist (x-*) and an attribute filter that rejects event
+// handlers (on*). DOMPurify's defaults handle <script>, javascript: URLs,
+// srcdoc, and the usual XSS vectors for standard HTML tags.
+const MARKDOWN_PURIFY_CONFIG = {
+    CUSTOM_ELEMENT_HANDLING: {
+        tagNameCheck: /^x-[a-z][\w-]*$/,
+        attributeNameCheck: /^(?!on)[a-z][\w\-:]*$/i,
+        allowCustomizedBuiltInElements: false
+    }
+};
+
+async function loadDOMPurify() {
+    if (typeof window.DOMPurify !== 'undefined') return window.DOMPurify;
+    if (purifyPromise) return purifyPromise;
+    purifyPromise = 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 {
+                console.error('[Manifest Markdown] DOMPurify failed to load — DOMPurify is undefined');
+                purifyPromise = null;
+                reject(new Error('DOMPurify failed to load'));
+            }
+        };
+        script.onerror = (err) => {
+            console.error('[Manifest Markdown] DOMPurify script failed to load:', err);
+            purifyPromise = null;
+            reject(err);
+        };
+        document.head.appendChild(script);
+    });
+    return purifyPromise;
+}
+
+// Sanitize HTML if the .safe modifier was used; pass-through otherwise.
+// Manifest's default is unsanitized so authors can render arbitrary HTML and
+// the markdown custom-element extensions work — but the .safe opt-in lets
+// authors render data-source content (e.g. user-submitted markdown from
+// Appwrite) without an XSS sink.
+async function maybeSanitizeMarkdownHtml(html, safe) {
+    if (!safe) return html;
+    try {
+        const DOMPurify = await loadDOMPurify();
+        return DOMPurify.sanitize(html, MARKDOWN_PURIFY_CONFIG);
+    } catch {
+        // Loader failure — fall back to escaping rather than silently emitting
+        // un-sanitized HTML. The author asked for safe; honour that.
+        const escaped = String(html)
+            .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        console.warn('[Manifest Markdown] x-markdown.safe: DOMPurify unavailable — emitting escaped text.');
+        return escaped;
+    }
+}
+
 // Load marked.js from CDN
 async function loadMarkedJS() {
     if (typeof marked !== 'undefined') {
@@ -52,6 +114,18 @@ async function loadMarkedJS() {
     return markedPromise;
 }
 
+// HTML-escape a string for safe interpolation inside an attribute value.
+// Used by the code-fence renderer below — title/language strings come from
+// the markdown source, so without escaping a fence like ```js " onclick=alert(1) x="
+// could inject arbitrary attributes onto the <x-code> element.
+function escapeForAttribute(s) {
+    return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+
 // Configure marked to preserve full language strings
 async function configureMarked(marked) {
     marked.use({
@@ -67,10 +141,10 @@ async function configureMarked(marked) {
                 // Build attributes for the x-code element
                 let xCodeAttributes = '';
                 if (attributes.title) {
-                    xCodeAttributes += ` name="${attributes.title}"`;
+                    xCodeAttributes += ` name="${escapeForAttribute(attributes.title)}"`;
                 }
                 if (attributes.language) {
-                    xCodeAttributes += ` language="${attributes.language}"`;
+                    xCodeAttributes += ` language="${escapeForAttribute(attributes.language)}"`;
                 }
                 if (attributes.numbers) {
                     xCodeAttributes += ' numbers';
@@ -158,7 +232,7 @@ async function configureMarked(marked) {
                     parsedContent = marked.parse(token.text);
                 }
 
-                const iconHtml = iconValue ? `<span x-icon="${iconValue}"></span>` : '';
+                const iconHtml = iconValue ? `<span x-icon="${escapeForAttribute(iconValue)}"></span>` : '';
 
                 // Create a temporary div to count top-level elements
                 const temp = document.createElement('div');
@@ -337,6 +411,15 @@ async function initializeMarkdownPlugin() {
                 return;
             }
 
+            // Opt-in sanitization. When `.safe` is on the directive
+            // (`x-markdown.safe="$x.user.bio"`), parsed HTML is run through
+            // DOMPurify before injection. Default is unsanitized — Manifest's
+            // design lets authors render raw HTML and custom-element extensions
+            // (x-code, x-icon, callouts) freely. Use .safe when the markdown
+            // source can contain content from untrusted parties (Appwrite
+            // collections, API responses, crowdsourced translations, etc.).
+            const safe = Array.isArray(modifiers) && modifiers.includes('safe');
+
             // Prerender idempotency: if the page is a prerendered MPA and this
             // element already has rendered HTML children, the content was baked
             // at build time and is authoritative for SEO + no-JS users.  Skip
@@ -394,6 +477,9 @@ async function initializeMarkdownPlugin() {
                     // Post-process HTML to enable checkboxes (remove disabled attribute)
                     html = enableCheckboxes(html);
 
+                    // Apply opt-in DOMPurify sanitization for x-markdown.safe
+                    html = await maybeSanitizeMarkdownHtml(html, safe);
+
                     // Only update if content has changed and isn't empty
                     if (element.innerHTML !== html && html.trim() !== '') {
                         // Create a temporary container to hold the HTML
@@ -567,6 +653,9 @@ async function initializeMarkdownPlugin() {
                     // Post-process HTML to enable checkboxes (remove disabled attribute)
                     html = enableCheckboxes(html);
 
+                    // Apply opt-in DOMPurify sanitization for x-markdown.safe
+                    html = await maybeSanitizeMarkdownHtml(html, safe);
+
                     // Only update DOM if HTML actually changed
                     if (el.innerHTML !== html) {
                         // Create temporary container
@@ -649,6 +738,9 @@ async function initializeMarkdownPlugin() {
                         // Post-process HTML to enable checkboxes (remove disabled attribute)
                         html = html.replace(/<input type="checkbox"([^>]*?)disabled([^>]*?)>/g, '<input type="checkbox"$1$2>');
 
+                        // Apply opt-in DOMPurify sanitization for x-markdown.safe
+                        html = await maybeSanitizeMarkdownHtml(html, safe);
+
                         // Create temporary container
                         const temp = document.createElement('div');
                         temp.innerHTML = html;