@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/panel-form.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formContent = formContent;
+const layout_tree_1 = require("./layout-tree");
+const panel_controls_1 = require("./panel-controls");
+const writes_1 = require("./writes");
+/**
+ * A saved form's own settings, on the Content tab: which saved form, the
+ * latest version or one kept to, its title, and where its answers go. What is
+ * inside it is changed on its own page: “Open it”, when the app gives a way.
+ */
+const focused = (node) => node.ownerDocument.activeElement === node;
+const LATEST = 'latest';
+function formContent(el, designer, id) {
+    const w = designer.words.savedForms;
+    const partOf = (page) => {
+        const node = (0, layout_tree_1.locate)(page, id)?.node;
+        return node?.type === 'form' ? node : null;
+    };
+    // ---- which saved form: the store's, loaded once; the one placed stays even when the store no longer has it ----
+    const which = el('select', { class: 'fd-input fd-select', 'aria-label': w.savedForm });
+    let listed = null;
+    void designer.savedForms().then((found) => {
+        listed = found;
+        draw(designer.getPage());
+    });
+    which.addEventListener('change', async () => {
+        const chosen = which.value;
+        // Loaded first, with what it places: one that would hold this page is refused, saying why.
+        await designer.loadSavedForm(chosen);
+        if (!designer.setForm(id, { page: chosen, version: null }))
+            draw(designer.getPage());
+    });
+    // ---- the latest version, or one kept to ----
+    const version = el('select', { class: 'fd-input fd-select', 'aria-label': w.version });
+    version.addEventListener('change', () => designer.setForm(id, { version: version.value === LATEST ? null : Number(version.value) }));
+    // ---- its title: the saved form's own, words of this page's, or none ----
+    const title = el('input', { class: 'fd-input', 'aria-label': w.title, autocomplete: 'off' });
+    title.addEventListener('input', () => designer.setForm(id, { title: title.value === '' ? null : title.value }));
+    const showTitle = el('input', { type: 'checkbox', 'aria-label': w.showTitle });
+    showTitle.addEventListener('change', () => designer.setForm(id, { title: showTitle.checked ? null : '' }));
+    // ---- where its answers go: kept once typed and left, a name half typed being no name yet ----
+    const name = el('input', { class: 'fd-input', 'aria-label': w.answersGoUnder, autocomplete: 'off', spellcheck: 'false' });
+    name.addEventListener('change', () => {
+        if (!designer.setForm(id, { name: name.value }))
+            name.setAttribute('aria-invalid', 'true');
+    });
+    const open = el('button', { type: 'button', class: 'fd-button' }, w.openIt);
+    open.addEventListener('click', () => {
+        const node = partOf(designer.getPage());
+        if (node)
+            designer.openForm(node.page);
+    });
+    const openRow = (0, panel_controls_1.setting)(el, 'content', 'Open it', open, { hint: w.openHint, words: w.openIt });
+    function draw(page) {
+        const node = partOf(page);
+        if (!node)
+            return;
+        // The saved forms to pick from, and the one placed even if the store has it no longer.
+        const choices = [...(listed ?? [])];
+        if (!choices.some((c) => c.id === node.page))
+            choices.unshift({ id: node.page, title: listed ? w.notFound(node.page) : node.page });
+        const key = choices.map((c) => `${c.id}:${c.title}`).join('|');
+        if (which.dataset['key'] !== key) {
+            which.dataset['key'] = key;
+            which.replaceChildren(...choices.map((c) => el('option', { value: c.id }, c.title)));
+        }
+        which.value = node.page;
+        versions(node);
+        const saved = designer.savedForm(node.page, node.version)?.page ?? designer.savedForm(node.page)?.page ?? null;
+        title.placeholder = saved?.title ?? '';
+        showTitle.checked = node.title !== '';
+        (0, writes_1.setHidden)(title, node.title === '');
+        if (!focused(title) && node.title !== '')
+            title.value = node.title ?? '';
+        if (!focused(name)) {
+            name.value = node.name;
+            name.removeAttribute('aria-invalid');
+        }
+        (0, writes_1.setHidden)(openRow, !designer.canOpenForm());
+    }
+    function versions(node) {
+        const known = designer.savedForm(node.page);
+        const published = known ? [...known.versions].reverse() : [];
+        const options = [[LATEST, w.latest], ...published.map((v) => [String(v.version), w.versionOn(v.version, v.publishedAt)])];
+        // A version kept to that the store has not got still shows, as the Checks list names it.
+        if (node.version !== undefined && !published.some((v) => v.version === node.version))
+            options.push([String(node.version), w.versionOnly(node.version)]);
+        const key = options.map(([value, words]) => `${value}:${words}`).join('|');
+        if (version.dataset['key'] !== key) {
+            version.dataset['key'] = key;
+            version.replaceChildren(...options.map(([value, words]) => el('option', { value }, words)));
+        }
+        version.value = node.version === undefined ? LATEST : String(node.version);
+    }
+    return {
+        rows: [
+            (0, panel_controls_1.setting)(el, 'content', 'Saved form', which, { words: w.savedForm }),
+            (0, panel_controls_1.setting)(el, 'content', 'Version', version, { hint: w.versionHint, words: w.version }),
+            (0, panel_controls_1.setting)(el, 'content', 'Title', [el('label', { class: 'fd-q-required' }, showTitle, el('span', {}, w.showTitle)), title], { hint: w.titleHint, words: w.title }),
+            (0, panel_controls_1.setting)(el, 'content', 'Answers go under', name, { hint: w.answersHint, words: w.answersGoUnder }),
+            openRow,
+        ],
+        update: draw,
+    };
+}
+//# sourceMappingURL=panel-form.js.map

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

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

package/src/lib/panel-form.mjs

@@ -0,0 +1,104 @@
+import { locate } from './layout-tree.mjs';
+import { setting } from './panel-controls.mjs';
+import { setHidden } from './writes.mjs';
+/**
+ * A saved form's own settings, on the Content tab: which saved form, the
+ * latest version or one kept to, its title, and where its answers go. What is
+ * inside it is changed on its own page: “Open it”, when the app gives a way.
+ */
+const focused = (node) => node.ownerDocument.activeElement === node;
+const LATEST = 'latest';
+export function formContent(el, designer, id) {
+    const w = designer.words.savedForms;
+    const partOf = (page) => {
+        const node = locate(page, id)?.node;
+        return node?.type === 'form' ? node : null;
+    };
+    // ---- which saved form: the store's, loaded once; the one placed stays even when the store no longer has it ----
+    const which = el('select', { class: 'fd-input fd-select', 'aria-label': w.savedForm });
+    let listed = null;
+    void designer.savedForms().then((found) => {
+        listed = found;
+        draw(designer.getPage());
+    });
+    which.addEventListener('change', async () => {
+        const chosen = which.value;
+        // Loaded first, with what it places: one that would hold this page is refused, saying why.
+        await designer.loadSavedForm(chosen);
+        if (!designer.setForm(id, { page: chosen, version: null }))
+            draw(designer.getPage());
+    });
+    // ---- the latest version, or one kept to ----
+    const version = el('select', { class: 'fd-input fd-select', 'aria-label': w.version });
+    version.addEventListener('change', () => designer.setForm(id, { version: version.value === LATEST ? null : Number(version.value) }));
+    // ---- its title: the saved form's own, words of this page's, or none ----
+    const title = el('input', { class: 'fd-input', 'aria-label': w.title, autocomplete: 'off' });
+    title.addEventListener('input', () => designer.setForm(id, { title: title.value === '' ? null : title.value }));
+    const showTitle = el('input', { type: 'checkbox', 'aria-label': w.showTitle });
+    showTitle.addEventListener('change', () => designer.setForm(id, { title: showTitle.checked ? null : '' }));
+    // ---- where its answers go: kept once typed and left, a name half typed being no name yet ----
+    const name = el('input', { class: 'fd-input', 'aria-label': w.answersGoUnder, autocomplete: 'off', spellcheck: 'false' });
+    name.addEventListener('change', () => {
+        if (!designer.setForm(id, { name: name.value }))
+            name.setAttribute('aria-invalid', 'true');
+    });
+    const open = el('button', { type: 'button', class: 'fd-button' }, w.openIt);
+    open.addEventListener('click', () => {
+        const node = partOf(designer.getPage());
+        if (node)
+            designer.openForm(node.page);
+    });
+    const openRow = setting(el, 'content', 'Open it', open, { hint: w.openHint, words: w.openIt });
+    function draw(page) {
+        const node = partOf(page);
+        if (!node)
+            return;
+        // The saved forms to pick from, and the one placed even if the store has it no longer.
+        const choices = [...(listed ?? [])];
+        if (!choices.some((c) => c.id === node.page))
+            choices.unshift({ id: node.page, title: listed ? w.notFound(node.page) : node.page });
+        const key = choices.map((c) => `${c.id}:${c.title}`).join('|');
+        if (which.dataset['key'] !== key) {
+            which.dataset['key'] = key;
+            which.replaceChildren(...choices.map((c) => el('option', { value: c.id }, c.title)));
+        }
+        which.value = node.page;
+        versions(node);
+        const saved = designer.savedForm(node.page, node.version)?.page ?? designer.savedForm(node.page)?.page ?? null;
+        title.placeholder = saved?.title ?? '';
+        showTitle.checked = node.title !== '';
+        setHidden(title, node.title === '');
+        if (!focused(title) && node.title !== '')
+            title.value = node.title ?? '';
+        if (!focused(name)) {
+            name.value = node.name;
+            name.removeAttribute('aria-invalid');
+        }
+        setHidden(openRow, !designer.canOpenForm());
+    }
+    function versions(node) {
+        const known = designer.savedForm(node.page);
+        const published = known ? [...known.versions].reverse() : [];
+        const options = [[LATEST, w.latest], ...published.map((v) => [String(v.version), w.versionOn(v.version, v.publishedAt)])];
+        // A version kept to that the store has not got still shows, as the Checks list names it.
+        if (node.version !== undefined && !published.some((v) => v.version === node.version))
+            options.push([String(node.version), w.versionOnly(node.version)]);
+        const key = options.map(([value, words]) => `${value}:${words}`).join('|');
+        if (version.dataset['key'] !== key) {
+            version.dataset['key'] = key;
+            version.replaceChildren(...options.map(([value, words]) => el('option', { value }, words)));
+        }
+        version.value = node.version === undefined ? LATEST : String(node.version);
+    }
+    return {
+        rows: [
+            setting(el, 'content', 'Saved form', which, { words: w.savedForm }),
+            setting(el, 'content', 'Version', version, { hint: w.versionHint, words: w.version }),
+            setting(el, 'content', 'Title', [el('label', { class: 'fd-q-required' }, showTitle, el('span', {}, w.showTitle)), title], { hint: w.titleHint, words: w.title }),
+            setting(el, 'content', 'Answers go under', name, { hint: w.answersHint, words: w.answersGoUnder }),
+            openRow,
+        ],
+        update: draw,
+    };
+}
+//# sourceMappingURL=panel-form.mjs.map

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

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

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

@@ -0,0 +1,12 @@
+import type { ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+import { type PropertiesView } 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 declare function groupProperties(el: ElementFactory, designer: Designer, id: string): PropertiesView;
+/** Parts side by side: the columns they take, and how wide they are where they sit. */
+export declare function arrangementProperties(el: ElementFactory, designer: Designer, id: string): PropertiesView;

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

@@ -0,0 +1,12 @@
+import type { ElementFactory } from './chrome';
+import type { Designer } from './designer';
+import { type PropertiesView } from './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.
+ */
+export declare function groupProperties(el: ElementFactory, designer: Designer, id: string): PropertiesView;
+/** Parts side by side: the columns they take, and how wide they are where they sit. */
+export declare function arrangementProperties(el: ElementFactory, designer: Designer, id: string): PropertiesView;

package/src/lib/panel-group.js

@@ -0,0 +1,81 @@
+"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");
+const roles_setting_1 = require("./roles-setting");
+const shown_while_1 = require("./shown-while");
+/**
+ * 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 roles = (0, roles_setting_1.rolesSetting)(el, designer, id);
+    const shownWhile = (0, shown_while_1.shownWhileSetting)(el, designer, id);
+    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'), roles.element, shownWhile.element);
+    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);
+            roles.update(page);
+            shownWhile.update(page);
+            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,77 @@
+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';
+import { rolesSetting } from './roles-setting.mjs';
+import { shownWhileSetting } from './shown-while.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 roles = rolesSetting(el, designer, id);
+    const shownWhile = shownWhileSetting(el, designer, id);
+    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'), roles.element, shownWhile.element);
+    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);
+            roles.update(page);
+            shownWhile.update(page);
+            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;