@calliopelabs/ui 0.6.1 → 0.11.0

package/dist/appearance/runtime-brand.d.ts

@@ -0,0 +1,106 @@
+import { type Ground, type Mode } from "../theme/tokens.js";
+import type { Product } from "./product.js";
+/**
+ * A per-deployment brand, resolved on the server: one product (say the
+ * studio) shown under a customer's name, logo, accent and sidebar. Plain
+ * data, so it crosses the Server Component boundary; the `Product`, with its
+ * nav icons, stays a client-module constant, and `withBrand` merges the two.
+ *
+ * Every colour is lowercase `#rrggbb`. That is the injection guard: these
+ * values land in a <style>. Run untrusted input through
+ * `resolveRuntimeBrand` first; `brandStyles` also skips anything that is not
+ * a colour, so a brand built in code cannot break out either.
+ */
+export interface RuntimeBrand {
+    /** Replaces the product's name in the brand mark and titles. */
+    name?: string;
+    /** For tight spots: a collapsed rail, a phone bar. */
+    shortName?: string;
+    /**
+     * `https://` or `data:image/...` URLs only, for an <img src>; never put them
+     * in CSS. `onDark` is drawn on a dark sidebar, `onLight` on a light one.
+     */
+    logo?: {
+        mark?: string;
+        onDark?: string;
+        onLight?: string;
+    };
+    /** Offered under the reserved accent key `brand`. The ink on it is derived when absent or faint. */
+    accent?: {
+        dark: string;
+        light: string;
+        onDark?: string;
+        onLight?: string;
+        label?: string;
+    };
+    /** True: the brand accent is the only accent and no custom colour is accepted. Default false: offered first, as the default. */
+    lockAccent?: boolean;
+    /** The brand surface. A string paints the brand sidebar grounds (dark); `light` opts light grounds into a brand sidebar too. */
+    sidebar?: string | {
+        dark: string;
+        light?: string;
+    };
+    /** The current-item marker on the brand sidebar; the accent when absent. */
+    sidebarMarker?: string;
+    /** Narrows the product's grounds. */
+    grounds?: readonly Ground[];
+    /** One ground pins it whatever the operating system says; a pair follows the system like a product default. */
+    defaultGround?: Ground | {
+        dark: Ground;
+        light: Ground;
+    };
+}
+export interface ResolvedRuntimeBrand {
+    /** Validated: unknown or malformed fields dropped, inks filled, failing accents replaced. */
+    brand: RuntimeBrand;
+    /** One line per thing dropped or replaced, for the server log and the brand admin. */
+    warnings: string[];
+}
+/** The accent key a runtime brand's accent is offered under. Products may not use it. */
+export declare const BRAND_ACCENT_KEY = "brand";
+/**
+ * Validate a brand from anywhere (a database row, an env var, a form) for one
+ * product, and fix what would paint badly. Never throws: a malformed field is
+ * dropped and a colour that fails contrast is replaced, each with a warning,
+ * so a bad brand degrades to the product rather than taking the page down.
+ *
+ * - Colours must be lowercase `#rrggbb`.
+ * - The accent stands 3:1 off every offered ground of its mode, or that mode
+ *   falls back to the product's default accent. Its ink reads 4.5:1 on it,
+ *   or becomes black or white.
+ * - `grounds` keeps only the product's grounds; `defaultGround` must be
+ *   offered, and a pair must name a dark and a light ground.
+ * - Logos are `https://` or `data:image/(svg+xml|png|webp|jpeg|x-icon)`, at
+ *   most 300,000 characters.
+ * - The sidebar text is chosen to read 4.5:1; a marker under 3:1 on the
+ *   sidebar is drawn in the sidebar text colour instead.
+ */
+export declare function resolveRuntimeBrand(input: unknown, product: Product): ResolvedRuntimeBrand;
+/**
+ * The product as this deployment shows it: the brand's name, logo, sidebar,
+ * grounds and default ground, and its accent under the key `brand`, first
+ * (or alone, with `lockAccent`). Pure. A missing or empty brand returns the
+ * product itself, so an unbranded app is unchanged. Untrusted input is
+ * validated on the way in (`resolveRuntimeBrand`), warnings dropped.
+ */
+export declare function withBrand(product: Product, brand: RuntimeBrand | null | undefined): Product;
+/**
+ * The brand's CSS for a <style> in <head>, beside `productStyles`: the
+ * `data-accent="brand"` blocks and the `--brand-sidebar-*` variables that
+ * theme.css reads. Every value is a validated `#rrggbb` or a fixed string,
+ * so the text is safe to inline. Pass a resolved brand: this checks syntax,
+ * not the accent's contrast on the product's grounds.
+ */
+export declare function brandStyles(brand: RuntimeBrand): string;
+/**
+ * The same tokens for one mode as an inline style map, accent included, for
+ * a preview frame that carries its own `data-mode` and `data-ground` (a
+ * brand admin showing a draft).
+ */
+export declare function brandStyleVars(brand: RuntimeBrand, mode: Mode): Record<`--${string}`, string>;
+/**
+ * Attributes for the server-rendered <html>: what the page paints for someone
+ * who has not chosen, before (or without) the boot script. Pair with
+ * `suppressHydrationWarning`, since the script may change them.
+ */
+export declare function htmlAttributes(product: Product, brand?: RuntimeBrand | null): Record<`data-${string}`, string>;

package/dist/appearance/runtime-brand.js

@@ -0,0 +1,420 @@
+import { MIN_NON_TEXT_CONTRAST, MIN_TEXT_CONTRAST, contrastRatio } from "../theme/contrast.js";
+import { GROUNDS, GROUND_KEYS, MODE_TOKENS, SURFACES, } from "../theme/tokens.js";
+import { inkFor, resolveAppearance } from "./appearance.js";
+/** The accent key a runtime brand's accent is offered under. Products may not use it. */
+export const BRAND_ACCENT_KEY = "brand";
+const HEX = /^#[0-9a-f]{6}$/;
+const MODES = ["dark", "light"];
+const FIELDS = new Set([
+    "name",
+    "shortName",
+    "logo",
+    "accent",
+    "lockAccent",
+    "sidebar",
+    "sidebarMarker",
+    "grounds",
+    "defaultGround",
+]);
+const LOGO_MAX = 300_000;
+const HTTPS_URL = /^https:\/\/[^\s"'<>\\()]+$/;
+const DATA_IMAGE = /^data:image\/(svg\+xml|png|webp|jpeg|x-icon)[;,]/;
+// eslint-disable-next-line no-control-regex
+const CONTROL = /[\u0000-\u001f\u007f]/;
+function isHex(value) {
+    return typeof value === "string" && HEX.test(value);
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/** A short, safe rendering of a rejected value for a warning. */
+function shown(value) {
+    const text = typeof value === "string" ? value : (JSON.stringify(value) ?? String(value));
+    return JSON.stringify(text.length > 40 ? `${text.slice(0, 40)}...` : text)
+        .replace(/</g, "\\u003c")
+        .replace(/>/g, "\\u003e");
+}
+/** The sidebar text colour: the mode's own when it reads 4.5:1, else black or white. */
+function sidebarInk(sidebar, mode) {
+    const own = MODE_TOKENS[mode].sidebarForeground;
+    return contrastRatio(own, sidebar) >= MIN_TEXT_CONTRAST ? own : inkFor(sidebar);
+}
+/** `a` moved `t` of the way to `b`, both `#rrggbb`. */
+function mix(a, b, t) {
+    const [x, y] = [parseInt(a.slice(1), 16), parseInt(b.slice(1), 16)];
+    const channel = (shift) => {
+        const from = (x >> shift) & 255;
+        const to = (y >> shift) & 255;
+        return Math.round(from + (to - from) * t)
+            .toString(16)
+            .padStart(2, "0");
+    };
+    return `#${channel(16)}${channel(8)}${channel(0)}`;
+}
+/** Secondary sidebar text: the sidebar ink faded toward the sidebar as far as 4.5:1 allows. */
+function sidebarMutedInk(sidebar, ink) {
+    for (let t = 0.5; t > 0; t -= 0.05) {
+        const muted = mix(ink, sidebar, t);
+        if (contrastRatio(muted, sidebar) >= MIN_TEXT_CONTRAST)
+            return muted;
+    }
+    return ink;
+}
+/** Grounds of `mode` whose own secondary text reads under 4.5:1 on the brand sidebar. */
+function faintMutedGrounds(grounds, mode, sidebar) {
+    return brandSidebarGrounds(grounds, mode).filter((g) => contrastRatio(SURFACES[g].mutedForeground, sidebar) < MIN_TEXT_CONTRAST);
+}
+function sidebarsOf(brand) {
+    const { sidebar } = brand;
+    if (sidebar === undefined)
+        return {};
+    if (typeof sidebar === "string")
+        return isHex(sidebar) ? { dark: sidebar } : {};
+    const out = {};
+    if (isHex(sidebar.dark))
+        out.dark = sidebar.dark;
+    if (isHex(sidebar.light))
+        out.light = sidebar.light;
+    return out;
+}
+/** Grounds of `mode` that paint the brand sidebar of that mode. */
+function brandSidebarGrounds(grounds, mode) {
+    return grounds.filter((g) => GROUNDS[g].mode === mode && (mode === "light" || SURFACES[g].sidebar === "brand"));
+}
+/**
+ * Validate a brand from anywhere (a database row, an env var, a form) for one
+ * product, and fix what would paint badly. Never throws: a malformed field is
+ * dropped and a colour that fails contrast is replaced, each with a warning,
+ * so a bad brand degrades to the product rather than taking the page down.
+ *
+ * - Colours must be lowercase `#rrggbb`.
+ * - The accent stands 3:1 off every offered ground of its mode, or that mode
+ *   falls back to the product's default accent. Its ink reads 4.5:1 on it,
+ *   or becomes black or white.
+ * - `grounds` keeps only the product's grounds; `defaultGround` must be
+ *   offered, and a pair must name a dark and a light ground.
+ * - Logos are `https://` or `data:image/(svg+xml|png|webp|jpeg|x-icon)`, at
+ *   most 300,000 characters.
+ * - The sidebar text is chosen to read 4.5:1; a marker under 3:1 on the
+ *   sidebar is drawn in the sidebar text colour instead.
+ */
+export function resolveRuntimeBrand(input, product) {
+    const warnings = [];
+    const warn = (message) => warnings.push(message);
+    const brand = {};
+    if (input === null || input === undefined)
+        return { brand, warnings };
+    if (!isRecord(input)) {
+        warn("brand is not an object; ignored");
+        return { brand, warnings };
+    }
+    for (const key of Object.keys(input)) {
+        if (!FIELDS.has(key))
+            warn(`unknown field ${shown(key)} ignored`);
+    }
+    const text = (field, value, max) => {
+        if (value === undefined)
+            return undefined;
+        const trimmed = typeof value === "string" ? value.trim() : "";
+        if (trimmed && trimmed.length <= max && !CONTROL.test(trimmed))
+            return trimmed;
+        warn(`${field} must be text of 1 to ${max} characters; ignored`);
+        return undefined;
+    };
+    const colour = (field, value) => {
+        if (value === undefined)
+            return undefined;
+        if (isHex(value))
+            return value;
+        warn(`${field} must be lowercase #rrggbb, got ${shown(value)}; ignored`);
+        return undefined;
+    };
+    const name = text("name", input.name, 120);
+    if (name)
+        brand.name = name;
+    const shortName = text("shortName", input.shortName, 40);
+    if (shortName)
+        brand.shortName = shortName;
+    if (input.logo !== undefined) {
+        if (isRecord(input.logo)) {
+            const logo = {};
+            for (const key of ["mark", "onDark", "onLight"]) {
+                const url = input.logo[key];
+                if (url === undefined)
+                    continue;
+                if (typeof url === "string" &&
+                    url.length <= LOGO_MAX &&
+                    (HTTPS_URL.test(url) || DATA_IMAGE.test(url))) {
+                    logo[key] = url;
+                }
+                else {
+                    warn(`logo.${key} must be an https:// or data:image URL; ignored`);
+                }
+            }
+            if (Object.keys(logo).length > 0)
+                brand.logo = logo;
+        }
+        else {
+            warn("logo must be an object; ignored");
+        }
+    }
+    // Grounds first: the accent is checked against the grounds actually offered.
+    if (input.grounds !== undefined) {
+        if (Array.isArray(input.grounds)) {
+            for (const g of input.grounds) {
+                if (!product.grounds.includes(g))
+                    warn(`ground ${shown(g)} is not one of ${product.name}'s grounds; ignored`);
+            }
+            const grounds = product.grounds.filter((g) => input.grounds.includes(g));
+            if (grounds.length > 0)
+                brand.grounds = grounds;
+            else
+                warn("grounds offers none of the product's grounds; ignored");
+        }
+        else {
+            warn("grounds must be a list; ignored");
+        }
+    }
+    const offered = brand.grounds ?? product.grounds;
+    const isOffered = (g) => offered.includes(g);
+    const pinned = input.defaultGround;
+    if (pinned !== undefined) {
+        if (isOffered(pinned)) {
+            brand.defaultGround = pinned;
+        }
+        else if (isRecord(pinned) &&
+            isOffered(pinned.dark) &&
+            isOffered(pinned.light) &&
+            GROUNDS[pinned.dark].mode === "dark" &&
+            GROUNDS[pinned.light].mode === "light") {
+            brand.defaultGround = { dark: pinned.dark, light: pinned.light };
+        }
+        else {
+            warn(`defaultGround ${shown(pinned)} must be an offered ground, or an offered {dark, light} pair; ignored`);
+        }
+    }
+    if (input.accent !== undefined) {
+        const raw = isRecord(input.accent) ? input.accent : {};
+        const dark = colour("accent.dark", raw.dark);
+        const light = colour("accent.light", raw.light);
+        if (dark && light) {
+            const fallback = product.accents.find((a) => a.key === product.defaults.accent) ?? product.accents[0];
+            const accent = { dark, light };
+            for (const mode of MODES) {
+                const ink = mode === "dark" ? "onDark" : "onLight";
+                const faint = offered.filter((g) => GROUNDS[g].mode === mode &&
+                    contrastRatio(accent[mode], SURFACES[g].background) < MIN_NON_TEXT_CONTRAST);
+                let given = colour(`accent.${ink}`, raw[ink]);
+                if (faint.length > 0) {
+                    warn(`accent.${mode} ${accent[mode]} is under ${MIN_NON_TEXT_CONTRAST}:1 on ${faint.join(", ")}; using ${fallback.label} on ${mode} grounds`);
+                    accent[mode] = fallback[mode];
+                    given = fallback[ink];
+                }
+                if (given && contrastRatio(given, accent[mode]) < MIN_TEXT_CONTRAST) {
+                    warn(`accent.${ink} ${given} is under ${MIN_TEXT_CONTRAST}:1 on its accent; derived`);
+                    given = undefined;
+                }
+                accent[ink] = given ?? inkFor(accent[mode]);
+            }
+            const label = text("accent.label", raw.label, 40);
+            if (label)
+                accent.label = label;
+            brand.accent = accent;
+        }
+        else {
+            warn("accent needs dark and light colours; ignored");
+        }
+    }
+    if (input.lockAccent !== undefined) {
+        if (typeof input.lockAccent !== "boolean")
+            warn("lockAccent must be true or false; ignored");
+        else if (input.lockAccent && !brand.accent)
+            warn("lockAccent needs an accent; ignored");
+        else
+            brand.lockAccent = input.lockAccent;
+    }
+    const sidebar = input.sidebar;
+    if (sidebar !== undefined) {
+        if (typeof sidebar === "string") {
+            const dark = colour("sidebar", sidebar);
+            if (dark)
+                brand.sidebar = dark;
+        }
+        else if (isRecord(sidebar)) {
+            const dark = colour("sidebar.dark", sidebar.dark);
+            const light = colour("sidebar.light", sidebar.light);
+            if (dark)
+                brand.sidebar = light ? { dark, light } : { dark };
+            else if (sidebar.dark === undefined)
+                warn("sidebar needs a dark colour; ignored");
+        }
+        else {
+            warn("sidebar must be a colour or {dark, light}; ignored");
+        }
+    }
+    const marker = colour("sidebarMarker", input.sidebarMarker);
+    if (marker)
+        brand.sidebarMarker = marker;
+    // Warnings only: brandStyles picks the sidebar text and marker per mode.
+    const sidebars = sidebarsOf(brand);
+    for (const mode of MODES) {
+        const surface = sidebars[mode];
+        const grounds = brandSidebarGrounds(offered, mode);
+        if (!surface || grounds.length === 0)
+            continue;
+        const ink = sidebarInk(surface, mode);
+        if (ink !== MODE_TOKENS[mode].sidebarForeground)
+            warn(`the ${mode}-ground sidebar ${surface} does not suit ${mode} text; sidebar text is ${ink}`);
+        const muted = faintMutedGrounds(offered, mode, surface);
+        if (muted.length > 0)
+            warn(`secondary text reads under ${MIN_TEXT_CONTRAST}:1 on the ${mode}-ground sidebar ${surface} (${muted.join(", ")}); drawn in ${sidebarMutedInk(surface, ink)}`);
+        if (marker && contrastRatio(marker, surface) < MIN_NON_TEXT_CONTRAST)
+            warn(`sidebarMarker ${marker} is under ${MIN_NON_TEXT_CONTRAST}:1 on the ${mode}-ground sidebar; drawn in ${ink}`);
+    }
+    return { brand, warnings };
+}
+/**
+ * The product as this deployment shows it: the brand's name, logo, sidebar,
+ * grounds and default ground, and its accent under the key `brand`, first
+ * (or alone, with `lockAccent`). Pure. A missing or empty brand returns the
+ * product itself, so an unbranded app is unchanged. Untrusted input is
+ * validated on the way in (`resolveRuntimeBrand`), warnings dropped.
+ */
+export function withBrand(product, brand) {
+    if (!brand)
+        return product;
+    const b = resolveRuntimeBrand(brand, product).brand;
+    if (Object.keys(b).length === 0)
+        return product;
+    const grounds = b.grounds ?? product.grounds;
+    const offered = (g) => grounds.includes(g);
+    const brandAccent = b.accent
+        ? {
+            key: BRAND_ACCENT_KEY,
+            label: b.accent.label ?? b.name ?? "Brand",
+            dark: b.accent.dark,
+            onDark: b.accent.onDark ?? inkFor(b.accent.dark),
+            light: b.accent.light,
+            onLight: b.accent.onLight ?? inkFor(b.accent.light),
+            brand: true,
+        }
+        : null;
+    const accentLocked = Boolean(brandAccent && b.lockAccent);
+    const accents = brandAccent
+        ? accentLocked
+            ? [brandAccent]
+            : [brandAccent, ...product.accents]
+        : product.accents;
+    const groundFor = (mode) => {
+        const own = product.defaults.ground[mode];
+        if (offered(own))
+            return own;
+        return grounds.find((g) => GROUNDS[g].mode === mode) ?? grounds[0];
+    };
+    const ground = typeof b.defaultGround === "string"
+        ? { dark: b.defaultGround, light: b.defaultGround }
+        : (b.defaultGround ?? { dark: groundFor("dark"), light: groundFor("light") });
+    const sidebars = sidebarsOf(b);
+    const result = {
+        ...product,
+        name: b.name ?? product.name,
+        sidebar: sidebars.dark ?? product.sidebar,
+        grounds,
+        accents,
+        defaults: {
+            ...product.defaults,
+            ground,
+            accent: brandAccent ? BRAND_ACCENT_KEY : product.defaults.accent,
+        },
+        themes: product.themes.filter((t) => offered(t.ground) && accents.some((a) => a.key === t.accent)),
+    };
+    if (b.shortName)
+        result.shortName = b.shortName;
+    if (b.logo)
+        result.logo = b.logo;
+    if (sidebars.light)
+        result.sidebarLight = sidebars.light;
+    if (accentLocked)
+        result.accentLocked = true;
+    return result;
+}
+/** The brand's tokens for one mode: the accent's (under `data-accent="brand"`) and the sidebar's. */
+function brandDeclarations(brand, mode) {
+    const accent = [];
+    const raw = brand.accent;
+    if (raw && isHex(raw.dark) && isHex(raw.light)) {
+        const colour = raw[mode];
+        const given = mode === "dark" ? raw.onDark : raw.onLight;
+        const ink = isHex(given) && contrastRatio(given, colour) >= MIN_TEXT_CONTRAST
+            ? given
+            : inkFor(colour);
+        accent.push(["--brand-primary", colour], ["--brand-on-primary", ink]);
+    }
+    const sidebar = [];
+    const surface = sidebarsOf(brand)[mode];
+    if (surface) {
+        const ink = sidebarInk(surface, mode);
+        if (mode === "dark")
+            sidebar.push(["--brand-sidebar", surface]);
+        else
+            sidebar.push(["--brand-sidebar-light", surface]);
+        sidebar.push(["--brand-sidebar-foreground", ink]);
+        if (faintMutedGrounds(brand.grounds ?? GROUND_KEYS, mode, surface).length > 0)
+            sidebar.push(["--brand-sidebar-muted-foreground", sidebarMutedInk(surface, ink)]);
+        const marker = brand.sidebarMarker;
+        if (isHex(marker))
+            sidebar.push([
+                "--brand-sidebar-primary",
+                contrastRatio(marker, surface) >= MIN_NON_TEXT_CONTRAST ? marker : ink,
+            ]);
+        if (mode === "light")
+            sidebar.push(["--brand-sidebar-accent", "color-mix(in oklab, var(--primary) 16%, transparent)"], ["--brand-sidebar-border", `color-mix(in oklab, ${ink} 12%, transparent)`]);
+    }
+    return { accent, sidebar };
+}
+function rule(selector, declarations) {
+    return `${selector}{${declarations.map(([p, v]) => `${p}:${v}`).join(";")}}`;
+}
+/**
+ * The brand's CSS for a <style> in <head>, beside `productStyles`: the
+ * `data-accent="brand"` blocks and the `--brand-sidebar-*` variables that
+ * theme.css reads. Every value is a validated `#rrggbb` or a fixed string,
+ * so the text is safe to inline. Pass a resolved brand: this checks syntax,
+ * not the accent's contrast on the product's grounds.
+ */
+export function brandStyles(brand) {
+    return MODES.flatMap((mode) => {
+        const { accent, sidebar } = brandDeclarations(brand, mode);
+        const rules = [];
+        if (accent.length > 0)
+            rules.push(rule(`[data-mode="${mode}"][data-accent="${BRAND_ACCENT_KEY}"]`, accent));
+        if (sidebar.length > 0)
+            rules.push(rule(`[data-mode="${mode}"]`, sidebar));
+        return rules;
+    }).join("");
+}
+/**
+ * The same tokens for one mode as an inline style map, accent included, for
+ * a preview frame that carries its own `data-mode` and `data-ground` (a
+ * brand admin showing a draft).
+ */
+export function brandStyleVars(brand, mode) {
+    const { accent, sidebar } = brandDeclarations(brand, mode);
+    return Object.fromEntries([...accent, ...sidebar]);
+}
+/**
+ * Attributes for the server-rendered <html>: what the page paints for someone
+ * who has not chosen, before (or without) the boot script. Pair with
+ * `suppressHydrationWarning`, since the script may change them.
+ */
+export function htmlAttributes(product, brand) {
+    const effective = withBrand(product, brand);
+    const { value, mode } = resolveAppearance(null, null, effective, "dark");
+    return {
+        "data-product": effective.id,
+        "data-ground": value.ground,
+        "data-mode": mode,
+        "data-accent": value.accent,
+        "data-density": value.density,
+    };
+}

package/dist/css/appearance.js

@@ -0,0 +1,147 @@
+/*
+ * @calliopelabs/ui CSS layer: appearance.
+ * Generated by `npm run theme` from src/appearance/boot.ts. Do not edit by hand.
+ *
+ * Load it in <head>, before the stylesheets, as a plain script element
+ * (no async, no defer) with the product on it, so it runs before first
+ * paint: src=".../appearance.js" data-product="astrolift".
+ *
+ * It stamps the person's ground, accent, density and corners on <html> from
+ * localStorage, exactly as AppearanceScript does, and leaves an API on
+ * window.CalliopeAppearance:
+ *   get()            the appearance on <html> now
+ *   set(partial)     store and apply { ground, accent, density, corners }
+ *   reset()          forget the choice; the product's defaults apply
+ *   boot(config)     use another product's boot config
+ *   config           the active product's grounds, accents and corners
+ *   products         the built-in products' boot configs, by id
+ * Every change dispatches "calliope:appearance" on document.
+ */
+(function () {
+  var boot = function (c) {
+  var d = document.documentElement, p = {};
+  try {
+    var raw = window.localStorage.getItem(c.key);
+    var parsed = raw ? JSON.parse(raw) : null;
+    if (parsed && typeof parsed === "object") p = parsed;
+  } catch (e) {}
+  var light = false;
+  try {
+    light = window.matchMedia("(prefers-color-scheme: light)").matches;
+  } catch (e) {}
+  var has = function (o, k) {
+    return typeof k === "string" && Object.prototype.hasOwnProperty.call(o, k);
+  };
+  var lum = function (h) {
+    var n = parseInt(h.slice(1), 16), rgb = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+    var w = [0.2126, 0.7152, 0.0722], s = 0;
+    for (var i = 0; i < 3; i++) {
+      var v = rgb[i] / 255;
+      s += w[i] * (v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
+    }
+    return s;
+  };
+  var ratio = function (x, y) {
+    var a = lum(x), b = lum(y);
+    return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+  };
+  var ground = has(c.grounds, p.ground) ? p.ground : light ? c.defaults.light : c.defaults.dark;
+  var accent = p.accent;
+  var custom = typeof accent === "string" && /^#[0-9a-f]{6}$/.test(accent) &&
+    ratio(accent, c.grounds[ground].background) >= c.minContrast;
+  d.dataset.product = c.product;
+  d.dataset.ground = ground;
+  d.dataset.mode = c.grounds[ground].mode;
+  if (custom) {
+    d.dataset.accent = "custom";
+    d.style.setProperty("--brand-primary", accent);
+    d.style.setProperty("--brand-on-primary",
+      ratio(accent, "#000000") >= ratio(accent, "#ffffff") ? "#000000" : "#ffffff");
+  } else {
+    d.dataset.accent = c.accents.indexOf(accent) > -1 ? accent : c.defaults.accent;
+  }
+  d.dataset.density = p.density === "compact" || p.density === "cards" ? p.density : c.defaults.density;
+  d.style.setProperty("--radius",
+    (c.corners.indexOf(p.corners) > -1 ? p.corners : c.defaults.corners) + "px");
+};
+  var products = {"astrolift":{"product":"astrolift","key":"astrolift.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"emerald":{"mode":"dark","background":"#050b08"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"graphite","light":"mist","accent":"green","density":"compact","corners":2}},"zentinelle":{"product":"zentinelle","key":"zentinelle.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["teal","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"black","light":"mist","accent":"teal","density":"compact","corners":2}},"workbench":{"product":"workbench","key":"workbench.appearance","grounds":{"navy":{"mode":"dark","background":"#0b1120"},"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["workbench-blue","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"navy","light":"mist","accent":"workbench-blue","density":"compact","corners":2}},"chat-studio":{"product":"chat-studio","key":"chat-studio.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["studio-blue","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"black","light":"paper","accent":"studio-blue","density":"compact","corners":2}},"loadr":{"product":"loadr","key":"loadr.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["loadr-blue","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"charcoal","light":"paper","accent":"loadr-blue","density":"compact","corners":2}},"cykick":{"product":"cykick","key":"cykick.appearance","grounds":{"black":{"mode":"dark","background":"#000000"},"charcoal":{"mode":"dark","background":"#0e0f10"},"graphite":{"mode":"dark","background":"#111214"},"paper":{"mode":"light","background":"#faf6ee"},"mist":{"mode":"light","background":"#f2f7f9"}},"accents":["cykick-cyan","green","copper","ice","periwinkle","amber"],"corners":[0,2,4,10],"minContrast":3,"defaults":{"dark":"black","light":"mist","accent":"cykick-cyan","density":"compact","corners":0}}};
+  var d = document.documentElement;
+  var hex = /^#[0-9a-f]{6}$/;
+  var has = function (o, k) {
+    return typeof k === "string" && Object.prototype.hasOwnProperty.call(o, k);
+  };
+  var stored = function (c) {
+    try {
+      var parsed = JSON.parse(window.localStorage.getItem(c.key) || "null");
+      return parsed && typeof parsed === "object" ? parsed : {};
+    } catch (e) {
+      return {};
+    }
+  };
+  /* normalizePartial: only the axes that are valid for this product. A locked accent (22:1) takes no custom colour. */
+  var valid = function (c, v) {
+    var out = {};
+    if (has(c.grounds, v.ground)) out.ground = v.ground;
+    if (c.accents.indexOf(v.accent) > -1 || (hex.test(v.accent) && c.minContrast <= 21))
+      out.accent = v.accent;
+    if (v.density === "compact" || v.density === "cards") out.density = v.density;
+    if (c.corners.indexOf(v.corners) > -1) out.corners = v.corners;
+    return out;
+  };
+  var api = {
+    products: products,
+    config: null,
+    get: function () {
+      var custom = d.getAttribute("data-accent") === "custom";
+      return {
+        ground: d.getAttribute("data-ground"),
+        mode: d.getAttribute("data-mode"),
+        accent: custom ? d.style.getPropertyValue("--brand-primary") : d.getAttribute("data-accent"),
+        density: d.getAttribute("data-density"),
+        corners: parseInt(d.style.getPropertyValue("--radius"), 10)
+      };
+    },
+    set: function (next) {
+      var c = api.config;
+      if (!c || !next) return;
+      var merged = stored(c);
+      for (var k in next) if (has(next, k)) merged[k] = next[k];
+      if (typeof merged.accent === "string") merged.accent = merged.accent.toLowerCase();
+      try {
+        window.localStorage.setItem(c.key, JSON.stringify(valid(c, merged)));
+      } catch (e) {}
+      apply();
+    },
+    reset: function () {
+      if (!api.config) return;
+      try {
+        window.localStorage.removeItem(api.config.key);
+      } catch (e) {}
+      apply();
+    },
+    boot: function (config) {
+      api.config = config;
+      apply();
+    }
+  };
+  var apply = function () {
+    /* A custom accent is inline; a family accent comes from the stylesheet. */
+    d.style.removeProperty("--brand-primary");
+    d.style.removeProperty("--brand-on-primary");
+    try {
+      boot(api.config);
+    } catch (e) {}
+    var event;
+    try {
+      event = new CustomEvent("calliope:appearance", { detail: api.get() });
+    } catch (e) {
+      event = document.createEvent("CustomEvent");
+      event.initCustomEvent("calliope:appearance", false, false, api.get());
+    }
+    document.dispatchEvent(event);
+  };
+  window.CalliopeAppearance = api;
+  var me = document.currentScript;
+  var id = me && me.getAttribute("data-product");
+  if (has(products, id)) api.boot(products[id]);
+})();