@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/panel-look-sheet.mjs

@@ -0,0 +1,57 @@
+import { pageLookSettings, wearLook } from './panel-look.mjs';
+export function lookSheet(options) {
+    const { el, designer, root, bar, wearer } = options;
+    const w = designer.words.panel;
+    const look = pageLookSettings(el, designer);
+    const button = el('button', { type: 'button', class: 'fd-button fd-look-button', 'aria-label': w.look, 'aria-haspopup': 'dialog', 'aria-expanded': 'false', title: w.lookTitle }, w.look);
+    const close = el('button', { type: 'button', class: 'fd-icon-button', 'aria-label': w.close, title: w.close }, '×');
+    const sheet = el('aside', { class: 'fd-look-sheet fd-properties', role: 'dialog', 'aria-label': w.look }, el('div', { class: 'fd-look-sheet-head' }, el('div', {}, el('div', { class: 'fd-insp-kind' }, el('span', { class: 'fd-panel-title' }, w.look)), el('div', { class: 'fd-insp-name' }, w.formsLook)), close), el('div', { class: 'fd-props fd-insp-panel fd-look-sheet-body' }, ...look.rows));
+    // On the page only while it is open.
+    const show = (open) => {
+        if (open)
+            root.append(sheet);
+        else
+            sheet.remove();
+        // Drawn as it opens: what changed while it was away — a look saved in another editor — is shown.
+        if (open)
+            draw();
+        button.setAttribute('aria-expanded', String(open));
+        // Under the bar, so the bar's buttons stay in reach.
+        if (open)
+            sheet.style.setProperty('--fd-sheet-top', `${Math.max(8, Math.round(bar.getBoundingClientRect().bottom + 8))}px`);
+        if (open)
+            sheet.querySelector('[aria-pressed="true"], button, input')?.focus();
+    };
+    button.addEventListener('click', () => show(!sheet.isConnected));
+    close.addEventListener('click', () => {
+        show(false);
+        button.focus();
+    });
+    sheet.addEventListener('keydown', (event) => {
+        if (event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        // The editor's own Escape puts a card down; this one only puts the sheet away.
+        event.stopPropagation();
+        show(false);
+        button.focus();
+    });
+    const draw = () => {
+        const page = designer.getPage();
+        look.update(page);
+        wearLook(wearer, page.look);
+    };
+    const leave = designer.subscribe(draw);
+    bar.insertBefore(button, bar.querySelector('[data-checks]'));
+    draw();
+    return {
+        button,
+        sheet,
+        destroy() {
+            leave();
+            button.remove();
+            sheet.remove();
+        },
+    };
+}
+//# sourceMappingURL=panel-look-sheet.mjs.map

package/src/lib/panel-look-sheet.mjs.map

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

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

@@ -0,0 +1,26 @@
+import { type Page, type PageLook } from '@fieldia/core';
+import type { ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+/**
+ * The Look tab's settings: looks to start from, then the page's look — its
+ * accent, font, spacing, corners, where labels sit and how wide, light or
+ * dark, and each kind of part's own — and how a group is drawn. What is set
+ * is worn at once by the canvas, as the viewer wears it.
+ */
+export interface LookSetting {
+    /** Its rows, on the Look tab. */
+    rows: HTMLElement[];
+    update(page: Page): void;
+}
+/** A few accents to start from; any colour can be picked besides. */
+export declare const SWATCHES: readonly [string, string][];
+/** The page's look, setting by setting. Pressing what is pressed gives the setting back to the skin. */
+export declare function pageLookSettings(el: ElementFactory, designer: Designer): LookSetting;
+/** How a group is drawn: a card, plain, a line under its title, or a frame with the title on it. */
+export declare function groupStyleSetting(el: ElementFactory, designer: Designer, id: string): LookSetting;
+/**
+ * Wear the page's look on part of the editor — the canvas, the survey's
+ * cards — as the viewer wears it on a form: a setting taken back is taken
+ * off too. It wears the skin of the editor round it.
+ */
+export declare function wearLook(element: HTMLElement, look: PageLook | undefined): void;

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

@@ -0,0 +1,26 @@
+import { type Page, type PageLook } from '@fieldia/core';
+import type { ElementFactory } from './chrome';
+import type { Designer } from './designer';
+/**
+ * The Look tab's settings: looks to start from, then the page's look — its
+ * accent, font, spacing, corners, where labels sit and how wide, light or
+ * dark, and each kind of part's own — and how a group is drawn. What is set
+ * is worn at once by the canvas, as the viewer wears it.
+ */
+export interface LookSetting {
+    /** Its rows, on the Look tab. */
+    rows: HTMLElement[];
+    update(page: Page): void;
+}
+/** A few accents to start from; any colour can be picked besides. */
+export declare const SWATCHES: readonly [string, string][];
+/** The page's look, setting by setting. Pressing what is pressed gives the setting back to the skin. */
+export declare function pageLookSettings(el: ElementFactory, designer: Designer): LookSetting;
+/** How a group is drawn: a card, plain, a line under its title, or a frame with the title on it. */
+export declare function groupStyleSetting(el: ElementFactory, designer: Designer, id: string): LookSetting;
+/**
+ * Wear the page's look on part of the editor — the canvas, the survey's
+ * cards — as the viewer wears it on a form: a setting taken back is taken
+ * off too. It wears the skin of the editor round it.
+ */
+export declare function wearLook(element: HTMLElement, look: PageLook | undefined): void;

package/src/lib/panel-look.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SWATCHES = void 0;
+exports.pageLookSettings = pageLookSettings;
+exports.groupStyleSetting = groupStyleSetting;
+exports.wearLook = wearLook;
+const core_1 = require("@fieldia/core");
+const viewer_1 = require("@fieldia/viewer");
+const layout_tree_1 = require("./layout-tree");
+const look_row_1 = require("./look-row");
+const panel_controls_1 = require("./panel-controls");
+const panel_look_parts_1 = require("./panel-look-parts");
+/** A few accents to start from; any colour can be picked besides. */
+exports.SWATCHES = [
+    ['#1677ff', 'Blue'],
+    ['#002855', 'Navy'],
+    ['#1f7a4d', 'Green'],
+    ['#6941c6', 'Purple'],
+    ['#c4320a', 'Orange'],
+    ['#0e7c86', 'Teal'],
+];
+/** The look's choices of a few, by their key, in the order they stand: their names and words are the designer's. */
+const CHOICES = [
+    { key: 'font', name: 'Font', values: ['system', 'serif', 'rounded'] },
+    { key: 'density', name: 'Spacing', values: ['compact', 'comfortable', 'roomy'] },
+    { key: 'corners', name: 'Corners', values: ['square', 'soft', 'round'] },
+    { key: 'labels', name: 'Labels', values: ['above', 'beside', 'hidden'] },
+    { key: 'helpShown', name: 'Help', values: ['below', 'tooltip', 'both'] },
+    { key: 'readonlyShown', name: 'Read-only fields', values: ['text', 'box'] },
+    { key: 'scheme', name: 'Colours', values: ['light', 'dark', 'auto'] },
+];
+/** A choice of the look in the designer's words: its name, each value's words, a hint. */
+function lookChoice(w, key, value) {
+    switch (key) {
+        case 'font':
+            return { value, words: w.fonts[value] };
+        case 'density':
+            return { value, words: w.spacings[value] };
+        case 'corners':
+            return { value, words: w.cornerKinds[value] };
+        case 'labels':
+            return value === 'hidden' ? { value, words: w.inTheBox, title: w.inBoxTitle } : { value, words: value === 'above' ? w.above : w.beside };
+        case 'helpShown':
+            return { value, words: w.helpWays[value] };
+        case 'readonlyShown':
+            return { value, words: w.readonlyWays[value] };
+        default:
+            return value === 'auto' ? { value, words: w.schemes.auto, title: w.schemeAutoTitle } : { value, words: w.schemes[value] };
+    }
+}
+const lookName = (w, key) => ({ font: w.font, density: w.spacing, corners: w.corners, labels: w.labels, helpShown: w.help, readonlyShown: w.readonlyFields, scheme: w.colours })[key];
+const lookHint = (w, key) => (key === 'density' ? w.spacingHint : key === 'labels' ? w.labelsHint : key === 'helpShown' ? w.helpShownHint : key === 'readonlyShown' ? w.readonlyShownHint : undefined);
+/** The page's look, setting by setting. Pressing what is pressed gives the setting back to the skin. */
+function pageLookSettings(el, designer) {
+    const w = designer.words.panel;
+    const presets = (0, look_row_1.lookRow)(el, designer);
+    // ---- the accent: a swatch, or any colour ----
+    const swatches = (0, panel_controls_1.segmented)(el, w.accentColour, exports.SWATCHES.map(([value, name]) => ({ value, words: '', label: w.swatches[value] ?? name })), (value) => designer.setLook({ accent: value }), { toggle: true, className: 'fd-insp-swatches' });
+    for (const button of swatches.element.querySelectorAll('[data-choice]'))
+        button.style.setProperty('--fd-swatch', button.dataset['choice']);
+    const any = el('input', { type: 'color', class: 'fd-insp-colour', 'aria-label': w.anyAccent, title: w.anyColour });
+    any.addEventListener('input', () => designer.setLook({ accent: any.value }));
+    const skins = el('button', { type: 'button', class: 'fd-button fd-button-link fd-insp-reset', 'aria-label': w.accentAsSkin }, w.asTheSkin);
+    skins.addEventListener('click', () => designer.setLook({ accent: null }));
+    const accent = (0, panel_controls_1.setting)(el, 'look', 'Accent colour', [swatches.element, el('div', { class: 'fd-insp-any' }, el('label', { class: 'fd-insp-any-colour' }, any, el('span', {}, w.anyColour)), skins)], {
+        hint: w.accentHint,
+        words: w.accentColour,
+    });
+    // ---- the choices of a few ----
+    const segs = new Map();
+    const rows = CHOICES.map(({ key, name, values }) => {
+        const seg = (0, panel_controls_1.segmented)(el, lookName(w, key), values.map((value) => lookChoice(w, key, value)), (value) => designer.setLook({ [key]: value }), { toggle: true });
+        segs.set(key, seg);
+        return (0, panel_controls_1.setting)(el, 'look', name, seg.element, { hint: lookHint(w, key), words: lookName(w, key) });
+    });
+    // ---- how wide labels beside their boxes are ----
+    const slider = el('input', { type: 'range', class: 'fd-insp-slider', min: '60', max: '320', step: '10', 'aria-label': w.labelWidth });
+    const number = el('input', { type: 'number', class: 'fd-input fd-insp-number', min: '60', max: '320', step: '1', 'aria-label': w.labelWidth });
+    const width = (value) => {
+        const n = Number(value);
+        if (Number.isInteger(n) && n >= 60 && n <= 320)
+            designer.setLook({ labelWidth: n });
+    };
+    slider.addEventListener('input', () => width(slider.value));
+    number.addEventListener('input', () => width(number.value));
+    const widthRow = (0, panel_controls_1.setting)(el, 'look', 'Label width', [el('div', { class: 'fd-insp-range' }, slider, number, el('span', { class: 'fd-insp-unit' }, w.px))], { words: w.labelWidth });
+    const readonlyRow = rows[CHOICES.findIndex((c) => c.key === 'readonlyShown')];
+    const labelsAt = CHOICES.findIndex((c) => c.key === 'labels');
+    rows.splice(labelsAt + 1, 0, widthRow);
+    const parts = (0, panel_look_parts_1.partLookSettings)(el, designer);
+    const note = (0, panel_controls_1.onTab)(el('p', { class: 'fd-properties-hint' }, w.tokensNote), 'look');
+    return {
+        rows: [...presets.rows, accent, ...rows, parts.row, note],
+        update(page) {
+            presets.update(page);
+            parts.update(page);
+            const look = page.look ?? {};
+            swatches.set(look.accent?.toLowerCase());
+            skins.hidden = !look.accent;
+            if (any.ownerDocument.activeElement !== any)
+                any.value = look.accent?.toLowerCase() ?? '#1677ff';
+            for (const [key, seg] of segs)
+                seg.set(look[key]);
+            // Read-only fields are a record's: a survey's answers are all to be given.
+            readonlyRow.hidden = page.data.kind !== 'record';
+            widthRow.hidden = look.labels !== 'beside';
+            const value = String(look.labelWidth ?? 140);
+            if (number.ownerDocument.activeElement !== number)
+                number.value = value;
+            if (number.ownerDocument.activeElement !== slider)
+                slider.value = value;
+        },
+    };
+}
+/** Small drawings of each way a group is drawn. Constant shapes, never words from a page. */
+const STYLES = [
+    ['card', 'Card', '<rect x="4" y="4" width="36" height="22" rx="4" fill="none" stroke="currentColor"/><path d="M9 11h14" stroke="currentColor"/>'],
+    ['plain', 'Plain', '<path d="M9 11h14M9 17h26M9 21h20" stroke="currentColor" opacity=".7"/>'],
+    ['line', 'Line', '<path d="M6 9h16M6 13h32" stroke="currentColor"/><path d="M6 19h26" stroke="currentColor" opacity=".5"/>'],
+    ['framed', 'Framed', '<rect x="4" y="7" width="36" height="19" rx="2" fill="none" stroke="currentColor"/><path d="M8 7h12" stroke="var(--fd-surface)" stroke-width="3"/><path d="M9 7h10" stroke="currentColor"/>'],
+    ['inline', 'One line', '<path d="M4 15h7" stroke="currentColor" opacity=".7"/><rect x="13" y="11" width="9" height="8" rx="1.5" fill="none" stroke="currentColor"/><path d="M24 15h4" stroke="currentColor" opacity=".7"/><rect x="30" y="11" width="10" height="8" rx="1.5" fill="none" stroke="currentColor"/>'],
+];
+/** How a group is drawn: a card, plain, a line under its title, or a frame with the title on it. */
+function groupStyleSetting(el, designer, id) {
+    const w = designer.words.panel;
+    const picture = (shape) => {
+        const box = el('span', { class: 'fd-insp-style-picture', 'aria-hidden': 'true' });
+        box.innerHTML = `<svg viewBox="0 0 44 30" focusable="false">${shape}</svg>`;
+        return box;
+    };
+    const style = (0, panel_controls_1.segmented)(el, w.style, STYLES.map(([value, , shape]) => ({ value, words: w.styles[value], picture: picture(shape) })), (value) => {
+        if (value)
+            designer.setSectionLook(id, { style: value });
+    }, { className: 'fd-insp-styles' });
+    const row = (0, panel_controls_1.setting)(el, 'look', 'Style', style.element, { hint: w.styleHint, words: w.style });
+    return {
+        rows: [row],
+        update(page) {
+            const section = (0, layout_tree_1.nodeOf)(page, id);
+            if ((0, layout_tree_1.isSection)(section))
+                style.set(section.style ?? 'card');
+        },
+    };
+}
+const WORN = ['data-font', 'data-density', 'data-corners', 'data-scheme', 'data-accent'];
+/** The tokens of each kind of part's look, as the viewer names them: `--fd-inputs-bg`, … */
+const PART_TOKENS = ['bg', 'border', 'radius', 'size', 'accent', 'accent-text'];
+const WORN_TOKENS = ['--fd-label-width', '--fd-look-accent', '--fd-look-accent-text', '--fd-look-accent-dark', '--fd-look-accent-dark-text'];
+/**
+ * Wear the page's look on part of the editor — the canvas, the survey's
+ * cards — as the viewer wears it on a form: a setting taken back is taken
+ * off too. It wears the skin of the editor round it.
+ */
+function wearLook(element, look) {
+    const skin = element.parentElement?.closest('[data-fd-skin]')?.getAttribute('data-fd-skin') ?? null;
+    // The same look and skin as last time: worn already. Taken off and put on again, the whole part would be styled anew.
+    const was = worn.get(element);
+    if (was && was.look === look && was.skin === skin)
+        return;
+    worn.set(element, { look, skin });
+    if (!element.classList.contains('fd-form') || !element.classList.contains('fd-look-worn'))
+        element.classList.add('fd-form', 'fd-look-worn');
+    if (skin && element.getAttribute('data-fd-skin') !== skin)
+        element.setAttribute('data-fd-skin', skin);
+    for (const name of WORN)
+        element.removeAttribute(name);
+    for (const token of WORN_TOKENS)
+        element.style.removeProperty(token);
+    // Each kind of part's: its name on the part, and every token of that kind.
+    for (const kind of Object.keys(core_1.PART_LOOKS)) {
+        element.removeAttribute(`data-${kind}`);
+        for (const token of PART_TOKENS)
+            element.style.removeProperty(`--fd-${kind}-${token}`);
+    }
+    (0, viewer_1.applyLook)(element, look);
+}
+/** The look and skin each part wears now. */
+const worn = new WeakMap();
+//# sourceMappingURL=panel-look.js.map

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

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

package/src/lib/panel-look.mjs

@@ -0,0 +1,173 @@
+import { PART_LOOKS } from '@fieldia/core';
+import { applyLook } from '@fieldia/viewer';
+import { isSection, nodeOf } from './layout-tree.mjs';
+import { lookRow } from './look-row.mjs';
+import { onTab, segmented, setting } from './panel-controls.mjs';
+import { partLookSettings } from './panel-look-parts.mjs';
+/** A few accents to start from; any colour can be picked besides. */
+export const SWATCHES = [
+    ['#1677ff', 'Blue'],
+    ['#002855', 'Navy'],
+    ['#1f7a4d', 'Green'],
+    ['#6941c6', 'Purple'],
+    ['#c4320a', 'Orange'],
+    ['#0e7c86', 'Teal'],
+];
+/** The look's choices of a few, by their key, in the order they stand: their names and words are the designer's. */
+const CHOICES = [
+    { key: 'font', name: 'Font', values: ['system', 'serif', 'rounded'] },
+    { key: 'density', name: 'Spacing', values: ['compact', 'comfortable', 'roomy'] },
+    { key: 'corners', name: 'Corners', values: ['square', 'soft', 'round'] },
+    { key: 'labels', name: 'Labels', values: ['above', 'beside', 'hidden'] },
+    { key: 'helpShown', name: 'Help', values: ['below', 'tooltip', 'both'] },
+    { key: 'readonlyShown', name: 'Read-only fields', values: ['text', 'box'] },
+    { key: 'scheme', name: 'Colours', values: ['light', 'dark', 'auto'] },
+];
+/** A choice of the look in the designer's words: its name, each value's words, a hint. */
+function lookChoice(w, key, value) {
+    switch (key) {
+        case 'font':
+            return { value, words: w.fonts[value] };
+        case 'density':
+            return { value, words: w.spacings[value] };
+        case 'corners':
+            return { value, words: w.cornerKinds[value] };
+        case 'labels':
+            return value === 'hidden' ? { value, words: w.inTheBox, title: w.inBoxTitle } : { value, words: value === 'above' ? w.above : w.beside };
+        case 'helpShown':
+            return { value, words: w.helpWays[value] };
+        case 'readonlyShown':
+            return { value, words: w.readonlyWays[value] };
+        default:
+            return value === 'auto' ? { value, words: w.schemes.auto, title: w.schemeAutoTitle } : { value, words: w.schemes[value] };
+    }
+}
+const lookName = (w, key) => ({ font: w.font, density: w.spacing, corners: w.corners, labels: w.labels, helpShown: w.help, readonlyShown: w.readonlyFields, scheme: w.colours })[key];
+const lookHint = (w, key) => (key === 'density' ? w.spacingHint : key === 'labels' ? w.labelsHint : key === 'helpShown' ? w.helpShownHint : key === 'readonlyShown' ? w.readonlyShownHint : undefined);
+/** The page's look, setting by setting. Pressing what is pressed gives the setting back to the skin. */
+export function pageLookSettings(el, designer) {
+    const w = designer.words.panel;
+    const presets = lookRow(el, designer);
+    // ---- the accent: a swatch, or any colour ----
+    const swatches = segmented(el, w.accentColour, SWATCHES.map(([value, name]) => ({ value, words: '', label: w.swatches[value] ?? name })), (value) => designer.setLook({ accent: value }), { toggle: true, className: 'fd-insp-swatches' });
+    for (const button of swatches.element.querySelectorAll('[data-choice]'))
+        button.style.setProperty('--fd-swatch', button.dataset['choice']);
+    const any = el('input', { type: 'color', class: 'fd-insp-colour', 'aria-label': w.anyAccent, title: w.anyColour });
+    any.addEventListener('input', () => designer.setLook({ accent: any.value }));
+    const skins = el('button', { type: 'button', class: 'fd-button fd-button-link fd-insp-reset', 'aria-label': w.accentAsSkin }, w.asTheSkin);
+    skins.addEventListener('click', () => designer.setLook({ accent: null }));
+    const accent = setting(el, 'look', 'Accent colour', [swatches.element, el('div', { class: 'fd-insp-any' }, el('label', { class: 'fd-insp-any-colour' }, any, el('span', {}, w.anyColour)), skins)], {
+        hint: w.accentHint,
+        words: w.accentColour,
+    });
+    // ---- the choices of a few ----
+    const segs = new Map();
+    const rows = CHOICES.map(({ key, name, values }) => {
+        const seg = segmented(el, lookName(w, key), values.map((value) => lookChoice(w, key, value)), (value) => designer.setLook({ [key]: value }), { toggle: true });
+        segs.set(key, seg);
+        return setting(el, 'look', name, seg.element, { hint: lookHint(w, key), words: lookName(w, key) });
+    });
+    // ---- how wide labels beside their boxes are ----
+    const slider = el('input', { type: 'range', class: 'fd-insp-slider', min: '60', max: '320', step: '10', 'aria-label': w.labelWidth });
+    const number = el('input', { type: 'number', class: 'fd-input fd-insp-number', min: '60', max: '320', step: '1', 'aria-label': w.labelWidth });
+    const width = (value) => {
+        const n = Number(value);
+        if (Number.isInteger(n) && n >= 60 && n <= 320)
+            designer.setLook({ labelWidth: n });
+    };
+    slider.addEventListener('input', () => width(slider.value));
+    number.addEventListener('input', () => width(number.value));
+    const widthRow = setting(el, 'look', 'Label width', [el('div', { class: 'fd-insp-range' }, slider, number, el('span', { class: 'fd-insp-unit' }, w.px))], { words: w.labelWidth });
+    const readonlyRow = rows[CHOICES.findIndex((c) => c.key === 'readonlyShown')];
+    const labelsAt = CHOICES.findIndex((c) => c.key === 'labels');
+    rows.splice(labelsAt + 1, 0, widthRow);
+    const parts = partLookSettings(el, designer);
+    const note = onTab(el('p', { class: 'fd-properties-hint' }, w.tokensNote), 'look');
+    return {
+        rows: [...presets.rows, accent, ...rows, parts.row, note],
+        update(page) {
+            presets.update(page);
+            parts.update(page);
+            const look = page.look ?? {};
+            swatches.set(look.accent?.toLowerCase());
+            skins.hidden = !look.accent;
+            if (any.ownerDocument.activeElement !== any)
+                any.value = look.accent?.toLowerCase() ?? '#1677ff';
+            for (const [key, seg] of segs)
+                seg.set(look[key]);
+            // Read-only fields are a record's: a survey's answers are all to be given.
+            readonlyRow.hidden = page.data.kind !== 'record';
+            widthRow.hidden = look.labels !== 'beside';
+            const value = String(look.labelWidth ?? 140);
+            if (number.ownerDocument.activeElement !== number)
+                number.value = value;
+            if (number.ownerDocument.activeElement !== slider)
+                slider.value = value;
+        },
+    };
+}
+/** Small drawings of each way a group is drawn. Constant shapes, never words from a page. */
+const STYLES = [
+    ['card', 'Card', '<rect x="4" y="4" width="36" height="22" rx="4" fill="none" stroke="currentColor"/><path d="M9 11h14" stroke="currentColor"/>'],
+    ['plain', 'Plain', '<path d="M9 11h14M9 17h26M9 21h20" stroke="currentColor" opacity=".7"/>'],
+    ['line', 'Line', '<path d="M6 9h16M6 13h32" stroke="currentColor"/><path d="M6 19h26" stroke="currentColor" opacity=".5"/>'],
+    ['framed', 'Framed', '<rect x="4" y="7" width="36" height="19" rx="2" fill="none" stroke="currentColor"/><path d="M8 7h12" stroke="var(--fd-surface)" stroke-width="3"/><path d="M9 7h10" stroke="currentColor"/>'],
+    ['inline', 'One line', '<path d="M4 15h7" stroke="currentColor" opacity=".7"/><rect x="13" y="11" width="9" height="8" rx="1.5" fill="none" stroke="currentColor"/><path d="M24 15h4" stroke="currentColor" opacity=".7"/><rect x="30" y="11" width="10" height="8" rx="1.5" fill="none" stroke="currentColor"/>'],
+];
+/** How a group is drawn: a card, plain, a line under its title, or a frame with the title on it. */
+export function groupStyleSetting(el, designer, id) {
+    const w = designer.words.panel;
+    const picture = (shape) => {
+        const box = el('span', { class: 'fd-insp-style-picture', 'aria-hidden': 'true' });
+        box.innerHTML = `<svg viewBox="0 0 44 30" focusable="false">${shape}</svg>`;
+        return box;
+    };
+    const style = segmented(el, w.style, STYLES.map(([value, , shape]) => ({ value, words: w.styles[value], picture: picture(shape) })), (value) => {
+        if (value)
+            designer.setSectionLook(id, { style: value });
+    }, { className: 'fd-insp-styles' });
+    const row = setting(el, 'look', 'Style', style.element, { hint: w.styleHint, words: w.style });
+    return {
+        rows: [row],
+        update(page) {
+            const section = nodeOf(page, id);
+            if (isSection(section))
+                style.set(section.style ?? 'card');
+        },
+    };
+}
+const WORN = ['data-font', 'data-density', 'data-corners', 'data-scheme', 'data-accent'];
+/** The tokens of each kind of part's look, as the viewer names them: `--fd-inputs-bg`, … */
+const PART_TOKENS = ['bg', 'border', 'radius', 'size', 'accent', 'accent-text'];
+const WORN_TOKENS = ['--fd-label-width', '--fd-look-accent', '--fd-look-accent-text', '--fd-look-accent-dark', '--fd-look-accent-dark-text'];
+/**
+ * Wear the page's look on part of the editor — the canvas, the survey's
+ * cards — as the viewer wears it on a form: a setting taken back is taken
+ * off too. It wears the skin of the editor round it.
+ */
+export function wearLook(element, look) {
+    const skin = element.parentElement?.closest('[data-fd-skin]')?.getAttribute('data-fd-skin') ?? null;
+    // The same look and skin as last time: worn already. Taken off and put on again, the whole part would be styled anew.
+    const was = worn.get(element);
+    if (was && was.look === look && was.skin === skin)
+        return;
+    worn.set(element, { look, skin });
+    if (!element.classList.contains('fd-form') || !element.classList.contains('fd-look-worn'))
+        element.classList.add('fd-form', 'fd-look-worn');
+    if (skin && element.getAttribute('data-fd-skin') !== skin)
+        element.setAttribute('data-fd-skin', skin);
+    for (const name of WORN)
+        element.removeAttribute(name);
+    for (const token of WORN_TOKENS)
+        element.style.removeProperty(token);
+    // Each kind of part's: its name on the part, and every token of that kind.
+    for (const kind of Object.keys(PART_LOOKS)) {
+        element.removeAttribute(`data-${kind}`);
+        for (const token of PART_TOKENS)
+            element.style.removeProperty(`--fd-${kind}-${token}`);
+    }
+    applyLook(element, look);
+}
+/** The look and skin each part wears now. */
+const worn = new WeakMap();
+//# sourceMappingURL=panel-look.mjs.map

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

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

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

@@ -0,0 +1,11 @@
+import type { ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+import type { PropertiesView } from './screen-properties.mjs';
+/**
+ * Nothing picked: the screen itself — its description and a sheet's title
+ * (Content), whether it is sections or a record sheet and, for a sheet, what
+ * sits around it — the pager and breadcrumbs the app gives, the attachment
+ * and the side panel beside it (Layout) — its look (Look), and what it does
+ * at its moments (Rules).
+ */
+export declare function pageProperties(el: ElementFactory, designer: Designer): PropertiesView;

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

@@ -0,0 +1,11 @@
+import type { ElementFactory } from './chrome';
+import type { Designer } from './designer';
+import type { PropertiesView } from './screen-properties';
+/**
+ * Nothing picked: the screen itself — its description and a sheet's title
+ * (Content), whether it is sections or a record sheet and, for a sheet, what
+ * sits around it — the pager and breadcrumbs the app gives, the attachment
+ * and the side panel beside it (Layout) — its look (Look), and what it does
+ * at its moments (Rules).
+ */
+export declare function pageProperties(el: ElementFactory, designer: Designer): PropertiesView;