@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/panel-block.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockContent = blockContent;
+const layout_tree_1 = require("./layout-tree");
+const panel_controls_1 = require("./panel-controls");
+const panel_form_1 = require("./panel-form");
+const steps_panel_1 = require("./steps-panel");
+const hotkey_setting_1 = require("./hotkey-setting");
+const shown_while_1 = require("./shown-while");
+const focused = (node) => node.ownerDocument.activeElement === node;
+function blockContent(el, designer, id) {
+    const kind = (0, layout_tree_1.locate)(designer.getPage(), id)?.node.type;
+    // embed lane: a saved form placed here.
+    if (kind === 'form')
+        return (0, panel_form_1.formContent)(el, designer, id);
+    const w = designer.words.panel;
+    if (kind === 'image') {
+        const src = el('input', { class: 'fd-input', 'aria-label': w.pictureAddress, placeholder: 'https://…', inputmode: 'url', autocomplete: 'off' });
+        src.addEventListener('input', () => designer.updateBlock(id, { src: src.value }));
+        const alt = el('input', { class: 'fd-input', 'aria-label': w.description, placeholder: w.pictureShows, autocomplete: 'off' });
+        alt.addEventListener('input', () => designer.updateBlock(id, { alt: alt.value }));
+        // How wide — its own width, a size, the whole row, or pixels — and where it sits in its row.
+        const width = (0, panel_controls_1.segmented)(el, w.width, [
+            { value: 'auto', words: w.own, label: w.ownWidth },
+            { value: 'small', words: w.sizeS, label: w.small },
+            { value: 'medium', words: w.sizeM, label: w.medium },
+            { value: 'large', words: w.sizeL, label: w.large },
+            { value: 'full', words: w.full, label: w.fullRow },
+        ], (value) => value && designer.updateBlock(id, { width: value === 'auto' ? null : value }));
+        const pixels = el('input', { type: 'number', class: 'fd-input', 'aria-label': w.widthInPixels, min: '16', max: '4000', step: '1', inputmode: 'numeric', placeholder: w.px });
+        pixels.addEventListener('change', () => designer.updateBlock(id, { width: pixels.value.trim() ? Number(pixels.value) : null }));
+        const place = (0, panel_controls_1.segmented)(el, w.place, [
+            { value: 'start', words: w.start, title: w.atStart },
+            { value: 'center', words: w.centre },
+            { value: 'end', words: w.end, title: w.atEnd },
+        ], (value) => value && designer.updateBlock(id, { align: value === 'start' ? null : value }));
+        const href = el('input', { class: 'fd-input', 'aria-label': w.link, placeholder: 'https://…', inputmode: 'url', autocomplete: 'off' });
+        // Kept once typed and left: an address half typed is not one yet.
+        href.addEventListener('change', () => designer.updateBlock(id, { href: href.value }));
+        const caption = el('input', { class: 'fd-input', 'aria-label': w.caption, placeholder: w.wordsUnderPicture, autocomplete: 'off' });
+        caption.addEventListener('input', () => designer.updateBlock(id, { caption: caption.value }));
+        return {
+            rows: [
+                (0, panel_controls_1.setting)(el, 'content', 'Picture address', src, { words: w.pictureAddress }),
+                (0, panel_controls_1.setting)(el, 'content', 'Description', alt, { hint: w.descriptionHint, words: w.description }),
+                (0, panel_controls_1.setting)(el, 'content', 'Width', [width.element, pixels], { words: w.width }),
+                (0, panel_controls_1.setting)(el, 'content', 'Place', place.element, { words: w.place }),
+                (0, panel_controls_1.setting)(el, 'content', 'Link', href, { hint: w.opensNewTab, words: w.link }),
+                (0, panel_controls_1.setting)(el, 'content', 'Caption', caption, { words: w.caption }),
+            ],
+            update(page) {
+                const node = (0, layout_tree_1.locate)(page, id)?.node;
+                if (node?.type !== 'image')
+                    return;
+                if (!focused(src))
+                    src.value = node.src;
+                if (!focused(alt))
+                    alt.value = node.alt;
+                alt.setAttribute('aria-invalid', String(!node.alt.trim()));
+                width.set(typeof node.width === 'number' ? null : (node.width ?? 'auto'));
+                if (!focused(pixels))
+                    pixels.value = typeof node.width === 'number' ? String(node.width) : '';
+                place.set(node.align ?? 'start');
+                if (!focused(href))
+                    href.value = node.href ?? '';
+                if (!focused(caption))
+                    caption.value = node.caption ?? '';
+            },
+        };
+    }
+    if (kind === 'text') {
+        const style = (0, panel_controls_1.segmented)(el, w.readsAs, [
+            { value: 'heading', words: w.heading },
+            { value: 'paragraph', words: w.words },
+            { value: 'note', words: w.note, title: w.noteTitle },
+            { value: 'alert', words: w.alertBox, title: w.alertBoxTitle },
+        ], (value) => value && designer.updateBlock(id, { style: value }));
+        // An alert's colour, as a sheet's alert has one.
+        const tone = (0, panel_controls_1.segmented)(el, w.tone, ['info', 'success', 'warning', 'danger'].map((value) => ({ value, words: w.tones[value] })), (value) => value && designer.updateBlock(id, { tone: value }));
+        const toneRow = (0, panel_controls_1.setting)(el, 'content', 'Alert colour', tone.element, { words: w.alertColour });
+        const textWhile = (0, shown_while_1.shownWhileSetting)(el, designer, id, { tab: 'content' });
+        return {
+            rows: [(0, panel_controls_1.setting)(el, 'content', 'Reads as', style.element, { words: w.readsAs }), toneRow, textWhile.element],
+            update(page) {
+                const node = (0, layout_tree_1.locate)(page, id)?.node;
+                if (node?.type !== 'text')
+                    return;
+                textWhile.update(page);
+                style.set(node.style ?? 'paragraph');
+                toneRow.hidden = node.style !== 'alert';
+                tone.set(node.tone ?? 'info');
+            },
+        };
+    }
+    if (kind === 'button') {
+        const words = el('input', { class: 'fd-input', 'aria-label': w.buttonWords, autocomplete: 'off' });
+        words.addEventListener('input', () => designer.updateBlock(id, { label: words.value }));
+        // steps lane: what it does when clicked, how it looks, and the question it asks first — as a header's button has.
+        const clicked = (0, steps_panel_1.whenClicked)(el, designer, id);
+        const look = (0, panel_controls_1.segmented)(el, w.look, ['secondary', 'primary', 'danger', 'link'].map((value) => ({ value, words: w.buttonLooks[value] })), (value) => value && designer.updateBlock(id, { style: value }));
+        const asks = el('input', { class: 'fd-input', 'aria-label': w.asksFirst, placeholder: w.actsAtOnce, autocomplete: 'off' });
+        asks.addEventListener('input', () => designer.updateBlock(id, { confirm: asks.value }));
+        const hotkey = el('input', { class: 'fd-input fd-hotkey-input', 'aria-label': w.hotkey, placeholder: 'V', autocomplete: 'off', spellcheck: 'false', maxlength: '11' });
+        hotkey.addEventListener('change', () => designer.updateBlock(id, { hotkey: hotkey.value }));
+        const buttonWhile = (0, shown_while_1.shownWhileSetting)(el, designer, id, { tab: 'content' });
+        return {
+            rows: [
+                (0, panel_controls_1.setting)(el, 'content', 'Button words', words, { words: w.buttonWords }),
+                clicked.element,
+                (0, panel_controls_1.setting)(el, 'content', 'Look', look.element, { words: w.look }),
+                (0, panel_controls_1.setting)(el, 'content', 'Asks first', asks, { words: w.asksFirst }),
+                (0, panel_controls_1.setting)(el, 'content', 'Key, with Alt', hotkey, { words: w.hotkey, hint: w.hotkeyHint }),
+                buttonWhile.element,
+            ],
+            update(page) {
+                const node = (0, layout_tree_1.locate)(page, id)?.node;
+                if (node?.type !== 'button')
+                    return;
+                if (!focused(words))
+                    words.value = node.label;
+                clicked.update(page);
+                look.set(node.style ?? 'secondary');
+                if (!focused(asks))
+                    asks.value = node.confirm ?? '';
+                if (!focused(hotkey))
+                    hotkey.value = (0, hotkey_setting_1.hotkeyShown)(node.hotkey);
+                buttonWhile.update(page);
+            },
+        };
+    }
+    return null;
+}
+//# sourceMappingURL=panel-block.js.map

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

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

package/src/lib/panel-block.mjs

@@ -0,0 +1,130 @@
+import { locate } from './layout-tree.mjs';
+import { segmented, setting } from './panel-controls.mjs';
+import { formContent } from './panel-form.mjs';
+import { whenClicked } from './steps-panel.mjs';
+import { hotkeyShown } from './hotkey-setting.mjs';
+import { shownWhileSetting } from './shown-while.mjs';
+const focused = (node) => node.ownerDocument.activeElement === node;
+export function blockContent(el, designer, id) {
+    const kind = locate(designer.getPage(), id)?.node.type;
+    // embed lane: a saved form placed here.
+    if (kind === 'form')
+        return formContent(el, designer, id);
+    const w = designer.words.panel;
+    if (kind === 'image') {
+        const src = el('input', { class: 'fd-input', 'aria-label': w.pictureAddress, placeholder: 'https://…', inputmode: 'url', autocomplete: 'off' });
+        src.addEventListener('input', () => designer.updateBlock(id, { src: src.value }));
+        const alt = el('input', { class: 'fd-input', 'aria-label': w.description, placeholder: w.pictureShows, autocomplete: 'off' });
+        alt.addEventListener('input', () => designer.updateBlock(id, { alt: alt.value }));
+        // How wide — its own width, a size, the whole row, or pixels — and where it sits in its row.
+        const width = segmented(el, w.width, [
+            { value: 'auto', words: w.own, label: w.ownWidth },
+            { value: 'small', words: w.sizeS, label: w.small },
+            { value: 'medium', words: w.sizeM, label: w.medium },
+            { value: 'large', words: w.sizeL, label: w.large },
+            { value: 'full', words: w.full, label: w.fullRow },
+        ], (value) => value && designer.updateBlock(id, { width: value === 'auto' ? null : value }));
+        const pixels = el('input', { type: 'number', class: 'fd-input', 'aria-label': w.widthInPixels, min: '16', max: '4000', step: '1', inputmode: 'numeric', placeholder: w.px });
+        pixels.addEventListener('change', () => designer.updateBlock(id, { width: pixels.value.trim() ? Number(pixels.value) : null }));
+        const place = segmented(el, w.place, [
+            { value: 'start', words: w.start, title: w.atStart },
+            { value: 'center', words: w.centre },
+            { value: 'end', words: w.end, title: w.atEnd },
+        ], (value) => value && designer.updateBlock(id, { align: value === 'start' ? null : value }));
+        const href = el('input', { class: 'fd-input', 'aria-label': w.link, placeholder: 'https://…', inputmode: 'url', autocomplete: 'off' });
+        // Kept once typed and left: an address half typed is not one yet.
+        href.addEventListener('change', () => designer.updateBlock(id, { href: href.value }));
+        const caption = el('input', { class: 'fd-input', 'aria-label': w.caption, placeholder: w.wordsUnderPicture, autocomplete: 'off' });
+        caption.addEventListener('input', () => designer.updateBlock(id, { caption: caption.value }));
+        return {
+            rows: [
+                setting(el, 'content', 'Picture address', src, { words: w.pictureAddress }),
+                setting(el, 'content', 'Description', alt, { hint: w.descriptionHint, words: w.description }),
+                setting(el, 'content', 'Width', [width.element, pixels], { words: w.width }),
+                setting(el, 'content', 'Place', place.element, { words: w.place }),
+                setting(el, 'content', 'Link', href, { hint: w.opensNewTab, words: w.link }),
+                setting(el, 'content', 'Caption', caption, { words: w.caption }),
+            ],
+            update(page) {
+                const node = locate(page, id)?.node;
+                if (node?.type !== 'image')
+                    return;
+                if (!focused(src))
+                    src.value = node.src;
+                if (!focused(alt))
+                    alt.value = node.alt;
+                alt.setAttribute('aria-invalid', String(!node.alt.trim()));
+                width.set(typeof node.width === 'number' ? null : (node.width ?? 'auto'));
+                if (!focused(pixels))
+                    pixels.value = typeof node.width === 'number' ? String(node.width) : '';
+                place.set(node.align ?? 'start');
+                if (!focused(href))
+                    href.value = node.href ?? '';
+                if (!focused(caption))
+                    caption.value = node.caption ?? '';
+            },
+        };
+    }
+    if (kind === 'text') {
+        const style = segmented(el, w.readsAs, [
+            { value: 'heading', words: w.heading },
+            { value: 'paragraph', words: w.words },
+            { value: 'note', words: w.note, title: w.noteTitle },
+            { value: 'alert', words: w.alertBox, title: w.alertBoxTitle },
+        ], (value) => value && designer.updateBlock(id, { style: value }));
+        // An alert's colour, as a sheet's alert has one.
+        const tone = segmented(el, w.tone, ['info', 'success', 'warning', 'danger'].map((value) => ({ value, words: w.tones[value] })), (value) => value && designer.updateBlock(id, { tone: value }));
+        const toneRow = setting(el, 'content', 'Alert colour', tone.element, { words: w.alertColour });
+        const textWhile = shownWhileSetting(el, designer, id, { tab: 'content' });
+        return {
+            rows: [setting(el, 'content', 'Reads as', style.element, { words: w.readsAs }), toneRow, textWhile.element],
+            update(page) {
+                const node = locate(page, id)?.node;
+                if (node?.type !== 'text')
+                    return;
+                textWhile.update(page);
+                style.set(node.style ?? 'paragraph');
+                toneRow.hidden = node.style !== 'alert';
+                tone.set(node.tone ?? 'info');
+            },
+        };
+    }
+    if (kind === 'button') {
+        const words = el('input', { class: 'fd-input', 'aria-label': w.buttonWords, autocomplete: 'off' });
+        words.addEventListener('input', () => designer.updateBlock(id, { label: words.value }));
+        // steps lane: what it does when clicked, how it looks, and the question it asks first — as a header's button has.
+        const clicked = whenClicked(el, designer, id);
+        const look = segmented(el, w.look, ['secondary', 'primary', 'danger', 'link'].map((value) => ({ value, words: w.buttonLooks[value] })), (value) => value && designer.updateBlock(id, { style: value }));
+        const asks = el('input', { class: 'fd-input', 'aria-label': w.asksFirst, placeholder: w.actsAtOnce, autocomplete: 'off' });
+        asks.addEventListener('input', () => designer.updateBlock(id, { confirm: asks.value }));
+        const hotkey = el('input', { class: 'fd-input fd-hotkey-input', 'aria-label': w.hotkey, placeholder: 'V', autocomplete: 'off', spellcheck: 'false', maxlength: '11' });
+        hotkey.addEventListener('change', () => designer.updateBlock(id, { hotkey: hotkey.value }));
+        const buttonWhile = shownWhileSetting(el, designer, id, { tab: 'content' });
+        return {
+            rows: [
+                setting(el, 'content', 'Button words', words, { words: w.buttonWords }),
+                clicked.element,
+                setting(el, 'content', 'Look', look.element, { words: w.look }),
+                setting(el, 'content', 'Asks first', asks, { words: w.asksFirst }),
+                setting(el, 'content', 'Key, with Alt', hotkey, { words: w.hotkey, hint: w.hotkeyHint }),
+                buttonWhile.element,
+            ],
+            update(page) {
+                const node = locate(page, id)?.node;
+                if (node?.type !== 'button')
+                    return;
+                if (!focused(words))
+                    words.value = node.label;
+                clicked.update(page);
+                look.set(node.style ?? 'secondary');
+                if (!focused(asks))
+                    asks.value = node.confirm ?? '';
+                if (!focused(hotkey))
+                    hotkey.value = hotkeyShown(node.hotkey);
+                buttonWhile.update(page);
+            },
+        };
+    }
+    return null;
+}
+//# sourceMappingURL=panel-block.mjs.map

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

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

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

@@ -0,0 +1,39 @@
+import type { ElementFactory } from './chrome.mjs';
+import type { PanelTab } from './panel-tabs.mjs';
+/**
+ * A setting's row. One box is wrapped in a label, so its name points at it;
+ * anything else — a choice of a few, a list — sits in a group of that name.
+ */
+export declare function setting(el: ElementFactory, tab: PanelTab, name: string, control: Node | Node[], options?: {
+    hint?: string | HTMLElement;
+    words?: string;
+}): HTMLElement;
+/** Put a row someone else made on a tab, under the name the search finds it by. */
+export declare function onTab<T extends HTMLElement>(row: T, tab: PanelTab, name?: string): T;
+export interface Choice<T> {
+    value: T;
+    words: string;
+    /** Its name in full where the words are short, such as "1 column" for "1"; it starts with the words, as a screen reader's user says them. */
+    label?: string;
+    /** A line of help shown on pointing at it. */
+    title?: string;
+    /** Drawn above the words, such as a small picture of a group's style. */
+    picture?: Node;
+}
+export interface Segmented<T> {
+    element: HTMLElement;
+    /** Press the choice of this value, or none. */
+    set(value: T | null | undefined): void;
+    /** Show only the choices that apply now. */
+    only(keep: (value: T) => boolean): void;
+}
+/**
+ * A choice of a few, side by side: each a button pressed or not. With
+ * `toggle`, pressing the one pressed takes the setting back (`null`).
+ */
+export declare function segmented<T extends string | number>(el: ElementFactory, name: string, choices: Choice<T>[], choose: (value: T | null) => void, options?: {
+    toggle?: boolean;
+    className?: string;
+}): Segmented<T>;
+/** Whether an element shows within `scope`: nothing between them hidden. */
+export declare function shownWithin(element: Element, scope: Element): boolean;

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

@@ -0,0 +1,39 @@
+import type { ElementFactory } from './chrome';
+import type { PanelTab } from './panel-tabs';
+/**
+ * A setting's row. One box is wrapped in a label, so its name points at it;
+ * anything else — a choice of a few, a list — sits in a group of that name.
+ */
+export declare function setting(el: ElementFactory, tab: PanelTab, name: string, control: Node | Node[], options?: {
+    hint?: string | HTMLElement;
+    words?: string;
+}): HTMLElement;
+/** Put a row someone else made on a tab, under the name the search finds it by. */
+export declare function onTab<T extends HTMLElement>(row: T, tab: PanelTab, name?: string): T;
+export interface Choice<T> {
+    value: T;
+    words: string;
+    /** Its name in full where the words are short, such as "1 column" for "1"; it starts with the words, as a screen reader's user says them. */
+    label?: string;
+    /** A line of help shown on pointing at it. */
+    title?: string;
+    /** Drawn above the words, such as a small picture of a group's style. */
+    picture?: Node;
+}
+export interface Segmented<T> {
+    element: HTMLElement;
+    /** Press the choice of this value, or none. */
+    set(value: T | null | undefined): void;
+    /** Show only the choices that apply now. */
+    only(keep: (value: T) => boolean): void;
+}
+/**
+ * A choice of a few, side by side: each a button pressed or not. With
+ * `toggle`, pressing the one pressed takes the setting back (`null`).
+ */
+export declare function segmented<T extends string | number>(el: ElementFactory, name: string, choices: Choice<T>[], choose: (value: T | null) => void, options?: {
+    toggle?: boolean;
+    className?: string;
+}): Segmented<T>;
+/** Whether an element shows within `scope`: nothing between them hidden. */
+export declare function shownWithin(element: Element, scope: Element): boolean;

package/src/lib/panel-controls.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setting = setting;
+exports.onTab = onTab;
+exports.segmented = segmented;
+exports.shownWithin = shownWithin;
+/**
+ * The panel's controls: a setting's row — its name, its control, a line of
+ * help — on the tab it belongs to, and a choice of a few, pressed like the
+ * mockup's segmented buttons. A row says which tab it is on (`data-tab`) and
+ * what a person calls it (`data-setting`), so the search and Find anything
+ * can find it, and the panel can sort it into its tab.
+ */
+const BOXES = 'input, select, textarea';
+/**
+ * A setting's row. One box is wrapped in a label, so its name points at it;
+ * anything else — a choice of a few, a list — sits in a group of that name.
+ */
+function setting(el, tab, name, control, options = {}) {
+    const controls = Array.isArray(control) ? control : [control];
+    const single = controls.length === 1 && controls[0] instanceof Element && controls[0].matches(BOXES);
+    const hint = typeof options.hint === 'string' ? el('p', { class: 'fd-properties-hint fd-set-hint' }, options.hint) : options.hint;
+    const row = el(single ? 'label' : 'div', { class: 'fd-prop fd-set', 'data-tab': tab, 'data-setting': name }, el('span', { class: 'fd-prop-name' }, options.words ?? name), ...controls, ...(hint ? [hint] : []));
+    return row;
+}
+/** Put a row someone else made on a tab, under the name the search finds it by. */
+function onTab(row, tab, name) {
+    row.dataset['tab'] = tab;
+    if (name)
+        row.dataset['setting'] = name;
+    return row;
+}
+/**
+ * A choice of a few, side by side: each a button pressed or not. With
+ * `toggle`, pressing the one pressed takes the setting back (`null`).
+ */
+function segmented(el, name, choices, choose, options = {}) {
+    const element = el('div', { class: `fd-seg fd-insp-seg ${options.className ?? ''}`.trim(), role: 'group', 'aria-label': name });
+    const buttons = choices.map((choice) => {
+        const button = el('button', { type: 'button', class: 'fd-seg-button', 'data-choice': String(choice.value), 'aria-pressed': 'false', title: choice.title ?? choice.label, 'aria-label': choice.label }, ...(choice.picture ? [choice.picture] : []), el('span', { class: 'fd-seg-words' }, choice.words));
+        button.addEventListener('click', () => {
+            const on = button.getAttribute('aria-pressed') === 'true';
+            if (on && !options.toggle)
+                return;
+            choose(on ? null : choice.value);
+        });
+        element.append(button);
+        return { button, choice };
+    });
+    return {
+        element,
+        set(value) {
+            for (const { button, choice } of buttons)
+                button.setAttribute('aria-pressed', String(value !== null && value !== undefined && choice.value === value));
+        },
+        only(keep) {
+            for (const { button, choice } of buttons)
+                button.hidden = !keep(choice.value);
+        },
+    };
+}
+/** Whether an element shows within `scope`: nothing between them hidden. */
+function shownWithin(element, scope) {
+    for (let at = element; at && at !== scope; at = at.parentElement)
+        if (at.hidden)
+            return false;
+    return true;
+}
+//# sourceMappingURL=panel-controls.js.map

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

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

package/src/lib/panel-controls.mjs

@@ -0,0 +1,63 @@
+/**
+ * The panel's controls: a setting's row — its name, its control, a line of
+ * help — on the tab it belongs to, and a choice of a few, pressed like the
+ * mockup's segmented buttons. A row says which tab it is on (`data-tab`) and
+ * what a person calls it (`data-setting`), so the search and Find anything
+ * can find it, and the panel can sort it into its tab.
+ */
+const BOXES = 'input, select, textarea';
+/**
+ * A setting's row. One box is wrapped in a label, so its name points at it;
+ * anything else — a choice of a few, a list — sits in a group of that name.
+ */
+export function setting(el, tab, name, control, options = {}) {
+    const controls = Array.isArray(control) ? control : [control];
+    const single = controls.length === 1 && controls[0] instanceof Element && controls[0].matches(BOXES);
+    const hint = typeof options.hint === 'string' ? el('p', { class: 'fd-properties-hint fd-set-hint' }, options.hint) : options.hint;
+    const row = el(single ? 'label' : 'div', { class: 'fd-prop fd-set', 'data-tab': tab, 'data-setting': name }, el('span', { class: 'fd-prop-name' }, options.words ?? name), ...controls, ...(hint ? [hint] : []));
+    return row;
+}
+/** Put a row someone else made on a tab, under the name the search finds it by. */
+export function onTab(row, tab, name) {
+    row.dataset['tab'] = tab;
+    if (name)
+        row.dataset['setting'] = name;
+    return row;
+}
+/**
+ * A choice of a few, side by side: each a button pressed or not. With
+ * `toggle`, pressing the one pressed takes the setting back (`null`).
+ */
+export function segmented(el, name, choices, choose, options = {}) {
+    const element = el('div', { class: `fd-seg fd-insp-seg ${options.className ?? ''}`.trim(), role: 'group', 'aria-label': name });
+    const buttons = choices.map((choice) => {
+        const button = el('button', { type: 'button', class: 'fd-seg-button', 'data-choice': String(choice.value), 'aria-pressed': 'false', title: choice.title ?? choice.label, 'aria-label': choice.label }, ...(choice.picture ? [choice.picture] : []), el('span', { class: 'fd-seg-words' }, choice.words));
+        button.addEventListener('click', () => {
+            const on = button.getAttribute('aria-pressed') === 'true';
+            if (on && !options.toggle)
+                return;
+            choose(on ? null : choice.value);
+        });
+        element.append(button);
+        return { button, choice };
+    });
+    return {
+        element,
+        set(value) {
+            for (const { button, choice } of buttons)
+                button.setAttribute('aria-pressed', String(value !== null && value !== undefined && choice.value === value));
+        },
+        only(keep) {
+            for (const { button, choice } of buttons)
+                button.hidden = !keep(choice.value);
+        },
+    };
+}
+/** Whether an element shows within `scope`: nothing between them hidden. */
+export function shownWithin(element, scope) {
+    for (let at = element; at && at !== scope; at = at.parentElement)
+        if (at.hidden)
+            return false;
+    return true;
+}
+//# sourceMappingURL=panel-controls.mjs.map

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

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

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

@@ -0,0 +1,5 @@
+import { type ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+import type { SampleOptions } from './rules-sample.mjs';
+import type { PropertiesView } from './screen-properties.mjs';
+export declare function fieldProperties(el: ElementFactory, designer: Designer, id: string, sampling?: SampleOptions): PropertiesView;

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

@@ -0,0 +1,5 @@
+import { type ElementFactory } from './chrome';
+import type { Designer } from './designer';
+import type { SampleOptions } from './rules-sample';
+import type { PropertiesView } from './screen-properties';
+export declare function fieldProperties(el: ElementFactory, designer: Designer, id: string, sampling?: SampleOptions): PropertiesView;