mnfst 0.5.188 → 0.5.190

package/lib/manifest.d.ts

@@ -139,41 +139,49 @@ export interface ManifestLocale {
     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;
+/** One toast flavor: callable, with `.dismiss` (adds a close button) and `.fixed` (sticky) variants. */
+export interface ManifestToastVariant {
+    (message: string, opts?: Record<string, unknown>): void;
+    dismiss(message: string, opts?: Record<string, unknown>): void;
+    fixed(message: string, opts?: Record<string, unknown>): void;
 }
 
-/** `$colors` from the themes plugin. */
-export interface ManifestTheme {
-    readonly current: 'light' | 'dark' | 'system';
-    set(theme: 'light' | 'dark' | 'system'): void;
-    toggle(): void;
+/** `$toast` from the toasts plugin. Typed variants: `$toast.brand(...)`, `$toast.positive.dismiss(...)`. */
+export interface ManifestToast extends ManifestToastVariant {
+    brand: ManifestToastVariant;
+    accent: ManifestToastVariant;
+    positive: ManifestToastVariant;
+    negative: ManifestToastVariant;
 }
 
-/** `$colors` from the colors plugin. */
-export interface ManifestColors {
-    [name: string]: string | ManifestColors;
+/** `$color` from the color plugin — the current light/dark/system color mode. */
+export interface ManifestColor {
+    current: 'light' | 'dark' | 'system' | string;
 }
 
-/** `$colorpicker` from the colorpicker plugin. */
+/** `$colorpicker` from the colorpicker plugin. Loose by design. */
 export interface ManifestColorpicker {
-    open(opts?: Record<string, unknown>): void;
-    close(): void;
+    (id?: string): Record<string, unknown>;
     [extra: string]: unknown;
 }
 
-/** `$url` from the url-parameters plugin: read/write URL query params reactively. */
+/** One URL query parameter handle from `$url.<name>` (reactive). */
+export interface ManifestUrlParam {
+    /** Current value (get/set; empty string when absent). */
+    value: string;
+    /** First value when the param repeats. */
+    readonly first: string;
+    /** All values for a repeating param. */
+    readonly all: string[];
+    set(value: string): void;
+    add(value: string): void;
+    remove(value?: string): void;
+    clear(): void;
+}
+
+/** `$url` from the url-parameters plugin: `$url.tab.value`, `$url.tag.add('x')`, ... */
 export interface ManifestUrl {
-    get(name: string): string | null;
-    set(name: string, value: string | null): void;
-    has(name: string): boolean;
-    [name: string]: unknown;
+    [param: string]: ManifestUrlParam;
 }
 
 /** `$route` magic — true if the current route matches the given pattern. */
@@ -188,6 +196,152 @@ 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;
 
+/** `$pay` from the payments plugin: callable to start checkout, plus portal/state helpers. */
+export interface ManifestPay {
+    (ref: string, payload?: Record<string, unknown>): Promise<unknown>;
+    portal(ref?: string, payload?: Record<string, unknown>): Promise<unknown>;
+    refresh(): Promise<unknown>;
+    register(name: string, adapter: unknown): void;
+    readonly state: Record<string, unknown> | undefined;
+    readonly loading: boolean | undefined;
+    [extra: string]: unknown;
+}
+
+/** A conversation handle returned by `$chat.open(...)`. Loose by design. */
+export interface ManifestChatHandle {
+    readonly messages: unknown[];
+    readonly participants: unknown[];
+    readonly typing: unknown[];
+    readonly me: unknown;
+    [extra: string]: unknown;
+}
+
+/** `$chat` from the chat plugin — adapter-based conversation projection. */
+export interface ManifestChat {
+    open(conversationId: string, opts?: Record<string, unknown>): ManifestChatHandle;
+    merge(handles: ManifestChatHandle[], opts?: Record<string, unknown>): ManifestChatHandle;
+    adapter(name: string, factory?: unknown): unknown;
+    flatten(tree: unknown): unknown[];
+    /** Shared revision counter — trackable even before any handle resolves. */
+    readonly version: number;
+    [extra: string]: unknown;
+}
+
+/** One `$status.<name>` entry. */
+export interface ManifestStatusEntry {
+    readonly state: string;
+    [extra: string]: unknown;
+}
+
+/** `$status` from the status plugin: `$status.api.state`, iterable, stringifies to the overall state. */
+export interface ManifestStatus extends Iterable<ManifestStatusEntry> {
+    readonly [name: string]: any;
+}
+
+/** `$presence` from the Appwrite presences plugin. */
+export interface ManifestPresence {
+    start(opts?: Record<string, unknown>): Promise<unknown>;
+    stop(): void;
+    set(values: Record<string, unknown>): Promise<unknown>;
+    clear(): Promise<unknown>;
+    of(userId: string): unknown;
+    all(): unknown[];
+    readonly records: Record<string, unknown>;
+    readonly list: unknown[];
+    readonly ready: boolean;
+    readonly error: unknown;
+    readonly me: unknown;
+}
+
+/** `$date(id?)` from the datepicker plugin — the picker API for the nearest (or given) instance. */
+export type ManifestDate = (id?: string) => Record<string, unknown>;
+
+/** `$chart(id?)` from the charts plugin — the chart API for the nearest (or given) instance. */
+export type ManifestChart = (id?: string) => Record<string, unknown>;
+
+/** `$export(opts)` from the export plugin — export the page or a data source (pdf/csv/json/...). */
+export type ManifestExport = (opts?: {
+    format?: string;
+    filename?: string;
+    source?: string;
+    data?: unknown;
+    [extra: string]: unknown;
+}) => Promise<unknown>;
+
+/** `$device` from the utilities plugin (enriched by the native plugin when present). */
+export interface ManifestDevice {
+    readonly os: string;
+    readonly touch: boolean;
+    readonly online: boolean;
+    readonly standalone: boolean;
+    readonly native: boolean;
+    readonly platform: string;
+}
+
+/** `$share` from the native plugin — native sheet, web share, or clipboard fallback. */
+export type ManifestShare = (opts?: { title?: string; text?: string; url?: string }) =>
+    Promise<{ shared: boolean; method: string; cancelled?: boolean }>;
+
+/** `$push` from the native plugin — push/notification permissions and token. */
+export interface ManifestPush {
+    request(): Promise<string>;
+    readonly permission: string;
+    [extra: string]: unknown;
+}
+
+/** `$secure` from the native plugin — secure key-value storage (native keychain or fallback). */
+export interface ManifestSecure {
+    get(key: string): Promise<string | null>;
+    set(key: string, value: string): Promise<void>;
+    remove(key: string): Promise<void>;
+    keys(): Promise<string[]>;
+    clear(): Promise<void>;
+    use(adapter: unknown): void;
+}
+
+/** `$links` from the native plugin — deep/universal link handling. */
+export interface ManifestLinks {
+    on(handler: (url: string) => void): void;
+    open(url: string): void;
+    readonly last: string | null;
+}
+
+/** `$app` from the native plugin — foreground/background state. */
+export interface ManifestApp {
+    readonly active: boolean;
+    onChange(handler: (active: boolean) => void): void;
+}
+
+/** `$haptics` from the native plugin — haptic feedback with web vibration fallback. */
+export interface ManifestHaptics {
+    impact(style?: string): Promise<unknown>;
+    notification(type?: string): Promise<unknown>;
+    [extra: string]: unknown;
+}
+
+/** `$biometric` from the native plugin. */
+export interface ManifestBiometric {
+    available(): Promise<boolean>;
+    verify(opts?: Record<string, unknown>): Promise<unknown>;
+}
+
+/** `$camera` from the native plugin. */
+export interface ManifestCamera {
+    photo(opts?: Record<string, unknown>): Promise<unknown>;
+    pick(opts?: Record<string, unknown>): Promise<unknown>;
+}
+
+/**
+ * Manifest's custom-element/attribute authoring surface (documentation aid —
+ * these are HTML attributes, not JS globals). Element styles pair with most.
+ */
+export type ManifestDirective =
+    | 'x-route' | 'x-anchors'
+    | 'x-icon' | 'x-svg' | 'x-markdown' | 'x-code' | 'x-code-group'
+    | 'x-toast' | 'x-tooltip' | 'x-carousel' | 'x-virtual' | 'x-resize'
+    | 'x-chart' | 'x-date' | 'x-color' | 'x-colorpicker' | 'x-combobox'
+    | 'x-export' | 'x-pay' | 'x-files' | 'x-data-files';
+
 // ---------------------------------------------------------------------------
 // Global declarations (what Alpine exposes inside `x-data`, `x-show`, etc.)
 // ---------------------------------------------------------------------------
@@ -201,20 +355,50 @@ declare global {
     const $modify: ManifestModify;
     /** Run a callback safely, returning undefined on error. */
     const $try: ManifestTry;
-    /** Appwrite auth plugin (only present when the plugin is loaded). */
+    /** Appwrite auth plugin (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;
+    /** Color-mode plugin (`$color.current = 'dark'`). */
+    const $color: ManifestColor;
     /** Colorpicker plugin. */
     const $colorpicker: ManifestColorpicker;
-    /** URL parameters plugin. */
+    /** URL parameters plugin (`$url.tab.value`). */
     const $url: ManifestUrl;
+    /** Payments plugin. */
+    const $pay: ManifestPay;
+    /** Chat plugin. */
+    const $chat: ManifestChat;
+    /** Status plugin. */
+    const $status: ManifestStatus;
+    /** Appwrite presences plugin. */
+    const $presence: ManifestPresence;
+    /** Datepicker plugin. */
+    const $date: ManifestDate;
+    /** Charts plugin. */
+    const $chart: ManifestChart;
+    /** Export plugin. */
+    const $export: ManifestExport;
+    /** Device/platform info (utilities; enriched by the native plugin). */
+    const $device: ManifestDevice;
+    /** Native share (native plugin). */
+    const $share: ManifestShare;
+    /** Push permissions (native plugin). */
+    const $push: ManifestPush;
+    /** Secure storage (native plugin). */
+    const $secure: ManifestSecure;
+    /** Deep links (native plugin). */
+    const $links: ManifestLinks;
+    /** App foreground state (native plugin). */
+    const $app: ManifestApp;
+    /** Haptics (native plugin). */
+    const $haptics: ManifestHaptics;
+    /** Biometric auth (native plugin). */
+    const $biometric: ManifestBiometric;
+    /** Camera (native plugin). */
+    const $camera: ManifestCamera;
 
     /** Window-level Manifest namespace exposed by the loader. */
     interface Window {

package/lib/manifest.data.js

@@ -1,3 +1,7 @@
+/* manifest.data.js — built from scripts/data/ */
+
+(function () {
+
 /* Manifest Data Sources - Configuration */
 
 // Load manifest if not already loaded (loader may set __manifestLoaded / registry.manifest).
@@ -856,6 +860,7 @@ function checkAndDispatchRenderReady() {
                 'en';
             const sources = Object.keys(store).filter(k => !k.startsWith('_') && k !== 'all');
 
+            window.__manifestRenderReady = true;
             window.dispatchEvent(new CustomEvent('manifest:render-ready', {
                 detail: { locale, sources }
             }));
@@ -1845,18 +1850,6 @@ window.ManifestDataAPI = {
 
 
 
-/* Manifest Data Sources - Error Handling & Loading States */
-
-// Placeholder for Phase 4: Error handling and loading states
-// This will be implemented in Phase 4
-
-// Export empty object for now
-window.ManifestDataErrors = {
-    // Phase 4: Error handling will be added here
-};
-
-
-
 /* Manifest Data Sources - Unified Mutation System */
 // Handles optimistic updates, scoped updates, rollback, and background sync
 
@@ -2828,7 +2821,7 @@ function handleCircularReference({
     }
 
     if (shouldLog) {
-        console.warn(`[Proxy] ⚠️ CIRCULAR ${fullPath} | depth:${currentDepth} | triggered by:${triggeredBy} | This is likely Alpine re-evaluation`);
+        console.warn(`[Manifest Data] ⚠️ CIRCULAR ${fullPath} | depth:${currentDepth} | triggered by:${triggeredBy} | This is likely Alpine re-evaluation`);
     }
 
     // Prop already in flight (Alpine re-evaluating): hand back the cached plain
@@ -2887,13 +2880,13 @@ function handleCircularReference({
         }
     } catch (e) {
         if (shouldLog) {
-            console.error(`[Proxy] ${fullPath} | Error in circular check:`, e);
+            console.error(`[Manifest Data] ${fullPath} | Error in circular check:`, e);
         }
     }
 
     // If we can't return a cached copy, return undefined to break the cycle
     if (shouldLog) {
-        console.warn(`[Proxy] ${fullPath} | ⚠️ CIRCULAR - returning undefined to break cycle`);
+        console.warn(`[Manifest Data] ${fullPath} | ⚠️ CIRCULAR - returning undefined to break cycle`);
     }
     if (activeProps) {
         activeProps.delete(propKey);
@@ -3221,6 +3214,40 @@ function attachArrayMethods(array, dataSourceName, reloadDataSource) {
             }
 
             const term = searchTerm.toLowerCase().trim();
+
+            // Weighted mode: $search(term, { title: 3, body: 1 }) — ranks by the
+            // best-matching field's weight per whitespace-separated term (prefix
+            // match gets a small boost); every term must match somewhere.
+            const first = attributes[0];
+            if (attributes.length === 1 && first && typeof first === 'object' && !Array.isArray(first)) {
+                const fields = Object.keys(first);
+                const terms = term.split(/\s+/).filter(Boolean);
+                const scored = [];
+                for (const item of array) {
+                    if (!item || typeof item !== 'object') continue;
+                    let total = 0, ok = true;
+                    for (const t of terms) {
+                        let best = 0;
+                        for (const f of fields) {
+                            const v = item[f];
+                            if (v == null) continue;
+                            const s = String(v).toLowerCase();
+                            if (!s.includes(t)) continue;
+                            let w = Number(first[f]) || 0;
+                            if (s.startsWith(t)) w *= 1.2;
+                            if (w > best) best = w;
+                        }
+                        if (!best) { ok = false; break; }
+                        total += best;
+                    }
+                    if (ok) scored.push([total, item]);
+                }
+                scored.sort((a, b) => b[0] - a[0]);
+                const ranked = scored.map(e => e[1]);
+                attachArrayMethods(ranked, dataSourceName, reloadDataSource);
+                return ranked;
+            }
+
             const attrs = attributes.length > 0 ? attributes : Object.keys(array[0] || {});
 
             const filtered = array.filter(item => {
@@ -3630,7 +3657,7 @@ function createArrayProxyWithRoute(arrayTarget, dataSourceName = null, reloadDat
                     });
                     attachedMethods.push(methodName);
                 } catch (e) {
-                    console.warn(`[Array Proxy] Failed to attach ${methodName}:`, e);
+                    console.warn(`[Manifest Data] Failed to attach ${methodName}:`, e);
                 }
             }
         });
@@ -3839,7 +3866,7 @@ function createArrayProxyWithRoute(arrayTarget, dataSourceName = null, reloadDat
                         return bound;
                     }
                     // Return undefined if target is invalid
-                    console.warn(`[Array Proxy] Could not provide array method: ${key}`, {
+                    console.warn(`[Manifest Data] Could not provide array method: ${key}`, {
                         targetType: typeof target,
                         hasLength: target && 'length' in target,
                         lengthType: target && typeof target.length
@@ -4176,7 +4203,7 @@ function createArrayProxyWithRoute(arrayTarget, dataSourceName = null, reloadDat
                         })()
                     });
                 } catch (e) {
-                    console.warn(`[Array Proxy] Failed to define ${methodName} on proxy:`, e);
+                    console.warn(`[Manifest Data] Failed to define ${methodName} on proxy:`, e);
                 }
             }
         });
@@ -5174,7 +5201,7 @@ function createRouteProxy(dataSourceData, pathKey, dataSourceName) {
                 }
                 return undefined;
             } catch (error) {
-                console.error('[Route Proxy Get] Error:', error);
+                console.error('[Manifest Data] Error:', error);
                 return undefined;
             }
         },
@@ -5364,7 +5391,7 @@ function createComputedFilesArray(tableName, entryId, bucketName, columnName = '
             errorState.value = bucketError;
 
         } catch (err) {
-            console.error('[createComputedFilesArray] Error recomputing files:', err);
+            console.error('[Manifest Data] Error recomputing files:', err);
             errorState.value = err.message || 'Failed to compute files';
             loadingState.value = false;
         }
@@ -5859,7 +5886,7 @@ function createReactiveFileManager(tableName, entryId, bucketName, columnName) {
                                 }
                             }
                         }).catch(err => {
-                            console.error('[ReactiveFileManager] Failed to load files after fileIds change:', err);
+                            console.error('[Manifest Data] Failed to load files after fileIds change:', err);
                         });
                     } else if (lastSeenFileIds === null) {
                         // Initialize lastSeenFileIds on first run
@@ -5876,7 +5903,7 @@ function createReactiveFileManager(tableName, entryId, bucketName, columnName) {
                     if (!fileIdsMatch && !loading && lastSeenFileIds !== null) {
                         lastSeenFileIds = JSON.stringify(currentFileIds);
                         loadFiles().catch(err => {
-                            console.error('[ReactiveFileManager] Failed to reload files after sync check:', err);
+                            console.error('[Manifest Data] Failed to reload files after sync check:', err);
                         });
                     }
                 }
@@ -5984,7 +6011,7 @@ async function getFilesForEntry(tableName, entryId, bucketId, fileIdsColumn = 'f
 
     // CRITICAL DEBUG: Log missing files to understand where stale fileIds come from
     if (missingFileIds.length > 0) {
-        console.warn('[getFilesForEntry] Found missing fileIds in database entry:', {
+        console.warn('[Manifest Data] Found missing fileIds in database entry:', {
             tableName,
             entryId,
             missingFileIds,
@@ -6333,13 +6360,13 @@ async function unlinkFileFromAllEntries(fileId) {
                         .then(() => {
                         })
                         .catch(error => {
-                            console.debug('[Manifest Data] Could not unlink from', tableName, 'entry', entry.$id, ':', error.message);
+                            console.warn('[Manifest Data] Could not unlink from', tableName, 'entry', entry.$id, ':', error.message);
                         })
                 );
             }
         } catch (error) {
             // Silently continue - not all tables may have fileIds
-            console.debug('[Manifest Data] Could not process', tableName, ':', error.message);
+            console.warn('[Manifest Data] Could not process', tableName, ':', error.message);
         }
     }
 
@@ -8423,6 +8450,19 @@ function registerXMagicMethod(loadDataSource) {
                         return undefined;
                     }
 
+                    // $x.$register(name, data) — install/replace a client-side source at
+                    // runtime (array or object). Reactive like any manifest.json source.
+                    if (prop === '$register') {
+                        return (name, data) => {
+                            if (!name || typeof name !== 'string') return undefined;
+                            const stamped = Array.isArray(data)
+                                ? data.map(d => (d && typeof d === 'object' && !('contentType' in d)) ? { contentType: name, ...d } : d)
+                                : data;
+                            window.ManifestDataStore?.updateStore?.(name, stamped, { loading: false, error: null, ready: true, allowDuringInit: true });
+                            return true;
+                        };
+                    }
+
                     // Resolve+cache from raw data BEFORE reading Alpine.store('data'):
                     // the store read registers a reactive dep that can re-run this
                     // effect and re-enter get() → stack overflow. Caching first makes
@@ -10145,7 +10185,7 @@ function registerFilesDirective() {
                             const databaseIsStale = databaseFileIds && databaseFileIdsJson !== lastFileIds;
 
                             if (storeIsStale || databaseIsStale) {
-                                console.warn('[UPLOAD DEBUG] Store/Database fileIds is STALE - cleaning up:', {
+                                console.warn('[Manifest Data] Store/Database fileIds is STALE - cleaning up:', {
                                     directiveInstanceId,
                                     projectId: currentProjectId,
                                     storeFileIds: storeFileIdsJson,
@@ -10185,7 +10225,7 @@ function registerFilesDirective() {
                                             }
                                         }
                                     } catch (dbUpdateError) {
-                                        console.error('[UPLOAD DEBUG] Failed to update Appwrite database:', dbUpdateError);
+                                        console.error('[Manifest Data] Failed to update Appwrite database:', dbUpdateError);
                                         // Don't throw - store is already updated, database will sync via realtime eventually
                                     }
                                 }
@@ -10853,7 +10893,7 @@ async function handleTableRealtimeEvent(dataSourceName, databaseId, tableId, sco
                             // Incoming missing files + not clearly newer = stale event
                             // racing an optimistic update; ignore it to protect the upload.
                             if (isMissingFiles && !isDefinitelyNewer) {
-                                console.warn('[Realtime] Ignoring stale realtime update (protecting optimistic update):', {
+                                console.warn('[Manifest Data] Ignoring stale realtime update (protecting optimistic update):', {
                                     projectId: row.$id,
                                     existingFileIds: existingFileIds,
                                     incomingFileIds: incomingFileIds,
@@ -11709,4 +11749,6 @@ if (typeof Alpine !== 'undefined') {
 }
 
 // Also listen for alpine:init (in case Alpine loads after DOMContentLoaded)
-document.addEventListener('alpine:init', tryInitialize);
+document.addEventListener('alpine:init', tryInitialize);
+
+})();

package/lib/manifest.datepicker.css

@@ -1,5 +1,7 @@
 /* Manifest Date Picker */
 
+@layer base, components, utilities;
+
 @layer utilities {
 
     /* Picker container only (not trigger input/button) */
@@ -8,7 +10,7 @@
         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: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
         border-radius: var(--radius, 0.5rem);
 
         /* Shell */
@@ -43,7 +45,7 @@
                 transition: var(--transition, all .05s ease-in-out);
 
                 &:hover {
-                    background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
                     color: var(--color-content-stark, oklch(20.5% 0 0))
                 }
             }
@@ -135,7 +137,7 @@
                 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))
+                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                 }
 
                 &:focus-visible {
@@ -151,7 +153,7 @@
 
                 /* Today marker */
                 &[aria-current=date]:not([aria-selected=true]) {
-                    border-color: var(--color-line, color-mix(oklch(20.5% 0 0) 18%, transparent));
+                    border-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 18%, transparent));
                     font-weight: 600
                 }
 
@@ -212,11 +214,11 @@
                 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))
+                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                 }
 
                 &[aria-current=true] {
-                    border-color: var(--color-line, color-mix(oklch(20.5% 0 0) 18%, transparent));
+                    border-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 18%, transparent));
                     font-weight: 600
                 }
 
@@ -251,7 +253,7 @@
             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));
+            border-top: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
 
             /* "Time" label */
             &>label {
@@ -307,7 +309,7 @@
 
                     &:hover,
                     &:focus {
-                        background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                        background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                     }
                 }
 
@@ -334,7 +336,7 @@
                     transition: var(--transition, all .05s ease-in-out);
 
                     &:hover {
-                        background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                        background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                     }
                 }
 
@@ -380,7 +382,7 @@
             width: 100%;
             contain: inline-size;
             padding: 0.5rem 0;
-            border-top: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+            border-top: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
 
             /* Today | Clear buttons */
             &>button {
@@ -417,7 +419,7 @@
                     padding: 0.25rem 0.625rem;
                     font-size: 0.75rem;
                     white-space: nowrap;
-                    background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+                    background: var(--color-field-surface, color-mix(in oklch, 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);
@@ -425,7 +427,7 @@
                     transition: var(--transition, all .05s ease-in-out);
 
                     &:hover {
-                        background: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 16%, transparent))
+                        background: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 16%, transparent))
                     }
                 }
             }
@@ -480,7 +482,7 @@
             transition: var(--transition, all .05s ease-in-out);
 
             &:hover {
-                background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
             }
 
             &[aria-selected=true] {

package/lib/manifest.dialog.css

@@ -1,5 +1,7 @@
 /* Manifest Dialogs */
 
+@layer base, components, utilities;
+
 [popover]:not(.unstyle):not(:popover-open) {
     display: none;
 }

package/lib/manifest.divider.css

@@ -1,5 +1,7 @@
 /* Manifest Dividers */
 
+@layer base, components, utilities;
+
 @layer utilities {
 
     :where(.divider) {
@@ -22,7 +24,7 @@
             flex: 1;
             width: auto;
             height: 1px;
-            background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
+            background-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
         }
 
         /* Space between lines and content */