@table-bro/mcp 0.0.0-stage → 1.2.0

package/dist/generate/config.js

@@ -0,0 +1,95 @@
+import { skinCallbacks } from '../spec/skin-config.js';
+import { indentBlock, isPlainObject, lineComment, literal, raw } from './code.js';
+import { BroFiltersCode } from './filters.js';
+import { BroNames } from './names.js';
+/**
+ * The config of the table from the spec: the functions and the settings of the skin come from the data of the spec,
+ * only the bodies of the callbacks and of the custom rules from a model.
+ */
+export function configCode(spec, skin, fillings, indent, tagSuffix = '', extensions = []) {
+    const names = BroNames.of(spec, tagSuffix);
+    const config = spec.config ?? {};
+    const result = { code: '', preamble: [], imports: { '@table-bro/core': ['type BroConfig'] } };
+    const hasFilters = Boolean(spec.filters?.length);
+    const value = {
+        skin,
+        toolbarTitle: config.toolbarTitle,
+        pageSize: config.pageSize,
+        server: config.server,
+        rowCounter: config.rowCounter,
+        shadowsEnabled: config.shadowsEnabled,
+        theme: config.theme,
+        rowDetailsComponent: config.rowDetailsComponent && names.tag(config.rowDetailsComponent.cell),
+        rowDetailsServer: config.rowDetailsServer,
+        rowDetailsMotion: config.rowDetailsMotion,
+        // The fields of the paid modules are data: the generator writes them as they are
+        ...Object.fromEntries(extensions.flatMap(extension => Object.keys(extension.config ?? {})).map(field => [field, config[field]]))
+    };
+    const shortTitles = spec.cols.filter(col => col.shortTitle).map(col => [col.title, col.shortTitle]);
+    if (shortTitles.length) {
+        result.preamble.push(`/** The short titles of the columns: by them the table knows how narrow a column may be. */\nconst shortTitles: Record<string, string> = ${literal(Object.fromEntries(shortTitles))};`);
+        result.imports['@table-bro/core'].push('type BroCol');
+        value['shortColumnTitle'] = raw(`(col: BroCol<${spec.rowType}>) => shortTitles[col.title] ?? col.title?.split(' ')[0]`);
+    }
+    // The server applies the filters in the server mode
+    if (hasFilters && !config.server) {
+        result.imports['@table-bro/core'].push('matchesFilterCondition');
+        value['filtersTransform'] = raw(new BroFiltersCode(spec, fillings).transformCode());
+    }
+    const components = merge({}, spec.skinConfig?.[skin]?.components ?? {});
+    // The toolbar of a skin has only its search: a table with filters gets the Filters button, which opens the drawer
+    if (hasFilters) {
+        result.imports['@table-bro/core'].push('events');
+    }
+    merge(components, { toolbarMain: { buttons: toolbarButtons(spec, skin, hasFilters) } });
+    // The messages of the states go into the group state of the texts: the icons stay the ones of the skin, a font icon,
+    // an emoji or an animation of Lottie, which the page may give the skin
+    const states = Object.entries(spec.stateMessages ?? {});
+    if (states.length) {
+        value['texts'] = { state: Object.fromEntries(states) };
+    }
+    for (const callback of spec.skinConfig?.[skin]?.callbacks ?? []) {
+        const known = skinCallbacks.find(item => item.path === callback.path);
+        const body = fillings.callbacks?.[skin]?.[callback.path]?.trim() || `// TODO: ${lineComment(callback.does)}`;
+        const [, parameters, returns] = /^(\(.*?\)) => (.*)$/.exec(known.signature);
+        const path = callback.path.split('.').slice(1);
+        merge(components, path.reduceRight((item, key) => ({ [key]: item }), raw(`${parameters}: ${returns} => {\n${indentBlock(body, '  ')}\n}`)));
+    }
+    value['components'] = components;
+    value['css'] = spec.skinConfig?.[skin]?.css;
+    result.code = literal(value, indent);
+    return result;
+}
+function toolbarButtons(spec, skin, hasFilters) {
+    const material = (skin === 'mat');
+    const button = ({ title, action, icon }) => material ? { buttonTitle: title, iconHTML: icon, eventType: action, buttonTooltip: title } : { buttonTitle: title, eventType: action };
+    const buttons = [];
+    if (hasFilters) {
+        const eventType = raw('events.filtersToggleEvent');
+        buttons.push(material ? { buttonTitle: 'Filters', iconHTML: 'filter_list', eventType, buttonTooltip: 'Filters' } : { buttonTitle: 'Filters', eventType });
+    }
+    buttons.push(...(spec.toolbar?.buttons ?? []).map(button));
+    const menu = spec.toolbar?.menu;
+    if (menu) {
+        buttons.push({
+            buttonTitle: menu.title,
+            mode: 'navbar-dropdown',
+            buttonTooltip: material ? menu.title : undefined,
+            options: menu.items.map(({ title, action, icon }) => ({ value: action, iconHTML: material ? icon : undefined, title }))
+        });
+    }
+    return buttons;
+}
+/** Merges plain objects as the table merges the config of the application over the config of the skin. */
+function merge(target, source) {
+    for (const [key, item] of Object.entries(source)) {
+        const current = target[key];
+        if (isPlainObject(item) && isPlainObject(current)) {
+            merge(current, item);
+        }
+        else {
+            target[key] = isPlainObject(item) ? merge({}, item) : item;
+        }
+    }
+    return target;
+}

package/dist/generate/fillings.d.ts

@@ -0,0 +1,49 @@
+import type { BroSpecSkin } from '../spec/spec.js';
+import type { BroSpecIssue } from '../spec/validate-spec.js';
+/**
+ * The parts of the code that a model writes, by the contracts of the spec: the generator puts them into its scaffolds,
+ * which are always the same and right.
+ */
+export interface BroSpecFillings {
+    /** The cells and the row details by their names, for each skin. */
+    cells?: Record<string, Partial<Record<BroSpecSkin, BroCellFilling>>>;
+    /** The conditions of the filters with the match custom, by their names: the body of (row, value) => boolean. */
+    filterRules?: Record<string, string>;
+    /** The bodies of the functions of the skin config, by the skin and the path, as components.sortHeader.afterRender. */
+    callbacks?: Partial<Record<BroSpecSkin, Record<string, string>>>;
+}
+/**
+ * The errors of the form of fillings, each with its path: a part of another type would fail the generator. The parts
+ * themselves are code, which the generator does not check; null is no part.
+ */
+export declare function fillingsErrors(fillings: unknown): BroSpecIssue[];
+/** The errors of the form of the filling of one cell or of the row details. */
+export declare function fillingErrors(filling: unknown, path: string): BroSpecIssue[];
+export interface BroCellFilling {
+    /**
+     * Angular: the components of the project the template uses, as {name, from}. The classes of Angular Material and
+     * the pipes of Angular come from the template itself (templateClasses), so a model writes no imports.
+     */
+    imports?: (string | {
+        name: string;
+        from: string;
+    })[];
+    /** Angular: the template of the component, in every skin. */
+    template?: string;
+    /** Angular: the styles of the component. */
+    styles?: string;
+    /** Vanilla JS: the body of render(), which builds the DOM of the cell. */
+    render?: string;
+    /** Members of the class: computed values, handlers. */
+    members?: string;
+}
+/**
+ * The classes a generated component of the mat skin imports by name. The classes, not their NgModules: on the site a
+ * component compiled in the browser finds nothing through an NgModule of a library.
+ */
+export declare const angularClasses: Record<string, string>;
+/**
+ * The classes of angularClasses that a template uses, found by their selectors and pipes: the imports of a generated
+ * component come from its template, so a model writes no imports and no NgModule gets into them.
+ */
+export declare function templateClasses(template: string): string[];

package/dist/generate/fillings.js

@@ -0,0 +1,130 @@
+import { isPlainObject } from './code.js';
+/**
+ * The errors of the form of fillings, each with its path: a part of another type would fail the generator. The parts
+ * themselves are code, which the generator does not check; null is no part.
+ */
+export function fillingsErrors(fillings) {
+    const errors = [];
+    if (!objectAt(fillings, 'fillings', errors)) {
+        return errors;
+    }
+    if (objectAt(fillings['cells'], 'fillings.cells', errors)) {
+        for (const [cell, skins] of Object.entries(fillings['cells'])) {
+            if (objectAt(skins, `fillings.cells.${cell}`, errors)) {
+                for (const [skin, filling] of Object.entries(skins)) {
+                    errors.push(...fillingErrors(filling, `fillings.cells.${cell}.${skin}`));
+                }
+            }
+        }
+    }
+    if (objectAt(fillings['filterRules'], 'fillings.filterRules', errors)) {
+        for (const [filter, body] of Object.entries(fillings['filterRules'])) {
+            stringAt(body, `fillings.filterRules.${filter}`, errors);
+        }
+    }
+    if (objectAt(fillings['callbacks'], 'fillings.callbacks', errors)) {
+        for (const [skin, bodies] of Object.entries(fillings['callbacks'])) {
+            if (objectAt(bodies, `fillings.callbacks.${skin}`, errors)) {
+                for (const [path, body] of Object.entries(bodies)) {
+                    stringAt(body, `fillings.callbacks.${skin}.${path}`, errors);
+                }
+            }
+        }
+    }
+    return errors;
+}
+/** The errors of the form of the filling of one cell or of the row details. */
+export function fillingErrors(filling, path) {
+    const errors = [];
+    if (objectAt(filling, path, errors)) {
+        for (const part of ['template', 'styles', 'render', 'members']) {
+            stringAt(filling[part], `${path}.${part}`, errors);
+        }
+        if (filling['imports'] !== undefined && filling['imports'] !== null && !Array.isArray(filling['imports'])) {
+            errors.push({ path: `${path}.imports`, message: 'expected an array', fix: 'see get_docs with the topic fillings' });
+        }
+    }
+    return errors;
+}
+/** Whether a part is an object; a part of another type is an error, an absent one is none. */
+function objectAt(value, path, errors) {
+    if (value === undefined || value === null) {
+        return false;
+    }
+    if (!isPlainObject(value)) {
+        errors.push({ path, message: 'expected an object', fix: 'see get_docs with the topic fillings' });
+        return false;
+    }
+    return true;
+}
+function stringAt(value, path, errors) {
+    if (value !== undefined && value !== null && typeof value !== 'string') {
+        errors.push({ path, message: 'expected the code as a string', fix: 'see get_docs with the topic fillings' });
+    }
+}
+/**
+ * The classes a generated component of the mat skin imports by name. The classes, not their NgModules: on the site a
+ * component compiled in the browser finds nothing through an NgModule of a library.
+ */
+export const angularClasses = {
+    'CurrencyPipe': '@angular/common',
+    'DatePipe': '@angular/common',
+    'DecimalPipe': '@angular/common',
+    'LowerCasePipe': '@angular/common',
+    'PercentPipe': '@angular/common',
+    'SlicePipe': '@angular/common',
+    'TitleCasePipe': '@angular/common',
+    'UpperCasePipe': '@angular/common',
+    'MatBadge': '@angular/material/badge',
+    'MatButton': '@angular/material/button',
+    'MatFabButton': '@angular/material/button',
+    'MatIconButton': '@angular/material/button',
+    'MatMiniFabButton': '@angular/material/button',
+    'MatCheckbox': '@angular/material/checkbox',
+    'MatChip': '@angular/material/chips',
+    'MatChipSet': '@angular/material/chips',
+    'MatDivider': '@angular/material/divider',
+    'MatIcon': '@angular/material/icon',
+    'MatMenu': '@angular/material/menu',
+    'MatMenuItem': '@angular/material/menu',
+    'MatMenuTrigger': '@angular/material/menu',
+    'MatProgressBar': '@angular/material/progress-bar',
+    'MatProgressSpinner': '@angular/material/progress-spinner',
+    'MatSlideToggle': '@angular/material/slide-toggle',
+    'MatTooltip': '@angular/material/tooltip'
+};
+/** The classes of a template by their selectors and pipes, in the order of angularClasses. */
+const templateSelectors = [
+    [/\|\s*currency(?![\w-])/, 'CurrencyPipe'],
+    [/\|\s*date(?![\w-])/, 'DatePipe'],
+    [/\|\s*number(?![\w-])/, 'DecimalPipe'],
+    [/\|\s*lowercase(?![\w-])/, 'LowerCasePipe'],
+    [/\|\s*percent(?![\w-])/, 'PercentPipe'],
+    [/\|\s*slice(?![\w-])/, 'SlicePipe'],
+    [/\|\s*titlecase(?![\w-])/, 'TitleCasePipe'],
+    [/\|\s*uppercase(?![\w-])/, 'UpperCasePipe'],
+    [/\bmatBadge(?![\w-])/, 'MatBadge'],
+    [/\b(mat-button|mat-flat-button|mat-stroked-button|mat-raised-button|matButton)(?![\w-])/, 'MatButton'],
+    [/\b(mat-fab|matFab)(?![\w-])/, 'MatFabButton'],
+    [/\b(mat-icon-button|matIconButton)(?![\w-])/, 'MatIconButton'],
+    [/\b(mat-mini-fab|matMiniFab)(?![\w-])/, 'MatMiniFabButton'],
+    [/<mat-checkbox(?![\w-])/, 'MatCheckbox'],
+    [/<mat-chip(?![\w-])/, 'MatChip'],
+    [/<mat-chip-set(?![\w-])/, 'MatChipSet'],
+    [/<mat-divider(?![\w-])/, 'MatDivider'],
+    [/<mat-icon(?![\w-])/, 'MatIcon'],
+    [/<mat-menu(?![\w-])/, 'MatMenu'],
+    [/\bmat-menu-item(?![\w-])/, 'MatMenuItem'],
+    [/\bmatMenuTriggerFor(?![\w-])/, 'MatMenuTrigger'],
+    [/<mat-progress-bar(?![\w-])/, 'MatProgressBar'],
+    [/<(mat-progress-spinner|mat-spinner)(?![\w-])/, 'MatProgressSpinner'],
+    [/<mat-slide-toggle(?![\w-])/, 'MatSlideToggle'],
+    [/\bmatTooltip(?![\w-])/, 'MatTooltip']
+];
+/**
+ * The classes of angularClasses that a template uses, found by their selectors and pipes: the imports of a generated
+ * component come from its template, so a model writes no imports and no NgModule gets into them.
+ */
+export function templateClasses(template) {
+    return templateSelectors.filter(([selector]) => selector.test(template)).map(([, name]) => name);
+}

package/dist/generate/filters.d.ts

@@ -0,0 +1,36 @@
+import type { BroSpecFilter, BroSpecSkin, BroTableSpec } from '../spec/spec.js';
+import type { BroSpecFillings } from './fillings.js';
+/** A key of the object of the filters: a range gives two. */
+interface BroFilterKey {
+    key: string;
+    type: 'string' | 'number' | 'boolean';
+    label: string;
+}
+/**
+ * The filters of a spec as code: the type of the object of the filters, the component of the Filter Drawer, and
+ * filtersTransform of the local mode.
+ */
+export declare class BroFiltersCode {
+    private spec;
+    private fillings;
+    private readonly names;
+    private readonly fields;
+    constructor(spec: BroTableSpec, fillings?: BroSpecFillings);
+    get filters(): BroSpecFilter[];
+    /** The type of the object of the filters, after the type of the row. */
+    typeCode(): string;
+    /** filtersTransform of the local mode: every filter limits the rows, a cleared one is undefined and limits nothing. */
+    transformCode(): string;
+    /** The Angular component of the filters: the content of the Filter Drawer, with the fields of the skin. */
+    angularComponent(skin: BroSpecSkin): string;
+    /** The form of the filters in Vanilla JS: the content of the Filter Drawer with slot="filters". */
+    vanillaForm(skin: BroSpecSkin): string;
+    keys(): BroFilterKey[];
+    private valueType;
+    private options;
+    private angularField;
+    private vanillaField;
+    /** A field of the bs or the nv skin: Angular binds it with formControlName, Vanilla JS reads it by its name. */
+    private htmlField;
+}
+export {};

package/dist/generate/filters.js

@@ -0,0 +1,254 @@
+import { escapeHtml, escapeTemplate, imports, importsField, indentBlock, lineComment, objectKey, templateText } from './code.js';
+import { BroNames } from './names.js';
+/**
+ * The filters of a spec as code: the type of the object of the filters, the component of the Filter Drawer, and
+ * filtersTransform of the local mode.
+ */
+export class BroFiltersCode {
+    spec;
+    fillings;
+    names;
+    fields;
+    constructor(spec, fillings = {}) {
+        this.spec = spec;
+        this.fillings = fillings;
+        this.names = BroNames.of(spec);
+        this.fields = new Map(spec.fields.map(field => [field.name, field]));
+    }
+    get filters() {
+        return this.spec.filters ?? [];
+    }
+    /** The type of the object of the filters, after the type of the row. */
+    typeCode() {
+        return [
+            `export type ${this.names.filtersType} = BroFilters<${this.spec.rowType}, {`,
+            ...this.keys().map(({ key, type }) => `  ${key}?: ${type};`),
+            '}>;'
+        ].join('\n');
+    }
+    /** filtersTransform of the local mode: every filter limits the rows, a cleared one is undefined and limits nothing. */
+    transformCode() {
+        const { rowType } = this.spec;
+        const rules = [];
+        const conditions = [];
+        for (const filter of this.filters) {
+            const value = `filters.${filter.name}`;
+            const row = filter.field ? `row.${filter.field}` : '';
+            if (filter.match === 'custom') {
+                const name = `matches${filter.name[0].toUpperCase()}${filter.name.slice(1)}`;
+                const filled = this.fillings.filterRules?.[filter.name]?.trim();
+                const body = filled || `// TODO: ${lineComment(filter.rule)}\nreturn true;`;
+                // A written rule without the value of its filter, as a checkbox, takes only the row
+                const withValue = !filled || /\bvalue\b/.test(filled);
+                rules.push(`// ${lineComment(filter.label)}: ${lineComment(filter.rule)}`, `const ${name} = (row: ${rowType}${withValue ? `, value: ${this.valueType(filter)}` : ''}): boolean => {`, indentBlock(body, '  '), '};', '');
+                conditions.push(`(${value} === undefined || ${name}(row${withValue ? `, ${value}` : ''}))`);
+            }
+            else if (filter.control === 'range') {
+                conditions.push(`matchesFilterCondition(${row}, {gte: filters.${filter.name}From, lte: filters.${filter.name}To})`);
+            }
+            else if (this.fields.get(filter.field)?.type === 'string[]') {
+                conditions.push(`(${value} === undefined || ${row}.includes(${value}))`);
+            }
+            else {
+                conditions.push(`matchesFilterCondition(${row}, {${filter.match ?? (filter.control === 'text' ? 'contains' : 'eq')}: ${value}})`);
+            }
+        }
+        const filterRows = `return rows.filter((row: ${rowType}) => {\n  return ${conditions.join('\n    && ')};\n});`;
+        if (!rules.length) {
+            return `(rows: ${rowType}[], filters: ${this.names.filtersType}) => rows.filter((row: ${rowType}) => {\n  return ${conditions.join('\n    && ')};\n})`;
+        }
+        return `(rows: ${rowType}[], filters: ${this.names.filtersType}) => {\n${indentBlock([...rules, filterRows].join('\n'), '  ')}\n}`;
+    }
+    /** The Angular component of the filters: the content of the Filter Drawer, with the fields of the skin. */
+    angularComponent(skin) {
+        const material = (skin === 'mat');
+        const angularModules = {
+            '@angular/core': ['ChangeDetectionStrategy', 'Component', 'EventEmitter', 'Output'],
+            '@angular/core/rxjs-interop': ['takeUntilDestroyed'],
+            '@angular/forms': ['FormControl', 'FormGroup', 'ReactiveFormsModule']
+        };
+        if (material) {
+            const controls = new Set(this.filters.map(filter => filter.control));
+            Object.assign(angularModules, {
+                '@angular/material/button': ['MatButton'],
+                '@angular/material/icon': ['MatIcon'],
+                '@angular/material/checkbox': controls.has('checkbox') ? ['MatCheckbox'] : [],
+                '@angular/material/form-field': (controls.has('text') || controls.has('select') || controls.has('range')) ? ['MatFormField', 'MatLabel'] : [],
+                '@angular/material/input': (controls.has('text') || controls.has('range')) ? ['MatInput'] : [],
+                '@angular/material/select': controls.has('select') ? ['MatOption', 'MatSelect'] : []
+            });
+        }
+        const classes = Object.fromEntries(Object.entries(angularModules)
+            .filter(([module]) => module === '@angular/forms' || module.startsWith('@angular/material/'))
+            .map(([module, names]) => [module, (module === '@angular/forms') ? ['ReactiveFormsModule'] : names]));
+        const markup = this.filters.map(filter => this.angularField(filter, skin)).join('\n\n');
+        const clear = {
+            mat: '<button matButton type="button" (click)="form.reset()">\n    <mat-icon>filter_list_off</mat-icon>\n    Clear\n  </button>',
+            bs: '<button type="button" class="nav-link px-0" (click)="form.reset()">Clear</button>',
+            nv: '<a href="" class="bro-nav-link" (click)="$event.preventDefault(); form.reset()">Clear</a>'
+        }[skin];
+        const template = `<form [formGroup]="form">\n${indentBlock(markup, '  ')}\n\n  ${clear}\n</form>`;
+        return [
+            imports({
+                ...angularModules,
+                rxjs: ['debounceTime'],
+                [`./${this.names.kebab}`]: [`type ${this.names.filtersType}`]
+            }),
+            '',
+            '/**',
+            ' * The filters of the Filter Drawer next to the table: the page gives them to the table with its input filter.',
+            ' * The output is a decorator (@Output), as in the cells of this table.',
+            ' */',
+            '@Component({',
+            `  selector: '${this.names.filtersSelector}',`,
+            `  template: \`\n${indentBlock(templateText(template), '      ')}\`,`,
+            `  styles: \`\n${indentBlock(styles[skin], '      ')}\`,`,
+            '  changeDetection: ChangeDetectionStrategy.OnPush,',
+            importsField(classes),
+            '})',
+            `export class ${this.names.filtersClass} {`,
+            `  @Output() changeFilter: EventEmitter<${this.names.filtersType}> = new EventEmitter<${this.names.filtersType}>();`,
+            '',
+            '  form = new FormGroup({',
+            this.keys().map(({ key, type }) => `    ${objectKey(key)}: new FormControl<${type} | null>(null)`).join(',\n'),
+            '  });',
+            '',
+            '  constructor() {',
+            '    // The table accumulates the changes of its filters, so a cleared field goes as an empty value',
+            '    this.form.valueChanges.pipe(debounceTime(400), takeUntilDestroyed()).subscribe(value => {',
+            '      this.changeFilter.emit({',
+            this.keys().map(({ key, type }) => `        ${objectKey(key)}: value.${key} ${type === 'number' ? '??' : '||'} undefined`).join(',\n'),
+            '      });',
+            '    });',
+            '  }',
+            '}',
+            ''
+        ].join('\n');
+    }
+    /** The form of the filters in Vanilla JS: the content of the Filter Drawer with slot="filters". */
+    vanillaForm(skin) {
+        // The native fields have no classes of a library: the form brings their rules
+        const style = (skin === 'nv') ? `<style>\n${indentBlock(styles.nv.replace(/\.app-native-field/g, `.${this.names.filtersSelector} .app-native-field`), '  ')}\n</style>\n\n` : '';
+        const markup = style + this.filters.map(filter => this.vanillaField(filter, skin)).join('\n\n');
+        const clear = (skin === 'bs') ? '<button type="button" class="nav-link px-0 app-filters-clear">Clear</button>' : '<a href="" class="bro-nav-link app-filters-clear">Clear</a>';
+        const read = this.keys().map(({ key, type }) => {
+            if (type === 'number') {
+                return `    ${objectKey(key)}: data.get('${key}') ? Number(data.get('${key}')) : undefined`;
+            }
+            return (type === 'boolean') ? `    ${objectKey(key)}: data.has('${key}') || undefined` : `    ${objectKey(key)}: (data.get('${key}') as string) || undefined`;
+        });
+        return [
+            imports({ [`type ./${this.names.kebab}`]: [this.names.filtersType] }),
+            '',
+            '/**',
+            ' * The form of the filters in the Filter Drawer next to the table, with slot="filters". It reports the filters',
+            ' * on every change; a cleared field goes as an empty value, as the table accumulates the changes of its filters.',
+            ' */',
+            `export function render${this.names.filtersClass}(onChange: (filters: ${this.names.filtersType}) => void): HTMLFormElement {`,
+            '  const form: HTMLFormElement = document.createElement(\'form\');',
+            '',
+            `  form.className = '${this.names.filtersSelector}';`,
+            '  form.setAttribute(\'slot\', \'filters\');',
+            '  form.setAttribute(\'autocomplete\', \'off\');',
+            `  form.innerHTML = \`\n${indentBlock(templateText(`${markup}\n\n${clear}`), '    ')}\`;`,
+            '',
+            '  const report = () => {',
+            '    const data = new FormData(form);',
+            '',
+            '    onChange({',
+            read.map(line => '  ' + line).join(',\n'),
+            '    });',
+            '  };',
+            '',
+            '  form.addEventListener(\'input\', report);',
+            '  form.querySelector(\'.app-filters-clear\')!.addEventListener(\'click\', (event: Event) => {',
+            '    event.preventDefault();',
+            '',
+            '    form.reset();',
+            '    report();',
+            '  });',
+            '',
+            '  return form;',
+            '}',
+            ''
+        ].join('\n');
+    }
+    keys() {
+        return this.filters.flatMap(filter => {
+            if (filter.control === 'range') {
+                return [
+                    { key: `${filter.name}From`, type: 'number', label: `${filter.label} from` },
+                    { key: `${filter.name}To`, type: 'number', label: `${filter.label} to` }
+                ];
+            }
+            return [{ key: filter.name, type: this.valueType(filter), label: filter.label }];
+        });
+    }
+    valueType(filter) {
+        return (filter.control === 'checkbox') ? 'boolean' : (filter.control === 'range') ? 'number' : 'string';
+    }
+    options(filter) {
+        return this.fields.get(filter.field ?? '')?.values ?? [];
+    }
+    angularField(filter, skin) {
+        const label = escapeTemplate(filter.label);
+        const keys = this.keys().filter(({ key }) => key === filter.name || key === `${filter.name}From` || key === `${filter.name}To`);
+        if (skin === 'mat') {
+            switch (filter.control) {
+                case 'text':
+                    return matField(label, `<input matInput type="search" formControlName="${filter.name}">`);
+                case 'select':
+                    return matField(label, [
+                        `<mat-select formControlName="${filter.name}">`,
+                        '  <mat-option [value]="null">Any</mat-option>',
+                        ...this.options(filter).map(option => `  <mat-option value="${escapeTemplate(option)}">${escapeTemplate(option)}</mat-option>`),
+                        '</mat-select>'
+                    ].join('\n'));
+                case 'range':
+                    return `<div class="app-filter-range">\n${indentBlock(keys.map(({ key, label }) => matField(escapeTemplate(label), `<input matInput type="number" formControlName="${key}">`)).join('\n'), '  ')}\n</div>`;
+                default:
+                    return `<mat-checkbox class="app-filter" formControlName="${filter.name}">${label}</mat-checkbox>`;
+            }
+        }
+        return this.htmlField(filter, skin, true);
+    }
+    vanillaField(filter, skin) {
+        return this.htmlField(filter, skin, false);
+    }
+    /** A field of the bs or the nv skin: Angular binds it with formControlName, Vanilla JS reads it by its name. */
+    htmlField(filter, skin, angular) {
+        const escape = angular ? escapeTemplate : escapeHtml;
+        const bootstrap = (skin === 'bs');
+        const bind = (key) => angular ? `formControlName="${key}"` : `name="${key}"`;
+        const input = (key, type) => `<input type="${type}"${bootstrap ? ' class="form-control mt-1"' : ''} ${bind(key)}>`;
+        const field = (label, control) => {
+            return bootstrap ? `<label class="form-label w-100 mb-2">\n  ${label}\n  ${control}\n</label>` : `<label class="app-native-field">\n  ${label}\n  ${control}\n</label>`;
+        };
+        switch (filter.control) {
+            case 'text':
+                return field(escape(filter.label), input(filter.name, 'search'));
+            case 'select': {
+                const empty = angular ? '<option [ngValue]="null">Any</option>' : '<option value="">Any</option>';
+                const options = this.options(filter).map(option => `<option value="${escape(option)}">${escape(option)}</option>`);
+                return field(escape(filter.label), [`<select${bootstrap ? ' class="form-select mt-1"' : ''} ${bind(filter.name)}>`, `  ${empty}`, ...options.map(option => `  ${option}`), '</select>'].join('\n  '));
+            }
+            case 'range':
+                return this.keys()
+                    .filter(({ key }) => key === `${filter.name}From` || key === `${filter.name}To`)
+                    .map(({ key, label }) => field(escape(label), input(key, 'number')))
+                    .join('\n');
+            default:
+                return bootstrap ? `<div class="form-check mb-2">\n  <label class="form-check-label">\n    <input type="checkbox" class="form-check-input" ${bind(filter.name)}>\n    ${escape(filter.label)}\n  </label>\n</div>` : `<label class="app-native-field">\n  <input type="checkbox" ${bind(filter.name)}>\n  ${escape(filter.label)}\n</label>`;
+        }
+    }
+}
+/** A field of Angular Material as the filters of table-bro.com: without the place of the hint, the styles space the fields. */
+function matField(label, control) {
+    return `<mat-form-field class="app-filter" subscriptSizing="dynamic">\n  <mat-label>${label}</mat-label>\n${indentBlock(control, '  ')}\n</mat-form-field>`;
+}
+const styles = {
+    // The fields have no fill and stand 16 px apart, as the filters of table-bro.com
+    mat: ':host {\n  --mat-form-field-filled-container-color: transparent;\n}\n\n.app-filter {\n  display: block;\n  width: 100%;\n  margin-bottom: 16px;\n}\n\n.app-filter-range {\n  display: flex;\n  gap: 8px;\n}',
+    bs: ':host {\n  display: block;\n}',
+    nv: '.app-native-field {\n  display: block;\n  margin-bottom: 12px;\n}\n\n.app-native-field input:not([type="checkbox"]),\n.app-native-field select {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  margin-top: 4px;\n}'
+};

package/dist/generate/generate-code.d.ts

@@ -0,0 +1,34 @@
+import type { BroMcpExtension } from '../extension.js';
+import type { BroSpecSkin, BroTableSpec } from '../spec/spec.js';
+import { type BroSpecLimits, type BroSpecReport } from '../spec/validate-spec.js';
+import { type BroGeneratedFile } from './angular.js';
+import { type BroSpecFillings } from './fillings.js';
+import { type BroSetupStep, type BroTarget } from './setup.js';
+export interface BroGenerateOptions {
+    target: BroTarget;
+    skin: BroSpecSkin;
+    /** The parts of the code that a model writes; without them the scaffolds have TODOs in their place. */
+    fillings?: BroSpecFillings;
+    /** The paid modules of the project: the generator writes their fields of the config and adds their setup. */
+    extensions?: BroMcpExtension[];
+    /** The suffix of the tags of the cells: tables generated into one page define their own Custom Elements. */
+    tagSuffix?: string;
+    /** Angular in the server mode: the page answers the queries of the table from the rows of the spec, as a server would. */
+    simulateServer?: boolean;
+    /** The sizes of a spec that the host takes. */
+    limits?: BroSpecLimits;
+}
+export interface BroGeneratedCode {
+    /** The check of the spec: with errors there are no files. */
+    report: BroSpecReport;
+    files: BroGeneratedFile[];
+    /** The setup of the project, once for all its tables. */
+    setup: BroSetupStep[];
+    /** What to finish by hand. */
+    todo: string[];
+}
+/**
+ * Writes the code of a table from its spec for a target and a skin: a pure function, the spec and the fillings in,
+ * the files out. It checks the spec first and writes nothing for a spec with errors.
+ */
+export declare function generateCode(spec: BroTableSpec, options: BroGenerateOptions): BroGeneratedCode;