mnfst 0.5.80 → 0.5.82

package/LICENSE

@@ -2,7 +2,7 @@
 
 ---
 
-Copyright © 2025 Andrew Matlock
+Copyright © 2026 Andrew Matlock
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/lib/manifest.accordion.css

@@ -29,7 +29,7 @@
             align-items: center;
             padding: var(--spacing-field-padding, 0.625rem) 0;
             font-weight: bold;
-            color: var(--color-content-stark, oklch(16.6% 0.026 267));
+            color: var(--color-content-stark, darkslategray);
             user-select: none;
             cursor: pointer;
             transition: var(--transition, all .05s ease-in-out);
@@ -42,11 +42,11 @@
             }
 
             &:hover {
-                color: color-mix(in oklch, var(--color-surface-1, oklch(98.17% 0.0005 95.87)) 40%, var(--color-content-stark, oklch(16.6% 0.026 267)))
+                color: color-mix(in oklch, var(--color-surface-1, whitesmoke) 40%, var(--color-content-stark, darkslategray))
             }
 
             &:active {
-                color: color-mix(in oklch, var(--color-surface-1, oklch(98.17% 0.0005 95.87)) 50%, var(--color-content-stark, oklch(16.6% 0.026 267)))
+                color: color-mix(in oklch, var(--color-surface-1, whitesmoke) 50%, var(--color-content-stark, darkslategray))
             }
 
             /* Add custom icon */
@@ -55,7 +55,7 @@
                 order: 1;
                 width: 1rem;
                 height: 1rem;
-                background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 50%, 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)) 50%, var(--color-field-inverse, darkslategray));
                 -webkit-mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
                 mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
                 -webkit-mask-repeat: no-repeat;

package/lib/manifest.appwrite.auth.js

@@ -8,6 +8,21 @@
 
 /* Auth config */
 
+// Refuse strings that still contain an unresolved ${VAR} reference. The loader
+// runs window.ManifestDataConfig.interpolateManifest at manifest-load time, so
+// by the time we read these fields the env-var substitution has already been
+// applied. Anything still matching ${VAR} is an undefined env var — passing it
+// to Appwrite would either silently fail or, worse, be sent verbatim as an
+// HTTP header value, leaking the env var name. Loud-fail instead.
+function resolvedOrNull(value, fieldName) {
+    if (typeof value !== 'string') return value;
+    if (/\$\{[^}]+\}/.test(value)) {
+        console.error(`[Manifest Auth] manifest.appwrite.${fieldName} references an undefined env var (${value}). Auth disabled.`);
+        return null;
+    }
+    return value;
+}
+
 // Load manifest if not already loaded (loader may set __manifestLoaded / registry.manifest)
 async function ensureManifest() {
     if (window.ManifestComponentsRegistry?.manifest) {
@@ -34,13 +49,22 @@ async function getAppwriteConfig() {
     }
 
     const appwriteConfig = manifest.appwrite;
-    const endpoint = appwriteConfig.endpoint;
-    const projectId = appwriteConfig.projectId;
-    const devKey = appwriteConfig.devKey; // Optional dev key to bypass rate limits in development
+    const endpoint = resolvedOrNull(appwriteConfig.endpoint, 'endpoint');
+    const projectId = resolvedOrNull(appwriteConfig.projectId, 'projectId');
+    // Optional dev key to bypass rate limits in development. The schema
+    // documents `${VAR_NAME}` interpolation for this field specifically —
+    // refuse to forward a literal placeholder as an HTTP header.
+    const devKey = appwriteConfig.devKey ? resolvedOrNull(appwriteConfig.devKey, 'devKey') : undefined;
 
     if (!endpoint || !projectId) {
         return null;
     }
+    // devKey is optional: if the user supplied one but it failed to resolve,
+    // resolvedOrNull returned null (and logged) — drop the field rather than
+    // initialize Appwrite with a literal `${VAR}` header.
+    if (appwriteConfig.devKey && devKey === null) {
+        return null;
+    }
 
     // Get auth methods from config (defaults to ["magic", "oauth"] if not specified)
     const authMethods = appwriteConfig.auth?.methods || ["magic", "oauth"];
@@ -164,6 +188,27 @@ function initializeAuthStore() {
     // Cross-tab synchronization using localStorage events
     const STORAGE_KEY = 'manifest:auth:state';
 
+    // Whitelist of Appwrite Session fields safe to mirror across tabs.
+    // CRITICALLY excludes `secret` (the bearer credential), `providerAccessToken`,
+    // `providerRefreshToken`, and `providerAccessTokenExpiry`. The cookie set
+    // on the Appwrite domain is the actual auth of record; this localStorage
+    // copy only supports UI cross-tab sync ("someone just logged in here").
+    // An XSS on this origin must not be able to lift session secrets out.
+    const SAFE_SESSION_FIELDS = [
+        '$id', 'userId', 'provider', 'expire', 'current',
+        'clientName', 'osName', 'osCode', 'deviceName',
+        'deviceBrand', 'deviceModel', 'countryCode', 'countryName'
+    ];
+
+    function sanitizeSessionForStorage(session) {
+        if (!session || typeof session !== 'object') return session;
+        const safe = {};
+        for (const f of SAFE_SESSION_FIELDS) {
+            if (f in session) safe[f] = session[f];
+        }
+        return safe;
+    }
+
     // Listen for storage events from other tabs
     window.addEventListener('storage', (e) => {
         if (e.key === STORAGE_KEY && e.newValue) {
@@ -193,7 +238,7 @@ function initializeAuthStore() {
                 isAuthenticated: store.isAuthenticated,
                 isAnonymous: store.isAnonymous,
                 user: store.user,
-                session: store.session,
+                session: sanitizeSessionForStorage(store.session),
                 magicLinkSent: store.magicLinkSent,
                 magicLinkExpired: store.magicLinkExpired,
                 error: store.error
@@ -5769,13 +5814,11 @@ function initializeMagicLinks() {
                     );
 
                     if (isRateLimit) {
-                        // Store callback for retry
-                        try {
-                            sessionStorage.setItem('manifest:magic-link:callback', JSON.stringify({ userId, secret }));
-                        } catch (e) {
-                            // Ignore
-                        }
-                        this.error = 'Rate limit exceeded. Please wait a moment and refresh the page.';
+                        // Don't persist {userId, secret} for retry — the secret is a
+                        // bearer credential that any same-origin XSS could lift. On
+                        // rate limit the user must re-request the magic link from
+                        // their email (cleanupUrl has already stripped URL params).
+                        this.error = 'Rate limit exceeded. Please wait a moment and request a new magic link.';
                         this.isAuthenticated = false;
                         this.isAnonymous = false;
                         this.magicLinkExpired = false;
@@ -5901,15 +5944,10 @@ function handleMagicLinkCallbacks() {
 
         const callbackInfo = event.detail;
 
-        // Store callback for retry if rate limited
-        try {
-            sessionStorage.setItem('manifest:magic-link:callback', JSON.stringify({
-                userId: callbackInfo.userId,
-                secret: callbackInfo.secret
-            }));
-        } catch (e) {
-            console.warn('[Manifest Appwrite Auth] Could not store callback:', e);
-        }
+        // Note: we deliberately do NOT persist {userId, secret} to sessionStorage
+        // as a retry safety net. The secret is a single-use bearer credential
+        // that any same-origin XSS could read; UX of "refresh to retry on rate
+        // limit" isn't worth the credential-exfil risk.
 
         // Handle the callback
         await store.handleMagicLinkCallback(callbackInfo.userId, callbackInfo.secret);
@@ -6247,16 +6285,11 @@ function initializeCallbacks() {
         const secret = urlParams.get('secret');
         const expire = urlParams.get('expire');
 
-        // Check for stored callback (from rate limit retry)
-        let storedCallback = null;
-        try {
-            const stored = sessionStorage.getItem('manifest:magic-link:callback');
-            if (stored) {
-                storedCallback = JSON.parse(stored);
-            }
-        } catch (e) {
-            // Ignore parse errors
-        }
+        // Eagerly clear any stale magic-link credentials left in sessionStorage
+        // by an earlier (pre-fix) Manifest version. We no longer persist them,
+        // and reading stale ones could resurrect a credential that should have
+        // been forgotten.
+        try { sessionStorage.removeItem('manifest:magic-link:callback'); } catch (e) {}
 
         // Check OAuth redirect flag
         const isOAuthCallback = sessionStorage.getItem('manifest:oauth:redirect') === 'true';
@@ -6267,14 +6300,14 @@ function initializeCallbacks() {
         const isTeamInvite = !!(teamId && membershipId && userId && secret);
 
         const callbackInfo = {
-            userId: userId || storedCallback?.userId,
-            secret: secret || storedCallback?.secret,
+            userId: userId,
+            secret: secret,
             expire: expire,
             teamId: teamId,
             membershipId: membershipId,
             isOAuth: isOAuthCallback,
             isTeamInvite: isTeamInvite,
-            hasCallback: !!(userId || storedCallback?.userId) && !!(secret || storedCallback?.secret),
+            hasCallback: !!userId && !!secret,
             hasExpired: !!expire && !userId && !secret
         };
 

package/lib/manifest.avatar.css

@@ -14,8 +14,8 @@
         font-weight: bold;
         text-align: center;
         text-transform: uppercase;
-        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));
         background-clip: content-box;
         background-size: cover;
         background-position: center;
@@ -23,7 +23,7 @@
 
         /* Icon */
         &[x-icon] {
-            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27))
+            color: var(--color-content-subtle, darkgray)
         }
 
         /* Profile pic */
@@ -47,8 +47,8 @@
             width: 9px;
             height: 9px;
             z-index: 1;
-            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
-            border: 1px solid var(--color-page, oklch(100% 0 0));
+            background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
+            border: 1px solid var(--color-page, white);
             border-radius: 50%
         }
     }
@@ -59,7 +59,7 @@
         background-blend-mode: normal;
 
         &: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));
             background-blend-mode: multiply;
 
             & img {
@@ -94,7 +94,7 @@
         padding-inline-end: 1.5ch;
 
         &:hover .avatar {
-            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));
             transition: var(--transition, all .05s ease-in-out)
         }
     }
@@ -107,7 +107,7 @@
 
         :where(.avatar) {
             margin-inline-end: calc(var(--spacing-field-height, 2.25rem) * -0.3);
-            box-shadow: 0 0 0 3px var(--color-page, oklch(100% 0 0))
+            box-shadow: 0 0 0 3px var(--color-page, white)
         }
     }
 }

package/lib/manifest.button.css

@@ -2,7 +2,7 @@
 
 @layer components {
 
-    :where(button:not(.link), [role=button], [type=button], [type=reset], [type=submit], select):not(.unstyle) {
+    :where(button:not(.link), [role=button], [type=button], [type=reset], [type=submit], select):not(code, .unstyle) {
         display: inline-flex;
         flex-flow: row;
         justify-content: center;
@@ -17,13 +17,13 @@
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        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));
         border-width: 0;
         border-style: solid;
         border-color: transparent;
         border-radius: var(--radius, 0.5rem);
-        outline-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
+        outline-color: var(--color-line, color-mix(darkslategray 10%, transparent));
         cursor: pointer;
         transition: var(--transition, all .05s ease-in-out);
         appearance: button;
@@ -52,15 +52,15 @@
         }
 
         &: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))
         }
 
         &:active {
-            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))
         }
 
         &:focus-visible {
-            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
+            background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent))
         }
     }
 

package/lib/manifest.checkbox.css

@@ -16,13 +16,13 @@
         &:checked {
 
             &:hover {
-                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
-                border-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));
+                border-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
             }
 
             &:active {
-                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
-                border-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));
+                border-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
             }
         }
 
@@ -34,7 +34,7 @@
             left: 50%;
             width: 60%;
             height: 60%;
-            background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
+            background-color: var(--color-field-inverse, darkslategray);
             -webkit-mask-image: var(--icon-checkbox, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
             mask-image: var(--icon-checkbox, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
             -webkit-mask-repeat: no-repeat;