@fieldia/designer 0.0.0-stage → 0.11.0

package/src/lib/steps-words.mjs

@@ -0,0 +1,131 @@
+import { en } from './locales/en/index.mjs';
+import { containers } from './page-tree.mjs';
+import { shownTitle } from './saved-forms.mjs';
+import { formulaInWords } from './rules-formula.mjs';
+import { setValueInWords } from './rules-words.mjs';
+import { eachStep, everyPlace, fieldsNamed, fieldsRead, pressOf, showTargets } from './steps-places.mjs';
+const labelOf = (page, name) => page.fields[name]?.label || name;
+/** A step in words, without the steps it runs once a page it opened is saved. */
+export function stepSentence(page, step, words = en, saved = () => undefined) {
+    const w = words.steps;
+    const field = (name) => labelOf(page, name);
+    const formula = (source) => formulaInWords(page, source, words);
+    let said;
+    switch (step.do) {
+        case 'open': {
+            // The condition before what comes back, so it reads as the page's: "Open Customer in a panel when VIP is Yes, then …".
+            const other = saved(step.page);
+            const opened = w.open(shownTitle(other, page.language) || w.unknownPage(step.page), step.as ?? 'dialog', step.side);
+            const record = step.record ? w.onRecord(formula(step.record)) : '';
+            const values = Object.keys(step.values ?? {}).map((name) => other?.fields[name]?.label || name);
+            const into = Object.keys(step.into ?? {}).map(field);
+            const head = `${opened}${record}${values.length ? w.startingWith(values) : ''}`;
+            return `${whenOf(page, head, step.when, words)}${into.length ? w.thenPut(into) : ''}`;
+        }
+        case 'set':
+            said = w.set(field(step.field), setValueInWords(page, page.fields[step.field], step.value, words));
+            break;
+        case 'clear':
+            said = w.clear(field(step.field));
+            break;
+        case 'addLine':
+            said = w.addLine(field(step.field));
+            break;
+        case 'check':
+            said = step.fields?.length ? w.checkFields(step.fields.map(field)) : w.checkAll;
+            break;
+        case 'save':
+            said = page.data.kind === 'responses' ? w.send : w.save;
+            break;
+        case 'reset':
+            said = w.reset;
+            break;
+        case 'goTo':
+            said = w.goTo(showTargets(page).find((t) => t.id === step.target)?.label || step.target);
+            break;
+        case 'say':
+            said = step.tone && step.tone !== 'info' ? w.sayTone(step.message, step.tone) : w.say(step.message);
+            break;
+        case 'ask':
+            said = w.ask(step.message);
+            break;
+        case 'call': {
+            const params = Object.keys(step.params ?? {}).length;
+            said = params ? w.callWith(step.action, params) : w.call(step.action);
+            break;
+        }
+        case 'close':
+            said = w.close;
+            break;
+    }
+    return whenOf(page, said, step.when, words);
+}
+/** A sentence with when it runs: always, never, or when a condition holds. */
+function whenOf(page, sentence, when, words) {
+    if (when === undefined || when === true)
+        return sentence;
+    if (when === false)
+        return words.steps.never(sentence);
+    return words.steps.when(sentence, formulaInWords(page, when, words));
+}
+/** A list of steps, one sentence a line, the steps run once an opened page is saved under it. */
+export function stepsLines(page, steps, words = en, saved) {
+    return eachStep(steps).map(({ step, path }) => {
+        let line = stepSentence(page, step, words, saved);
+        for (let depth = 1; depth < path.length; depth++)
+            line = words.steps.nested(line);
+        return line;
+    });
+}
+/** A place's name as a person knows it: a button's words, a field's label, a moment, a tab shown. */
+export function placeName(page, place, words = en) {
+    const w = words.steps;
+    if ('press' in place)
+        return pressOf(page, place.press)?.label ?? place.press;
+    if ('change' in place)
+        return labelOf(page, place.change);
+    if ('moment' in place)
+        return w.momentNames[place.moment];
+    return w.whenShown(showTargets(page).find((t) => t.id === place.show)?.label || place.show);
+}
+/** Every list of steps on the page, in reading order, said. */
+export function pageSteps(page, words = en, saved) {
+    return everyPlace(page).map(({ place, steps }) => {
+        const group = 'press' in place ? 'clicked' : 'change' in place ? 'changes' : 'moments';
+        const part = 'press' in place ? place.press : 'change' in place ? fieldPlace(page, place.change) : null;
+        const reads = [...new Set(eachStep(steps).flatMap(({ step }) => [...fieldsNamed(step), ...fieldsRead(step)]))];
+        const codes = [...new Set(eachStep(steps).flatMap(({ step }) => (step.do === 'call' ? [step.action] : step.do === 'open' && !saved?.(step.page) ? [step.page] : [])))];
+        return { place, group, part, name: placeName(page, place, words), lines: stepsLines(page, steps, words, saved), reads, codes };
+    });
+}
+/** Words with the app's names in them kept apart as code: each name, where it stands as a word, in a `code` of its own. */
+export function withCode(doc, text, codes) {
+    const names = codes.filter(Boolean).sort((a, b) => b.length - a.length);
+    if (!names.length)
+        return [doc.createTextNode(text)];
+    const escaped = names.map((name) => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+    const pattern = new RegExp(`(?<![\\w-])(${escaped.join('|')})(?![\\w-])`, 'g');
+    const out = [];
+    let at = 0;
+    for (const match of text.matchAll(pattern)) {
+        if (match.index > at)
+            out.push(doc.createTextNode(text.slice(at, match.index)));
+        const code = doc.createElement('code');
+        code.className = 'fd-do-code';
+        code.textContent = match[0];
+        out.push(code);
+        at = match.index + match[0].length;
+    }
+    if (at < text.length)
+        out.push(doc.createTextNode(text.slice(at)));
+    return out;
+}
+/** Where a field is on the page, by its part's id: the first place it shows; null when it is not on it. */
+export function fieldPlace(page, name) {
+    for (const holder of containers(page))
+        for (const node of holder.children)
+            if (node.type === 'field' && node.field === name)
+                return node.id;
+    return null;
+}
+//# sourceMappingURL=steps-words.mjs.map

package/src/lib/steps-words.mjs.map

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

package/src/lib/structure-changes.d.mts

@@ -0,0 +1,14 @@
+import type { Field, FieldNode } from '@fieldia/core';
+import type { DesignerWords } from './designer-words.mjs';
+/**
+ * What changed in a structure's own settings from one version of a page to
+ * the next, in words, for the Publish dialog: the records a link offers, a
+ * table's totals and the columns people may hide. The widgets' settings —
+ * a signature's pen, an address's parts — are "how it shows".
+ */
+interface Placed {
+    field: Field;
+    node: FieldNode;
+}
+export declare function structureChanges(name: string, was: Placed, now: Placed, words?: DesignerWords): string[];
+export {};

package/src/lib/structure-changes.d.ts

@@ -0,0 +1,14 @@
+import type { Field, FieldNode } from '@fieldia/core';
+import type { DesignerWords } from './designer-words';
+/**
+ * What changed in a structure's own settings from one version of a page to
+ * the next, in words, for the Publish dialog: the records a link offers, a
+ * table's totals and the columns people may hide. The widgets' settings —
+ * a signature's pen, an address's parts — are "how it shows".
+ */
+interface Placed {
+    field: Field;
+    node: FieldNode;
+}
+export declare function structureChanges(name: string, was: Placed, now: Placed, words?: DesignerWords): string[];
+export {};

package/src/lib/structure-changes.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.structureChanges = structureChanges;
+const en_1 = require("./locales/en");
+const same = (a, b) => JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+function structureChanges(name, was, now, words = en_1.en) {
+    const w = words.changes;
+    const lines = [];
+    const filterOf = (p) => (p.field.type === 'many2one' || p.field.type === 'many2many' ? p.field.filter : undefined);
+    const filter = filterOf(now);
+    if (!same(filterOf(was), filter)) {
+        const one = filter?.length === 1 && 'op' in filter[0] && filter[0].op === '=' && filter[0].valueFrom === undefined ? filter[0] : null;
+        lines.push(!filter ? w.offersEvery(name) : one ? w.offersWhere(name, one.field, JSON.stringify(one.value)) : w.offersChanged(name));
+    }
+    if (now.field.type === 'one2many') {
+        const fields = now.field.fields;
+        const labels = (names) => words.parts.commaList(names.map((n) => fields[n]?.label ?? n));
+        if (!same(was.node.totals, now.node.totals))
+            lines.push(now.node.totals?.length ? w.addsUp(name, labels(now.node.totals)) : w.addsUpNothing(name));
+        if (!same(was.node.optionalColumns, now.node.optionalColumns))
+            lines.push(w.optionalColumns(name));
+    }
+    return lines;
+}
+//# sourceMappingURL=structure-changes.js.map

package/src/lib/structure-changes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"structure-changes.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/structure-changes.ts"],"names":[],"mappings":";;AAkBA,4CAgBC;AAhCD,qCAAkC;AAclC,MAAM,IAAI,GAAG,CAAC,CAAU,EAAE,CAAU,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC;AAEjG,SAAgB,gBAAgB,CAAC,IAAY,EAAE,GAAW,EAAE,GAAW,EAAE,QAAuB,OAAE;IAChG,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;IACxB,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,MAAM,QAAQ,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3H,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;QACjC,MAAM,GAAG,GAAG,MAAM,EAAE,MAAM,KAAK,CAAC,IAAI,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACtI,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IACtI,CAAC;IACD,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC;QAChC,MAAM,MAAM,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;QACnG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;QACnJ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;YAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IACrG,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC"}

package/src/lib/structure-changes.mjs

@@ -0,0 +1,22 @@
+import { en } from './locales/en/index.mjs';
+const same = (a, b) => JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+export function structureChanges(name, was, now, words = en) {
+    const w = words.changes;
+    const lines = [];
+    const filterOf = (p) => (p.field.type === 'many2one' || p.field.type === 'many2many' ? p.field.filter : undefined);
+    const filter = filterOf(now);
+    if (!same(filterOf(was), filter)) {
+        const one = filter?.length === 1 && 'op' in filter[0] && filter[0].op === '=' && filter[0].valueFrom === undefined ? filter[0] : null;
+        lines.push(!filter ? w.offersEvery(name) : one ? w.offersWhere(name, one.field, JSON.stringify(one.value)) : w.offersChanged(name));
+    }
+    if (now.field.type === 'one2many') {
+        const fields = now.field.fields;
+        const labels = (names) => words.parts.commaList(names.map((n) => fields[n]?.label ?? n));
+        if (!same(was.node.totals, now.node.totals))
+            lines.push(now.node.totals?.length ? w.addsUp(name, labels(now.node.totals)) : w.addsUpNothing(name));
+        if (!same(was.node.optionalColumns, now.node.optionalColumns))
+            lines.push(w.optionalColumns(name));
+    }
+    return lines;
+}
+//# sourceMappingURL=structure-changes.mjs.map

package/src/lib/structure-changes.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"structure-changes.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/structure-changes.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAclC,MAAM,IAAI,GAAG,CAAC,CAAU,EAAE,CAAU,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC;AAEjG,MAAM,UAAU,gBAAgB,CAAC,IAAY,EAAE,GAAW,EAAE,GAAW,EAAE,QAAuB,EAAE;IAChG,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;IACxB,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,MAAM,QAAQ,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3H,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;QACjC,MAAM,GAAG,GAAG,MAAM,EAAE,MAAM,KAAK,CAAC,IAAI,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACtI,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IACtI,CAAC;IACD,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC;QAChC,MAAM,MAAM,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;QACnG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;QACnJ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;YAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IACrG,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC"}

package/src/lib/structure-commands.d.mts

@@ -0,0 +1,31 @@
+import type { Page } from '@fieldia/core';
+/**
+ * The edits the structures need beyond their widget's settings: a table of
+ * lines' totals and the columns people may hide, and the records a link
+ * offers, by one condition. Each goes through the designer's `apply`, so it
+ * is validated, undone and saved as every other edit is.
+ */
+export interface StructureCommandsDeps {
+    apply(edit: (draft: Page) => void, merge?: string | null): boolean;
+    /** Whether a field is the backend's, whose definition the page does not change. */
+    fromModel(name: string): boolean;
+}
+/** A link's records, by one of their fields and a value it must have: "only where active is true". */
+export interface LinkCondition {
+    field: string;
+    value: string | number | boolean;
+}
+export interface StructureCommands {
+    /**
+     * A table of lines' number columns added up under it, and the columns people
+     * may hide or show, each shown or hidden to start with; `null` or none takes
+     * either away.
+     */
+    setLineTable(id: string, table: {
+        totals?: string[] | null;
+        optionalColumns?: Record<string, 'show' | 'hide'> | null;
+    }): boolean;
+    /** The records a link or links offer: only those where a field has a value; `null` offers them all. */
+    setLinkFilter(id: string, condition: LinkCondition | null): boolean;
+}
+export declare function structureCommands({ apply, fromModel }: StructureCommandsDeps): StructureCommands;

package/src/lib/structure-commands.d.ts

@@ -0,0 +1,31 @@
+import type { Page } from '@fieldia/core';
+/**
+ * The edits the structures need beyond their widget's settings: a table of
+ * lines' totals and the columns people may hide, and the records a link
+ * offers, by one condition. Each goes through the designer's `apply`, so it
+ * is validated, undone and saved as every other edit is.
+ */
+export interface StructureCommandsDeps {
+    apply(edit: (draft: Page) => void, merge?: string | null): boolean;
+    /** Whether a field is the backend's, whose definition the page does not change. */
+    fromModel(name: string): boolean;
+}
+/** A link's records, by one of their fields and a value it must have: "only where active is true". */
+export interface LinkCondition {
+    field: string;
+    value: string | number | boolean;
+}
+export interface StructureCommands {
+    /**
+     * A table of lines' number columns added up under it, and the columns people
+     * may hide or show, each shown or hidden to start with; `null` or none takes
+     * either away.
+     */
+    setLineTable(id: string, table: {
+        totals?: string[] | null;
+        optionalColumns?: Record<string, 'show' | 'hide'> | null;
+    }): boolean;
+    /** The records a link or links offer: only those where a field has a value; `null` offers them all. */
+    setLinkFilter(id: string, condition: LinkCondition | null): boolean;
+}
+export declare function structureCommands({ apply, fromModel }: StructureCommandsDeps): StructureCommands;

package/src/lib/structure-commands.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.structureCommands = structureCommands;
+const page_tree_1 = require("./page-tree");
+const refusal_1 = require("./refusal");
+function structureCommands({ apply, fromModel }) {
+    function question(draft, id) {
+        const found = (0, page_tree_1.findNode)(draft, id);
+        if (!found || found.node.type !== 'field')
+            throw new refusal_1.Refusal((w) => w.refusals.noQuestion(id));
+        return found.node;
+    }
+    return {
+        setLineTable(id, table) {
+            return apply((draft) => {
+                const node = question(draft, id);
+                const field = draft.fields[node.field];
+                if (field.type !== 'one2many')
+                    throw new refusal_1.Refusal((w) => w.refusals.onlyLinesTotals);
+                const numbers = (name) => ['integer', 'float', 'monetary'].includes(field.fields[name]?.type ?? '');
+                if (table.totals !== undefined) {
+                    const totals = (table.totals ?? []).filter((name) => field.fields[name]);
+                    if (totals.some((name) => !numbers(name)))
+                        throw new refusal_1.Refusal((w) => w.refusals.onlyNumbersAdd);
+                    if (totals.length)
+                        node.totals = totals;
+                    else
+                        delete node.totals;
+                }
+                if (table.optionalColumns !== undefined) {
+                    const optional = Object.entries(table.optionalColumns ?? {}).filter(([name]) => field.fields[name]);
+                    if (optional.length)
+                        node.optionalColumns = Object.fromEntries(optional);
+                    else
+                        delete node.optionalColumns;
+                }
+            });
+        },
+        setLinkFilter(id, condition) {
+            return apply((draft) => {
+                const node = question(draft, id);
+                const field = draft.fields[node.field];
+                if (field.type !== 'many2one' && field.type !== 'many2many')
+                    throw new refusal_1.Refusal((w) => w.refusals.onlyLinksOffer);
+                if (fromModel(node.field))
+                    throw new refusal_1.Refusal((w) => w.refusals.offersFromModel(field.label));
+                const name = condition?.field.trim() ?? '';
+                if (condition && !name)
+                    throw new refusal_1.Refusal((w) => w.refusals.sayWhichFields);
+                const kept = condition ? [{ field: name, op: '=', value: condition.value }] : [];
+                if (kept.length)
+                    field.filter = kept;
+                else
+                    delete field.filter;
+            }, `link-filter:${id}`);
+        },
+    };
+}
+//# sourceMappingURL=structure-commands.js.map

package/src/lib/structure-commands.js.map

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

package/src/lib/structure-commands.mjs

@@ -0,0 +1,56 @@
+import { findNode } from './page-tree.mjs';
+import { Refusal } from './refusal.mjs';
+export function structureCommands({ apply, fromModel }) {
+    function question(draft, id) {
+        const found = findNode(draft, id);
+        if (!found || found.node.type !== 'field')
+            throw new Refusal((w) => w.refusals.noQuestion(id));
+        return found.node;
+    }
+    return {
+        setLineTable(id, table) {
+            return apply((draft) => {
+                const node = question(draft, id);
+                const field = draft.fields[node.field];
+                if (field.type !== 'one2many')
+                    throw new Refusal((w) => w.refusals.onlyLinesTotals);
+                const numbers = (name) => ['integer', 'float', 'monetary'].includes(field.fields[name]?.type ?? '');
+                if (table.totals !== undefined) {
+                    const totals = (table.totals ?? []).filter((name) => field.fields[name]);
+                    if (totals.some((name) => !numbers(name)))
+                        throw new Refusal((w) => w.refusals.onlyNumbersAdd);
+                    if (totals.length)
+                        node.totals = totals;
+                    else
+                        delete node.totals;
+                }
+                if (table.optionalColumns !== undefined) {
+                    const optional = Object.entries(table.optionalColumns ?? {}).filter(([name]) => field.fields[name]);
+                    if (optional.length)
+                        node.optionalColumns = Object.fromEntries(optional);
+                    else
+                        delete node.optionalColumns;
+                }
+            });
+        },
+        setLinkFilter(id, condition) {
+            return apply((draft) => {
+                const node = question(draft, id);
+                const field = draft.fields[node.field];
+                if (field.type !== 'many2one' && field.type !== 'many2many')
+                    throw new Refusal((w) => w.refusals.onlyLinksOffer);
+                if (fromModel(node.field))
+                    throw new Refusal((w) => w.refusals.offersFromModel(field.label));
+                const name = condition?.field.trim() ?? '';
+                if (condition && !name)
+                    throw new Refusal((w) => w.refusals.sayWhichFields);
+                const kept = condition ? [{ field: name, op: '=', value: condition.value }] : [];
+                if (kept.length)
+                    field.filter = kept;
+                else
+                    delete field.filter;
+            }, `link-filter:${id}`);
+        },
+    };
+}
+//# sourceMappingURL=structure-commands.mjs.map

package/src/lib/structure-commands.mjs.map

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

package/src/lib/styles-canvas.d.mts

@@ -0,0 +1,11 @@
+/**
+ * The Advanced canvas's own styles: what keeps the canvas drawing each part
+ * where the form puts it, and the marks of Advanced — the drop line and the
+ * group tinted under it, the chip that says where, the width handle and the
+ * gutter between two parts, the guides of a grid's columns, the bar for
+ * several picked, the handle the canvas's own width is dragged by, and the
+ * note Simple mode shows on an arrangement.
+ *
+ * Logical properties throughout, so right to left mirrors on its own.
+ */
+export declare const DESIGNER_CANVAS_CSS = "\n/* ---- the canvas draws each part where the form puts it ---- */\n/* The page's own parts, the same room between them as the form leaves. */\n.fd-canvas-body.fd-sections { gap: var(--fd-gap-block, 24px); }\n/* A field's widget sits in the field as the form puts it, nothing drawn round it to take room. */\n.fd-canvas-widget:not([hidden]) { display: contents; }\n\n/* ---- Simple and Advanced ---- */\n/* Simple keeps an arrangement as Advanced laid it out, and says so on its top edge, where it is seen as it is picked. */\n.fd-simple-lock {\n  position: absolute; z-index: 8; inset-inline-end: 0; inset-block-start: 0; translate: 0 -50%; width: max-content; max-width: min(420px, 100%);\n  display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--fd-border-strong); border-radius: 8px;\n  background: var(--fd-surface); color: var(--fd-muted); font-size: 13px; line-height: 1.45; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);\n}\n.fd-simple-lock[hidden] { display: none; }\n.fd-simple-lock > .fd-button { justify-self: start; }\n\n/* ---- Advanced: where a carried part would go ---- */\n/* The marks are drawn in the canvas, placed against it, so they wear its colours; none takes the pointer. */\n.fd-canvas { position: relative; }\n.fd-canvas > :is(.fd-drop-bar, .fd-drop-zone, .fd-drop-chip) { position: absolute; pointer-events: none; }\n/* The line where it would go: beside a part, under it, or across a grid between its rows. */\n.fd-drop-bar { z-index: 30; background: var(--fd-accent); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 25%, transparent); }\n/* A whole group as the target: tinted, never outlined. */\n.fd-drop-zone { z-index: 29; background: color-mix(in srgb, var(--fd-accent) 7%, transparent); border-radius: 10px; }\n/* The chip by the pointer: what is carried, and where it would go \u2014 or why not. */\n.fd-drop-chip {\n  z-index: 31; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; width: max-content; max-width: 300px;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-accent); border-radius: 7px; padding: 5px 9px;\n  font-size: 12.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);\n}\n.fd-drop-where { flex-basis: 100%; font-weight: 500; font-size: 11.5px; color: var(--fd-muted); }\n.fd-drop-chip.fd-drop-refused { border-color: var(--fd-error); }\n.fd-drop-chip.fd-drop-refused .fd-drop-where { color: var(--fd-error); }\n/* What is carried stays where it is, dimmed, until it is let go. */\n.fd-drag-carried { opacity: 0.35; }\n\n/* ---- Advanced: widths ---- */\n/* A picked part's width handle on its end edge: dragged, it snaps to the columns. */\n.fd-width-handle {\n  position: absolute; z-index: 9; width: 8px; height: 30px; border-radius: 4px; background: var(--fd-surface);\n  box-shadow: 0 0 0 1.5px var(--fd-accent), 0 1px 3px rgba(15, 23, 42, 0.2); cursor: ew-resize; touch-action: none;\n}\n.fd-width-handle::after { content: \"\"; position: absolute; inset: 9px 3px; border-inline: 1px solid var(--fd-accent); }\n/* The gutter between two parts of a row: a slim line in the gap, dragged or moved with the arrow keys to trade columns. */\n/* 24px wide, a target a finger can hit (WCAG 2.5.8); the line drawn down its middle. */\n.fd-gutter { position: absolute; z-index: 9; width: 24px; cursor: col-resize; touch-action: none; border-radius: 6px; }\n/* While a part is carried, what floats over the parts lets the pointer through: a drop at a picked part's edge goes beside it, not onto its handle. */\n.fd-canvas.fd-dragging :is(.fd-width-handle, .fd-gutter, .fd-field-bar, .fd-canvas-resize) { pointer-events: none; }\n.fd-gutter::before { content: \"\"; position: absolute; inset-block: 6px; inset-inline-start: 11px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--fd-accent) 55%, transparent); }\n.fd-gutter:hover::before, .fd-gutter:focus-visible::before { inset-inline-start: 10px; width: 4px; background: var(--fd-accent); }\n.fd-gutter:focus-visible { outline: none; }\n.fd-width-handle[hidden], .fd-gutter[hidden] { display: none; }\n/* How many columns, while the edge or the gutter is dragged. */\n.fd-width-chip {\n  position: absolute; z-index: 32; pointer-events: none; background: var(--fd-text); color: var(--fd-surface);\n  font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 6px; white-space: nowrap;\n}\n\n/* ---- Advanced: several picked ---- */\n/* Each picked part tinted, with the room round it, as the field being edited is; a block picked alone too. */\n.fd-canvas :is(.fd-canvas-picked:not(.fd-editing):not(.fd-canvas-selected), .fd-canvas-block.fd-canvas-selected) {\n  background: color-mix(in srgb, var(--fd-accent) 9%, transparent); border-radius: 6px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--fd-accent) 9%, transparent);\n}\n/* An arrangement picked: softly tinted, with the room round it, as the mockup marks a plain group. */\n.fd-canvas .fd-canvas-arrangement.fd-canvas-selected { background: color-mix(in srgb, var(--fd-accent) 4%, transparent); border-radius: 6px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--fd-accent) 4%, transparent); }\n/* The bar at the top of the canvas as it scrolls, under the designer's own bar as the rails are, taking no room. */\n.fd-multi-dock { position: sticky; top: var(--fd-bar-room, 76px); z-index: 40; height: 0; display: flex; justify-content: center; align-items: flex-start; }\n.fd-multi {\n  display: flex; align-items: center; gap: 4px; margin-block-start: -12px; padding: 5px 6px 5px 12px; max-width: calc(100% - 24px); overflow-x: auto;\n  background: var(--fd-text); color: var(--fd-surface); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25); font-size: 13px; white-space: nowrap;\n}\n.fd-multi[hidden] { display: none; }\n.fd-multi-count { margin-inline-end: 6px; }\n.fd-multi-button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 9px; border-radius: 7px; cursor: pointer; }\n.fd-multi-button:hover { background: rgba(127, 127, 127, 0.28); }\n.fd-multi-button:focus-visible { outline: 2px solid var(--fd-surface); outline-offset: 1px; }\n.fd-multi-button[hidden] { display: none; }\n.fd-multi-down > svg { rotate: 45deg; }\n.fd-multi-why { opacity: 0.75; font-size: 12px; padding-inline: 6px; }\n.fd-multi-why[hidden] { display: none; }\n\n/* ---- Advanced: the keyboard ---- */\n/* What a key just did, said to a screen reader and not shown. */\n.fd-canvas-said { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* The keys, behind a small \"?\" at the stage's end. */\n.fd-canvas-help { position: relative; z-index: 35; margin-inline-start: auto; }\n.fd-canvas-help-button {\n  all: unset; box-sizing: border-box; display: grid; place-items: center; width: 22px; height: 22px; margin-inline-start: auto; border-radius: 50%;\n  color: var(--fd-muted); font-size: 12px; font-weight: 700; cursor: pointer; background: var(--fd-page);\n}\n/* Filled, not ringed: a ring so near the canvas's own border would read as a box in a box. */\n.fd-canvas-help-button:hover, .fd-canvas-help-button[aria-expanded=\"true\"] { color: var(--fd-text); background: color-mix(in srgb, var(--fd-text) 10%, var(--fd-page)); }\n.fd-canvas-help-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-canvas-keys {\n  position: absolute; inset-inline-end: 0; inset-block-start: 28px; width: max-content; max-width: min(420px, 80vw); margin: 0; padding: 10px 12px;\n  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px;\n  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16); font-size: 12.5px;\n}\n.fd-canvas-keys[hidden] { display: none; }\n.fd-canvas-keys dt { font-weight: 650; white-space: nowrap; }\n.fd-canvas-keys dd { margin: 0; color: var(--fd-muted); }\n\n/* ---- Advanced: the guides ---- */\n/* The columns of the grid a picked part sits on: tinted bands under the parts, laid out as the grid's own columns, numbered. */\n.fd-canvas .fd-grid:has(> .fd-guides) { position: relative; }\n.fd-canvas .fd-grid:has(> .fd-guides) > [data-node] { position: relative; z-index: 1; }\n.fd-guides {\n  position: absolute; inset: 0; z-index: 0; pointer-events: none; display: grid;\n  grid-template-columns: repeat(var(--fd-cols, 1), minmax(0, 1fr)); column-gap: var(--fd-gap-x);\n}\n.fd-guides > i { position: relative; border-radius: 4px; background: color-mix(in srgb, var(--fd-accent) 7%, transparent); }\n/* Twelfths: twelve thin tracks, fainter, with no numbers. */\n.fd-guides-fine > i { border-radius: 2px; background: color-mix(in srgb, var(--fd-accent) 4.5%, transparent); }\n.fd-guides > i::after {\n  content: attr(data-n); position: absolute; inset-block-start: -15px; inset-inline-start: 50%; translate: -50% 0;\n  font: 600 10px/1 system-ui, sans-serif; font-style: normal; color: color-mix(in srgb, var(--fd-accent) 70%, var(--fd-muted));\n}\n\n/* ---- Advanced: the stage \u2014 the size of screen shown, and the keys ---- */\n/* Room under the screen sizes for the bar of a field picked in the first group's first row, lifted over the group's name. */\n.fd-canvas-stage { display: flex; align-items: center; gap: 8px; margin-block-end: 16px; }\n.fd-canvas:not([data-mode=\"advanced\"]) > .fd-canvas-stage { display: none; }\n.fd-canvas-sizes { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fd-page); border: 1px solid var(--fd-border); }\n.fd-canvas-size {\n  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px;\n  font-size: 12.5px; font-weight: 600; color: var(--fd-muted); cursor: pointer;\n}\n.fd-canvas-size[aria-pressed=\"true\"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }\n.fd-canvas-size:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* Pictures only where the canvas has no room for their names. */\n@container (max-width: 520px) { .fd-canvas-size-name { display: none; } }\n/* On a tablet or a phone, the canvas is as wide as one. */\n.fd-canvas[data-size=\"tablet\"] { width: 100%; max-width: 768px; margin-inline: auto; }\n.fd-canvas[data-size=\"phone\"] { width: 100%; max-width: 390px; margin-inline: auto; }\n\n/* ---- Advanced: a width of the canvas's own ---- */\n/* Dragged or keyed to: as wide as that, never wider than the stage, in its middle as a tablet's is. */\n.fd-canvas[data-mode=\"advanced\"][data-width] { width: var(--fd-canvas-width); max-width: 100%; margin-inline: auto; }\n/* The width beside the switch, once the canvas has one of its own. */\n/* Its words, and the chip's, run the way they are written \u2014 \"640 px\" stays so on a right-to-left page. */\n.fd-canvas-size-px { font-size: 12.5px; font-weight: 600; color: var(--fd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; unicode-bidi: plaintext; }\n.fd-canvas-size-px[hidden] { display: none; }\n/* The handle: the canvas's whole end edge takes the pointer, 24px wide (WCAG 2.5.8), inside the canvas so the page is never\n   wider for it; its grip stays in the middle of what is in view. */\n.fd-screen-designer { container-name: fd-designer; }\n.fd-canvas-resize { position: absolute; z-index: 4; inset-block: 0; inset-inline-end: 0; width: 24px; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }\n.fd-canvas:not([data-mode=\"advanced\"]) > .fd-canvas-resize { display: none; }\n/* A designer narrower than a tablet shows the canvas as wide as it is: no handle, and no width of its own to note. */\n@container fd-designer (max-width: 767px) { .fd-canvas-resize, .fd-canvas-size-px { display: none; } }\n.fd-canvas-resize:focus-visible { outline: none; }\n/* The edge itself, drawn over the canvas's border while the handle is pointed at, focused or dragged. */\n.fd-canvas-resize::before { content: \"\"; position: absolute; inset-block: 0; inset-inline-end: -1px; width: 2px; background: transparent; transition: background 120ms; }\n.fd-canvas-resize:is(:hover, :focus-visible, [data-active])::before { background: var(--fd-accent); }\n.fd-canvas-resize-grip {\n  position: sticky; top: calc(50vh - 20px); display: block; width: 8px; height: 40px; margin-inline: auto 3px; border-radius: 4px;\n  background: var(--fd-surface); box-shadow: 0 0 0 1.5px var(--fd-border-strong), 0 1px 3px rgba(15, 23, 42, 0.16);\n}\n.fd-canvas-resize-grip::after { content: \"\"; position: absolute; inset: 13px 2px; border-inline: 1px solid var(--fd-muted); }\n.fd-canvas-resize:is(:hover, :focus-visible, [data-active]) .fd-canvas-resize-grip { box-shadow: 0 0 0 1.5px var(--fd-accent), 0 1px 3px rgba(15, 23, 42, 0.2); }\n.fd-canvas-resize:is(:hover, :focus-visible, [data-active]) .fd-canvas-resize-grip::after { border-color: var(--fd-accent); }\n.fd-canvas-resize:focus-visible .fd-canvas-resize-grip { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n/* The width and the size the form takes it for, beside the grip while it moves. */\n.fd-canvas-resize-chip {\n  position: absolute; inset-inline-end: calc(100% + 10px); top: 50%; translate: 0 -50%; display: none; pointer-events: none;\n  background: var(--fd-text); color: var(--fd-surface); font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 6px;\n  white-space: nowrap; font-variant-numeric: tabular-nums; unicode-bidi: plaintext;\n}\n.fd-canvas-resize[data-active] .fd-canvas-resize-chip { display: block; }\n@media (prefers-reduced-motion: reduce) { .fd-canvas-resize::before { transition: none; } }\n\n/* ---- a saved form placed in the page: the form as it will be drawn, in a frame with its words and \u201COpen it\u201D ---- */\n.fd-canvas-form { display: grid; gap: 10px; min-width: 0; padding: 12px 14px 14px; border: 1px dashed var(--fd-border-strong); border-radius: 10px; }\n.fd-canvas-form-head { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.fd-canvas-form-head > .fd-dicon { flex: none; width: 18px; height: 18px; color: var(--fd-muted); }\n.fd-canvas-form-tag { flex: 1 1 auto; min-width: 0; color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }\n/* Picked, on the picked part's tint: the muted words would fall short of 4.5:1, so they take the text's colour. */\n.fd-canvas-form.fd-canvas-selected .fd-canvas-form-tag { color: var(--fd-text); }\n.fd-canvas-form-open { flex: none; }\n.fd-canvas-form-note { margin: 0; color: var(--fd-muted); }\n.fd-canvas-form-note.fd-canvas-form-problem { color: var(--fd-error); }\n/* Shown, never used: what is inside is inert, and takes no pointer either. */\n.fd-canvas-form-body { min-width: 0; pointer-events: none; }\n.fd-canvas-form-body:empty { display: none; }\n";

package/src/lib/styles-canvas.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The Advanced canvas's own styles: what keeps the canvas drawing each part
+ * where the form puts it, and the marks of Advanced — the drop line and the
+ * group tinted under it, the chip that says where, the width handle and the
+ * gutter between two parts, the guides of a grid's columns, the bar for
+ * several picked, the handle the canvas's own width is dragged by, and the
+ * note Simple mode shows on an arrangement.
+ *
+ * Logical properties throughout, so right to left mirrors on its own.
+ */
+export declare const DESIGNER_CANVAS_CSS = "\n/* ---- the canvas draws each part where the form puts it ---- */\n/* The page's own parts, the same room between them as the form leaves. */\n.fd-canvas-body.fd-sections { gap: var(--fd-gap-block, 24px); }\n/* A field's widget sits in the field as the form puts it, nothing drawn round it to take room. */\n.fd-canvas-widget:not([hidden]) { display: contents; }\n\n/* ---- Simple and Advanced ---- */\n/* Simple keeps an arrangement as Advanced laid it out, and says so on its top edge, where it is seen as it is picked. */\n.fd-simple-lock {\n  position: absolute; z-index: 8; inset-inline-end: 0; inset-block-start: 0; translate: 0 -50%; width: max-content; max-width: min(420px, 100%);\n  display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--fd-border-strong); border-radius: 8px;\n  background: var(--fd-surface); color: var(--fd-muted); font-size: 13px; line-height: 1.45; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);\n}\n.fd-simple-lock[hidden] { display: none; }\n.fd-simple-lock > .fd-button { justify-self: start; }\n\n/* ---- Advanced: where a carried part would go ---- */\n/* The marks are drawn in the canvas, placed against it, so they wear its colours; none takes the pointer. */\n.fd-canvas { position: relative; }\n.fd-canvas > :is(.fd-drop-bar, .fd-drop-zone, .fd-drop-chip) { position: absolute; pointer-events: none; }\n/* The line where it would go: beside a part, under it, or across a grid between its rows. */\n.fd-drop-bar { z-index: 30; background: var(--fd-accent); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 25%, transparent); }\n/* A whole group as the target: tinted, never outlined. */\n.fd-drop-zone { z-index: 29; background: color-mix(in srgb, var(--fd-accent) 7%, transparent); border-radius: 10px; }\n/* The chip by the pointer: what is carried, and where it would go \u2014 or why not. */\n.fd-drop-chip {\n  z-index: 31; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; width: max-content; max-width: 300px;\n  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-accent); border-radius: 7px; padding: 5px 9px;\n  font-size: 12.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);\n}\n.fd-drop-where { flex-basis: 100%; font-weight: 500; font-size: 11.5px; color: var(--fd-muted); }\n.fd-drop-chip.fd-drop-refused { border-color: var(--fd-error); }\n.fd-drop-chip.fd-drop-refused .fd-drop-where { color: var(--fd-error); }\n/* What is carried stays where it is, dimmed, until it is let go. */\n.fd-drag-carried { opacity: 0.35; }\n\n/* ---- Advanced: widths ---- */\n/* A picked part's width handle on its end edge: dragged, it snaps to the columns. */\n.fd-width-handle {\n  position: absolute; z-index: 9; width: 8px; height: 30px; border-radius: 4px; background: var(--fd-surface);\n  box-shadow: 0 0 0 1.5px var(--fd-accent), 0 1px 3px rgba(15, 23, 42, 0.2); cursor: ew-resize; touch-action: none;\n}\n.fd-width-handle::after { content: \"\"; position: absolute; inset: 9px 3px; border-inline: 1px solid var(--fd-accent); }\n/* The gutter between two parts of a row: a slim line in the gap, dragged or moved with the arrow keys to trade columns. */\n/* 24px wide, a target a finger can hit (WCAG 2.5.8); the line drawn down its middle. */\n.fd-gutter { position: absolute; z-index: 9; width: 24px; cursor: col-resize; touch-action: none; border-radius: 6px; }\n/* While a part is carried, what floats over the parts lets the pointer through: a drop at a picked part's edge goes beside it, not onto its handle. */\n.fd-canvas.fd-dragging :is(.fd-width-handle, .fd-gutter, .fd-field-bar, .fd-canvas-resize) { pointer-events: none; }\n.fd-gutter::before { content: \"\"; position: absolute; inset-block: 6px; inset-inline-start: 11px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--fd-accent) 55%, transparent); }\n.fd-gutter:hover::before, .fd-gutter:focus-visible::before { inset-inline-start: 10px; width: 4px; background: var(--fd-accent); }\n.fd-gutter:focus-visible { outline: none; }\n.fd-width-handle[hidden], .fd-gutter[hidden] { display: none; }\n/* How many columns, while the edge or the gutter is dragged. */\n.fd-width-chip {\n  position: absolute; z-index: 32; pointer-events: none; background: var(--fd-text); color: var(--fd-surface);\n  font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 6px; white-space: nowrap;\n}\n\n/* ---- Advanced: several picked ---- */\n/* Each picked part tinted, with the room round it, as the field being edited is; a block picked alone too. */\n.fd-canvas :is(.fd-canvas-picked:not(.fd-editing):not(.fd-canvas-selected), .fd-canvas-block.fd-canvas-selected) {\n  background: color-mix(in srgb, var(--fd-accent) 9%, transparent); border-radius: 6px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--fd-accent) 9%, transparent);\n}\n/* An arrangement picked: softly tinted, with the room round it, as the mockup marks a plain group. */\n.fd-canvas .fd-canvas-arrangement.fd-canvas-selected { background: color-mix(in srgb, var(--fd-accent) 4%, transparent); border-radius: 6px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--fd-accent) 4%, transparent); }\n/* The bar at the top of the canvas as it scrolls, under the designer's own bar as the rails are, taking no room. */\n.fd-multi-dock { position: sticky; top: var(--fd-bar-room, 76px); z-index: 40; height: 0; display: flex; justify-content: center; align-items: flex-start; }\n.fd-multi {\n  display: flex; align-items: center; gap: 4px; margin-block-start: -12px; padding: 5px 6px 5px 12px; max-width: calc(100% - 24px); overflow-x: auto;\n  background: var(--fd-text); color: var(--fd-surface); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25); font-size: 13px; white-space: nowrap;\n}\n.fd-multi[hidden] { display: none; }\n.fd-multi-count { margin-inline-end: 6px; }\n.fd-multi-button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 9px; border-radius: 7px; cursor: pointer; }\n.fd-multi-button:hover { background: rgba(127, 127, 127, 0.28); }\n.fd-multi-button:focus-visible { outline: 2px solid var(--fd-surface); outline-offset: 1px; }\n.fd-multi-button[hidden] { display: none; }\n.fd-multi-down > svg { rotate: 45deg; }\n.fd-multi-why { opacity: 0.75; font-size: 12px; padding-inline: 6px; }\n.fd-multi-why[hidden] { display: none; }\n\n/* ---- Advanced: the keyboard ---- */\n/* What a key just did, said to a screen reader and not shown. */\n.fd-canvas-said { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n/* The keys, behind a small \"?\" at the stage's end. */\n.fd-canvas-help { position: relative; z-index: 35; margin-inline-start: auto; }\n.fd-canvas-help-button {\n  all: unset; box-sizing: border-box; display: grid; place-items: center; width: 22px; height: 22px; margin-inline-start: auto; border-radius: 50%;\n  color: var(--fd-muted); font-size: 12px; font-weight: 700; cursor: pointer; background: var(--fd-page);\n}\n/* Filled, not ringed: a ring so near the canvas's own border would read as a box in a box. */\n.fd-canvas-help-button:hover, .fd-canvas-help-button[aria-expanded=\"true\"] { color: var(--fd-text); background: color-mix(in srgb, var(--fd-text) 10%, var(--fd-page)); }\n.fd-canvas-help-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-canvas-keys {\n  position: absolute; inset-inline-end: 0; inset-block-start: 28px; width: max-content; max-width: min(420px, 80vw); margin: 0; padding: 10px 12px;\n  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px;\n  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16); font-size: 12.5px;\n}\n.fd-canvas-keys[hidden] { display: none; }\n.fd-canvas-keys dt { font-weight: 650; white-space: nowrap; }\n.fd-canvas-keys dd { margin: 0; color: var(--fd-muted); }\n\n/* ---- Advanced: the guides ---- */\n/* The columns of the grid a picked part sits on: tinted bands under the parts, laid out as the grid's own columns, numbered. */\n.fd-canvas .fd-grid:has(> .fd-guides) { position: relative; }\n.fd-canvas .fd-grid:has(> .fd-guides) > [data-node] { position: relative; z-index: 1; }\n.fd-guides {\n  position: absolute; inset: 0; z-index: 0; pointer-events: none; display: grid;\n  grid-template-columns: repeat(var(--fd-cols, 1), minmax(0, 1fr)); column-gap: var(--fd-gap-x);\n}\n.fd-guides > i { position: relative; border-radius: 4px; background: color-mix(in srgb, var(--fd-accent) 7%, transparent); }\n/* Twelfths: twelve thin tracks, fainter, with no numbers. */\n.fd-guides-fine > i { border-radius: 2px; background: color-mix(in srgb, var(--fd-accent) 4.5%, transparent); }\n.fd-guides > i::after {\n  content: attr(data-n); position: absolute; inset-block-start: -15px; inset-inline-start: 50%; translate: -50% 0;\n  font: 600 10px/1 system-ui, sans-serif; font-style: normal; color: color-mix(in srgb, var(--fd-accent) 70%, var(--fd-muted));\n}\n\n/* ---- Advanced: the stage \u2014 the size of screen shown, and the keys ---- */\n/* Room under the screen sizes for the bar of a field picked in the first group's first row, lifted over the group's name. */\n.fd-canvas-stage { display: flex; align-items: center; gap: 8px; margin-block-end: 16px; }\n.fd-canvas:not([data-mode=\"advanced\"]) > .fd-canvas-stage { display: none; }\n.fd-canvas-sizes { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fd-page); border: 1px solid var(--fd-border); }\n.fd-canvas-size {\n  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px;\n  font-size: 12.5px; font-weight: 600; color: var(--fd-muted); cursor: pointer;\n}\n.fd-canvas-size[aria-pressed=\"true\"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }\n.fd-canvas-size:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* Pictures only where the canvas has no room for their names. */\n@container (max-width: 520px) { .fd-canvas-size-name { display: none; } }\n/* On a tablet or a phone, the canvas is as wide as one. */\n.fd-canvas[data-size=\"tablet\"] { width: 100%; max-width: 768px; margin-inline: auto; }\n.fd-canvas[data-size=\"phone\"] { width: 100%; max-width: 390px; margin-inline: auto; }\n\n/* ---- Advanced: a width of the canvas's own ---- */\n/* Dragged or keyed to: as wide as that, never wider than the stage, in its middle as a tablet's is. */\n.fd-canvas[data-mode=\"advanced\"][data-width] { width: var(--fd-canvas-width); max-width: 100%; margin-inline: auto; }\n/* The width beside the switch, once the canvas has one of its own. */\n/* Its words, and the chip's, run the way they are written \u2014 \"640 px\" stays so on a right-to-left page. */\n.fd-canvas-size-px { font-size: 12.5px; font-weight: 600; color: var(--fd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; unicode-bidi: plaintext; }\n.fd-canvas-size-px[hidden] { display: none; }\n/* The handle: the canvas's whole end edge takes the pointer, 24px wide (WCAG 2.5.8), inside the canvas so the page is never\n   wider for it; its grip stays in the middle of what is in view. */\n.fd-screen-designer { container-name: fd-designer; }\n.fd-canvas-resize { position: absolute; z-index: 4; inset-block: 0; inset-inline-end: 0; width: 24px; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }\n.fd-canvas:not([data-mode=\"advanced\"]) > .fd-canvas-resize { display: none; }\n/* A designer narrower than a tablet shows the canvas as wide as it is: no handle, and no width of its own to note. */\n@container fd-designer (max-width: 767px) { .fd-canvas-resize, .fd-canvas-size-px { display: none; } }\n.fd-canvas-resize:focus-visible { outline: none; }\n/* The edge itself, drawn over the canvas's border while the handle is pointed at, focused or dragged. */\n.fd-canvas-resize::before { content: \"\"; position: absolute; inset-block: 0; inset-inline-end: -1px; width: 2px; background: transparent; transition: background 120ms; }\n.fd-canvas-resize:is(:hover, :focus-visible, [data-active])::before { background: var(--fd-accent); }\n.fd-canvas-resize-grip {\n  position: sticky; top: calc(50vh - 20px); display: block; width: 8px; height: 40px; margin-inline: auto 3px; border-radius: 4px;\n  background: var(--fd-surface); box-shadow: 0 0 0 1.5px var(--fd-border-strong), 0 1px 3px rgba(15, 23, 42, 0.16);\n}\n.fd-canvas-resize-grip::after { content: \"\"; position: absolute; inset: 13px 2px; border-inline: 1px solid var(--fd-muted); }\n.fd-canvas-resize:is(:hover, :focus-visible, [data-active]) .fd-canvas-resize-grip { box-shadow: 0 0 0 1.5px var(--fd-accent), 0 1px 3px rgba(15, 23, 42, 0.2); }\n.fd-canvas-resize:is(:hover, :focus-visible, [data-active]) .fd-canvas-resize-grip::after { border-color: var(--fd-accent); }\n.fd-canvas-resize:focus-visible .fd-canvas-resize-grip { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n/* The width and the size the form takes it for, beside the grip while it moves. */\n.fd-canvas-resize-chip {\n  position: absolute; inset-inline-end: calc(100% + 10px); top: 50%; translate: 0 -50%; display: none; pointer-events: none;\n  background: var(--fd-text); color: var(--fd-surface); font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 6px;\n  white-space: nowrap; font-variant-numeric: tabular-nums; unicode-bidi: plaintext;\n}\n.fd-canvas-resize[data-active] .fd-canvas-resize-chip { display: block; }\n@media (prefers-reduced-motion: reduce) { .fd-canvas-resize::before { transition: none; } }\n\n/* ---- a saved form placed in the page: the form as it will be drawn, in a frame with its words and \u201COpen it\u201D ---- */\n.fd-canvas-form { display: grid; gap: 10px; min-width: 0; padding: 12px 14px 14px; border: 1px dashed var(--fd-border-strong); border-radius: 10px; }\n.fd-canvas-form-head { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.fd-canvas-form-head > .fd-dicon { flex: none; width: 18px; height: 18px; color: var(--fd-muted); }\n.fd-canvas-form-tag { flex: 1 1 auto; min-width: 0; color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }\n/* Picked, on the picked part's tint: the muted words would fall short of 4.5:1, so they take the text's colour. */\n.fd-canvas-form.fd-canvas-selected .fd-canvas-form-tag { color: var(--fd-text); }\n.fd-canvas-form-open { flex: none; }\n.fd-canvas-form-note { margin: 0; color: var(--fd-muted); }\n.fd-canvas-form-note.fd-canvas-form-problem { color: var(--fd-error); }\n/* Shown, never used: what is inside is inert, and takes no pointer either. */\n.fd-canvas-form-body { min-width: 0; pointer-events: none; }\n.fd-canvas-form-body:empty { display: none; }\n";