@asteby/metacore-theme 2.21.0 → 2.25.0

package/README.md

@@ -66,6 +66,37 @@ the brand painted by `applyBranding`. Import it after your tokens:
 It includes a near-opaque fallback for browsers without `backdrop-filter`
 and for `prefers-reduced-transparency`.
 
+#### Host chrome and mobile floating panel (optional variables)
+
+A host with fixed chrome around the shell publishes its sizes on `:root`. All
+variables are optional and default to `0`/flat: without them the compiled CSS
+behaves exactly as before.
+
+| Variable | Default | Effect |
+|---|---|---|
+| `--app-topbar-h` | `0px` | Fixed top bar: pushes the inset (and `@asteby/metacore-ui` `Sidebar`) down |
+| `--app-notice-h` | `0px` | Notice strip under the top bar (0 when hidden) |
+| `--app-bottombar-h` | `0px` | Bottom dock on mobile: bottom margin of the inset and the mobile sidebar sheet |
+| `--glass-inset-max-height` | `none` | Cap for the inset when the wrapper is not height-bound, e.g. `calc(100svh - var(--app-topbar-h) - var(--app-notice-h) - 1rem)` |
+| `--glass-mobile-gutter` | `0px` | Margin around the inset on phones (e.g. `0.5rem`) |
+| `--glass-mobile-radius` | `0px` | Corner radius of the inset on phones (e.g. `var(--glass-radius)`) |
+| `--glass-mobile-border-width` | `0px` | Rim width on phones (e.g. `1px`) |
+| `--glass-mobile-shadow` | `none` | Shadow on phones (e.g. `var(--glass-highlight), var(--glass-shadow)`) |
+
+```css
+:root {
+  --app-topbar-h: 3rem;
+  --app-bottombar-h: 4rem; /* 0 from sm up if the dock is mobile-only */
+  --glass-mobile-gutter: 0.5rem;
+  --glass-mobile-radius: var(--glass-radius);
+  --glass-mobile-border-width: 1px;
+  --glass-mobile-shadow: var(--glass-highlight), var(--glass-shadow);
+}
+```
+
+An inset with no sidebar sibling (chat-like screens) floats on desktop with
+`<SidebarInset data-glass-float>`.
+
 ## Usage from JS/TS
 
 For programmatic access (Storybook, charts, PDF):
@@ -93,6 +124,33 @@ The bundled `<ThemeProvider>` (light/dark/system, cookie-persisted) is the
 recommended entry; consumer apps can drop their local copies and use
 `useTheme()` for the toggle UI.
 
+## No flash on reload
+
+`<ThemeProvider>` stores what `<html>` ends up painting — light/dark, the
+`data-ui-*` attributes (theme pack, font, density), `font-*` classes, inline
+custom properties (brand color) and the branding surfaces stylesheet. An inline
+script restores it before the first frame, so a returning visitor never sees
+the defaults first. First visits follow `prefers-color-scheme`. Transitions stay
+off until the providers have mounted (`data-boot-transition` opts an element
+out, e.g. a splash that fades).
+
+```ts
+// vite.config.ts
+import { themeBootScript } from '@asteby/metacore-theme/boot'
+
+plugins: [
+  {
+    name: 'metacore-theme-boot',
+    transformIndexHtml: () => [
+      { tag: 'script', children: themeBootScript(), injectTo: 'head-prepend' },
+    ],
+  },
+]
+```
+
+`@asteby/metacore-theme/boot` has no React import, so it loads in a Node
+config. Pass `persistBoot={false}` to the provider to opt out.
+
 ## License
 
 Apache-2.0

package/dist/boot.d.ts

@@ -0,0 +1,75 @@
+export type ThemeMode = 'light' | 'dark';
+/** localStorage entry holding the last resolved theme of this origin. */
+export declare const THEME_BOOT_STORAGE_KEY = "mc:theme-boot:v1";
+/** Cookie the ThemeProvider stores the user's light/dark/system choice in. */
+export declare const THEME_MODE_COOKIE = "metacore-ui-theme";
+/**
+ * Class on <html> while the boot theme settles. Transitions are off under
+ * it, so the providers re-applying the same theme can't animate anything.
+ */
+export declare const THEME_BOOTING_CLASS = "mc-theme-booting";
+/** Elements (and their subtree) that keep their transitions during boot. */
+export declare const THEME_BOOT_TRANSITION_ATTRIBUTE = "data-boot-transition";
+/** What one mode paints: inline custom properties and generated stylesheets. */
+export interface ThemeBootModeSnapshot {
+    vars: Record<string, string>;
+    styles: Record<string, string>;
+    /** attrs + classes it was captured under; another value makes it stale. */
+    base: string;
+}
+export interface ThemeBootSnapshot {
+    v: 1;
+    attrs: Record<string, string>;
+    classes: string[];
+    modes: Partial<Record<ThemeMode, ThemeBootModeSnapshot>>;
+}
+export interface ThemeBootScriptOptions {
+    storageKey?: string;
+    modeCookie?: string;
+    /** Mode for a first visit with no cookie. `system` follows the OS. */
+    defaultMode?: ThemeMode | 'system';
+    /** Longest the transition lock may last if the app never releases it. */
+    maxLockMs?: number;
+}
+export interface ThemeBootWatchOptions {
+    storageKey?: string;
+    /** <html> attributes to keep. Default: every `data-ui-*`. */
+    attributePattern?: RegExp;
+    /** <html> classes to keep, besides light/dark. Default: `font-*`. */
+    classPattern?: RegExp;
+    /** <style id> elements whose text is kept per mode. */
+    styleIds?: string[];
+}
+/** The stylesheet the metacore branding provider generates. */
+export declare const BRANDING_STYLE_ID = "metacore-branding-surfaces";
+/**
+ * Inline script (no <script> tag) that restores the stored theme. Put it
+ * first in <head>, before the stylesheets, as a classic (not module) script.
+ */
+export declare function themeBootScript(options?: ThemeBootScriptOptions): string;
+/**
+ * Turns transitions back on once the app painted with its theme. Waits two
+ * frames so the providers' first effects commit without animating.
+ */
+export declare function releaseThemeBoot(): void;
+/** Reads what <html> paints right now. */
+export declare function captureThemeBoot(options?: ThemeBootWatchOptions): {
+    mode: ThemeMode;
+    attrs: Record<string, string>;
+    classes: string[];
+    vars: Record<string, string>;
+    styles: Record<string, string>;
+};
+/**
+ * Stores the current theme for the next load. The other mode's entry is
+ * kept only while the pack/font/density it was taken under still holds.
+ * Returns false when nothing changed.
+ */
+export declare function persistThemeBoot(options?: ThemeBootWatchOptions): boolean;
+/**
+ * Keeps the stored theme in sync with <html>: any provider that changes a
+ * class, a data-ui-* attribute, an inline custom property or a watched
+ * stylesheet triggers one write per task. Returns the unsubscribe.
+ */
+export declare function watchThemeBoot(options?: ThemeBootWatchOptions): () => void;
+//# sourceMappingURL=boot.d.ts.map

package/dist/boot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"boot.d.ts","sourceRoot":"","sources":["../src/boot.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,yEAAyE;AACzE,eAAO,MAAM,sBAAsB,qBAAqB,CAAA;AACxD,8EAA8E;AAC9E,eAAO,MAAM,iBAAiB,sBAAsB,CAAA;AACpD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qBAAqB,CAAA;AACrD,4EAA4E;AAC5E,eAAO,MAAM,+BAA+B,yBAAyB,CAAA;AAErE,gFAAgF;AAChF,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,iBAAiB;IAChC,CAAC,EAAE,CAAC,CAAA;IACJ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC7B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,qBAAqB,CAAC,CAAC,CAAA;CACzD;AAED,MAAM,WAAW,sBAAsB;IACrC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAClC,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;CACpB;AAED,+DAA+D;AAC/D,eAAO,MAAM,iBAAiB,+BAA+B,CAAA;AA0D7D;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,GAAE,sBAA2B,GAAG,MAAM,CAU5E;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAKvC;AAMD,0CAA0C;AAC1C,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,qBAA0B,GAAG;IACrE,IAAI,EAAE,SAAS,CAAA;IACf,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC7B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC/B,CAoBA;AAYD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,qBAA0B,GAAG,OAAO,CAoB7E;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAE,qBAA0B,GAAG,MAAM,IAAI,CAiC9E"}

package/dist/boot.js

@@ -0,0 +1,218 @@
+// Paints the theme a returning visitor last saw before the first frame.
+//
+// Every theme provider (dark/light, theme pack, font, density, brand color)
+// resolves after the bundle runs, some after a fetch. Until then the page
+// painted the defaults and then switched: a visible flash on every reload.
+// The providers keep writing <html> as they do today; `watchThemeBoot`
+// stores the result, and `themeBootScript()` is a small inline script for
+// the top of <head> that puts it back synchronously, before any CSS or paint.
+//
+// This module has no React import so a Vite config can build the snippet.
+/** localStorage entry holding the last resolved theme of this origin. */
+export const THEME_BOOT_STORAGE_KEY = 'mc:theme-boot:v1';
+/** Cookie the ThemeProvider stores the user's light/dark/system choice in. */
+export const THEME_MODE_COOKIE = 'metacore-ui-theme';
+/**
+ * Class on <html> while the boot theme settles. Transitions are off under
+ * it, so the providers re-applying the same theme can't animate anything.
+ */
+export const THEME_BOOTING_CLASS = 'mc-theme-booting';
+/** Elements (and their subtree) that keep their transitions during boot. */
+export const THEME_BOOT_TRANSITION_ATTRIBUTE = 'data-boot-transition';
+/** The stylesheet the metacore branding provider generates. */
+export const BRANDING_STYLE_ID = 'metacore-branding-surfaces';
+const DEFAULT_ATTRIBUTES = /^data-ui-/;
+const DEFAULT_CLASSES = /^font-/;
+// Serialized into the inline script: no reference to anything outside it,
+// and ES5 syntax only, since it runs before any polyfill.
+function bootTheme(o) {
+    var d = document;
+    var root = d.documentElement;
+    var release = function () {
+        root.classList.remove(o.lockClass);
+    };
+    try {
+        var lock = d.createElement('style');
+        lock.textContent =
+            'html.' + o.lockClass + ' *:not([' + o.allowAttr + ']):not([' + o.allowAttr + '] *),' +
+                'html.' + o.lockClass + ' *::before,html.' + o.lockClass + ' *::after' +
+                '{transition:none!important}';
+        d.head.appendChild(lock);
+        root.classList.add(o.lockClass);
+        setTimeout(release, o.maxLockMs);
+        var m = d.cookie.match(new RegExp('(?:^|; )' + encodeURIComponent(o.modeCookie) + '=([^;]*)'));
+        var pref = m ? decodeURIComponent(m[1]) : o.defaultMode;
+        var dark = pref === 'dark' ||
+            (pref !== 'light' && !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        var mode = dark ? 'dark' : 'light';
+        root.classList.remove(dark ? 'light' : 'dark');
+        root.classList.add(mode);
+        var raw = localStorage.getItem(o.storageKey);
+        var s = raw ? JSON.parse(raw) : null;
+        if (!s || s.v !== 1)
+            return;
+        var k;
+        for (k in s.attrs) {
+            // Only data-* from storage: never an event-handler attribute.
+            if (/^data-[\w-]+$/.test(k) && typeof s.attrs[k] === 'string')
+                root.setAttribute(k, s.attrs[k]);
+        }
+        for (var i = 0; i < (s.classes || []).length; i++) {
+            if (typeof s.classes[i] === 'string')
+                root.classList.add(s.classes[i]);
+        }
+        var ms = s.modes && s.modes[mode];
+        if (!ms)
+            return;
+        for (k in ms.vars) {
+            if (/^--[\w-]+$/.test(k))
+                root.style.setProperty(k, String(ms.vars[k]));
+        }
+        for (k in ms.styles) {
+            var el = d.getElementById(k) || d.head.appendChild(d.createElement('style'));
+            el.id = k;
+            el.textContent = String(ms.styles[k]);
+        }
+    }
+    catch (e) {
+        // Storage blocked or corrupt entry: the providers paint as before.
+    }
+}
+/**
+ * Inline script (no <script> tag) that restores the stored theme. Put it
+ * first in <head>, before the stylesheets, as a classic (not module) script.
+ */
+export function themeBootScript(options = {}) {
+    const config = {
+        storageKey: options.storageKey ?? THEME_BOOT_STORAGE_KEY,
+        modeCookie: options.modeCookie ?? THEME_MODE_COOKIE,
+        defaultMode: options.defaultMode ?? 'system',
+        maxLockMs: options.maxLockMs ?? 8000,
+        lockClass: THEME_BOOTING_CLASS,
+        allowAttr: THEME_BOOT_TRANSITION_ATTRIBUTE,
+    };
+    return `(${bootTheme.toString().replace(/\n\s+/g, '\n')})(${JSON.stringify(config)});`;
+}
+/**
+ * Turns transitions back on once the app painted with its theme. Waits two
+ * frames so the providers' first effects commit without animating.
+ */
+export function releaseThemeBoot() {
+    if (typeof document === 'undefined')
+        return;
+    const done = () => document.documentElement.classList.remove(THEME_BOOTING_CLASS);
+    if (typeof requestAnimationFrame !== 'function')
+        return done();
+    requestAnimationFrame(() => requestAnimationFrame(done));
+}
+function currentMode(root) {
+    return root.classList.contains('dark') ? 'dark' : 'light';
+}
+/** Reads what <html> paints right now. */
+export function captureThemeBoot(options = {}) {
+    const root = document.documentElement;
+    const attrPattern = options.attributePattern ?? DEFAULT_ATTRIBUTES;
+    const classPattern = options.classPattern ?? DEFAULT_CLASSES;
+    const attrs = {};
+    for (const attr of Array.from(root.attributes)) {
+        if (attrPattern.test(attr.name))
+            attrs[attr.name] = attr.value;
+    }
+    const classes = Array.from(root.classList).filter((c) => classPattern.test(c)).sort();
+    const vars = {};
+    for (let i = 0; i < root.style.length; i++) {
+        const prop = root.style.item(i);
+        if (prop.startsWith('--'))
+            vars[prop] = root.style.getPropertyValue(prop).trim();
+    }
+    const styles = {};
+    for (const id of options.styleIds ?? [BRANDING_STYLE_ID]) {
+        const el = document.getElementById(id);
+        if (el instanceof HTMLStyleElement && el.textContent)
+            styles[id] = el.textContent;
+    }
+    return { mode: currentMode(root), attrs, classes, vars, styles };
+}
+function readSnapshot(key) {
+    try {
+        const raw = localStorage.getItem(key);
+        const parsed = raw ? JSON.parse(raw) : null;
+        return parsed && parsed.v === 1 ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Stores the current theme for the next load. The other mode's entry is
+ * kept only while the pack/font/density it was taken under still holds.
+ * Returns false when nothing changed.
+ */
+export function persistThemeBoot(options = {}) {
+    if (typeof document === 'undefined')
+        return false;
+    const key = options.storageKey ?? THEME_BOOT_STORAGE_KEY;
+    const now = captureThemeBoot(options);
+    const base = JSON.stringify([now.attrs, now.classes]);
+    const prev = readSnapshot(key);
+    const modes = {};
+    const other = now.mode === 'dark' ? 'light' : 'dark';
+    const kept = prev?.modes[other];
+    if (kept && kept.base === base)
+        modes[other] = kept;
+    modes[now.mode] = { vars: now.vars, styles: now.styles, base };
+    const next = { v: 1, attrs: now.attrs, classes: now.classes, modes };
+    const serialized = JSON.stringify(next);
+    try {
+        if (localStorage.getItem(key) === serialized)
+            return false;
+        localStorage.setItem(key, serialized);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Keeps the stored theme in sync with <html>: any provider that changes a
+ * class, a data-ui-* attribute, an inline custom property or a watched
+ * stylesheet triggers one write per task. Returns the unsubscribe.
+ */
+export function watchThemeBoot(options = {}) {
+    if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') {
+        return () => { };
+    }
+    const styleIds = new Set(options.styleIds ?? [BRANDING_STYLE_ID]);
+    let scheduled = false;
+    const schedule = () => {
+        if (scheduled)
+            return;
+        scheduled = true;
+        setTimeout(() => {
+            scheduled = false;
+            persistThemeBoot(options);
+        }, 0);
+    };
+    const inWatchedStyle = (node) => {
+        const el = node instanceof Element ? node : node?.parentElement;
+        return !!el && el.tagName === 'STYLE' && styleIds.has(el.id);
+    };
+    const observer = new MutationObserver((records) => {
+        for (const record of records) {
+            if (record.target === document.documentElement && record.type === 'attributes') {
+                return schedule();
+            }
+            if (inWatchedStyle(record.target))
+                return schedule();
+            for (const node of Array.from(record.addedNodes)) {
+                if (inWatchedStyle(node))
+                    return schedule();
+            }
+        }
+    });
+    observer.observe(document.documentElement, { attributes: true });
+    observer.observe(document.head, { childList: true, subtree: true, characterData: true });
+    schedule();
+    return () => observer.disconnect();
+}
+//# sourceMappingURL=boot.js.map

package/dist/boot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"boot.js","sourceRoot":"","sources":["../src/boot.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -4,4 +4,6 @@ export { colorTokens, chartTokens, radiusTokens, shadowTokens, fontTokens, track
 export type { ThemeConfig } from './preset.js';
 export { ThemeProvider, useTheme } from './provider.js';
 export type { ThemeProviderProps, ThemeProviderState } from './provider.js';
+export { themeBootScript, watchThemeBoot, persistThemeBoot, captureThemeBoot, releaseThemeBoot, THEME_BOOT_STORAGE_KEY, THEME_MODE_COOKIE, THEME_BOOTING_CLASS, THEME_BOOT_TRANSITION_ATTRIBUTE, BRANDING_STYLE_ID, } from './boot.js';
+export type { ThemeMode, ThemeBootSnapshot, ThemeBootModeSnapshot, ThemeBootScriptOptions, ThemeBootWatchOptions, } from './boot.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,MAAM,aAAa,CAAA;AACpB,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,MAAM,aAAa,CAAA;AACpB,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3E,OAAO,EACL,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,+BAA+B,EAC/B,iBAAiB,GAClB,MAAM,WAAW,CAAA;AAClB,YAAY,EACV,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,WAAW,CAAA"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export { fonts, fontFamilies } from './fonts.js';
 export { colorTokens, chartTokens, radiusTokens, shadowTokens, fontTokens, trackingTokens, motionTokens, themeConfig, } from './preset.js';
 export { ThemeProvider, useTheme } from './provider.js';
+export { themeBootScript, watchThemeBoot, persistThemeBoot, captureThemeBoot, releaseThemeBoot, THEME_BOOT_STORAGE_KEY, THEME_MODE_COOKIE, THEME_BOOTING_CLASS, THEME_BOOT_TRANSITION_ATTRIBUTE, BRANDING_STYLE_ID, } from './boot.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAGhD,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,MAAM,aAAa,CAAA;AAGpB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAGhD,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,MAAM,aAAa,CAAA;AAGpB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGvD,OAAO,EACL,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,+BAA+B,EAC/B,iBAAiB,GAClB,MAAM,WAAW,CAAA"}

package/dist/provider.d.ts

@@ -1,9 +1,17 @@
+import { type ThemeBootWatchOptions } from './boot.js';
 type Theme = 'dark' | 'light' | 'system';
 type ResolvedTheme = Exclude<Theme, 'system'>;
 export type ThemeProviderProps = {
     children: React.ReactNode;
     defaultTheme?: Theme;
     storageKey?: string;
+    /**
+     * Stores the resolved theme of <html> for `themeBootScript()`, so the next
+     * load paints it before the first frame. On by default; pass options to
+     * change what is kept. A custom `storageKey` must also be given to the
+     * script as `modeCookie`.
+     */
+    persistBoot?: boolean | ThemeBootWatchOptions;
 };
 export type ThemeProviderState = {
     defaultTheme: Theme;
@@ -12,7 +20,7 @@ export type ThemeProviderState = {
     setTheme: (theme: Theme) => void;
     resetTheme: () => void;
 };
-export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ children, defaultTheme, storageKey, persistBoot, }: ThemeProviderProps): import("react").JSX.Element;
 export declare function useTheme(): ThemeProviderState;
 export {};
 //# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AACxC,KAAK,aAAa,GAAG,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAM7C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,KAAK,CAAA;IACnB,aAAa,EAAE,aAAa,CAAA;IAC5B,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAgCD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAA4B,EAC5B,UAAgC,GACjC,EAAE,kBAAkB,+BAuDpB;AAGD,wBAAgB,QAAQ,IAAI,kBAAkB,CAI7C"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,qBAAqB,EAC3B,MAAM,WAAW,CAAA;AAElB,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AACxC,KAAK,aAAa,GAAG,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAM7C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,qBAAqB,CAAA;CAC9C,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,KAAK,CAAA;IACnB,aAAa,EAAE,aAAa,CAAA;IAC5B,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAgCD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAA4B,EAC5B,UAAgC,EAChC,WAAkB,GACnB,EAAE,kBAAkB,+BAoEpB;AAGD,wBAAgB,QAAQ,IAAI,kBAAkB,CAI7C"}

package/dist/provider.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { THEME_MODE_COOKIE, releaseThemeBoot, watchThemeBoot, } from './boot.js';
 const DEFAULT_THEME = 'system';
-const DEFAULT_STORAGE_KEY = 'metacore-ui-theme';
+const DEFAULT_STORAGE_KEY = THEME_MODE_COOKIE;
 const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
 const initialState = {
     defaultTheme: DEFAULT_THEME,
@@ -32,7 +33,7 @@ function clearCookie(name) {
         return;
     document.cookie = `${encodeURIComponent(name)}=; path=/; max-age=0; SameSite=Lax`;
 }
-export function ThemeProvider({ children, defaultTheme = DEFAULT_THEME, storageKey = DEFAULT_STORAGE_KEY, }) {
+export function ThemeProvider({ children, defaultTheme = DEFAULT_THEME, storageKey = DEFAULT_STORAGE_KEY, persistBoot = true, }) {
     const [theme, _setTheme] = useState(() => readCookie(storageKey) || defaultTheme);
     const resolvedTheme = useMemo(() => {
         if (theme === 'system') {
@@ -49,8 +50,13 @@ export function ThemeProvider({ children, defaultTheme = DEFAULT_THEME, storageK
             return;
         const root = window.document.documentElement;
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        // Unchanged classes are left alone: every class mutation makes the
+        // branding provider repaint its tokens.
         const applyTheme = (current) => {
-            root.classList.remove('light', 'dark');
+            const other = current === 'dark' ? 'light' : 'dark';
+            if (root.classList.contains(current) && !root.classList.contains(other))
+                return;
+            root.classList.remove(other);
             root.classList.add(current);
         };
         const handleChange = () => {
@@ -62,6 +68,14 @@ export function ThemeProvider({ children, defaultTheme = DEFAULT_THEME, storageK
         mediaQuery.addEventListener('change', handleChange);
         return () => mediaQuery.removeEventListener('change', handleChange);
     }, [theme, resolvedTheme]);
+    const bootOptions = typeof persistBoot === 'object' ? persistBoot : undefined;
+    useEffect(() => {
+        const stop = persistBoot === false ? () => { } : watchThemeBoot(bootOptions);
+        releaseThemeBoot();
+        return stop;
+        // Options are read once: the watcher lives as long as the app.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [persistBoot === false]);
     const setTheme = (next) => {
         writeCookie(storageKey, next, THEME_COOKIE_MAX_AGE);
         _setTheme(next);

package/dist/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAK/E,MAAM,aAAa,GAAU,QAAQ,CAAA;AACrC,MAAM,mBAAmB,GAAG,mBAAmB,CAAA;AAC/C,MAAM,oBAAoB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;AAgB/C,MAAM,YAAY,GAAuB;IACvC,YAAY,EAAE,aAAa;IAC3B,aAAa,EAAE,OAAO;IACtB,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;IACpB,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI;CACvB,CAAA;AAED,MAAM,YAAY,GAAG,aAAa,CAAqB,YAAY,CAAC,CAAA;AAEpE,SAAS,UAAU,CAAC,IAAY;IAC9B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,SAAS,CAAA;IACrD,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM;SAC1B,KAAK,CAAC,IAAI,CAAC;SACX,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IAChE,IAAI,CAAC,KAAK;QAAE,OAAO,SAAS,CAAA;IAC5B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACjC,OAAO,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;AACtD,CAAC;AAED,SAAS,WAAW,CAAC,IAAY,EAAE,KAAa,EAAE,MAAc;IAC9D,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAM;IAC3C,QAAQ,CAAC,MAAM,GAAG,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,KAAK,CAAC,qBAAqB,MAAM,gBAAgB,CAAA;AACvH,CAAC;AAED,SAAS,WAAW,CAAC,IAAY;IAC/B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAM;IAC3C,QAAQ,CAAC,MAAM,GAAG,GAAG,kBAAkB,CAAC,IAAI,CAAC,oCAAoC,CAAA;AACnF,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,GAAG,aAAa,EAC5B,UAAU,GAAG,mBAAmB,GACb;IACnB,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,QAAQ,CACjC,GAAG,EAAE,CAAE,UAAU,CAAC,UAAU,CAAuB,IAAI,YAAY,CACpE,CAAA;IAED,MAAM,aAAa,GAAG,OAAO,CAAC,GAAkB,EAAE;QAChD,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvB,IAAI,OAAO,MAAM,KAAK,WAAW;gBAAE,OAAO,OAAO,CAAA;YACjD,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO;gBAC9D,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,OAAO,CAAA;QACb,CAAC;QACD,OAAO,KAAsB,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAM;QACzC,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAA;QAC5C,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAA;QAEpE,MAAM,UAAU,GAAG,CAAC,OAAsB,EAAE,EAAE;YAC5C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;YACtC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QAC7B,CAAC,CAAA;QAED,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;gBACvB,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;YACnD,CAAC;QACH,CAAC,CAAA;QAED,UAAU,CAAC,aAAa,CAAC,CAAA;QACzB,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QACnD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;IACrE,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAA;IAE1B,MAAM,QAAQ,GAAG,CAAC,IAAW,EAAE,EAAE;QAC/B,WAAW,CAAC,UAAU,EAAE,IAAI,EAAE,oBAAoB,CAAC,CAAA;QACnD,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,WAAW,CAAC,UAAU,CAAC,CAAA;QACvB,SAAS,CAAC,YAAY,CAAC,CAAA;IACzB,CAAC,CAAA;IAED,MAAM,KAAK,GAAuB;QAChC,YAAY;QACZ,aAAa;QACb,KAAK;QACL,QAAQ;QACR,UAAU;KACX,CAAA;IAED,OAAO,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CAAA;AAChF,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,QAAQ;IACtB,MAAM,GAAG,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACpC,IAAI,CAAC,GAAG;QAAE,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;IACzE,OAAO,GAAG,CAAA;AACZ,CAAC"}
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-theme",
-  "version": "2.21.0",
+  "version": "2.25.0",
   "description": "Metacore design tokens + Tailwind 4 preset (oklch, shadows, fonts, dark mode)",
   "license": "Apache-2.0",
   "repository": {
@@ -28,6 +28,10 @@
       "types": "./dist/fonts.d.ts",
       "import": "./dist/fonts.js"
     },
+    "./boot": {
+      "types": "./dist/boot.d.ts",
+      "import": "./dist/boot.js"
+    },
     "./preset": {
       "types": "./dist/preset.d.ts",
       "import": "./dist/preset.js"
@@ -44,9 +48,11 @@
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "happy-dom": "^20.11.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "typescript": "^6.0.0"
+    "typescript": "^6.0.0",
+    "vitest": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -55,6 +61,7 @@
     "build": "tsc -p tsconfig.json",
     "dev": "tsc -w -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "test": "vitest run"
   }
 }

package/styles/glass.css

@@ -134,7 +134,14 @@
   background-attachment: fixed;
 }
 
-/* ─── Blur behind every translucent surface ─── */
+/* ─── Blur behind every translucent surface ───
+ * A backdrop-filter makes its element the containing block of every
+ * position:fixed descendant, the main inset included. A fixed layer rendered
+ * inline inside the page (a drag overlay, a full-screen editor, a loading
+ * veil) is then placed and clipped by the panel, not the viewport. Render such
+ * layers through a portal to <body>: Radix primitives already do, and
+ * @asteby/metacore-runtime-react ships PortalDragOverlay for dnd-kit.
+ */
 [data-ui-theme='glass'] .bg-background,
 [data-ui-theme='glass'] .bg-card,
 [data-ui-theme='glass'] .bg-popover,
@@ -190,19 +197,53 @@
   width: calc(var(--sidebar-width-icon) + 1rem);
 }
 
+/*
+ * Host chrome awareness. A host with fixed chrome around the app shell
+ * publishes its sizes as CSS variables on :root (all default to 0, so without
+ * them nothing changes):
+ *
+ *   --app-topbar-h     height of a fixed top bar
+ *   --app-notice-h     height of a notice strip under it (0 when hidden)
+ *   --app-bottombar-h  height of a bottom dock (mobile)
+ *
+ * The floating inset leaves them free: top margin = topbar + notice + gutter,
+ * bottom margin (mobile) = bottombar + gutter. Optionally cap the panel with
+ *   --glass-inset-max-height: calc(100svh - var(--app-topbar-h) - var(--app-notice-h) - 1rem);
+ * when the shell wrapper is not height-bound (min-h-svh) — the SDK
+ * SidebarProvider is h-svh, where the panel already stretches to fit.
+ */
 @media (min-width: 768px) {
   [data-ui-theme='glass'] [data-slot='sidebar'][data-variant='sidebar'] ~ [data-slot='sidebar-inset'] {
-    margin: 0.5rem;
+    margin: calc(var(--app-topbar-h, 0px) + var(--app-notice-h, 0px) + 0.5rem) 0.5rem 0.5rem;
     margin-inline-start: 0;
+    max-height: var(--glass-inset-max-height, none);
+  }
+
+  /*
+   * Opt-in: an inset with no sidebar sibling (chat-like screens) floats the
+   * same way with <SidebarInset data-glass-float>.
+   */
+  [data-ui-theme='glass'] [data-slot='sidebar-inset'][data-glass-float] {
+    margin: calc(var(--app-topbar-h, 0px) + var(--app-notice-h, 0px) + 0.5rem) 0.5rem 0.5rem;
+    max-height: var(--glass-inset-max-height, none);
   }
 }
 
 @media (max-width: 767px) {
-  /* No sidebar panel beside it on phones: the inset is the whole screen. */
+  /*
+   * No sidebar panel beside it on phones: by default the inset is the whole
+   * screen, flat. Opt in to a floating panel with --glass-mobile-gutter
+   * (e.g. 0.5rem), --glass-mobile-radius (e.g. var(--glass-radius)),
+   * --glass-mobile-border-width (e.g. 1px) and --glass-mobile-shadow
+   * (e.g. var(--glass-highlight), var(--glass-shadow)).
+   */
   [data-ui-theme='glass'] [data-slot='sidebar-inset'] {
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
+    margin: calc(var(--app-topbar-h, 0px) + var(--app-notice-h, 0px) + var(--glass-mobile-gutter, 0px))
+      var(--glass-mobile-gutter, 0px) calc(var(--app-bottombar-h, 0px) + var(--glass-mobile-gutter, 0px));
+    max-height: var(--glass-inset-max-height, none);
+    border-width: var(--glass-mobile-border-width, 0px);
+    border-radius: var(--glass-mobile-radius, 0px);
+    box-shadow: var(--glass-mobile-shadow, none);
   }
 }
 
@@ -212,7 +253,8 @@
  * gutter, over the dimmed overlay, so it takes the denser popover glass.
  */
 [data-ui-theme='glass'] [data-mobile='true'][data-slot='sidebar'] {
-  inset-block: 0.5rem;
+  inset-block-start: calc(var(--app-topbar-h, 0px) + var(--app-notice-h, 0px) + 0.5rem);
+  inset-block-end: calc(var(--app-bottombar-h, 0px) + 0.5rem);
   inset-inline-start: 0.5rem;
   height: auto;
   background-color: var(--popover);