@calliopelabs/ui 0.0.0-stage → 0.1.0

package/dist/appearance/appearance.d.ts

@@ -0,0 +1,90 @@
+import { type Density, type Ground, type Mode } from "../theme/tokens.js";
+import { type Corners, type Product } from "./product.js";
+/**
+ * Appearance: the axes a person sets for themselves, per product.
+ *
+ *   ground    the surface ramp; it implies light or dark (`data-mode`)
+ *   accent    the action colour and lead chart series: the product's accent,
+ *             a family accent, or any `#rrggbb` that stands 3:1 off the ground
+ *   density   compact | cards
+ *   corners   0 | 2 | 4 | 10 px
+ *
+ * A per-person display preference, not org state. It lives in localStorage
+ * because it must apply before first paint (AppearanceScript), which rules out
+ * waiting for a fetch; an app that also keeps it on its server hands it back
+ * through `AppearanceProvider`. Reads are defensive: Safari private mode and
+ * embedded webviews throw on storage access rather than returning null.
+ */
+export type CustomAccent = `#${string}`;
+export interface Appearance {
+    ground: Ground;
+    /** A product accent key, or a custom `#rrggbb`. */
+    accent: string;
+    density: Density;
+    corners: Corners;
+}
+/**
+ * Org policy: a house theme for people who have not chosen, optionally
+ * locked so the personal picker becomes read-only.
+ */
+export interface OrgAppearancePolicy {
+    orgDefault?: Partial<Appearance> | null;
+    locked?: boolean;
+}
+export interface ResolvedAppearance {
+    value: Appearance;
+    mode: Mode;
+    /** True when the org locked the theme; the picker renders read-only. */
+    locked: boolean;
+}
+export declare function modeFor(ground: Ground): Mode;
+/** A well-formed custom accent: lowercase `#rrggbb`. */
+export declare function isCustomAccent(value: unknown): value is CustomAccent;
+/** `#RGB`, `rrggbb` or `#RRGGBB` as a stored custom accent, or null. */
+export declare function parseCustomAccent(raw: string): CustomAccent | null;
+/** A custom accent's contrast against a ground's page colour, and whether it clears 3:1. */
+export declare function accentContrast(accent: CustomAccent, ground: Ground): {
+    ratio: number;
+    ok: boolean;
+};
+/** Black or white, whichever reads better on a filled accent. */
+export declare function inkFor(accent: CustomAccent): "#000000" | "#ffffff";
+/**
+ * Keep only the axes that are present and valid for this product, without
+ * filling in the rest. A partial has to stay partial: an org that pins only
+ * the accent must not thereby pin the ground, and a stored `{accent}` must
+ * leave the other axes to the org default.
+ */
+export declare function normalizePartial(raw: unknown, product: Product): Partial<Appearance>;
+/**
+ * A complete appearance from anything. The ground falls back to the
+ * product's default for `systemMode`; a custom accent that cannot be seen on
+ * the ground it lands on falls back to the product's accent.
+ */
+export declare function normalize(raw: unknown, product: Product, systemMode?: Mode): Appearance;
+/**
+ * Precedence: a locked org theme beats everything; otherwise a personal
+ * choice beats the org default, which beats the product default. Until
+ * someone picks a ground, light or dark follows the operating system.
+ */
+export declare function resolveAppearance(personal: Partial<Appearance> | null, policy: OrgAppearancePolicy | null, product: Product, systemMode?: Mode): ResolvedAppearance;
+/** The stored preference as written, or null. Used as the external-store snapshot. */
+export declare function readStoredAppearance(product: Product): string | null;
+/** Parse a stored preference; null when nothing recognisable is stored. */
+export declare function parseStoredAppearance(raw: string | null, product: Product): Partial<Appearance> | null;
+/**
+ * The personal preference, or null when this person has never chosen.
+ * Returning null rather than a filled-in default is load-bearing: the org
+ * default only applies to people who have not chosen, and "never chose" must
+ * not look like "chose the defaults".
+ */
+export declare function readAppearance(product: Product): Partial<Appearance> | null;
+export declare function writeAppearance(product: Product, next: Partial<Appearance>): void;
+/** Forget the personal preference, handing the decision back to the org or the product. */
+export declare function clearAppearance(product: Product): void;
+/** The preference as an app's server holds it; an empty object means never chosen. */
+export declare function appearanceFromServer(raw: unknown, product: Product): Partial<Appearance> | null;
+/** The tokens a custom accent sets inline, because it has no CSS block. */
+export declare const CUSTOM_ACCENT_PROPERTIES: readonly ["--brand-primary", "--brand-on-primary"];
+/** Stamp the axes onto <html> (or `root`). Safe to call before React hydrates. */
+export declare function applyAppearance(value: Appearance, product: Product, root?: HTMLElement): void;

package/dist/appearance/appearance.js

@@ -0,0 +1,151 @@
+import { readLocal, writeLocal } from "../lib/local-store.js";
+import { MIN_NON_TEXT_CONTRAST, contrastRatio } from "../theme/contrast.js";
+import { GROUNDS, SURFACES } from "../theme/tokens.js";
+import { CORNERS } from "./product.js";
+const HEX = /^#[0-9a-f]{6}$/;
+export function modeFor(ground) {
+    return GROUNDS[ground].mode;
+}
+/** A well-formed custom accent: lowercase `#rrggbb`. */
+export function isCustomAccent(value) {
+    return typeof value === "string" && HEX.test(value);
+}
+/** `#RGB`, `rrggbb` or `#RRGGBB` as a stored custom accent, or null. */
+export function parseCustomAccent(raw) {
+    let value = raw.trim().toLowerCase();
+    if (!value.startsWith("#"))
+        value = `#${value}`;
+    if (/^#[0-9a-f]{3}$/.test(value)) {
+        value = `#${value[1]}${value[1]}${value[2]}${value[2]}${value[3]}${value[3]}`;
+    }
+    return isCustomAccent(value) ? value : null;
+}
+/** A custom accent's contrast against a ground's page colour, and whether it clears 3:1. */
+export function accentContrast(accent, ground) {
+    const ratio = contrastRatio(accent, SURFACES[ground].background);
+    return { ratio, ok: ratio >= MIN_NON_TEXT_CONTRAST };
+}
+/** Black or white, whichever reads better on a filled accent. */
+export function inkFor(accent) {
+    return contrastRatio(accent, "#000000") >= contrastRatio(accent, "#ffffff")
+        ? "#000000"
+        : "#ffffff";
+}
+function isGround(product, value) {
+    return typeof value === "string" && product.grounds.includes(value);
+}
+function isProductAccent(product, value) {
+    return typeof value === "string" && product.accents.some((a) => a.key === value);
+}
+function isCorners(value) {
+    return CORNERS.includes(value);
+}
+/**
+ * Keep only the axes that are present and valid for this product, without
+ * filling in the rest. A partial has to stay partial: an org that pins only
+ * the accent must not thereby pin the ground, and a stored `{accent}` must
+ * leave the other axes to the org default.
+ */
+export function normalizePartial(raw, product) {
+    const v = (typeof raw === "object" && raw !== null ? raw : {});
+    const out = {};
+    if (isGround(product, v.ground))
+        out.ground = v.ground;
+    if (isProductAccent(product, v.accent) || isCustomAccent(v.accent))
+        out.accent = v.accent;
+    if (v.density === "compact" || v.density === "cards")
+        out.density = v.density;
+    if (isCorners(v.corners))
+        out.corners = v.corners;
+    return out;
+}
+/**
+ * A complete appearance from anything. The ground falls back to the
+ * product's default for `systemMode`; a custom accent that cannot be seen on
+ * the ground it lands on falls back to the product's accent.
+ */
+export function normalize(raw, product, systemMode = "dark") {
+    const v = normalizePartial(raw, product);
+    const ground = v.ground ?? product.defaults.ground[systemMode];
+    const accent = v.accent !== undefined && (!isCustomAccent(v.accent) || accentContrast(v.accent, ground).ok)
+        ? v.accent
+        : product.defaults.accent;
+    return {
+        ground,
+        accent,
+        density: v.density ?? product.defaults.density,
+        corners: v.corners ?? product.defaults.corners,
+    };
+}
+/**
+ * Precedence: a locked org theme beats everything; otherwise a personal
+ * choice beats the org default, which beats the product default. Until
+ * someone picks a ground, light or dark follows the operating system.
+ */
+export function resolveAppearance(personal, policy, product, systemMode = "dark") {
+    const orgDefault = normalizePartial(policy?.orgDefault ?? null, product);
+    const locked = Boolean(policy?.locked);
+    const merged = locked
+        ? orgDefault
+        : { ...orgDefault, ...normalizePartial(personal ?? {}, product) };
+    const value = normalize(merged, product, systemMode);
+    return { value, mode: modeFor(value.ground), locked };
+}
+/** The stored preference as written, or null. Used as the external-store snapshot. */
+export function readStoredAppearance(product) {
+    return readLocal(product.storageKey);
+}
+/** Parse a stored preference; null when nothing recognisable is stored. */
+export function parseStoredAppearance(raw, product) {
+    if (!raw)
+        return null;
+    try {
+        const parsed = normalizePartial(JSON.parse(raw), product);
+        return Object.keys(parsed).length > 0 ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * The personal preference, or null when this person has never chosen.
+ * Returning null rather than a filled-in default is load-bearing: the org
+ * default only applies to people who have not chosen, and "never chose" must
+ * not look like "chose the defaults".
+ */
+export function readAppearance(product) {
+    return parseStoredAppearance(readStoredAppearance(product), product);
+}
+export function writeAppearance(product, next) {
+    writeLocal(product.storageKey, JSON.stringify(normalizePartial(next, product)));
+}
+/** Forget the personal preference, handing the decision back to the org or the product. */
+export function clearAppearance(product) {
+    writeLocal(product.storageKey, null);
+}
+/** The preference as an app's server holds it; an empty object means never chosen. */
+export function appearanceFromServer(raw, product) {
+    const parsed = normalizePartial(raw, product);
+    return Object.keys(parsed).length > 0 ? parsed : null;
+}
+/** The tokens a custom accent sets inline, because it has no CSS block. */
+export const CUSTOM_ACCENT_PROPERTIES = ["--brand-primary", "--brand-on-primary"];
+/** Stamp the axes onto <html> (or `root`). Safe to call before React hydrates. */
+export function applyAppearance(value, product, root) {
+    const el = root ?? document.documentElement;
+    el.dataset.product = product.id;
+    el.dataset.ground = value.ground;
+    el.dataset.mode = modeFor(value.ground);
+    if (isCustomAccent(value.accent)) {
+        el.dataset.accent = "custom";
+        el.style.setProperty("--brand-primary", value.accent);
+        el.style.setProperty("--brand-on-primary", inkFor(value.accent));
+    }
+    else {
+        el.dataset.accent = value.accent;
+        for (const property of CUSTOM_ACCENT_PROPERTIES)
+            el.style.removeProperty(property);
+    }
+    el.dataset.density = value.density;
+    el.style.setProperty("--radius", `${value.corners}px`);
+}

package/dist/appearance/boot.d.ts

@@ -0,0 +1,30 @@
+import { type Mode } from "../theme/tokens.js";
+import { type Product } from "./product.js";
+/** What the boot script needs to know about a product: plain data, serialised into the page. */
+export interface BootConfig {
+    product: string;
+    key: string;
+    grounds: Record<string, {
+        mode: Mode;
+        background: string;
+    }>;
+    accents: string[];
+    corners: number[];
+    minContrast: number;
+    defaults: {
+        dark: string;
+        light: string;
+        accent: string;
+        density: string;
+        corners: number;
+    };
+}
+export declare function bootConfig(product: Product): BootConfig;
+/**
+ * The inline script that stamps a product's appearance on <html> before
+ * first paint. Render it in <head> (AppearanceScript does), or write it into
+ * an HTML template yourself.
+ */
+export declare function appearanceScript(product: Product): string;
+/** The product's brand tokens as a CSS string: its sidebar surface and its own accent. */
+export declare function productStyles(product: Product): string;

package/dist/appearance/boot.js

@@ -0,0 +1,91 @@
+import { renderProductCss } from "../theme/css.js";
+import { MIN_NON_TEXT_CONTRAST } from "../theme/contrast.js";
+import { GROUNDS, SURFACES } from "../theme/tokens.js";
+import { CORNERS } from "./product.js";
+export function bootConfig(product) {
+    return {
+        product: product.id,
+        key: product.storageKey,
+        grounds: Object.fromEntries(product.grounds.map((g) => [g, { mode: GROUNDS[g].mode, background: SURFACES[g].background }])),
+        accents: product.accents.map((a) => a.key),
+        corners: [...CORNERS],
+        minContrast: MIN_NON_TEXT_CONTRAST,
+        defaults: {
+            dark: product.defaults.ground.dark,
+            light: product.defaults.ground.light,
+            accent: product.defaults.accent,
+            density: product.defaults.density,
+            corners: product.defaults.corners,
+        },
+    };
+}
+/**
+ * The boot script, as source text: plain ES5 in a string, so no bundler,
+ * transpiler or coverage tool can rewrite it into something that needs a
+ * helper from outside. It is `normalize` + `resolveAppearance` (with no org
+ * policy, which cannot be known before paint) + `applyAppearance`, written a
+ * second time; boot.test.ts runs it against those over a matrix of stored
+ * preferences and system modes, so the two cannot drift apart.
+ */
+const BOOT_SOURCE = `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");
+}`;
+/** JSON that is safe inside an inline <script>. */
+function scriptJson(value) {
+    return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+/**
+ * The inline script that stamps a product's appearance on <html> before
+ * first paint. Render it in <head> (AppearanceScript does), or write it into
+ * an HTML template yourself.
+ */
+export function appearanceScript(product) {
+    return `try{(${BOOT_SOURCE})(${scriptJson(bootConfig(product))})}catch(e){}`;
+}
+/** The product's brand tokens as a CSS string: its sidebar surface and its own accent. */
+export function productStyles(product) {
+    return renderProductCss({ sidebar: product.sidebar, brandAccent: product.brandAccent });
+}

package/dist/appearance/brands.d.ts

@@ -0,0 +1,94 @@
+/**
+ * The two consoles' brands, kept here so both apps and the catalog read the
+ * same values. An app adds its navigation:
+ *
+ *   export const astrolift = defineProduct({ ...astroliftBrand, nav: NAV });
+ */
+/**
+ * Astrolift AI: leaf green on the deep planet green sidebar. Graphite is the
+ * shipped dark ground (Astrolift #2286), with mist for people whose system
+ * runs light. The named themes are Astrolift's picker presets.
+ */
+export declare const astroliftBrand: {
+    readonly id: "astrolift";
+    readonly name: "Astrolift AI";
+    readonly accent: "green";
+    readonly sidebar: "#04231a";
+    readonly grounds: readonly ["black", "charcoal", "graphite", "emerald", "paper", "mist"];
+    readonly defaultGround: {
+        readonly dark: "graphite";
+        readonly light: "mist";
+    };
+    readonly themes: readonly [{
+        readonly id: "orbit";
+        readonly name: "Orbit";
+        readonly hint: "Black · green";
+        readonly ground: "black";
+        readonly accent: "green";
+    }, {
+        readonly id: "forge";
+        readonly name: "Forge";
+        readonly hint: "Black · copper";
+        readonly ground: "black";
+        readonly accent: "copper";
+    }, {
+        readonly id: "console";
+        readonly name: "Console";
+        readonly hint: "Charcoal · ice";
+        readonly ground: "charcoal";
+        readonly accent: "ice";
+    }, {
+        readonly id: "dusk";
+        readonly name: "Dusk";
+        readonly hint: "Charcoal · periwinkle";
+        readonly ground: "charcoal";
+        readonly accent: "periwinkle";
+    }, {
+        readonly id: "graphite";
+        readonly name: "Graphite";
+        readonly hint: "Graphite · green";
+        readonly ground: "graphite";
+        readonly accent: "green";
+    }, {
+        readonly id: "field";
+        readonly name: "Field";
+        readonly hint: "Emerald · green";
+        readonly ground: "emerald";
+        readonly accent: "green";
+    }, {
+        readonly id: "daylight";
+        readonly name: "Daylight";
+        readonly hint: "Mist · green";
+        readonly ground: "mist";
+        readonly accent: "green";
+    }, {
+        readonly id: "workshop";
+        readonly name: "Workshop";
+        readonly hint: "Paper · copper";
+        readonly ground: "paper";
+        readonly accent: "copper";
+    }];
+};
+/**
+ * Zentinelle AI: teal on the navy sidebar, on a true black ground
+ * (ui-overhaul-ia §5). The family accents stay selectable beside teal. The
+ * emerald ground is Astrolift's planet green and is not offered.
+ */
+export declare const zentinelleBrand: {
+    readonly id: "zentinelle";
+    readonly name: "Zentinelle AI";
+    readonly accent: {
+        readonly key: "teal";
+        readonly label: "Teal";
+        readonly dark: "#37efed";
+        readonly onDark: "#0b0b19";
+        readonly light: "#0d7470";
+        readonly onLight: "#f3fbf7";
+    };
+    readonly sidebar: "#0b0b19";
+    readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
+    readonly defaultGround: {
+        readonly dark: "black";
+        readonly light: "mist";
+    };
+};

package/dist/appearance/brands.js

@@ -0,0 +1,61 @@
+/**
+ * The two consoles' brands, kept here so both apps and the catalog read the
+ * same values. An app adds its navigation:
+ *
+ *   export const astrolift = defineProduct({ ...astroliftBrand, nav: NAV });
+ */
+/**
+ * Astrolift AI: leaf green on the deep planet green sidebar. Graphite is the
+ * shipped dark ground (Astrolift #2286), with mist for people whose system
+ * runs light. The named themes are Astrolift's picker presets.
+ */
+export const astroliftBrand = {
+    id: "astrolift",
+    name: "Astrolift AI",
+    accent: "green",
+    sidebar: "#04231a",
+    grounds: ["black", "charcoal", "graphite", "emerald", "paper", "mist"],
+    defaultGround: { dark: "graphite", light: "mist" },
+    themes: [
+        { id: "orbit", name: "Orbit", hint: "Black · green", ground: "black", accent: "green" },
+        { id: "forge", name: "Forge", hint: "Black · copper", ground: "black", accent: "copper" },
+        { id: "console", name: "Console", hint: "Charcoal · ice", ground: "charcoal", accent: "ice" },
+        {
+            id: "dusk",
+            name: "Dusk",
+            hint: "Charcoal · periwinkle",
+            ground: "charcoal",
+            accent: "periwinkle",
+        },
+        {
+            id: "graphite",
+            name: "Graphite",
+            hint: "Graphite · green",
+            ground: "graphite",
+            accent: "green",
+        },
+        { id: "field", name: "Field", hint: "Emerald · green", ground: "emerald", accent: "green" },
+        { id: "daylight", name: "Daylight", hint: "Mist · green", ground: "mist", accent: "green" },
+        { id: "workshop", name: "Workshop", hint: "Paper · copper", ground: "paper", accent: "copper" },
+    ],
+};
+/**
+ * Zentinelle AI: teal on the navy sidebar, on a true black ground
+ * (ui-overhaul-ia §5). The family accents stay selectable beside teal. The
+ * emerald ground is Astrolift's planet green and is not offered.
+ */
+export const zentinelleBrand = {
+    id: "zentinelle",
+    name: "Zentinelle AI",
+    accent: {
+        key: "teal",
+        label: "Teal",
+        dark: "#37efed",
+        onDark: "#0b0b19",
+        light: "#0d7470",
+        onLight: "#f3fbf7",
+    },
+    sidebar: "#0b0b19",
+    grounds: ["black", "charcoal", "graphite", "paper", "mist"],
+    defaultGround: { dark: "black", light: "mist" },
+};

package/dist/appearance/product.d.ts

@@ -0,0 +1,89 @@
+import type { NavModel } from "../nav/model.js";
+import { type Density, type FamilyAccent, type Ground, type Mode } from "../theme/tokens.js";
+export type Corners = 0 | 2 | 4 | 10;
+export declare const CORNERS: readonly Corners[];
+/** A product's own accent, offered first in the picker (Zentinelle teal). */
+export interface BrandAccent {
+    /** Lowercase slug, stored in the preference and set as `data-accent`. */
+    key: string;
+    label: string;
+    /** The accent on dark grounds, and the ink on it. */
+    dark: string;
+    onDark: string;
+    /** The accent on light grounds, and the ink on it. */
+    light: string;
+    onLight: string;
+}
+/** A named ground and accent, so the picker offers a decision rather than two lists. */
+export interface ProductTheme {
+    id: string;
+    name: string;
+    hint: string;
+    ground: Ground;
+    accent: string;
+}
+/**
+ * Everything that makes one console look like itself: its name, its accent,
+ * its sidebar and its navigation. The family palette, the status colours and
+ * the layout are shared.
+ */
+export interface ProductConfig {
+    /** Lowercase slug: the storage namespace and `data-product` on <html>. */
+    id: string;
+    /** The full product name, as the brand mark shows it ("Astrolift AI"). */
+    name: string;
+    /** The default accent: a family accent, or the product's own. */
+    accent: FamilyAccent | BrandAccent;
+    /** The brand surface: the sidebar on dark grounds (graphite and light grounds stay neutral). */
+    sidebar: string;
+    /** The grounds offered, in picker order. All six when absent. */
+    grounds?: readonly Ground[];
+    /** The ground until someone chooses: one per mode, following the operating system. */
+    defaultGround?: {
+        dark: Ground;
+        light: Ground;
+    };
+    defaultDensity?: Density;
+    defaultCorners?: Corners;
+    themes?: readonly ProductTheme[];
+    /** The navigation model, before it is filtered by what the viewer may open. */
+    nav?: NavModel;
+}
+export interface ProductAccent {
+    key: string;
+    label: string;
+    dark: string;
+    onDark: string;
+    light: string;
+    onLight: string;
+    /** True for the product's own accent. */
+    brand: boolean;
+}
+/** A validated product config with its defaults filled in. */
+export interface Product {
+    id: string;
+    name: string;
+    sidebar: string;
+    grounds: readonly Ground[];
+    /** The product's accent first, then the family accents. */
+    accents: readonly ProductAccent[];
+    /** The product's own accent when it has one; null when it uses a family accent. */
+    brandAccent: BrandAccent | null;
+    defaults: {
+        ground: Record<Mode, Ground>;
+        accent: string;
+        density: Density;
+        corners: Corners;
+    };
+    themes: readonly ProductTheme[];
+    nav: NavModel;
+    /** localStorage key of the personal appearance preference. */
+    storageKey: string;
+}
+/**
+ * Validate a product config and fill in its defaults. Throws on anything
+ * that would paint wrong or inject into the generated CSS: a key that is not
+ * a slug, a colour that is not lowercase `#rrggbb`, a default ground the
+ * product does not offer, or a default ground of the wrong mode.
+ */
+export declare function defineProduct(config: ProductConfig): Product;