@fieldia/designer 0.0.0-stage → 0.11.0

package/src/lib/drop-echo.mjs

@@ -0,0 +1,195 @@
+import { edgeLine, intoLine } from './canvas-drop.mjs';
+import { across, listOf, locate, nodeOf } from './layout-tree.mjs';
+import { speakLike } from './chrome-language.mjs';
+/**
+ * One drop line, drawn in the outline and on the canvas at once, as
+ * Designable draws it. While a row is dragged in the outline, the canvas
+ * shows where the part will land — the line and the chip a canvas drag
+ * draws, at the same place; while a part is dragged on the canvas, the
+ * outline shows the line at the matching row, or washes the row it goes
+ * into. Each drag says where it would drop with an event; this only draws
+ * it on the other side. Where a part is let go stays each drag's own to
+ * decide.
+ */
+/** The event a drag says where it would drop with, bubbling from the outline's tree or the canvas. */
+export const ECHO_EVENT = 'fd-drop-echo';
+/** Say where a drag would drop, for the other side to draw. */
+export function echo(from, detail) {
+    from.dispatchEvent(new CustomEvent(ECHO_EVENT, { bubbles: true, detail }));
+}
+/** The part now at the drop's place in its list, or after the last one; into the group when it goes into one, or into an empty one. */
+export function canvasPlace(page, spot) {
+    const list = listOf(nodeOf(page, spot.parent) ?? undefined);
+    if (!list)
+        return null;
+    const last = list[list.length - 1]?.id ?? null;
+    if (spot.into || !list.length)
+        return { kind: 'into', container: spot.parent, last };
+    const at = list[spot.index];
+    return at ? { kind: 'edge', target: at.id, after: false } : { kind: 'edge', target: last, after: true };
+}
+/** The gap after a row and every row under it. */
+function after(rows, at) {
+    let gap = at + 1;
+    while (gap < rows.length && rows[gap].level > rows[at].level)
+        gap++;
+    return gap;
+}
+/** The row on show for a part: its own, or the nearest one round it, washed, when it is folded away. */
+function rowFor(rows, page, id) {
+    const at = rows.findIndex((row) => row.id === id);
+    if (at !== -1)
+        return { at };
+    for (let up = locate(page, id)?.parent; up && up.id !== page.layout.id; up = locate(page, up.id)?.parent) {
+        if (rows.some((row) => row.id === up?.id))
+            return { into: up.id };
+    }
+    return null;
+}
+/** A line before the row of the part now at `index` of a group's parts (the one carried left out), or after the group's last row. */
+function inList(rows, page, container, index, moving) {
+    const list = (listOf(nodeOf(page, container) ?? undefined) ?? []).filter((part) => part.id !== moving);
+    const at = list[index];
+    if (at) {
+        const found = rowFor(rows, page, at.id);
+        return !found ? null : 'into' in found ? found : { gap: found.at, level: rows[found.at].level };
+    }
+    if (container === page.layout.id)
+        return { gap: rows.length, level: 0 };
+    const holder = rowFor(rows, page, container);
+    if (!holder)
+        return null;
+    return 'into' in holder ? holder : { gap: after(rows, holder.at), level: rows[holder.at].level + 1 };
+}
+/** Where a canvas drop lands among the outline's rows on show. */
+export function outlineMark(rows, page, drop, moving) {
+    if (drop.how === 'row' || drop.how === 'at')
+        return inList(rows, page, drop.container, drop.index, moving);
+    if (drop.how === 'into' && drop.container === page.layout.id)
+        return { gap: rows.length, level: 0 };
+    // A new column inside a group goes into it, as far as the outline tells.
+    const found = rowFor(rows, page, drop.how === 'into' || drop.how === 'column' ? drop.container : drop.target);
+    if (drop.how === 'into' || drop.how === 'column')
+        return !found ? null : 'into' in found ? found : { into: drop.container };
+    if (!found || 'into' in found)
+        return found;
+    return { gap: drop.after ? after(rows, found.at) : found.at, level: rows[found.at].level };
+}
+export function dropEcho(options) {
+    const { editor, canvas, parts, tree, designer } = options;
+    const doc = canvas.ownerDocument;
+    const rectOf = options.rectOf ?? ((element) => element.getBoundingClientRect());
+    let marks = null;
+    let line = null;
+    const partOf = (id) => (parts.dataset['container'] === id ? parts : ([...parts.querySelectorAll('[data-node]')].find((e) => e.dataset['node'] === id && e.getAttribute('role') !== 'tab') ?? null));
+    const seen = (r) => r.width > 0 || r.height > 0;
+    /** Where a box in the window is, in the canvas: the marks are drawn in it. */
+    function inCanvas(box, element) {
+        const c = rectOf(canvas);
+        Object.assign(element.style, { left: `${box.left - c.left}px`, top: `${box.top - c.top}px`, width: `${box.width}px`, height: `${box.height}px` });
+    }
+    function clearCanvas() {
+        for (const mark of Object.values(marks ?? {}))
+            mark.remove();
+        marks = null;
+    }
+    /** The line by the side of a part a drop goes before or after: down its side in a group of columns, else across its top or bottom. */
+    function sideLine(id, afterIt) {
+        const element = partOf(id);
+        const at = locate(designer.getPage(), id);
+        if (!element || !at)
+            return null;
+        const r = rectOf(element);
+        if (!seen(r))
+            return null;
+        const sideways = across(designer.getPage(), at.parent) > 1;
+        const side = sideways ? (afterIt !== options.rtl() ? 'right' : 'left') : afterIt ? 'bottom' : 'top';
+        return edgeLine(r, side);
+    }
+    function showOnCanvas(detail) {
+        const place = detail.spot ? canvasPlace(designer.getPage(), detail.spot) : null;
+        let bar = null;
+        let zone = null;
+        if (place?.kind === 'edge')
+            bar = sideLine(place.target, place.after);
+        else if (place) {
+            const group = partOf(place.container);
+            const content = place.container === parts.dataset['container'] ? parts : (group?.querySelector(`[data-container="${place.container}"]`) ?? null);
+            const box = group ? rectOf(group) : null;
+            zone = box && seen(box) && group !== parts ? box : null;
+            bar = place.last ? sideLine(place.last, true) : content && seen(rectOf(content)) ? intoLine(rectOf(content)) : null;
+        }
+        if (!bar)
+            return clearCanvas();
+        if (!marks) {
+            const make = (className) => {
+                const element = doc.createElement('div');
+                element.className = `${className} fd-drop-echo`;
+                element.setAttribute('aria-hidden', 'true');
+                return element;
+            };
+            const [name, where] = [doc.createElement('span'), doc.createElement('span')];
+            name.className = 'fd-drop-name';
+            where.className = 'fd-drop-where';
+            marks = { zone: make('fd-drop-zone'), bar: make('fd-drop-bar'), chip: make('fd-drop-chip'), name, where };
+            marks.chip.append(name, where);
+            canvas.append(marks.zone, marks.bar, speakLike(marks.chip, canvas));
+        }
+        inCanvas(bar, marks.bar);
+        marks.zone.hidden = !zone;
+        if (zone)
+            inCanvas(zone, marks.zone);
+        marks.name.textContent = detail.name ?? designer.words.canvas.part;
+        marks.where.textContent = detail.words ?? '';
+        // The chip under the line's start — its right end, right to left — kept inside the canvas.
+        const c = rectOf(canvas);
+        const width = rectOf(marks.chip).width;
+        const start = options.rtl() ? bar.left + bar.width - width : bar.left;
+        marks.chip.style.left = `${Math.max(0, Math.min(start - c.left, c.width - width))}px`;
+        marks.chip.style.top = `${bar.top - c.top + bar.height + 8}px`;
+    }
+    function clearOutline() {
+        line?.remove();
+        line = null;
+        for (const row of tree.querySelectorAll('.fd-echo-into'))
+            row.classList.remove('fd-outline-into', 'fd-echo-into');
+    }
+    function showInOutline(detail) {
+        clearOutline();
+        if (!detail.drop || tree.closest('[hidden]'))
+            return;
+        const views = [...tree.querySelectorAll('[role="treeitem"]')];
+        const rows = views.map((view) => ({ id: view.dataset['pick'], level: Number(view.dataset['level'] ?? 0) }));
+        const mark = outlineMark(rows, designer.getPage(), detail.drop, detail.moving);
+        if (!mark || !views.length)
+            return;
+        if ('into' in mark) {
+            views[rows.findIndex((row) => row.id === mark.into)]?.classList.add('fd-outline-into', 'fd-echo-into');
+            return;
+        }
+        line = doc.createElement('div');
+        line.className = 'fd-outline-line fd-drop-echo';
+        line.setAttribute('aria-hidden', 'true');
+        const box = rectOf(tree);
+        const edge = views[mark.gap] ? rectOf(views[mark.gap]).top : rectOf(views[views.length - 1]).bottom;
+        line.style.top = `${Math.round(edge - box.top)}px`;
+        line.style.setProperty('--fd-drop-level', String(mark.level));
+        tree.append(line);
+    }
+    const onEcho = (event) => {
+        const detail = event.detail;
+        if (detail?.source === 'outline')
+            showOnCanvas(detail);
+        else if (detail?.source === 'canvas')
+            showInOutline(detail);
+    };
+    editor.addEventListener(ECHO_EVENT, onEcho);
+    return {
+        destroy() {
+            editor.removeEventListener(ECHO_EVENT, onEcho);
+            clearCanvas();
+            clearOutline();
+        },
+    };
+}
+//# sourceMappingURL=drop-echo.mjs.map

package/src/lib/drop-echo.mjs.map

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

package/src/lib/field-bar.d.mts

@@ -0,0 +1,23 @@
+import type { Page } from '@fieldia/core';
+import type { ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+/**
+ * The bar on the field being edited: what changes most, one press away — how
+ * it is shown, required, how wide, when it shows — then Duplicate, Delete,
+ * and More for the rest in the panel. A grip to drag it by.
+ */
+export interface FieldBarOptions {
+    el: ElementFactory;
+    doc: Document;
+    designer: Designer;
+    id: string;
+    /** Open the panel at a part of the field: its settings, or when it shows. */
+    more(part: 'field' | 'when'): void;
+}
+export interface FieldBar {
+    element: HTMLElement;
+    update(page: Page): void;
+}
+/** Why a field offers the editors it does. */
+export declare function kindsReason(designer: Designer, page: Page, id: string): string;
+export declare function fieldBar(options: FieldBarOptions): FieldBar;

package/src/lib/field-bar.d.ts

@@ -0,0 +1,23 @@
+import type { Page } from '@fieldia/core';
+import type { ElementFactory } from './chrome';
+import type { Designer } from './designer';
+/**
+ * The bar on the field being edited: what changes most, one press away — how
+ * it is shown, required, how wide, when it shows — then Duplicate, Delete,
+ * and More for the rest in the panel. A grip to drag it by.
+ */
+export interface FieldBarOptions {
+    el: ElementFactory;
+    doc: Document;
+    designer: Designer;
+    id: string;
+    /** Open the panel at a part of the field: its settings, or when it shows. */
+    more(part: 'field' | 'when'): void;
+}
+export interface FieldBar {
+    element: HTMLElement;
+    update(page: Page): void;
+}
+/** Why a field offers the editors it does. */
+export declare function kindsReason(designer: Designer, page: Page, id: string): string;
+export declare function fieldBar(options: FieldBarOptions): FieldBar;

package/src/lib/field-bar.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.kindsReason = kindsReason;
+exports.fieldBar = fieldBar;
+const icons_1 = require("./icons");
+const kinds_1 = require("./kinds");
+const layout_tree_1 = require("./layout-tree");
+const layout_twelfths_1 = require("./layout-twelfths");
+const menu_1 = require("./menu");
+const page_tree_1 = require("./page-tree");
+const toolbox_1 = require("./toolbox");
+const chrome_language_1 = require("./chrome-language");
+const toolbox_2 = require("./toolbox");
+/** Why a field offers the editors it does. */
+function kindsReason(designer, page, id) {
+    const found = (0, page_tree_1.findField)(page, id);
+    if (!found)
+        return '';
+    const def = page.fields[found.node.field];
+    const w = designer.words.canvas;
+    if (!designer.isFromModel(id))
+        return w.madeHere;
+    const count = designer.kindsFor(id).length;
+    return w.storedIn(found.node.label ?? def.label, (0, kinds_1.storedAs)(def, designer.words), count === 1);
+}
+/** The widths a field is offered where it sits: in a group in twelfths, fractions of its row that fit, and its own; else so many columns. */
+function widthItems(page, id, words) {
+    const w = words.canvas;
+    const found = (0, page_tree_1.findField)(page, id);
+    if (!found)
+        return [];
+    if ((0, layout_twelfths_1.inTwelfths)(found.section)) {
+        const span = Math.min(found.node.colspan ?? 1, layout_twelfths_1.TWELVE);
+        const fits = (0, layout_twelfths_1.widthsFor)(page, found.section, found.node);
+        const items = (0, layout_twelfths_1.rowParts)(words).filter((p) => p.span === span || fits(p.span)).map((p) => ({ id: String(p.span), label: p.name, checked: p.span === span }));
+        if (!items.some((item) => item.checked))
+            items.push({ id: String(span), label: w.percent((0, layout_twelfths_1.percent)(span)), checked: true });
+        return items.sort((a, b) => Number(b.id) - Number(a.id));
+    }
+    const columns = (0, layout_tree_1.across)(page, found.section);
+    const span = Math.min(found.node.colspan ?? 1, columns);
+    return Array.from({ length: columns }, (_, i) => {
+        const n = i + 1;
+        return { id: String(n), label: n === columns ? w.fullWidth : n === 1 ? w.oneColumn : w.columns(n), checked: n === span };
+    });
+}
+function fieldBar(options) {
+    const { el, doc, designer, id } = options;
+    const w = designer.words.canvas;
+    const icon = (name) => (0, icons_1.designerIcon)(doc, name);
+    const tool = (label, name, extra = {}) => el('button', { type: 'button', class: 'fd-bar-button', 'aria-label': label, title: label, ...extra }, icon(name));
+    const grip = el('button', { type: 'button', class: 'fd-bar-button fd-bar-grip', 'data-grip': '', 'aria-label': w.dragToMove, title: designer.words.options.grip }, icon('grip'));
+    const kindIcon = el('span', { class: 'fd-bar-kind-icon' });
+    const kindName = el('span', { class: 'fd-bar-kind-name' });
+    const kind = el('button', { type: 'button', class: 'fd-bar-button fd-bar-kind', 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, kindIcon, kindName, icon('chevron'));
+    const required = tool(w.required, 'required', { 'aria-pressed': 'false' });
+    const width = tool(w.width, 'width', { 'aria-haspopup': 'menu', 'aria-expanded': 'false' });
+    const when = tool(w.showOnlyWhen, 'when', { 'aria-pressed': 'false' });
+    const duplicate = tool(w.duplicate, 'duplicate');
+    const remove = tool(w.delete, 'delete');
+    const more = tool(w.moreSettings, 'more');
+    const sep = () => el('span', { class: 'fd-bar-sep', 'aria-hidden': 'true' });
+    const element = el('div', { class: 'fd-field-bar', role: 'toolbar', 'aria-label': w.field, ...(0, chrome_language_1.chromeLanguage)(designer) }, grip, kind, sep(), required, width, when, sep(), duplicate, remove, more);
+    let page = designer.getPage();
+    kind.addEventListener('click', () => {
+        const found = (0, page_tree_1.findField)(page, id);
+        if (!found)
+            return;
+        const current = (0, kinds_1.kindOfField)(page.fields[found.node.field], found.node);
+        const fitting = designer.kindsFor(id);
+        const offered = new Set(fitting.map((k) => k.id));
+        // Grouped as the toolbox groups them, when there is more than one group's worth.
+        const items = designer.isFromModel(id)
+            ? fitting.map((k) => ({ id: k.id, label: (0, kinds_1.kindName)(k, designer.words), icon: k.id, checked: k.id === current }))
+            : (0, toolbox_1.toolboxGroups)(fitting).flatMap(([title, ids]) => ids.filter((k) => offered.has(k)).map((k, i) => ({ id: k, label: (0, kinds_1.kindName)((0, kinds_1.kindById)(k), designer.words), icon: k, checked: k === current, ...(i === 0 ? { heading: (0, toolbox_2.groupName)(designer.words, title) } : {}) })));
+        (0, menu_1.openMenu)({ el, anchor: kind, title: w.showAs(found.node.label ?? page.fields[found.node.field].label), items, note: kindsReason(designer, page, id), onPick: (k) => designer.changeKind(id, k) });
+    });
+    required.addEventListener('click', () => designer.updateQuestion(id, { required: required.getAttribute('aria-pressed') !== 'true' }));
+    width.addEventListener('click', () => {
+        const items = widthItems(page, id, designer.words);
+        if (items.length)
+            (0, menu_1.openMenu)({ el, anchor: width, title: w.width, items, onPick: (n) => designer.setColspan(id, Number(n)) });
+    });
+    when.addEventListener('click', () => options.more('when'));
+    more.addEventListener('click', () => options.more('field'));
+    duplicate.addEventListener('click', () => {
+        const copy = designer.duplicateNode(id);
+        if (copy)
+            designer.select(copy);
+    });
+    remove.addEventListener('click', () => designer.removeNode(id));
+    return {
+        element,
+        update(next) {
+            page = next;
+            const found = (0, page_tree_1.findField)(page, id);
+            if (!found)
+                return;
+            const def = page.fields[found.node.field];
+            const current = (0, kinds_1.kindOfField)(def, found.node);
+            const label = current ? (0, kinds_1.kindName)((0, kinds_1.kindById)(current), designer.words) : w.custom;
+            kind.setAttribute('aria-label', w.showAsKind(label));
+            kind.title = w.showAsKind(label);
+            if (kindName.textContent !== label) {
+                kindName.textContent = label;
+                kindIcon.replaceChildren(icon(current ?? 'short-answer'));
+            }
+            required.setAttribute('aria-pressed', String(def.required === true || found.node.required === true));
+            // Nothing to choose: one column, or alone in a row that stays full.
+            width.hidden = widthItems(page, id, designer.words).length < 2;
+            when.setAttribute('aria-pressed', String(found.node.invisible !== undefined));
+        },
+    };
+}
+//# sourceMappingURL=field-bar.js.map

package/src/lib/field-bar.js.map

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

package/src/lib/field-bar.mjs

@@ -0,0 +1,111 @@
+import { designerIcon } from './icons.mjs';
+import { kindById, kindName as nameOfKind, kindOfField, storedAs } from './kinds.mjs';
+import { across } from './layout-tree.mjs';
+import { inTwelfths, percent, rowParts, TWELVE, widthsFor } from './layout-twelfths.mjs';
+import { openMenu } from './menu.mjs';
+import { findField } from './page-tree.mjs';
+import { toolboxGroups } from './toolbox.mjs';
+import { chromeLanguage } from './chrome-language.mjs';
+import { groupName } from './toolbox.mjs';
+/** Why a field offers the editors it does. */
+export function kindsReason(designer, page, id) {
+    const found = findField(page, id);
+    if (!found)
+        return '';
+    const def = page.fields[found.node.field];
+    const w = designer.words.canvas;
+    if (!designer.isFromModel(id))
+        return w.madeHere;
+    const count = designer.kindsFor(id).length;
+    return w.storedIn(found.node.label ?? def.label, storedAs(def, designer.words), count === 1);
+}
+/** The widths a field is offered where it sits: in a group in twelfths, fractions of its row that fit, and its own; else so many columns. */
+function widthItems(page, id, words) {
+    const w = words.canvas;
+    const found = findField(page, id);
+    if (!found)
+        return [];
+    if (inTwelfths(found.section)) {
+        const span = Math.min(found.node.colspan ?? 1, TWELVE);
+        const fits = widthsFor(page, found.section, found.node);
+        const items = rowParts(words).filter((p) => p.span === span || fits(p.span)).map((p) => ({ id: String(p.span), label: p.name, checked: p.span === span }));
+        if (!items.some((item) => item.checked))
+            items.push({ id: String(span), label: w.percent(percent(span)), checked: true });
+        return items.sort((a, b) => Number(b.id) - Number(a.id));
+    }
+    const columns = across(page, found.section);
+    const span = Math.min(found.node.colspan ?? 1, columns);
+    return Array.from({ length: columns }, (_, i) => {
+        const n = i + 1;
+        return { id: String(n), label: n === columns ? w.fullWidth : n === 1 ? w.oneColumn : w.columns(n), checked: n === span };
+    });
+}
+export function fieldBar(options) {
+    const { el, doc, designer, id } = options;
+    const w = designer.words.canvas;
+    const icon = (name) => designerIcon(doc, name);
+    const tool = (label, name, extra = {}) => el('button', { type: 'button', class: 'fd-bar-button', 'aria-label': label, title: label, ...extra }, icon(name));
+    const grip = el('button', { type: 'button', class: 'fd-bar-button fd-bar-grip', 'data-grip': '', 'aria-label': w.dragToMove, title: designer.words.options.grip }, icon('grip'));
+    const kindIcon = el('span', { class: 'fd-bar-kind-icon' });
+    const kindName = el('span', { class: 'fd-bar-kind-name' });
+    const kind = el('button', { type: 'button', class: 'fd-bar-button fd-bar-kind', 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, kindIcon, kindName, icon('chevron'));
+    const required = tool(w.required, 'required', { 'aria-pressed': 'false' });
+    const width = tool(w.width, 'width', { 'aria-haspopup': 'menu', 'aria-expanded': 'false' });
+    const when = tool(w.showOnlyWhen, 'when', { 'aria-pressed': 'false' });
+    const duplicate = tool(w.duplicate, 'duplicate');
+    const remove = tool(w.delete, 'delete');
+    const more = tool(w.moreSettings, 'more');
+    const sep = () => el('span', { class: 'fd-bar-sep', 'aria-hidden': 'true' });
+    const element = el('div', { class: 'fd-field-bar', role: 'toolbar', 'aria-label': w.field, ...chromeLanguage(designer) }, grip, kind, sep(), required, width, when, sep(), duplicate, remove, more);
+    let page = designer.getPage();
+    kind.addEventListener('click', () => {
+        const found = findField(page, id);
+        if (!found)
+            return;
+        const current = kindOfField(page.fields[found.node.field], found.node);
+        const fitting = designer.kindsFor(id);
+        const offered = new Set(fitting.map((k) => k.id));
+        // Grouped as the toolbox groups them, when there is more than one group's worth.
+        const items = designer.isFromModel(id)
+            ? fitting.map((k) => ({ id: k.id, label: nameOfKind(k, designer.words), icon: k.id, checked: k.id === current }))
+            : toolboxGroups(fitting).flatMap(([title, ids]) => ids.filter((k) => offered.has(k)).map((k, i) => ({ id: k, label: nameOfKind(kindById(k), designer.words), icon: k, checked: k === current, ...(i === 0 ? { heading: groupName(designer.words, title) } : {}) })));
+        openMenu({ el, anchor: kind, title: w.showAs(found.node.label ?? page.fields[found.node.field].label), items, note: kindsReason(designer, page, id), onPick: (k) => designer.changeKind(id, k) });
+    });
+    required.addEventListener('click', () => designer.updateQuestion(id, { required: required.getAttribute('aria-pressed') !== 'true' }));
+    width.addEventListener('click', () => {
+        const items = widthItems(page, id, designer.words);
+        if (items.length)
+            openMenu({ el, anchor: width, title: w.width, items, onPick: (n) => designer.setColspan(id, Number(n)) });
+    });
+    when.addEventListener('click', () => options.more('when'));
+    more.addEventListener('click', () => options.more('field'));
+    duplicate.addEventListener('click', () => {
+        const copy = designer.duplicateNode(id);
+        if (copy)
+            designer.select(copy);
+    });
+    remove.addEventListener('click', () => designer.removeNode(id));
+    return {
+        element,
+        update(next) {
+            page = next;
+            const found = findField(page, id);
+            if (!found)
+                return;
+            const def = page.fields[found.node.field];
+            const current = kindOfField(def, found.node);
+            const label = current ? nameOfKind(kindById(current), designer.words) : w.custom;
+            kind.setAttribute('aria-label', w.showAsKind(label));
+            kind.title = w.showAsKind(label);
+            if (kindName.textContent !== label) {
+                kindName.textContent = label;
+                kindIcon.replaceChildren(icon(current ?? 'short-answer'));
+            }
+            required.setAttribute('aria-pressed', String(def.required === true || found.node.required === true));
+            // Nothing to choose: one column, or alone in a row that stays full.
+            width.hidden = widthItems(page, id, designer.words).length < 2;
+            when.setAttribute('aria-pressed', String(found.node.invisible !== undefined));
+        },
+    };
+}
+//# sourceMappingURL=field-bar.mjs.map

package/src/lib/field-bar.mjs.map

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

package/src/lib/find-anything.d.mts

@@ -0,0 +1,37 @@
+import type { ElementFactory } from './chrome.mjs';
+import type { DesignerWords } from './designer-words.mjs';
+/**
+ * Find anything: one box over a list of everything the editor can add, go to
+ * or do. Every word typed must appear in what is found, in any order; the
+ * arrows move, Enter or a click runs it, Escape closes. The editor says what
+ * there is; this only finds it.
+ */
+export interface FindItem {
+    label: string;
+    /** A quiet word on the right: what kind of thing it is. */
+    hint?: string;
+    /** Its icon by name, as it shows elsewhere — the Rules view's, as in the bar. */
+    icon?: string;
+    run(): void;
+}
+export declare function openFind(el: ElementFactory, root: HTMLElement, items: FindItem[], words: DesignerWords): {
+    close(): void;
+};
+/** A setting of the panel, as Find anything lists it. */
+export interface SettingEntry {
+    name: string;
+    /** Where it is, in words: its tab, or the page's look. */
+    tab: string;
+    /** Its choices, when it is a choice of a few; `group` names the choices' own group where a setting has several. */
+    choices: {
+        value: string;
+        words: string;
+        group?: string;
+    }[];
+}
+/**
+ * The panel's settings as things to find: each by its name, and each of its
+ * choices as "Labels: beside" — by the choices' own group where a setting
+ * has several, as Columns has one for each size of screen.
+ */
+export declare function settingItems<T extends SettingEntry>(entries: readonly T[], open: (entry: T, choice?: string) => void, words: DesignerWords, kind?: string): FindItem[];

package/src/lib/find-anything.d.ts

@@ -0,0 +1,37 @@
+import type { ElementFactory } from './chrome';
+import type { DesignerWords } from './designer-words';
+/**
+ * Find anything: one box over a list of everything the editor can add, go to
+ * or do. Every word typed must appear in what is found, in any order; the
+ * arrows move, Enter or a click runs it, Escape closes. The editor says what
+ * there is; this only finds it.
+ */
+export interface FindItem {
+    label: string;
+    /** A quiet word on the right: what kind of thing it is. */
+    hint?: string;
+    /** Its icon by name, as it shows elsewhere — the Rules view's, as in the bar. */
+    icon?: string;
+    run(): void;
+}
+export declare function openFind(el: ElementFactory, root: HTMLElement, items: FindItem[], words: DesignerWords): {
+    close(): void;
+};
+/** A setting of the panel, as Find anything lists it. */
+export interface SettingEntry {
+    name: string;
+    /** Where it is, in words: its tab, or the page's look. */
+    tab: string;
+    /** Its choices, when it is a choice of a few; `group` names the choices' own group where a setting has several. */
+    choices: {
+        value: string;
+        words: string;
+        group?: string;
+    }[];
+}
+/**
+ * The panel's settings as things to find: each by its name, and each of its
+ * choices as "Labels: beside" — by the choices' own group where a setting
+ * has several, as Columns has one for each size of screen.
+ */
+export declare function settingItems<T extends SettingEntry>(entries: readonly T[], open: (entry: T, choice?: string) => void, words: DesignerWords, kind?: string): FindItem[];