mnfst 0.5.68 → 0.5.70

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.68",
+    "version": "0.5.70",
     "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"

package/lib/manifest.themes.js

@@ -1,109 +0,0 @@
-/* Manifest Themes */
-
-// Initialize plugin when either DOM is ready or Alpine is ready
-function initializeThemePlugin() {
-
-    // Initialize theme state with Alpine reactivity
-    const theme = Alpine.reactive({
-        current: localStorage.getItem('theme') || 'system'
-    })
-
-    // Apply initial theme
-    applyTheme(theme.current)
-
-    // Setup system theme listener
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    mediaQuery.addEventListener('change', () => {
-        if (theme.current === 'system') {
-            applyTheme('system')
-        }
-    })
-
-    // Register theme directive
-    Alpine.directive('theme', (el, { expression }, { evaluate, cleanup }) => {
-
-        const handleClick = () => {
-            const newTheme = expression === 'toggle'
-                ? (document.documentElement.classList.contains('dark') ? 'light' : 'dark')
-                : evaluate(expression)
-            setTheme(newTheme)
-        }
-
-        el.addEventListener('click', handleClick)
-        cleanup(() => el.removeEventListener('click', handleClick))
-    })
-
-    // Add $theme magic method
-    Alpine.magic('theme', () => ({
-        get current() {
-            return theme.current
-        },
-        set current(value) {
-            setTheme(value)
-        }
-    }))
-
-    function setTheme(newTheme) {
-        if (newTheme === 'toggle') {
-            newTheme = theme.current === 'light' ? 'dark' : 'light'
-        }
-
-        // Update theme state
-        theme.current = newTheme
-        localStorage.setItem('theme', newTheme)
-
-        // Apply theme
-        applyTheme(newTheme)
-    }
-
-    function applyTheme(theme) {
-        const isDark = theme === 'system'
-            ? window.matchMedia('(prefers-color-scheme: dark)').matches
-            : theme === 'dark'
-
-        // Update document classes
-        document.documentElement.classList.remove('light', 'dark')
-        document.documentElement.classList.add(isDark ? 'dark' : 'light')
-
-        // Update meta theme-color
-        const metaThemeColor = document.querySelector('meta[name="theme-color"]')
-        if (metaThemeColor) {
-            metaThemeColor.setAttribute('content', isDark ? '#000000' : '#FFFFFF')
-        }
-    }
-}
-
-// Track initialization to prevent duplicates
-let themePluginInitialized = false;
-
-function ensureThemePluginInitialized() {
-    if (themePluginInitialized) return;
-    if (!window.Alpine || typeof window.Alpine.directive !== 'function') return;
-
-    themePluginInitialized = true;
-    initializeThemePlugin();
-}
-
-// Expose on window for loader to call if needed
-window.ensureThemePluginInitialized = ensureThemePluginInitialized;
-
-// Handle both DOMContentLoaded and alpine:init
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', ensureThemePluginInitialized);
-}
-
-document.addEventListener('alpine:init', ensureThemePluginInitialized);
-
-// If Alpine is already initialized when this script loads, initialize immediately
-if (window.Alpine && typeof window.Alpine.directive === 'function') {
-    setTimeout(ensureThemePluginInitialized, 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();
-        }
-    }, 10);
-    setTimeout(() => clearInterval(checkAlpine), 5000);
-}