mnfst 0.5.171 → 0.5.172

package/lib/manifest.charts.js

@@ -649,25 +649,31 @@
 			const thickness = Math.max(8, r * 0.22);
 			const cx = width / 2, cy = Math.max(PAD, (height - (r + labelBand)) / 2) + r;
 			const g = svg('g', { transform: `translate(${cx},${cy})` }, root);
-			const arc = d3.arc().innerRadius(r - thickness).outerRadius(r).cornerRadius(cssRadius(state.el));
+			// Bands are drawn with square (butt) ends so zone/value joins stay flush;
+			// the whole dial is then clipped to a single rounded full-sweep arc, so
+			// only its two outer corners are rounded — not each interior segment.
+			const arc = d3.arc().innerRadius(r - thickness).outerRadius(r);
+			const clipId = 'mnfst-gauge-' + (++_uid);
+			svg('path', { d: d3.arc().innerRadius(r - thickness).outerRadius(r).cornerRadius(cssRadius(state.el))({ startAngle: START, endAngle: END }) }, svg('clipPath', { id: clipId }, svg('defs', null, root)));
+			const ring = svg('g', { 'clip-path': `url(#${clipId})` }, g);
 
 			// Track, or threshold zone bands when `zones` is given.
 			if (Array.isArray(cfg.zones) && cfg.zones.length) {
 				let from = min;
 				cfg.zones.forEach((z, i) => {
 					const to = num(z.to, max);
-					svg('path', { class: 'gauge-track', d: arc({ startAngle: scale(from), endAngle: scale(to) }), style: `--color-chart-color:${z.color || seriesColorVar(i)}`, opacity: 0.35 }, g);
+					svg('path', { class: 'gauge-track', d: arc({ startAngle: scale(from), endAngle: scale(to) }), style: `--color-chart-color:${z.color || seriesColorVar(i)}`, opacity: 0.35 }, ring);
 					from = to;
 				});
 			} else {
-				svg('path', { class: 'gauge-track', d: arc({ startAngle: START, endAngle: END }) }, g);
+				svg('path', { class: 'gauge-track', d: arc({ startAngle: START, endAngle: END }) }, ring);
 			}
 
 			// Value arc — final geometry set unconditionally, so a background tab that
 			// skips the fade reveal still renders correctly.
 			const color = (cfg.series[0] && cfg.series[0].color) || 'var(--color-chart-1)';
 			const valueAngle = scale(value);
-			const vArc = svg('path', { class: 'gauge-value', d: arc({ startAngle: START, endAngle: valueAngle }), style: `--color-chart-color:${color}` }, g);
+			const vArc = svg('path', { class: 'gauge-value', d: arc({ startAngle: START, endAngle: valueAngle }), style: `--color-chart-color:${color}` }, ring);
 			applyTip(vArc, (cfg.title ? cfg.title + ': ' : '') + value + unit, cfg);
 			animate(vArc, [{ opacity: 0 }, { opacity: 1 }], { duration: 500 });
 

package/lib/manifest.combobox.js

@@ -67,22 +67,34 @@ function initializeComboboxPlugin() {
     const rand = () => Math.random().toString(36).slice(2, 9);
     const ui = () => window.ManifestUI ? window.ManifestUI.resolve('combobox', UI_FALLBACK) : UI_FALLBACK;
 
+    // Alpine binding attributes — never carried onto combobox-owned clones
+    const isBinding = (n) => n[0] === ':' || n[0] === '@' || n.indexOf('x-') === 0;
+
     // Read options from a source element (datalist/select → option, menu → li)
     function readOptions(src) {
         if (!src) return [];
         if (src.tagName === 'MENU') {
-            return Array.from(src.querySelectorAll('li')).map(li => ({
-                value: li.dataset.value != null ? li.dataset.value : li.textContent.trim(),
-                label: li.dataset.label || li.textContent.trim(),
-                pattern: li.dataset.pattern || null,
-                locked: li.hasAttribute('data-locked'),
-                html: li.innerHTML,
-                // Carry the row's own attributes into the option, minus combobox-managed
-                // ones and Alpine bindings (x-/:/@ reference the source's scope, not the clone).
-                attrs: Array.from(li.attributes)
-                    .filter(a => { const n = a.name; return n !== 'role' && n !== 'id' && n !== 'aria-selected' && n[0] !== ':' && n[0] !== '@' && n.indexOf('x-') !== 0; })
-                    .map(a => [a.name, a.value])
-            }));
+            return Array.from(src.querySelectorAll('li')).map(li => {
+                // The clone is a rendered snapshot: strip Alpine bindings (x-/:/@) from the
+                // WHOLE subtree, not just the row — they reference the source's x-for scope
+                // and would throw when Alpine walks the combobox-owned copy. The computed
+                // results (style, class, text) are already baked in and survive.
+                const copy = li.cloneNode(true);
+                copy.querySelectorAll('*').forEach(n => {
+                    Array.from(n.attributes).forEach(a => { if (isBinding(a.name)) n.removeAttribute(a.name); });
+                });
+                return {
+                    value: li.dataset.value != null ? li.dataset.value : li.textContent.trim(),
+                    label: li.dataset.label || li.textContent.trim(),
+                    pattern: li.dataset.pattern || null,
+                    locked: li.hasAttribute('data-locked'),
+                    html: copy.innerHTML,
+                    // Carry the row's own attributes into the option, minus combobox-managed ones.
+                    attrs: Array.from(li.attributes)
+                        .filter(a => { const n = a.name; return n !== 'role' && n !== 'id' && n !== 'aria-selected' && !isBinding(n); })
+                        .map(a => [a.name, a.value])
+                };
+            });
         }
         return Array.from(src.querySelectorAll('option')).map(o => ({
             value: o.value || o.textContent.trim(),
@@ -308,7 +320,10 @@ function initializeComboboxPlugin() {
             // stays a data layer x-for/$x can own (reread below mirrors it), the combobox
             // owns the listbox. readOptions keeps each row's innerHTML, preserving markup.
             menu = document.createElement('menu');
-            document.body.appendChild(menu);   // anchor positioning needs it out of overflow contexts
+            menu.setAttribute('x-ignore', '');  // plugin-owned rows — Alpine must never walk them
+            // Nearest popover host, so an outer auto popover isn't light-dismissed
+            // by listbox clicks; body otherwise (out of overflow contexts either way).
+            (el.closest('[popover]') || document.body).appendChild(menu);
             generatedMenu = menu;               // tracked so cleanup() can remove it on re-render
             if (src) src.style.setProperty('display', 'none', 'important');
             menu.setAttribute('popover', 'manual');

package/lib/manifest.css

@@ -28,7 +28,13 @@
         overflow-wrap: break-word;
         -moz-tab-size: 4;
         -o-tab-size: 4;
-        tab-size: 4
+        tab-size: 4;
+
+        /* Device safe-area insets (0 unless viewport-fit=cover on a notched screen) */
+        --safe-top: env(safe-area-inset-top, 0px);
+        --safe-right: env(safe-area-inset-right, 0px);
+        --safe-bottom: env(safe-area-inset-bottom, 0px);
+        --safe-left: env(safe-area-inset-left, 0px)
     }
 
     :where(html),
@@ -2640,6 +2646,63 @@
     }
 }
 
+/* Manifest Dock */
+
+@layer components {
+
+    /* Fixed bottom navigation bar. Best practice: <nav dock aria-label="Primary">.
+       Physics (fixed + safe-area + item layout) baked in; skin is themeable via
+       the --dock-* variables. Edge-to-edge by default; set --dock-inset (+ radius)
+       to float it. */
+    :where([dock]) {
+        position: fixed;
+        z-index: 40;
+        inset-inline: var(--dock-inset, 0px);
+        bottom: var(--dock-inset, 0px);
+        display: flex;
+        align-items: stretch;
+        justify-content: space-around;
+        gap: var(--dock-gap, 0px);
+        /* Clear the home indicator in both modes: total bottom clearance == --safe-bottom */
+        padding-bottom: max(calc(var(--safe-bottom, 0px) - var(--dock-inset, 0px)), 0px);
+        background: var(--dock-surface, var(--color-surface-1, oklch(96.7% 0 0)));
+        border-top: var(--dock-border-top, 1px solid var(--color-line, color-mix(in oklch, currentColor 11%, transparent)));
+        border-radius: var(--dock-radius, 0px);
+        box-shadow: var(--dock-shadow, none)
+    }
+
+    /* Dock items */
+    :where([dock] > a, [dock] > button) {
+        flex: 1 1 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.125rem;
+        min-height: 3.25rem;
+        padding: 0.375rem 0.25rem;
+        background: transparent;
+        color: var(--color-content-subtle, oklch(55.6% 0 0));
+        font-size: 0.6875rem;
+        line-height: 1.1;
+        text-decoration: none
+    }
+
+    /* Dock icons */
+    :where([dock] :is([x-icon], svg, img)) {
+        width: 1.375rem;
+        height: 1.375rem;
+        font-size: 1.375rem
+    }
+
+    /* Active item — a hook, not a look (bind :aria-current="$route === '/x' ? 'page' : null') */
+    [dock] > a[aria-current="page"],
+    [dock] > button[aria-current="page"],
+    [dock] > .selected {
+        color: var(--color-content-stark, oklch(14.5% 0 0))
+    }
+}
+
 /* Manifest Dropdowns */
 [popover]:not(.unstyle):not(:popover-open) {
     display: none;
@@ -2669,8 +2732,8 @@
         transform-origin: top center;
         overflow-x: hidden;
 
-        /* Options */
-        & :where(li, a, button, [role=button], label):not(.unstyle) {
+        /* Options (labels only when flat items — field wrappers keep form layout) */
+        & :where(li, a, button, [role=button], label:not(:has(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea, .combobox, .label, label))):not(.unstyle) {
             display: inline-flex;
             justify-content: start;
             align-items: center;
@@ -2730,13 +2793,14 @@
             background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
         }
 
-        /* Labels */
-        & label {
+        /* Labels (not inner field-surface wrappers) */
+        & label:not(.unstyle):not(:has(> input[type=search], > input[type=file], > button[command="--copy"])) {
             padding-inline-start: 0.5rem;
             padding-inline-end: 0.5rem;
             cursor: default;
 
-            &:hover {
+            &:hover,
+            &:active {
                 background-color: transparent
             }
 
@@ -2745,8 +2809,9 @@
             }
         }
 
-        /* Inputs and textareas */
-        & :where(input, textarea) {
+        /* Inputs and textareas placed as direct items */
+        &>:where(input, textarea),
+        & :where(li)>:where(input, textarea) {
             flex-shrink: 0;
 
             &:not(:first-child) {
@@ -2774,12 +2839,12 @@
     }
 
     /* Dark theme */
-    :where(.dark menu[popover]) :where(li, a, button, label):hover {
+    :where(.dark menu[popover]) :where(li, a, button, label:not(:has(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea, .combobox, .label, label))):hover {
         background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
     }
 
-    /* Nested menu alignment */
-    :where(menu menu):where(:not(.unstyle)) {
+    /* Nested menu alignment (not combobox listboxes, which anchor to their field) */
+    :where(menu menu:not([role=listbox])):where(:not(.unstyle)) {
         position-area: span-end end;
         margin: 0 var(--spacing-popover-offset, 0.5rem)
     }
@@ -5649,4 +5714,31 @@
     html[data-os="ios"] .no-ios { display: none !important }
     html[data-os="android"] .no-android { display: none !important }
     html[data-os="macos"] .no-apple, html[data-os="ios"] .no-apple { display: none !important }
+
+    /* Visibility — connectivity & container (html[data-*] set by the $device signal) */
+    html:not([data-online="false"]) .offline-only { display: none !important }
+    html[data-online="false"] .online-only { display: none !important }
+    html:not([data-standalone]) .standalone-only { display: none !important }
+    html:not([data-native]) .native-only { display: none !important }
+    html[data-native] .web-only { display: none !important }
+
+    /* Safe-area padding (var --safe-* is 0 unless viewport-fit=cover on a notched screen) */
+    :where(.pt-safe) { padding-top: var(--safe-top) }
+    :where(.pr-safe) { padding-right: var(--safe-right) }
+    :where(.pb-safe) { padding-bottom: var(--safe-bottom) }
+    :where(.pl-safe) { padding-left: var(--safe-left) }
+    :where(.px-safe) { padding-left: var(--safe-left); padding-right: var(--safe-right) }
+    :where(.py-safe) { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom) }
+    :where(.p-safe) { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left) }
+
+    /* Dynamic viewport height (avoids the mobile 100vh browser-chrome jump) */
+    :where(.min-h-dvh) { min-height: 100dvh }
+    :where(.h-dvh) { height: 100dvh }
+
+    /* Native — suppress web tells (opt-in) */
+    :where(.no-callout) { -webkit-touch-callout: none }
+    :where(.no-select) { -webkit-user-select: none; user-select: none }
+    :where(.no-tap-zoom) { touch-action: manipulation }
+    :where(.no-overscroll) { overscroll-behavior: none }
+    :where(.no-overscroll-y) { overscroll-behavior-y: none }
 }

package/lib/manifest.dropdown.css

@@ -45,8 +45,8 @@
         transform-origin: top center;
         overflow-x: hidden;
 
-        /* Options */
-        & :where(li, a, button, [role=button], label):not(.unstyle) {
+        /* Options (labels only when flat items — field wrappers keep form layout) */
+        & :where(li, a, button, [role=button], label:not(:has(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea, .combobox, .label, label))):not(.unstyle) {
             display: inline-flex;
             justify-content: start;
             align-items: center;
@@ -106,13 +106,14 @@
             background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
         }
 
-        /* Labels */
-        & label {
+        /* Labels (not inner field-surface wrappers) */
+        & label:not(.unstyle):not(:has(> input[type=search], > input[type=file], > button[command="--copy"])) {
             padding-inline-start: 0.5rem;
             padding-inline-end: 0.5rem;
             cursor: default;
 
-            &:hover {
+            &:hover,
+            &:active {
                 background-color: transparent
             }
 
@@ -121,8 +122,9 @@
             }
         }
 
-        /* Inputs and textareas */
-        & :where(input, textarea) {
+        /* Inputs and textareas placed as direct items */
+        &>:where(input, textarea),
+        & :where(li)>:where(input, textarea) {
             flex-shrink: 0;
 
             &:not(:first-child) {
@@ -150,12 +152,12 @@
     }
 
     /* Dark theme */
-    :where(.dark menu[popover]) :where(li, a, button, label):hover {
+    :where(.dark menu[popover]) :where(li, a, button, label:not(:has(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea, .combobox, .label, label))):hover {
         background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
     }
 
-    /* Nested menu alignment */
-    :where(menu menu):where(:not(.unstyle)) {
+    /* Nested menu alignment (not combobox listboxes, which anchor to their field) */
+    :where(menu menu:not([role=listbox])):where(:not(.unstyle)) {
         position-area: span-end end;
         margin: 0 var(--spacing-popover-offset, 0.5rem)
     }

package/lib/manifest.integrity.json

@@ -2,12 +2,12 @@
   "manifest.appwrite.auth.js": "sha384-mHMJ2sVgZ82AdmLXK6ZyUpkWyX6KOtmIf5P/ribCUb2ejtvu/lwMhB68IgAcy9po",
   "manifest.appwrite.data.js": "sha384-KFKVo5TQESLJB7wgk+C8Zb/sAl43QAMdioWW3tQRWYq5umfdpGCZ5Hld9y9f6/Np",
   "manifest.appwrite.presences.js": "sha384-JyVDWFT69b7Svq8J8p9tNWe2v9PZNQBY5UyhtOl1vnuHFAX0CRQ3MA9SiKq5wzNh",
-  "manifest.charts.js": "sha384-wTQlB3hJ9V9lmisCgm8l6YkpJV+nA4+Vci3dI0x1nBtWnS9TFr+eXaJelP7AusyD",
+  "manifest.charts.js": "sha384-qQrjhWkIDi4oU5uQrpy8DdlMjY+gfiivBuX6mssNiFdkawgkVBvKneGgp+nd3PYJ",
   "manifest.chat.js": "sha384-3+eva9YYz5DrdS3DeRGw9oXH/CreuYX+ZHHtYP25vmnYDHiEpFf9nEGLvwSHBXjz",
   "manifest.code.js": "sha384-G3MNfvQRWWY+gm4SGGrSsgQbDeil9MP+ON2DTk6Rcq9Nsex8woHMDt5EJHrFH0Nj",
   "manifest.color.js": "sha384-6Rv3LxyTcZNjrhtayQfqRdCx0uSZ4BiEbgEI98I62eTvp8Aw7LBIoNJ0Je1oktwL",
   "manifest.colorpicker.js": "sha384-N5ezEwgKrDodV4YdURxhdyZKmg1n/QhqvmAC4SEG03mw1pEAZAA8Gphp+NLAOxts",
-  "manifest.combobox.js": "sha384-ZPOkx4hKGlcrOqeb3MmWLyBfjZXlnkP47Yc9VLE7yHds6dXRqMeB5DPFeJl3NZS/",
+  "manifest.combobox.js": "sha384-iJpm6Ufqrmm+zdl1YjPUeBkv60gMUxxe/P4Da9rNBuLyo04wkijU7KHxS/W7IG3Q",
   "manifest.components.js": "sha384-eZDib+RFdwd9mOUdi6o53eNS0LBlEEkZPDegxtkAcE+GrGIFxsuB4O0ymfixGNfM",
   "manifest.data.js": "sha384-3lLvGnqcQr4Ium80MdaQTr8RytjVbs5rnxd0q41BF3ppcoQccMFAcvgFSyZP/0sl",
   "manifest.datepicker.js": "sha384-e6rJI0BxuE+AyI96/u6XoeOstsxLuQTO6+wYSr6rm2aKhOP2APM2xJqTz//0v4Pw",
@@ -16,6 +16,7 @@
   "manifest.icons.js": "sha384-kKOINpX70YzNO3FvkV6umrmO3f0KIu0DNbwB+ej55a7y/lhU7v/myQtXL0bwCTbt",
   "manifest.localization.js": "sha384-MUetuW8PllIM+9JDMw/tx+qGem8t+ZUN5WZpycsTDKtz+LaX4DJehsfh/YZt9J7L",
   "manifest.markdown.js": "sha384-qlhYOzX0nl8HzuaiMVTkIhsma9mv3PlEvHO2S0AzshgmIcdZFvth6/sbHPCe5Zwr",
+  "manifest.native.js": "sha384-4WfuciRjqrfDLpHXp91AKQUTt8FDHaupSuVErRgdeaeoHf5d1CfHWqBd/aCOduDk",
   "manifest.payments.js": "sha384-vhG1ZL3wGzb0vt0ygJJQF3jVQumMuvc2smGjYezuyQ+auN+MN9HY2k5NW2bdClxl",
   "manifest.resize.js": "sha384-S3v4RAJoA77LUH6MddYG9bx//dZX//up7XWeH69Ql2ge3bVHgC6mR/CJBe6y4nQI",
   "manifest.router.js": "sha384-oV0lwFkeevEWjRCC/VV2OzkjNdE70owBz+pwKqZzx5bqbx5/1PORW+ndCClEqSgS",
@@ -27,7 +28,7 @@
   "manifest.toasts.js": "sha384-ytd5rDbax/Ou9z23uedFXPZbxDPsk2E/pxCTq4WLvfv+os1qTI6kELp0kPp07g24",
   "manifest.tooltips.js": "sha384-HeJ0BGK3ebut1t8lm+MGeUUxd1pOZDyX8e6HFLsa4kAiRL+LwGDr67ckkRqv7to1",
   "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
-  "manifest.utilities.js": "sha384-MtzNaVOrgyepjlY5nz38pAJk67yiFPU1H5WoPNfcNbUZTXy+oin1lrtKCIcobEOJ",
+  "manifest.utilities.js": "sha384-yLEqEbd1FncqswrtrcTO7KrIEK4iP0ZvqCi64XLI7D77/L0YiJbjLdLGGg6l7rgN",
   "manifest.virtual.js": "sha384-c194pXD0Ld48QJ+HPVNibvbn54/ETJRuYhUOWesEBjtOIQcQMIKo0DnCyQMvDlLg",
-  "manifest.js": "sha384-RusFaByZu31LkLZCAhjgtJC8iWksvmjTKS8D5Xj9/4N7B/Xr4DDyFGmiL23kajgK"
+  "manifest.js": "sha384-FLz68HEE8hEVLlAsoAX2+5cWBrhS5+B24rdJy5obXtP5U5bJKCswjbIQL8MpDUFZ"
 }

package/lib/manifest.js

@@ -265,7 +265,8 @@
 	// Plugin dependencies: plugins that require other plugins to be loaded first
 	const PLUGIN_DEPENDENCIES = {
 		'appwrite-data': ['data'],
-		'appwrite-presences': ['data', 'appwrite-auth']
+		'appwrite-presences': ['data', 'appwrite-auth'],
+		'native': ['utilities']
 	};
 
 	// Derive default plugin list from manifest (only load data/localization/components when manifest needs them)
@@ -488,6 +489,14 @@
 		return [];
 	}
 
+	// Detect the native umbrella plugin. Auto-loaded inside a Capacitor container
+	// (window.Capacitor present) or when a `native` config block opts in on the web.
+	function detectNativePlugins(manifest) {
+		if (typeof window !== 'undefined' && window.Capacitor) return ['native'];
+		if (manifest && typeof manifest === 'object' && manifest.native && typeof manifest.native === 'object') return ['native'];
+		return [];
+	}
+
 	// Parse data attributes
 	function parseDataAttributes() {
 		// Try to get current script first, then fall back to querySelector
@@ -560,7 +569,7 @@
 	// Expose API
 	window.Manifest = {
 		loadPlugin: function (pluginName, version = DEFAULT_VERSION) {
-			const allPlugins = [...AVAILABLE_PLUGINS, ...APPWRITE_PLUGINS, 'payments', 'chat'];
+			const allPlugins = [...AVAILABLE_PLUGINS, ...APPWRITE_PLUGINS, 'payments', 'chat', 'native'];
 			if (!allPlugins.includes(pluginName)) {
 				console.warn(`[Manifest Loader] Unknown plugin: ${pluginName}`);
 				return Promise.reject(new Error(`Unknown plugin: ${pluginName}`));
@@ -654,12 +663,18 @@
 				const appwritePlugins = detectAppwritePlugins(manifest);
 				const paymentsPlugins = detectPaymentsPlugins(manifest);
 				const chatPlugins = detectChatPlugins(manifest);
-				pluginsToLoad = resolveDependencies([...corePlugins, ...appwritePlugins, ...paymentsPlugins, ...chatPlugins]);
+				const nativePlugins = detectNativePlugins(manifest);
+				pluginsToLoad = resolveDependencies([...corePlugins, ...appwritePlugins, ...paymentsPlugins, ...chatPlugins, ...nativePlugins]);
 			} else {
 				const needsManifest = config.plugins.some(p => MANIFEST_DEPENDENT_PLUGINS.includes(p));
 				if (needsManifest) {
 					manifestPromise = fetch(manifestUrl).then(r => r.ok ? r.json() : null).catch(() => null);
 				}
+				// Inside a Capacitor container, ensure the native umbrella loads even on
+				// the explicit data-plugins path (matches the derive-path auto-inject).
+				if (typeof window !== 'undefined' && window.Capacitor && !pluginsToLoad.includes('native')) {
+					pluginsToLoad = resolveDependencies([...pluginsToLoad, 'native']);
+				}
 			}
 
 			const pluginPromises = pluginsToLoad.map(pluginName => {