mnfst 0.5.165 → 0.5.167

package/lib/manifest.css

@@ -945,6 +945,217 @@
     }
 }
 
+/* Manifest Chat */
+
+@layer utilities {
+
+    :where(.chat-wrapper) {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        width: 100%;
+        height: 100%;
+        box-shadow: var(--shadow);
+        overflow: hidden;
+
+        /* Chat log scroll container. column-reverse pins the view to the
+           bottom natively: new messages and a growing composer never hide
+           the latest message, and reading history isn't yanked on updates. */
+        :where([role="log"]) {
+            display: flex;
+            flex-direction: column-reverse;
+            flex: 1;
+            font-size: 0.875rem;
+            overflow-y: auto;
+
+            /* Message column */
+            > :where(div) {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-end;
+                gap: 2rem;
+                min-height: 100%;
+                width: calc(var(--spacing-content-width, 74rem) - 4rem);
+                max-width: 100%;
+                margin-inline-start: auto;
+                margin-inline-end: auto;
+                padding-inline-start: 1rem;
+                padding-inline-end: 1rem;
+                padding-block-start: 1.5rem;
+                padding-block-end: 5rem;
+            }
+
+            /* Messages */
+            :where(div div) {
+
+                /* Markdown spacing */
+                :where(p) {
+                    margin-block: 0.5rem;
+                }
+
+                :where(p:first-child) {
+                    margin-block-start: 0;
+                }
+
+                :where(p:last-child) {
+                    margin-block-end: 0;
+                }
+            }
+
+            /* Own messages */
+            :where([data-own]) {
+                width: fit-content;
+                max-width: calc(var(--spacing-content-width, 74rem) - 10rem);
+                margin-inline-start: auto;
+                padding-block: 0.5rem;
+                padding-inline: 0.75rem;
+                background: color-mix(in oklch, var(--color-surface-2) 50%, transparent);
+                border-radius: var(--radius);
+            }
+
+            /* Attachments */
+            :where(img, video) {
+                display: block;
+                max-width: 20rem;
+                max-height: 15rem;
+                margin-block: 0.5rem;
+                border-radius: var(--radius);
+            }
+
+            :where(audio) {
+                display: block;
+                width: 18rem;
+                max-width: 100%;
+                margin-block: 0.5rem;
+            }
+
+            :where(a[download]) {
+                display: inline-flex;
+                align-items: center;
+                gap: 0.4rem;
+                margin-block: 0.5rem;
+                padding-block: 0.35rem;
+                padding-inline: 0.6rem;
+                background: var(--color-surface-2);
+                border-radius: var(--radius);
+            }
+        }
+
+        /* Chat input */
+        :where(form) {
+            position: relative;
+            width: var(--spacing-content-width, 74rem);
+            max-width: 100%;
+            margin-inline-start: auto;
+            margin-inline-end: auto;
+
+            :where(textarea) {
+                padding-inline-end: 2.5rem;
+                field-sizing: content;
+                resize: none;
+            }
+
+            &:has(button[data-action="attach"]) :where(textarea) {
+                padding-inline-start: 2.5rem;
+            }
+
+            /* Submit button */
+            :where(button[type="submit"]) {
+                position: absolute;
+                bottom: var(--spacing-field-padding, 0.625rem);
+                inset-inline-end: calc(var(--spacing-field-padding, 0.625rem) * 1.3);
+            }
+
+            /* Toolbar buttons (data-action) — attach, formatting, voice, … */
+            :where(button[data-action="attach"]) {
+                position: absolute;
+                bottom: var(--spacing-field-padding, 0.625rem);
+                inset-inline-start: calc(var(--spacing-field-padding, 0.625rem) * 1.3);
+            }
+
+            /* Composer variant — the form itself is the field (.textarea):
+               [ attachment thumbnails               ]
+               [ attach | growing textarea |    send ] */
+            &:where(.textarea) {
+                display: grid;
+                grid-template-columns: auto 1fr auto;
+                align-items: end;
+                gap: 0.25rem;
+                padding: 0.375rem;
+
+                /* Buttons sit in-flow at the row's bottom corners */
+                :where(button[type="submit"], button[data-action]) {
+                    position: static;
+                }
+
+                /* The inner textarea is a bare well inside the field */
+                :where(textarea) {
+                    padding-inline: 0.25rem;
+                    padding-block: 0.45rem;
+
+                    &,
+                    &:hover,
+                    &:active,
+                    &:focus-visible {
+                        background: transparent;
+                    }
+                }
+
+                /* Attachment thumbnails — removable, X-scrollable */
+                :where(menu) {
+                    grid-column: 1 / -1;
+                    display: flex;
+                    gap: 0.5rem;
+                    margin: 0;
+                    padding: 0.375rem 0.25rem 0.125rem;
+                    list-style: none;
+                    overflow-x: auto;
+
+                    :where(li) {
+                        position: relative;
+                        flex: 0 0 auto;
+                    }
+
+                    :where(img) {
+                        display: block;
+                        width: 3.5rem;
+                        height: 3.5rem;
+                        object-fit: cover;
+                        border-radius: calc(var(--radius, 0.5rem) * 0.75);
+                    }
+
+                    /* Non-image attachments — file chip */
+                    :where(li > span) {
+                        display: flex;
+                        align-items: center;
+                        gap: 0.3rem;
+                        height: 3.5rem;
+                        padding-inline: 0.6rem;
+                        font-size: 0.75rem;
+                        white-space: nowrap;
+                        background: var(--color-surface-2);
+                        border-radius: calc(var(--radius, 0.5rem) * 0.75);
+                    }
+
+                    /* Remove button — revealed on hover/focus */
+                    :where(button) {
+                        position: absolute;
+                        inset-block-start: -0.35rem;
+                        inset-inline-end: -0.35rem;
+                        opacity: 0;
+                        transition: var(--transition, all .05s ease-in-out);
+                    }
+
+                    :where(li:hover, li:focus-within) :where(button) {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+
+}
+
 /* Manifest Checkboxes */
 
 @layer components {
@@ -1582,16 +1793,25 @@
         gap: var(--spacing, 0.25rem);
         max-width: 100%;
         height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
+        margin: 0;
+        padding: 0;
         padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
         font-size: 0.875rem;
+        line-height: normal;
         color: var(--color-content-stark, oklch(43.9% 0 0));
         background-color: var(--color-popover-surface, oklch(100% 0 0));
+        border: 0;
         border-radius: calc(var(--radius, 0.5rem) * 0.7);
         overflow: hidden;
         user-select: none;
 
         /* Label */
         &>span {
+            min-width: 0;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font: inherit;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap
@@ -1602,15 +1822,23 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
+            box-sizing: border-box;
+            flex: none;
+            width: auto !important;
             min-width: 0;
+            max-width: none;
             height: 100%;
+            min-height: 0;
             aspect-ratio: 1 / 1;
+            margin: 0;
             padding: 0;
+            border: 0;
+            border-radius: 0;
             font-size: 1em;
             line-height: 1;
             color: var(--color-content-neutral, oklch(43.9% 0 0));
             background: transparent;
-            border-radius: 0;
+            box-shadow: none;
             cursor: pointer;
 
             &:hover {
@@ -3107,7 +3335,7 @@
 
 @layer components {
 
-    :where(input:not([type=range], [type=color]), textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
+    :where(input:not([type=range], [type=color]), textarea, .textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
         width: 100%;
         max-width: 100%;
         color: var(--color-field-inverse, oklch(43.9% 0 0));
@@ -3226,7 +3454,7 @@
     }
 
     /* Textarea-specific styles */
-    :where(textarea):not(.unstyle) {
+    :where(textarea, .textarea):not(.unstyle) {
         display: block;
         height: auto;
         padding: var(--spacing-field-padding, 0.625rem) calc(var(--spacing-field-padding, 0.625rem) * 1.3)

package/lib/manifest.input.css

@@ -2,7 +2,7 @@
 
 @layer components {
 
-    :where(input:not([type=range], [type=color]), textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
+    :where(input:not([type=range], [type=color]), textarea, .textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
         width: 100%;
         max-width: 100%;
         color: var(--color-field-inverse, oklch(43.9% 0 0));
@@ -121,7 +121,7 @@
     }
 
     /* Textarea-specific styles */
-    :where(textarea):not(.unstyle) {
+    :where(textarea, .textarea):not(.unstyle) {
         display: block;
         height: auto;
         padding: var(--spacing-field-padding, 0.625rem) calc(var(--spacing-field-padding, 0.625rem) * 1.3)

package/lib/manifest.integrity.json

@@ -1,9 +1,9 @@
 {
-  "manifest.appwrite.auth.js": "sha384-+4T3vdzf2NsDrSpatkIqg7cO2HUnY3tNNwSgfyXCCU0NZ7K9eqX2dzhDJIlochlz",
+  "manifest.appwrite.auth.js": "sha384-IFEn8+AMicdf5DkS+ytkPls8CpW2kDelRWrL3M61cu1HqaTJvHmABQUPgIMJC/tc",
   "manifest.appwrite.data.js": "sha384-KFKVo5TQESLJB7wgk+C8Zb/sAl43QAMdioWW3tQRWYq5umfdpGCZ5Hld9y9f6/Np",
   "manifest.appwrite.presences.js": "sha384-JyVDWFT69b7Svq8J8p9tNWe2v9PZNQBY5UyhtOl1vnuHFAX0CRQ3MA9SiKq5wzNh",
   "manifest.charts.js": "sha384-wTQlB3hJ9V9lmisCgm8l6YkpJV+nA4+Vci3dI0x1nBtWnS9TFr+eXaJelP7AusyD",
-  "manifest.chat.js": "sha384-HDyzPvNxqUOKVcLC3HNSFd5w83Flgm58LHy1BDLB9ejUsbYHAmr34G4X3FwKXokW",
+  "manifest.chat.js": "sha384-3+eva9YYz5DrdS3DeRGw9oXH/CreuYX+ZHHtYP25vmnYDHiEpFf9nEGLvwSHBXjz",
   "manifest.code.js": "sha384-G3MNfvQRWWY+gm4SGGrSsgQbDeil9MP+ON2DTk6Rcq9Nsex8woHMDt5EJHrFH0Nj",
   "manifest.color.js": "sha384-6Rv3LxyTcZNjrhtayQfqRdCx0uSZ4BiEbgEI98I62eTvp8Aw7LBIoNJ0Je1oktwL",
   "manifest.colorpicker.js": "sha384-N5ezEwgKrDodV4YdURxhdyZKmg1n/QhqvmAC4SEG03mw1pEAZAA8Gphp+NLAOxts",
@@ -29,5 +29,5 @@
   "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
   "manifest.utilities.js": "sha384-MtzNaVOrgyepjlY5nz38pAJk67yiFPU1H5WoPNfcNbUZTXy+oin1lrtKCIcobEOJ",
   "manifest.virtual.js": "sha384-c194pXD0Ld48QJ+HPVNibvbn54/ETJRuYhUOWesEBjtOIQcQMIKo0DnCyQMvDlLg",
-  "manifest.js": "sha384-VshJgT9QAxsLpwNmQZfrxw/EAxoyLIklo0DsmhxLhjVmmT70fLmn5eNRuq98o6zs"
+  "manifest.js": "sha384-RusFaByZu31LkLZCAhjgtJC8iWksvmjTKS8D5Xj9/4N7B/Xr4DDyFGmiL23kajgK"
 }

package/lib/manifest.js

@@ -202,11 +202,29 @@
 
 	// Configuration
 	const DEFAULT_VERSION = 'latest';
-	const ALPINE_CDN_URL = 'https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js';
+
+	// CDN fallback chain (first-party first). Each origin serves the npm scheme
+	// `<origin>/<pkg>@<version>/<path>`. Override order with `data-cdn`
+	// (comma-separated origins).
+	let CDN_HOSTS = [
+		'https://cdn.manifestx.dev/npm',
+		'https://cdn.jsdelivr.net/npm',
+		'https://unpkg.com'
+	];
+	function setCdnHosts(value) {
+		if (!value) return;
+		const hosts = value.split(',').map(s => s.trim().replace(/\/$/, '')).filter(Boolean);
+		if (hosts.length) CDN_HOSTS = hosts;
+	}
+
+	// unpkg serves packages as published (no auto-minify); mnfst ships unminified .js.
+	function hostFile(host, file) {
+		return host.includes('unpkg.com') ? file.replace(/\.min\.js$/, '.js') : file;
+	}
 
 	// Get base URL for a given version
-	function getBaseUrl(version = DEFAULT_VERSION) {
-		return `https://cdn.jsdelivr.net/npm/mnfst@${version}/lib`;
+	function getBaseUrl(version = DEFAULT_VERSION, host = CDN_HOSTS[0]) {
+		return `${host}/mnfst@${version}/lib`;
 	}
 
 	// Available core plugins (auto-loaded if no data-plugins specified)
@@ -279,26 +297,29 @@
 		});
 	}
 
-	// Plugin URL: `data-plugin-base` override → unminified `.js`; else the
-	// jsDelivr CDN as `.min.js`.
+	// Plugin URLs: `data-plugin-base` override → single unminified `.js` (no
+	// fallback — an explicit base, e.g. local dev, must fail loudly); else one
+	// candidate per CDN host, tried in order.
 	let _pluginBase = null;
 	function setPluginBase(b) { _pluginBase = b || null; }
-	function getPluginUrl(pluginName, version = DEFAULT_VERSION) {
+	function getPluginUrlCandidates(pluginName, version = DEFAULT_VERSION) {
 		// Hyphenated API name → dotted file name (`appwrite-auth` → appwrite.auth).
 		const fileName = pluginName.replace(/-/g, '.');
 		if (_pluginBase) {
 			const base = _pluginBase.replace(/\/$/, '');
-			return `${base}/manifest.${fileName}.js`;
+			return [`${base}/manifest.${fileName}.js`];
 		}
-		const base = getBaseUrl(version);
-		return `${base}/manifest.${fileName}.min.js`;
+		return CDN_HOSTS.map(h => `${getBaseUrl(version, h)}/${hostFile(h, `manifest.${fileName}.min.js`)}`);
+	}
+	function getPluginUrl(pluginName, version = DEFAULT_VERSION) {
+		return getPluginUrlCandidates(pluginName, version)[0];
 	}
 
-	// Resolve Alpine CDN URL from a data-alpine value (version tag or full URL)
-	function resolveAlpineUrl(dataAlpine) {
-		if (!dataAlpine) return ALPINE_CDN_URL;
-		if (dataAlpine.startsWith('http')) return dataAlpine;
-		return `https://cdn.jsdelivr.net/npm/alpinejs@${dataAlpine}/dist/cdn.min.js`;
+	// Alpine URL candidates from a data-alpine value (version tag or full URL)
+	function alpineUrlCandidates(dataAlpine) {
+		if (dataAlpine && dataAlpine.startsWith('http')) return [dataAlpine];
+		const v = dataAlpine || '3';
+		return CDN_HOSTS.map(h => `${h}/alpinejs@${v}/dist/cdn.min.js`);
 	}
 
 	// Has DOMContentLoaded fired? readyState can't tell ('interactive' spans
@@ -331,7 +352,7 @@
 	// fire `alpine:init` before the page's registrations exist. DCL fires only
 	// after every deferred script runs, making the order deterministic (and cold
 	// cache is already past DCL, so no added delay).
-	function loadAlpine(alpineUrl = ALPINE_CDN_URL) {
+	function loadAlpine(alpineUrls) {
 		whenDomReady(() => {
 			if (window.Alpine) {
 				return;
@@ -343,24 +364,30 @@
 				return;
 			}
 
-			const script = document.createElement('script');
-			script.src = alpineUrl;
-			// No `defer` — past DCL, so execute as soon as it arrives.
-			document.head.appendChild(script);
+			// Past DCL, so each candidate executes as soon as it arrives; fall
+			// through the CDN chain on error.
+			(async () => {
+				for (const url of alpineUrls) {
+					try {
+						return await injectScript(url);
+					} catch (_) {
+						console.warn(`[Manifest Loader] Alpine failed from ${url} — trying fallback CDN`);
+					}
+				}
+				console.error('[Manifest Loader] Alpine.js failed to load from all CDNs.');
+			})();
 		});
 	}
 
-	// Add a script tag to the head and wait for it to load and execute
-	function addScript(pluginName, version = DEFAULT_VERSION) {
+	// Inject one script URL and wait for it to load and execute
+	function injectScript(url) {
 		return new Promise((resolve, reject) => {
-			const url = getPluginUrl(pluginName, version);
-
 			// Skip if script with same src already in DOM (e.g. prerendered HTML or second loader run)
 			const existing = document.querySelector(`script[src="${url}"]`);
 			if (existing) {
 				if (existing.complete) return resolve();
 				existing.addEventListener('load', () => resolve());
-				existing.addEventListener('error', () => reject(new Error(`Failed to load ${pluginName} from ${url}`)));
+				existing.addEventListener('error', () => reject(new Error(`Failed to load ${url}`)));
 				return;
 			}
 
@@ -368,11 +395,28 @@
 			script.src = url;
 			script.async = false; // Ensure scripts execute in order
 			script.onload = () => resolve();
-			script.onerror = () => reject(new Error(`Failed to load ${pluginName} from ${url}`));
+			script.onerror = () => { script.remove(); reject(new Error(`Failed to load ${url}`)); };
 			document.head.appendChild(script);
 		});
 	}
 
+	// Load a plugin, falling through the CDN chain on error. A fallback insert
+	// lands after already-inserted scripts, so strict cross-plugin execution
+	// order is traded for availability in the (already degraded) fallback case.
+	async function addScript(pluginName, version = DEFAULT_VERSION) {
+		const urls = getPluginUrlCandidates(pluginName, version);
+		let lastErr = null;
+		for (const url of urls) {
+			try {
+				return await injectScript(url);
+			} catch (e) {
+				lastErr = e;
+				if (urls.length > 1) console.warn(`[Manifest Loader] ${url} failed — trying fallback CDN`);
+			}
+		}
+		throw lastErr || new Error(`Failed to load ${pluginName}`);
+	}
+
 	// Resolve plugin dependencies (auto-inject required dependencies)
 	function resolveDependencies(pluginList) {
 		const resolved = [];
@@ -435,6 +479,15 @@
 		return [];
 	}
 
+	// Detect the chat plugin from manifest.json content.
+	// Opt-in / auto-loaded when an `ai` (or `chat`) config block is present.
+	function detectChatPlugins(manifest) {
+		if (!manifest || typeof manifest !== 'object') return [];
+		if ((manifest.ai && typeof manifest.ai === 'object') ||
+			(manifest.chat && typeof manifest.chat === 'object')) return ['chat'];
+		return [];
+	}
+
 	// Parse data attributes
 	function parseDataAttributes() {
 		// Try to get current script first, then fall back to querySelector
@@ -455,6 +508,8 @@
 		// Override: resolve plugin URLs against this base (dir serving
 		// `manifest.<name>.js`, relative or absolute) instead of the CDN.
 		const pluginBase = script.getAttribute('data-plugin-base');
+		// Override: custom CDN fallback chain (comma-separated origins).
+		const cdn = script.getAttribute('data-cdn');
 
 		let pluginList = [];
 		const deriveFromManifest = !plugins;
@@ -483,37 +538,29 @@
 			version,
 			alpine,
 			pluginBase,
+			cdn,
 		};
 	}
 
-	// Load custom Tailwind CDN script
-	function loadTailwind(version = DEFAULT_VERSION) {
-		return new Promise((resolve, reject) => {
-			const base = getBaseUrl(version);
-			const tailwindUrl = `${base}/manifest.tailwind.min.js`;
-
-			// Check if already loaded
-			const existing = document.querySelector(`script[src="${tailwindUrl}"]`);
-			if (existing && existing.complete) {
-				return resolve();
+	// Load custom Tailwind CDN script, falling through the CDN chain on error
+	async function loadTailwind(version = DEFAULT_VERSION) {
+		const urls = CDN_HOSTS.map(h => `${getBaseUrl(version, h)}/${hostFile(h, 'manifest.tailwind.min.js')}`);
+		let lastErr = null;
+		for (const url of urls) {
+			try {
+				return await injectScript(url);
+			} catch (e) {
+				lastErr = e;
 			}
-
-			const script = document.createElement('script');
-			script.src = tailwindUrl;
-			script.async = false;
-			script.onload = () => resolve();
-			script.onerror = () => {
-				console.warn(`[Manifest Loader] Tailwind plugin not yet published to CDN. Load it directly: <script src="/scripts/tailwind.v4.3.1.js"></script>`);
-				reject(new Error(`Tailwind plugin not available from CDN. Load it directly from your project.`));
-			};
-			document.head.appendChild(script);
-		});
+		}
+		console.warn(`[Manifest Loader] Tailwind plugin not available from any CDN. Load it directly: <script src="/scripts/tailwind.v4.3.1.js"></script>`);
+		throw lastErr || new Error(`Tailwind plugin not available from CDN.`);
 	}
 
 	// Expose API
 	window.Manifest = {
 		loadPlugin: function (pluginName, version = DEFAULT_VERSION) {
-			const allPlugins = [...AVAILABLE_PLUGINS, ...APPWRITE_PLUGINS, 'payments'];
+			const allPlugins = [...AVAILABLE_PLUGINS, ...APPWRITE_PLUGINS, 'payments', 'chat'];
 			if (!allPlugins.includes(pluginName)) {
 				console.warn(`[Manifest Loader] Unknown plugin: ${pluginName}`);
 				return Promise.reject(new Error(`Unknown plugin: ${pluginName}`));
@@ -532,6 +579,7 @@
 	// Parse config and load plugins
 	const config = parseDataAttributes();
 	if (config && config.pluginBase) setPluginBase(config.pluginBase);
+	if (config && config.cdn) setCdnHosts(config.cdn);
 
 	if (config && config.plugins.length > 0) {
 		if (window.__manifestLoaderStarted) {
@@ -605,7 +653,8 @@
 				const corePlugins = getDefaultPluginsFromManifest(manifest);
 				const appwritePlugins = detectAppwritePlugins(manifest);
 				const paymentsPlugins = detectPaymentsPlugins(manifest);
-				pluginsToLoad = resolveDependencies([...corePlugins, ...appwritePlugins, ...paymentsPlugins]);
+				const chatPlugins = detectChatPlugins(manifest);
+				pluginsToLoad = resolveDependencies([...corePlugins, ...appwritePlugins, ...paymentsPlugins, ...chatPlugins]);
 			} else {
 				const needsManifest = config.plugins.some(p => MANIFEST_DEPENDENT_PLUGINS.includes(p));
 				if (needsManifest) {
@@ -634,7 +683,7 @@
 					window.ManifestComponentsRegistry.manifest = manifest;
 				}
 			}
-			loadAlpine(resolveAlpineUrl(config.alpine));
+			loadAlpine(alpineUrlCandidates(config.alpine));
 		};
 
 		loadPlugins();