waybetter 0.1.1 → 0.7.0

package/dist/runtime/themeDecor.d.ts

@@ -0,0 +1,73 @@
+import { type ColorRole, type RoleColors } from './themeComponents.ts';
+export declare const DIVIDER_STYLES: readonly ["none", "hairline", "solid", "dashed", "dotted", "double"];
+export declare const CHROME_KINDS: readonly ["none", "titlebar", "masthead", "prompt"];
+export declare const RING_STYLES: readonly ["solid", "dashed", "dotted", "double"];
+export declare const MOTION_CURVES: readonly ["standard", "snappy", "spring", "linear", "steps"];
+export declare const LINK_UNDERLINES: readonly ["always", "hover", "never"];
+export type ThemeDecor = {
+    dividers?: {
+        style: typeof DIVIDER_STYLES[number];
+        color?: ColorRole;
+        width?: number;
+    };
+    /** A drawn frame around the main column: a window title bar, a newspaper masthead, a terminal prompt. `title` is plain text. */
+    chrome?: {
+        kind: typeof CHROME_KINDS[number];
+        title?: string;
+    };
+    focusRing?: {
+        width?: number;
+        style?: typeof RING_STYLES[number];
+        color?: ColorRole;
+        offset?: number;
+    };
+    selection?: {
+        fill: ColorRole;
+        text: ColorRole;
+    };
+    scrollbar?: {
+        width?: 'auto' | 'thin';
+        thumb?: ColorRole;
+        track?: ColorRole;
+        style?: 'flat' | 'classic';
+    };
+    links?: {
+        underline: typeof LINK_UNDERLINES[number];
+    };
+    motion?: {
+        duration?: number;
+        curve?: typeof MOTION_CURVES[number];
+        press?: number;
+    };
+};
+/** Text a theme may put into a drawn bar: letters, digits, spaces and a little punctuation; it is written into a CSS string. */
+export declare const chromeTitle: (value: unknown) => string;
+/** The `decor` group from JSON. Null when nothing valid is left. */
+export declare function sanitizeDecor(value: unknown): ThemeDecor | null;
+/** Where a site's decoration goes. Every entry is optional: a site without it draws nothing for that key. */
+export type DecorTargets<Context> = {
+    /** Rows whose bottom edge is the divider between items (a site's list cells). */
+    divider?: string;
+    /** Links inside running text. */
+    link?: string;
+    /** What takes keyboard focus. */
+    focusable?: string;
+    /** What moves with `motion` (buttons, links, rows). */
+    moving?: string;
+    /** What a press shrinks. */
+    pressable?: string;
+    /** The scrollable roots. */
+    scroller?: string;
+    /** The site's drawing of each chrome kind. */
+    chrome?: Partial<Record<Exclude<typeof CHROME_KINDS[number], 'none'>, (title: string, ctx: Context) => string>>;
+};
+/**
+ * CSS for a theme's decoration. A focus ring is always drawn when the theme names one (at least 2px
+ * and 3:1 on the page's surfaces: the color is swapped for a visible one otherwise); motion only
+ * for people who have not asked for less of it.
+ */
+export declare function compileDecor<Context extends {
+    colors: RoleColors;
+}>(decor: ThemeDecor, targets: DecorTargets<Context>, ctx: Context): string[];
+/** A theme's text as a CSS string literal (for `content`): the allow-list of `chromeTitle` plus escaping of what could end the string. */
+export declare const cssString: (value: string) => string;

package/dist/runtime/themeDecor.js

@@ -0,0 +1,133 @@
+// Decoration: what a theme draws between and around the components: divider lines, a title bar or a
+// masthead, the focus ring, selection, scrollbars, link underlines, the feel of motion. Fixed words
+// and clamped numbers, colors by role. Where the lines and bars go is the site's (its decor targets).
+// Pure.
+import { contrastRatio } from "./themeApi.js";
+import { COLOR_ROLES } from "./themeComponents.js";
+export const DIVIDER_STYLES = ['none', 'hairline', 'solid', 'dashed', 'dotted', 'double'];
+export const CHROME_KINDS = ['none', 'titlebar', 'masthead', 'prompt'];
+export const RING_STYLES = ['solid', 'dashed', 'dotted', 'double'];
+export const MOTION_CURVES = ['standard', 'snappy', 'spring', 'linear', 'steps'];
+export const LINK_UNDERLINES = ['always', 'hover', 'never'];
+const obj = (value) => value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+const oneOf = (value, options) => options.includes(value) ? value : undefined;
+const num = (value, min, max) => typeof value === 'number' && Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : undefined;
+const role = (value) => oneOf(value, COLOR_ROLES);
+/** Text a theme may put into a drawn bar: letters, digits, spaces and a little punctuation; it is written into a CSS string. */
+export const chromeTitle = (value) => typeof value === 'string' ? value.replace(/[^\p{L}\p{N} .,:!?&+\-_/#@*~()[\]|>$]/gu, '').replace(/&/g, '+').trim().slice(0, 24) : '';
+/** The `decor` group from JSON. Null when nothing valid is left. */
+export function sanitizeDecor(value) {
+    const source = obj(value);
+    const out = {};
+    const dividers = obj(source.dividers), dividerStyle = oneOf(dividers.style, DIVIDER_STYLES);
+    if (dividerStyle) {
+        const color = role(dividers.color), width = num(dividers.width, 0, 3);
+        out.dividers = { style: dividerStyle, ...(color ? { color } : {}), ...(width !== undefined ? { width: +width.toFixed(1) } : {}) };
+    }
+    const chrome = obj(source.chrome), kind = oneOf(chrome.kind, CHROME_KINDS);
+    if (kind && kind !== 'none') {
+        const title = chromeTitle(chrome.title);
+        out.chrome = { kind, ...(title ? { title } : {}) };
+    }
+    const ring = obj(source.focusRing);
+    if (Object.keys(ring).length) {
+        const width = num(ring.width, 2, 4), style = oneOf(ring.style, RING_STYLES), color = role(ring.color), offset = num(ring.offset, 0, 4);
+        const focusRing = { ...(width !== undefined ? { width: Math.round(width) } : {}), ...(style ? { style } : {}), ...(color ? { color } : {}), ...(offset !== undefined ? { offset: Math.round(offset) } : {}) };
+        if (Object.keys(focusRing).length)
+            out.focusRing = focusRing;
+    }
+    const selection = obj(source.selection), fill = role(selection.fill), text = role(selection.text);
+    if (fill && text)
+        out.selection = { fill, text };
+    const bar = obj(source.scrollbar);
+    if (Object.keys(bar).length) {
+        const width = oneOf(bar.width, ['auto', 'thin']), thumb = role(bar.thumb), track = role(bar.track), style = oneOf(bar.style, ['flat', 'classic']);
+        const scrollbar = { ...(width ? { width } : {}), ...(thumb ? { thumb } : {}), ...(track ? { track } : {}), ...(style ? { style } : {}) };
+        if (Object.keys(scrollbar).length)
+            out.scrollbar = scrollbar;
+    }
+    const underline = oneOf(obj(source.links).underline, LINK_UNDERLINES);
+    if (underline)
+        out.links = { underline };
+    const motion = obj(source.motion);
+    if (Object.keys(motion).length) {
+        const duration = num(motion.duration, 0, 400), curve = oneOf(motion.curve, MOTION_CURVES), press = num(motion.press, 0.96, 1);
+        const value = { ...(duration !== undefined ? { duration: Math.round(duration) } : {}), ...(curve ? { curve } : {}), ...(press !== undefined ? { press: +press.toFixed(3) } : {}) };
+        if (Object.keys(value).length)
+            out.motion = value;
+    }
+    return Object.keys(out).length ? out : null;
+}
+const CURVES = {
+    standard: 'cubic-bezier(.2,.7,.2,1)', snappy: 'cubic-bezier(.3,1.4,.5,1)', spring: 'cubic-bezier(.2,1.6,.4,1)', linear: 'linear', steps: 'steps(3,end)',
+};
+/** The role among `candidates` that reaches `ratio` on every surface, else the most visible one. */
+function visibleOn(colors, wanted, surfaces, ratio) {
+    const worst = (hex) => Math.min(...surfaces.map(surface => contrastRatio(hex, surface)));
+    if (worst(colors[wanted]) >= ratio)
+        return colors[wanted];
+    return ['accent', 'text', 'inverse'].map(name => colors[name]).reduce((best, hex) => worst(hex) > worst(best) ? hex : best, colors[wanted]);
+}
+/**
+ * CSS for a theme's decoration. A focus ring is always drawn when the theme names one (at least 2px
+ * and 3:1 on the page's surfaces: the color is swapped for a visible one otherwise); motion only
+ * for people who have not asked for less of it.
+ */
+export function compileDecor(decor, targets, ctx) {
+    const out = [];
+    const { colors } = ctx;
+    const surfaces = [colors.bg, colors.surface, colors.page];
+    if (decor.dividers && targets.divider) {
+        const { style, color = 'border', width } = decor.dividers;
+        const line = style === 'none' ? '0 none' : `${style === 'hairline' ? 1 : width ?? (style === 'double' ? 3 : 1)}px ${style === 'hairline' ? 'solid' : style} ${colors[color]}`;
+        out.push(`:root:root :is(${targets.divider}){border-bottom:${line} !important}`);
+    }
+    if (decor.focusRing && targets.focusable) {
+        const { width = 2, style = 'solid', color = 'accent', offset = 2 } = decor.focusRing;
+        out.push(`:root:root :is(${targets.focusable}):focus-visible{outline:${Math.max(2, width)}px ${style} ${visibleOn(colors, color, surfaces, 3)} !important;outline-offset:${offset}px !important}`);
+    }
+    if (decor.selection) {
+        const fill = colors[decor.selection.fill];
+        const text = contrastRatio(colors[decor.selection.text], fill) >= 4.5 ? colors[decor.selection.text] : (contrastRatio('#ffffff', fill) >= contrastRatio('#000000', fill) ? '#ffffff' : '#000000');
+        // A bare ::selection: with an ancestor in front (`:root:root ::selection`) every node the site
+        // inserts costs the engine extra style recalculation (theme matrix: 4 elements per insertion, 2 without).
+        out.push(`::selection{background-color:${fill} !important;color:${text} !important}`);
+    }
+    if (decor.scrollbar) {
+        const { width, thumb = 'border', track, style } = decor.scrollbar;
+        const scroller = targets.scroller ?? 'html,body';
+        const thumbColor = visibleOn(colors, thumb, [track ? colors[track] : colors.page], 1.5);
+        out.push(`:root:root :is(${scroller}){scrollbar-color:${thumbColor} ${track ? colors[track] : 'transparent'} !important${width ? `;scrollbar-width:${width} !important` : ''}}`);
+        // The classic look needs the engine's own scrollbar parts; `scrollbar-color` would switch them off where both are set.
+        if (style === 'classic') {
+            const face = track ? colors[track] : colors.surface;
+            out.push(`@supports selector(::-webkit-scrollbar){:root:root :is(${scroller}){scrollbar-color:auto !important;scrollbar-width:auto !important}:root:root ::-webkit-scrollbar{width:16px;height:16px;background:${face}}:root:root ::-webkit-scrollbar-thumb{background:${colors.surface};box-shadow:inset -1px -1px ${colors.text},inset 1px 1px ${colors.bg},inset -2px -2px ${colors.muted},inset 2px 2px ${colors.elevated}}:root:root ::-webkit-scrollbar-corner{background:${face}}}`);
+        }
+    }
+    if (decor.links && targets.link) {
+        const { underline } = decor.links;
+        out.push(`:root:root :is(${targets.link}){text-decoration:${underline === 'always' ? 'underline' : 'none'} !important;text-underline-offset:2px}`);
+        if (underline === 'hover')
+            out.push(`:root:root :is(${targets.link}):hover{text-decoration:underline !important}`);
+    }
+    if (decor.motion && (targets.moving || targets.pressable)) {
+        const { duration, curve = 'standard', press } = decor.motion;
+        const rules = [];
+        if (duration !== undefined && targets.moving) {
+            rules.push(`:root:root :is(${targets.moving}){transition:background-color ${duration}ms ${CURVES[curve]},color ${duration}ms ${CURVES[curve]},border-color ${duration}ms ${CURVES[curve]},box-shadow ${duration}ms ${CURVES[curve]},transform ${duration}ms ${CURVES[curve]} !important}`);
+        }
+        if (press !== undefined && press < 1 && targets.pressable)
+            rules.push(`:root:root :is(${targets.pressable}):active{transform:scale(${press}) !important}`);
+        if (rules.length)
+            out.push(`@media (prefers-reduced-motion:no-preference){${rules.join('')}}`);
+    }
+    if (decor.chrome) {
+        const css = targets.chrome?.[decor.chrome.kind]?.(decor.chrome.title ?? '', ctx);
+        if (css)
+            out.push(css);
+    }
+    return out;
+}
+/** A theme's text as a CSS string literal (for `content`): the allow-list of `chromeTitle` plus escaping of what could end the string. */
+export const cssString = (value) => `"${value.replace(/[\\"\n\r\f]/g, match => `\\${match.charCodeAt(0).toString(16)} `)}"`;
+//# sourceMappingURL=themeDecor.js.map

package/dist/runtime/themeDecor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeDecor.js","sourceRoot":"","sources":["../../../runtime/src/themeDecor.ts"],"names":[],"mappings":"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","sourcesContent":["// Decoration: what a theme draws between and around the components: divider lines, a title bar or a\n// masthead, the focus ring, selection, scrollbars, link underlines, the feel of motion. Fixed words\n// and clamped numbers, colors by role. Where the lines and bars go is the site's (its decor targets).\n// Pure.\n\nimport { contrastRatio } from './themeApi.ts';\nimport { COLOR_ROLES, type ColorRole, type RoleColors } from './themeComponents.ts';\n\nexport const DIVIDER_STYLES = ['none', 'hairline', 'solid', 'dashed', 'dotted', 'double'] as const;\nexport const CHROME_KINDS = ['none', 'titlebar', 'masthead', 'prompt'] as const;\nexport const RING_STYLES = ['solid', 'dashed', 'dotted', 'double'] as const;\nexport const MOTION_CURVES = ['standard', 'snappy', 'spring', 'linear', 'steps'] as const;\nexport const LINK_UNDERLINES = ['always', 'hover', 'never'] as const;\n\nexport type ThemeDecor = {\n  dividers?: { style: typeof DIVIDER_STYLES[number]; color?: ColorRole; width?: number };\n  /** A drawn frame around the main column: a window title bar, a newspaper masthead, a terminal prompt. `title` is plain text. */\n  chrome?: { kind: typeof CHROME_KINDS[number]; title?: string };\n  focusRing?: { width?: number; style?: typeof RING_STYLES[number]; color?: ColorRole; offset?: number };\n  selection?: { fill: ColorRole; text: ColorRole };\n  scrollbar?: { width?: 'auto' | 'thin'; thumb?: ColorRole; track?: ColorRole; style?: 'flat' | 'classic' };\n  links?: { underline: typeof LINK_UNDERLINES[number] };\n  motion?: { duration?: number; curve?: typeof MOTION_CURVES[number]; press?: number };\n};\n\nconst obj = (value: unknown): Record<string, unknown> => value && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : {};\nconst oneOf = <T extends string>(value: unknown, options: readonly T[]): T | undefined => options.includes(value as T) ? value as T : undefined;\nconst num = (value: unknown, min: number, max: number): number | undefined => typeof value === 'number' && Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : undefined;\nconst role = (value: unknown) => oneOf(value, COLOR_ROLES);\n/** Text a theme may put into a drawn bar: letters, digits, spaces and a little punctuation; it is written into a CSS string. */\nexport const chromeTitle = (value: unknown) => typeof value === 'string' ? value.replace(/[^\\p{L}\\p{N} .,:!?&+\\-_/#@*~()[\\]|>$]/gu, '').replace(/&/g, '+').trim().slice(0, 24) : '';\n\n/** The `decor` group from JSON. Null when nothing valid is left. */\nexport function sanitizeDecor(value: unknown): ThemeDecor | null {\n  const source = obj(value);\n  const out: ThemeDecor = {};\n  const dividers = obj(source.dividers), dividerStyle = oneOf(dividers.style, DIVIDER_STYLES);\n  if (dividerStyle) {\n    const color = role(dividers.color), width = num(dividers.width, 0, 3);\n    out.dividers = { style: dividerStyle, ...(color ? { color } : {}), ...(width !== undefined ? { width: +width.toFixed(1) } : {}) };\n  }\n  const chrome = obj(source.chrome), kind = oneOf(chrome.kind, CHROME_KINDS);\n  if (kind && kind !== 'none') { const title = chromeTitle(chrome.title); out.chrome = { kind, ...(title ? { title } : {}) }; }\n  const ring = obj(source.focusRing);\n  if (Object.keys(ring).length) {\n    const width = num(ring.width, 2, 4), style = oneOf(ring.style, RING_STYLES), color = role(ring.color), offset = num(ring.offset, 0, 4);\n    const focusRing = { ...(width !== undefined ? { width: Math.round(width) } : {}), ...(style ? { style } : {}), ...(color ? { color } : {}), ...(offset !== undefined ? { offset: Math.round(offset) } : {}) };\n    if (Object.keys(focusRing).length) out.focusRing = focusRing;\n  }\n  const selection = obj(source.selection), fill = role(selection.fill), text = role(selection.text);\n  if (fill && text) out.selection = { fill, text };\n  const bar = obj(source.scrollbar);\n  if (Object.keys(bar).length) {\n    const width = oneOf(bar.width, ['auto', 'thin'] as const), thumb = role(bar.thumb), track = role(bar.track), style = oneOf(bar.style, ['flat', 'classic'] as const);\n    const scrollbar = { ...(width ? { width } : {}), ...(thumb ? { thumb } : {}), ...(track ? { track } : {}), ...(style ? { style } : {}) };\n    if (Object.keys(scrollbar).length) out.scrollbar = scrollbar;\n  }\n  const underline = oneOf(obj(source.links).underline, LINK_UNDERLINES);\n  if (underline) out.links = { underline };\n  const motion = obj(source.motion);\n  if (Object.keys(motion).length) {\n    const duration = num(motion.duration, 0, 400), curve = oneOf(motion.curve, MOTION_CURVES), press = num(motion.press, 0.96, 1);\n    const value = { ...(duration !== undefined ? { duration: Math.round(duration) } : {}), ...(curve ? { curve } : {}), ...(press !== undefined ? { press: +press.toFixed(3) } : {}) };\n    if (Object.keys(value).length) out.motion = value;\n  }\n  return Object.keys(out).length ? out : null;\n}\n\n/** Where a site's decoration goes. Every entry is optional: a site without it draws nothing for that key. */\nexport type DecorTargets<Context> = {\n  /** Rows whose bottom edge is the divider between items (a site's list cells). */\n  divider?: string;\n  /** Links inside running text. */\n  link?: string;\n  /** What takes keyboard focus. */\n  focusable?: string;\n  /** What moves with `motion` (buttons, links, rows). */\n  moving?: string;\n  /** What a press shrinks. */\n  pressable?: string;\n  /** The scrollable roots. */\n  scroller?: string;\n  /** The site's drawing of each chrome kind. */\n  chrome?: Partial<Record<Exclude<typeof CHROME_KINDS[number], 'none'>, (title: string, ctx: Context) => string>>;\n};\n\nconst CURVES: Record<typeof MOTION_CURVES[number], string> = {\n  standard: 'cubic-bezier(.2,.7,.2,1)', snappy: 'cubic-bezier(.3,1.4,.5,1)', spring: 'cubic-bezier(.2,1.6,.4,1)', linear: 'linear', steps: 'steps(3,end)',\n};\n\n/** The role among `candidates` that reaches `ratio` on every surface, else the most visible one. */\nfunction visibleOn(colors: RoleColors, wanted: ColorRole, surfaces: string[], ratio: number): string {\n  const worst = (hex: string) => Math.min(...surfaces.map(surface => contrastRatio(hex, surface)));\n  if (worst(colors[wanted]) >= ratio) return colors[wanted];\n  return (['accent', 'text', 'inverse'] as ColorRole[]).map(name => colors[name]).reduce((best, hex) => worst(hex) > worst(best) ? hex : best, colors[wanted]);\n}\n\n/**\n * CSS for a theme's decoration. A focus ring is always drawn when the theme names one (at least 2px\n * and 3:1 on the page's surfaces: the color is swapped for a visible one otherwise); motion only\n * for people who have not asked for less of it.\n */\nexport function compileDecor<Context extends { colors: RoleColors }>(decor: ThemeDecor, targets: DecorTargets<Context>, ctx: Context): string[] {\n  const out: string[] = [];\n  const { colors } = ctx;\n  const surfaces = [colors.bg, colors.surface, colors.page];\n  if (decor.dividers && targets.divider) {\n    const { style, color = 'border', width } = decor.dividers;\n    const line = style === 'none' ? '0 none' : `${style === 'hairline' ? 1 : width ?? (style === 'double' ? 3 : 1)}px ${style === 'hairline' ? 'solid' : style} ${colors[color]}`;\n    out.push(`:root:root :is(${targets.divider}){border-bottom:${line} !important}`);\n  }\n  if (decor.focusRing && targets.focusable) {\n    const { width = 2, style = 'solid', color = 'accent', offset = 2 } = decor.focusRing;\n    out.push(`:root:root :is(${targets.focusable}):focus-visible{outline:${Math.max(2, width)}px ${style} ${visibleOn(colors, color, surfaces, 3)} !important;outline-offset:${offset}px !important}`);\n  }\n  if (decor.selection) {\n    const fill = colors[decor.selection.fill];\n    const text = contrastRatio(colors[decor.selection.text], fill) >= 4.5 ? colors[decor.selection.text] : (contrastRatio('#ffffff', fill) >= contrastRatio('#000000', fill) ? '#ffffff' : '#000000');\n    // A bare ::selection: with an ancestor in front (`:root:root ::selection`) every node the site\n    // inserts costs the engine extra style recalculation (theme matrix: 4 elements per insertion, 2 without).\n    out.push(`::selection{background-color:${fill} !important;color:${text} !important}`);\n  }\n  if (decor.scrollbar) {\n    const { width, thumb = 'border', track, style } = decor.scrollbar;\n    const scroller = targets.scroller ?? 'html,body';\n    const thumbColor = visibleOn(colors, thumb, [track ? colors[track] : colors.page], 1.5);\n    out.push(`:root:root :is(${scroller}){scrollbar-color:${thumbColor} ${track ? colors[track] : 'transparent'} !important${width ? `;scrollbar-width:${width} !important` : ''}}`);\n    // The classic look needs the engine's own scrollbar parts; `scrollbar-color` would switch them off where both are set.\n    if (style === 'classic') {\n      const face = track ? colors[track] : colors.surface;\n      out.push(`@supports selector(::-webkit-scrollbar){:root:root :is(${scroller}){scrollbar-color:auto !important;scrollbar-width:auto !important}:root:root ::-webkit-scrollbar{width:16px;height:16px;background:${face}}:root:root ::-webkit-scrollbar-thumb{background:${colors.surface};box-shadow:inset -1px -1px ${colors.text},inset 1px 1px ${colors.bg},inset -2px -2px ${colors.muted},inset 2px 2px ${colors.elevated}}:root:root ::-webkit-scrollbar-corner{background:${face}}}`);\n    }\n  }\n  if (decor.links && targets.link) {\n    const { underline } = decor.links;\n    out.push(`:root:root :is(${targets.link}){text-decoration:${underline === 'always' ? 'underline' : 'none'} !important;text-underline-offset:2px}`);\n    if (underline === 'hover') out.push(`:root:root :is(${targets.link}):hover{text-decoration:underline !important}`);\n  }\n  if (decor.motion && (targets.moving || targets.pressable)) {\n    const { duration, curve = 'standard', press } = decor.motion;\n    const rules: string[] = [];\n    if (duration !== undefined && targets.moving) {\n      rules.push(`:root:root :is(${targets.moving}){transition:background-color ${duration}ms ${CURVES[curve]},color ${duration}ms ${CURVES[curve]},border-color ${duration}ms ${CURVES[curve]},box-shadow ${duration}ms ${CURVES[curve]},transform ${duration}ms ${CURVES[curve]} !important}`);\n    }\n    if (press !== undefined && press < 1 && targets.pressable) rules.push(`:root:root :is(${targets.pressable}):active{transform:scale(${press}) !important}`);\n    if (rules.length) out.push(`@media (prefers-reduced-motion:no-preference){${rules.join('')}}`);\n  }\n  if (decor.chrome) {\n    const css = targets.chrome?.[decor.chrome.kind as Exclude<typeof CHROME_KINDS[number], 'none'>]?.(decor.chrome.title ?? '', ctx);\n    if (css) out.push(css);\n  }\n  return out;\n}\n\n/** A theme's text as a CSS string literal (for `content`): the allow-list of `chromeTitle` plus escaping of what could end the string. */\nexport const cssString = (value: string) => `\"${value.replace(/[\\\\\"\\n\\r\\f]/g, match => `\\\\${match.charCodeAt(0).toString(16)} `)}\"`;\n"]}

package/dist/runtime/themeDerive.d.ts

@@ -0,0 +1,69 @@
+export declare const SURFACE_NAMES: readonly ["canvas", "content", "card", "chrome", "raised", "panel", "strong", "accentFill", "tooltip"];
+export type SurfaceName = typeof SURFACE_NAMES[number];
+export type EdgeStyle = 'flat' | 'hairline' | 'outline' | 'bevel' | 'gloss';
+export type DerivePalette = {
+    scheme?: 'light' | 'dark';
+    page?: string | null;
+    bg: string;
+    surface: string;
+    elevated: string;
+    face?: string | null;
+    border: string;
+    text: string;
+    muted: string;
+    accent: string;
+    inverse?: string | null;
+    inverse2?: string | null;
+    onInverse?: string | null;
+    hover?: string | null;
+    selected?: string | null;
+};
+export type DeriveInput = {
+    palette: DerivePalette;
+    edge?: {
+        style?: EdgeStyle;
+        strong?: boolean;
+    };
+    access?: 'standard' | 'high';
+    post?: {
+        style?: 'flat' | 'cards' | 'bubbles' | 'compact' | 'broadsheet';
+    };
+};
+export type Surface = {
+    /** The fill (`fill2`: the far end of a gradient fill; inks read on both). */
+    fill: string;
+    fill2?: string;
+    ink: string;
+    inkSoft: string;
+    link: string;
+    line: string;
+    hover: string;
+    selected: string;
+    focus: string;
+};
+export type SurfaceSet = Record<SurfaceName, Surface> & {
+    scheme: 'light' | 'dark';
+    edge: EdgeStyle;
+    notes: string[];
+};
+/** The best ratio any ink can reach on every one of `fills` (black or white on the worst of them). */
+export declare const reachable: (fills: string[]) => number;
+/** Every surface of a theme. Notes list each ink the solver had to move. */
+export declare function deriveSurfaces(input: DeriveInput): SurfaceSet;
+/** The v2 palette and component hints as v3 derivation input (until the documents are v3, step 13). */
+export declare function surfacesInputFromV2(colors: {
+    bg: string;
+    surface: string;
+    elevated: string;
+    border: string;
+    text: string;
+    muted: string;
+    accent: string;
+    page?: string | null;
+    inverse?: string | null;
+    onInverse?: string | null;
+}, hints?: {
+    bevel?: boolean;
+    high?: boolean;
+    cards?: boolean;
+}): DeriveInput;

package/dist/runtime/themeDerive.js

@@ -0,0 +1,117 @@
+// Theme engine v3, step 5 (.omc/plans/theme-engine-v3.md 3.2): every surface the site and the shell
+// paint, derived from a theme's tokens, with every ink solved for the fill it sits on (themeInk.ts).
+// Pure. Consumers ask "what is the ink on the chrome", never "which palette role reads here".
+//
+// The input is the v3 palette shape; v2 documents reach it through `surfacesInputFromV2` until step 13
+// makes v3 the stored format.
+import { contrastRatio, relativeLuminance } from "./themeApi.js";
+import { inkOn, inkOnEvery, mixOklab, TARGET } from "./themeInk.js";
+export const SURFACE_NAMES = ['canvas', 'content', 'card', 'chrome', 'raised', 'panel', 'strong', 'accentFill', 'tooltip'];
+const isDarkFill = (hex) => relativeLuminance(hex) < 0.18;
+/** The best ratio any ink can reach on every one of `fills` (black or white on the worst of them). */
+export const reachable = (fills) => Math.max(...['#000000', '#ffffff'].map(pole => Math.min(...fills.map(fill => contrastRatio(pole, fill)))));
+/**
+ * One surface. Inks are solved on the fill (both ends of a gradient); the hover and selected states are
+ * then pulled back toward the fill until every ink still reads on them, so a hovered or selected row
+ * never costs contrast. A target no ink can reach on this fill (7:1 on a mid tone) is capped at the
+ * best there is and noted.
+ */
+function surface(name, fill, p, input, notes, opts = {}) {
+    const fills = opts.fill2 ? [fill, opts.fill2] : [fill];
+    const best = reachable(fills);
+    const cap = (target, what) => {
+        if (best >= target)
+            return target;
+        notes.push(`${name}.${what}: ${target}:1 is out of reach on ${fills.join('/')}, ${best.toFixed(2)}:1 at most`);
+        return best;
+    };
+    const textTarget = cap(input.access === 'high' ? TARGET.high : TARGET.text, 'ink');
+    const softTarget = cap(TARGET.text, 'inkSoft');
+    const solve = (preferred, target, what) => {
+        const result = inkOnEvery(fills, preferred, target);
+        if (result.adjusted)
+            notes.push(`${name}.${what} ${preferred} -> ${result.ink} (${result.ratio.toFixed(2)}:1)`);
+        return result.ink;
+    };
+    const ink = solve(opts.inkPreferred ?? p.text, textTarget, 'ink');
+    const inkSoft = solve(p.muted, softTarget, 'inkSoft');
+    const link = solve(p.accent, softTarget, 'link');
+    const reads = (state) => contrastRatio(ink, state) >= textTarget - 1e-9 && contrastRatio(inkSoft, state) >= softTarget - 1e-9 && contrastRatio(link, state) >= softTarget - 1e-9;
+    /** A state `t` of the way from the fill to `toward`, shrunk until the inks read on it. */
+    const state = (toward, t, what) => {
+        for (let k = t; k > 0.004; k /= 2) {
+            const candidate = mixOklab(fill, toward, k);
+            if (reads(candidate)) {
+                if (k !== t)
+                    notes.push(`${name}.${what} step ${t} -> ${k.toFixed(3)}`);
+                return candidate;
+            }
+        }
+        return fill;
+    };
+    const dark = isDarkFill(fill);
+    // States: the theme's own hover/selected when they keep every ink readable, else a neutral step toward the ink (never the accent hue for hover).
+    const hover = opts.hover && reads(opts.hover) ? opts.hover : state(ink, dark ? 0.08 : 0.05, 'hover');
+    const selected = opts.selected && reads(opts.selected) ? opts.selected : state(p.accent, 0.14, 'selected');
+    const strongLine = input.edge?.strong || input.access === 'high';
+    const lineTarget = Math.min(best, strongLine || input.edge?.style === 'outline' ? TARGET.nonText : 1.3);
+    return {
+        fill, ...(opts.fill2 ? { fill2: opts.fill2 } : {}),
+        ink, inkSoft, link,
+        line: strongLine ? ink : inkOnEvery(fills, p.border, lineTarget).ink,
+        hover, selected, focus: inkOnEvery(fills, p.accent, Math.min(best, TARGET.nonText)).ink,
+    };
+}
+/** Every surface of a theme. Notes list each ink the solver had to move. */
+export function deriveSurfaces(input) {
+    const p = input.palette;
+    const notes = [];
+    const scheme = p.scheme ?? (relativeLuminance(p.bg) < relativeLuminance(p.text) ? 'dark' : 'light');
+    const edge = input.edge?.style ?? 'hairline';
+    const face = p.face ?? (edge === 'bevel' ? mixOklab(p.surface, p.border, 0.2) : p.surface);
+    const cards = input.post?.style === 'cards' || input.post?.style === 'bubbles';
+    // The strong fill (title bars, inverted buttons): its gradient end moves until one ink reads on both ends.
+    const inverse = p.inverse ?? p.text;
+    let inverse2 = p.inverse2 ?? inverse;
+    const strongPreferred = p.onInverse ?? p.bg;
+    if (inverse2 !== inverse) {
+        const both = inkOnEvery([inverse, inverse2], strongPreferred, TARGET.text);
+        if (both.ratio < TARGET.text) {
+            const ink = inkOn(inverse, strongPreferred, TARGET.text).ink;
+            const moved = inkOn(ink, inverse2, TARGET.text).ink;
+            notes.push(`strong.fill2 ${inverse2} -> ${moved} (one ink on both ends)`);
+            inverse2 = moved;
+        }
+    }
+    // The accent fill's label: white or the page colour, whichever reads better, then solved.
+    const accentLabel = contrastRatio('#ffffff', p.accent) >= contrastRatio(p.bg, p.accent) ? '#ffffff' : p.bg;
+    const tooltipFill = mixOklab(p.text, p.bg, 0.12);
+    const set = {
+        canvas: surface('canvas', p.page ?? p.bg, p, input, notes),
+        content: surface('content', p.bg, p, input, notes, { hover: p.hover, selected: p.selected }),
+        card: surface('card', cards ? p.surface : p.bg, p, input, notes, { hover: p.hover, selected: p.selected }),
+        chrome: surface('chrome', face, p, input, notes, { hover: p.hover, selected: p.selected }),
+        raised: surface('raised', p.elevated, p, input, notes),
+        panel: surface('panel', p.bg, p, input, notes, { hover: p.hover, selected: p.selected }),
+        strong: surface('strong', inverse, p, input, notes, { ...(inverse2 !== inverse ? { fill2: inverse2 } : {}), inkPreferred: strongPreferred }),
+        accentFill: surface('accentFill', p.accent, p, input, notes, { inkPreferred: accentLabel }),
+        tooltip: surface('tooltip', tooltipFill, p, input, notes, { inkPreferred: p.bg }),
+    };
+    return { ...set, scheme, edge, notes };
+}
+/** The v2 palette and component hints as v3 derivation input (until the documents are v3, step 13). */
+export function surfacesInputFromV2(colors, hints = {}) {
+    return {
+        palette: {
+            page: colors.page ?? null, bg: colors.bg, surface: colors.surface, elevated: colors.elevated, border: colors.border,
+            text: colors.text, muted: colors.muted, accent: colors.accent, inverse: colors.inverse ?? null, onInverse: colors.onInverse ?? null,
+            // A bevelled v2 theme draws its chrome from `page` (Windows 98: the silver face) and its title bar from inverse to accent.
+            face: hints.bevel ? colors.page ?? colors.elevated : null,
+            inverse2: hints.bevel ? colors.accent : null,
+        },
+        edge: { style: hints.bevel ? 'bevel' : 'hairline' },
+        access: hints.high ? 'high' : 'standard',
+        post: { style: hints.cards ? 'cards' : 'flat' },
+    };
+}
+//# sourceMappingURL=themeDerive.js.map

package/dist/runtime/themeDerive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeDerive.js","sourceRoot":"","sources":["../../../runtime/src/themeDerive.ts"],"names":[],"mappings":"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","sourcesContent":["// Theme engine v3, step 5 (.omc/plans/theme-engine-v3.md 3.2): every surface the site and the shell\n// paint, derived from a theme's tokens, with every ink solved for the fill it sits on (themeInk.ts).\n// Pure. Consumers ask \"what is the ink on the chrome\", never \"which palette role reads here\".\n//\n// The input is the v3 palette shape; v2 documents reach it through `surfacesInputFromV2` until step 13\n// makes v3 the stored format.\n\nimport { contrastRatio, relativeLuminance } from './themeApi.ts';\nimport { inkOn, inkOnEvery, mixOklab, TARGET } from './themeInk.ts';\n\nexport const SURFACE_NAMES = ['canvas', 'content', 'card', 'chrome', 'raised', 'panel', 'strong', 'accentFill', 'tooltip'] as const;\nexport type SurfaceName = typeof SURFACE_NAMES[number];\nexport type EdgeStyle = 'flat' | 'hairline' | 'outline' | 'bevel' | 'gloss';\n\nexport type DerivePalette = {\n  scheme?: 'light' | 'dark';\n  page?: string | null; bg: string; surface: string; elevated: string; face?: string | null;\n  border: string; text: string; muted: string; accent: string;\n  inverse?: string | null; inverse2?: string | null; onInverse?: string | null;\n  hover?: string | null; selected?: string | null;\n};\nexport type DeriveInput = {\n  palette: DerivePalette;\n  edge?: { style?: EdgeStyle; strong?: boolean };\n  access?: 'standard' | 'high';\n  post?: { style?: 'flat' | 'cards' | 'bubbles' | 'compact' | 'broadsheet' };\n};\n\nexport type Surface = {\n  /** The fill (`fill2`: the far end of a gradient fill; inks read on both). */\n  fill: string; fill2?: string;\n  ink: string; inkSoft: string; link: string; line: string;\n  hover: string; selected: string; focus: string;\n};\nexport type SurfaceSet = Record<SurfaceName, Surface> & { scheme: 'light' | 'dark'; edge: EdgeStyle; notes: string[] };\n\nconst isDarkFill = (hex: string) => relativeLuminance(hex) < 0.18;\n\n/** The best ratio any ink can reach on every one of `fills` (black or white on the worst of them). */\nexport const reachable = (fills: string[]) => Math.max(...['#000000', '#ffffff'].map(pole => Math.min(...fills.map(fill => contrastRatio(pole, fill)))));\n\n/**\n * One surface. Inks are solved on the fill (both ends of a gradient); the hover and selected states are\n * then pulled back toward the fill until every ink still reads on them, so a hovered or selected row\n * never costs contrast. A target no ink can reach on this fill (7:1 on a mid tone) is capped at the\n * best there is and noted.\n */\nfunction surface(name: SurfaceName, fill: string, p: DerivePalette, input: DeriveInput, notes: string[], opts: { fill2?: string; inkPreferred?: string; hover?: string | null; selected?: string | null } = {}): Surface {\n  const fills = opts.fill2 ? [fill, opts.fill2] : [fill];\n  const best = reachable(fills);\n  const cap = (target: number, what: string) => {\n    if (best >= target) return target;\n    notes.push(`${name}.${what}: ${target}:1 is out of reach on ${fills.join('/')}, ${best.toFixed(2)}:1 at most`);\n    return best;\n  };\n  const textTarget = cap(input.access === 'high' ? TARGET.high : TARGET.text, 'ink');\n  const softTarget = cap(TARGET.text, 'inkSoft');\n  const solve = (preferred: string, target: number, what: string) => {\n    const result = inkOnEvery(fills, preferred, target);\n    if (result.adjusted) notes.push(`${name}.${what} ${preferred} -> ${result.ink} (${result.ratio.toFixed(2)}:1)`);\n    return result.ink;\n  };\n  const ink = solve(opts.inkPreferred ?? p.text, textTarget, 'ink');\n  const inkSoft = solve(p.muted, softTarget, 'inkSoft');\n  const link = solve(p.accent, softTarget, 'link');\n  const reads = (state: string) => contrastRatio(ink, state) >= textTarget - 1e-9 && contrastRatio(inkSoft, state) >= softTarget - 1e-9 && contrastRatio(link, state) >= softTarget - 1e-9;\n  /** A state `t` of the way from the fill to `toward`, shrunk until the inks read on it. */\n  const state = (toward: string, t: number, what: string) => {\n    for (let k = t; k > 0.004; k /= 2) { const candidate = mixOklab(fill, toward, k); if (reads(candidate)) { if (k !== t) notes.push(`${name}.${what} step ${t} -> ${k.toFixed(3)}`); return candidate; } }\n    return fill;\n  };\n  const dark = isDarkFill(fill);\n  // States: the theme's own hover/selected when they keep every ink readable, else a neutral step toward the ink (never the accent hue for hover).\n  const hover = opts.hover && reads(opts.hover) ? opts.hover : state(ink, dark ? 0.08 : 0.05, 'hover');\n  const selected = opts.selected && reads(opts.selected) ? opts.selected : state(p.accent, 0.14, 'selected');\n  const strongLine = input.edge?.strong || input.access === 'high';\n  const lineTarget = Math.min(best, strongLine || input.edge?.style === 'outline' ? TARGET.nonText : 1.3);\n  return {\n    fill, ...(opts.fill2 ? { fill2: opts.fill2 } : {}),\n    ink, inkSoft, link,\n    line: strongLine ? ink : inkOnEvery(fills, p.border, lineTarget).ink,\n    hover, selected, focus: inkOnEvery(fills, p.accent, Math.min(best, TARGET.nonText)).ink,\n  };\n}\n\n/** Every surface of a theme. Notes list each ink the solver had to move. */\nexport function deriveSurfaces(input: DeriveInput): SurfaceSet {\n  const p = input.palette;\n  const notes: string[] = [];\n  const scheme = p.scheme ?? (relativeLuminance(p.bg) < relativeLuminance(p.text) ? 'dark' : 'light');\n  const edge = input.edge?.style ?? 'hairline';\n  const face = p.face ?? (edge === 'bevel' ? mixOklab(p.surface, p.border, 0.2) : p.surface);\n  const cards = input.post?.style === 'cards' || input.post?.style === 'bubbles';\n  // The strong fill (title bars, inverted buttons): its gradient end moves until one ink reads on both ends.\n  const inverse = p.inverse ?? p.text;\n  let inverse2 = p.inverse2 ?? inverse;\n  const strongPreferred = p.onInverse ?? p.bg;\n  if (inverse2 !== inverse) {\n    const both = inkOnEvery([inverse, inverse2], strongPreferred, TARGET.text);\n    if (both.ratio < TARGET.text) {\n      const ink = inkOn(inverse, strongPreferred, TARGET.text).ink;\n      const moved = inkOn(ink, inverse2, TARGET.text).ink;\n      notes.push(`strong.fill2 ${inverse2} -> ${moved} (one ink on both ends)`);\n      inverse2 = moved;\n    }\n  }\n  // The accent fill's label: white or the page colour, whichever reads better, then solved.\n  const accentLabel = contrastRatio('#ffffff', p.accent) >= contrastRatio(p.bg, p.accent) ? '#ffffff' : p.bg;\n  const tooltipFill = mixOklab(p.text, p.bg, 0.12);\n  const set = {\n    canvas: surface('canvas', p.page ?? p.bg, p, input, notes),\n    content: surface('content', p.bg, p, input, notes, { hover: p.hover, selected: p.selected }),\n    card: surface('card', cards ? p.surface : p.bg, p, input, notes, { hover: p.hover, selected: p.selected }),\n    chrome: surface('chrome', face, p, input, notes, { hover: p.hover, selected: p.selected }),\n    raised: surface('raised', p.elevated, p, input, notes),\n    panel: surface('panel', p.bg, p, input, notes, { hover: p.hover, selected: p.selected }),\n    strong: surface('strong', inverse, p, input, notes, { ...(inverse2 !== inverse ? { fill2: inverse2 } : {}), inkPreferred: strongPreferred }),\n    accentFill: surface('accentFill', p.accent, p, input, notes, { inkPreferred: accentLabel }),\n    tooltip: surface('tooltip', tooltipFill, p, input, notes, { inkPreferred: p.bg }),\n  } satisfies Record<SurfaceName, Surface>;\n  return { ...set, scheme, edge, notes };\n}\n\n/** The v2 palette and component hints as v3 derivation input (until the documents are v3, step 13). */\nexport function surfacesInputFromV2(colors: { bg: string; surface: string; elevated: string; border: string; text: string; muted: string; accent: string; page?: string | null; inverse?: string | null; onInverse?: string | null }, hints: { bevel?: boolean; high?: boolean; cards?: boolean } = {}): DeriveInput {\n  return {\n    palette: {\n      page: colors.page ?? null, bg: colors.bg, surface: colors.surface, elevated: colors.elevated, border: colors.border,\n      text: colors.text, muted: colors.muted, accent: colors.accent, inverse: colors.inverse ?? null, onInverse: colors.onInverse ?? null,\n      // A bevelled v2 theme draws its chrome from `page` (Windows 98: the silver face) and its title bar from inverse to accent.\n      face: hints.bevel ? colors.page ?? colors.elevated : null,\n      inverse2: hints.bevel ? colors.accent : null,\n    },\n    edge: { style: hints.bevel ? 'bevel' : 'hairline' },\n    access: hints.high ? 'high' : 'standard',\n    post: { style: hints.cards ? 'cards' : 'flat' },\n  };\n}\n"]}

package/dist/runtime/themeDoctor.d.ts

@@ -0,0 +1,52 @@
+import { type ThemeSpec } from './themeSpec.ts';
+export type DoctorAdvice = {
+    /** `lighter`: a lighter mechanism would do; `performance`, `accessibility`, `contrast`: a cost. */
+    kind: 'lighter' | 'performance' | 'accessibility' | 'contrast';
+    /** Stable id of the finding, for tests (`css-radius`, `contrast-text`). */
+    id: string;
+    /** Its words in the catalog: `wb.doctor.<key>.found` and `wb.doctor.<key>.fix` (`css-radius`, `contrast`). */
+    key: string;
+    /** A token path of the theme (`colors.text`, `components.postText.fontSize`) or the CSS rule (`.card { border-radius }`). */
+    where: string;
+    /** Values for the `{name}` slots of the words. */
+    params: Record<string, string>;
+    /** English: what was found. */
+    text: string;
+    /** English: how to fix it. */
+    fix: string;
+};
+/** The doctor's words in English (the source of `wb.doctor.*` in the catalogs). */
+export declare const DOCTOR_MESSAGES: {
+    readonly 'wb.doctor.css-radius.found': "This rule sets corner radii in CSS.";
+    readonly 'wb.doctor.css-radius.fix': "Set them with the radius of a part under components, or shape.radius for all of them: no CSS needed, and it keeps working when the site renames its classes.";
+    readonly 'wb.doctor.css-bevel.found': "This rule draws a bevelled edge with stacked inset shadows.";
+    readonly 'wb.doctor.css-bevel.fix': "Use borderStyle \"bevel-out\" or \"bevel-in\" on a part under components: it draws the bevel from the theme’s colors.";
+    readonly 'wb.doctor.css-hide.found': "This rule hides something with display: none.";
+    readonly 'wb.doctor.css-hide.fix': "Use visible on a part under components (avatars, counts, names) or a layout variant such as sidebar: hidden; the owner can then switch it back.";
+    readonly 'wb.doctor.css-color.found': "This rule uses a literal color.";
+    readonly 'wb.doctor.css-color.fix': "Name a role (text, muted, accent, surface…) in colors or in a component, so the contrast pass covers it.";
+    readonly 'wb.doctor.css-font.found': "This rule sets a font family.";
+    readonly 'wb.doctor.css-font.fix': "Use font.roles: it sets the post, heading, numbers and mono faces without CSS.";
+    readonly 'wb.doctor.css-has.found': "This rule uses :has(), which is matched again on every change of the page.";
+    readonly 'wb.doctor.css-has.fix': "Keep :has() off rules that repeat down a timeline, or anchor the rule on a part.";
+    readonly 'wb.doctor.css-universal.found': "This rule uses a universal selector (*), matched against every element.";
+    readonly 'wb.doctor.css-universal.fix': "Anchor the rule on a part instead.";
+    readonly 'wb.doctor.css-blur.found': "This rule blurs what is behind it (backdrop-filter), which is costly on parts that repeat.";
+    readonly 'wb.doctor.css-blur.fix': "Use the glass fill of bars and panels: it is the cheaper place for blur.";
+    readonly 'wb.doctor.css-outline-none.found': "This rule removes the focus outline, so keyboard focus is no longer visible.";
+    readonly 'wb.doctor.css-outline-none.fix': "Use decor.focusRing to draw a visible focus ring instead.";
+    readonly 'wb.doctor.css-motion.found': "This rule animates without checking for reduced motion.";
+    readonly 'wb.doctor.css-motion.fix': "Keep motion inside @media (prefers-reduced-motion: no-preference), or let decor.motion do it for you.";
+    readonly 'wb.doctor.css-size.found': "The CSS is more than 20,000 characters long.";
+    readonly 'wb.doctor.css-size.fix': "The site recalculates styles with every rule; tokens and component settings compile to fewer rules.";
+    readonly 'wb.doctor.contrast.found': "The {token} color was adjusted to stay readable ({ratio}:1 on the background).";
+    readonly 'wb.doctor.contrast.fix': "Pick a lighter or darker {token} color; until then the theme is shown with the adjusted one.";
+    readonly 'wb.doctor.glass-post.found': "Glass is set on posts, but it is not drawn: blur on every post of a timeline is too costly.";
+    readonly 'wb.doctor.glass-post.fix': "Use a solid or tinted fill for posts and keep glass for bars and panels.";
+    readonly 'wb.doctor.small-post-text.found': "Post text is {size}px, which is hard to read for many people.";
+    readonly 'wb.doctor.small-post-text.fix': "Use 14px or more for the post text size, or raise the text size of the whole theme.";
+    readonly 'wb.doctor.nav-moved.found': "The navigation is moved to the {position}, which changes where people look for it.";
+    readonly 'wb.doctor.nav-moved.fix': "It only applies on wide panes, and the owner can turn layout changes off. Keep the default position unless the layout needs it.";
+};
+/** Advice for a theme document: every finding, with where it is. Empty when there is nothing to say. */
+export declare function themeDoctor(theme: ThemeSpec): DoctorAdvice[];