@wocart/theme 1.5.0 → 2.0.0

package/dist/page-data.js

@@ -7,6 +7,7 @@
  * failed; a structurally invalid section is dropped with an issue; the
  * document itself is not rewritten by `validatePageData`.
  */
+import { THEME_LIMITS, completeRequired, slotCap, surfaceRules } from "./blocks.js";
 import { resolveInstance } from "./instances.js";
 import { ComponentInstanceSchema, SURFACE_KEY_PATTERN, THEME_KEY_PATTERN } from "./schemas.js";
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
@@ -30,14 +31,21 @@ export function parsePageData(input) {
         return envelopeFailure("`sections` must be an array of component instances");
     }
     const issues = [];
-    const seenIds = new Set();
+    const state = { seenIds: new Set(), count: 0, overCap: 0 };
     const sections = [];
     input.sections.forEach((raw, index) => {
-        const instance = sanitizeInstance(raw, `sections[${index}]`, seenIds, issues);
+        if (sections.length >= THEME_LIMITS.sections) {
+            issues.push({ path: `sections[${index}]`, code: "limit-exceeded", message: `a document holds at most ${THEME_LIMITS.sections} sections; dropped` });
+            return;
+        }
+        const instance = sanitizeInstance(raw, `sections[${index}]`, state, issues);
         if (instance !== null) {
             sections.push(instance);
         }
     });
+    if (state.overCap > 0) {
+        issues.push({ path: "sections", code: "limit-exceeded", message: `a document holds at most ${THEME_LIMITS.documentInstances} instances; ${state.overCap} dropped` });
+    }
     // The envelope is forward-compatible: unknown top-level keys are
     // carried through verbatim so a later writer can record metadata without a
     // `version` bump. `PageData` deliberately does not declare them — see its
@@ -112,13 +120,26 @@ export function validatePageData(theme, input, scope = {}) {
                 walk(child, `${path}.slots.${name}[${index}]`);
             });
         }
+        for (const [name, block] of Object.entries(resolved.fixed)) {
+            walk(block, `${path}.fixed.${name}`);
+        }
     };
-    parsed.page.sections.forEach((section, index) => {
+    const spec = surfaceRules(theme, parsed.page.surface);
+    const cap = slotCap(spec, THEME_LIMITS.sections);
+    if (parsed.page.sections.length > cap) {
+        issues.push({ path: "sections", code: "limit-exceeded", message: `surface "${parsed.page.surface}" holds at most ${cap} sections; ${parsed.page.sections.length - cap} are not rendered` });
+    }
+    const sections = completeRequired(parsed.page.sections.slice(0, cap), spec?.required, { id: parsed.page.surface, slot: "sections" }, "sections", issues);
+    sections.forEach((section, index) => {
         walk(section, `sections[${index}]`);
     });
     return { page: parsed.page, issues };
 }
-function sanitizeInstance(raw, path, seenIds, issues) {
+const subtreeSize = (instance) => 1 +
+    (instance.children ?? []).reduce((sum, child) => sum + subtreeSize(child), 0) +
+    Object.values(instance.slots ?? {}).reduce((sum, list) => sum + list.reduce((inner, child) => inner + subtreeSize(child), 0), 0) +
+    Object.values(instance.fixed ?? {}).reduce((sum, block) => sum + subtreeSize(block), 0);
+function sanitizeInstance(raw, path, state, issues) {
     const parsed = ComponentInstanceSchema.safeParse(raw);
     if (!parsed.success) {
         const detail = parsed.error.issues[0]?.message ?? "invalid shape";
@@ -129,15 +150,25 @@ function sanitizeInstance(raw, path, seenIds, issues) {
         });
         return null;
     }
-    return pruneDuplicateIds(parsed.data, path, seenIds, issues);
+    return pruneInstance(parsed.data, path, state, issues, 0);
 }
 /**
- * Deterministic rebuild with duplicate ids pruned (depth-first, first wins).
- * Property presence is preserved — a valid document round-trips unchanged;
- * pruning to empty (all duplicates dropped) keeps the empty container.
+ * Deterministic rebuild with duplicate ids pruned (depth-first, first wins)
+ * and the platform's caps applied: nesting deeper than `THEME_LIMITS.depth`
+ * and instances past `THEME_LIMITS.documentInstances` are dropped and
+ * reported. Property presence is preserved — a valid document round-trips
+ * unchanged; pruning to empty keeps the empty container.
  */
-function pruneDuplicateIds(instance, path, seenIds, issues) {
-    if (seenIds.has(instance.id)) {
+function pruneInstance(instance, path, state, issues, depth) {
+    if (depth > THEME_LIMITS.depth) {
+        issues.push({ path, code: "limit-exceeded", message: `nesting goes at most ${THEME_LIMITS.depth} levels below a section; dropped` });
+        return null;
+    }
+    if (state.count >= THEME_LIMITS.documentInstances) {
+        state.overCap += subtreeSize(instance);
+        return null;
+    }
+    if (state.seenIds.has(instance.id)) {
         issues.push({
             path: `${path}.id`,
             code: "duplicate-id",
@@ -145,7 +176,8 @@ function pruneDuplicateIds(instance, path, seenIds, issues) {
         });
         return null;
     }
-    seenIds.add(instance.id);
+    state.seenIds.add(instance.id);
+    state.count += 1;
     const pruned = { id: instance.id, type: instance.type };
     if (instance.props !== undefined) {
         pruned.props = instance.props;
@@ -153,29 +185,33 @@ function pruneDuplicateIds(instance, path, seenIds, issues) {
     if (instance.hidden !== undefined) {
         pruned.hidden = instance.hidden;
     }
-    if (instance.children !== undefined) {
-        const children = [];
-        instance.children.forEach((child, index) => {
-            const sane = pruneDuplicateIds(child, `${path}.children[${index}]`, seenIds, issues);
-            if (sane !== null) {
-                children.push(sane);
-            }
+    const pruneList = (list, listPath) => {
+        const sane = [];
+        list.forEach((child, index) => {
+            const kept = pruneInstance(child, `${listPath}[${index}]`, state, issues, depth + 1);
+            if (kept !== null)
+                sane.push(kept);
         });
-        pruned.children = children;
+        return sane;
+    };
+    if (instance.children !== undefined) {
+        pruned.children = pruneList(instance.children, `${path}.children`);
     }
     if (instance.slots !== undefined) {
         const slots = {};
         for (const [name, list] of Object.entries(instance.slots)) {
-            const saneList = [];
-            list.forEach((child, index) => {
-                const sane = pruneDuplicateIds(child, `${path}.slots.${name}[${index}]`, seenIds, issues);
-                if (sane !== null) {
-                    saneList.push(sane);
-                }
-            });
-            slots[name] = saneList;
+            slots[name] = pruneList(list, `${path}.slots.${name}`);
         }
         pruned.slots = slots;
     }
+    if (instance.fixed !== undefined) {
+        const fixed = {};
+        for (const [name, block] of Object.entries(instance.fixed)) {
+            const kept = pruneInstance(block, `${path}.fixed.${name}`, state, issues, depth + 1);
+            if (kept !== null)
+                fixed[name] = kept;
+        }
+        pruned.fixed = fixed;
+    }
     return pruned;
 }

package/dist/preview-bridge.js

@@ -6,12 +6,14 @@
  * at, and re-renders a draft the editor sends by posting it back to the
  * storefront and swapping in only the sections that changed — or, when the
  * page around them changed, the whole page, the way Astro's router swaps one.
+ * A change the editor patches is shown at once, on the page as it stands,
+ * until that render arrives.
  *
  * It draws nothing — outlines, toolbars and panels are the editor's. It posts
  * only to the editor origin it is given and reads only that origin's messages
  * from the framing window.
  */
-import { PREVIEW_PROTOCOL_VERSION, THEME_PREVIEW_PATH, parsePreviewMarker, } from "./preview-protocol.js";
+import { PREVIEW_PROTOCOL_VERSION, THEME_PREVIEW_PATH, parsePreviewMarker, previewEndMarker, previewStartMarker, } from "./preview-protocol.js";
 /**
  * Dispatched on `document` for each section the bridge swapped in, with the
  * instance id as `detail.id`: a section with browser behavior binds it again.
@@ -21,7 +23,9 @@ import { PREVIEW_PROTOCOL_VERSION, THEME_PREVIEW_PATH, parsePreviewMarker, } fro
 export const PREVIEW_SECTION_LOAD_EVENT = "wocart:section-load";
 const ASTRO_PAGE_LOAD_EVENT = "astro:page-load";
 const SHOW_COMMENT = 0x80;
+const SHOW_TEXT = 0x4;
 const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
 const COMMENT_NODE = 8;
 /**
  * Every complete marker pair under `root`, in document order, each with the
@@ -74,6 +78,30 @@ function markup(nodes) {
     })
         .join("");
 }
+/** An instance's nodes with its markers: what moves, copies or goes with it. */
+function withMarkers(entry) {
+    const inside = between(entry);
+    return inside === null ? null : [entry.start, ...inside, entry.end];
+}
+/** Text nodes under `nodes` that a merchant reads — never a script's or a style's. */
+function textNodes(nodes) {
+    const found = [];
+    for (const node of nodes) {
+        if (node.nodeType === TEXT_NODE) {
+            found.push(node);
+            continue;
+        }
+        if (node.nodeType !== ELEMENT_NODE)
+            continue;
+        const walker = node.ownerDocument.createTreeWalker(node, SHOW_TEXT);
+        for (let text = walker.nextNode(); text !== null; text = walker.nextNode()) {
+            const tag = text.parentElement?.tagName;
+            if (tag !== "SCRIPT" && tag !== "STYLE" && tag !== "TEMPLATE")
+                found.push(text);
+        }
+    }
+    return found;
+}
 /**
  * The page with every section's content left out — the root's attributes and
  * the body around the sections: what must not change for sections to be
@@ -229,6 +257,135 @@ export function startPreviewBridge(options) {
         }
         return swapped;
     };
+    /** What a `remove` or `hide` patch took off the page, to put back on `restore` or show. */
+    const removed = new Map();
+    const hiddenNodes = new Map();
+    const find = (id) => marked.find((entry) => entry.id === id);
+    /**
+     * Puts `nodes` at `index` among the instances of `owner` (`null`: the
+     * page's sections) other than `id`. An empty slot has no place to find, so
+     * its move waits for the render.
+     */
+    const place = (nodes, id, index, owner) => {
+        const others = marked.filter((entry) => entry.parent === owner && entry.id !== id);
+        if (!Number.isInteger(index) || index < 0 || index > others.length)
+            return false;
+        const before = others[index]?.start ?? others.at(-1)?.end.nextSibling ?? null;
+        const parent = others[index]?.start.parentNode ?? others.at(-1)?.end.parentNode;
+        if (!parent)
+            return false;
+        for (const node of nodes)
+            parent.insertBefore(node, before);
+        return true;
+    };
+    const relabel = (marker, ids) => {
+        const parsed = parsePreviewMarker(marker.data);
+        if (parsed === null || !Object.hasOwn(ids, parsed.id))
+            return;
+        const id = ids[parsed.id];
+        marker.data = parsed.kind === "start" ? previewStartMarker({ id, type: parsed.type, hidden: parsed.hidden }) : previewEndMarker({ id });
+    };
+    /** Applies one patch to the page as it stands; returns the sections it put in. */
+    const apply = (patch) => {
+        const entry = find(patch.id);
+        switch (patch.op) {
+            case "move": {
+                if (entry === undefined || entry.parent !== (patch.parent ?? null))
+                    return [];
+                const nodes = withMarkers(entry);
+                if (nodes !== null)
+                    place(nodes, entry.id, patch.index, entry.parent);
+                return [];
+            }
+            case "duplicate": {
+                const nodes = entry === undefined ? null : withMarkers(entry);
+                if (entry === undefined || nodes === null || !Object.hasOwn(patch.ids, entry.id))
+                    return [];
+                const copies = nodes.map((node) => node.cloneNode(true));
+                for (const copy of copies) {
+                    if (copy.nodeType === COMMENT_NODE)
+                        relabel(copy, patch.ids);
+                    else if (copy.nodeType === ELEMENT_NODE) {
+                        const walker = doc.createTreeWalker(copy, SHOW_COMMENT);
+                        for (let node = walker.nextNode(); node !== null; node = walker.nextNode())
+                            relabel(node, patch.ids);
+                    }
+                }
+                const after = entry.end.nextSibling;
+                for (const copy of copies)
+                    entry.end.parentNode.insertBefore(copy, after);
+                return [patch.ids[entry.id]];
+            }
+            case "remove": {
+                const nodes = entry === undefined ? null : withMarkers(entry);
+                if (nodes === null)
+                    return [];
+                for (const node of nodes)
+                    node.parentNode?.removeChild(node);
+                removed.set(patch.id, nodes);
+                return [];
+            }
+            case "restore": {
+                const nodes = removed.get(patch.id);
+                if (entry !== undefined || nodes === undefined || !place(nodes, patch.id, patch.index, patch.parent ?? null))
+                    return [];
+                removed.delete(patch.id);
+                return [patch.id];
+            }
+            case "hide": {
+                if (entry === undefined || entry.hidden === patch.hidden)
+                    return [];
+                const inside = between(entry);
+                if (inside === null)
+                    return [];
+                if (patch.hidden) {
+                    for (const node of inside)
+                        node.parentNode?.removeChild(node);
+                    hiddenNodes.set(entry.id, inside);
+                }
+                else {
+                    const kept = hiddenNodes.get(entry.id);
+                    if (kept === undefined)
+                        return [];
+                    for (const node of kept)
+                        entry.end.parentNode.insertBefore(node, entry.end);
+                    hiddenNodes.delete(entry.id);
+                }
+                entry.start.data = previewStartMarker({ id: entry.id, type: entry.type, hidden: patch.hidden });
+                return patch.hidden ? [] : [entry.id];
+            }
+            case "text": {
+                const inside = entry === undefined ? null : between(entry);
+                const from = patch.from.trim();
+                if (inside === null || from === "" || typeof patch.to !== "string")
+                    return [];
+                for (const node of textNodes(inside)) {
+                    if (node.data.trim() !== from)
+                        continue;
+                    const lead = /^\s*/.exec(node.data)[0];
+                    const trail = /\s*$/.exec(node.data)[0];
+                    node.data = `${lead}${patch.to}${trail}`;
+                }
+                return [];
+            }
+            default:
+                return [];
+        }
+    };
+    /** Shows `patches` at once; a render already on its way would undo them, so it is dropped. */
+    const patchPage = (patches) => {
+        latest += 1;
+        const loaded = [];
+        for (const patch of patches) {
+            if (typeof patch !== "object" || patch === null || typeof patch.id !== "string")
+                continue;
+            loaded.push(...apply(patch));
+            marked = collect(doc.body);
+        }
+        for (const id of loaded)
+            doc.dispatchEvent(new win.CustomEvent(PREVIEW_SECTION_LOAD_EVENT, { detail: { id } }));
+        post({ type: "layout", instances: instances() });
+    };
     const render = async (draft, revision) => {
         const ticket = ++latest;
         try {
@@ -276,6 +433,10 @@ export function startPreviewBridge(options) {
                     void render(message.draft, typeof message.revision === "number" ? message.revision : null);
                 }
                 break;
+            case "patch":
+                if (Array.isArray(message.patches))
+                    patchPage(message.patches);
+                break;
             case "mode":
                 if (message.mode === "edit" || message.mode === "interactive")
                     mode = message.mode;

package/dist/preview-protocol.d.ts

@@ -56,10 +56,59 @@ export type PreviewPageMessage = {
 });
 /** The interaction an editor allows: `edit` turns clicks into selections; `interactive` lets the page behave. */
 export type PreviewMode = "edit" | "interactive";
+/**
+ * A change the editor has already made to its draft, for the page to show at
+ * once, before the `render` that follows it. A patch is a hint: the page
+ * applies what it can find and leaves the rest to that render, which is the
+ * page's truth — so an editor always sends the render too, and a page that
+ * does not know patches (before `@wocart/theme` 1.6.0) still shows every
+ * change, a moment later.
+ *
+ * - `move`: an instance to `index` among its siblings, counted once it has
+ *   left its place (`moveInstance`): the document's sections, or with
+ *   `parent` the blocks of that instance. A move to another parent is left to
+ *   the render.
+ * - `duplicate`: a copy of an instance right after it; `ids` maps every
+ *   instance id inside it, its own included, to its copy's.
+ * - `remove`: an instance and everything in it; `restore` puts what a
+ *   `remove` took back at `index` among the sections, or among `parent`'s
+ *   blocks.
+ * - `hide`: an instance switched off (it shows nothing) or back on.
+ * - `text`: inside an instance, text that reads `from` now reads `to` — a
+ *   field's text as the theme prints it.
+ */
+export type PreviewPatch = {
+    op: "move";
+    id: string;
+    index: number;
+    parent?: string;
+} | {
+    op: "duplicate";
+    id: string;
+    ids: Readonly<Record<string, string>>;
+} | {
+    op: "remove";
+    id: string;
+} | {
+    op: "restore";
+    id: string;
+    index: number;
+    parent?: string;
+} | {
+    op: "hide";
+    id: string;
+    hidden: boolean;
+} | {
+    op: "text";
+    id: string;
+    from: string;
+    to: string;
+};
 /**
  * What the editor tells the preview page. `draft` is a `PreviewDraft` of
  * `@wocart/storefront`; `revision`, when given, comes back on the `rendered`
- * or `error` it causes, and a render answered after a newer one is dropped.
+ * or `error` it causes, and a render answered after a newer one is dropped —
+ * as is one answered after a `patch`, which the next render follows.
  */
 export type PreviewEditorMessage = {
     source: "wocart-editor";
@@ -68,6 +117,9 @@ export type PreviewEditorMessage = {
     type: "render";
     draft: Record<string, unknown>;
     revision?: number;
+} | {
+    type: "patch";
+    patches: readonly PreviewPatch[];
 } | {
     type: "mode";
     mode: PreviewMode;

package/dist/rich-text.d.ts

@@ -16,6 +16,8 @@ export interface RichTextHtmlOptions {
      * result is escaped; a target that fails the link rule never reaches it.
      */
     href?: (target: string) => string;
+    /** `true`: the first paragraph's text only, without a block element — for a field with `inline: true`. */
+    inline?: boolean;
 }
 /**
  * The document as HTML: `<p>`, `<h2>`–`<h4>`, `<ul>`/`<ol>`, `<strong>`, `<em>`,

package/dist/rich-text.js

@@ -157,6 +157,10 @@ const escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").r
 export function richTextToHtml(document, options = {}) {
     if (!isRecord(document) || !Array.isArray(document.content))
         return "";
+    if (options.inline === true) {
+        const first = document.content.find((block) => isRecord(block) && block.type === "paragraph");
+        return first === undefined ? "" : inlinesHtml(first.content, options);
+    }
     return document.content.map((block) => blockHtml(block, options)).join("");
 }
 function blockHtml(block, options) {

package/dist/schemas.d.ts

@@ -14,7 +14,8 @@ export declare const THEME_KEY_PATTERN: RegExp;
 export declare const TYPE_KEY_PATTERN: RegExp;
 /**
  * The page-document **surface** key — the address of a composed page
- * (`home` today; `page:<slug>` / `lp:<slug>` are reserved conventions).
+ * (`home`, `product`, …; `area:<key>` is an area's document, and
+ * `page:<slug>` / `lp:<slug>` are reserved conventions).
  *
  * The server applies the same pattern. Module-level on purpose: it is part of
  * the persisted-data contract,

package/dist/schemas.js

@@ -13,7 +13,8 @@ export const THEME_KEY_PATTERN = /^(?=.{1,64}$)[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
 export const TYPE_KEY_PATTERN = /^[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
 /**
  * The page-document **surface** key — the address of a composed page
- * (`home` today; `page:<slug>` / `lp:<slug>` are reserved conventions).
+ * (`home`, `product`, …; `area:<key>` is an area's document, and
+ * `page:<slug>` / `lp:<slug>` are reserved conventions).
  *
  * The server applies the same pattern. Module-level on purpose: it is part of
  * the persisted-data contract,
@@ -126,6 +127,7 @@ export const ComponentInstanceSchema = z.lazy(() => z.object({
     props: z.exactOptional(z.record(z.string(), JsonValueSchema)),
     children: z.exactOptional(z.array(ComponentInstanceSchema)),
     slots: z.exactOptional(z.record(z.string(), z.array(ComponentInstanceSchema))),
+    fixed: z.exactOptional(z.record(z.string(), ComponentInstanceSchema)),
     hidden: z.exactOptional(z.boolean()),
 }));
 /**

package/dist/settings.js

@@ -11,6 +11,7 @@
  * content pack, for text) → absent.
  */
 import { checkStoredValue, ownValue, resolveField } from "./instances.js";
+import { styleSizeProblem } from "./style.js";
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 function declaredSettings(theme) {
     const fields = new Map();
@@ -75,8 +76,26 @@ export function checkThemeSettings(theme, values) {
             continue;
         }
         const checked = checkStoredValue(field, value);
-        if (!checked.ok)
+        if (!checked.ok) {
             issues.push({ path: `settings.${key}`, code: "invalid-setting", message: `"${key}" ${checked.message}` });
+            continue;
+        }
+        if (field.kind === "style") {
+            const problem = styleSizeProblem(theme.style, value);
+            if (problem !== null)
+                issues.push({ path: `settings.${key}`, code: "invalid-setting", message: `"${key}" ${problem}` });
+        }
+    }
+    const schemesField = [...declared.values()].find((field) => field.kind === "colorSchemes");
+    if (schemesField?.kind === "colorSchemes") {
+        const stored = ownValue(values, schemesField.key);
+        const schemes = stored !== undefined && checkStoredValue(schemesField, stored).ok ? stored : schemesField.default;
+        const ids = new Set(schemes.map((scheme) => scheme.id));
+        for (const [key, value] of Object.entries(values)) {
+            if (declared.get(key)?.kind === "colorScheme" && typeof value === "string" && !ids.has(value)) {
+                issues.push({ path: `settings.${key}`, code: "invalid-setting", message: `"${key}" names the color scheme "${value}", which the store does not have` });
+            }
+        }
     }
     return issues;
 }

package/dist/style.d.ts

@@ -0,0 +1,45 @@
+import type { ColorScheme, StylePanel, StyleValue, ThemeStyle } from "./types.js";
+/** The platform's breakpoints, phone first, with the width each starts at. */
+export declare const STYLE_BREAKPOINTS: readonly [readonly ["base", 0], readonly ["md", 768], readonly ["lg", 1024]];
+export declare const STYLE_STEPS: readonly ["s0", "s1", "s2", "s3", "s4", "s5", "s6", "s7", "s8", "s9", "s10", "s11", "s12"];
+export declare const STYLE_WIDTHS: readonly ["wide", "content", "narrow"];
+export declare const STYLE_PANELS: readonly ["spacing", "layout", "size"];
+export declare const COLOR_ROLES: readonly ["background", "text", "heading", "accent", "button", "buttonText", "border"];
+/** A color scheme's id: what a `colorScheme` value names. */
+export declare const COLOR_SCHEME_ID_PATTERN: RegExp;
+/** The most color schemes a store keeps. */
+export declare const COLOR_SCHEMES_MAX = 24;
+/** Where a built theme serves the stylesheet of its style classes (`themeStylesEndpoint`). */
+export declare const THEME_STYLES_PATH = "/wocart-styles.css";
+/** Why `value` is not a style value a field offering `panels` may hold, or `null`. */
+export declare function styleValueProblem(panels: readonly StylePanel[], value: unknown): string | null;
+/**
+ * Why a theme's sizes leave part of a style value without a style: a step or
+ * width the theme does not size. What a writer stores must be sized; a
+ * reader renders an unsized value as no style.
+ */
+export declare function styleSizeProblem(style: ThemeStyle | undefined, value: StyleValue): string | null;
+/** The classes that give an element its style value, from the theme's stylesheet (`themeStyleSheet`). */
+export declare function styleClasses(value: StyleValue | undefined): string;
+/**
+ * Every class a theme's sizes allow, phone first: the base rules, then each
+ * wider breakpoint in its media query. A step or width the theme does not
+ * size has no class.
+ */
+export declare function themeStyleSheet(style: ThemeStyle | undefined): string;
+/** Why `value` is not a list of color schemes, or `null`. */
+export declare function colorSchemesProblem(value: unknown): string | null;
+/** The class that gives an element a color scheme, or `""` for what is not a scheme id. */
+export declare function schemeClass(id: string | undefined): string;
+/**
+ * The store's color schemes as CSS: each scheme's roles as custom properties
+ * (`--wc-color-background`, `--wc-color-button-text`, …) with its background
+ * and text applied, on `.wc-scheme-<id>`. A scheme with a malformed id or
+ * color is left out whole.
+ */
+export declare function colorSchemeCss(schemes: readonly ColorScheme[] | undefined): string;
+/**
+ * The WCAG contrast ratio of two hex colors, from 1 to 21. Text needs 4.5 to
+ * meet AA; an editor warns below it. `NaN` for what is not a hex color.
+ */
+export declare function contrastRatio(a: string, b: string): number;