@fieldia/designer 0.0.0-stage → 0.11.0

package/src/lib/panel-group.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupProperties = groupProperties;
+exports.arrangementProperties = arrangementProperties;
+const condition_editor_1 = require("./condition-editor");
+const layout_tree_1 = require("./layout-tree");
+const page_tree_1 = require("./page-tree");
+const panel_controls_1 = require("./panel-controls");
+const panel_layout_1 = require("./panel-layout");
+const panel_look_1 = require("./panel-look");
+const panel_fold_1 = require("./panel-fold");
+const screen_properties_1 = require("./screen-properties");
+/**
+ * A group's settings, on the panel's tabs: its title, whether it folds by
+ * it, its place among the others and taking it away (Content); its columns,
+ * and in twelfths whether its rows stay full (Layout); and when it shows (Rules). An arrangement — parts side by side —
+ * has only its layout.
+ */
+function groupProperties(el, designer, id) {
+    const focused = (node) => node.ownerDocument.activeElement === node;
+    const w = designer.words.panel;
+    const title = el('input', { class: 'fd-input', 'aria-label': w.sectionTitle });
+    title.addEventListener('input', () => designer.renameContainer(id, title.value));
+    const columns = (0, panel_layout_1.columnsSetting)(el, designer, id);
+    const rows = (0, panel_layout_1.rowsSetting)(el, designer, id);
+    const labels = (0, panel_layout_1.labelsSetting)(el, designer, id, 'group');
+    const width = (0, panel_layout_1.widthSetting)(el, designer, id);
+    const style = (0, panel_look_1.groupStyleSetting)(el, designer, id);
+    const fold = (0, panel_fold_1.foldSetting)(el, designer, id);
+    const moves = (0, screen_properties_1.movers)(el, designer, id, [w.moveUp, w.moveDown]);
+    const remove = el('button', { type: 'button', class: 'fd-button fd-button-danger' }, w.deleteSection);
+    remove.addEventListener('click', () => designer.removeNode(id));
+    // When it shows: rules on the fields outside it that hold one of a list, or yes or no.
+    const when = (0, condition_editor_1.conditionEditor)(el, designer, id, 'group');
+    const showWhen = el('button', { type: 'button', class: 'fd-button fd-button-link fd-q-when' }, w.showOnlyWhen);
+    showWhen.addEventListener('click', () => when.start());
+    const noRules = el('p', { class: 'fd-properties-hint', hidden: '' }, w.noRulesGroup);
+    const element = el('div', { class: 'fd-props' }, (0, panel_controls_1.setting)(el, 'content', 'Title', title, { words: w.title }), ...fold.rows, (0, panel_controls_1.onTab)(el('div', { class: 'fd-props-actions' }, ...moves.buttons, remove), 'content', 'Move or delete'), ...columns.rows, ...rows.rows, ...labels.rows, ...width.rows, ...style.rows, (0, panel_controls_1.onTab)(el('div', { class: 'fd-prop fd-prop-when' }, el('span', { class: 'fd-prop-name' }, w.whenItShows), when.element, showWhen, noRules), 'rules', 'When it shows'));
+    return {
+        element,
+        update(page) {
+            const section = (0, layout_tree_1.nodeOf)(page, id);
+            if (!(0, layout_tree_1.isSection)(section))
+                return;
+            if (!focused(title))
+                title.value = section.title ?? '';
+            for (const part of [columns, rows, labels, width, style, fold])
+                part.update(page);
+            moves.update(page);
+            // A page keeps one thing at its top, and a tab its last section.
+            const holder = (0, page_tree_1.findNode)(page, id)?.parent;
+            remove.hidden = !holder || holder.children.length === 1;
+            const outside = (0, page_tree_1.allSections)(page).flatMap((s) => s.children.filter((n) => n.type === 'field' && !(0, layout_tree_1.contains)(page, id, n.id) && (0, condition_editor_1.choicesOf)(page.fields[n.field]) !== null));
+            when.update(page, outside, section.invisible);
+            showWhen.hidden = !when.element.hidden || !when.canStart();
+            noRules.hidden = !when.element.hidden || when.canStart();
+        },
+    };
+}
+/** Parts side by side: the columns they take, and how wide they are where they sit. */
+function arrangementProperties(el, designer, id) {
+    const columns = (0, panel_layout_1.columnsSetting)(el, designer, id, designer.words.panel.columns);
+    const width = (0, panel_layout_1.widthSetting)(el, designer, id);
+    const element = el('div', { class: 'fd-props' }, ...columns.rows, ...width.rows);
+    return {
+        element,
+        update(page) {
+            if (!(0, layout_tree_1.isSection)((0, layout_tree_1.nodeOf)(page, id)))
+                return;
+            columns.update(page);
+            width.update(page);
+        },
+    };
+}
+//# sourceMappingURL=panel-group.js.map

package/src/lib/panel-group.js.map

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

package/src/lib/panel-group.mjs

@@ -0,0 +1,71 @@
+import { choicesOf, conditionEditor } from './condition-editor.mjs';
+import { contains, isSection, nodeOf } from './layout-tree.mjs';
+import { allSections, findNode } from './page-tree.mjs';
+import { onTab, setting } from './panel-controls.mjs';
+import { columnsSetting, labelsSetting, rowsSetting, widthSetting } from './panel-layout.mjs';
+import { groupStyleSetting } from './panel-look.mjs';
+import { foldSetting } from './panel-fold.mjs';
+import { movers } from './screen-properties.mjs';
+/**
+ * A group's settings, on the panel's tabs: its title, whether it folds by
+ * it, its place among the others and taking it away (Content); its columns,
+ * and in twelfths whether its rows stay full (Layout); and when it shows (Rules). An arrangement — parts side by side —
+ * has only its layout.
+ */
+export function groupProperties(el, designer, id) {
+    const focused = (node) => node.ownerDocument.activeElement === node;
+    const w = designer.words.panel;
+    const title = el('input', { class: 'fd-input', 'aria-label': w.sectionTitle });
+    title.addEventListener('input', () => designer.renameContainer(id, title.value));
+    const columns = columnsSetting(el, designer, id);
+    const rows = rowsSetting(el, designer, id);
+    const labels = labelsSetting(el, designer, id, 'group');
+    const width = widthSetting(el, designer, id);
+    const style = groupStyleSetting(el, designer, id);
+    const fold = foldSetting(el, designer, id);
+    const moves = movers(el, designer, id, [w.moveUp, w.moveDown]);
+    const remove = el('button', { type: 'button', class: 'fd-button fd-button-danger' }, w.deleteSection);
+    remove.addEventListener('click', () => designer.removeNode(id));
+    // When it shows: rules on the fields outside it that hold one of a list, or yes or no.
+    const when = conditionEditor(el, designer, id, 'group');
+    const showWhen = el('button', { type: 'button', class: 'fd-button fd-button-link fd-q-when' }, w.showOnlyWhen);
+    showWhen.addEventListener('click', () => when.start());
+    const noRules = el('p', { class: 'fd-properties-hint', hidden: '' }, w.noRulesGroup);
+    const element = el('div', { class: 'fd-props' }, setting(el, 'content', 'Title', title, { words: w.title }), ...fold.rows, onTab(el('div', { class: 'fd-props-actions' }, ...moves.buttons, remove), 'content', 'Move or delete'), ...columns.rows, ...rows.rows, ...labels.rows, ...width.rows, ...style.rows, onTab(el('div', { class: 'fd-prop fd-prop-when' }, el('span', { class: 'fd-prop-name' }, w.whenItShows), when.element, showWhen, noRules), 'rules', 'When it shows'));
+    return {
+        element,
+        update(page) {
+            const section = nodeOf(page, id);
+            if (!isSection(section))
+                return;
+            if (!focused(title))
+                title.value = section.title ?? '';
+            for (const part of [columns, rows, labels, width, style, fold])
+                part.update(page);
+            moves.update(page);
+            // A page keeps one thing at its top, and a tab its last section.
+            const holder = findNode(page, id)?.parent;
+            remove.hidden = !holder || holder.children.length === 1;
+            const outside = allSections(page).flatMap((s) => s.children.filter((n) => n.type === 'field' && !contains(page, id, n.id) && choicesOf(page.fields[n.field]) !== null));
+            when.update(page, outside, section.invisible);
+            showWhen.hidden = !when.element.hidden || !when.canStart();
+            noRules.hidden = !when.element.hidden || when.canStart();
+        },
+    };
+}
+/** Parts side by side: the columns they take, and how wide they are where they sit. */
+export function arrangementProperties(el, designer, id) {
+    const columns = columnsSetting(el, designer, id, designer.words.panel.columns);
+    const width = widthSetting(el, designer, id);
+    const element = el('div', { class: 'fd-props' }, ...columns.rows, ...width.rows);
+    return {
+        element,
+        update(page) {
+            if (!isSection(nodeOf(page, id)))
+                return;
+            columns.update(page);
+            width.update(page);
+        },
+    };
+}
+//# sourceMappingURL=panel-group.mjs.map

package/src/lib/panel-group.mjs.map

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

package/src/lib/panel-inspector.d.mts

@@ -0,0 +1,54 @@
+import type { ElementFactory } from './chrome.mjs';
+import { type PanelTab, type PartKind } from './panel-tabs.mjs';
+import type { PropertiesView } from './screen-properties.mjs';
+import type { DesignerWords } from './designer-words.mjs';
+/**
+ * The panel beside the canvas, as the approved mockup draws it: a head saying
+ * what is picked — its kind and its name — then the tabs that apply to it,
+ * one tab's settings shown at a time. A view of the part gives its settings
+ * as rows, each saying its tab; the panel sorts them into their tabs, shows
+ * no tab without one, and keeps the tab a kind of part was last left on.
+ */
+export interface InspectorHead {
+    /** An icon by name, as the toolbox draws it. */
+    icon: string;
+    /** What kind of part it is: "Dropdown", "Group", "Several". */
+    kind: string;
+    /** Said after the kind, such as "from the model". */
+    note?: string;
+    /** Its name: a field's label, a group's title, how many are picked. */
+    name: string;
+}
+/** A setting on show, wherever its tab is. */
+export interface SettingRow {
+    tab: PanelTab;
+    name: string;
+    element: HTMLElement;
+    /** The choices it offers, when it is a choice of a few, and the name of the group each is in. */
+    choices: {
+        value: string;
+        words: string;
+        group?: string;
+        button: HTMLButtonElement;
+    }[];
+}
+/** The settings on show in part of the panel, all on one tab. */
+export declare function settingRows(scope: HTMLElement, tab: PanelTab): SettingRow[];
+export interface InspectorShell {
+    element: HTMLElement;
+    /** Where the panel's own controls go above the tabs, such as the search. */
+    top: HTMLElement;
+    /** Show a view of what is picked: its rows in the tabs that apply. */
+    /** Show a view of what is picked, in the tabs its kind has in this mode. */
+    show(kind: PartKind, view: PropertiesView, mode?: 'simple' | 'advanced'): void;
+    head(head: InspectorHead): void;
+    current(): PanelTab;
+    choose(tab: PanelTab): void;
+    /** Every setting on show, in every tab, in the tabs' order. */
+    rows(): SettingRow[];
+    /** Go to a setting: its tab chosen and its control focused — the choice named, or the one pressed. */
+    go(row: SettingRow, choice?: string): void;
+    /** Show or hide the tabs and their panels, as the search does while it lists what it found. */
+    setTabsHidden(hidden: boolean): void;
+}
+export declare function inspectorShell(el: ElementFactory, doc: Document, words?: DesignerWords): InspectorShell;

package/src/lib/panel-inspector.d.ts

@@ -0,0 +1,54 @@
+import type { ElementFactory } from './chrome';
+import { type PanelTab, type PartKind } from './panel-tabs';
+import type { PropertiesView } from './screen-properties';
+import type { DesignerWords } from './designer-words';
+/**
+ * The panel beside the canvas, as the approved mockup draws it: a head saying
+ * what is picked — its kind and its name — then the tabs that apply to it,
+ * one tab's settings shown at a time. A view of the part gives its settings
+ * as rows, each saying its tab; the panel sorts them into their tabs, shows
+ * no tab without one, and keeps the tab a kind of part was last left on.
+ */
+export interface InspectorHead {
+    /** An icon by name, as the toolbox draws it. */
+    icon: string;
+    /** What kind of part it is: "Dropdown", "Group", "Several". */
+    kind: string;
+    /** Said after the kind, such as "from the model". */
+    note?: string;
+    /** Its name: a field's label, a group's title, how many are picked. */
+    name: string;
+}
+/** A setting on show, wherever its tab is. */
+export interface SettingRow {
+    tab: PanelTab;
+    name: string;
+    element: HTMLElement;
+    /** The choices it offers, when it is a choice of a few, and the name of the group each is in. */
+    choices: {
+        value: string;
+        words: string;
+        group?: string;
+        button: HTMLButtonElement;
+    }[];
+}
+/** The settings on show in part of the panel, all on one tab. */
+export declare function settingRows(scope: HTMLElement, tab: PanelTab): SettingRow[];
+export interface InspectorShell {
+    element: HTMLElement;
+    /** Where the panel's own controls go above the tabs, such as the search. */
+    top: HTMLElement;
+    /** Show a view of what is picked: its rows in the tabs that apply. */
+    /** Show a view of what is picked, in the tabs its kind has in this mode. */
+    show(kind: PartKind, view: PropertiesView, mode?: 'simple' | 'advanced'): void;
+    head(head: InspectorHead): void;
+    current(): PanelTab;
+    choose(tab: PanelTab): void;
+    /** Every setting on show, in every tab, in the tabs' order. */
+    rows(): SettingRow[];
+    /** Go to a setting: its tab chosen and its control focused — the choice named, or the one pressed. */
+    go(row: SettingRow, choice?: string): void;
+    /** Show or hide the tabs and their panels, as the search does while it lists what it found. */
+    setTabsHidden(hidden: boolean): void;
+}
+export declare function inspectorShell(el: ElementFactory, doc: Document, words?: DesignerWords): InspectorShell;

package/src/lib/panel-inspector.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.settingRows = settingRows;
+exports.inspectorShell = inspectorShell;
+const icons_1 = require("./icons");
+const panel_controls_1 = require("./panel-controls");
+const panel_tabs_1 = require("./panel-tabs");
+const en_1 = require("./locales/en");
+/** The settings on show in part of the panel, all on one tab. */
+function settingRows(scope, tab) {
+    return [...scope.querySelectorAll('[data-setting]')]
+        .filter((row) => (0, panel_controls_1.shownWithin)(row, scope))
+        .map((row) => ({
+        tab,
+        name: row.dataset['setting'],
+        element: row,
+        choices: [...row.querySelectorAll('[data-choice]')]
+            .filter((button) => (0, panel_controls_1.shownWithin)(button, row))
+            .map((button) => ({
+            value: button.dataset['choice'],
+            words: button.textContent?.trim() || button.getAttribute('aria-label') || '',
+            group: button.closest('[role="group"]')?.getAttribute('aria-label') ?? undefined,
+            button,
+        })),
+    }));
+}
+function inspectorShell(el, doc, words = en_1.en) {
+    const icon = el('span', { class: 'fd-insp-icon' });
+    const title = el('span', { class: 'fd-panel-title' });
+    const note = el('span', { class: 'fd-insp-note' });
+    const name = el('div', { class: 'fd-insp-name' });
+    const headBox = el('div', { class: 'fd-insp-head' }, el('div', { class: 'fd-insp-kind' }, icon, title, note), name);
+    const top = el('div', { class: 'fd-insp-top' });
+    const strip = (0, panel_tabs_1.tabStrip)(el, (tab) => choose(tab), words);
+    const panels = el('div', { class: 'fd-insp-panels' });
+    const element = el('aside', { class: 'fd-properties fd-inspector', 'aria-label': words.panel.properties }, headBox, top, strip.element, panels);
+    let kind = 'page';
+    let shown = [];
+    let tab = 'content';
+    const lastTab = new Map();
+    const panelOf = new Map();
+    function draw() {
+        strip.show(shown, tab);
+        for (const [at, panel] of panelOf)
+            panel.hidden = at !== tab;
+    }
+    function choose(next) {
+        if (!shown.includes(next))
+            return;
+        tab = next;
+        lastTab.set(kind, next);
+        draw();
+    }
+    return {
+        element,
+        top,
+        show(nextKind, view, mode = 'advanced') {
+            kind = nextKind;
+            const applies = (0, panel_tabs_1.tabsFor)(kind, mode);
+            panelOf.clear();
+            const make = (at) => {
+                const panel = el('div', { class: 'fd-props fd-insp-panel', role: 'tabpanel', id: strip.panelId(at), 'aria-labelledby': strip.tabId(at), 'data-panel': at });
+                panelOf.set(at, panel);
+                return panel;
+            };
+            for (const at of applies)
+                make(at);
+            // The view's own element is its Content; a row for another tab goes to that tab, and a row for a tab that does not apply is not shown.
+            const content = panelOf.get('content');
+            for (const row of [...view.element.children]) {
+                const at = row.dataset['tab'] ?? 'content';
+                // Simple keeps the Rules tab to when it shows and whether it is required.
+                if (mode === 'simple' && at === 'rules' && !panel_tabs_1.SIMPLE_RULES.has(row.dataset['setting'] ?? '')) {
+                    row.remove();
+                    continue;
+                }
+                if (at === 'content')
+                    continue;
+                const panel = panelOf.get(at);
+                if (panel)
+                    panel.append(row);
+                else
+                    row.remove();
+            }
+            if (content) {
+                if (view.element.children.length)
+                    content.append(view.element);
+                else
+                    panelOf.delete('content');
+            }
+            for (const [at, panel] of [...panelOf])
+                if (at !== 'content' && !panel.children.length)
+                    panelOf.delete(at);
+            shown = applies.filter((at) => panelOf.has(at));
+            const kept = lastTab.get(kind);
+            tab = kept && shown.includes(kept) ? kept : (shown[0] ?? 'content');
+            panels.replaceChildren(...shown.map((at) => panelOf.get(at)));
+            draw();
+        },
+        head(next) {
+            if (icon.dataset['icon'] !== next.icon) {
+                icon.dataset['icon'] = next.icon;
+                icon.replaceChildren((0, icons_1.designerIcon)(doc, next.icon));
+            }
+            title.textContent = next.kind;
+            note.textContent = next.note ? ` · ${next.note}` : '';
+            name.textContent = next.name;
+            name.title = next.name;
+        },
+        current: () => tab,
+        choose,
+        rows: () => shown.flatMap((at) => settingRows(panelOf.get(at), at)),
+        go(row, choice) {
+            choose(row.tab);
+            const target = (choice !== undefined ? row.choices.find((c) => c.value === choice)?.button : undefined) ??
+                row.element.querySelector('[data-choice][aria-pressed="true"]') ??
+                [...row.element.querySelectorAll('input, select, textarea, button')].find((c) => (0, panel_controls_1.shownWithin)(c, row.element));
+            target?.focus();
+            row.element.scrollIntoView?.({ block: 'nearest' });
+            // Pointed out, a moment, so the eye finds it.
+            row.element.classList.remove('fd-set-found');
+            void row.element.offsetWidth;
+            row.element.classList.add('fd-set-found');
+        },
+        setTabsHidden(hidden) {
+            strip.element.hidden = hidden;
+            panels.hidden = hidden;
+        },
+    };
+}
+//# sourceMappingURL=panel-inspector.js.map

package/src/lib/panel-inspector.js.map

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

package/src/lib/panel-inspector.mjs

@@ -0,0 +1,127 @@
+import { designerIcon } from './icons.mjs';
+import { shownWithin } from './panel-controls.mjs';
+import { SIMPLE_RULES, tabStrip, tabsFor } from './panel-tabs.mjs';
+import { en } from './locales/en/index.mjs';
+/** The settings on show in part of the panel, all on one tab. */
+export function settingRows(scope, tab) {
+    return [...scope.querySelectorAll('[data-setting]')]
+        .filter((row) => shownWithin(row, scope))
+        .map((row) => ({
+        tab,
+        name: row.dataset['setting'],
+        element: row,
+        choices: [...row.querySelectorAll('[data-choice]')]
+            .filter((button) => shownWithin(button, row))
+            .map((button) => ({
+            value: button.dataset['choice'],
+            words: button.textContent?.trim() || button.getAttribute('aria-label') || '',
+            group: button.closest('[role="group"]')?.getAttribute('aria-label') ?? undefined,
+            button,
+        })),
+    }));
+}
+export function inspectorShell(el, doc, words = en) {
+    const icon = el('span', { class: 'fd-insp-icon' });
+    const title = el('span', { class: 'fd-panel-title' });
+    const note = el('span', { class: 'fd-insp-note' });
+    const name = el('div', { class: 'fd-insp-name' });
+    const headBox = el('div', { class: 'fd-insp-head' }, el('div', { class: 'fd-insp-kind' }, icon, title, note), name);
+    const top = el('div', { class: 'fd-insp-top' });
+    const strip = tabStrip(el, (tab) => choose(tab), words);
+    const panels = el('div', { class: 'fd-insp-panels' });
+    const element = el('aside', { class: 'fd-properties fd-inspector', 'aria-label': words.panel.properties }, headBox, top, strip.element, panels);
+    let kind = 'page';
+    let shown = [];
+    let tab = 'content';
+    const lastTab = new Map();
+    const panelOf = new Map();
+    function draw() {
+        strip.show(shown, tab);
+        for (const [at, panel] of panelOf)
+            panel.hidden = at !== tab;
+    }
+    function choose(next) {
+        if (!shown.includes(next))
+            return;
+        tab = next;
+        lastTab.set(kind, next);
+        draw();
+    }
+    return {
+        element,
+        top,
+        show(nextKind, view, mode = 'advanced') {
+            kind = nextKind;
+            const applies = tabsFor(kind, mode);
+            panelOf.clear();
+            const make = (at) => {
+                const panel = el('div', { class: 'fd-props fd-insp-panel', role: 'tabpanel', id: strip.panelId(at), 'aria-labelledby': strip.tabId(at), 'data-panel': at });
+                panelOf.set(at, panel);
+                return panel;
+            };
+            for (const at of applies)
+                make(at);
+            // The view's own element is its Content; a row for another tab goes to that tab, and a row for a tab that does not apply is not shown.
+            const content = panelOf.get('content');
+            for (const row of [...view.element.children]) {
+                const at = row.dataset['tab'] ?? 'content';
+                // Simple keeps the Rules tab to when it shows and whether it is required.
+                if (mode === 'simple' && at === 'rules' && !SIMPLE_RULES.has(row.dataset['setting'] ?? '')) {
+                    row.remove();
+                    continue;
+                }
+                if (at === 'content')
+                    continue;
+                const panel = panelOf.get(at);
+                if (panel)
+                    panel.append(row);
+                else
+                    row.remove();
+            }
+            if (content) {
+                if (view.element.children.length)
+                    content.append(view.element);
+                else
+                    panelOf.delete('content');
+            }
+            for (const [at, panel] of [...panelOf])
+                if (at !== 'content' && !panel.children.length)
+                    panelOf.delete(at);
+            shown = applies.filter((at) => panelOf.has(at));
+            const kept = lastTab.get(kind);
+            tab = kept && shown.includes(kept) ? kept : (shown[0] ?? 'content');
+            panels.replaceChildren(...shown.map((at) => panelOf.get(at)));
+            draw();
+        },
+        head(next) {
+            if (icon.dataset['icon'] !== next.icon) {
+                icon.dataset['icon'] = next.icon;
+                icon.replaceChildren(designerIcon(doc, next.icon));
+            }
+            title.textContent = next.kind;
+            note.textContent = next.note ? ` · ${next.note}` : '';
+            name.textContent = next.name;
+            name.title = next.name;
+        },
+        current: () => tab,
+        choose,
+        rows: () => shown.flatMap((at) => settingRows(panelOf.get(at), at)),
+        go(row, choice) {
+            choose(row.tab);
+            const target = (choice !== undefined ? row.choices.find((c) => c.value === choice)?.button : undefined) ??
+                row.element.querySelector('[data-choice][aria-pressed="true"]') ??
+                [...row.element.querySelectorAll('input, select, textarea, button')].find((c) => shownWithin(c, row.element));
+            target?.focus();
+            row.element.scrollIntoView?.({ block: 'nearest' });
+            // Pointed out, a moment, so the eye finds it.
+            row.element.classList.remove('fd-set-found');
+            void row.element.offsetWidth;
+            row.element.classList.add('fd-set-found');
+        },
+        setTabsHidden(hidden) {
+            strip.element.hidden = hidden;
+            panels.hidden = hidden;
+        },
+    };
+}
+//# sourceMappingURL=panel-inspector.mjs.map

package/src/lib/panel-inspector.mjs.map

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

package/src/lib/panel-layout.d.mts

@@ -0,0 +1,26 @@
+import { type Page } from '@fieldia/core';
+import type { ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+import type { DesignerWords } from './designer-words.mjs';
+/**
+ * The Layout tab's settings: a group's columns on a desktop, a tablet and a
+ * phone — one to four, or twelfths, each row divided its own way, and then
+ * whether its rows stay full; how wide a part is where it sits (in twelfths, a
+ * fraction of its row); where labels sit, and how wide they are when they sit
+ * beside their boxes.
+ */
+export interface LayoutSetting {
+    /** Its rows, on the Layout tab. */
+    rows: HTMLElement[];
+    update(page: Page): void;
+}
+/** A group's columns, on each size of screen: a tablet or a phone never more than a desktop, a phone never more than a tablet. */
+export declare function columnsSetting(el: ElementFactory, designer: Designer, id: string, words?: string): LayoutSetting;
+/** In twelfths, whether a group's rows stay full as parts come and go, or may leave gaps. */
+export declare function rowsSetting(el: ElementFactory, designer: Designer, id: string): LayoutSetting;
+/** How many columns a part spans where it sits, or why it takes the whole row. */
+export declare function widthSetting(el: ElementFactory, designer: Designer, id: string): LayoutSetting;
+/** What “as round it” is, in words: as its group says, or as the page does. */
+export declare const aroundWords: (page: Page, id: string, words?: DesignerWords) => string;
+/** Where a group's labels sit, or one field's; and, for a group whose labels sit beside, how wide they are. */
+export declare function labelsSetting(el: ElementFactory, designer: Designer, id: string, what: 'group' | 'field'): LayoutSetting;

package/src/lib/panel-layout.d.ts

@@ -0,0 +1,26 @@
+import { type Page } from '@fieldia/core';
+import type { ElementFactory } from './chrome';
+import type { Designer } from './designer';
+import type { DesignerWords } from './designer-words';
+/**
+ * The Layout tab's settings: a group's columns on a desktop, a tablet and a
+ * phone — one to four, or twelfths, each row divided its own way, and then
+ * whether its rows stay full; how wide a part is where it sits (in twelfths, a
+ * fraction of its row); where labels sit, and how wide they are when they sit
+ * beside their boxes.
+ */
+export interface LayoutSetting {
+    /** Its rows, on the Layout tab. */
+    rows: HTMLElement[];
+    update(page: Page): void;
+}
+/** A group's columns, on each size of screen: a tablet or a phone never more than a desktop, a phone never more than a tablet. */
+export declare function columnsSetting(el: ElementFactory, designer: Designer, id: string, words?: string): LayoutSetting;
+/** In twelfths, whether a group's rows stay full as parts come and go, or may leave gaps. */
+export declare function rowsSetting(el: ElementFactory, designer: Designer, id: string): LayoutSetting;
+/** How many columns a part spans where it sits, or why it takes the whole row. */
+export declare function widthSetting(el: ElementFactory, designer: Designer, id: string): LayoutSetting;
+/** What “as round it” is, in words: as its group says, or as the page does. */
+export declare const aroundWords: (page: Page, id: string, words?: DesignerWords) => string;
+/** Where a group's labels sit, or one field's; and, for a group whose labels sit beside, how wide they are. */
+export declare function labelsSetting(el: ElementFactory, designer: Designer, id: string, what: 'group' | 'field'): LayoutSetting;