@mistriwork/engine 0.0.0-stage → 1.0.0-rc.10

package/dist/shared/themeResolve.js

@@ -0,0 +1,52 @@
+/**
+ * Which theme a page wears: one function, read by the server where it
+ * projects an App for a principal (appViewRoles.ts) and guesses a first
+ * paint's sheets (clientSurface.ts), and by the browser where it applies the
+ * look (client visualTheme.ts), so the two never disagree about a page.
+ *
+ * The order (docs/theming.md, Precedence):
+ *
+ * 1. A public surface — a landing, the sign-in screen, a public form, or any
+ *    page a signed-out visitor sees — wears `ui.theme.for.public` where the
+ *    App names one, whatever a reader picked once: public pages are a
+ *    storefront, the same for everyone, and so can be cached.
+ * 2. Otherwise the reader's own pick, where the App offers a picker.
+ * 3. Otherwise the first `for.roles` entry, in the order it is written, that
+ *    the account holds: a portal's look is the App's design.
+ * 4. Otherwise the tenant's saved theme: its staff's default.
+ * 5. Otherwise the App's `ui.theme.preset`, and Workshop where it names none.
+ *
+ * Each id is taken only where the App offers it (a built-in look or one of
+ * its own), so a theme removed since a pick was saved falls through to the
+ * next rank instead of to nothing.
+ */
+/** The look in force when the App says nothing and nobody picked. */
+const DEFAULT_THEME = 'workshop';
+/** The theme a page wears, where it came from and, for a role's, which role. */
+export function resolveTheme(ask) {
+    const offered = (id) => typeof id === 'string' && ask.offered(id);
+    if (ask.public && offered(ask.for?.public))
+        return { id: ask.for.public, source: 'public' };
+    if (offered(ask.pick))
+        return { id: ask.pick, source: 'reader' };
+    if (!ask.public && ask.roles?.length)
+        for (const [role, id] of Object.entries(ask.for?.roles ?? {}))
+            if (ask.roles.includes(role) && offered(id))
+                return { id, source: 'role', role };
+    if (offered(ask.tenant))
+        return { id: ask.tenant, source: 'tenant' };
+    if (offered(ask.preset))
+        return { id: ask.preset, source: 'app' };
+    return { id: DEFAULT_THEME, source: 'default' };
+}
+/** The role theme a principal holding `roles` wears, if `for.roles` maps one it holds: the first in written order. */
+export function roleTheme(audiences, roles) {
+    for (const [role, id] of Object.entries(audiences?.roles ?? {}))
+        if (roles.includes(role))
+            return id;
+    return undefined;
+}
+/** Every theme a mapping can dress a page in: the public one, then each role's, once each. */
+export function audienceThemes(audiences) {
+    return [...new Set([...(audiences?.public ? [audiences.public] : []), ...Object.values(audiences?.roles ?? {})])];
+}

package/dist/shared/themeTokens.d.ts

@@ -0,0 +1,107 @@
+export declare const THEME_BASES: readonly ['workshop', 'lumen', 'mono', 'sage', 'ledger'];
+/** Each role as the custom property it is worn as: its spec path, hyphenated (`nav.ground` is `--nav-ground`, `chart[0]` is `--chart-1`). */
+export declare const PALETTE_TOKENS: {
+    readonly ground: '--ground';
+    readonly surface: '--surface';
+    readonly field: '--field-fill';
+    readonly raised: '--raised';
+    readonly line: '--line';
+    readonly lineStrong: '--line-strong';
+    readonly lineControl: '--line-control';
+    readonly ink: '--ink';
+    readonly inkMuted: '--ink-muted';
+    readonly inkSubtle: '--ink-subtle';
+    readonly accent: '--accent';
+    readonly onAccent: '--on-accent';
+    readonly accentInk: '--accent-ink';
+    readonly primary: '--primary';
+    readonly onPrimary: '--on-primary';
+    readonly focus: '--focus';
+    readonly accentSoft: '--accent-soft';
+    readonly link: '--link';
+    readonly statusGood: '--status-good';
+    readonly statusWarning: '--status-warning';
+    readonly statusCritical: '--status-critical';
+    readonly statusInfo: '--status-info';
+    readonly navGround: '--nav-ground';
+    readonly navInk: '--nav-ink';
+    readonly navMuted: '--nav-muted';
+    readonly navLine: '--nav-line';
+    readonly navAccent: '--nav-accent';
+    readonly navCurrent: '--nav-current';
+    readonly navOnCurrent: '--nav-on-current';
+    readonly rulesSection: '--rules-section';
+    readonly rulesHead: '--rules-head';
+    readonly shadow: '--shadow-ink';
+    readonly band: '--band';
+    readonly rulesWeight: '--rules-weight';
+    readonly rulesControl: '--control-border-w';
+    readonly chart1: '--chart-1';
+    readonly chart2: '--chart-2';
+    readonly chart3: '--chart-3';
+    readonly chart4: '--chart-4';
+    readonly chart5: '--chart-5';
+    readonly chart6: '--chart-6';
+    readonly chart7: '--chart-7';
+    readonly chart8: '--chart-8';
+};
+export declare const FONT_TOKENS: {
+    readonly ui: '--sans';
+    readonly data: '--mono';
+    readonly heading: '--heading-font';
+    readonly code: '--code';
+};
+export declare const RADIUS_TOKENS: {
+    readonly control: '--radius';
+    readonly field: '--field-radius';
+    readonly pill: '--pill-radius';
+    readonly panel: '--panel-radius';
+};
+/** A panel's edge and the focus ring's width; a rule's and a control's ride in each mode's palette (`--rules-weight`). */
+declare const BORDER_TOKENS: {
+    readonly panel: '--panel-border-width';
+    readonly focus: '--focus-ring-width';
+};
+/** Each corner's ceiling in pixels: a control may also be a pill (`round`), and so may a pill's tag. */
+export declare const RADIUS_MAX: {
+    readonly control: 16;
+    readonly field: 12;
+    readonly pill: 12;
+    readonly panel: 20;
+};
+export declare const ROUND_CORNERS: ReadonlySet<string>;
+/** `round`, compiled: a length past any box's, so a control or a tag draws as a pill whatever its height. */
+export declare const ROUND = "999px";
+/** The corner every other box that follows a control's takes when the controls are round: a card is not a pill. */
+export declare const ROUND_BOX = "8px";
+/** The widths each edge may take: a rule's, a control's, a panel's (0px draws none) and the focus ring's. */
+export declare const BORDER_MENU: {
+    readonly rule: readonly ['1px', '2px', '3px'];
+    readonly control: readonly ['0px', '1px', '2px'];
+    readonly panel: readonly ['0px', '1px', '2px'];
+    readonly focus: readonly ['2px', '3px'];
+};
+/** A control's height, in whole pixels (`shape.height.control`): a field, a select and a button stand level at it. */
+export declare const CONTROL_HEIGHT: {
+    readonly min: 32;
+    readonly max: 56;
+};
+export declare function controlHeightFits(length: unknown): boolean;
+/** A corner in pixels up to `max`: `6px`, `7.5px`. */
+export declare function cornerFits(length: unknown, max: number): boolean;
+/**
+ * A theme's corners and widths as the custom properties the sheets read. A round control is `--control-radius`,
+ * which only a control's own rule reads (customThemes.css), and `--radius` — every other box that follows a
+ * control's corner, a card's, a menu's — stays at ROUND_BOX.
+ */
+export declare function shapeTokens(theme: {
+    radius?: Partial<Record<keyof typeof RADIUS_TOKENS, string>>;
+    border?: Partial<Record<keyof typeof BORDER_TOKENS, string>>;
+    height?: {
+        control?: string;
+    };
+}): Record<string, string>;
+/** A role by its name in the spec, for any message an author reads: `statusCritical` is `status.critical`, `chart3`
+    is `chart[2]`. The roles are the spec's paths in camel case, so this is the whole map. */
+export declare function rolePath(role: string): string;
+export {};

package/dist/shared/themeTokens.js

@@ -0,0 +1,116 @@
+export const THEME_BASES = ['workshop', 'lumen', 'mono', 'sage', 'ledger'];
+/** Each role as the custom property it is worn as: its spec path, hyphenated (`nav.ground` is `--nav-ground`, `chart[0]` is `--chart-1`). */
+export const PALETTE_TOKENS = {
+    ground: '--ground',
+    surface: '--surface',
+    field: '--field-fill',
+    raised: '--raised',
+    line: '--line',
+    lineStrong: '--line-strong',
+    lineControl: '--line-control',
+    ink: '--ink',
+    inkMuted: '--ink-muted',
+    inkSubtle: '--ink-subtle',
+    accent: '--accent',
+    onAccent: '--on-accent',
+    accentInk: '--accent-ink',
+    primary: '--primary',
+    onPrimary: '--on-primary',
+    focus: '--focus',
+    accentSoft: '--accent-soft',
+    link: '--link',
+    statusGood: '--status-good',
+    statusWarning: '--status-warning',
+    statusCritical: '--status-critical',
+    statusInfo: '--status-info',
+    navGround: '--nav-ground',
+    navInk: '--nav-ink',
+    navMuted: '--nav-muted',
+    navLine: '--nav-line',
+    navAccent: '--nav-accent',
+    navCurrent: '--nav-current',
+    navOnCurrent: '--nav-on-current',
+    rulesSection: '--rules-section',
+    rulesHead: '--rules-head',
+    shadow: '--shadow-ink',
+    band: '--band',
+    rulesWeight: '--rules-weight',
+    rulesControl: '--control-border-w',
+    chart1: '--chart-1',
+    chart2: '--chart-2',
+    chart3: '--chart-3',
+    chart4: '--chart-4',
+    chart5: '--chart-5',
+    chart6: '--chart-6',
+    chart7: '--chart-7',
+    chart8: '--chart-8',
+};
+export const FONT_TOKENS = { ui: '--sans', data: '--mono', heading: '--heading-font', code: '--code' };
+export const RADIUS_TOKENS = { control: '--radius', field: '--field-radius', pill: '--pill-radius', panel: '--panel-radius' };
+/** A panel's edge and the focus ring's width; a rule's and a control's ride in each mode's palette (`--rules-weight`). */
+const BORDER_TOKENS = { panel: '--panel-border-width', focus: '--focus-ring-width' };
+/** Each corner's ceiling in pixels: a control may also be a pill (`round`), and so may a pill's tag. */
+export const RADIUS_MAX = { control: 16, field: 12, pill: 12, panel: 20 };
+export const ROUND_CORNERS = new Set(['control', 'pill']);
+/** `round`, compiled: a length past any box's, so a control or a tag draws as a pill whatever its height. */
+export const ROUND = '999px';
+/** The corner every other box that follows a control's takes when the controls are round: a card is not a pill. */
+export const ROUND_BOX = '8px';
+/** The widths each edge may take: a rule's, a control's, a panel's (0px draws none) and the focus ring's. */
+export const BORDER_MENU = {
+    rule: ['1px', '2px', '3px'],
+    control: ['0px', '1px', '2px'],
+    panel: ['0px', '1px', '2px'],
+    focus: ['2px', '3px'],
+};
+/** A control's height, in whole pixels (`shape.height.control`): a field, a select and a button stand level at it. */
+export const CONTROL_HEIGHT = { min: 32, max: 56 };
+export function controlHeightFits(length) {
+    if (typeof length !== 'string')
+        return false;
+    const match = /^(\d{2})px$/.exec(length);
+    return Boolean(match) && Number(match[1]) >= CONTROL_HEIGHT.min && Number(match[1]) <= CONTROL_HEIGHT.max;
+}
+/** A corner in pixels up to `max`: `6px`, `7.5px`. */
+export function cornerFits(length, max) {
+    if (typeof length !== 'string')
+        return false;
+    const match = /^(\d{1,2}(?:\.\d+)?)px$/.exec(length);
+    return Boolean(match) && Number(match[1]) <= max;
+}
+/**
+ * A theme's corners and widths as the custom properties the sheets read. A round control is `--control-radius`,
+ * which only a control's own rule reads (customThemes.css), and `--radius` — every other box that follows a
+ * control's corner, a card's, a menu's — stays at ROUND_BOX.
+ */
+export function shapeTokens(theme) {
+    const out = {};
+    for (const [key, token] of Object.entries(RADIUS_TOKENS)) {
+        const value = theme.radius?.[key];
+        if (value === undefined)
+            continue;
+        if (key === 'control' && value === ROUND) {
+            out['--radius'] = ROUND_BOX;
+            out['--control-radius'] = ROUND;
+        }
+        else
+            out[token] = value;
+    }
+    for (const [key, token] of Object.entries(BORDER_TOKENS)) {
+        const value = theme.border?.[key];
+        if (value !== undefined)
+            out[token] = value;
+    }
+    if (theme.height?.control !== undefined)
+        out['--control-h'] = theme.height.control;
+    return out;
+}
+/** A role by its name in the spec, for any message an author reads: `statusCritical` is `status.critical`, `chart3`
+    is `chart[2]`. The roles are the spec's paths in camel case, so this is the whole map. */
+export function rolePath(role) {
+    const series = /^chart(\d)$/.exec(role);
+    if (series)
+        return `chart[${Number(series[1]) - 1}]`;
+    const group = /^(status|nav|rules)([A-Z])(\w*)$/.exec(role);
+    return group ? `${group[1]}.${group[2].toLowerCase()}${group[3]}` : role;
+}

package/dist/shared/themeType.d.ts

@@ -0,0 +1,38 @@
+/**
+ * A theme's type: the base size its text is drawn at and the nine roles, each
+ * kind of text by what it is for (docs/theming.md, Type). Checked here,
+ * merged over a base look's, and worn as two things the browser needs at
+ * first paint: custom properties (`--type-k`, `--type-<role>-<property>`) and
+ * one `data-type-<role>` attribute per role naming what that role says, which
+ * the rules in themeFamilies.css answer (the attributes are themeRecipes.ts's,
+ * with the rest of what a first paint sets on the root). A role that says nothing sets no
+ * attribute, so every rule it would draw is off and the look draws as before.
+ */
+import type { ThemeTypeBase, ThemeTypeDefinition, ThemeTypeFace, ThemeTypeRole, ThemeTypeRoleDefinition } from '../../schema/theme.js';
+type Property = keyof ThemeTypeRoleDefinition;
+interface RoleRule {
+    /** The properties a role takes. */
+    takes: readonly Property[];
+    /** Its size's range in pixels, at the 13px base. */
+    size?: readonly [number, number];
+    /** Its leading's range. */
+    leading?: readonly [number, number];
+    /** The weights it may be drawn at. */
+    weights?: readonly number[];
+}
+/** Each role, what it takes and the ranges it is held to: no text smaller than the look draws it, no menu that
+    competes with a heading, no body that is not the base. */
+export declare const TYPE_ROLES: Record<ThemeTypeRole, RoleRule>;
+export declare const TYPE_BASES: readonly ThemeTypeBase[];
+/** Each face as the stack it reads: the theme's own, `code` its monospace (`fonts.code`, else the platform's). */
+export declare const TYPE_FACES: Record<ThemeTypeFace, string>;
+/** The spellings type roles replaced, each with where it went (a clean break: the old key is refused). */
+export declare const TYPE_MOVED: Record<string, string>;
+/** `type.base` and `type.roles` checked; anything else in `type` is the caller's. */
+export declare function typeOf(base: unknown, roles: unknown, where: string): ThemeTypeDefinition;
+/** A theme's type over its base look's: the theme's base, and each role's properties over the look's own. */
+export declare function mergeType(under: ThemeTypeDefinition | undefined, over: ThemeTypeDefinition | undefined): ThemeTypeDefinition | undefined;
+/** The custom properties a theme's type is worn as. A title's weight is not here: it is `--heading-weight`, which
+    every heading reads (headingWeight). */
+export declare function typeTokens(type: ThemeTypeDefinition | undefined): Record<string, string>;
+export {};

package/dist/shared/themeType.js

@@ -0,0 +1,205 @@
+const WEIGHTS = [400, 500, 600, 700, 800, 900];
+const LEADING = [1.1, 1.8];
+/** A title and a display line may be set as tight as 0.85: a short line of large type wants the lines closer than a
+    heading's. Under 1.0 a wrapped line sets its descenders into the next, which `check` warns of (theme-type). */
+const TIGHT_LEADING = [0.85, 1.8];
+/** Each role, what it takes and the ranges it is held to: no text smaller than the look draws it, no menu that
+    competes with a heading, no body that is not the base. */
+export const TYPE_ROLES = {
+    display: {
+        takes: ['face', 'size', 'leading', 'tracking', 'weight', 'features'],
+        size: [28, 56],
+        leading: TIGHT_LEADING,
+        weights: WEIGHTS,
+    },
+    title: {
+        takes: ['face', 'size', 'leading', 'tracking', 'weight', 'case', 'features'],
+        size: [20, 36],
+        leading: TIGHT_LEADING,
+        weights: WEIGHTS,
+    },
+    heading: {
+        takes: ['face', 'size', 'leading', 'tracking', 'weight', 'case', 'features'],
+        size: [16, 28],
+        leading: LEADING,
+        weights: WEIGHTS,
+    },
+    section: { takes: ['face', 'size', 'tracking', 'weight', 'case', 'features'], size: [12, 20], weights: WEIGHTS },
+    body: { takes: ['leading', 'features'], leading: [1.35, 1.8] },
+    label: { takes: ['face', 'tracking', 'weight', 'case', 'features'], weights: [400, 500, 600, 700] },
+    data: { takes: ['features', 'reach'] },
+    figure: { takes: ['face', 'size', 'tracking', 'weight', 'features'], size: [18, 40], weights: WEIGHTS },
+    nav: { takes: ['face', 'tracking', 'weight', 'case'], weights: [400, 500, 600] },
+};
+const TYPE_ROLE_NAMES = Object.keys(TYPE_ROLES);
+export const TYPE_BASES = ['13px', '14px', '15px', '16px'];
+/** Each face as the stack it reads: the theme's own, `code` its monospace (`fonts.code`, else the platform's). */
+export const TYPE_FACES = {
+    ui: 'var(--sans)',
+    heading: 'var(--heading-font, var(--sans))',
+    data: 'var(--mono)',
+    code: 'var(--code)',
+};
+const CASES = ['none', 'upper', 'small-caps'];
+/** What the data face may set: every value, or only the figures, keys and dates. */
+const TYPE_REACHES = ['values', 'figures'];
+/** The features `font-variant-numeric` says; the rest are `font-feature-settings`. */
+const NUMERIC = { lnum: 'lining-nums', onum: 'oldstyle-nums', tnum: 'tabular-nums', zero: 'slashed-zero' };
+const FEATURE = /^(?:tnum|lnum|onum|zero|case|ss(?:0[1-9]|1\d|20)|cv(?:0[1-9]|[1-9]\d))$/;
+const TRACKING = /^(-?)(0|0?\.\d{1,3})em$/;
+/** The size tokens the sheets already read: the title's, the display step's. */
+const SIZE_TOKENS = { title: '--type-record-title', display: '--type-display' };
+/** The spellings type roles replaced, each with where it went (a clean break: the old key is refused). */
+export const TYPE_MOVED = {
+    'type.scale': "type.roles.title.size: '22px', '26px', '28px' or '30px' (compact, default, large, roomy)",
+    'type.headingWeight': "type.roles.title.weight (a list's heading takes it too, unless type.roles.heading.weight says its own)",
+    'recipes.labels': "type.roles.label: { face: 'code', case: 'upper' } for mono-caps, { case: 'small-caps' } for small-caps",
+    'recipes.headings': "type.roles.section: { case: 'upper', size: '12px' } for caps, { case: 'small-caps' } for small-caps",
+    'recipes.figures': "type.roles.figure: { face: 'code', weight: 700 } for mono, { face: 'heading', weight: 600, features: ['lnum'] } for book",
+};
+const record = (raw, where) => {
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw))
+        throw new Error(`${where} must be an object.`);
+    return raw;
+};
+const px = (value) => {
+    const match = typeof value === 'string' ? /^(\d{1,2}(?:\.\d)?)px$/.exec(value) : null;
+    return match ? Number(match[1]) : undefined;
+};
+/** `type.base` and `type.roles` checked; anything else in `type` is the caller's. */
+export function typeOf(base, roles, where) {
+    const out = {};
+    if (base !== undefined) {
+        if (!TYPE_BASES.includes(base))
+            throw new Error(`${where}.base must be one of ${TYPE_BASES.join(', ')}.`);
+        out.base = base;
+    }
+    if (roles === undefined)
+        return out;
+    const value = record(roles, `${where}.roles`);
+    out.roles = {};
+    for (const [name, raw] of Object.entries(value)) {
+        const rule = TYPE_ROLES[name];
+        if (!Object.hasOwn(TYPE_ROLES, name) || !rule)
+            throw new Error(`${where}.roles has no "${name}". The roles are: ${TYPE_ROLE_NAMES.join(', ')}.`);
+        out.roles[name] = roleOf(raw, rule, `${where}.roles.${name}`);
+    }
+    return out;
+}
+function roleOf(raw, rule, where) {
+    const value = record(raw, where);
+    for (const key of Object.keys(value))
+        if (!rule.takes.includes(key))
+            throw new Error(`${where} has no "${key}". It takes: ${rule.takes.join(', ')}.` +
+                (key === 'size' ? ' Its size is the base (type.base), so it grows with every other size.' : ''));
+    const out = {};
+    if (value.face !== undefined) {
+        /* Renamed before 1.0: the monospace face is `code`, the word a display rule and `fonts.code` say. */
+        if (value.face === 'mono')
+            throw new Error(`${where}.face "mono" is now "code": the theme's monospace (fonts.code).`);
+        if (!Object.hasOwn(TYPE_FACES, value.face))
+            throw new Error(`${where}.face must be one of ${Object.keys(TYPE_FACES).join(', ')}.`);
+        out.face = value.face;
+    }
+    if (value.size !== undefined) {
+        const size = px(value.size), [low, high] = rule.size;
+        if (size === undefined || size < low || size > high)
+            throw new Error(`${where}.size must be a length from ${low}px to ${high}px.`);
+        out.size = value.size;
+    }
+    if (value.leading !== undefined) {
+        const [low, high] = rule.leading;
+        if (typeof value.leading !== 'number' || !(value.leading >= low && value.leading <= high))
+            throw new Error(`${where}.leading must be a number from ${low} to ${high}.`);
+        out.leading = value.leading;
+    }
+    if (value.tracking !== undefined) {
+        const match = typeof value.tracking === 'string' ? TRACKING.exec(value.tracking) : null;
+        const amount = match ? Number(match[2]) * (match[1] ? -1 : 1) : NaN;
+        if (!(amount >= -0.03 && amount <= 0.15))
+            throw new Error(`${where}.tracking must be a length from -0.03em to 0.15em.`);
+        out.tracking = value.tracking;
+    }
+    if (value.weight !== undefined) {
+        if (!rule.weights.includes(value.weight))
+            throw new Error(`${where}.weight must be one of ${rule.weights.join(', ')}.`);
+        out.weight = value.weight;
+    }
+    if (value.case !== undefined) {
+        if (!CASES.includes(value.case))
+            throw new Error(`${where}.case must be one of ${CASES.join(', ')}.`);
+        out.case = value.case;
+    }
+    if (value.reach !== undefined) {
+        if (!TYPE_REACHES.includes(value.reach))
+            throw new Error(`${where}.reach must be values (every value in the data face) or figures (only figures, keys and dates).`);
+        out.reach = value.reach;
+    }
+    if (value.features !== undefined) {
+        const features = value.features;
+        if (!Array.isArray(features) || features.length > 8 || new Set(features).size !== features.length)
+            throw new Error(`${where}.features must be at most eight different features.`);
+        for (const feature of features)
+            if (typeof feature !== 'string' || !FEATURE.test(feature))
+                throw new Error(`${where}.features takes tnum, lnum, onum, zero, case, ss01 to ss20 and cv01 to cv99; "${String(feature)}" is not one.`);
+        out.features = [...features];
+    }
+    return out;
+}
+/** A theme's type over its base look's: the theme's base, and each role's properties over the look's own. */
+export function mergeType(under, over) {
+    if (!under && !over)
+        return undefined;
+    const roles = {};
+    for (const name of TYPE_ROLE_NAMES) {
+        const role = { ...under?.roles?.[name], ...over?.roles?.[name] };
+        if (Object.keys(role).length)
+            roles[name] = role;
+    }
+    const base = over?.base ?? under?.base;
+    return { ...(base ? { base } : {}), ...(Object.keys(roles).length ? { roles } : {}) };
+}
+const sized = (length) => `calc(${length} * var(--type-k))`;
+/** The custom properties a theme's type is worn as. A title's weight is not here: it is `--heading-weight`, which
+    every heading reads (headingWeight). */
+export function typeTokens(type) {
+    const out = {};
+    if (type?.base && type.base !== '13px')
+        out['--type-k'] = `calc(${parseFloat(type.base)} / 13)`;
+    for (const name of TYPE_ROLE_NAMES) {
+        const role = type?.roles?.[name];
+        if (!role)
+            continue;
+        const token = (property) => `--type-${name}-${property}`;
+        if (role.face)
+            out[token('font')] = TYPE_FACES[role.face];
+        if (role.size)
+            out[SIZE_TOKENS[name] ?? token('size')] = sized(role.size);
+        if (role.leading !== undefined)
+            out[token('leading')] = String(role.leading);
+        if (role.tracking)
+            out[token('tracking')] = role.tracking;
+        if (role.weight !== undefined && name !== 'title')
+            out[token('weight')] = String(role.weight);
+        const numeric = numericOf(name, role.features);
+        if (numeric)
+            out[token('numeric')] = numeric;
+        const settings = (role.features ?? []).filter((feature) => !NUMERIC[feature]);
+        if (settings.length)
+            out[token('features')] = settings.map((feature) => `"${feature}"`).join(', ');
+    }
+    return out;
+}
+/** A role's figures as `font-variant-numeric`, tabular kept where the role's figures line up in columns. */
+function numericOf(role, features) {
+    const named = (features ?? []).filter((feature) => NUMERIC[feature]);
+    if (!named.length)
+        return undefined;
+    if ((role === 'data' || role === 'figure') && !named.includes('tnum'))
+        named.push('tnum');
+    /* In the order the property's own value is written, so what the page computes is what is said. */
+    return ['lnum', 'onum', 'tnum', 'zero']
+        .filter((feature) => named.includes(feature))
+        .map((feature) => NUMERIC[feature])
+        .join(' ');
+}

package/dist/shared/unitWord.d.ts

@@ -0,0 +1,4 @@
+/** The singular of a word written in the plural ("days", "tickets"), or undefined where the word is not a plural
+    the rule can read: an abbreviation, a word whose own "s" ends it, a word already singular. */
+export declare function singularOf(word: string): string | undefined;
+export declare function unitWord(figure: string, unit: string): string;

package/dist/shared/unitWord.js

@@ -0,0 +1,37 @@
+/**
+ * A display unit as it is said beside a figure. An App writes a unit plural
+ * (`{ unit: 'days' }`, `{ unit: 'bikes' }`), and one of them is said
+ * singular: "1 day" and "1 bike", never "1 days" or "1 bikes". Shared, so a
+ * public page the server draws says what the client says
+ * (http/publicPage.ts, components/valueModel.ts).
+ *
+ * An abbreviation keeps its spelling ("1 lbs", "1 pcs", "1 hrs"): it has no
+ * vowel, or is too short to be a word. A unit that is not one plain word
+ * ("kWh", "m²", "per day") is said as written.
+ */
+const ONE = /^[-−]?1$/;
+const TIME_PLURAL = /^(second|minute|hour|day|night|week|month|year)s$/i;
+/* A plain plural: four letters or more, a vowel before its ending, and an "s" that is not a word's own ("glass", "bus", "basis"). */
+const PLURAL = /^(?=[a-z]*[aeiouy][a-z]*s$)[a-z]{3,}s$/i;
+/** The singular of a regular English plural: batteries → battery, boxes → box, bikes → bike. */
+function singular(unit) {
+    if (/[^aeiou]ies$/i.test(unit))
+        return `${unit.slice(0, -3)}${unit.at(-3) === 'I' ? 'Y' : 'y'}`;
+    if (/(x|ch|sh|ss|z)es$/i.test(unit))
+        return unit.slice(0, -2);
+    return unit.slice(0, -1);
+}
+/** The singular of a word written in the plural ("days", "tickets"), or undefined where the word is not a plural
+    the rule can read: an abbreviation, a word whose own "s" ends it, a word already singular. */
+export function singularOf(word) {
+    if (TIME_PLURAL.test(word))
+        return word.slice(0, -1);
+    if (PLURAL.test(word) && !/(ss|us|is)$/i.test(word) && /[aeiouy]/i.test(word.slice(0, -1)))
+        return singular(word);
+    return undefined;
+}
+export function unitWord(figure, unit) {
+    if (!ONE.test(figure))
+        return unit;
+    return singularOf(unit) ?? unit;
+}