mnfst 0.5.145 → 0.5.147

package/lib/manifest.components.js

@@ -799,6 +799,158 @@ 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.
+
+(function () {
+    'use strict';
+
+    // <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.
+    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.
+    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.
+    function routeMatches(routeValue, pathname) {
+        const pieces = String(routeValue || '').split(',').map((s) => s.trim()).filter(Boolean);
+        let matched = false;
+        let negated = false;
+        for (const piece of pieces) {
+            if (piece === '!*') continue; // catch-all only handled by visibility plugin
+            if (piece.startsWith('!')) {
+                if (piece.slice(1) === pathname) negated = true;
+                continue;
+            }
+            if (piece.startsWith('=')) {
+                if (piece.slice(1) === pathname) matched = true;
+                continue;
+            }
+            if (piece.endsWith('/*')) {
+                const prefix = piece.slice(0, -2);
+                if (pathname === prefix || pathname.startsWith(prefix + '/')) matched = true;
+                continue;
+            }
+            if (piece === pathname) { matched = true; continue; }
+            if (pathname.startsWith(piece + '/')) matched = true;
+        }
+        return matched && !negated;
+    }
+
+    function findRouteSubtrees(pathname) {
+        const normalized = (pathname || '/') === '/' ? '/' : pathname.replace(/^\/|\/$/g, '');
+        const out = [];
+        document.querySelectorAll('[x-route]').forEach((el) => {
+            const value = el.getAttribute('x-route') || '';
+            if (routeMatches(value, normalized)) out.push(el);
+        });
+        return out;
+    }
+
+    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.
+        root.querySelectorAll('*').forEach((el) => {
+            const tag = el.tagName.toLowerCase();
+            if (!tag.startsWith('x-') || !TAG_RE.test(tag)) return;
+            const name = tag.slice(2);
+            if (!FRAMEWORK_TAGS.has(name)) names.add(name);
+        });
+        return names;
+    }
+
+    function prefetchForRoute(pathname) {
+        const L = loader();
+        if (!L || typeof L.loadComponent !== 'function') return;
+        const subtrees = findRouteSubtrees(pathname);
+        if (!subtrees.length) return;
+        const names = new Set();
+        for (const subtree of subtrees) {
+            discoverComponentNames(subtree).forEach((n) => names.add(n));
+        }
+        names.forEach((name) => {
+            try { L.loadComponent(name); } catch { /* swallow — dedup is internal */ }
+        });
+    }
+
+    function hrefToPathname(href) {
+        if (!href) return null;
+        if (/^(#|mailto:|tel:|javascript:)/i.test(href)) return null;
+        try {
+            const url = new URL(href, window.location.href);
+            if (url.origin !== window.location.origin) return null;
+            return url.pathname || '/';
+        } catch {
+            return null;
+        }
+    }
+
+    function initialize() {
+        // 1) Parallel batch on route change.
+        window.addEventListener('manifest:route-change', (event) => {
+            const detail = (event && event.detail) || {};
+            const path = detail.normalizedPath || detail.to || '/';
+            const pathname = String(path).startsWith('/') ? String(path) : '/' + String(path);
+            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.
+        document.addEventListener('pointerover', (e) => {
+            if (!e.target || !e.target.closest) return;
+            const a = e.target.closest('a[href]');
+            if (!a || prefetchedAnchors.has(a)) return;
+            // Author opt-out: `data-no-prefetch` skips this anchor.
+            if (a.hasAttribute('data-no-prefetch')) return;
+            const href = a.getAttribute('href');
+            const pathname = hrefToPathname(href);
+            if (!pathname) return;
+            prefetchedAnchors.add(a);
+            prefetchForRoute(pathname);
+        });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initialize);
+    } else {
+        initialize();
+    }
+})();
+
+
 // Main initialization for Manifest Components
 async function initializeComponents() {
     // Registry.initialize() may fetch manifest.json (async) when the loader

package/lib/manifest.css

@@ -1456,6 +1456,215 @@
     }
 }
 
+/* Manifest Combobox */
+
+@layer components {
+
+    /* Field shell — inherits input tokens so it reads as a normal field */
+    :where(.combobox):not(.unstyle) {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--spacing, 0.25rem);
+        width: 100%;
+        max-width: 100%;
+        min-height: var(--spacing-field-height, 2.25rem);
+        padding: calc(var(--spacing, 0.25rem) * 1.25) var(--spacing-field-padding, 0.625rem);
+        color: var(--color-field-inverse, oklch(43.9% 0 0));
+        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
+        border-radius: var(--radius, 0.5rem);
+        transition: var(--transition);
+        cursor: text;
+
+        &:hover:has(> :where(input:not([type=hidden]), textarea, button):not([hidden])) {
+            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
+        }
+
+        &:not(:has(> :where(input:not([type=hidden]), textarea, button):not([hidden]))) {
+            cursor: default
+        }
+
+        &:focus-within {
+            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
+            box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 30%, transparent)
+        }
+
+        &:has(.combobox-chip) {
+            padding-inline: calc(var(--spacing, 0.25rem) * 1.25)
+        }
+
+        &:has(> :where(input, textarea):disabled) {
+            opacity: .5;
+            pointer-events: none
+        }
+
+        /* Inner typing surface */
+        &> :where(input:not([type=hidden]), textarea) {
+            flex: 1 0 auto;
+            width: auto;
+            min-width: 7rem;
+            height: auto;
+            margin: 0;
+            padding: 0;
+            color: inherit;
+            background: transparent;
+            field-sizing: content;
+
+            &:hover,
+            &:focus-visible {
+                background: transparent;
+                box-shadow: none
+            }
+        }
+
+        &>textarea {
+            resize: none
+        }
+    }
+
+    /* Chips */
+    :where(.combobox-chip):not(.unstyle) {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--spacing, 0.25rem);
+        max-width: 100%;
+        height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
+        padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
+        font-size: 0.875rem;
+        color: var(--color-content-stark, oklch(43.9% 0 0));
+        background-color: var(--color-popover-surface, oklch(100% 0 0));
+        border-radius: calc(var(--radius, 0.5rem) * 0.7);
+        overflow: hidden;
+        user-select: none;
+
+        /* Label */
+        &>span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap
+        }
+
+        /* Remove button */
+        &>button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 0;
+            height: 100%;
+            aspect-ratio: 1 / 1;
+            padding: 0;
+            font-size: 1em;
+            line-height: 1;
+            color: var(--color-content-neutral, oklch(43.9% 0 0));
+            background: transparent;
+            border-radius: 0;
+            cursor: pointer;
+
+            &:hover {
+                color: var(--color-content-stark, oklch(43.9% 0 0));
+                background: color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 12%, transparent)
+            }
+        }
+
+        /* Failed validation */
+        &[aria-invalid="true"] {
+            color: var(--color-negative-inverse, oklch(44.4% 0.177 26.899));
+            background-color: var(--color-negative-surface, oklch(80.8% 0.114 19.571))
+        }
+    }
+
+    /* Trigger (editor:none button mode) — transparent; the shell is the field.
+       Fills the row like the input editor, with a select-style caret. */
+    :where(.combobox) > button:not(.unstyle) {
+        flex: 1 1 auto;
+        align-self: stretch;
+        min-width: 7rem;
+        justify-content: flex-start;
+        gap: var(--spacing, 0.25rem);
+        height: auto;
+        min-height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
+        padding: 0;
+        color: inherit;
+        background: transparent;
+        cursor: pointer;
+
+        &:hover {
+            background: transparent
+        }
+
+        /* Caret */
+        &::after {
+            content: '';
+            flex: none;
+            width: 1em;
+            height: 1em;
+            margin-inline-start: auto;
+            background-color: var(--color-content-subtle, oklch(55.6% 0 0));
+            mask: var(--icon-chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E")) center / contain no-repeat
+        }
+    }
+
+    /* Button-only field (no chips): the button IS the field — it fills the whole
+       wrapper and carries the padding, so the entire area is the click target. */
+    :where(.combobox):has(> button:not(.unstyle)):not(:has(.combobox-chip)) {
+        padding: 0;
+
+        &>button:not(.unstyle) {
+            min-height: var(--spacing-field-height, 2.25rem);
+            padding: calc(var(--spacing, 0.25rem) * 1.25) var(--spacing-field-padding, 0.625rem)
+        }
+    }
+
+    /* Listbox — base look comes from menu[popover]; these are combobox-only extras */
+    :where(menu[role=listbox]):not(.unstyle) {
+
+        /* Active descendant (mirrors hover) */
+        & :where([role=option][aria-current="true"]) {
+            color: var(--color-field-inverse, oklch(43.9% 0 0));
+            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
+        }
+
+        /* Filtered out */
+        & :where([role=option][hidden]) {
+            display: none
+        }
+
+        /* Selected (multiple) */
+        & :where([role=option][aria-selected="true"]) {
+            font-weight: 600
+        }
+
+        /* "Add …" create row */
+        & :where(.combobox-create) {
+            color: var(--color-content-neutral, oklch(43.9% 0 0))
+        }
+
+        /* Empty state */
+        & :where(.combobox-empty) {
+            padding: 0.5rem;
+            color: var(--color-content-subtle, oklch(55.6% 0 0));
+            cursor: default;
+
+            &:hover {
+                background: transparent
+            }
+        }
+    }
+
+    /* Screen-reader-only live region */
+    :where(.combobox)> :where([role=status]) {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+        border: 0
+    }
+}
+
 /* Manifest Date Picker */
 
 @layer utilities {

package/lib/manifest.integrity.json

@@ -6,7 +6,8 @@
   "manifest.code.js": "sha384-nP6DncLx/UuJtloyVKMCOXwIBAq32DshTb/Lc0vVRBWX7kSbxiBnY5aEyqqvK8Kg",
   "manifest.color.js": "sha384-6Rv3LxyTcZNjrhtayQfqRdCx0uSZ4BiEbgEI98I62eTvp8Aw7LBIoNJ0Je1oktwL",
   "manifest.colorpicker.js": "sha384-Wqz0ZIbeIi7KarqqqSLsQk+7E/fMaKhb32hrq5/eWzX1yjqMrpPZKH8y+jZ3mfg+",
-  "manifest.components.js": "sha384-73CB1A+LAGfNexkd7aT69APFSHMzix8irse9uzOkYehHHio4px3oR8JHJeaMH+jI",
+  "manifest.combobox.js": "sha384-AEEtOVCcoGgCyKPbZSzKtRhz8G4VbE8BD5LC/urGqzxjMXNP9NrExeWrENXHCLsg",
+  "manifest.components.js": "sha384-mzPFoM0vqL9dnTVLMN3OrmO+KCgSqGknM1fd7bM1xzYeCco5OaZi56IMR5RS5oad",
   "manifest.data.js": "sha384-bCYTYyAYNVkg5pSwGcoe07Dgf5B7JDN7GtOIQdS+BtrBStQwvjZtskiQ38Bncvrf",
   "manifest.datepicker.js": "sha384-NEb/H4vuR3CFtRcodHsm3jJjrcYW2JMpDlQKlgwTrzpMMTcDkFKYXzAYJD0gZ7Ov",
   "manifest.dropdowns.js": "sha384-a2j9Z1LWolyZANlfeBc1aIFQ0kf0UDeOZ8TetulYbpRS6T/zaD/OWSMGvz+gRehX",
@@ -26,5 +27,6 @@
   "manifest.tooltips.js": "sha384-ADzAx9D0HWq2b46mvNG05iOwPmEWdiFZNpEOXONSbBxs4xj1B/bzNL7S3x2R9cS1",
   "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
   "manifest.utilities.js": "sha384-HWyVkjQoDRlWFKDBQw4RQOYODkBcU72NHW6l1p4bhQv1RtN0/XtnjwIb+lQK6+zv",
-  "manifest.js": "sha384-SrHYQWIDaJ9A8m6FFwqruve5PTSnVbRaDiBB6+Yx/4ab2Ax7bGgnt5KM7HaJEN8X"
+  "manifest.virtual.js": "sha384-J2+MpRskVH39R2DmHUib2bItuGsvSLEhPM+83iznrdfQFMZ63Ea6xwLeCsG04jOl",
+  "manifest.js": "sha384-IsNGBIHGuUF5ABO58nkkZJQq1Ilt0wIsz+X2qR5hx4cGEhZez7GCmB8rAowJmrHS"
 }

package/lib/manifest.js

@@ -235,6 +235,7 @@
 		'toasts',
 		'tooltips',
 		'dropdowns',
+		'combobox',
 		'tabs',
 		'slides',
 		'resize',
@@ -242,6 +243,7 @@
 		'datepicker',
 		'charts',
 		'url-parameters',
+		'virtual',
 		'export',
 		'status'
 	];