mnfst 0.5.163 → 0.5.164

package/lib/manifest.components.js

@@ -66,6 +66,8 @@ window.ManifestComponentsRegistry = {
                 });
                 if (res.ok) {
                     manifest = await res.json();
+                    // No-loader path: resolve ${VAR} placeholders the dynamic loader would have.
+                    window.ManifestDataConfig?.interpolateManifest?.(manifest);
                 } else {
                     console.warn('[Manifest] Failed to load manifest.json (HTTP', res.status + ')');
                 }
@@ -151,16 +153,9 @@ window.ManifestComponentsLoader = {
 
 // Components processor
 
-// Escape a string so it's safe to interpolate inside a single-quoted JS
-// string AND inside backtick template literals. The original escape covered
-// the single-quote + whitespace cases but missed three vectors that matter
-// when component templates use backtick literals (e.g. x-text="`Hi $modify('n')`"):
-//   - `\`  → a trailing backslash would escape the closing quote
-//   - `` ` `` → terminates a backtick template literal
-//   - `${` → opens an interpolation that Alpine evaluates as JS
-// Without escaping those, a bound value like `${alert(1)}` from a data
-// source becomes code execution inside the wrapping template literal.
-// Backslash must be escaped FIRST so the other replacements don't compound.
+// Escape a value for safe interpolation in single-quoted JS strings AND
+// backtick template literals. Backslash, backtick, and ${ must be escaped or a
+// bound value like `${alert(1)}` becomes code execution; escape backslash FIRST.
 function escapeForSingleQuotedJsString(s) {
     return String(s)
         .replace(/\\/g, '\\\\')
@@ -184,8 +179,7 @@ window.ManifestComponentsProcessor = {
             return;
         }
         if (element.hasAttribute('data-pre-rendered') || element.hasAttribute('data-processed')) {
-            // Pre-rendered components skip re-fetching, but hydrate-marked content
-            // still needs Alpine initialization (x-data, @click, :class, x-color etc.).
+            // Pre-rendered content skips re-fetch but still needs Alpine init.
             if (element.hasAttribute('data-pre-rendered') && window.Alpine && typeof window.Alpine.initTree === 'function') {
                 try { window.Alpine.initTree(element); } catch (e) { /* graceful */ }
             }
@@ -226,10 +220,10 @@ window.ManifestComponentsProcessor = {
         const props = {};
         Array.from(element.attributes).forEach(attr => {
             if (attr.name !== name && attr.name !== 'class' && !attr.name.startsWith('data-')) {
-                // Store both original case and lowercase for flexibility
+                // Store original case and lowercase
                 props[attr.name] = attr.value;
                 props[attr.name.toLowerCase()] = attr.value;
-                // For Alpine bindings (starting with :), also store without the : prefix
+                // Alpine bindings (:foo): also store without the colon
                 if (attr.name.startsWith(':')) {
                     const keyWithoutColon = attr.name.substring(1);
                     props[keyWithoutColon] = attr.value;
@@ -292,32 +286,25 @@ window.ManifestComponentsProcessor = {
                                         if (!val || val.trim() === '' || /^[\r\n\t\s]+$/.test(val)) {
                                             return value.includes('||') ? 'null' : "''";
                                         }
-                                        // If value starts with $, it's an Alpine expression - don't quote
+                                        // $-prefixed values are Alpine expressions — don't quote.
                                         if (val.startsWith('$')) {
-                                            // Special handling for x-for, x-if, and x-show with $x data source expressions
-                                            // Add safe fallbacks to prevent errors during initial render when data source hasn't loaded yet
+                                            // Guard $x data-source expressions on x-for/if/show against
+                                            // errors before the source loads: optional-chain + fallback.
                                             if ((attr.name === 'x-for' || attr.name === 'x-if' || attr.name === 'x-show') && val.startsWith('$x') && !val.includes('??')) {
-                                                // Convert regular property access dots to optional chaining for safe navigation
                                                 let safeVal = val.replace(/\./g, '?.');
-                                                // Add fallback based on directive type (only if user hasn't already provided one)
                                                 if (attr.name === 'x-for') {
-                                                    // x-for needs an iterable, so fallback to empty array
                                                     return `${safeVal} ?? []`;
                                                 } else {
-                                                    // x-if and x-show evaluate to boolean, fallback to false
                                                     return `${safeVal} ?? false`;
                                                 }
                                             }
                                             return val;
                                         }
-                                        // Special handling for x-for, x-if, and x-show - these can contain expressions
-                                        // that reference data sources or other dynamic content
+                                        // x-for/if/show can hold expressions (e.g. "card in $x.data.items") — preserve as-is.
                                         if (attr.name === 'x-for' || attr.name === 'x-if' || attr.name === 'x-show') {
-                                            // For these directives, preserve the value as-is to allow Alpine to evaluate it
-                                            // This is critical for x-for expressions like "card in $x.data.items"
                                             return val;
                                         }
-                                        // Always quote string values to ensure they're treated as strings, not variables
+                                        // Quote everything else so it's treated as a string.
                                         return `'${escapeForSingleQuotedJsString(val)}'`;
                                     }
                                 );
@@ -369,19 +356,16 @@ window.ManifestComponentsProcessor = {
                 rootElement.setAttribute('data-component', instanceId);
             }
         });
-        // After rendering, copy all attributes from the original placeholder to the first top-level element
-        // Note: This block ensures the first element has all attributes, including those that might have been
-        // skipped by the first loop due to conditions. Classes are already handled in the first loop, so we skip them here.
+        // Copy any placeholder attributes the first loop skipped onto the first
+        // root element (classes already handled there, so skip them).
         if (topLevelElements.length > 0) {
             const firstRoot = topLevelElements[0];
             Array.from(element.attributes).forEach(attr => {
-                // Skip attributes that were already handled in the first loop
-                // Classes are always handled in the first loop, so skip them here to avoid duplication
                 if (attr.name === 'class') {
-                    return; // Skip - already handled in first loop
+                    return;
                 }
 
-                // Preserve important attributes including data-order, x-route, and other routing/data attributes
+                // Routing/data attributes to preserve
                 const preserveAttributes = [
                     'data-order', 'x-route', 'data-component', 'data-head',
                     'x-route-*', 'data-route-*', 'x-tabpanel'
@@ -396,32 +380,25 @@ window.ManifestComponentsProcessor = {
                     (attr.name !== name && !attr.name.startsWith('data-')) ||
                     attr.name === 'data-order' || attr.name === 'x-route' || attr.name === 'data-head';
 
-                // Only apply if: (1) it wasn't handled in first loop, OR (2) it should be preserved, AND (3) it's not in the skip list
+                // Apply if unhandled or preserved, and not in the skip list.
                 if ((!alreadyHandledInFirstLoop || shouldPreserve) &&
                     !['data-original-placeholder', 'data-pre-rendered', 'data-processed'].includes(attr.name)) {
                     if (attr.name.startsWith('x-') || attr.name.startsWith(':') || attr.name.startsWith('@')) {
-                        // For Alpine directives, merge if they already exist (for x-data, combine objects)
+                        // x-data: merge two object literals; otherwise replace.
                         if (attr.name === 'x-data' && firstRoot.hasAttribute('x-data')) {
-                            // For x-data, we need to merge the objects - this is complex, so for now we'll append
-                            // The user should structure their x-data to avoid conflicts
                             const existing = firstRoot.getAttribute('x-data');
-                            // If both are objects, try to merge them
                             if (existing.trim().startsWith('{') && attr.value.trim().startsWith('{')) {
-                                // Remove outer braces and merge
                                 const existingContent = existing.trim().slice(1, -1).trim();
                                 const newContent = attr.value.trim().slice(1, -1).trim();
                                 const merged = `{ ${existingContent}${existingContent && newContent ? ', ' : ''}${newContent} }`;
                                 firstRoot.setAttribute('x-data', merged);
                             } else {
-                                // If not both objects, replace (user should handle this case)
                                 firstRoot.setAttribute(attr.name, attr.value);
                             }
                         } else {
-                            // For other Alpine directives, replace if they exist
                             firstRoot.setAttribute(attr.name, attr.value);
                         }
                     } else {
-                        // For other attributes, replace if they exist
                         firstRoot.setAttribute(attr.name, attr.value);
                     }
                 }
@@ -435,18 +412,14 @@ window.ManifestComponentsProcessor = {
         const fragment = document.createDocumentFragment();
         topLevelElements.forEach(el => fragment.appendChild(el));
 
-        // Replace the placeholder element with the component content
-        // Alpine will auto-initialize on DOM insertion, but we need to ensure
-        // magic methods are ready first. If data plugin is ready, give it a tick
-        // to ensure Alpine has processed the magic method registration.
         parent.replaceChild(fragment, element);
 
-        // Manually initialize Alpine on the swapped-in elements after ensuring
-        // magic methods are available. This prevents "i is not a function" errors.
+        // Manually init Alpine on the swapped-in elements once magic methods are
+        // ready — prevents "i is not a function" errors.
         if (window.Alpine && typeof window.Alpine.initTree === 'function') {
             const initAlpine = () => {
-                // CRITICAL: Ensure auth convenience methods are initialized before Alpine evaluates expressions
-                // This prevents "$auth.isCreatingTeam is not a function" errors after idle/reinitialization
+                // Init auth convenience methods before Alpine evaluates expressions,
+                // else "$auth.isCreatingTeam is not a function" after reinit.
                 if (window.ManifestAppwriteAuthTeamsConvenience && window.ManifestAppwriteAuthTeamsConvenience.initialize) {
                     try {
                         const authStore = window.Alpine.store('auth');
@@ -458,10 +431,8 @@ window.ManifestComponentsProcessor = {
                     }
                 }
 
-                // Re-initialize Alpine on the swapped elements
-                // This ensures magic methods are available when expressions are evaluated
                 topLevelElements.forEach(el => {
-                    if (!el.__x) { // Only init if not already initialized
+                    if (!el.__x) {
                         try {
                             window.Alpine.initTree(el);
                         } catch (e) {
@@ -471,7 +442,7 @@ window.ManifestComponentsProcessor = {
                 });
             };
 
-            // If data plugin is ready, wait a tick to ensure magic method is processed
+            // If the data plugin is ready, wait a tick for its magic method.
             if (window.__manifestDataMagicRegistered) {
                 if (window.Alpine.nextTick) {
                     window.Alpine.nextTick(initAlpine);
@@ -479,18 +450,16 @@ window.ManifestComponentsProcessor = {
                     setTimeout(initAlpine, 0);
                 }
             } else {
-                // Data plugin not ready, initialize immediately (will fail gracefully)
                 initAlpine();
             }
         }
 
-        // Execute scripts after component is rendered
+        // Execute component scripts after render (small delay for the DOM swap)
         if (scripts.length > 0) {
-            // Use a small delay to ensure DOM is updated
             setTimeout(() => {
                 scripts.forEach(script => {
                     if (script.src) {
-                        // External script - create and append to head
+                        // External script → append to head
                         const scriptEl = document.createElement('script');
                         scriptEl.src = script.src;
                         scriptEl.type = script.type;
@@ -498,9 +467,8 @@ window.ManifestComponentsProcessor = {
                         if (script.defer) scriptEl.defer = true;
                         document.head.appendChild(scriptEl);
                     } else if (script.content) {
-                        // Inline script - execute directly
+                        // Inline script → run in global scope
                         try {
-                            // Create a function to execute the script in the global scope
                             const executeScript = new Function(script.content);
                             executeScript();
                         } catch (error) {
@@ -799,25 +767,7 @@ window.ManifestComponentsMutation = {
     }
 }; 
 
-// Components — route-level prefetch.
-//
-// Two enhancements that run on top of the existing on-encounter loader:
-//
-//   1. Parallel batch on route change. When manifest:route-change fires,
-//      scan the [x-route] subtrees that match the new route and call
-//      loadComponent() on every <x-*> tag inside them. The loader
-//      deduplicates fetches, so calling it for components that the
-//      regular swapping logic is already mounting is harmless — but
-//      pre-issuing in parallel saves 50–200 ms vs. one-by-one fetches.
-//
-//   2. Prefetch on hover. When the pointer enters an internal <a href>,
-//      derive the target pathname, find the [x-route] subtree(s) that
-//      would match it, and prefetch their components. By the time the
-//      user clicks the link, the components are warm in the loader's
-//      cache and navigation feels instant.
-//
-// Both phases require zero author configuration. Manifest auto-discovers
-// what to prefetch from the existing [x-route] DOM structure.
+/* Manifest Components — route-level prefetch (batch on route change + on hover) */
 
 (function () {
     'use strict';
@@ -825,20 +775,15 @@ window.ManifestComponentsMutation = {
     // <x-*> tag pattern — lowercase, hyphenated.
     const TAG_RE = /^x-[a-z][a-z0-9-]*$/;
 
-    // Framework-provided web components (registered by Manifest plugins
-    // themselves, not as project components in manifest.json). Skip these
-    // when scanning for project components to prefetch.
+    // Framework web components (not project components) — skip when scanning.
     const FRAMEWORK_TAGS = new Set(['code', 'code-group']);
 
-    // Anchors we've already issued a hover-prefetch for. WeakSet so DOM
-    // garbage-collects naturally as elements leave the tree.
+    // Anchors already hover-prefetched. WeakSet so detached nodes GC naturally.
     const prefetchedAnchors = new WeakSet();
 
     function loader() { return window.ManifestComponentsLoader; }
 
-    // Match a single route pattern against a normalized pathname (no
-    // leading/trailing slashes, '/' represented as '/'). Mirrors the
-    // router visibility logic so prefetch targets the same subtrees.
+    // Match a route pattern against a normalized pathname. Mirrors router visibility.
     function routeMatches(routeValue, pathname) {
         const pieces = String(routeValue || '').split(',').map((s) => s.trim()).filter(Boolean);
         let matched = false;
@@ -877,10 +822,7 @@ window.ManifestComponentsMutation = {
     function discoverComponentNames(root) {
         const names = new Set();
         if (!root || !root.querySelectorAll) return names;
-        // querySelectorAll('*') is the fastest path for "every descendant".
-        // We filter by tag name in JS — there's no CSS selector for "tag
-        // name starts with x-". A page typically has a few thousand nodes,
-        // which scans in well under a millisecond.
+        // No CSS selector for "tag starts with x-", so scan all and filter in JS.
         root.querySelectorAll('*').forEach((el) => {
             const tag = el.tagName.toLowerCase();
             if (!tag.startsWith('x-') || !TAG_RE.test(tag)) return;
@@ -925,10 +867,7 @@ window.ManifestComponentsMutation = {
             prefetchForRoute(pathname);
         });
 
-        // 2) Hover prefetch. Use pointerover (bubbles) and check the closest
-        // anchor on each event so we get a single trigger per anchor entry
-        // without needing pointerenter (which doesn't bubble). Dedup via
-        // a WeakSet so repeat moves within the anchor don't re-scan.
+        // 2) Hover prefetch. pointerover bubbles (pointerenter doesn't); WeakSet dedups.
         document.addEventListener('pointerover', (e) => {
             if (!e.target || !e.target.closest) return;
             const a = e.target.closest('a[href]');

package/lib/manifest.css

@@ -3233,138 +3233,6 @@
     }
 }
 
-/* Manifest Presence - Visual Indicators */
-
-/* CSS Variables - move to manifest.theme.css after testing completes */
-:root {
-    /* Focus indicator */
-    --presence-focus-outline-width: 2px;
-    --presence-focus-outline-style: dashed;
-    --presence-focus-outline-offset: 2px;
-    --presence-focus-opacity: 0.6;
-    --presence-focus-color: #3b82f6;
-
-    /* Text caret indicator */
-    --presence-caret-width: 2px;
-    --presence-caret-height: 1.2em;
-    --presence-caret-color: #3b82f6;
-    --presence-caret-z-index: 1000;
-    --presence-caret-blink-duration: 1s;
-    --presence-caret-opacity-high: 1;
-    --presence-caret-opacity-low: 0.3;
-
-    /* Text selection highlight */
-    --presence-selection-color: #3b82f6;
-    --presence-selection-opacity: 0.2;
-    --presence-selection-z-index: 999;
-
-    /* Cursor indicator (if rendered) */
-    --presence-cursor-size: 8px;
-    --presence-cursor-border-width: 2px;
-    --presence-cursor-z-index: 1001;
-
-    /* Timing and threshold configuration (read by JavaScript) */
-    --presence-throttle: 300ms;
-    --presence-cleanup-interval: 30000ms;
-    --presence-min-change-threshold: 5px;
-    --presence-idle-threshold: 5000ms;
-}
-
-@layer elements {
-
-    /* Focus indicator - applied to elements focused by other users */
-    :where(.presence-focused) {
-        outline: var(--presence-focus-outline-width) var(--presence-focus-outline-style) var(--presence-focus-color);
-        outline-offset: var(--presence-focus-outline-offset);
-        opacity: var(--presence-focus-opacity);
-    }
-
-    /* Dynamic focus color via data attribute */
-    :where(.presence-focused[data-presence-focus-color]) {
-        --presence-focus-color: attr(data-presence-focus-color);
-        outline-color: var(--presence-focus-color);
-    }
-
-    /* Caret indicator for other users' text cursors */
-    :where(.presence-caret) {
-        position: absolute;
-        width: var(--presence-caret-width);
-        height: var(--presence-caret-height);
-        background-color: var(--presence-caret-color);
-        pointer-events: none;
-        z-index: var(--presence-caret-z-index);
-        animation: presence-caret-blink var(--presence-caret-blink-duration) infinite;
-    }
-
-    /* Dynamic caret color via data attribute */
-    :where(.presence-caret[data-presence-caret-color]),
-    [data-presence-caret-color] .presence-caret {
-        --presence-caret-color: attr(data-presence-caret-color);
-    }
-
-    /* Caret blink animation */
-    @keyframes presence-caret-blink {
-
-        0%,
-        50% {
-            opacity: var(--presence-caret-opacity-high);
-        }
-
-        51%,
-        100% {
-            opacity: var(--presence-caret-opacity-low);
-        }
-    }
-
-    /* Selection highlight for other users' text selections */
-    :where(.presence-selection) {
-        position: absolute;
-        background-color: var(--presence-selection-color);
-        opacity: var(--presence-selection-opacity);
-        pointer-events: none;
-        z-index: var(--presence-selection-z-index);
-    }
-
-    /* Dynamic selection color - plugin sets CSS variable via setProperty */
-    :where(.presence-selection) {
-        background-color: var(--presence-selection-color);
-    }
-
-    /* Cursor indicator (for mouse/touch cursors) */
-    :where(.presence-cursor) {
-        position: absolute;
-        width: var(--presence-cursor-size);
-        height: var(--presence-cursor-size);
-        border: var(--presence-cursor-border-width) solid var(--presence-cursor-color, var(--presence-focus-color));
-        border-radius: 50%;
-        background-color: var(--presence-cursor-color, var(--presence-focus-color));
-        pointer-events: none;
-        z-index: var(--presence-cursor-z-index);
-        transform: translate(-50%, -50%);
-    }
-
-    /* Cursor label (user name) */
-    :where(.presence-cursor-label) {
-        position: absolute;
-        top: calc(var(--presence-cursor-size) + 4px);
-        left: 50%;
-        transform: translateX(-50%);
-        background-color: var(--presence-cursor-color, var(--presence-focus-color));
-        color: oklch(98.5% 0 0);
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-size: 12px;
-        white-space: nowrap;
-        pointer-events: none;
-        z-index: calc(var(--presence-cursor-z-index) + 1);
-    }
-
-    /* Element that contains presence indicators */
-    :where([data-presence-caret-user], [data-presence-selection-user], [data-presence-focus-user]) {
-        position: relative;
-    }
-}
-
 /* Manifest Radios */
 
 @layer components {