@fieldia/viewer 0.10.0 → 0.11.0

package/src/lib/look.d.ts

@@ -13,9 +13,13 @@ export interface AccentShades {
 /**
  * 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. The softer and hover
- * shades are mixed from these by the stylesheet.
+ * 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): AccentShades;
+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

@@ -8,7 +8,9 @@ exports.applyLook = applyLook;
  * 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 page with no look is left exactly as its skin draws it.
+ * 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';
@@ -37,30 +39,84 @@ function contrast(a, b) {
 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 white by `amount` (0 to 1). */
-const lighten = (hex, amount) => toHex(channels(hex).map((c) => c + (255 - c) * amount));
-/** A colour taken towards black by `amount` (0 to 1). */
-const darken = (hex, amount) => toHex(channels(hex).map((c) => c * (1 - amount)));
+/** 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) => toHex(channels(hex).map((c, i) => c * 0.12 + channels(surface)[i] * 0.88));
+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. The softer and hover
- * shades are mixed from these by the stylesheet.
+ * 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) {
+function accentShades(hex, grounds = { light: [], dark: [] }) {
     const given = hex.toLowerCase();
-    let accent = given;
-    for (let step = 1; step <= 40 && !readsOn(accent, ['#ffffff', LIGHT_GROUND]); step++)
-        accent = darken(given, step / 40);
-    let dark = given;
-    for (let step = 1; step <= 40 && !readsOn(dark, [DARK_SURFACE]); step++)
-        dark = lighten(given, step / 40);
+    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)
@@ -80,5 +136,6 @@ function applyLook(root, look) {
         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

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

package/src/lib/look.mjs

@@ -3,7 +3,9 @@
  * 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 page with no look is left exactly as its skin draws it.
+ * 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';
@@ -32,30 +34,84 @@ export function contrast(a, b) {
 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 white by `amount` (0 to 1). */
-const lighten = (hex, amount) => toHex(channels(hex).map((c) => c + (255 - c) * amount));
-/** A colour taken towards black by `amount` (0 to 1). */
-const darken = (hex, amount) => toHex(channels(hex).map((c) => c * (1 - amount)));
+/** 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) => toHex(channels(hex).map((c, i) => c * 0.12 + channels(surface)[i] * 0.88));
+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. The softer and hover
- * shades are mixed from these by the stylesheet.
+ * 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) {
+export function accentShades(hex, grounds = { light: [], dark: [] }) {
     const given = hex.toLowerCase();
-    let accent = given;
-    for (let step = 1; step <= 40 && !readsOn(accent, ['#ffffff', LIGHT_GROUND]); step++)
-        accent = darken(given, step / 40);
-    let dark = given;
-    for (let step = 1; step <= 40 && !readsOn(dark, [DARK_SURFACE]); step++)
-        dark = lighten(given, step / 40);
+    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)
@@ -75,5 +131,6 @@ export function applyLook(root, look) {
         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

@@ -1 +1 @@
-{"version":3,"file":"look.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/look.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"look.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/look.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,sEAAsE;AACtE,MAAM,GAAG,GAAG,SAAS,CAAC;AACtB,8EAA8E;AAC9E,MAAM,YAAY,GAAG,SAAS,CAAC;AAC/B,+GAA+G;AAC/G,MAAM,YAAY,GAAG,SAAS,CAAC;AAC/B,yGAAyG;AACzG,MAAM,QAAQ,GAAG,GAAG,CAAC;AAErB,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AAC7F,MAAM,KAAK,GAAG,CAAC,GAAa,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;AAE5G,gFAAgF;AAChF,SAAS,SAAS,CAAC,GAAW;IAC5B,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACxC,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QAClB,OAAO,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,IAAI,GAAG,CAAC;IACjE,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC;AAC9C,CAAC;AAED,mFAAmF;AACnF,MAAM,UAAU,QAAQ,CAAC,CAAS,EAAE,CAAS;IAC3C,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;AACxC,CAAC;AAED,4FAA4F;AAC5F,MAAM,MAAM,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AACzF,wFAAwF;AACxF,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;AAEvG,2DAA2D;AAC3D,MAAM,OAAO,GAAG,CAAC,GAAW,EAAE,EAAU,EAAE,MAAc,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;AACpI,6FAA6F;AAC7F,MAAM,MAAM,GAAG,CAAC,GAAW,EAAE,OAAe,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;AAC7E,qHAAqH;AACrH,MAAM,OAAO,GAAG,CAAC,GAAW,EAAE,OAAiB,EAAE,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC,IAAI,QAAQ,CAAC,CAAC;AAC/I,sHAAsH;AACtH,SAAS,KAAK,CAAC,GAAW,EAAE,EAAU,EAAE,KAAkC;IACxE,IAAI,MAAM,GAAG,GAAG,CAAC;IACjB,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,IAAI,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE;QAAE,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;IAC9F,OAAO,MAAM,CAAC;AAChB,CAAC;AAYD;;;;;;GAMG;AACH,MAAM,UAAU,YAAY,CAAC,GAAW,EAAE,UAA+C,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC9G,MAAM,KAAK,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC;IAChC,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjH,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,YAAY,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACnG,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;AAClF,CAAC;AAED,4GAA4G;AAC5G,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AACtD,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AACrD,0HAA0H;AAC1H,MAAM,WAAW,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;AAC3D,qHAAqH;AACrH,MAAM,KAAK,GAAmC,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;AAC5I,MAAM,KAAK,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC/C,iGAAiG;AACjG,MAAM,KAAK,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC;AAEjE;;;;;;GAMG;AACH,SAAS,UAAU,CAAC,IAAiB,EAAE,IAAc;IACnD,MAAM,IAAI,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACjJ,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IACnE,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAyB,CAAC;IACvE,MAAM,GAAG,GAAG,CAAC,IAAY,EAAE,IAAY,EAAE,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,IAAI,IAAI,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IACjH,+DAA+D;IAC/D,MAAM,OAAO,GAAG,EAAE,KAAK,EAAE,EAAc,EAAE,IAAI,EAAE,EAAc,EAAE,CAAC;IAChE,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,QAAQ,CAAC,CAAC;IACpH,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;QACjC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC;QAC7C,IAAI,CAAC,KAAK;YAAE,SAAS;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,GAAG,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC/E,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,GAAG,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC9E,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IACrC,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC;QACjC,MAAM,KAAK,GAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAwB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QACjH,IAAI,KAAK,CAAC,MAAM;YAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,IAAI,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,MAAM;YAAE,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAClD,IAAI,IAAI,CAAC,OAAO;YAAE,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC7F,IAAI,IAAI,CAAC,QAAQ;YAAE,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC3D,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAClD,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YACtD,GAAG,CAAC,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QACrE,CAAC;IACH,CAAC;AACH,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,SAAS,CAAC,IAAiB,EAAE,IAA0B;IACrE,IAAI,CAAC,IAAI;QAAE,OAAO;IAClB,KAAK,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,EAAE,CAAC;QACrE,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACzB,IAAI,KAAK;YAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IACtD,CAAC;IACD,IAAI,IAAI,CAAC,UAAU;QAAE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kBAAkB,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;IACxF,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACzC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QACrC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kBAAkB,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;QAC1D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;QACnE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QAC7D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IACxE,CAAC;IACD,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACzB,CAAC"}

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>;

package/src/lib/open.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openPage = openPage;
+const dialog_1 = require("./dialog");
+const related_1 = require("./related");
+const viewer_1 = require("./viewer");
+/**
+ * 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.
+ */
+async function openPage(opener, request) {
+    const { options } = opener;
+    const theirs = options.onOpen?.(request);
+    if (theirs)
+        return theirs;
+    const found = await (0, related_1.findPage)(options, request.version === undefined ? { id: request.page } : { id: request.page, version: request.version });
+    if (!found)
+        throw new Error(opener.missing(request.page));
+    // It wears the look of the page that opened it, unless it has one of its own.
+    const look = options.page.look;
+    const shared = {
+        ...options,
+        page: look && !found.look ? { ...found, look } : found,
+        form: undefined,
+        recordId: request.recordId ?? null,
+        values: request.values,
+        // What belongs to the page that opened it alone.
+        drafts: undefined,
+        autosave: undefined,
+        readonly: undefined,
+        editSwitch: undefined,
+        saveStatus: undefined,
+    };
+    const title = request.title ?? opener.title(found);
+    const result = request.as === 'page' ? await inPlace(opener, shared)
+        : request.as === 'panel' ? await (0, dialog_1.openFormPanel)({ ...shared, title, side: request.side })
+            : await (0, dialog_1.openFormDialog)({ ...shared, title, size: found.layout.type === 'sheet' ? 'large' : 'medium' });
+    const name = (0, related_1.nameFieldOf)(found);
+    const label = name ? result.values[name] : undefined;
+    return { ...result, ...(typeof label === 'string' && label ? { label } : {}) };
+}
+/**
+ * A page in this form's place, with Back over it. Saved or sent — once its own
+ * after-save steps have run — it gives way back to this form, as it was, and
+ * the run goes on; Back, or a `close` step inside it, returns without.
+ */
+function inPlace(opener, options) {
+    const { place, root } = opener;
+    const doc = place.ownerDocument;
+    const from = doc.activeElement;
+    return new Promise((resolve) => {
+        let done = false;
+        const end = (saved) => {
+            if (done)
+                return;
+            done = true;
+            const state = opened.form.getState();
+            opened.destroy();
+            root.hidden = false;
+            if (from?.isConnected)
+                from.focus();
+            resolve({ saved, recordId: state.recordId ?? null, values: state.values });
+        };
+        root.hidden = true;
+        const opened = (0, viewer_1.mountViewer)(place, { ...options, host: { ...options.host, close: () => end(false) } });
+        const back = doc.createElement('button');
+        back.type = 'button';
+        back.className = 'fd-button fd-button-link fd-back';
+        back.textContent = opener.back;
+        back.addEventListener('click', () => end(false));
+        opened.element.prepend(back);
+        const leave = () => void opened.form.settled().then(() => end(true));
+        opened.on('save', leave);
+        opened.on('send', leave);
+        (opened.element.querySelector(dialog_1.FIRST_FIELD) ?? back).focus();
+    });
+}
+//# sourceMappingURL=open.js.map

package/src/lib/open.js.map

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

package/src/lib/open.mjs

@@ -0,0 +1,78 @@
+import { FIRST_FIELD, openFormDialog, openFormPanel } from './dialog.mjs';
+import { findPage, nameFieldOf } from './related.mjs';
+import { mountViewer } from './viewer.mjs';
+/**
+ * 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 async function openPage(opener, request) {
+    const { options } = opener;
+    const theirs = options.onOpen?.(request);
+    if (theirs)
+        return theirs;
+    const found = await findPage(options, request.version === undefined ? { id: request.page } : { id: request.page, version: request.version });
+    if (!found)
+        throw new Error(opener.missing(request.page));
+    // It wears the look of the page that opened it, unless it has one of its own.
+    const look = options.page.look;
+    const shared = {
+        ...options,
+        page: look && !found.look ? { ...found, look } : found,
+        form: undefined,
+        recordId: request.recordId ?? null,
+        values: request.values,
+        // What belongs to the page that opened it alone.
+        drafts: undefined,
+        autosave: undefined,
+        readonly: undefined,
+        editSwitch: undefined,
+        saveStatus: undefined,
+    };
+    const title = request.title ?? opener.title(found);
+    const result = request.as === 'page' ? await inPlace(opener, shared)
+        : request.as === 'panel' ? await openFormPanel({ ...shared, title, side: request.side })
+            : await openFormDialog({ ...shared, title, size: found.layout.type === 'sheet' ? 'large' : 'medium' });
+    const name = nameFieldOf(found);
+    const label = name ? result.values[name] : undefined;
+    return { ...result, ...(typeof label === 'string' && label ? { label } : {}) };
+}
+/**
+ * A page in this form's place, with Back over it. Saved or sent — once its own
+ * after-save steps have run — it gives way back to this form, as it was, and
+ * the run goes on; Back, or a `close` step inside it, returns without.
+ */
+function inPlace(opener, options) {
+    const { place, root } = opener;
+    const doc = place.ownerDocument;
+    const from = doc.activeElement;
+    return new Promise((resolve) => {
+        let done = false;
+        const end = (saved) => {
+            if (done)
+                return;
+            done = true;
+            const state = opened.form.getState();
+            opened.destroy();
+            root.hidden = false;
+            if (from?.isConnected)
+                from.focus();
+            resolve({ saved, recordId: state.recordId ?? null, values: state.values });
+        };
+        root.hidden = true;
+        const opened = mountViewer(place, { ...options, host: { ...options.host, close: () => end(false) } });
+        const back = doc.createElement('button');
+        back.type = 'button';
+        back.className = 'fd-button fd-button-link fd-back';
+        back.textContent = opener.back;
+        back.addEventListener('click', () => end(false));
+        opened.element.prepend(back);
+        const leave = () => void opened.form.settled().then(() => end(true));
+        opened.on('save', leave);
+        opened.on('send', leave);
+        (opened.element.querySelector(FIRST_FIELD) ?? back).focus();
+    });
+}
+//# sourceMappingURL=open.mjs.map

package/src/lib/open.mjs.map

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

package/src/lib/related.d.mts

@@ -3,5 +3,24 @@ import type { WidgetDialogs } from '@fieldia/widgets';
 import type { ViewerOptions } from './viewer.mjs';
 /** The field a page's records are named by: its title, or "name", or its first line of text. */
 export declare function nameFieldOf(page: Page): string | null;
+/**
+ * What a part asks the app's pages for: the page for a model, to show a
+ * linked record in a dialog; or a saved page by its id — and the version it
+ * keeps to, when it keeps to one — to draw a saved form placed in another.
+ */
+export type PageRequest = {
+    model: string;
+} | {
+    id: string;
+    version?: number;
+};
+/**
+ * The app's pages: a record of them by key — a model, a page's id, or
+ * `id@version` for a version kept to — or a function asked for each, which
+ * may answer at once or with a promise.
+ */
+export type PageFinder = Record<string, Page> | ((request: PageRequest) => Page | null | undefined | Promise<Page | null | undefined>);
+/** The page the app gives for a request: from `pages`, and for a model from `relatedPages` after it. A promise when it answers later. */
+export declare function findPage(options: Pick<ViewerOptions, 'pages' | 'relatedPages'>, request: PageRequest): Page | null | Promise<Page | null>;
 /** The dialogs a page's widgets may open, made from the viewer's own options. */
 export declare function pageDialogs(options: ViewerOptions): WidgetDialogs;

package/src/lib/related.d.ts

@@ -3,5 +3,24 @@ import type { WidgetDialogs } from '@fieldia/widgets';
 import type { ViewerOptions } from './viewer';
 /** The field a page's records are named by: its title, or "name", or its first line of text. */
 export declare function nameFieldOf(page: Page): string | null;
+/**
+ * What a part asks the app's pages for: the page for a model, to show a
+ * linked record in a dialog; or a saved page by its id — and the version it
+ * keeps to, when it keeps to one — to draw a saved form placed in another.
+ */
+export type PageRequest = {
+    model: string;
+} | {
+    id: string;
+    version?: number;
+};
+/**
+ * The app's pages: a record of them by key — a model, a page's id, or
+ * `id@version` for a version kept to — or a function asked for each, which
+ * may answer at once or with a promise.
+ */
+export type PageFinder = Record<string, Page> | ((request: PageRequest) => Page | null | undefined | Promise<Page | null | undefined>);
+/** The page the app gives for a request: from `pages`, and for a model from `relatedPages` after it. A promise when it answers later. */
+export declare function findPage(options: Pick<ViewerOptions, 'pages' | 'relatedPages'>, request: PageRequest): Page | null | Promise<Page | null>;
 /** The dialogs a page's widgets may open, made from the viewer's own options. */
 export declare function pageDialogs(options: ViewerOptions): WidgetDialogs;