mnfst 0.5.121 → 0.5.122

package/lib/manifest.data.js

@@ -1,11 +1,17 @@
 /* Manifest Data Sources - Configuration */
 
-// Load manifest if not already loaded (loader may set __manifestLoaded / registry.manifest)
+// Load manifest if not already loaded (loader may set __manifestLoaded / registry.manifest).
+// Only trust a cached global if it looks like a real Manifest config — another plugin
+// doing `window.__manifestLoaded.foo = …` before the loader populates it (or in a
+// no-loader setup) can leave a stub without `data`/`components`, which would otherwise
+// mask every data source. Fall through to fetching the real manifest in that case.
 async function ensureManifest() {
-    if (window.ManifestComponentsRegistry?.manifest) {
+    const looksComplete = (m) => m && typeof m === 'object' &&
+        (m.data || m.components || m.preloadedComponents || m.appwrite || m.render);
+    if (looksComplete(window.ManifestComponentsRegistry?.manifest)) {
         return window.ManifestComponentsRegistry.manifest;
     }
-    if (window.__manifestLoaded) {
+    if (looksComplete(window.__manifestLoaded)) {
         return window.__manifestLoaded;
     }
 
@@ -11423,10 +11429,19 @@ async function loadDataSource(dataSourceName, locale = 'en') {
     const cacheKey = `${dataSourceName}:${locale}`;
     const { dataSourceCache, loadingPromises, isInitializing, updateStore } = window.ManifestDataStore;
 
-    // Check memory cache first
+    // Check memory cache first. The store write is guarded against stale
+    // locales: a caller that resolved its locale before a switch (or an effect
+    // re-running mid-switch) can request `name:en` after the locale-change
+    // reload already wrote `name:fr` — serving the cached data is fine, but
+    // writing it to the live store would clobber the current locale. Localized
+    // data carries a `_locale` stamp; unstamped (non-localized) data writes
+    // unconditionally.
     if (dataSourceCache.has(cacheKey)) {
         const cachedData = dataSourceCache.get(cacheKey);
-        if (!isInitializing) {
+        const liveLocale = (window.Alpine && Alpine.store('locale')?.current)
+            || document.documentElement.lang || locale;
+        const staleLocaleHit = locale !== liveLocale && !!(cachedData && cachedData._locale);
+        if (!isInitializing && !staleLocaleHit) {
             updateStore(dataSourceName, cachedData, { loading: false, error: null, ready: true });
         }
         return cachedData;
@@ -11691,12 +11706,25 @@ async function loadDataSource(dataSourceName, locale = 'en') {
                 enhancedData = [];
             }
 
-            // Update cache (store unsealed version for our use)
+            // Update cache (store unsealed version for our use).
+            // Always safe — the cache key carries the locale this load was for.
             dataSourceCache.set(cacheKey, enhancedData);
 
+            // Stale-locale guard: if the app's locale changed while this load was
+            // in flight, a LOCALIZED source's result is stale — the locale-change
+            // listener has already reloaded (or is reloading) the right locale,
+            // and writing this one would clobber it. Non-localized sources are
+            // locale-independent and must still write (the listener never reloads
+            // them, so skipping would orphan an initial load).
+            const localeSensitive = !!(dataSource && typeof dataSource === 'object'
+                && (dataSource.locales || dataSource[locale]));
+            const liveLocale = (window.Alpine && Alpine.store('locale')?.current)
+                || document.documentElement.lang || locale;
+            const staleLocale = localeSensitive && liveLocale !== locale;
+
             // Update store only if not initializing
             // Note: updateStore will seal the data to prevent Alpine from proxying it
-            if (!isInitializing) {
+            if (!isInitializing && !staleLocale) {
                 updateStore(dataSourceName, enhancedData, { loading: false, error: null, ready: true });
             }
 

package/lib/manifest.datepicker.css

@@ -0,0 +1,504 @@
+/* Manifest Date Picker */
+
+@layer utilities {
+
+    :where([x-date], .date-picker):not(.unstyle) {
+        width: fit-content;
+        min-width: 17rem;
+        background: var(--color-popover-surface, oklch(98.5% 0 0));
+        color: var(--color-content-stark, oklch(20.5% 0 0));
+        border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        border-radius: var(--radius, 0.5rem);
+
+        /* Shell */
+        &>[role=group] {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            padding: 0.5rem;
+        }
+
+        /* Header */
+        & header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.25rem;
+            width: 100%;
+
+            & button {
+                width: var(--spacing-field-height, 2.25rem);
+                min-width: var(--spacing-field-height, 2.25rem);
+                height: var(--spacing-field-height, 2.25rem);
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0;
+                background: transparent;
+                border: none;
+                border-radius: var(--radius, 0.5rem);
+                color: var(--color-content-neutral, oklch(43.9% 0 0));
+                cursor: pointer;
+                transition: var(--transition, all .05s ease-in-out);
+
+                &:hover {
+                    background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+                    color: var(--color-content-stark, oklch(20.5% 0 0))
+                }
+            }
+
+            /* Heading (between nav arrows) — clickable view jump */
+            & button:nth-child(2) {
+                flex: 1;
+                width: auto;
+                padding: 0 0.5rem;
+                text-align: center;
+                font-weight: 600;
+                color: inherit
+            }
+
+            /* Previous / next chevrons — baked-in masks, no icons plugin */
+            & button:first-child::before,
+            & button:last-child::before {
+                content: "";
+                width: 1rem;
+                height: 1rem;
+                background-color: currentColor;
+                mask-repeat: no-repeat;
+                mask-size: 100% 100%
+            }
+
+            & button:first-child::before {
+                mask-image: var(--icon-previous, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18-6-6 6-6'/%3E%3C/svg%3E"))
+            }
+
+            & button:last-child::before {
+                mask-image: var(--icon-next, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3E%3C/svg%3E"))
+            }
+        }
+
+        /* Months row — one <section> per visible month, side by side */
+        & div:has(> section) {
+            display: flex;
+            flex-flow: row nowrap;
+            gap: 1rem
+        }
+
+        & section {
+            flex: 1;
+            min-width: 14rem;
+
+            /* Month label (multi-month) */
+            &>small {
+                display: block;
+                padding: 0.25rem 0;
+                text-align: center;
+                font-size: 0.8125rem;
+                font-weight: 600;
+                color: var(--color-content-neutral, oklch(43.9% 0 0))
+            }
+        }
+
+        /* Day grid */
+        & [role=grid] {
+            display: grid;
+            grid-template-columns: repeat(7, minmax(0, 1fr));
+            gap: 0;
+            padding: 0.5rem 0;
+
+            /* Day names */
+            & abbr {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 1.75rem;
+                font-size: 0.75rem;
+                font-weight: 500;
+                text-decoration: none;
+                color: var(--color-content-subtle, oklch(55.6% 0 0))
+            }
+
+            /* Day buttons */
+            & button {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                aspect-ratio: 1 / 1;
+                padding: 0;
+                font-size: 0.875rem;
+                background: transparent;
+                color: var(--color-content-stark, oklch(20.5% 0 0));
+                border: 1px solid transparent;
+                border-radius: var(--radius, 0.5rem);
+                cursor: pointer;
+                transition: var(--transition, all .05s ease-in-out);
+
+                &:hover:not(:disabled):not([aria-selected=true]) {
+                    background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                }
+
+                &:focus-visible {
+                    outline: 2px solid var(--color-brand-content, oklch(60% 0.13 80));
+                    outline-offset: -2px
+                }
+
+                /* Other-month days */
+                &.outside {
+                    color: var(--color-content-subtle, oklch(55.6% 0 0));
+                    opacity: 0.55
+                }
+
+                /* Today marker */
+                &[aria-current=date]:not([aria-selected=true]) {
+                    border-color: var(--color-line, color-mix(oklch(20.5% 0 0) 18%, transparent));
+                    font-weight: 600
+                }
+
+                /* Selected day (also range endpoints) */
+                &[aria-selected=true] {
+                    background: var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0)));
+                    color: var(--color-brand-inverse, var(--color-accent-inverse, oklch(98.5% 0 0)));
+                    font-weight: 600
+                }
+
+                /* Days between range endpoints */
+                &.in-range {
+                    background: color-mix(in oklch, var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0))) 30%, transparent);
+                    border-radius: 0
+                }
+
+                /* Square inner edges so endpoints connect to the band */
+                &.range-start:not(.range-end) {
+                    border-start-end-radius: 0;
+                    border-end-end-radius: 0
+                }
+
+                &.range-end:not(.range-start) {
+                    border-start-start-radius: 0;
+                    border-end-start-radius: 0
+                }
+
+                &:disabled {
+                    color: var(--color-content-subtle, oklch(55.6% 0 0));
+                    opacity: 0.35;
+                    cursor: not-allowed;
+                    text-decoration: line-through
+                }
+            }
+        }
+
+        /* Month / year jump grid */
+        & [role=listbox] {
+            display: grid;
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+            gap: 0.25rem;
+            width: 100%;
+            padding: 0.25rem 0;
+
+            & button {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 2.75rem;
+                width: 100%;
+                padding: 0;
+                font-size: 0.875rem;
+                background: transparent;
+                color: var(--color-content-stark, oklch(20.5% 0 0));
+                border: 1px solid transparent;
+                border-radius: var(--radius, 0.5rem);
+                cursor: pointer;
+                transition: var(--transition, all .05s ease-in-out);
+
+                &:hover:not(:disabled) {
+                    background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                }
+
+                &[aria-current=true] {
+                    border-color: var(--color-line, color-mix(oklch(20.5% 0 0) 18%, transparent));
+                    font-weight: 600
+                }
+
+                &[aria-selected=true] {
+                    background: var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0)));
+                    color: var(--color-brand-inverse, var(--color-accent-inverse, oklch(98.5% 0 0)));
+                    font-weight: 600
+                }
+
+                &.outside {
+                    color: var(--color-content-subtle, oklch(55.6% 0 0));
+                    opacity: 0.55
+                }
+
+                &:disabled {
+                    opacity: 0.35;
+                    cursor: not-allowed
+                }
+            }
+        }
+
+        /* Time-of-day row */
+        & fieldset {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            gap: 0.5rem;
+            width: 100%;
+            min-width: 0;
+            padding-top: 0.5rem;
+            padding-bottom: 0.5rem;
+            padding-inline-start: 0.5rem;
+            border: none;
+            border-top: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+
+            /* "Time" label — native invoker for the columns popover (for= the
+               chevron button), so it needs width/height resets against
+               dropdown.css's menu-item label styling */
+            &>label {
+                flex: none;
+                width: auto;
+                min-height: 0;
+                padding: 0;
+                font-size: 0.75rem;
+                color: var(--color-content-subtle, oklch(55.6% 0 0));
+                cursor: pointer;
+
+                &:hover {
+                    color: var(--color-content-stark, oklch(20.5% 0 0));
+                    background: transparent
+                }
+            }
+
+            /* Segment group */
+            &>[role=group] {
+                display: flex;
+                align-items: center;
+                justify-content: end;
+                height: var(--spacing-field-height, 2.25rem);
+                padding-inline-start: 0.5rem;
+                background: transparent;
+                border: none;
+                border-radius: var(--radius, 0.5rem);
+                cursor: text;
+                transition: var(--transition, all .05s ease-in-out);
+
+                /* Hour / minute segments */
+                & input {
+                    box-sizing: content-box;
+                    width: 2ch;
+                    min-width: 0;
+                    margin: 0;
+                    padding: 0 0.25rem;
+                    font-size: 0.875rem;
+                    line-height: 1.5rem;
+                    font-variant-numeric: tabular-nums;
+                    text-align: center;
+                    background: transparent;
+                    color: var(--color-content-stark, oklch(20.5% 0 0));
+                    border: none;
+                    border-radius: calc(var(--radius, 0.5rem) / 2);
+                    outline: none;
+                    appearance: none;
+
+                    &:hover,
+                    &:focus {
+                        background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                    }
+                }
+
+                /* Separator */
+                &>span {
+                    line-height: 1.5rem;
+                    color: var(--color-content-subtle, oklch(55.6% 0 0))
+                }
+
+                /* AM/PM toggle */
+                &>button {
+                    width: auto;
+                    min-width: 0;
+                    height: 1.5rem;
+                    padding: 0 0.375rem;
+                    font-size: 0.875rem;
+                    line-height: 1.5rem;
+                    background: transparent;
+                    color: var(--color-content-stark, oklch(20.5% 0 0));
+                    border: none;
+                    border-radius: calc(var(--radius, 0.5rem) / 2);
+                    cursor: pointer;
+                    transition: var(--transition, all .05s ease-in-out);
+
+                    &:hover {
+                        background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                    }
+                }
+
+                /* Chevron that invokes the columns popover — same glyph as
+                   select buttons (see buttons.css ::picker-icon) */
+                &>button[popovertarget] {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 1.5rem;
+                    padding: 0;
+                    color: var(--color-content-subtle, oklch(55.6% 0 0));
+
+                    &:hover {
+                        color: var(--color-content-stark, oklch(20.5% 0 0))
+                    }
+
+                    &::before {
+                        content: "⌄";
+                        height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
+                        transform: scaleY(0.7);
+                        font-size: 20px;
+                        line-height: 0.4
+                    }
+                }
+            }
+        }
+
+        /* Standalone time picker — columns inline in the calendar */
+        & div.time-options {
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            max-height: 14rem;
+        }
+
+        /* Footer */
+        & footer {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.25rem;
+            width: 100%;
+            padding: 0.5rem 0;
+            border-top: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+
+            /* Today | Clear buttons */
+            & button {
+                width: fit-content
+            }
+
+            /* Preset chips */
+            &>div {
+                flex: 1;
+                display: flex;
+                flex-flow: row wrap;
+                align-items: center;
+                justify-content: center;
+                gap: 0.25rem;
+
+                & button {
+                    height: auto;
+                    min-height: 0;
+                    padding: 0.25rem 0.625rem;
+                    font-size: 0.75rem;
+                    background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+                    color: var(--color-content-stark, oklch(20.5% 0 0));
+                    border: none;
+                    border-radius: calc(var(--radius, 0.5rem) * 2);
+                    cursor: pointer;
+                    transition: var(--transition, all .05s ease-in-out);
+
+                    &:hover {
+                        background: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 16%, transparent))
+                    }
+                }
+            }
+        }
+    }
+
+    /* Time dropdown */
+    :where(menu.time-options):not(.unstyle) {
+        position-area: end center;
+        position-try-fallbacks: flip-block;
+        width: max-content;
+        min-width: 0;
+        margin: 0;
+        padding: 0.25rem;
+        list-style: none;
+    }
+
+    /* Time columns — hours / minutes / (AM-PM + actions) */
+    .time-options {
+        flex-flow: row nowrap;
+        gap: 0.25rem;
+
+        /* Column */
+        &>div {
+            flex: 1;
+            min-width: 2.75rem;
+            max-height: 13rem;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 1px;
+            scrollbar-width: thin;
+        }
+
+        /* Option */
+        & button {
+            flex: none;
+            width: auto;
+            min-width: 0;
+            height: auto;
+            min-height: 0;
+            padding: 0.25rem 0.5rem;
+            font-size: 0.8125rem;
+            font-variant-numeric: tabular-nums;
+            text-align: center;
+            justify-content: center;
+            background: transparent;
+            color: var(--color-content-stark, oklch(20.5% 0 0));
+            border: none;
+            border-radius: calc(var(--radius, 0.5rem) / 2);
+            cursor: pointer;
+            transition: var(--transition, all .05s ease-in-out);
+
+            &:hover {
+                background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+            }
+
+            &[aria-selected=true] {
+                background: var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0)));
+                color: var(--color-brand-inverse, var(--color-accent-inverse, oklch(98.5% 0 0)));
+                font-weight: 600
+            }
+        }
+
+        /* Now / Clear actions */
+        & button:not([value]) {
+            font-size: 0.75rem;
+            font-variant-numeric: normal;
+            color: var(--color-content-subtle, oklch(55.6% 0 0));
+
+            &:hover {
+                color: var(--color-content-stark, oklch(20.5% 0 0))
+            }
+        }
+
+        /* First action in a column drops to the bottom */
+        & button[value]+button:not([value]),
+        & button:not([value]):first-child {
+            margin-top: auto
+        }
+    }
+
+    /* Popover menu presentation */
+    :where(menu[popover][x-date], menu[popover].date-picker):not(.unstyle) {
+        margin: 0;
+        padding: 0;
+        list-style: none
+    }
+
+    /* RTL support */
+    [dir=rtl] :where([x-date], .date-picker):not(.unstyle) header {
+
+        & button:first-child::before,
+        & button:last-child::before {
+            transform: scaleX(-1)
+        }
+    }
+}