mnfst 0.5.69 → 0.5.71

package/README.md

@@ -14,7 +14,7 @@ Manifest is a frontend framework extending HTML for rapid, feature-rich website
 
 ## 💾 Setup
 
-Get [CDN links](https://manifestjs.org/getting-started/setup) for existing projects or try the [starter project](https://manifestjs.org/getting-started/starter-project) for new ones.
+Get [CDN links](https://manifestx.dev/getting-started/setup) for existing projects or try the [starter project](https://manifestx.dev/getting-started/starter-project) for new ones.
 
 <br>
 
@@ -38,7 +38,7 @@ Get [CDN links](https://manifestjs.org/getting-started/setup) for existing proje
 
 ## 📚 Documentation
 
-For full documentation visit [manifestjs.org](https://manifestjs.org).
+For full documentation visit [manifestx.dev](https://manifestx.dev).
 
 <br>
 

package/lib/manifest.appwrite.auth.js

@@ -959,7 +959,7 @@ function initializeAuthMagic() {
         return false;
     }
 
-    // Add $auth magic method (like $locale, $theme)
+    // Add $auth magic method (like $locale, $colors)
     Alpine.magic('auth', () => {
         const store = Alpine.store('auth');
         if (!store) {

package/lib/manifest.code.css

@@ -1,6 +1,6 @@
 /*  Manifest Code CSS
 /*  By Andrew Matlock under MIT license
-/*  https://manifestjs.org/styles/code
+/*  https://manifestx.dev/styles/code
 */
 
 @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Lexend+Exa&display=swap');

package/lib/{manifest.themes.js → manifest.color.js}

@@ -1,65 +1,65 @@
-/* Manifest Themes */
+/* Manifest Color */
 
 // Initialize plugin when either DOM is ready or Alpine is ready
-function initializeThemePlugin() {
+function initializeColorPlugin() {
 
-    // Initialize theme state with Alpine reactivity
-    const theme = Alpine.reactive({
+    // Initialize color mode state with Alpine reactivity
+    const color = Alpine.reactive({
         current: localStorage.getItem('theme') || 'system'
     })
 
-    // Apply initial theme
-    applyTheme(theme.current)
+    // Apply initial color mode
+    applyColorMode(color.current)
 
-    // Setup system theme listener
+    // Setup system color mode listener
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
     mediaQuery.addEventListener('change', () => {
-        if (theme.current === 'system') {
-            applyTheme('system')
+        if (color.current === 'system') {
+            applyColorMode('system')
         }
     })
 
-    // Register theme directive
-    Alpine.directive('theme', (el, { expression }, { evaluate, cleanup }) => {
+    // Register color directive
+    Alpine.directive('color', (el, { expression }, { evaluate, cleanup }) => {
 
         const handleClick = () => {
-            const newTheme = expression === 'toggle'
+            const newMode = expression === 'toggle'
                 ? (document.documentElement.classList.contains('dark') ? 'light' : 'dark')
                 : evaluate(expression)
-            setTheme(newTheme)
+            setColorMode(newMode)
         }
 
         el.addEventListener('click', handleClick)
         cleanup(() => el.removeEventListener('click', handleClick))
     })
 
-    // Add $theme magic method
-    Alpine.magic('theme', () => ({
+    // Add $color magic method
+    Alpine.magic('color', () => ({
         get current() {
-            return theme.current
+            return color.current
         },
         set current(value) {
-            setTheme(value)
+            setColorMode(value)
         }
     }))
 
-    function setTheme(newTheme) {
-        if (newTheme === 'toggle') {
-            newTheme = theme.current === 'light' ? 'dark' : 'light'
+    function setColorMode(newMode) {
+        if (newMode === 'toggle') {
+            newMode = color.current === 'light' ? 'dark' : 'light'
         }
 
-        // Update theme state
-        theme.current = newTheme
-        localStorage.setItem('theme', newTheme)
+        // Update color mode state
+        color.current = newMode
+        localStorage.setItem('theme', newMode)
 
-        // Apply theme
-        applyTheme(newTheme)
+        // Apply color mode
+        applyColorMode(newMode)
     }
 
-    function applyTheme(theme) {
-        const isDark = theme === 'system'
+    function applyColorMode(mode) {
+        const isDark = mode === 'system'
             ? window.matchMedia('(prefers-color-scheme: dark)').matches
-            : theme === 'dark'
+            : mode === 'dark'
 
         // Update document classes
         document.documentElement.classList.remove('light', 'dark')
@@ -74,36 +74,36 @@ function initializeThemePlugin() {
 }
 
 // Track initialization to prevent duplicates
-let themePluginInitialized = false;
+let colorPluginInitialized = false;
 
-function ensureThemePluginInitialized() {
-    if (themePluginInitialized) return;
+function ensureColorPluginInitialized() {
+    if (colorPluginInitialized) return;
     if (!window.Alpine || typeof window.Alpine.directive !== 'function') return;
 
-    themePluginInitialized = true;
-    initializeThemePlugin();
+    colorPluginInitialized = true;
+    initializeColorPlugin();
 }
 
 // Expose on window for loader to call if needed
-window.ensureThemePluginInitialized = ensureThemePluginInitialized;
+window.ensureColorPluginInitialized = ensureColorPluginInitialized;
 
 // Handle both DOMContentLoaded and alpine:init
 if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', ensureThemePluginInitialized);
+    document.addEventListener('DOMContentLoaded', ensureColorPluginInitialized);
 }
 
-document.addEventListener('alpine:init', ensureThemePluginInitialized);
+document.addEventListener('alpine:init', ensureColorPluginInitialized);
 
 // If Alpine is already initialized when this script loads, initialize immediately
 if (window.Alpine && typeof window.Alpine.directive === 'function') {
-    setTimeout(ensureThemePluginInitialized, 0);
+    setTimeout(ensureColorPluginInitialized, 0);
 } else {
     // If document is already loaded but Alpine isn't ready yet, wait for it
     const checkAlpine = setInterval(() => {
         if (window.Alpine && typeof window.Alpine.directive === 'function') {
             clearInterval(checkAlpine);
-            ensureThemePluginInitialized();
+            ensureColorPluginInitialized();
         }
     }, 10);
     setTimeout(() => clearInterval(checkAlpine), 5000);
-} 
+}

package/lib/manifest.components.js

@@ -162,7 +162,7 @@ window.ManifestComponentsProcessor = {
         }
         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-colors etc.).
+            // still needs Alpine initialization (x-data, @click, :class, x-color etc.).
             if (element.hasAttribute('data-pre-rendered') && window.Alpine && typeof window.Alpine.initTree === 'function') {
                 try { window.Alpine.initTree(element); } catch (e) { /* graceful */ }
             }

package/lib/manifest.css

@@ -1,6 +1,6 @@
 /*  Manifest CSS
 /*  By Andrew Matlock under MIT license
-/*  https://manifestjs.org
+/*  https://manifestx.dev
 /*  Modify referenced variables in manifest.theme.css
 */
 

package/lib/manifest.d.ts

@@ -0,0 +1,244 @@
+/**
+ * Manifest ambient type declarations.
+ * https://manifestx.dev
+ *
+ * This file gives editors (VS Code, Cursor, JetBrains) and AI coding assistants
+ * type information for Manifest's magic globals and data-source state. It is
+ * intended to live in the project root and is regenerated by `npx mnfst-types`
+ * to add project-specific augmentations to ManifestSources from manifest.json.
+ *
+ * Hand-edits below the AUGMENTATION marker will be overwritten on regeneration.
+ */
+
+// ---------------------------------------------------------------------------
+// Data-source state and operators (attached to every $x.<source>)
+// ---------------------------------------------------------------------------
+
+/** Appwrite-style query expression returned by helper builders. */
+export type ManifestQueryExpr = string;
+
+/** Appwrite-style query helpers used with `$query([...])`. */
+export interface ManifestQuery {
+    equal(field: string, value: unknown): ManifestQueryExpr;
+    notEqual(field: string, value: unknown): ManifestQueryExpr;
+    lessThan(field: string, value: number | string): ManifestQueryExpr;
+    lessThanEqual(field: string, value: number | string): ManifestQueryExpr;
+    greaterThan(field: string, value: number | string): ManifestQueryExpr;
+    greaterThanEqual(field: string, value: number | string): ManifestQueryExpr;
+    between(field: string, start: number | string, end: number | string): ManifestQueryExpr;
+    contains(field: string, value: string | string[]): ManifestQueryExpr;
+    startsWith(field: string, value: string): ManifestQueryExpr;
+    endsWith(field: string, value: string): ManifestQueryExpr;
+    search(field: string, value: string): ManifestQueryExpr;
+    isNull(field: string): ManifestQueryExpr;
+    isNotNull(field: string): ManifestQueryExpr;
+    select(fields: string[]): ManifestQueryExpr;
+    orderAsc(field: string): ManifestQueryExpr;
+    orderDesc(field: string): ManifestQueryExpr;
+    limit(value: number): ManifestQueryExpr;
+    offset(value: number): ManifestQueryExpr;
+    cursorAfter(id: string): ManifestQueryExpr;
+    cursorBefore(id: string): ManifestQueryExpr;
+}
+
+/** State flags exposed on every data source (array or object). */
+export interface ManifestSourceState {
+    /** True while the source is fetching for the first time or after a mutation. */
+    readonly $loading: boolean;
+    /** Last error from a load or mutation, or null. */
+    readonly $error: Error | string | null;
+    /** True once initial load has completed (success or failure). */
+    readonly $ready: boolean;
+}
+
+/** Operators available on array-shaped sources (CSV tabular, JSON arrays, Appwrite tables). */
+export interface ManifestArrayOps<T> {
+    /** Substring match across the given fields. Returns matching items. */
+    $search(term: string, ...fields: (keyof T & string)[]): T[];
+    /**
+     * Local sources: filter by an array of `Manifest.query.*` expressions and array methods.
+     * Appwrite sources: server-side query, returns a Promise.
+     */
+    $query(expressions: ManifestQueryExpr[]): T[] | Promise<T[]>;
+    /** Look up a single row whose `id` matches the current route param, if any. */
+    $route(path?: string): T | undefined;
+}
+
+/** Mutations available on Appwrite-table sources. */
+export interface ManifestAppwriteTableOps<T> {
+    $create(values: Partial<T>): Promise<T>;
+    $update(id: string, values: Partial<T>): Promise<T>;
+    $delete(id: string): Promise<void>;
+    $duplicate(id: string, overrides?: Partial<T>): Promise<T>;
+}
+
+/** Operations available on Appwrite-bucket (storage) sources. */
+export interface ManifestAppwriteBucketOps {
+    $url(fileId: string): string;
+    $preview(fileId: string, opts?: Record<string, unknown>): string;
+    $download(fileId: string): string;
+    $openUrl(fileId: string): void;
+    $openPreview(fileId: string): void;
+    $openDownload(fileId: string): void;
+    $upload(file: File | Blob, opts?: Record<string, unknown>): Promise<{ $id: string }>;
+    $remove(fileId: string): Promise<void>;
+    $filesFor(parentId: string, fieldName?: string): unknown[];
+    $unlinkFrom(parentId: string, fileId: string): Promise<void>;
+    $removeFrom(parentId: string, fileId: string): Promise<void>;
+}
+
+/**
+ * The shape returned by `$x.<source>` for an array-of-rows source.
+ * Behaves as a regular `T[]` (supports `map`, `filter`, `find`, etc.) plus
+ * Manifest operators and state flags.
+ */
+export type ManifestArraySource<T> =
+    & ReadonlyArray<T>
+    & ManifestSourceState
+    & ManifestArrayOps<T>
+    & Partial<ManifestAppwriteTableOps<T>>;
+
+/** The shape returned by `$x.<source>` for an object-shaped source (CSV key-value, JSON object, YAML map). */
+export type ManifestObjectSource<T> = T & ManifestSourceState;
+
+/** The shape returned by `$x.<source>` for an Appwrite storage bucket. */
+export type ManifestBucketSource = ManifestSourceState & ManifestAppwriteBucketOps;
+
+// ---------------------------------------------------------------------------
+// Magic globals registered by Manifest plugins
+// ---------------------------------------------------------------------------
+
+/**
+ * Project-specific data sources, keyed by the names declared in `manifest.json`'s
+ * `data` property. Augmented by `npx mnfst-types` from manifest.json + sample
+ * data (declarations appended below the AUGMENTATION marker).
+ */
+export interface ManifestSources {
+    [sourceName: string]: ManifestArraySource<any> | ManifestObjectSource<any> | ManifestBucketSource;
+}
+
+/** `$auth` from the Appwrite auth plugin. Loose by design — auth API is broad. */
+export interface ManifestAuth {
+    readonly current: { $id: string; email?: string; name?: string;[k: string]: unknown } | null;
+    readonly isAuthenticated: boolean;
+    readonly isLoading: boolean;
+    readonly currentTeam: { $id: string; name: string;[k: string]: unknown } | null;
+    readonly teams: Array<{ $id: string; name: string;[k: string]: unknown }>;
+    login(email: string, password?: string): Promise<unknown>;
+    loginWithMagic(email: string): Promise<unknown>;
+    loginWithOAuth(provider: string, opts?: Record<string, unknown>): Promise<unknown>;
+    loginAsGuest(): Promise<unknown>;
+    logout(): Promise<unknown>;
+    [extra: string]: unknown;
+}
+
+/** `$locale` from the localization plugin. */
+export interface ManifestLocale {
+    readonly current: string;
+    readonly available: string[];
+    set(locale: string): void;
+}
+
+/** `$toast` from the toasts plugin. */
+export interface ManifestToast {
+    (message: string, opts?: { type?: 'info' | 'success' | 'warning' | 'error'; duration?: number }): void;
+    info(message: string, opts?: Record<string, unknown>): void;
+    success(message: string, opts?: Record<string, unknown>): void;
+    warning(message: string, opts?: Record<string, unknown>): void;
+    error(message: string, opts?: Record<string, unknown>): void;
+    dismiss(id?: string): void;
+}
+
+/** `$colors` from the themes plugin. */
+export interface ManifestTheme {
+    readonly current: 'light' | 'dark' | 'system';
+    set(theme: 'light' | 'dark' | 'system'): void;
+    toggle(): void;
+}
+
+/** `$colors` from the colors plugin. */
+export interface ManifestColors {
+    [name: string]: string | ManifestColors;
+}
+
+/** `$colorpicker` from the colorpicker plugin. */
+export interface ManifestColorpicker {
+    open(opts?: Record<string, unknown>): void;
+    close(): void;
+    [extra: string]: unknown;
+}
+
+/** `$url` from the url-parameters plugin: read/write URL query params reactively. */
+export interface ManifestUrl {
+    get(name: string): string | null;
+    set(name: string, value: string | null): void;
+    has(name: string): boolean;
+    [name: string]: unknown;
+}
+
+/** `$route` magic — true if the current route matches the given pattern. */
+export type ManifestRoute = (pattern: string) => boolean;
+
+/**
+ * `$modify('attr')` — exposed in component HTML. Returns the value of an
+ * attribute set on the parent component instance (Manifest's prop mechanism).
+ */
+export type ManifestModify = (attr: string) => string | undefined;
+
+/** `$try(fn)` — run a callback and swallow any thrown error, returning undefined on failure. */
+export type ManifestTry = <T>(fn: () => T) => T | undefined;
+
+// ---------------------------------------------------------------------------
+// Global declarations (what Alpine exposes inside `x-data`, `x-show`, etc.)
+// ---------------------------------------------------------------------------
+
+declare global {
+    /** Project data sources registered in manifest.json. */
+    const $x: ManifestSources;
+    /** Match the current route against a pattern (e.g. `$route('/about')`). */
+    const $route: ManifestRoute;
+    /** Read a parent component attribute (Manifest's prop mechanism). */
+    const $modify: ManifestModify;
+    /** Run a callback safely, returning undefined on error. */
+    const $try: ManifestTry;
+    /** Appwrite auth plugin (only present when the plugin is loaded). */
+    const $auth: ManifestAuth;
+    /** Localization plugin. */
+    const $locale: ManifestLocale;
+    /** Toasts plugin. */
+    const $toast: ManifestToast;
+    /** Themes plugin. */
+    const $colors: ManifestTheme;
+    /** Colors plugin. */
+    const $colors: ManifestColors;
+    /** Colorpicker plugin. */
+    const $colorpicker: ManifestColorpicker;
+    /** URL parameters plugin. */
+    const $url: ManifestUrl;
+
+    /** Window-level Manifest namespace exposed by the loader. */
+    interface Window {
+        Manifest?: {
+            loadPlugin(name: string, version?: string): Promise<unknown>;
+            loadTailwind(version?: string): Promise<unknown>;
+            getPluginUrl(name: string, version?: string): string;
+        };
+        Alpine?: unknown;
+        __manifestLoaded?: unknown;
+    }
+}
+
+// ---------------------------------------------------------------------------
+// AUGMENTATION:start
+// Project-specific declarations are appended below by `npx mnfst-types`.
+// Do not hand-edit between the start/end markers — re-running the CLI
+// regenerates this section from manifest.json + sample data.
+// ---------------------------------------------------------------------------
+
+// (No project augmentations yet — run `npx mnfst-types` to generate.)
+
+// ---------------------------------------------------------------------------
+// AUGMENTATION:end
+// ---------------------------------------------------------------------------
+
+export { };

package/lib/manifest.dropdowns.js

@@ -164,6 +164,32 @@ function initializeDropdownPlugin() {
                     el.style.setProperty('anchor-name', anchorName);
                     menu.style.setProperty('position-anchor', anchorName);
 
+                    // ----- A11y wiring (WAI-ARIA Menu Button pattern) -----
+                    // The trigger needs `aria-haspopup="menu"`, `aria-controls`, and a
+                    // dynamic `aria-expanded` that follows the popover's open state.
+                    // The menu element gets `role="menu"` and each list item gets
+                    // `role="menuitem"` so screen readers announce the relationship.
+                    //
+                    // We don't apply these for `.context` dropdowns invoked by right-
+                    // click — they're not button-triggered popups in the APG sense.
+                    if (!modifiers.includes('context')) {
+                        if (!menu.id) menu.id = 'mnfst-dropdown-' + Math.random().toString(36).slice(2, 9);
+                        el.setAttribute('aria-haspopup', 'menu');
+                        el.setAttribute('aria-controls', menu.id);
+                        el.setAttribute('aria-expanded', menu.matches(':popover-open') ? 'true' : 'false');
+                        if (!menu.hasAttribute('role')) menu.setAttribute('role', 'menu');
+                        menu.querySelectorAll('li').forEach((li) => {
+                            if (!li.hasAttribute('role')) li.setAttribute('role', 'menuitem');
+                        });
+                        // Keep aria-expanded in sync with the popover's state.
+                        if (!menu.__mnfstAriaToggleBound) {
+                            menu.__mnfstAriaToggleBound = true;
+                            menu.addEventListener('toggle', (e) => {
+                                el.setAttribute('aria-expanded', e.newState === 'open' ? 'true' : 'false');
+                            });
+                        }
+                    }
+
                     // Set up hover functionality after menu is ready
                     if (modifiers.includes('hover')) {
                         const handleShowPopover = () => {

package/lib/manifest.js

@@ -1,6 +1,6 @@
 /*  Manifest JS
 /*  By Andrew Matlock under MIT license
-/*  https://manifestjs.org
+/*  https://manifestx.dev
 /*
 /*  Lightweight loader that dynamically loads Alpine.js and Manifest plugins
 /*  from jsDelivr CDN. Loads all plugins by default, or a subset if specified.
@@ -20,7 +20,7 @@
 	 * innerHTML) of every element that needs runtime hydration.  This
 	 * function runs once on page load BEFORE any plugin or Alpine starts —
 	 * it walks the contract, restores source state, and removes its own
-	 * markers.  Every downstream plugin (themes, router, data, markdown,
+	 * markers.  Every downstream plugin (colors, router, data, markdown,
 	 * icons, …) then sees exactly the DOM the user authored, exactly as it
 	 * would in a live SPA.  No plugin needs a "prerender mode" branch.
 	 *
@@ -100,7 +100,7 @@
 				tmp.innerHTML = newHTML;
 				const parsed = tmp.firstElementChild;
 				if (parsed) {
-					try { el.parentNode.replaceChild(parsed, el); } catch (_) {}
+					try { el.parentNode.replaceChild(parsed, el); } catch (_) { }
 				}
 				continue;
 			}
@@ -132,7 +132,7 @@
 			tmp.innerHTML = newHTML;
 			const parsed = tmp.firstElementChild;
 			if (parsed) {
-				try { el.parentNode.replaceChild(parsed, el); } catch (_) {}
+				try { el.parentNode.replaceChild(parsed, el); } catch (_) { }
 			}
 		}
 
@@ -191,7 +191,7 @@
 		'markdown',
 		'svg',
 		'code',
-		'colors',
+		'color',
 		'toasts',
 		'tooltips',
 		'dropdowns',

package/lib/manifest.range.css

@@ -0,0 +1,60 @@
+/* Manifest Range */
+
+@layer components {
+
+    input[type=range]:not(.unstyle) {
+        appearance: none;
+        background-color: transparent;
+        border-radius: var(--radius, 0.5rem);
+        cursor: default;
+
+        &::-webkit-slider-runnable-track {
+            height: calc(var(--spacing, 0.25rem) * 2);
+            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+            border-radius: var(--radius, 0.5rem);
+            cursor: pointer;
+            transition: var(--transition)
+        }
+
+        &:hover::-webkit-slider-runnable-track {
+            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48));
+        }
+
+        &::-webkit-slider-thumb {
+            appearance: none;
+            position: relative;
+            top: 50%;
+            width: calc(var(--spacing-field-height, 2.25rem) * 0.5);
+            height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
+            transform: translateY(-50%);
+            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 60%, var(--color-field-inverse, oklch(16.6% 0.026 267)));
+            border-radius: 200px;
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            cursor: pointer;
+            transition: var(--transition)
+        }
+
+        &::-webkit-slider-thumb:hover {
+            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 30%, var(--color-field-inverse, oklch(16.6% 0.026 267)));
+        }
+    }
+
+    :where(datalist):not(.unstyle) {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        width: 100%;
+        max-width: 100%;
+
+        & option {
+            width: 2ch;
+            text-align: center;
+            font-size: 0.875rem;
+            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
+        }
+    }
+
+    label:has(input[type=range]):not(.unstyle) {
+        cursor: default;
+    }
+}

package/lib/manifest.router.js

@@ -401,14 +401,74 @@ async function handleRouteChange() {
         }, 50);
     }
 
-    // Emit route change event
-    window.dispatchEvent(new CustomEvent('manifest:route-change', {
+    // Build the route-change event once so dispatch + transition wrapper share it.
+    const event = new CustomEvent('manifest:route-change', {
         detail: {
             from: prevRoute,
             to: newRoute,
             normalizedPath: newRoute === '/' ? '/' : newRoute.replace(/^\/|\/$/g, '')
         }
-    }));
+    });
+
+    // SPA route changes use the View Transitions API when available so the
+    // visibility-toggle that listeners perform inside this dispatch is
+    // animated. Cross-document MPA navigations are already handled by
+    // `@view-transition { navigation: auto }` in the framework's reset CSS;
+    // the same `::view-transition-group(*)` rule (driven by
+    // `--view-transition-duration` / `--view-transition-easing`) covers both.
+    //
+    // The callback is synchronous: visibility/head/anchor listeners mutate
+    // the DOM inside `dispatchEvent` and return. Returning anything async
+    // here would freeze the rendered frame until the promise resolves,
+    // adding the entirety of Alpine's pending-update queue to the perceived
+    // navigation time (1–2s on busy pages).
+    if (shouldUseViewTransition()) {
+        document.startViewTransition(() => {
+            window.dispatchEvent(event);
+        });
+    } else {
+        window.dispatchEvent(event);
+    }
+}
+
+// Decide whether SPA route changes should run inside a View Transition.
+// Three modes, in priority order:
+//
+//   1. `<html data-no-view-transitions>`  → force OFF
+//   2. `<html data-view-transitions>`     → force ON
+//   3. (neither)                          → auto: ON when the current page is
+//                                            under VT_AUTO_THRESHOLD elements,
+//                                            OFF otherwise
+//
+// The auto threshold exists because the View Transitions API rasterizes the
+// full viewport for the "before" and "after" snapshots; cost scales linearly
+// with DOM size and gets noticeable above a few thousand elements (a 10k-
+// element page measured ~500ms per snapshot in dev). Light pages keep the
+// crossfade; heavy pages stay fast.
+//
+// Cross-document (MPA) navigations are unaffected — those use the browser's
+// native cross-document path (`@view-transition { navigation: auto }`),
+// which rasterizes in parallel with page load and doesn't expose the cost.
+//
+// Per-element opt-out (`data-no-view-transition`, singular) on individual
+// elements is handled by the existing reset CSS rule that sets
+// `view-transition-name: none` on them. `prefers-reduced-motion` is
+// respected automatically — the browser falls back to a snap with no
+// animation when the user has it set.
+const VT_AUTO_THRESHOLD = 3000;
+
+function shouldUseViewTransition() {
+    if (typeof document === 'undefined') return false;
+    if (typeof document.startViewTransition !== 'function') return false;
+    const html = document.documentElement;
+    if (!html) return false;
+    if (html.hasAttribute('data-no-view-transitions')) return false;
+    if (html.hasAttribute('data-view-transitions')) return true;
+    try {
+        return document.querySelectorAll('*').length < VT_AUTO_THRESHOLD;
+    } catch {
+        return false;
+    }
 }
 
 // Resolve internal link to absolute pathname for pushState. Relative hrefs (e.g. "gadget") are resolved against the app base, not the current URL, so we never get additive paths like /src/dist/widget/gadget/widget/...

package/lib/manifest.schema.json

@@ -0,0 +1,212 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "$id": "https://manifestx.dev/manifest.schema.json",
+    "title": "Manifest project configuration",
+    "description": "Combined PWA manifest and Manifest framework configuration. See https://manifestx.dev/docs/getting-started/setup.",
+    "type": "object",
+    "additionalProperties": true,
+    "properties": {
+        "$schema": {
+            "type": "string",
+            "format": "uri"
+        },
+        "name": {
+            "type": "string",
+            "description": "Full application name shown by the OS and browsers."
+        },
+        "short_name": {
+            "type": "string",
+            "description": "Short name used on home screens and limited-width contexts."
+        },
+        "description": {
+            "type": "string"
+        },
+        "author": {
+            "type": "string"
+        },
+        "email": {
+            "type": "string",
+            "format": "email"
+        },
+        "live_url": {
+            "type": "string",
+            "format": "uri",
+            "description": "Production URL — used by the prerender pipeline for canonical/sitemap output."
+        },
+        "start_url": {
+            "type": "string",
+            "default": "/"
+        },
+        "scope": {
+            "type": "string",
+            "default": "/"
+        },
+        "display": {
+            "type": "string",
+            "enum": ["fullscreen", "standalone", "minimal-ui", "browser"]
+        },
+        "orientation": {
+            "type": "string",
+            "enum": ["any", "natural", "landscape", "landscape-primary", "landscape-secondary", "portrait", "portrait-primary", "portrait-secondary"]
+        },
+        "background_color": {
+            "type": "string",
+            "pattern": "^#([0-9A-Fa-f]{3}){1,2}$"
+        },
+        "theme_color": {
+            "type": "string",
+            "pattern": "^#([0-9A-Fa-f]{3}){1,2}$"
+        },
+        "icons": {
+            "type": "array",
+            "items": {
+                "type": "object",
+                "required": ["src"],
+                "properties": {
+                    "src": { "type": "string" },
+                    "sizes": { "type": "string" },
+                    "type": { "type": "string" },
+                    "purpose": { "type": "string" }
+                }
+            }
+        },
+        "components": {
+            "type": "array",
+            "description": "Component HTML files registered as <x-name> tags.",
+            "items": { "type": "string" }
+        },
+        "preloadedComponents": {
+            "type": "array",
+            "description": "Components loaded eagerly on initial page load (header, logo, etc.).",
+            "items": { "type": "string" }
+        },
+        "data": {
+            "type": "object",
+            "description": "Named data sources made available via $x.<sourceName>. Each value is either a string path/URL or a config object.",
+            "additionalProperties": {
+                "oneOf": [
+                    {
+                        "type": "string",
+                        "description": "Path to a CSV, JSON, or YAML file, or an absolute HTTP URL."
+                    },
+                    {
+                        "type": "object",
+                        "description": "Localized source, HTTP source with config, or Appwrite-backed source.",
+                        "properties": {
+                            "url": {
+                                "type": "string",
+                                "description": "HTTP endpoint URL."
+                            },
+                            "headers": {
+                                "type": "object",
+                                "additionalProperties": { "type": "string" }
+                            },
+                            "params": {
+                                "type": "object"
+                            },
+                            "transform": {
+                                "type": "string",
+                                "description": "Optional dot-path into the response body (e.g. 'data.items')."
+                            },
+                            "defaultValue": {
+                                "description": "Value used while loading or on error."
+                            },
+                            "locales": {
+                                "type": "string",
+                                "description": "Single CSV with locale columns; locale resolution happens internally."
+                            },
+                            "appwriteTableId": { "type": "string" },
+                            "appwriteBucketId": { "type": "string" },
+                            "appwriteDatabaseId": { "type": "string" },
+                            "appwriteProjectId": { "type": "string" },
+                            "appwriteEndpoint": { "type": "string" },
+                            "appwriteDevKey": { "type": "string" },
+                            "scope": {
+                                "oneOf": [
+                                    { "type": "string", "enum": ["user", "team"] },
+                                    { "type": "array", "items": { "type": "string", "enum": ["user", "team"] } }
+                                ]
+                            },
+                            "autoInjectUserId": { "type": "boolean" },
+                            "autoInjectTeamId": { "type": "boolean" },
+                            "queries": {
+                                "type": "array",
+                                "items": { "type": "string" }
+                            },
+                            "storage": {
+                                "type": "object",
+                                "description": "Map of storage-bucket source names to the column on this row that holds their file IDs.",
+                                "additionalProperties": { "type": "string" }
+                            },
+                            "throttle": { "type": "number" },
+                            "cleanupInterval": { "type": "number" },
+                            "minChangeThreshold": { "type": "number" },
+                            "idleThreshold": { "type": "number" },
+                            "enableVisualRendering": { "type": "boolean" },
+                            "includeVelocity": { "type": "boolean" }
+                        },
+                        "additionalProperties": true
+                    }
+                ]
+            }
+        },
+        "appwrite": {
+            "type": "object",
+            "description": "Appwrite global configuration. Per-source overrides live on the data entry.",
+            "properties": {
+                "projectId": { "type": "string" },
+                "endpoint": { "type": "string", "format": "uri" },
+                "databaseId": { "type": "string" },
+                "devKey": {
+                    "type": "string",
+                    "description": "May reference an env var via ${VAR_NAME}."
+                },
+                "auth": {
+                    "type": "object",
+                    "properties": {
+                        "methods": {
+                            "type": "array",
+                            "items": {
+                                "type": "string",
+                                "enum": ["guest", "guest-manual", "magic", "oauth", "password"]
+                            }
+                        },
+                        "teams": {
+                            "type": "object",
+                            "properties": {
+                                "permanent": { "type": "array", "items": { "type": "string" } },
+                                "template": { "type": "array", "items": { "type": "string" } }
+                            }
+                        },
+                        "roles": {
+                            "type": "object",
+                            "additionalProperties": {
+                                "type": "object",
+                                "additionalProperties": {
+                                    "type": "array",
+                                    "items": { "type": "string" }
+                                }
+                            }
+                        },
+                        "creatorRole": { "type": "string" }
+                    }
+                }
+            }
+        },
+        "prerender": {
+            "type": "object",
+            "description": "Static rendering configuration consumed by mnfst-render.",
+            "properties": {
+                "localUrl": { "type": "string", "format": "uri" },
+                "liveUrl": { "type": "string", "format": "uri" },
+                "output": { "type": "string", "default": "dist" },
+                "routerBase": { "type": "string", "default": "" },
+                "locales": {
+                    "type": "array",
+                    "items": { "type": "string" }
+                }
+            },
+            "additionalProperties": true
+        }
+    }
+}

package/lib/manifest.tabs.js

@@ -109,12 +109,46 @@ function initializeTabsPlugin() {
                 }
             }
 
-            // Process panels for this group - add x-show attributes
+            // ----- Accessibility wiring (WAI-ARIA Tabs pattern) -----
+            //
+            // Per the ARIA APG, a tabs widget needs:
+            //   - role="tablist" on the tab container (parent of buttons)
+            //   - role="tab" + aria-selected + aria-controls + tabindex on each button
+            //   - role="tabpanel" + aria-labelledby + tabindex="0" on each panel
+            //   - arrow-key navigation between tabs (with roving tabindex)
+            //
+            // We compute the tab-container element as the closest common ancestor of
+            // the relevant buttons (often a <nav> or <div>). Each button is assigned
+            // a stable id if it doesn't have one, so panels can reference it.
+
+            // Assign ids where missing.
+            const buttonIdByTabValue = {};
+            relevantButtons.forEach((button, i) => {
+                const tabValue = button.getAttribute('x-tab');
+                if (!tabValue) return;
+                if (!button.id) {
+                    button.id = `mnfst-tab-${sanitizedPanelSet || 'g'}-${tabValue.replace(/[^a-zA-Z0-9_-]/g, '-')}-${i}`;
+                }
+                buttonIdByTabValue[tabValue] = button.id;
+            });
+
+            // Process panels for this group - add x-show + a11y attributes
             panels.forEach(panel => {
                 // Create condition that checks if tab property matches this panel's identifier
                 const showCondition = `${tabProp} === '${panel.id}'`;
                 panel.element.setAttribute('x-show', showCondition);
 
+                // Ensure panel has an id (Alpine needs one for aria-labelledby on buttons)
+                if (!panel.element.id) panel.element.id = panel.id;
+
+                // ARIA: role + label + focusable
+                panel.element.setAttribute('role', 'tabpanel');
+                if (!panel.element.hasAttribute('tabindex')) {
+                    panel.element.setAttribute('tabindex', '0');
+                }
+                const labelledBy = buttonIdByTabValue[panel.id];
+                if (labelledBy) panel.element.setAttribute('aria-labelledby', labelledBy);
+
                 // Remove x-tabpanel attribute since we've converted it
                 panel.element.removeAttribute('x-tabpanel');
             });
@@ -129,10 +163,57 @@ function initializeTabsPlugin() {
                 const clickHandler = `${tabProp} = '${tabValue}'`;
                 button.setAttribute('x-on:click', clickHandler);
 
+                // ARIA: role, selection state (reactive via :aria-selected), controls
+                button.setAttribute('role', 'tab');
+                button.setAttribute(':aria-selected', `String(${tabProp} === '${tabValue}')`);
+                // Roving tabindex: -1 when not active so arrow keys, not Tab, move between tabs.
+                button.setAttribute(':tabindex', `${tabProp} === '${tabValue}' ? '0' : '-1'`);
+                const panel = panels.find((p) => p.id === tabValue);
+                if (panel && panel.element.id) {
+                    button.setAttribute('aria-controls', panel.element.id);
+                }
+
                 // Remove x-tab attribute since we've converted it
                 button.removeAttribute('x-tab');
             });
 
+            // Find the tablist container — closest common ancestor of all relevant
+            // buttons. If they share a direct parent that's the tablist; otherwise
+            // walk up until one wraps them all. Set role="tablist" + a keydown
+            // handler that walks the focusable tabs on Left/Right/Home/End.
+            if (relevantButtons.length > 0) {
+                let tablistEl = relevantButtons[0].parentElement;
+                while (tablistEl && tablistEl !== document.body) {
+                    if (relevantButtons.every((b) => tablistEl.contains(b))) break;
+                    tablistEl = tablistEl.parentElement;
+                }
+                if (tablistEl) {
+                    tablistEl.setAttribute('role', 'tablist');
+                    if (!tablistEl.__mnfstTabsKeydown) {
+                        tablistEl.__mnfstTabsKeydown = (e) => {
+                            const target = e.target;
+                            if (!target || target.getAttribute('role') !== 'tab') return;
+                            const tabs = Array.from(tablistEl.querySelectorAll('[role="tab"]'));
+                            const idx = tabs.indexOf(target);
+                            if (idx === -1) return;
+                            let nextIdx = null;
+                            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') nextIdx = (idx + 1) % tabs.length;
+                            else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') nextIdx = (idx - 1 + tabs.length) % tabs.length;
+                            else if (e.key === 'Home') nextIdx = 0;
+                            else if (e.key === 'End') nextIdx = tabs.length - 1;
+                            if (nextIdx == null) return;
+                            e.preventDefault();
+                            // Automatic activation: focusing a tab selects it. This matches
+                            // the most common APG variant and Manifest's existing click-to-
+                            // activate semantics.
+                            tabs[nextIdx].focus();
+                            tabs[nextIdx].click();
+                        };
+                        tablistEl.addEventListener('keydown', tablistEl.__mnfstTabsKeydown);
+                    }
+                }
+            }
+
             // Ensure Alpine processes the updated x-data and x-show attributes
             if (window.Alpine && typeof window.Alpine.initTree === 'function') {
                 // If the parent already has Alpine initialized, we need to update it

package/lib/manifest.theme.css

@@ -1,6 +1,6 @@
 /*  Manifest Theme CSS
 /*  By Andrew Matlock under MIT license
-/*  https://manifestjs.org/styles/theme
+/*  https://manifestx.dev/styles/theme
 /*  Modify values to customize your project theme
 */
 

package/lib/manifest.toasts.js

@@ -32,7 +32,14 @@ function initializeToastPlugin() {
 
         // Create toast element
         const toast = document.createElement('div');
-        toast.setAttribute('role', 'alert');
+        // A11y: route by type. "negative" (and forward-compat "error" / "warning")
+        // interrupt with role="alert" (assertive live region). All other types —
+        // default, "brand", "accent", "positive" — use role="status" (polite)
+        // so screen readers finish what they're saying before announcing,
+        // matching the toast's intent as a non-urgent confirmation.
+        const isAssertive = type === 'negative' || type === 'error' || type === 'warning';
+        toast.setAttribute('role', isAssertive ? 'alert' : 'status');
+        if (!isAssertive) toast.setAttribute('aria-live', 'polite');
         toast.setAttribute('class', type ? `toast ${type}` : 'toast');
 
         // Create content with optional icon

package/lib/manifest.tooltips.js

@@ -155,6 +155,19 @@ function initializeTooltipPlugin() {
         s.activeTrigger = trigger;
         s.currentAnchorName = anchorName;
 
+        // A11y: link the trigger to the tooltip so screen readers announce the
+        // tooltip text as a description when the trigger receives focus or hover.
+        // Per WAI-ARIA, aria-describedby is the standard for this relationship.
+        if (!s.el.id) s.el.id = 'mnfst-tooltip-' + Math.random().toString(36).slice(2, 9);
+        s.el.setAttribute('role', 'tooltip');
+        // Preserve any author-provided aria-describedby so we don't stomp it.
+        if (!trigger._tooltipPriorDescribedBy) {
+            trigger._tooltipPriorDescribedBy = trigger.getAttribute('aria-describedby') || '';
+        }
+        const prior = trigger._tooltipPriorDescribedBy;
+        const merged = prior ? `${prior} ${s.el.id}` : s.el.id;
+        trigger.setAttribute('aria-describedby', merged);
+
         if (!s.el.matches(':popover-open')) s.el.showPopover();
     }
 
@@ -163,6 +176,16 @@ function initializeTooltipPlugin() {
         document.querySelectorAll('.tooltip[popover="hint"]:popover-open').forEach(el => {
             try { el.hidePopover(); } catch {}
         });
+        // Restore each tooltip's prior aria-describedby on the trigger it had been
+        // bound to. We can't reach the trigger from the popover alone, so we walk
+        // the tooltipped triggers and remove our id from their describedby list.
+        document.querySelectorAll('[aria-describedby]').forEach((el) => {
+            if (!el._tooltipPriorDescribedBy && el._tooltipPriorDescribedBy !== '') return;
+            const prior = el._tooltipPriorDescribedBy;
+            if (prior) el.setAttribute('aria-describedby', prior);
+            else el.removeAttribute('aria-describedby');
+            el._tooltipPriorDescribedBy = undefined;
+        });
         markTooltipHidden();
     }
 
@@ -258,6 +281,11 @@ function initializeTooltipPlugin() {
         el.addEventListener('mouseenter', requestShow);
         el.addEventListener('mouseleave', requestHide);
 
+        // Keyboard / focus interactions — WCAG 2.1 SC 1.4.13 requires tooltip
+        // content to be accessible to keyboard users via focus, not hover only.
+        el.addEventListener('focus', requestShow);
+        el.addEventListener('blur', requestHide);
+
         // Mousedown/click: always hide immediately; scheduleAnchorRestore so the
         // trigger's anchor-name stays valid long enough for any dropdown popover
         // it launches to position itself correctly.

package/lib/manifest.utilities.js

@@ -1205,14 +1205,56 @@ TailwindCompiler.prototype.loadAndApplyCache = function () {
     }
 };
 
-// Save cache to localStorage
+// Cap on persisted cache entries.  Each entry stores a full compiled
+// stylesheet keyed by the union of classes seen on a given page, so on a
+// multi-page MPA this Map grows fast — and localStorage tops out at ~5MB per
+// origin.  20 covers typical hot paths; rarer routes recompile (cheap).
+TailwindCompiler.prototype.MAX_PERSISTED_CACHE_ENTRIES = 20;
+
+// Drop the oldest entries from this.cache until at most `limit` remain.
+// Uses entry.timestamp; entries without one are evicted first.
+TailwindCompiler.prototype.evictOldestCacheEntries = function (limit) {
+    if (this.cache.size <= limit) return;
+    const sorted = Array.from(this.cache.entries())
+        .sort((a, b) => (a[1].timestamp || 0) - (b[1].timestamp || 0));
+    const toRemove = sorted.length - limit;
+    for (let i = 0; i < toRemove; i++) {
+        this.cache.delete(sorted[i][0]);
+    }
+};
+
+// Save cache to localStorage with size cap and quota-aware eviction.
 TailwindCompiler.prototype.savePersistentCache = function () {
-    try {
-        const serialized = JSON.stringify(Object.fromEntries(this.cache));
-        localStorage.setItem('tailwind-cache', serialized);
-    } catch (error) {
-        console.warn('Failed to save cached styles:', error);
+    // Proactive cap so we don't write something we know is at risk.
+    this.evictOldestCacheEntries(this.MAX_PERSISTED_CACHE_ENTRIES);
+    let attempts = 0;
+    while (this.cache.size > 0 && attempts < 4) {
+        try {
+            const serialized = JSON.stringify(Object.fromEntries(this.cache));
+            localStorage.setItem('tailwind-cache', serialized);
+            return;
+        } catch (error) {
+            // QuotaExceededError (name varies by browser): drop the oldest
+            // half and retry.  Anything else: bail.
+            const isQuotaError =
+                error && (
+                    error.name === 'QuotaExceededError' ||
+                    error.code === 22 ||
+                    error.code === 1014 // Firefox: NS_ERROR_DOM_QUOTA_REACHED
+                );
+            if (!isQuotaError) {
+                console.warn('Failed to save cached styles:', error);
+                return;
+            }
+            const halved = Math.max(1, Math.floor(this.cache.size / 2));
+            this.evictOldestCacheEntries(halved);
+            attempts++;
+        }
     }
+    // Last resort: cache is unusable in this origin right now, clear the slot
+    // so the next session starts clean.  This is a perf optimization, not
+    // correctness — drop quietly.
+    try { localStorage.removeItem('tailwind-cache'); } catch (_) {}
 };
 
 // Load cache from localStorage

package/package.json

@@ -1,10 +1,12 @@
 {
     "name": "mnfst",
-    "version": "0.5.69",
+    "version": "0.5.71",
     "private": false,
     "workspaces": [
         "templates/starter",
-        "packages/render"
+        "packages/render",
+        "packages/types",
+        "packages/test"
     ],
     "main": "lib/manifest.js",
     "style": "lib/manifest.css",
@@ -28,8 +30,10 @@
         "release": "npm version patch --no-git-tag-version && npm publish",
         "release:run": "cd packages/run && npm version patch --no-git-tag-version && npm publish --auth-type=web",
         "release:render": "cd packages/render && npm version patch --no-git-tag-version && npm publish --auth-type=web",
+        "release:types": "cd packages/types && npm version patch --no-git-tag-version && npm publish --auth-type=web",
+        "release:test": "cd packages/test && npm version patch --no-git-tag-version && npm publish --auth-type=web",
         "release:starter": "cd packages/create-starter && npm version patch --no-git-tag-version && npm publish --auth-type=web",
-        "release:all": "npm run release:run && npm run release:render && npm run release:starter && npm run release",
+        "release:all": "npm run release:run && npm run release:render && npm run release:types && npm run release:test && npm run release:starter && npm run release",
         "prepublishOnly": "npm run build",
         "test": "vitest run",
         "lint": "echo 'No linting configured'"
@@ -60,7 +64,7 @@
     "author": "Andrew Matlock",
     "license": "MIT",
     "description": "A modern, lightweight frontend framework with built-in components and utilities",
-    "homepage": "https://manifestjs.org",
+    "homepage": "https://manifestx.dev",
     "repository": {
         "type": "git",
         "url": "https://github.com/Manifest-X/Manifest.git"