@fieldia/designer 0.0.0-stage → 0.11.0

package/src/lib/rules-open.d.mts

@@ -0,0 +1,16 @@
+import type { Designer } from './designer.mjs';
+import type { RuleKind } from './rules-words.mjs';
+/**
+ * Going to a rule: its part picked, and its rules brought forward — in the
+ * screen editor the panel's Rules tab, the rule's own setting in hand (an
+ * answer rule opened); in the survey editor the question's open card, or the
+ * page's, with the cursor on the rule. Shared by the rules overview and the
+ * marks on the canvas, so both go to the same place.
+ */
+export interface RuleTarget {
+    part: string;
+    kind?: RuleKind;
+    /** Which answer rule, or which value set by a rule. */
+    index?: number;
+}
+export declare function openRules(root: HTMLElement, designer: Designer, to: RuleTarget): void;

package/src/lib/rules-open.d.ts

@@ -0,0 +1,16 @@
+import type { Designer } from './designer';
+import type { RuleKind } from './rules-words';
+/**
+ * Going to a rule: its part picked, and its rules brought forward — in the
+ * screen editor the panel's Rules tab, the rule's own setting in hand (an
+ * answer rule opened); in the survey editor the question's open card, or the
+ * page's, with the cursor on the rule. Shared by the rules overview and the
+ * marks on the canvas, so both go to the same place.
+ */
+export interface RuleTarget {
+    part: string;
+    kind?: RuleKind;
+    /** Which answer rule, or which value set by a rule. */
+    index?: number;
+}
+export declare function openRules(root: HTMLElement, designer: Designer, to: RuleTarget): void;

package/src/lib/rules-open.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openRules = openRules;
+/** The setting each kind of rule is under, on the panel's Rules tab. */
+const SETTING = {
+    shows: 'When it shows',
+    required: 'Required',
+    readonly: 'Read-only',
+    compute: 'Worked out from',
+    set: 'Set when',
+    answer: 'Answer rules',
+};
+const shown = (element) => !element.closest('[hidden]');
+const first = (scope, selector) => [...(scope?.querySelectorAll(selector) ?? [])].find(shown) ?? null;
+/** A rule in a list of them — an answer rule, a value set — opened, its sentence in hand. */
+function openListed(scope, index) {
+    const says = [...(scope?.querySelectorAll('.fd-answer-rule-say') ?? [])];
+    const say = says[index] ?? says[0];
+    if (!say)
+        return null;
+    if (say.getAttribute('aria-expanded') !== 'true')
+        say.click();
+    return say;
+}
+/** Where the cursor goes for a kind of rule, within what shows a part's rules. */
+function target(scope, kind, index) {
+    if (!kind)
+        return null;
+    const setting = scope.querySelector(`[data-setting="${SETTING[kind]}"]`);
+    if (kind === 'answer' || kind === 'set')
+        return openListed(setting, index);
+    if (kind === 'compute')
+        return first(setting, 'input');
+    // A condition: its first list, or the switch or link that starts one.
+    const condition = kind === 'shows' ? (setting ?? scope.querySelector('.fd-step-when, .fd-when')) : setting;
+    return first(condition, 'select') ?? first(condition, 'input, button, [role="switch"]');
+}
+function openRules(root, designer, to) {
+    designer.select(to.part);
+    // The screen editor: the panel's Rules tab.
+    const tab = root.querySelector('.fd-properties [role="tab"][data-tab="rules"]');
+    tab?.click();
+    // Or the survey editor: the question's open card, or the page's card.
+    const scope = tab ? root.querySelector('.fd-properties [data-panel="rules"]') : root.querySelector(`.fd-q-selected[data-node="${to.part}"], .fd-design-step[data-node="${to.part}"]`);
+    if (!scope)
+        return;
+    const hand = target(scope, to.kind, to.index ?? 0) ?? (to.kind === 'required' ? first(scope, '[role="switch"][data-required], input[data-required]') : null);
+    (hand ?? tab)?.focus();
+    (hand ?? scope).scrollIntoView?.({ block: 'nearest' });
+}
+//# sourceMappingURL=rules-open.js.map

package/src/lib/rules-open.js.map

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

package/src/lib/rules-open.mjs

@@ -0,0 +1,48 @@
+/** The setting each kind of rule is under, on the panel's Rules tab. */
+const SETTING = {
+    shows: 'When it shows',
+    required: 'Required',
+    readonly: 'Read-only',
+    compute: 'Worked out from',
+    set: 'Set when',
+    answer: 'Answer rules',
+};
+const shown = (element) => !element.closest('[hidden]');
+const first = (scope, selector) => [...(scope?.querySelectorAll(selector) ?? [])].find(shown) ?? null;
+/** A rule in a list of them — an answer rule, a value set — opened, its sentence in hand. */
+function openListed(scope, index) {
+    const says = [...(scope?.querySelectorAll('.fd-answer-rule-say') ?? [])];
+    const say = says[index] ?? says[0];
+    if (!say)
+        return null;
+    if (say.getAttribute('aria-expanded') !== 'true')
+        say.click();
+    return say;
+}
+/** Where the cursor goes for a kind of rule, within what shows a part's rules. */
+function target(scope, kind, index) {
+    if (!kind)
+        return null;
+    const setting = scope.querySelector(`[data-setting="${SETTING[kind]}"]`);
+    if (kind === 'answer' || kind === 'set')
+        return openListed(setting, index);
+    if (kind === 'compute')
+        return first(setting, 'input');
+    // A condition: its first list, or the switch or link that starts one.
+    const condition = kind === 'shows' ? (setting ?? scope.querySelector('.fd-step-when, .fd-when')) : setting;
+    return first(condition, 'select') ?? first(condition, 'input, button, [role="switch"]');
+}
+export function openRules(root, designer, to) {
+    designer.select(to.part);
+    // The screen editor: the panel's Rules tab.
+    const tab = root.querySelector('.fd-properties [role="tab"][data-tab="rules"]');
+    tab?.click();
+    // Or the survey editor: the question's open card, or the page's card.
+    const scope = tab ? root.querySelector('.fd-properties [data-panel="rules"]') : root.querySelector(`.fd-q-selected[data-node="${to.part}"], .fd-design-step[data-node="${to.part}"]`);
+    if (!scope)
+        return;
+    const hand = target(scope, to.kind, to.index ?? 0) ?? (to.kind === 'required' ? first(scope, '[role="switch"][data-required], input[data-required]') : null);
+    (hand ?? tab)?.focus();
+    (hand ?? scope).scrollIntoView?.({ block: 'nearest' });
+}
+//# sourceMappingURL=rules-open.mjs.map

package/src/lib/rules-open.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rules-open.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/rules-open.ts"],"names":[],"mappings":"AAkBA,wEAAwE;AACxE,MAAM,OAAO,GAA6B;IACxC,KAAK,EAAE,eAAe;IACtB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,WAAW;IACrB,OAAO,EAAE,iBAAiB;IAC1B,GAAG,EAAE,UAAU;IACf,MAAM,EAAE,cAAc;CACvB,CAAC;AAEF,MAAM,KAAK,GAAG,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AACjE,MAAM,KAAK,GAAG,CAAC,KAAiC,EAAE,QAAgB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,gBAAgB,CAAc,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;AAEvJ,6FAA6F;AAC7F,SAAS,UAAU,CAAC,KAAqB,EAAE,KAAa;IACtD,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,gBAAgB,CAAc,qBAAqB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IACtF,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;IACnC,IAAI,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IACtB,IAAI,GAAG,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;QAAE,GAAG,CAAC,KAAK,EAAE,CAAC;IAC9D,OAAO,GAAG,CAAC;AACb,CAAC;AAED,kFAAkF;AAClF,SAAS,MAAM,CAAC,KAAc,EAAE,IAA0B,EAAE,KAAa;IACvE,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzE,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,KAAK;QAAE,OAAO,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC3E,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACvD,sEAAsE;IACtE,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC3G,OAAO,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,IAAI,KAAK,CAAC,SAAS,EAAE,gCAAgC,CAAC,CAAC;AAC1F,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAiB,EAAE,QAAkB,EAAE,EAAc;IAC7E,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IACzB,4CAA4C;IAC5C,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAoB,+CAA+C,CAAC,CAAC;IACnG,GAAG,EAAE,KAAK,EAAE,CAAC;IACb,sEAAsE;IACtE,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,qCAAqC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,6BAA6B,EAAE,CAAC,IAAI,kCAAkC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC;IACtL,IAAI,CAAC,KAAK;QAAE,OAAO;IACnB,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,sDAAsD,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC7J,CAAC,IAAI,IAAK,GAA0B,CAAC,EAAE,KAAK,EAAE,CAAC;IAC/C,CAAC,IAAI,IAAI,KAAK,CAAC,CAAC,cAAc,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AACzD,CAAC"}

package/src/lib/rules-overview.d.mts

@@ -0,0 +1,32 @@
+import type { ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+import type { FindItem } from './find-anything.mjs';
+/**
+ * Every rule on the page in one place, in place of the editor, beside
+ * Design, Try it and Translations: each rule a sentence, grouped by what it
+ * does — where answers lead (a survey's pages shown only for some answers),
+ * when parts show, when fields are required or read-only, values worked out
+ * and set, and the rules answers keep — and what the page's parts do: its
+ * buttons when clicked, its fields when they change, its own moments, a step
+ * a line. Words typed filter it; a rule clicked goes back to designing with
+ * its part picked and its rules open, steps clicked with their list open.
+ */
+export interface RulesOverviewOptions {
+    el: ElementFactory;
+    doc: Document;
+    designer: Designer;
+    /** The editor: the view goes at its end. */
+    root: HTMLElement;
+    /** What the editor shows when designing: hidden while the view shows. */
+    body: HTMLElement;
+    /** Design, Try it and the other views: Rules goes beside them. */
+    modes: HTMLElement;
+}
+export interface RulesOverview {
+    element: HTMLElement;
+    readonly open: boolean;
+    /** For Find anything: open it, and each rule by its words. */
+    items(): FindItem[];
+    destroy(): void;
+}
+export declare function rulesOverview(options: RulesOverviewOptions): RulesOverview;

package/src/lib/rules-overview.d.ts

@@ -0,0 +1,32 @@
+import type { ElementFactory } from './chrome';
+import type { Designer } from './designer';
+import type { FindItem } from './find-anything';
+/**
+ * Every rule on the page in one place, in place of the editor, beside
+ * Design, Try it and Translations: each rule a sentence, grouped by what it
+ * does — where answers lead (a survey's pages shown only for some answers),
+ * when parts show, when fields are required or read-only, values worked out
+ * and set, and the rules answers keep — and what the page's parts do: its
+ * buttons when clicked, its fields when they change, its own moments, a step
+ * a line. Words typed filter it; a rule clicked goes back to designing with
+ * its part picked and its rules open, steps clicked with their list open.
+ */
+export interface RulesOverviewOptions {
+    el: ElementFactory;
+    doc: Document;
+    designer: Designer;
+    /** The editor: the view goes at its end. */
+    root: HTMLElement;
+    /** What the editor shows when designing: hidden while the view shows. */
+    body: HTMLElement;
+    /** Design, Try it and the other views: Rules goes beside them. */
+    modes: HTMLElement;
+}
+export interface RulesOverview {
+    element: HTMLElement;
+    readonly open: boolean;
+    /** For Find anything: open it, and each rule by its words. */
+    items(): FindItem[];
+    destroy(): void;
+}
+export declare function rulesOverview(options: RulesOverviewOptions): RulesOverview;

package/src/lib/rules-overview.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rulesOverview = rulesOverview;
+const branch_map_1 = require("./branch-map");
+const icons_1 = require("./icons");
+const rules_open_1 = require("./rules-open");
+const rules_words_1 = require("./rules-words");
+const steps_marks_1 = require("./steps-marks");
+const steps_words_1 = require("./steps-words");
+/** The groups, in the order the view lists them; their titles are the designer's words (`rulesUi.groups`). */
+const GROUPS = ['branches', 'shows', 'required', 'readonly', 'compute', 'set', 'answer'];
+/** steps lane: what parts do, after the rules, in this order. */
+const STEP_GROUPS = ['clicked', 'changes', 'moments'];
+/** The group a rule is listed under: a survey's page shown only sometimes is where answers lead. */
+function groupOf(page, rule) {
+    if (rule.kind === 'shows' && page.layout.type === 'wizard' && page.layout.children.some((step) => step.id === rule.part))
+        return 'branches';
+    return rule.kind;
+}
+let views = 0;
+function rulesOverview(options) {
+    const { el, doc, designer, root, body, modes } = options;
+    const w = designer.words.rulesUi;
+    const id = `fd-rules-${++views}`;
+    const toggle = el('button', { type: 'button', class: 'fd-mode-button', 'data-mode': 'rules', 'aria-pressed': 'false' }, (0, icons_1.designerIcon)(doc, 'rules'), w.rules);
+    modes.append(toggle);
+    const note = el('p', { class: 'fd-rules-note' });
+    const filter = el('input', { type: 'search', class: 'fd-input fd-rules-filter-box', 'aria-label': w.filter, placeholder: w.filterPlaceholder, autocomplete: 'off', spellcheck: 'false' });
+    const bar = el('div', { class: 'fd-rules-bar' }, el('div', { class: 'fd-rules-heading' }, el('h2', { class: 'fd-rules-title' }, w.rules), note), el('label', { class: 'fd-rules-filter' }, el('span', { class: 'fd-rules-filter-icon', 'aria-hidden': 'true' }, (0, icons_1.designerIcon)(doc, 'search')), filter));
+    const groups = el('div', { class: 'fd-rules-groups' });
+    const empty = el('p', { class: 'fd-rules-empty', hidden: '' });
+    const element = el('section', { class: 'fd-rules-view', 'aria-label': w.rules, hidden: '' }, bar, groups, empty);
+    root.append(element);
+    let open = false;
+    const otherViewOpen = () => !!root.querySelector('.fd-try:not([hidden]), .fd-words:not([hidden])');
+    const modeButton = (name) => modes.querySelector(`[data-mode="${name}"]`);
+    function show(next) {
+        // From Try it: back to designing first, then here.
+        if (next && root.querySelector('.fd-try:not([hidden])'))
+            modeButton('design')?.click();
+        open = next;
+        element.hidden = !open;
+        body.hidden = open || otherViewOpen();
+        toggle.setAttribute('aria-pressed', String(open));
+        if (open)
+            modeButton('design')?.setAttribute('aria-pressed', 'false');
+        else if (!otherViewOpen())
+            modeButton('design')?.setAttribute('aria-pressed', 'true');
+        if (!open)
+            return;
+        // Nothing on the page is picked here: keys meant for a picked part must not reach it.
+        designer.select(null);
+        render();
+    }
+    // On the bar, after the other views: one that was open closes first, then this opens.
+    const onMode = (event) => {
+        const button = event.target.closest('[data-mode]');
+        if (button === toggle)
+            show(true);
+        else if (open && button)
+            show(false);
+    };
+    modes.addEventListener('click', onMode);
+    /** Back to designing, the rule's part picked and its rules open. */
+    function go(rule) {
+        if (!rule.part)
+            return;
+        show(false);
+        (0, rules_open_1.openRules)(root, designer, { part: rule.part, kind: rule.kind, index: rule.index });
+    }
+    /** A saved page a step opens, for its title, once the store has it. */
+    const saved = (0, steps_marks_1.savedPage)(designer);
+    /** Back to designing, the steps' part picked and their list open. */
+    function goToSteps(entry) {
+        show(false);
+        (0, steps_marks_1.openSteps)(root, designer, entry.place);
+    }
+    function stepsItemOf(entry) {
+        // The app's names — its actions, a page known by its id — kept apart as code.
+        const said = el('span', { class: 'fd-rules-item-say', dir: 'auto' }, ...(0, steps_words_1.withCode)(doc, entry.lines.join('\n'), entry.codes));
+        const button = el('button', { type: 'button', class: 'fd-rules-item fd-rules-steps' }, el('span', { class: 'fd-rules-item-name', dir: 'auto' }, entry.name), said);
+        button.addEventListener('click', () => goToSteps(entry));
+        return el('li', {}, button);
+    }
+    function itemOf(rule) {
+        const button = el('button', { type: 'button', class: 'fd-rules-item' }, el('span', { class: 'fd-rules-item-name', dir: 'auto' }, rule.name), el('span', { class: 'fd-rules-item-say', dir: 'auto' }, rule.sentence));
+        if (!rule.part)
+            button.setAttribute('aria-disabled', 'true');
+        button.addEventListener('click', () => go(rule));
+        return el('li', {}, button);
+    }
+    function render() {
+        const page = designer.getPage();
+        const rules = (0, rules_words_1.pageRules)(page, designer.words);
+        const steps = (0, steps_words_1.pageSteps)(page, designer.words, saved);
+        // English words keep their order in a page right to left, on the page's side; the designer's own language runs its own way.
+        note.replaceChildren(el('span', { dir: designer.locale ? undefined : 'ltr' }, steps.length ? designer.words.steps.countWith(rules.length, steps.length) : w.count(rules.length)));
+        const words = filter.value.toLowerCase().split(/\s+/).filter(Boolean);
+        const kept = rules.filter((rule) => {
+            const text = `${rule.name} ${rule.sentence} ${w.groups[groupOf(page, rule)]}`.toLowerCase();
+            return words.every((word) => text.includes(word));
+        });
+        const keptSteps = steps.filter((entry) => {
+            const text = `${entry.name} ${entry.lines.join(' ')} ${designer.words.steps.groupNames[entry.group]}`.toLowerCase();
+            return words.every((word) => text.includes(word));
+        });
+        groups.replaceChildren(...GROUPS.flatMap((key) => {
+            const title = w.groups[key];
+            const own = kept.filter((rule) => groupOf(page, rule) === key);
+            if (!own.length)
+                return [];
+            const titleId = `${id}-${key}`;
+            const map = key === 'branches' && !words.length ? branches(page) : null;
+            return [el('section', { class: 'fd-rules-group', 'aria-labelledby': titleId }, el('h3', { class: 'fd-rules-group-title', id: titleId }, title), ...(map ? [map] : []), el('ul', { class: 'fd-rules-list' }, ...own.map(itemOf)))];
+        }), ...STEP_GROUPS.flatMap((key) => {
+            const own = keptSteps.filter((entry) => entry.group === key);
+            if (!own.length)
+                return [];
+            const titleId = `${id}-steps-${key}`;
+            return [el('section', { class: 'fd-rules-group', 'aria-labelledby': titleId }, el('h3', { class: 'fd-rules-group-title', id: titleId }, designer.words.steps.groupNames[key]), el('ul', { class: 'fd-rules-list' }, ...own.map(stepsItemOf)))];
+        }));
+        empty.hidden = kept.length + keptSteps.length > 0;
+        empty.textContent = rules.length || steps.length ? w.noRuleSays(filter.value.trim()) : w.noRules;
+    }
+    /** A survey's pages and where answers lead, as the map above the pages draws it. */
+    function branches(page) {
+        const drawn = (0, branch_map_1.branchMap)(page, designer.words);
+        if (drawn.nodes.length < 2)
+            return null;
+        return el('div', { class: 'fd-branch-scroll fd-rules-branches' }, (0, branch_map_1.drawBranchMap)(doc, drawn, null, (part) => go({ kind: 'shows', part, name: '', sentence: '', reads: [] }), designer.words));
+    }
+    filter.addEventListener('input', render);
+    // Up and down the list with the arrows, from the box too; Escape empties the box, then goes back to designing.
+    element.addEventListener('keydown', (event) => {
+        const items = [...groups.querySelectorAll('.fd-rules-item')];
+        const at = items.indexOf(doc.activeElement);
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (!items.length || (at === -1 && doc.activeElement !== filter))
+                return;
+            event.preventDefault();
+            const next = at === -1 ? 0 : Math.max(0, Math.min(items.length - 1, at + (event.key === 'ArrowDown' ? 1 : -1)));
+            if (at === 0 && event.key === 'ArrowUp')
+                filter.focus();
+            else
+                items[next].focus();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            if (filter.value) {
+                filter.value = '';
+                render();
+                filter.focus();
+            }
+            else {
+                show(false);
+                toggle.focus();
+            }
+        }
+    });
+    const leave = designer.subscribe((state) => {
+        if (!open)
+            return;
+        // Something picked on the page: back to the editor, where it is.
+        if (state.selected !== null)
+            return show(false);
+        render();
+    });
+    return {
+        element,
+        get open() {
+            return open;
+        },
+        items() {
+            const page = designer.getPage();
+            const each = [
+                ...(0, rules_words_1.pageRules)(page, designer.words)
+                    .filter((rule) => rule.part)
+                    .map((rule) => ({ label: w.findRule(rule.name, rule.sentence), hint: w.groups[groupOf(page, rule)], run: () => go(rule) })),
+                ...(0, steps_words_1.pageSteps)(page, designer.words, saved).map((entry) => ({ label: designer.words.steps.findSteps(entry.name, entry.lines.join(' · ')), hint: designer.words.steps.groupNames[entry.group], run: () => goToSteps(entry) })),
+            ];
+            if (!open)
+                return [{ label: w.rules, hint: w.everyRule, icon: 'rules', run: () => show(true) }, ...each];
+            return [{ label: w.backToDesigning, hint: w.design, run: () => show(false) }, { label: w.filter, hint: w.rules, run: () => filter.focus() }, ...each];
+        },
+        destroy() {
+            leave();
+            modes.removeEventListener('click', onMode);
+            toggle.remove();
+            element.remove();
+        },
+    };
+}
+//# sourceMappingURL=rules-overview.js.map

package/src/lib/rules-overview.js.map

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

package/src/lib/rules-overview.mjs

@@ -0,0 +1,190 @@
+import { branchMap, drawBranchMap } from './branch-map.mjs';
+import { designerIcon } from './icons.mjs';
+import { openRules } from './rules-open.mjs';
+import { pageRules } from './rules-words.mjs';
+import { openSteps, savedPage } from './steps-marks.mjs';
+import { pageSteps, withCode } from './steps-words.mjs';
+/** The groups, in the order the view lists them; their titles are the designer's words (`rulesUi.groups`). */
+const GROUPS = ['branches', 'shows', 'required', 'readonly', 'compute', 'set', 'answer'];
+/** steps lane: what parts do, after the rules, in this order. */
+const STEP_GROUPS = ['clicked', 'changes', 'moments'];
+/** The group a rule is listed under: a survey's page shown only sometimes is where answers lead. */
+function groupOf(page, rule) {
+    if (rule.kind === 'shows' && page.layout.type === 'wizard' && page.layout.children.some((step) => step.id === rule.part))
+        return 'branches';
+    return rule.kind;
+}
+let views = 0;
+export function rulesOverview(options) {
+    const { el, doc, designer, root, body, modes } = options;
+    const w = designer.words.rulesUi;
+    const id = `fd-rules-${++views}`;
+    const toggle = el('button', { type: 'button', class: 'fd-mode-button', 'data-mode': 'rules', 'aria-pressed': 'false' }, designerIcon(doc, 'rules'), w.rules);
+    modes.append(toggle);
+    const note = el('p', { class: 'fd-rules-note' });
+    const filter = el('input', { type: 'search', class: 'fd-input fd-rules-filter-box', 'aria-label': w.filter, placeholder: w.filterPlaceholder, autocomplete: 'off', spellcheck: 'false' });
+    const bar = el('div', { class: 'fd-rules-bar' }, el('div', { class: 'fd-rules-heading' }, el('h2', { class: 'fd-rules-title' }, w.rules), note), el('label', { class: 'fd-rules-filter' }, el('span', { class: 'fd-rules-filter-icon', 'aria-hidden': 'true' }, designerIcon(doc, 'search')), filter));
+    const groups = el('div', { class: 'fd-rules-groups' });
+    const empty = el('p', { class: 'fd-rules-empty', hidden: '' });
+    const element = el('section', { class: 'fd-rules-view', 'aria-label': w.rules, hidden: '' }, bar, groups, empty);
+    root.append(element);
+    let open = false;
+    const otherViewOpen = () => !!root.querySelector('.fd-try:not([hidden]), .fd-words:not([hidden])');
+    const modeButton = (name) => modes.querySelector(`[data-mode="${name}"]`);
+    function show(next) {
+        // From Try it: back to designing first, then here.
+        if (next && root.querySelector('.fd-try:not([hidden])'))
+            modeButton('design')?.click();
+        open = next;
+        element.hidden = !open;
+        body.hidden = open || otherViewOpen();
+        toggle.setAttribute('aria-pressed', String(open));
+        if (open)
+            modeButton('design')?.setAttribute('aria-pressed', 'false');
+        else if (!otherViewOpen())
+            modeButton('design')?.setAttribute('aria-pressed', 'true');
+        if (!open)
+            return;
+        // Nothing on the page is picked here: keys meant for a picked part must not reach it.
+        designer.select(null);
+        render();
+    }
+    // On the bar, after the other views: one that was open closes first, then this opens.
+    const onMode = (event) => {
+        const button = event.target.closest('[data-mode]');
+        if (button === toggle)
+            show(true);
+        else if (open && button)
+            show(false);
+    };
+    modes.addEventListener('click', onMode);
+    /** Back to designing, the rule's part picked and its rules open. */
+    function go(rule) {
+        if (!rule.part)
+            return;
+        show(false);
+        openRules(root, designer, { part: rule.part, kind: rule.kind, index: rule.index });
+    }
+    /** A saved page a step opens, for its title, once the store has it. */
+    const saved = savedPage(designer);
+    /** Back to designing, the steps' part picked and their list open. */
+    function goToSteps(entry) {
+        show(false);
+        openSteps(root, designer, entry.place);
+    }
+    function stepsItemOf(entry) {
+        // The app's names — its actions, a page known by its id — kept apart as code.
+        const said = el('span', { class: 'fd-rules-item-say', dir: 'auto' }, ...withCode(doc, entry.lines.join('\n'), entry.codes));
+        const button = el('button', { type: 'button', class: 'fd-rules-item fd-rules-steps' }, el('span', { class: 'fd-rules-item-name', dir: 'auto' }, entry.name), said);
+        button.addEventListener('click', () => goToSteps(entry));
+        return el('li', {}, button);
+    }
+    function itemOf(rule) {
+        const button = el('button', { type: 'button', class: 'fd-rules-item' }, el('span', { class: 'fd-rules-item-name', dir: 'auto' }, rule.name), el('span', { class: 'fd-rules-item-say', dir: 'auto' }, rule.sentence));
+        if (!rule.part)
+            button.setAttribute('aria-disabled', 'true');
+        button.addEventListener('click', () => go(rule));
+        return el('li', {}, button);
+    }
+    function render() {
+        const page = designer.getPage();
+        const rules = pageRules(page, designer.words);
+        const steps = pageSteps(page, designer.words, saved);
+        // English words keep their order in a page right to left, on the page's side; the designer's own language runs its own way.
+        note.replaceChildren(el('span', { dir: designer.locale ? undefined : 'ltr' }, steps.length ? designer.words.steps.countWith(rules.length, steps.length) : w.count(rules.length)));
+        const words = filter.value.toLowerCase().split(/\s+/).filter(Boolean);
+        const kept = rules.filter((rule) => {
+            const text = `${rule.name} ${rule.sentence} ${w.groups[groupOf(page, rule)]}`.toLowerCase();
+            return words.every((word) => text.includes(word));
+        });
+        const keptSteps = steps.filter((entry) => {
+            const text = `${entry.name} ${entry.lines.join(' ')} ${designer.words.steps.groupNames[entry.group]}`.toLowerCase();
+            return words.every((word) => text.includes(word));
+        });
+        groups.replaceChildren(...GROUPS.flatMap((key) => {
+            const title = w.groups[key];
+            const own = kept.filter((rule) => groupOf(page, rule) === key);
+            if (!own.length)
+                return [];
+            const titleId = `${id}-${key}`;
+            const map = key === 'branches' && !words.length ? branches(page) : null;
+            return [el('section', { class: 'fd-rules-group', 'aria-labelledby': titleId }, el('h3', { class: 'fd-rules-group-title', id: titleId }, title), ...(map ? [map] : []), el('ul', { class: 'fd-rules-list' }, ...own.map(itemOf)))];
+        }), ...STEP_GROUPS.flatMap((key) => {
+            const own = keptSteps.filter((entry) => entry.group === key);
+            if (!own.length)
+                return [];
+            const titleId = `${id}-steps-${key}`;
+            return [el('section', { class: 'fd-rules-group', 'aria-labelledby': titleId }, el('h3', { class: 'fd-rules-group-title', id: titleId }, designer.words.steps.groupNames[key]), el('ul', { class: 'fd-rules-list' }, ...own.map(stepsItemOf)))];
+        }));
+        empty.hidden = kept.length + keptSteps.length > 0;
+        empty.textContent = rules.length || steps.length ? w.noRuleSays(filter.value.trim()) : w.noRules;
+    }
+    /** A survey's pages and where answers lead, as the map above the pages draws it. */
+    function branches(page) {
+        const drawn = branchMap(page, designer.words);
+        if (drawn.nodes.length < 2)
+            return null;
+        return el('div', { class: 'fd-branch-scroll fd-rules-branches' }, drawBranchMap(doc, drawn, null, (part) => go({ kind: 'shows', part, name: '', sentence: '', reads: [] }), designer.words));
+    }
+    filter.addEventListener('input', render);
+    // Up and down the list with the arrows, from the box too; Escape empties the box, then goes back to designing.
+    element.addEventListener('keydown', (event) => {
+        const items = [...groups.querySelectorAll('.fd-rules-item')];
+        const at = items.indexOf(doc.activeElement);
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (!items.length || (at === -1 && doc.activeElement !== filter))
+                return;
+            event.preventDefault();
+            const next = at === -1 ? 0 : Math.max(0, Math.min(items.length - 1, at + (event.key === 'ArrowDown' ? 1 : -1)));
+            if (at === 0 && event.key === 'ArrowUp')
+                filter.focus();
+            else
+                items[next].focus();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            if (filter.value) {
+                filter.value = '';
+                render();
+                filter.focus();
+            }
+            else {
+                show(false);
+                toggle.focus();
+            }
+        }
+    });
+    const leave = designer.subscribe((state) => {
+        if (!open)
+            return;
+        // Something picked on the page: back to the editor, where it is.
+        if (state.selected !== null)
+            return show(false);
+        render();
+    });
+    return {
+        element,
+        get open() {
+            return open;
+        },
+        items() {
+            const page = designer.getPage();
+            const each = [
+                ...pageRules(page, designer.words)
+                    .filter((rule) => rule.part)
+                    .map((rule) => ({ label: w.findRule(rule.name, rule.sentence), hint: w.groups[groupOf(page, rule)], run: () => go(rule) })),
+                ...pageSteps(page, designer.words, saved).map((entry) => ({ label: designer.words.steps.findSteps(entry.name, entry.lines.join(' · ')), hint: designer.words.steps.groupNames[entry.group], run: () => goToSteps(entry) })),
+            ];
+            if (!open)
+                return [{ label: w.rules, hint: w.everyRule, icon: 'rules', run: () => show(true) }, ...each];
+            return [{ label: w.backToDesigning, hint: w.design, run: () => show(false) }, { label: w.filter, hint: w.rules, run: () => filter.focus() }, ...each];
+        },
+        destroy() {
+            leave();
+            modes.removeEventListener('click', onMode);
+            toggle.remove();
+            element.remove();
+        },
+    };
+}
+//# sourceMappingURL=rules-overview.mjs.map