mnfst 0.5.115 → 0.5.117

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/manifest.components.js +16 -13
  2. package/lib/manifest.integrity.json +2 -2
  3. package/lib/manifest.js +10 -0
  4. package/lib/manifest.theme.css +54 -75
  5. package/package.json +1 -1
package/lib/manifest.components.js CHANGED
@@ -51,22 +51,23 @@ window.ManifestComponentsRegistry = {
51
51
  manifest: null,
52
52
  registered: new Set(),
53
53
  preloaded: [],
54
- initialize() {
55
- // Use loader-provided manifest if set; otherwise load synchronously (standalone)
54
+ async initialize() {
55
+ // Use loader-provided manifest if set; otherwise fetch it (standalone
56
+ // usage, or a boot race where the loader/data plugin hasn't cached the
57
+ // manifest on window yet). This must be async — a synchronous XHR on
58
+ // the main thread is deprecated and was flagged by PageSpeed.
56
59
  let manifest = window.__manifestLoaded || this.manifest;
57
60
  if (!manifest) {
58
61
  try {
59
62
  const manifestUrl = (document.querySelector('link[rel="manifest"]')?.getAttribute('href')) || '/manifest.json';
60
- const req = new XMLHttpRequest();
61
- req.open('GET', manifestUrl + (manifestUrl.includes('?') ? '&' : '?') + 't=' + Date.now(), false);
62
- req.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
63
- req.setRequestHeader('Pragma', 'no-cache');
64
- req.setRequestHeader('Expires', '0');
65
- req.send(null);
66
- if (req.status === 200) {
67
- manifest = JSON.parse(req.responseText);
63
+ const res = await fetch(manifestUrl + (manifestUrl.includes('?') ? '&' : '?') + 't=' + Date.now(), {
64
+ cache: 'no-store',
65
+ headers: { 'Cache-Control': 'no-cache' }
66
+ });
67
+ if (res.ok) {
68
+ manifest = await res.json();
68
69
  } else {
69
- console.warn('[Manifest] Failed to load manifest.json (HTTP', req.status + ')');
70
+ console.warn('[Manifest] Failed to load manifest.json (HTTP', res.status + ')');
70
71
  }
71
72
  } catch (e) {
72
73
  console.warn('[Manifest] Failed to load manifest.json:', e.message);
@@ -799,8 +800,10 @@ window.ManifestComponentsMutation = {
799
800
  };
800
801
 
801
802
  // Main initialization for Manifest Components
802
- function initializeComponents() {
803
- if (window.ManifestComponentsRegistry) window.ManifestComponentsRegistry.initialize();
803
+ async function initializeComponents() {
804
+ // Registry.initialize() may fetch manifest.json (async) when the loader
805
+ // hasn't cached it yet; await it so the steps below see registry.manifest.
806
+ if (window.ManifestComponentsRegistry) await window.ManifestComponentsRegistry.initialize();
804
807
  if (window.ManifestComponentsLoader) window.ManifestComponentsLoader.initialize();
805
808
  if (window.ManifestComponentsProcessor) window.ManifestComponentsProcessor.initialize();
806
809
  if (window.ManifestComponentsSwapping) window.ManifestComponentsSwapping.initialize();
package/lib/manifest.integrity.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "manifest.code.js": "sha384-0uQckfvrEyDVV1Er8SpciZM5egnBzgJG4QFl7ZNdFOWiNLkENeLcRjJKzPLlQO6G",
6
6
  "manifest.color.js": "sha384-Z9G/lzt0vVMxjz4wkPuGG1X9mmQAJR15aOoGX3ephf7r2wnlUWet5GLgkUMtT4vt",
7
7
  "manifest.colorpicker.js": "sha384-0EVn+Ha06h7FIvOxc6WjZYnKYXzi+zba08yKvczSEGTRkWRxyKN2TFrZHI1SDCXu",
8
- "manifest.components.js": "sha384-3dCTD5EwCZTiX+1obYtDNM3WWwPh2JDQUQQsdRUUK3gs6FXjse1ShkKaT/2jsNaI",
8
+ "manifest.components.js": "sha384-73CB1A+LAGfNexkd7aT69APFSHMzix8irse9uzOkYehHHio4px3oR8JHJeaMH+jI",
9
9
  "manifest.data.js": "sha384-pgX6RJRWP7jmWO4ALb+GbS7Gm5JGOrCtxjEOnEcj1aJ8HoGbFjOniyjsntf8IA+B",
10
10
  "manifest.dropdowns.js": "sha384-WMrFoSpKfJuo81dyrwhVrDO8rq+rDwh2x8x4nH01BY5ZHkvjE+/SaT2gWCI0zOn+",
11
11
  "manifest.export.js": "sha384-RsTGzsPCBw3yO4+TdAGd4F+o3FnzUNlqnMBqtnn/kUfv7axpzRdPc2AnsExV/93c",
@@ -22,5 +22,5 @@
22
22
  "manifest.tooltips.js": "sha384-Hhip5ZN66xhDw3m0XBrKLKLpcVRz3Z9RszPKqo6xvFF0mrUgQBVZ+mZjZsXgOOjS",
23
23
  "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
24
24
  "manifest.utilities.js": "sha384-x07Pfi4UxK9tbdcOZgZ5jkveseT1xBUTFtO08ORcokCH64FHsUceoiAICAsRJMle",
25
- "manifest.js": "sha384-AaKRNJvva7ik7bhCXdE5Ic/PYL4mbxJv2hStF+xNaZfBfSiETMuVPtRlPVjgury3"
25
+ "manifest.js": "sha384-S63QjTNS3dG0doW+o2PByZ7ZYY2i1rPGoXQZ5O6k1lViYW+UCn9dSXRhRkguivpg"
26
26
  }
package/lib/manifest.js CHANGED
@@ -37,6 +37,16 @@
37
37
  // Only run on pages the prerender marked as static MPA output.
38
38
  const prerenderMeta = document.querySelector('meta[name="manifest:prerendered"]');
39
39
  if (!prerenderMeta || prerenderMeta.getAttribute('content') === '0') return;
40
+
41
+ // Remove baked x-for/x-if clones the prerender kept for crawlers. Their
42
+ // <template> is still live, so Alpine re-renders the list/conditional on
43
+ // boot; dropping the baked copies first (before Alpine runs) avoids a
44
+ // duplicate render. data-hydrate islands keep their baked DOM.
45
+ document.querySelectorAll('[data-mnfst-prerender-clone]').forEach((el) => {
46
+ if (el.closest && el.closest('[data-hydrate]')) return;
47
+ el.remove();
48
+ });
49
+
40
50
  const blob = document.getElementById('__manifest_hydrate__');
41
51
  if (!blob) return;
42
52
  let entries;
package/lib/manifest.theme.css CHANGED
@@ -7,69 +7,38 @@
7
7
  :root,
8
8
  ::selection {
9
9
 
10
- /* Default palette */
11
- --color-50: oklch(98.5% 0 0);
12
- --color-100: oklch(97% 0 0);
13
- --color-200: oklch(92.2% 0 0);
14
- --color-300: oklch(87% 0 0);
15
- --color-400: oklch(70.8% 0 0);
16
- --color-500: oklch(55.6% 0 0);
17
- --color-600: oklch(43.9% 0 0);
18
- --color-700: oklch(37.1% 0 0);
19
- --color-800: oklch(26.9% 0 0);
20
- --color-900: oklch(20.5% 0 0);
21
- --color-950: oklch(14.5% 0 0);
22
-
23
- /* Brand palette */
24
- --color-brand-300: oklch(90.5% 0.182 98.111);
25
- --color-brand-400: oklch(85.2% 0.199 91.936);
26
- --color-brand-600: oklch(68.1% 0.162 75.834);
27
- --color-brand-700: oklch(55.4% 0.135 66.442);
28
-
29
- /* Positive palette */
30
- --color-positive-300: oklch(87.1% 0.15 154.449);
31
- --color-positive-400: oklch(79.2% 0.209 151.711);
32
- --color-positive-600: oklch(62.7% 0.194 149.214);
33
- --color-positive-700: oklch(52.7% 0.154 150.069);
34
-
35
- /* Negtive palette */
36
- --color-negative-300: oklch(80.8% 0.114 19.571);
37
- --color-negative-400: oklch(70.4% 0.191 22.216);
38
- --color-negative-600: oklch(57.7% 0.245 27.325);
39
- --color-negative-700: oklch(50.5% 0.213 27.518);
40
-
41
10
  /* Light mode */
42
- --color-page: var(--color-50);
43
- --color-surface-1: var(--color-100);
44
- --color-surface-2: var(--color-200);
45
- --color-surface-3: var(--color-300);
46
- --color-content-stark: var(--color-900);
47
- --color-content-neutral: var(--color-600);
48
- --color-content-subtle: var(--color-500);
49
- --color-field-surface: color-mix(var(--color-content-stark) 10%, transparent);
50
- --color-field-surface-hover: color-mix(var(--color-content-stark) 15%, transparent);
11
+ --color-page: var(--color-neutral-50);
12
+ --color-surface-1: var(--color-neutral-100);
13
+ --color-surface-2: var(--color-neutral-200);
14
+ --color-surface-3: var(--color-neutral-300);
15
+ --color-content-stark: var(--color-neutral-900);
16
+ --color-content-neutral: var(--color-neutral-600);
17
+ --color-content-subtle: var(--color-neutral-500);
18
+ --color-field-surface: var(--color-neutral-300);
19
+ --color-field-surface-hover: var(--color-neutral-400);
51
20
  --color-field-inverse: var(--color-content-stark);
52
21
  --color-popover-surface: var(--color-page);
53
- --color-line: color-mix(var(--color-content-stark) 12%, transparent);
54
- --color-brand-surface: var(--color-brand-300);
55
- --color-brand-surface-hover: var(--color-brand-400);
56
- --color-brand-inverse: var(--color-brand-700);
57
- --color-brand-content: var(--color-brand-600);
58
- --color-accent-surface: var(--color-content-stark);
59
- --color-accent-surface-hover: color-mix(var(--color-content-stark) 90%, var(--color-page));
60
- --color-accent-inverse: var(--color-page);
61
- --color-accent-content: var(--color-content-stark);
62
- --color-positive-surface: var(--color-positive-300);
63
- --color-positive-surface-hover: var(--color-positive-400);
64
- --color-positive-inverse: var(--color-positive-700);
65
- --color-positive-content: var(--color-positive-600);
66
- --color-negative-surface: var(--color-negative-300);
67
- --color-negative-surface-hover: var(--color-negative-400);
68
- --color-negative-inverse: var(--color-negative-700);
69
- --color-negative-content: var(--color-negative-600);
22
+ --color-line: color-mix(var(--color-content-stark) 11%, transparent);
23
+ --color-brand-surface: var(--color-yellow-300);
24
+ --color-brand-surface-hover: var(--color-yellow-400);
25
+ --color-brand-inverse: var(--color-yellow-700);
26
+ --color-brand-content: var(--color-yellow-600);
27
+ --color-accent-surface: var(--color-neutral-900);
28
+ --color-accent-surface-hover: var(--color-neutral-700);
29
+ --color-accent-inverse: var(--color-neutral-50);
30
+ --color-accent-content: var(--color-neutral-900);
31
+ --color-positive-surface: var(--color-green-300);
32
+ --color-positive-surface-hover: var(--color-green-400);
33
+ --color-positive-inverse: var(--color-green-800);
34
+ --color-positive-content: var(--color-green-600);
35
+ --color-negative-surface: var(--color-red-300);
36
+ --color-negative-surface-hover: var(--color-red-400);
37
+ --color-negative-inverse: var(--color-red-800);
38
+ --color-negative-content: var(--color-red-600);
70
39
 
71
40
  /* Fonts */
72
- --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
41
+ --font-sans: Manrope, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
73
42
 
74
43
  /* Sizes */
75
44
  --radius: 0.5rem;
@@ -79,7 +48,7 @@
79
48
  --spacing-field-height: calc(var(--spacing) * 9);
80
49
  --spacing-popover-offset: calc(var(--spacing) * 2);
81
50
  --spacing-resize-handle: 1rem;
82
- --spacing-viewport-padding: 5vw;
51
+ --spacing-viewport-padding: 2rem;
83
52
 
84
53
  /* Effects */
85
54
  --transition: all .05s ease-in-out;
@@ -95,22 +64,32 @@
95
64
 
96
65
  /* Dark mode overrides */
97
66
  .dark {
98
- --color-page: var(--color-950);
99
- --color-surface-1: var(--color-900);
100
- --color-surface-2: var(--color-800);
101
- --color-surface-3: var(--color-700);
102
- --color-field-surface: var(--color-700);
103
- --color-field-surface-hover: var(--color-600);
104
- --color-popover-surface: var(--color-900);
105
- --color-content-stark: var(--color-50);
106
- --color-content-neutral: var(--color-400);
107
- --color-content-subtle: var(--color-500);
108
-
109
- /* Popover form elements */
110
- :where([popover]) {
111
- --color-field-surface: color-mix(var(--color-600) 60%, var(--color-700));
112
- --color-field-surface-hover: color-mix(var(--color-600) 80%, var(--color-700))
113
- }
67
+ --color-page: var(--color-neutral-950);
68
+ --color-surface-1: var(--color-neutral-900);
69
+ --color-surface-2: var(--color-neutral-800);
70
+ --color-surface-3: var(--color-neutral-700);
71
+ --color-field-surface: var(--color-neutral-700);
72
+ --color-field-surface-hover: var(--color-neutral-600);
73
+ --color-popover-surface: var(--color-neutral-800);
74
+ --color-content-stark: var(--color-neutral-50);
75
+ --color-content-neutral: var(--color-neutral-400);
76
+ --color-content-subtle: var(--color-neutral-500);
77
+ --color-brand-surface: var(--color-yellow-400);
78
+ --color-brand-surface-hover: var(--color-yellow-500);
79
+ --color-brand-inverse: var(--color-yellow-800);
80
+ --color-brand-content: var(--color-yellow-500);
81
+ --color-accent-surface: var(--color-neutral-50);
82
+ --color-accent-surface-hover: var(--color-neutral-200);
83
+ --color-accent-inverse: var(--color-neutral-900);
84
+ --color-accent-content: var(--color-neutral-50);
85
+ --color-positive-surface: var(--color-green-400);
86
+ --color-positive-surface-hover: var(--color-green-500);
87
+ --color-positive-inverse: var(--color-green-900);
88
+ --color-positive-content: var(--color-green-500);
89
+ --color-negative-surface: var(--color-red-400);
90
+ --color-negative-surface-hover: var(--color-red-500);
91
+ --color-negative-inverse: var(--color-red-900);
92
+ --color-negative-content: var(--color-red-500);
114
93
  }
115
94
 
116
95
  @font-face {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mnfst",
3
- "version": "0.5.115",
3
+ "version": "0.5.117",
4
4
  "private": false,
5
5
  "workspaces": [
6
6
  "templates/starter",