postext 1.49.0 → 1.50.0

package/dist/pipeline/composedLayout.js

@@ -41,7 +41,7 @@ import { chainHead, FRAME_ATTR } from '../composed/wrap';
 import { framePlaceable, nextFrameOf, groupPlaceable, placeBox, unionRect } from '../composed/geometry';
 import { composedOrder, groupOfFrames, layoutGroup } from '../composed/groups';
 import { reflowEvents } from '../composed/reflowLog';
-import { anchorTarget, repeatInstance, repeatedFrames, resolveContinueIn } from '../composed/templates';
+import { anchorTarget, lookOver, repeatInstance, repeatedFrames, resolveContinueIn } from '../composed/templates';
 import { collapsedOnAddedPage, collapseFrames, continuationTemplate, continuesCollapsed, continuesOffPage, trailingFrames } from '../composed/continuation';
 import { isModuleTemplate, resolvePageTemplate } from '../composed/templates';
 import { frameElementId } from '../composed/ids';
@@ -224,6 +224,20 @@ export function layoutComposedPage(asked) {
     };
     /** The frame's content does not fit, or it squeezes the frames after it. */
     const short = (c, name) => overflows(c, name) || squeezes(c, name);
+    /** A line of the frame holds nothing but the head of a word divided
+     *  because it was wider than the measure (#1084): a hyphenated line with
+     *  no space in it. */
+    const dividesWord = (c, name) => {
+        const ids = new Set(frameIn(c, name)?.blockIds ?? []);
+        for (const b of c.blocks) {
+            if (!ids.has(b.id))
+                continue;
+            for (const l of b.lines ?? [])
+                if (l.hyphenated && !/\s/.test(l.text.trim()))
+                    return true;
+        }
+        return false;
+    };
     /** The ladder's last step (#859): the frame is cut at its foot and the
      *  rest goes on on another page, its text and pictures back at full
      *  size (they go on anyway). */
@@ -339,10 +353,51 @@ export function layoutComposedPage(asked) {
         const min = frame.minHeight && dimensionToPx(frame.minHeight, dpi, input.emPx) > dimensionToPx(h, dpi, input.emPx) ? frame.minHeight : h;
         return { height: 'auto', minHeight: min };
     };
+    /** The frame's text may be set smaller (`fit.shrinkText`, a
+     *  `minScale` under 1) and it holds text. */
+    const textShrinks = (frame) => frame.fit.shrinkText && frame.fit.minScale < 1 && holdsText(frame);
+    /** The frame divides a word wider than its measure (#1084): a smaller
+     *  scale than the one its text has, down to `minScale`, that sets the
+     *  word whole and still fits wins; the largest such. When none does the
+     *  word stays divided: dividing is the last resort. */
+    const wordWhole = (frame) => {
+        const name = frame.name;
+        if (runs >= COMPOSE_BUDGET || !dividesWord(cur, name))
+            return;
+        const head = headOf(name);
+        const now = fit.text.get(head) ?? 1;
+        const scales = scaleSteps(frame.fit.minScale, now);
+        if (scales.length === 0)
+            return;
+        const make = (s) => withText(fit, head, s);
+        const whole = (c) => !short(c, name) && !dividesWord(c, name);
+        if (!whole(compose(make(scales[scales.length - 1]))))
+            return;
+        let lo = 0;
+        let hi = scales.length - 1; // whole at hi
+        while (lo < hi && runs < COMPOSE_BUDGET) {
+            const mid = Math.floor((lo + hi) / 2);
+            if (whole(compose(make(scales[mid]))))
+                hi = mid;
+            else
+                lo = mid + 1;
+        }
+        fit = make(scales[hi]);
+        cur = compose(fit);
+    };
     for (const frame of template.frames) {
         const name = frame.name;
-        if (!short(cur, name) || runs >= COMPOSE_BUDGET)
+        if (runs >= COMPOSE_BUDGET)
             continue;
+        if (!short(cur, name)) {
+            // A frame that fits, held to its height (a fixed one, or a
+            // `maxHeight`), may still divide a word wider than its measure
+            // (#1084): a one-line pill whose word went over two lines that its
+            // height holds. Its text is set smaller first.
+            if ((fixedHeight(frame) || frame.maxHeight) && textShrinks(frame))
+                wordWhole(frame);
+            continue;
+        }
         const steps = [];
         tried.set(name, steps);
         // 1. Free space: a fixed height grows to its maximum ('auto' heights
@@ -375,10 +430,15 @@ export function layoutComposedPage(asked) {
         };
         // 5. The frame's text (its whole story), down to fit.minScale.
         const shrinkText = () => {
-            if (!frame.fit.shrinkText || frame.fit.minScale >= 1 || !holdsText(frame))
+            if (!textShrinks(frame))
                 return false;
             steps.push('shrinkText');
-            return searchScale(scaleSteps(frame.fit.minScale), (s) => withText(fit, headOf(name), s), name);
+            const scales = scaleSteps(frame.fit.minScale);
+            const make = (s) => withText(fit, headOf(name), s);
+            if (!searchScale(scales, make, name))
+                return false;
+            wordWhole(frame);
+            return true;
         };
         // 6. Continuation on another page (`overflow.continueIn: 'next-page'`,
         //    `'template:<id>'` or `'page:<id>'`, #859). On a page added by
@@ -460,6 +520,7 @@ export function layoutComposedPage(asked) {
             templateSource: templateAttr ? { sourceStart: templateAttr.sourceStart + input.bodyOffset, sourceEnd: templateAttr.sourceEnd + input.bodyOffset } : undefined,
             budgetLeft: () => runs < COMPOSE_BUDGET,
             holdsText: holdsText(frame),
+            dividesWord,
         });
         warnings.push({
             kind: 'frameOverflow',
@@ -770,24 +831,51 @@ function overflowProposals(c) {
     const path = (key) => frame.fieldPaths[key] ?? `${frame.configPath}/${key}`;
     const fits = (next, tpl) => c.budgetLeft() && !c.overflows(c.compose(next, tpl), name);
     // More shrink: the largest text scale, in 2.5 % steps, at which it fits.
+    // When that scale divides a word wider than the frame's measure, the
+    // largest smaller one that fits with every word whole, as the ladder
+    // prefers (#1084, #1090); none, and the largest that fits, saying the
+    // word will be divided.
     const head = c.headOf(name);
     const from = frame.fit.shrinkText ? Math.min(frame.fit.minScale, vdt.scale) : 1;
     const steps = scaleSteps(PROPOSAL_MIN_SCALE, from);
-    if (c.holdsText && steps.length > 0 && fits(c.withText(fit, head, steps[steps.length - 1]))) {
-        let lo = 0;
-        let hi = steps.length - 1;
-        while (lo < hi && c.budgetLeft()) {
-            const mid = Math.floor((lo + hi) / 2);
-            if (fits(c.withText(fit, head, steps[mid])))
-                hi = mid;
+    const shrunk = (i) => c.withText(fit, head, steps[i]);
+    if (c.holdsText && steps.length > 0 && fits(shrunk(steps.length - 1))) {
+        const last = steps.length - 1;
+        /** The largest step from `lo` down at which `ok` holds, given it holds
+         *  at the last one: by bisection. */
+        const largest = (lo, ok) => {
+            let hi = last;
+            while (lo < hi && c.budgetLeft()) {
+                const mid = Math.floor((lo + hi) / 2);
+                if (ok(mid))
+                    hi = mid;
+                else
+                    lo = mid + 1;
+            }
+            return hi;
+        };
+        let at = largest(0, (i) => fits(shrunk(i)));
+        let word;
+        if (c.budgetLeft() && c.dividesWord(c.compose(shrunk(at)), name)) {
+            const whole = (i) => {
+                if (!c.budgetLeft())
+                    return false;
+                const comp = c.compose(shrunk(i));
+                return !c.overflows(comp, name) && !c.dividesWord(comp, name);
+            };
+            if (at < last && whole(last)) {
+                at = largest(at + 1, whole);
+                word = 'whole';
+            }
             else
-                lo = mid + 1;
+                word = 'divided';
         }
         out.push({
             kind: 'allowShrink',
             path: path('fit/minScale'),
-            value: steps[hi],
+            value: steps[at],
             ...(frame.fit.shrinkText ? {} : { also: [{ path: path('fit/shrinkText'), value: true }] }),
+            ...(word ? { word } : {}),
         });
     }
     // A frame that holds content (an empty one is short of its own box, #911:
@@ -931,9 +1019,19 @@ function composePage(pageInput, template, fit, collapsed) {
      *  numbered (`VDTDesignTextBlock.pageMark`). */
     const toGuess = String(input.page.index + 2);
     const fromGuess = String(Math.max(1, input.page.index));
+    /** The named look (#1089) the `:::frame` fence of a frame's story names
+     *  (`look="<id>"`), when `frameLooks` has it: the story's, so every
+     *  frame of a chain and the frames it goes on in on later pages wear it. */
+    const frameLooks = pass.resolved.frameLooks;
+    const namedLookOf = (frame) => {
+        if (!frameLooks)
+            return undefined;
+        const id = input.stories.get(headOf(frame.name))?.plan.attrs.look?.trim();
+        return id ? frameLooks.find((l) => l.id === id) : undefined;
+    };
     /** The style a frame is laid out in: its box as drawn at any text scale. */
     const styleOf = (frame) => {
-        const style = keepChromeAt(input.styleOf(frame), textScale(frame));
+        const style = keepChromeAt(input.styleOf(withNamedLook(frame, namedLookOf(frame))), textScale(frame));
         if (!fit.goOn.has(frame.name))
             return style;
         // A frame cut for another page (#859) ends with its mark: its own
@@ -1625,8 +1723,9 @@ function composePage(pageInput, template, fit, collapsed) {
                 }
             }
             else if (st && frame.style) {
-                // A styled frame with nothing (left) to hold still draws its box.
-                result = inMode(frame, () => st.L.layoutRange(st.L.end, st.L.end, laidW, blockId, true, mirroredIn(frame), { boxHeight: laidH }));
+                // A styled frame with nothing (left) to hold still draws its box;
+                // an empty story's own frame (#1084) its tab and title too.
+                result = inMode(frame, () => st.L.layoutRange(st.L.end, st.L.end, laidW, blockId, continuation, mirroredIn(frame), { boxHeight: laidH }));
             }
             // A frame cut below its least height overflows by the cut, holding
             // content or not (#911).
@@ -1807,26 +1906,102 @@ function composePage(pageInput, template, fit, collapsed) {
                     fill(prepare(f), r);
             }
         };
-        /** Lay a modules group (#1062): each module, in order, in a box as wide
-         *  as the group, from where the module before it ends (`gap` between
-         *  them), as tall as its frames. A module's frames are placed as its
-         *  template draws them in that box (`'container'` is the box) and its
-         *  groups laid in it: first in the room left, to find how tall it is
-         *  (the frames held by the box's foot or middle, or sized by its
-         *  height, left out), then in a box that tall. The group runs down its
-         *  own box, else the area. A module that does not fit is cut at the
-         *  group's foot (its frames clipped there), or, when the group goes on
-         *  to another page (`FitState.gridsOn`), it and every module after it
-         *  go on, whole. The modules' declared boxes follow each other at the
-         *  heights their frames declare, so the log tells a module moved by
-         *  the one before it. */
+        /** Lay a modules group (#1062): its modules in rows down the group's
+         *  box (its own, else the area). A stack gives each module a row of
+         *  its own, as wide as the group (or its template's `width`, #1088), a
+         *  `'row'` puts them all in one, start to end (each its `width`, else
+         *  an equal share of what is left), a `'grid'` `columns` to a row in
+         *  equal columns; a run of modules a group inside the stack takes
+         *  (`within`) is laid as that group says where its first module comes.
+         *  Rows run from the start side of the page's lines (the flow frame is
+         *  mirrored on a right-to-left page, so its left is the start). A
+         *  module is placed as its template draws its frames in its box
+         *  (`'container'` is the box) and its groups laid in it: first in the
+         *  room left, to find how tall it is (the frames held by the box's foot
+         *  or middle, or sized by its height, left out), then in a box that
+         *  tall, or (`rowAlign` `'stretch'`, a row of several) as tall as its
+         *  row. A row that does not fit is cut at the group's foot (its frames
+         *  clipped there), or, when the group goes on to another page
+         *  (`FitState.gridsOn`), it and every row after it go on, whole. The
+         *  modules' declared boxes follow each other at the heights their
+         *  frames declare, so the log tells a module moved by the one before
+         *  it. */
         const placeModules = (group, members) => {
             const byMember = new Map(members.map((f) => [f.name, f]));
             const own = groupPlaceable(group);
             const ownBox = own ? placeBox(own, template, pageInput, refOf, () => 0) : undefined;
             const box = ownBox ?? pageInput.areas.area;
             const foot = box.y + box.height;
-            const gap = dimensionToPx(group.gap, dpi, pageInput.emPx);
+            const toPx = (d) => dimensionToPx(d, dpi, pageInput.emPx);
+            const mods = [];
+            for (const item of group.items ?? []) {
+                const mod = template.modules?.find((m) => m.name === item.module);
+                const names = item.frames.filter((n) => byMember.has(n));
+                if (mod && names.length > 0)
+                    mods.push({ mod, names });
+            }
+            /** A module's width in the group by its template (`'fill'`: none). */
+            const fixedWidth = (l) => {
+                const w = l.mod.width;
+                if (w === undefined || w === 'fill')
+                    return undefined;
+                return 'percent' in w ? (box.width * w.percent) / 100 : toPx(w);
+            };
+            /** `list` side by side across the group, `gap` between them: each as
+             *  wide as its template says, the others sharing what is left. */
+            const across = (list, gap) => {
+                const fixed = list.map(fixedWidth);
+                const taken = fixed.reduce((a, w) => a + (w ?? 0), 0) + gap * Math.max(0, list.length - 1);
+                const shares = fixed.filter((w) => w === undefined).length;
+                const share = shares > 0 ? Math.max(0, box.width - taken) / shares : 0;
+                const widths = fixed.map((w) => Math.max(0, w ?? share));
+                const xs = [];
+                let x = box.x;
+                for (const w of widths) {
+                    xs.push(x);
+                    x += w + gap;
+                }
+                return { xs, widths };
+            };
+            /** The rows `list` makes in a group of `g`'s kind, the first `first`
+             *  after the row before it. */
+            const rowsOf = (list, g, first, nested) => {
+                const gap = toPx(g.gap);
+                const align = g.rowAlign ?? 'stretch';
+                const tag = nested !== undefined ? { nested } : {};
+                if (g.kind === 'row')
+                    return [{ mods: [...list], ...across(list, gap), align, gapBefore: first, ...tag }];
+                if (g.kind === 'grid') {
+                    const columns = Math.max(1, g.columns ?? 1);
+                    const colGap = toPx(g.columnGap ?? g.gap);
+                    const rowGap = toPx(g.rowGap ?? g.gap);
+                    const colW = Math.max(1, (box.width - colGap * (columns - 1)) / columns);
+                    const out = [];
+                    for (let k = 0; k < list.length; k += columns) {
+                        const chunk = list.slice(k, k + columns);
+                        out.push({ mods: chunk, xs: chunk.map((_, c) => box.x + c * (colW + colGap)), widths: chunk.map(() => colW), align, gapBefore: k === 0 ? first : rowGap, ...tag });
+                    }
+                    return out;
+                }
+                // A stack: a row of its own per module, at its width from the start.
+                return list.map((l, k) => ({ mods: [l], xs: [box.x], widths: [fixedWidth(l) ?? box.width], align: 'start', gapBefore: k === 0 ? first : gap, ...tag }));
+            };
+            const rows = [];
+            if (group.kind !== 'stack')
+                rows.push(...rowsOf(mods, group, 0));
+            else {
+                const stackGap = toPx(group.gap);
+                for (let k = 0; k < mods.length;) {
+                    const nested = mods[k].mod.nested;
+                    const inner = nested !== undefined ? template.groups.find((g) => g.name === nested) : undefined;
+                    let end = k + 1;
+                    if (inner)
+                        while (end < mods.length && mods[end].mod.nested === nested)
+                            end++;
+                    rows.push(...rowsOf(mods.slice(k, end), inner ?? group, k === 0 ? 0 : stackGap, inner ? nested : undefined));
+                    k = end;
+                }
+            }
             let cursor = box.y;
             let declCursor = box.y;
             let out = false;
@@ -1834,40 +2009,31 @@ function composePage(pageInput, template, fit, collapsed) {
             let lastLaid;
             const boxes = [];
             const declBoxes = [];
+            const nestedBoxes = new Map();
             const restore = (to, from) => {
                 to.clear();
                 for (const [k, v] of from)
                     to.set(k, v);
             };
-            for (const item of group.items ?? []) {
-                const mod = template.modules?.find((m) => m.name === item.module);
-                const names = item.frames.filter((n) => byMember.has(n));
-                if (!mod || names.length === 0)
-                    continue;
-                if (out) {
-                    spillWhole(names, laidAny, lastLaid);
-                    continue;
+            const lay = (l, x, y, width, height, filling) => {
+                const steps = composedOrder({ frames: l.names.map((n) => byMember.get(n)), groups: template.groups.filter((g) => l.mod.groups.includes(g.name)) });
+                input = { ...pageInput, areas: { ...pageInput.areas, area: { x, y, width, height: Math.max(0, height) } } };
+                try {
+                    for (const step of steps)
+                        runStep(step, filling);
                 }
-                const sub = { frames: names.map((n) => byMember.get(n)), groups: template.groups.filter((g) => mod.groups.includes(g.name)) };
-                const steps = composedOrder(sub);
-                const lay = (height, filling) => {
-                    input = { ...pageInput, areas: { ...pageInput.areas, area: { x: box.x, y: cursor, width: box.width, height: Math.max(0, height) } } };
-                    try {
-                        for (const step of steps)
-                            runStep(step, filling);
-                    }
-                    finally {
-                        input = pageInput;
-                    }
-                };
-                // 1. How tall the module is: its frames placed in the room left,
-                //    then everything they set put back.
+                finally {
+                    input = pageInput;
+                }
+            };
+            /** How tall a module is at `(x, y)`, `width` wide: its frames placed
+             *  in the room left, then everything they set put back. */
+            const measure = (l, x, y, width) => {
                 const kept = { rects: new Map(rects), declared: new Map(declared), groupRects: new Map(groupRects), groupDeclared: new Map(groupDeclared), pinned: pinned.length, boxShort: new Map(boxShort), fitted: new Map(fitted) };
-                lay(foot - cursor, false);
-                const placed = names.filter((n) => rects.has(n));
+                lay(l, x, y, width, foot - y, false);
+                const placed = l.names.filter((n) => rects.has(n));
                 const measured = placed.filter((n) => !heldByFoot(byMember.get(n)));
                 const reach = unionRect((measured.length > 0 ? measured : placed).map((n) => rects.get(n)));
-                const height = reach ? Math.max(0, reach.y + reach.height - cursor) : 0;
                 restore(rects, kept.rects);
                 restore(declared, kept.declared);
                 restore(groupRects, kept.groupRects);
@@ -1875,41 +2041,81 @@ function composePage(pageInput, template, fit, collapsed) {
                 restore(boxShort, kept.boxShort);
                 restore(fitted, kept.fitted);
                 pinned.length = kept.pinned;
-                const fits = cursor + height <= foot + 0.5;
-                if (!fits && fit.gridsOn.has(group.name)) {
-                    // This module and the ones after it go on, whole.
-                    out = true;
+                return reach ? Math.max(0, reach.y + reach.height - y) : 0;
+            };
+            rows.forEach((row, r) => {
+                const names = row.mods.flatMap((l) => l.names);
+                if (out) {
                     spillWhole(names, laidAny, lastLaid);
-                    continue;
-                }
-                // 2. The module laid in a box that tall (cut at the foot when it
-                //    does not fit).
-                clipFoot = fits ? undefined : foot;
-                try {
-                    lay(fits ? height : foot - cursor, true);
+                    return;
                 }
-                finally {
-                    clipFoot = undefined;
+                if (r > 0) {
+                    cursor += row.gapBefore;
+                    declCursor += row.gapBefore;
                 }
-                const u = unionRect(names.flatMap((n) => (rects.has(n) ? [rects.get(n)] : [])));
-                const bottom = u ? Math.max(cursor, u.y + u.height) : cursor;
-                const moduleBox = { x: box.x, y: cursor, width: box.width, height: bottom - cursor };
-                moduleRects.set(mod.name, moduleBox);
-                boxes.push(moduleBox);
-                // Declared: after the modules before it as they declare themselves.
-                const shift = declCursor - cursor;
-                for (const n of names) {
-                    const d = declared.get(n);
-                    if (d && Math.abs(shift) > 0.001)
-                        declared.set(n, { ...d, y: d.y + shift });
+                const heights = row.mods.map((l, k) => measure(l, row.xs[k], cursor, row.widths[k]));
+                const rowH = Math.max(0, ...heights);
+                const fits = cursor + rowH <= foot + 0.5;
+                if (!fits && fit.gridsOn.has(group.name)) {
+                    // This row and the ones after it go on, whole.
+                    out = true;
+                    spillWhole(names, laidAny, lastLaid);
+                    return;
                 }
-                const du = unionRect(names.flatMap((n) => (declared.has(n) ? [declared.get(n)] : [])));
-                const declBottom = du ? Math.max(declCursor, du.y + du.height) : declCursor;
-                declBoxes.push({ x: box.x, y: declCursor, width: box.width, height: declBottom - declCursor });
+                // Each module laid in a box that tall (cut at the foot when the row
+                // does not fit); a shorter one placed by `rowAlign`.
+                const several = row.mods.length > 1;
+                let rowBottom = cursor;
+                let rowDeclBottom = declCursor;
+                row.mods.forEach((l, k) => {
+                    const x = row.xs[k];
+                    const width = row.widths[k];
+                    const spare = rowH - heights[k];
+                    const stretched = fits && several && row.align === 'stretch';
+                    const dy = fits && several && spare > 0.01 ? (row.align === 'end' ? spare : row.align === 'center' ? spare / 2 : 0) : 0;
+                    const y = cursor + dy;
+                    clipFoot = fits ? undefined : foot;
+                    try {
+                        lay(l, x, y, width, fits ? (stretched ? rowH : heights[k]) : foot - cursor, true);
+                    }
+                    finally {
+                        clipFoot = undefined;
+                    }
+                    const u = unionRect(l.names.flatMap((n) => (rects.has(n) ? [rects.get(n)] : [])));
+                    const bottom = Math.max(stretched ? y + rowH : y, u ? u.y + u.height : y);
+                    const moduleBox = { x, y, width, height: bottom - y };
+                    moduleRects.set(l.mod.name, moduleBox);
+                    boxes.push(moduleBox);
+                    // Declared: after the rows before it as they declare themselves.
+                    const shift = declCursor - cursor;
+                    for (const n of l.names) {
+                        const d = declared.get(n);
+                        if (d && Math.abs(shift) > 0.001)
+                            declared.set(n, { ...d, y: d.y + shift });
+                    }
+                    const declY = declCursor + dy;
+                    const du = unionRect(l.names.flatMap((n) => (declared.has(n) ? [declared.get(n)] : [])));
+                    const declBottom = du ? Math.max(declY, du.y + du.height) : declY;
+                    const declBox = { x, y: declY, width, height: declBottom - declY };
+                    declBoxes.push(declBox);
+                    if (row.nested !== undefined) {
+                        const n = nestedBoxes.get(row.nested) ?? { laid: [], declared: [] };
+                        n.laid.push(moduleBox);
+                        n.declared.push(declBox);
+                        nestedBoxes.set(row.nested, n);
+                    }
+                    rowBottom = Math.max(rowBottom, bottom);
+                    rowDeclBottom = Math.max(rowDeclBottom, declBottom);
+                });
                 laidAny = true;
                 lastLaid = frameIdOf(names[names.length - 1]);
-                cursor = bottom + gap;
-                declCursor = declBottom + gap;
+                cursor = rowBottom;
+                declCursor = rowDeclBottom;
+            });
+            // A group inside the stack (#1088) is the box of its modules.
+            for (const [name, b] of nestedBoxes) {
+                groupRects.set(name, unionRect(b.laid));
+                groupDeclared.set(name, unionRect(b.declared));
             }
             groupRects.set(group.name, ownBox ?? unionRect(boxes) ?? { ...box, height: 0 });
             groupDeclared.set(group.name, ownBox ?? unionRect(declBoxes) ?? { ...box, height: 0 });
@@ -2062,6 +2268,25 @@ export function frameStyleOf(base, frame) {
     };
 }
 const lookedStyles = new WeakMap();
+/** Frames with a named look laid over theirs (#1089), per look and frame:
+ *  the same look object each time, so `styleWithLook` keeps its styles. */
+const namedLookFrames = new WeakMap();
+/** `frame` with the named look `named` (#1089) laid over its own `look`
+ *  (`lookOver`): the order is the style, the template frame's look, then
+ *  the named look. `frame` itself when there is none. */
+export function withNamedLook(frame, named) {
+    if (!named)
+        return frame;
+    let byFrame = namedLookFrames.get(named);
+    if (!byFrame)
+        namedLookFrames.set(named, (byFrame = new WeakMap()));
+    const known = byFrame.get(frame);
+    if (known)
+        return known;
+    const out = { ...frame, look: lookOver(frame.look, named) };
+    byFrame.set(frame, out);
+    return out;
+}
 /** `base` with what a frame's `look` sets (#976) written over it: colours
  *  of the fill, border, stripe, icon, marker, title, text and label tab,
  *  and the tracking of the body. A fill colour turns the fill on. A part