@fieldia/viewer 0.9.2 → 0.11.0

package/src/lib/locales/fr.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fr = void 0;
+/** The viewer’s own words in French. */
+exports.fr = {
+    save: 'Enregistrer',
+    edit: 'Modifier',
+    done: 'Terminé',
+    discard: 'Annuler les modifications',
+    saving: 'Enregistrement…',
+    saved: 'Enregistré',
+    submit: 'Envoyer',
+    next: 'Suivant',
+    back: 'Retour',
+    skip: 'Passer',
+    steps: 'Étapes',
+    stepOf: 'Étape {n} sur {total}',
+    submitted: 'Merci. Vos réponses ont été envoyées.',
+    submitAnother: 'Envoyer une autre réponse',
+    draftFound: 'Vous avez des réponses non enregistrées du {time}.',
+    restore: 'Restaurer',
+    discardDraft: 'Ignorer',
+    ok: 'OK',
+    cancel: 'Annuler',
+    loading: 'Chargement…',
+    saveClose: 'Enregistrer et fermer',
+    close: 'Fermer',
+    discardChanges: 'Abandonner vos modifications ?',
+    dismiss: 'Masquer',
+    retry: 'Réessayer',
+    notSaved: 'Non enregistré',
+    notSent: 'Non envoyé',
+    checkFields: '{what}. À vérifier : {fields}',
+    offline: 'Le serveur est injoignable. Vos modifications sont toujours là.',
+    previousPage: 'Page précédente',
+    nextPage: 'Page suivante',
+    range: '{from}–{to} / {total}',
+    selected: '{n} sélectionné(s)',
+    clearSelection: 'Désélectionner',
+    selectAll: 'Tout sélectionner',
+    selectRecord: 'Sélectionner {name}',
+    noRecords: 'Aucun enregistrement ne correspond.',
+    loadFailed: 'Impossible de charger les enregistrements.',
+    search: 'Rechercher…',
+    searchLabel: 'Rechercher',
+    searchFor: 'Rechercher {field} : {text}',
+    searchOptions: 'Options de recherche',
+    filters: 'Filtres',
+    groupBy: 'Regrouper par',
+    favourites: 'Favoris',
+    or: 'ou',
+    removeFacet: 'Retirer {label}',
+    addCustomFilter: 'Ajouter un filtre personnalisé',
+    field: 'Champ',
+    condition: 'Condition',
+    value: 'Valeur',
+    apply: 'Appliquer',
+    saveSearch: 'Enregistrer la recherche',
+    searchName: 'Nom de la recherche',
+    useByDefault: 'Utiliser par défaut',
+    deleteFavourite: 'Supprimer {name}',
+    noFavourites: 'Aucune recherche enregistrée.',
+    opIs: 'est',
+    opIsNot: 'n’est pas',
+    opContains: 'contient',
+    opGreater: 'supérieur à',
+    opLess: 'inférieur à',
+    opSet: 'est défini',
+    opNotSet: 'n’est pas défini',
+    yes: 'Oui',
+    no: 'Non',
+    none: 'Aucun',
+    loadMore: 'Afficher {n} de plus',
+    formMissing: 'Le formulaire enregistré « {page} » est introuvable.',
+    formInItself: 'Le formulaire enregistré « {page} » n’est pas affiché ici : il serait placé dans lui-même ({chain}).',
+    formNotPlaceable: 'Le formulaire enregistré « {page} » ne peut pas être placé ici : seul un formulaire de sections ou d’onglets le peut.',
+    formBroken: 'Le formulaire enregistré « {page} » ne peut pas être affiché.',
+    pageMissing: 'La page « {page} » est introuvable.',
+};
+//# sourceMappingURL=fr.js.map

package/src/lib/locales/fr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../../../../libs/viewer/src/lib/locales/fr.ts"],"names":[],"mappings":";;;AAEA,wCAAwC;AAC3B,QAAA,EAAE,GAAiB;IAC9B,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,2BAA2B;IACpC,MAAM,EAAE,iBAAiB;IACzB,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,uBAAuB;IAC/B,SAAS,EAAE,uCAAuC;IAClD,aAAa,EAAE,2BAA2B;IAC1C,UAAU,EAAE,oDAAoD;IAChE,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,SAAS;IACvB,EAAE,EAAE,IAAI;IACR,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,aAAa;IACtB,SAAS,EAAE,uBAAuB;IAClC,KAAK,EAAE,QAAQ;IACf,cAAc,EAAE,gCAAgC;IAChD,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,WAAW;IAClB,QAAQ,EAAE,gBAAgB;IAC1B,OAAO,EAAE,YAAY;IACrB,WAAW,EAAE,+BAA+B;IAC5C,OAAO,EAAE,iEAAiE;IAC1E,YAAY,EAAE,iBAAiB;IAC/B,QAAQ,EAAE,eAAe;IACzB,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,oBAAoB;IAC9B,cAAc,EAAE,gBAAgB;IAChC,SAAS,EAAE,mBAAmB;IAC9B,YAAY,EAAE,qBAAqB;IACnC,SAAS,EAAE,qCAAqC;IAChD,UAAU,EAAE,4CAA4C;IACxD,MAAM,EAAE,aAAa;IACrB,WAAW,EAAE,YAAY;IACzB,SAAS,EAAE,6BAA6B;IACxC,aAAa,EAAE,sBAAsB;IACrC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,eAAe;IACxB,UAAU,EAAE,SAAS;IACrB,EAAE,EAAE,IAAI;IACR,WAAW,EAAE,iBAAiB;IAC9B,eAAe,EAAE,gCAAgC;IACjD,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,WAAW;IAClB,UAAU,EAAE,0BAA0B;IACtC,UAAU,EAAE,qBAAqB;IACjC,YAAY,EAAE,qBAAqB;IACnC,eAAe,EAAE,kBAAkB;IACnC,YAAY,EAAE,+BAA+B;IAC7C,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,WAAW;IACpB,UAAU,EAAE,UAAU;IACtB,SAAS,EAAE,aAAa;IACxB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,kBAAkB;IAC5B,GAAG,EAAE,KAAK;IACV,EAAE,EAAE,KAAK;IACT,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,sBAAsB;IAChC,WAAW,EAAE,sDAAsD;IACnE,YAAY,EAAE,sGAAsG;IACpH,gBAAgB,EAAE,uHAAuH;IACzI,UAAU,EAAE,+DAA+D;IAC3E,WAAW,EAAE,qCAAqC;CACnD,CAAC"}

package/src/lib/locales/fr.mjs

@@ -0,0 +1,77 @@
+/** The viewer’s own words in French. */
+export const fr = {
+    save: 'Enregistrer',
+    edit: 'Modifier',
+    done: 'Terminé',
+    discard: 'Annuler les modifications',
+    saving: 'Enregistrement…',
+    saved: 'Enregistré',
+    submit: 'Envoyer',
+    next: 'Suivant',
+    back: 'Retour',
+    skip: 'Passer',
+    steps: 'Étapes',
+    stepOf: 'Étape {n} sur {total}',
+    submitted: 'Merci. Vos réponses ont été envoyées.',
+    submitAnother: 'Envoyer une autre réponse',
+    draftFound: 'Vous avez des réponses non enregistrées du {time}.',
+    restore: 'Restaurer',
+    discardDraft: 'Ignorer',
+    ok: 'OK',
+    cancel: 'Annuler',
+    loading: 'Chargement…',
+    saveClose: 'Enregistrer et fermer',
+    close: 'Fermer',
+    discardChanges: 'Abandonner vos modifications ?',
+    dismiss: 'Masquer',
+    retry: 'Réessayer',
+    notSaved: 'Non enregistré',
+    notSent: 'Non envoyé',
+    checkFields: '{what}. À vérifier : {fields}',
+    offline: 'Le serveur est injoignable. Vos modifications sont toujours là.',
+    previousPage: 'Page précédente',
+    nextPage: 'Page suivante',
+    range: '{from}–{to} / {total}',
+    selected: '{n} sélectionné(s)',
+    clearSelection: 'Désélectionner',
+    selectAll: 'Tout sélectionner',
+    selectRecord: 'Sélectionner {name}',
+    noRecords: 'Aucun enregistrement ne correspond.',
+    loadFailed: 'Impossible de charger les enregistrements.',
+    search: 'Rechercher…',
+    searchLabel: 'Rechercher',
+    searchFor: 'Rechercher {field} : {text}',
+    searchOptions: 'Options de recherche',
+    filters: 'Filtres',
+    groupBy: 'Regrouper par',
+    favourites: 'Favoris',
+    or: 'ou',
+    removeFacet: 'Retirer {label}',
+    addCustomFilter: 'Ajouter un filtre personnalisé',
+    field: 'Champ',
+    condition: 'Condition',
+    value: 'Valeur',
+    apply: 'Appliquer',
+    saveSearch: 'Enregistrer la recherche',
+    searchName: 'Nom de la recherche',
+    useByDefault: 'Utiliser par défaut',
+    deleteFavourite: 'Supprimer {name}',
+    noFavourites: 'Aucune recherche enregistrée.',
+    opIs: 'est',
+    opIsNot: 'n’est pas',
+    opContains: 'contient',
+    opGreater: 'supérieur à',
+    opLess: 'inférieur à',
+    opSet: 'est défini',
+    opNotSet: 'n’est pas défini',
+    yes: 'Oui',
+    no: 'Non',
+    none: 'Aucun',
+    loadMore: 'Afficher {n} de plus',
+    formMissing: 'Le formulaire enregistré « {page} » est introuvable.',
+    formInItself: 'Le formulaire enregistré « {page} » n’est pas affiché ici : il serait placé dans lui-même ({chain}).',
+    formNotPlaceable: 'Le formulaire enregistré « {page} » ne peut pas être placé ici : seul un formulaire de sections ou d’onglets le peut.',
+    formBroken: 'Le formulaire enregistré « {page} » ne peut pas être affiché.',
+    pageMissing: 'La page « {page} » est introuvable.',
+};
+//# sourceMappingURL=fr.mjs.map

package/src/lib/locales/fr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fr.mjs","sourceRoot":"","sources":["../../../../../../libs/viewer/src/lib/locales/fr.ts"],"names":[],"mappings":"AAEA,wCAAwC;AACxC,MAAM,CAAC,MAAM,EAAE,GAAiB;IAC9B,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,2BAA2B;IACpC,MAAM,EAAE,iBAAiB;IACzB,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,uBAAuB;IAC/B,SAAS,EAAE,uCAAuC;IAClD,aAAa,EAAE,2BAA2B;IAC1C,UAAU,EAAE,oDAAoD;IAChE,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,SAAS;IACvB,EAAE,EAAE,IAAI;IACR,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,aAAa;IACtB,SAAS,EAAE,uBAAuB;IAClC,KAAK,EAAE,QAAQ;IACf,cAAc,EAAE,gCAAgC;IAChD,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,WAAW;IAClB,QAAQ,EAAE,gBAAgB;IAC1B,OAAO,EAAE,YAAY;IACrB,WAAW,EAAE,+BAA+B;IAC5C,OAAO,EAAE,iEAAiE;IAC1E,YAAY,EAAE,iBAAiB;IAC/B,QAAQ,EAAE,eAAe;IACzB,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,oBAAoB;IAC9B,cAAc,EAAE,gBAAgB;IAChC,SAAS,EAAE,mBAAmB;IAC9B,YAAY,EAAE,qBAAqB;IACnC,SAAS,EAAE,qCAAqC;IAChD,UAAU,EAAE,4CAA4C;IACxD,MAAM,EAAE,aAAa;IACrB,WAAW,EAAE,YAAY;IACzB,SAAS,EAAE,6BAA6B;IACxC,aAAa,EAAE,sBAAsB;IACrC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,eAAe;IACxB,UAAU,EAAE,SAAS;IACrB,EAAE,EAAE,IAAI;IACR,WAAW,EAAE,iBAAiB;IAC9B,eAAe,EAAE,gCAAgC;IACjD,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,WAAW;IAClB,UAAU,EAAE,0BAA0B;IACtC,UAAU,EAAE,qBAAqB;IACjC,YAAY,EAAE,qBAAqB;IACnC,eAAe,EAAE,kBAAkB;IACnC,YAAY,EAAE,+BAA+B;IAC7C,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,WAAW;IACpB,UAAU,EAAE,UAAU;IACtB,SAAS,EAAE,aAAa;IACxB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,kBAAkB;IAC5B,GAAG,EAAE,KAAK;IACV,EAAE,EAAE,KAAK;IACT,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,sBAAsB;IAChC,WAAW,EAAE,sDAAsD;IACnE,YAAY,EAAE,sGAAsG;IACpH,gBAAgB,EAAE,uHAAuH;IACzI,UAAU,EAAE,+DAA+D;IAC3E,WAAW,EAAE,qCAAqC;CACnD,CAAC"}

package/src/lib/look.d.mts

@@ -0,0 +1,25 @@
+import type { PageLook } from '@fieldia/core';
+/** How well one colour reads on another: 1 (not at all) to 21 (black on white). */
+export declare function contrast(a: string, b: string): number;
+export interface AccentShades {
+    /** The accent on a light page: as the page gives it, or darkened, when it has to be, until it reads there. */
+    accent: string;
+    /** What is written on it: a primary button's words. */
+    accentText: string;
+    /** The accent on a dark page: lightened, when it has to be, until it reads there. */
+    dark: string;
+    darkText: string;
+}
+/**
+ * The accent, and what goes with it in either scheme. Each is moved, in small
+ * steps and only as far as it has to be, until words in it and on it read at
+ * 4.5:1 — darker on a light page, lighter on a dark one — on the page and on
+ * any `grounds` of its parts. The softer and hover shades are mixed from these
+ * by the stylesheet.
+ */
+export declare function accentShades(hex: string, grounds?: {
+    light: string[];
+    dark: string[];
+}): AccentShades;
+/** Put the page's look on the form's root. */
+export declare function applyLook(root: HTMLElement, look: PageLook | undefined): void;

package/src/lib/look.d.ts

@@ -0,0 +1,25 @@
+import type { PageLook } from '@fieldia/core';
+/** How well one colour reads on another: 1 (not at all) to 21 (black on white). */
+export declare function contrast(a: string, b: string): number;
+export interface AccentShades {
+    /** The accent on a light page: as the page gives it, or darkened, when it has to be, until it reads there. */
+    accent: string;
+    /** What is written on it: a primary button's words. */
+    accentText: string;
+    /** The accent on a dark page: lightened, when it has to be, until it reads there. */
+    dark: string;
+    darkText: string;
+}
+/**
+ * The accent, and what goes with it in either scheme. Each is moved, in small
+ * steps and only as far as it has to be, until words in it and on it read at
+ * 4.5:1 — darker on a light page, lighter on a dark one — on the page and on
+ * any `grounds` of its parts. The softer and hover shades are mixed from these
+ * by the stylesheet.
+ */
+export declare function accentShades(hex: string, grounds?: {
+    light: string[];
+    dark: string[];
+}): AccentShades;
+/** Put the page's look on the form's root. */
+export declare function applyLook(root: HTMLElement, look: PageLook | undefined): void;

package/src/lib/look.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contrast = contrast;
+exports.accentShades = accentShades;
+exports.applyLook = applyLook;
+/**
+ * The page's look, worn by the form: what the page says about its accent,
+ * font, room, corners, labels and colour scheme becomes attributes and tokens
+ * on the form's root, and the stylesheet turns them into the form's own
+ * colours and sizes — so every widget follows, in either skin, light or dark.
+ * A look for a kind of part (text boxes, choices, groups, buttons, tables)
+ * becomes tokens of that kind, worn by it alone. A page with no look is left
+ * exactly as its skin draws it.
+ */
+/** Words written on a light accent, and on the dark page's accent. */
+const INK = '#111418';
+/** The dark scheme's surface, which the dark page's accent has to read on. */
+const DARK_SURFACE = '#1f2329';
+/** The darkest ground of a light page (the underline skin's), which the light page's accent has to read on. */
+const LIGHT_GROUND = '#f2f3f5';
+/** WCAG's contrast for normal text (1.4.3, AA): the accent is words on the page, and has words on it. */
+const READABLE = 4.5;
+const channels = (hex) => [1, 3, 5].map((at) => parseInt(hex.slice(at, at + 2), 16));
+const toHex = (rgb) => `#${rgb.map((c) => Math.round(c).toString(16).padStart(2, '0')).join('')}`;
+/** How bright a colour looks, as WCAG measures it: 0 for black, 1 for white. */
+function luminance(hex) {
+    const [r, g, b] = channels(hex).map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** How well one colour reads on another: 1 (not at all) to 21 (black on white). */
+function contrast(a, b) {
+    const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (light + 0.05) / (dark + 0.05);
+}
+/** White on a colour, as buttons are usually written; ink where white would read poorly. */
+const textOn = (hex) => (contrast(hex, '#ffffff') >= READABLE ? '#ffffff' : INK);
+/** On a dark page the accent is light: whichever of ink or white reads better on it. */
+const textOnDark = (hex) => (contrast(hex, INK) >= contrast(hex, '#ffffff') ? INK : '#ffffff');
+/** A colour taken towards another by `amount` (0 to 1). */
+const towards = (hex, to, amount) => toHex(channels(hex).map((c, i) => c + (channels(to)[i] - c) * amount));
+/** The accent's softer shade on a surface, as the stylesheet mixes it: 12% of the accent. */
+const softOn = (hex, surface) => towards(surface, hex, 0.12);
+/** Reads as words on a surface, on the lightest ground there, and on its own softer shade (a picked tab, a chip). */
+const readsOn = (hex, grounds) => [...grounds, softOn(hex, grounds[0])].every((ground) => contrast(hex, ground) >= READABLE);
+/** A colour moved towards `to` in small steps, only as far as it has to be, until it `reads`; at worst it is `to`. */
+function moved(hex, to, reads) {
+    let colour = hex;
+    for (let step = 1; step <= 40 && !reads(colour); step++)
+        colour = towards(hex, to, step / 40);
+    return colour;
+}
+/**
+ * The accent, and what goes with it in either scheme. Each is moved, in small
+ * steps and only as far as it has to be, until words in it and on it read at
+ * 4.5:1 — darker on a light page, lighter on a dark one — on the page and on
+ * any `grounds` of its parts. The softer and hover shades are mixed from these
+ * by the stylesheet.
+ */
+function accentShades(hex, grounds = { light: [], dark: [] }) {
+    const given = hex.toLowerCase();
+    const accent = moved(given, '#000000', (colour) => readsOn(colour, ['#ffffff', LIGHT_GROUND, ...grounds.light]));
+    const dark = moved(given, '#ffffff', (colour) => readsOn(colour, [DARK_SURFACE, ...grounds.dark]));
+    return { accent, accentText: textOn(accent), dark, darkText: textOnDark(dark) };
+}
+/** Each scheme's words that every ground of a part must keep readable: its text, muted words and errors. */
+const LIGHT_WORDS = ['#212529', '#636976', '#c63c3d'];
+const DARK_WORDS = ['#e8eaed', '#a3a9b2', '#ff8a7a'];
+/** The skins' own accent where the page names none: outlined's, the lighter of the two, which has the most to read on. */
+const SKIN_ACCENT = { accent: '#1365d9', dark: '#5aa2ff' };
+/** What a part's settings are called on the form, `data-inputs="bg radius"`, and in its tokens, `--fd-inputs-bg`. */
+const NAMES = { background: 'bg', border: 'border', corners: 'radius', textSize: 'size', accent: 'accent' };
+const SIZES = { small: '13px', large: '16px' };
+/** The corners of a box, and of a group, in pixels: the page's own (`data-corners`) for each. */
+const RADII = { square: [0, 0], soft: [6, 10], round: [12, 16] };
+/**
+ * A look for each kind of part, as its own tokens on the form, each worked out
+ * for the page's scheme (both, for auto, as `light-dark()`): a ground moved
+ * until the page's words and accent read on it — lighter on a light page,
+ * towards the dark surface on a dark one; an accent moved until words in it
+ * and on it read, on the page and on every ground given; an edge as given.
+ */
+function applyParts(root, look) {
+    const wear = (light, dark) => (look.scheme === 'dark' ? dark : look.scheme === 'auto' ? `light-dark(${light}, ${dark})` : light);
+    const page = look.accent ? accentShades(look.accent) : SKIN_ACCENT;
+    const parts = Object.entries(look.parts ?? {});
+    const set = (kind, name, value) => root.style.setProperty(`--fd-${kind}-${name}`, value);
+    // The grounds first: every accent has to read on each of them.
+    const grounds = { light: [], dark: [] };
+    const readsAll = (words) => (colour) => words.every((word) => contrast(word, colour) >= READABLE);
+    for (const [kind, part] of parts) {
+        const given = part.background?.toLowerCase();
+        if (!given)
+            continue;
+        const light = moved(given, '#ffffff', readsAll([...LIGHT_WORDS, page.accent]));
+        const dark = moved(given, DARK_SURFACE, readsAll([...DARK_WORDS, page.dark]));
+        grounds.light.push(light);
+        grounds.dark.push(dark);
+        set(kind, 'bg', wear(light, dark));
+    }
+    for (const [kind, part] of parts) {
+        const names = Object.keys(NAMES).filter((name) => part[name]).map((name) => NAMES[name]);
+        if (names.length)
+            root.setAttribute(`data-${kind}`, names.join(' '));
+        if (part.border)
+            set(kind, 'border', part.border);
+        if (part.corners)
+            set(kind, 'radius', `${RADII[part.corners][kind === 'groups' ? 1 : 0]}px`);
+        if (part.textSize)
+            set(kind, 'size', SIZES[part.textSize]);
+        if (part.accent) {
+            const shades = accentShades(part.accent, grounds);
+            set(kind, 'accent', wear(shades.accent, shades.dark));
+            set(kind, 'accent-text', wear(shades.accentText, shades.darkText));
+        }
+    }
+}
+/** Put the page's look on the form's root. */
+function applyLook(root, look) {
+    if (!look)
+        return;
+    for (const name of ['font', 'density', 'corners', 'scheme']) {
+        const value = look[name];
+        if (value)
+            root.setAttribute(`data-${name}`, value);
+    }
+    if (look.labelWidth)
+        root.style.setProperty('--fd-label-width', `${look.labelWidth}px`);
+    if (look.accent) {
+        const shades = accentShades(look.accent);
+        root.setAttribute('data-accent', '');
+        root.style.setProperty('--fd-look-accent', shades.accent);
+        root.style.setProperty('--fd-look-accent-text', shades.accentText);
+        root.style.setProperty('--fd-look-accent-dark', shades.dark);
+        root.style.setProperty('--fd-look-accent-dark-text', shades.darkText);
+    }
+    applyParts(root, look);
+}
+//# sourceMappingURL=look.js.map

package/src/lib/look.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"look.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/look.ts"],"names":[],"mappings":"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"}

package/src/lib/look.mjs

@@ -0,0 +1,136 @@
+/**
+ * The page's look, worn by the form: what the page says about its accent,
+ * font, room, corners, labels and colour scheme becomes attributes and tokens
+ * on the form's root, and the stylesheet turns them into the form's own
+ * colours and sizes — so every widget follows, in either skin, light or dark.
+ * A look for a kind of part (text boxes, choices, groups, buttons, tables)
+ * becomes tokens of that kind, worn by it alone. A page with no look is left
+ * exactly as its skin draws it.
+ */
+/** Words written on a light accent, and on the dark page's accent. */
+const INK = '#111418';
+/** The dark scheme's surface, which the dark page's accent has to read on. */
+const DARK_SURFACE = '#1f2329';
+/** The darkest ground of a light page (the underline skin's), which the light page's accent has to read on. */
+const LIGHT_GROUND = '#f2f3f5';
+/** WCAG's contrast for normal text (1.4.3, AA): the accent is words on the page, and has words on it. */
+const READABLE = 4.5;
+const channels = (hex) => [1, 3, 5].map((at) => parseInt(hex.slice(at, at + 2), 16));
+const toHex = (rgb) => `#${rgb.map((c) => Math.round(c).toString(16).padStart(2, '0')).join('')}`;
+/** How bright a colour looks, as WCAG measures it: 0 for black, 1 for white. */
+function luminance(hex) {
+    const [r, g, b] = channels(hex).map((c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** How well one colour reads on another: 1 (not at all) to 21 (black on white). */
+export function contrast(a, b) {
+    const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (light + 0.05) / (dark + 0.05);
+}
+/** White on a colour, as buttons are usually written; ink where white would read poorly. */
+const textOn = (hex) => (contrast(hex, '#ffffff') >= READABLE ? '#ffffff' : INK);
+/** On a dark page the accent is light: whichever of ink or white reads better on it. */
+const textOnDark = (hex) => (contrast(hex, INK) >= contrast(hex, '#ffffff') ? INK : '#ffffff');
+/** A colour taken towards another by `amount` (0 to 1). */
+const towards = (hex, to, amount) => toHex(channels(hex).map((c, i) => c + (channels(to)[i] - c) * amount));
+/** The accent's softer shade on a surface, as the stylesheet mixes it: 12% of the accent. */
+const softOn = (hex, surface) => towards(surface, hex, 0.12);
+/** Reads as words on a surface, on the lightest ground there, and on its own softer shade (a picked tab, a chip). */
+const readsOn = (hex, grounds) => [...grounds, softOn(hex, grounds[0])].every((ground) => contrast(hex, ground) >= READABLE);
+/** A colour moved towards `to` in small steps, only as far as it has to be, until it `reads`; at worst it is `to`. */
+function moved(hex, to, reads) {
+    let colour = hex;
+    for (let step = 1; step <= 40 && !reads(colour); step++)
+        colour = towards(hex, to, step / 40);
+    return colour;
+}
+/**
+ * The accent, and what goes with it in either scheme. Each is moved, in small
+ * steps and only as far as it has to be, until words in it and on it read at
+ * 4.5:1 — darker on a light page, lighter on a dark one — on the page and on
+ * any `grounds` of its parts. The softer and hover shades are mixed from these
+ * by the stylesheet.
+ */
+export function accentShades(hex, grounds = { light: [], dark: [] }) {
+    const given = hex.toLowerCase();
+    const accent = moved(given, '#000000', (colour) => readsOn(colour, ['#ffffff', LIGHT_GROUND, ...grounds.light]));
+    const dark = moved(given, '#ffffff', (colour) => readsOn(colour, [DARK_SURFACE, ...grounds.dark]));
+    return { accent, accentText: textOn(accent), dark, darkText: textOnDark(dark) };
+}
+/** Each scheme's words that every ground of a part must keep readable: its text, muted words and errors. */
+const LIGHT_WORDS = ['#212529', '#636976', '#c63c3d'];
+const DARK_WORDS = ['#e8eaed', '#a3a9b2', '#ff8a7a'];
+/** The skins' own accent where the page names none: outlined's, the lighter of the two, which has the most to read on. */
+const SKIN_ACCENT = { accent: '#1365d9', dark: '#5aa2ff' };
+/** What a part's settings are called on the form, `data-inputs="bg radius"`, and in its tokens, `--fd-inputs-bg`. */
+const NAMES = { background: 'bg', border: 'border', corners: 'radius', textSize: 'size', accent: 'accent' };
+const SIZES = { small: '13px', large: '16px' };
+/** The corners of a box, and of a group, in pixels: the page's own (`data-corners`) for each. */
+const RADII = { square: [0, 0], soft: [6, 10], round: [12, 16] };
+/**
+ * A look for each kind of part, as its own tokens on the form, each worked out
+ * for the page's scheme (both, for auto, as `light-dark()`): a ground moved
+ * until the page's words and accent read on it — lighter on a light page,
+ * towards the dark surface on a dark one; an accent moved until words in it
+ * and on it read, on the page and on every ground given; an edge as given.
+ */
+function applyParts(root, look) {
+    const wear = (light, dark) => (look.scheme === 'dark' ? dark : look.scheme === 'auto' ? `light-dark(${light}, ${dark})` : light);
+    const page = look.accent ? accentShades(look.accent) : SKIN_ACCENT;
+    const parts = Object.entries(look.parts ?? {});
+    const set = (kind, name, value) => root.style.setProperty(`--fd-${kind}-${name}`, value);
+    // The grounds first: every accent has to read on each of them.
+    const grounds = { light: [], dark: [] };
+    const readsAll = (words) => (colour) => words.every((word) => contrast(word, colour) >= READABLE);
+    for (const [kind, part] of parts) {
+        const given = part.background?.toLowerCase();
+        if (!given)
+            continue;
+        const light = moved(given, '#ffffff', readsAll([...LIGHT_WORDS, page.accent]));
+        const dark = moved(given, DARK_SURFACE, readsAll([...DARK_WORDS, page.dark]));
+        grounds.light.push(light);
+        grounds.dark.push(dark);
+        set(kind, 'bg', wear(light, dark));
+    }
+    for (const [kind, part] of parts) {
+        const names = Object.keys(NAMES).filter((name) => part[name]).map((name) => NAMES[name]);
+        if (names.length)
+            root.setAttribute(`data-${kind}`, names.join(' '));
+        if (part.border)
+            set(kind, 'border', part.border);
+        if (part.corners)
+            set(kind, 'radius', `${RADII[part.corners][kind === 'groups' ? 1 : 0]}px`);
+        if (part.textSize)
+            set(kind, 'size', SIZES[part.textSize]);
+        if (part.accent) {
+            const shades = accentShades(part.accent, grounds);
+            set(kind, 'accent', wear(shades.accent, shades.dark));
+            set(kind, 'accent-text', wear(shades.accentText, shades.darkText));
+        }
+    }
+}
+/** Put the page's look on the form's root. */
+export function applyLook(root, look) {
+    if (!look)
+        return;
+    for (const name of ['font', 'density', 'corners', 'scheme']) {
+        const value = look[name];
+        if (value)
+            root.setAttribute(`data-${name}`, value);
+    }
+    if (look.labelWidth)
+        root.style.setProperty('--fd-label-width', `${look.labelWidth}px`);
+    if (look.accent) {
+        const shades = accentShades(look.accent);
+        root.setAttribute('data-accent', '');
+        root.style.setProperty('--fd-look-accent', shades.accent);
+        root.style.setProperty('--fd-look-accent-text', shades.accentText);
+        root.style.setProperty('--fd-look-accent-dark', shades.dark);
+        root.style.setProperty('--fd-look-accent-dark-text', shades.darkText);
+    }
+    applyParts(root, look);
+}
+//# sourceMappingURL=look.mjs.map

package/src/lib/look.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"look.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/look.ts"],"names":[],"mappings":"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"}

package/src/lib/open.d.mts

@@ -0,0 +1,24 @@
+import type { OpenRequest, OpenResult, Page } from '@fieldia/core';
+import { type ViewerOptions } from './viewer.mjs';
+/** What opening a page needs of the viewer that opens it. */
+export interface Opener {
+    options: ViewerOptions;
+    /** The element the viewer is in: a page opened in its place goes there. */
+    place: HTMLElement;
+    /** The viewer's own form element, which steps aside meanwhile. */
+    root: HTMLElement;
+    /** The page's title as the viewer shows it: in its language, through the app's translator. */
+    title(page: Page): string;
+    /** "Back", in the page's language. */
+    back: string;
+    /** Why a page cannot be opened: the app has none by that id. */
+    missing(page: string): string;
+}
+/**
+ * Open a page as a step asks, for the viewer's host: the app's own way first
+ * (`onOpen`), else found through `pages` and opened in a dialog, a side panel
+ * (from the side the step names) or this form's place — with the same data
+ * source, pages, words and look.
+ * Resolves with how it ended; the saved record named by its page's title field.
+ */
+export declare function openPage(opener: Opener, request: OpenRequest): Promise<OpenResult>;

package/src/lib/open.d.ts

@@ -0,0 +1,24 @@
+import type { OpenRequest, OpenResult, Page } from '@fieldia/core';
+import { type ViewerOptions } from './viewer';
+/** What opening a page needs of the viewer that opens it. */
+export interface Opener {
+    options: ViewerOptions;
+    /** The element the viewer is in: a page opened in its place goes there. */
+    place: HTMLElement;
+    /** The viewer's own form element, which steps aside meanwhile. */
+    root: HTMLElement;
+    /** The page's title as the viewer shows it: in its language, through the app's translator. */
+    title(page: Page): string;
+    /** "Back", in the page's language. */
+    back: string;
+    /** Why a page cannot be opened: the app has none by that id. */
+    missing(page: string): string;
+}
+/**
+ * Open a page as a step asks, for the viewer's host: the app's own way first
+ * (`onOpen`), else found through `pages` and opened in a dialog, a side panel
+ * (from the side the step names) or this form's place — with the same data
+ * source, pages, words and look.
+ * Resolves with how it ended; the saved record named by its page's title field.
+ */
+export declare function openPage(opener: Opener, request: OpenRequest): Promise<OpenResult>;