@table-bro/mcp 0.0.0-stage → 1.2.0

package/dist/generate/service.js

@@ -0,0 +1,320 @@
+import { imports, literal, objectKey, quote } from './code.js';
+import { BroNames } from './names.js';
+/**
+ * The service of a server table, as BroService of @table-bro/angular: loadPage sends the request of a query of the table
+ * and gives the rows of its page with the number of all rows; mapServerQuery turns the query into the request of the API,
+ * and mapServerResponse the answer of the API into the rows. The page only delivers the rows to the table. The simulated
+ * server of the site is a REST API with names of its own, so its service maps as the service of a real API does.
+ */
+export function serviceCode(spec, source, filtersCode) {
+    // The spec as the service sees its API: the simulated server has the names and the parameters of a REST API
+    const view = (source === 'simulated') ? simulatedSpec(spec, filtersCode) : spec;
+    const names = BroNames.of(spec);
+    const row = spec.rowType;
+    const api = view.api;
+    const pages = (source === 'api-pages' || source === 'simulated');
+    const filters = Boolean(filtersCode) && pages && Boolean(api?.filters);
+    // The simulated server and an API without pages filter the rows as filtersTransform of the local mode does
+    const localFilters = Boolean(filtersCode) && (source === 'simulated' || source === 'api');
+    const renamed = renamedSources(view);
+    const http = (source !== 'simulated');
+    // The parts of each source: only the one of the source runs, as only an API has the paths of its answer
+    const types = {
+        project: () => [
+            '/** A request of your API: its query parameters. */',
+            `export type ${names.apiQueryType} = Record<string, string | number | boolean>;`,
+            '',
+            '/** An answer of your API: the rows of a page and the number of all rows. Replace it with the answer of your API. */',
+            `export interface ${names.apiPageType} {`,
+            `  rows: ${row}[];`,
+            '  total: number;',
+            '}'
+        ],
+        simulated: () => apiTypes(view, names, 'A request of the simulated server: the query parameters of a page, its search, its sort and its filters. Your API has its own.'),
+        'api-pages': () => apiTypes(view, names, 'A request of the API: the query parameters of a page, its search, its sort and its filters.'),
+        api: () => apiTypes(view, names, 'A request of the API: it gives all its rows at once and takes no parameters.')
+    }[source]();
+    const loadPage = (source === 'simulated')
+        ? [
+            '  /** A page of the query: the request of the simulated server, and its answer as the rows of the table. */',
+            `  loadPage(query: BroQuery<${row}>): Promise<BroServerPage<${row}>> {`,
+            `    return simulatedServer(this.mapServerQuery(query)).then((response: ${names.apiPageType}) => this.mapServerResponse(response));`,
+            '  }'
+        ]
+        : (source === 'api')
+            ? [
+                '  /** A page of the query from all the rows of the API, filtered by the search and the filters and sorted. */',
+                `  loadPage(query: BroQuery<${row}>): Promise<BroServerPage<${row}>> {`,
+                `    return this.loadRows().then((rows: ${row}[]) => queryPage(rows, query));`,
+                '  }',
+                '',
+                '  /** All the rows of the API: its answer comes once, and the service turns it into rows. */',
+                `  private loadRows(): Promise<${row}[]> {`,
+                `    return this.apiRows ??= ${request(names, quote(spec.api.url), '')}`,
+                `      .then((response: ${names.apiPageType}) => this.mapServerResponse(response).rows);`,
+                '  }'
+            ]
+            : [
+                `  /** A page of the query: the request of ${(source === 'project') ? 'your API' : 'the API'}, and its answer as the rows of the table. */`,
+                `  loadPage(query: BroQuery<${row}>): Promise<BroServerPage<${row}>> {`,
+                ...((source === 'project') ? ['    // TODO: the address of your API'] : []),
+                `    return ${request(names, quote((source === 'project') ? `/api/${names.kebab}s` : spec.api.url))}`,
+                `      .then((response: ${names.apiPageType}) => this.mapServerResponse(response));`,
+                '  }'
+            ];
+    const mapQuery = {
+        project: () => [
+            `  mapServerQuery(query: BroQuery<${row}>): ${names.apiQueryType} {`,
+            '    // TODO: the parameters of your API for the sort (query.sort), the search and the filters (query.filter)',
+            '    return {page: query.page, pageSize: query.pageSize};',
+            '  }'
+        ],
+        simulated: () => pagesQuery(view, names, filters, renamed.length > 0),
+        'api-pages': () => pagesQuery(view, names, filters, renamed.length > 0),
+        api: () => [
+            '  /** The API takes no parameters: the service answers the queries of the table from all its rows. */',
+            `  mapServerQuery(): ${names.apiQueryType} {`,
+            '    return {};',
+            '  }'
+        ]
+    }[source]();
+    const mapResponse = (source === 'project')
+        ? [
+            `  mapServerResponse(response: ${names.apiPageType}): BroServerPage<${row}> {`,
+            '    return {rows: response.rows, total: response.total};',
+            '  }'
+        ]
+        : [
+            `  mapServerResponse(response: ${names.apiPageType}): BroServerPage<${row}> {`,
+            `    const rows: ${row}[] = ${access('response', api.rows)}.map((item: ${names.apiItemType}) => ({`,
+            view.fields.map(field => `      ${objectKey(field.name)}: ${access('item', field.source ?? field.name)}`).join(',\n'),
+            '    }));',
+            '',
+            `    return {rows, total: ${pages ? access('response', api.total) : 'rows.length'}};`,
+            '  }'
+        ];
+    const members = [
+        ...(http ? ['  private http = inject(HttpClient);'] : []),
+        ...((source === 'api') ? ['  /** All the rows of the API, loaded once: the service answers the queries of the table from them. */', `  private apiRows?: Promise<${row}[]>;`] : []),
+        ...(http ? [''] : []),
+        ...loadPage,
+        '',
+        ...mapQuery,
+        '',
+        ...mapResponse
+    ];
+    // The simulated server and an API without pages answer the queries from all the rows, after the service
+    const local = [
+        ...(localFilters ? ['', `/** The filters of the drawer on ${(source === 'api') ? 'the rows of the API' : 'the records of the simulated server'}. */`, `const filterRows = ${filtersCode.transformCode()};`] : []),
+        ...((source === 'api') ? ['', queryPageCode(spec, localFilters ? `filterRows(rows, (query.filter ?? {}) as ${names.filtersType})` : 'rows')] : []),
+        ...((source === 'simulated') ? ['', ...simulatedServerCode(spec, view, names, localFilters)] : [])
+    ];
+    return [
+        imports({
+            '@angular/common/http': http ? ['HttpClient'] : [],
+            '@angular/core': ['Injectable', ...(http ? ['inject'] : [])],
+            rxjs: http ? ['firstValueFrom'] : [],
+            '@table-bro/core': ['type BroQuery', ...(localFilters ? ['matchesFilterCondition'] : [])],
+            '@table-bro/angular': ['type BroServerPage', 'type BroService'],
+            [`./${names.kebab}`]: [`type ${row}`, ...((filters || localFilters) ? [`type ${names.filtersType}`] : [])]
+        }),
+        '',
+        ...types,
+        '',
+        ...((pages && renamed.length)
+            ? [
+                '/** The names of the API for the fields of a row: the API sorts by them. */',
+                `const apiFields: Partial<Record<keyof ${row}, string>> = ${literal(Object.fromEntries(renamed), '')};`,
+                ''
+            ]
+            : []),
+        '/**',
+        ` * The service of the table: it sends the request of a query of the table to ${(source === 'simulated') ? 'the simulated server' : (source === 'project') ? 'your API' : 'the API'}, and turns its answer`,
+        ' * into the rows of a page with the number of all rows. The page delivers them to the table.',
+        ' */',
+        '@Injectable({providedIn: \'root\'})',
+        `export class ${names.serviceClass} implements BroService<${row}, ${names.apiQueryType}, ${names.apiPageType}> {`,
+        ...members,
+        '}',
+        ...local,
+        ''
+    ].join('\n');
+}
+/**
+ * The request of a query to an API by HttpClient: its parameters come from mapServerQuery.
+ * @param names - the names of the table
+ * @param url - the address of the API, as a string literal
+ * @param query - the argument of mapServerQuery: none for an API without parameters
+ */
+function request(names, url, query = 'query') {
+    return `firstValueFrom(this.http.get<${names.apiPageType}>(${url}, {params: this.mapServerQuery(${query})}))`;
+}
+/**
+ * The spec as the simulated server of the site gives it: a REST API with the parameters page, per_page, q and sort,
+ * the filters in snake case, and the answer {data, meta: {total_count}} with the fields in its own names.
+ */
+function simulatedSpec(spec, filters) {
+    return {
+        ...spec,
+        fields: spec.fields.map(field => ({ ...field, source: simulatedName(field.name, field.type === 'boolean') })),
+        api: {
+            url: '',
+            rows: 'data',
+            total: 'meta.total_count',
+            paging: { size: 'per_page', page: 'page' },
+            search: 'q',
+            sort: { field: 'sort' },
+            filters: Object.fromEntries((filters?.keys() ?? []).map(({ key, type }) => [key, simulatedName(key, type === 'boolean')]))
+        }
+    };
+}
+/** A name of the simulated API: snake case, and a yes or no field starts with is_ when it has no such start. */
+function simulatedName(name, flag) {
+    const snake = name.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
+    return (flag && !/^(is|has|can)_/.test(snake)) ? `is_${snake}` : snake;
+}
+/**
+ * The simulated server of the site: its records are the rows of the spec. It reads its query parameters as a server
+ * does, and answers in half a second with a page of its records in the names of its API.
+ */
+function simulatedServerCode(spec, view, names, filters) {
+    const row = spec.rowType;
+    const api = view.api;
+    const filterValues = Object.entries(api.filters ?? {}).map(([key, parameter]) => `    ${objectKey(key)}: request[${quote(parameter)}]`);
+    return [
+        '/** The records of the simulated server: the rows of the spec. */',
+        `const serverRows: ${row}[] = ${literal(spec.rows ?? [], '')};`,
+        '',
+        '/**',
+        ' * The simulated server: it reads its query parameters as a server does, and answers in half a second with a page of',
+        ' * its records in the names of its API. Your API takes its place.',
+        ' */',
+        `function simulatedServer(request: ${names.apiQueryType}): Promise<${names.apiPageType}> {`,
+        `  const page: number = Number(request[${quote(api.paging.page)}]);`,
+        `  const perPage: number = Number(request[${quote(api.paging.size)}]);`,
+        `  const search: string = String(request[${quote(api.search)}] ?? '').toLowerCase();`,
+        `  const sort: string = String(request[${quote(api.sort.field)}] ?? '');`,
+        `  const key = sort.replace(/^-/, '') as keyof ${names.apiItemType};`,
+        '  const direction: number = sort.startsWith(\'-\') ? -1 : 1;',
+        ...(filters ? ['  const filters = {', filterValues.join(',\n'), `  } as ${names.filtersType};`] : []),
+        `  const items: ${names.apiItemType}[] = ${filters ? 'filterRows(serverRows, filters)' : 'serverRows'}`,
+        `    .map((row: ${row}) => ({`,
+        view.fields.map(field => `      ${objectKey(field.source ?? field.name)}: row.${field.name}`).join(',\n'),
+        '    }))',
+        '    .filter(item => !search || Object.values(item).some(value => String(value).toLowerCase().includes(search)))',
+        '    .sort((a, b) => sort ? String(a[key]).localeCompare(String(b[key]), undefined, {numeric: true}) * direction : 0);',
+        '  const start: number = (page - 1) * perPage;',
+        '',
+        `  return new Promise(resolve => setTimeout(() => resolve({${api.rows}: items.slice(start, start + perPage), meta: {'total_count': items.length}}), 500));`,
+        '}'
+    ];
+}
+/** The page of a query from all the rows of a server: filtered by the search and the filters, sorted, and cut to the page. */
+function queryPageCode(spec, filtered) {
+    const row = spec.rowType;
+    return [
+        '/** The page of a query from all the rows: filtered by the search and the filters, sorted, and cut to the page. */',
+        `function queryPage(rows: ${row}[], query: BroQuery<${row}>): BroServerPage<${row}> {`,
+        '  const search: string = (query.filter?.search ?? \'\').toLowerCase();',
+        `  const [key] = (query.sort?.order ?? []) as (keyof ${row})[];`,
+        '  const direction: number = (key && query.sort?.keys[key]?.direction === \'desc\') ? -1 : 1;',
+        `  const found: ${row}[] = ${filtered}`,
+        '    .filter(row => !search || Object.values(row).some(value => String(value).toLowerCase().includes(search)))',
+        '    .sort((a, b) => key ? String(a[key]).localeCompare(String(b[key]), undefined, {numeric: true}) * direction : 0);',
+        '  const start: number = (query.page - 1) * query.pageSize;',
+        '',
+        '  return {rows: found.slice(start, start + query.pageSize), total: found.length};',
+        '}'
+    ].join('\n');
+}
+/** The types of the request, of an item and of the answer of the API of the spec, as far as the table reads them. */
+function apiTypes(spec, names, request) {
+    const api = spec.api;
+    const item = new Map();
+    const page = new Map();
+    spec.fields.forEach(field => addPath(item, field.source ?? field.name, field.type));
+    if (api.rows) {
+        addPath(page, api.rows, `${names.apiItemType}[]`);
+    }
+    if (api.total && api.paging) {
+        addPath(page, api.total, 'number');
+    }
+    return [
+        `/** ${request} */`,
+        `export type ${names.apiQueryType} = Record<string, string | number | boolean>;`,
+        '',
+        '/** An item of the answer of the API: the values that the table shows. */',
+        `export interface ${names.apiItemType} ${typeText(item, '')}`,
+        '',
+        ...(api.rows
+            ? [
+                `/** An answer of the API: ${api.paging ? 'a page of its items with the number of all items' : 'all its items'}. */`,
+                `export interface ${names.apiPageType} ${typeText(page, '')}`
+            ]
+            : [
+                '/** An answer of the API: all its items. */',
+                `export type ${names.apiPageType} = ${names.apiItemType}[];`
+            ])
+    ];
+}
+/** The query parameters of a page of the API: its size and place, its search, its sort and its filters. */
+function pagesQuery(spec, names, filters, renamed) {
+    const api = spec.api;
+    const paging = api.paging;
+    const field = renamed ? 'apiFields[key] ?? key' : 'key';
+    const params = [
+        `      ${objectKey(paging.size)}: query.pageSize`,
+        paging.offset ? `      ${objectKey(paging.offset)}: (query.page - 1) * query.pageSize` : `      ${objectKey(paging.page)}: query.page`,
+        ...(api.search ? [`      ${objectKey(api.search)}: query.filter?.search`] : []),
+        ...(!api.sort
+            ? []
+            : api.sort.order
+                ? [
+                    `      ${objectKey(api.sort.field)}: key && (${field})`,
+                    `      ${objectKey(api.sort.order)}: key && (query.sort?.keys[key]?.direction ?? 'asc')`
+                ]
+                : [
+                    `      ${objectKey(api.sort.field)}: key && \`\${(query.sort?.keys[key]?.direction === 'desc') ? '-' : ''}\${${field}}\``
+                ]),
+        ...Object.entries(api.filters ?? {}).map(([key, parameter]) => `      ${objectKey(parameter)}: filters.${key}`)
+    ];
+    return [
+        '  /** The page, the search, the sort and the filters as the query parameters of the API; an empty value filters nothing. */',
+        `  mapServerQuery(query: BroQuery<${spec.rowType}>): ${names.apiQueryType} {`,
+        ...(api.sort ? [`    const [key] = (query.sort?.order ?? []) as (keyof ${spec.rowType})[];`] : []),
+        ...(filters ? [`    const filters = (query.filter ?? {}) as ${names.filtersType};`] : []),
+        '    const params: Record<string, string | number | boolean | null | undefined> = {',
+        params.join(',\n'),
+        '    };',
+        '',
+        `    return Object.fromEntries(Object.entries(params).filter(([, value]) => (value ?? '') !== '' && value !== false)) as ${names.apiQueryType};`,
+        '  }'
+    ];
+}
+/** The fields of a row whose values come from other names of the API: the API sorts by its own names. */
+export function renamedSources(spec) {
+    return spec.api?.sort ? spec.fields.filter(field => field.source && field.source !== field.name).map(field => [field.name, field.source]) : [];
+}
+function addPath(tree, path, type) {
+    const [key, ...rest] = path.split('.');
+    if (!rest.length) {
+        tree.set(key, type);
+        return;
+    }
+    const child = tree.get(key);
+    const node = (child instanceof Map) ? child : new Map();
+    tree.set(key, node);
+    addPath(node, rest.join('.'), type);
+}
+function typeText(tree, indent) {
+    const inner = indent + '  ';
+    const fields = [...tree].map(([key, value]) => `${inner}${property(key)}: ${(value instanceof Map) ? typeText(value, inner) : value};`);
+    return `{\n${fields.join('\n')}\n${indent}}`;
+}
+/** A value at a path, as item.user.name or item['news-site']. */
+function access(object, path) {
+    return path ? `${object}${path.split('.').map(key => /^[A-Za-z_$][\w$]*$/.test(key) ? `.${key}` : `[${quote(key)}]`).join('')}` : object;
+}
+function property(key) {
+    return /^[A-Za-z_$][\w$]*$/.test(key) ? key : quote(key);
+}

package/dist/generate/setup.d.ts

@@ -0,0 +1,34 @@
+import type { BroSpecSkin, BroTableSpec } from '../spec/spec.js';
+export type BroTarget = 'angular' | 'vanilla';
+/** The functions of the optional elements of a skin: provideTableBroMatSkin() takes them, a vanilla skin calls them after its import. */
+export type BroSkinFeature = 'withTags' | 'withSwitch' | 'withToolbarMenu';
+/**
+ * The optional elements of the skin that a table of a spec uses: its ready elements tags and switch, and the menu of
+ * the toolbar, an element of its own only in the skin mat.
+ * @param spec - the spec of the table
+ * @param skin - the skin of the project
+ */
+export declare function skinFeatures(spec: BroTableSpec, skin: BroSpecSkin): BroSkinFeature[];
+/** A step of the setup of a project, as the docs of Bootstrap show such steps: a title, a line about it, its code. */
+export interface BroSetupStep {
+    title: string;
+    /** The line under the title: a name in backticks is code. */
+    text?: string;
+    /** The points of the step, a list before its code: a name in backticks is code. */
+    items?: string[];
+    code?: string;
+    language?: 'bash' | 'html' | 'json' | 'scss' | 'typescript';
+    /** The npm package of the paid module that the step sets up: the site shows such steps apart, after the code. */
+    module?: string;
+}
+/**
+ * The setup of a project, once for all its tables: the packages, the CSS and the registration of the skin with its
+ * optional elements. The generator gives it apart from the files of a table.
+ * @param target - an Angular project or Vanilla JS
+ * @param skin - the skin of the project
+ * @param extraPackages - the packages that the tables need besides the ones of the skin
+ * @param features - the optional elements of the skin that the tables use
+ */
+export declare function setupSteps(target: BroTarget, skin: BroSpecSkin, extraPackages?: string[], features?: BroSkinFeature[]): BroSetupStep[];
+/** The steps of a setup as Markdown, for an agent. */
+export declare function setupText(steps: BroSetupStep[]): string;

package/dist/generate/setup.js

@@ -0,0 +1,158 @@
+import { imports } from './code.js';
+/** The CSS of the core and of each skin, each in its package. */
+const css = {
+    core: 'node_modules/@table-bro/core/dist/table-bro.min.css',
+    mat: 'node_modules/@table-bro/angular-material/dist/table-bro.material.min.css',
+    bs: 'node_modules/@table-bro/bootstrap/dist/table-bro.bootstrap.min.css',
+    nv: 'node_modules/@table-bro/native/dist/table-bro.native.min.css'
+};
+/** What each package gives the project: the step that installs the packages names them before the command. */
+const packageRoles = {
+    '@table-bro/core': '`@table-bro/core`: the table engine itself, the Custom Element <table-bro> with its rows, pages, sort, search and row details, and the CSS of the core',
+    '@table-bro/angular': '`@table-bro/angular`: `<table-bro-ng>` for the templates of Angular, with signal inputs and outputs, and the contracts of a page and of its service',
+    '@table-bro/angular-material': '`@table-bro/angular-material`: the skin mat, pixel-perfect Material data tables on the components of Angular Material, in the theme of the application, with its Filter Drawer',
+    '@angular/elements': '`@angular/elements`: turns the Angular components of the cells into Custom Elements, which the table creates by their tags',
+    '@table-bro/bootstrap': '`@table-bro/bootstrap`: the skin bs, the table on the components and the classes of Bootstrap 5: its buttons, dropdowns and tooltips',
+    bootstrap: '`bootstrap`: Bootstrap itself, its CSS and the Dropdown and Tooltip that the skin uses',
+    '@types/bootstrap': '`@types/bootstrap`: the types of Bootstrap, which the import of Dropdown and Tooltip needs in a strict TypeScript project',
+    '@table-bro/native': '`@table-bro/native`: the skin nv, plain HTML elements, no UI library'
+};
+/** What each optional element is: the text of a setup names the functions with them. */
+const featureRoles = {
+    withTags: '`withTags()` for tags',
+    withSwitch: '`withSwitch()` for switches',
+    withToolbarMenu: '`withToolbarMenu()` for the menu of the toolbar'
+};
+/**
+ * The optional elements of the skin that a table of a spec uses: its ready elements tags and switch, and the menu of
+ * the toolbar, an element of its own only in the skin mat.
+ * @param spec - the spec of the table
+ * @param skin - the skin of the project
+ */
+export function skinFeatures(spec, skin) {
+    const elements = (spec.cols ?? []).map(col => (col.component && 'element' in col.component) ? col.component.element : undefined);
+    return [
+        ['withTags', elements.includes('tags')],
+        ['withSwitch', elements.includes('switch')],
+        ['withToolbarMenu', skin === 'mat' && Boolean(spec.toolbar?.menu)]
+    ].filter(([, used]) => used).map(([feature]) => feature);
+}
+/**
+ * The setup of a project, once for all its tables: the packages, the CSS and the registration of the skin with its
+ * optional elements. The generator gives it apart from the files of a table.
+ * @param target - an Angular project or Vanilla JS
+ * @param skin - the skin of the project
+ * @param extraPackages - the packages that the tables need besides the ones of the skin
+ * @param features - the optional elements of the skin that the tables use
+ */
+export function setupSteps(target, skin, extraPackages = [], features = []) {
+    const angular = (target === 'angular');
+    const calls = features.map(feature => `${feature}()`).join(', ');
+    // The elements that only some tables use: a project that registers the skin already adds the ones of a new table
+    const optional = `The elements that only some tables use come with their functions: ${['withTags', 'withSwitch', ...((skin === 'mat') ? ['withToolbarMenu'] : [])].map(feature => featureRoles[feature]).join(', ')}; a project that registers the skin already adds the ones of a new table${(skin === 'mat') ? ' to the call' : `. A page may define them itself, as \`customElements.define('bro-${skin}-tags', ${(skin === 'bs') ? 'BroBootstrapTagsComponent' : 'BroNativeTagsComponent'})\``}.`;
+    // Angular server-side rendering renders a vanilla skin only when the server bundle imports its package
+    const ssrImport = (pkg) => ` With Angular server-side rendering, \`app.config.ts\` imports the package as well, \`import '${pkg}';\`, so that the server renders the skin too: [Prerendering](https://table-bro.com/docs/ssr/prerendering).`;
+    // A vanilla skin registers itself on its import, and its optional elements come with calls after it
+    const vanillaCalls = features.map(feature => `${feature}();`);
+    const packages = ['@table-bro/core', ...(angular ? ['@table-bro/angular'] : []), ...{
+            mat: ['@table-bro/angular-material', '@angular/elements'],
+            bs: ['@table-bro/bootstrap', 'bootstrap', '@types/bootstrap'],
+            nv: ['@table-bro/native']
+        }[skin], ...extraPackages];
+    const styles = [...(skin === 'bs' ? ['node_modules/bootstrap/dist/css/bootstrap.min.css'] : []), css.core, css[skin]];
+    const steps = [
+        {
+            title: 'Install the packages',
+            text: (skin === 'mat') ? 'The table and the parts it needs; a project without Angular Material adds it first with `ng add @angular/material`.' : 'The table and the parts it needs:',
+            items: packages.map(name => packageRoles[name] ?? `\`${name}\``),
+            code: `npm install ${packages.join(' ')}`,
+            language: 'bash'
+        },
+        angular
+            ? {
+                title: 'Add the CSS',
+                text: 'To `"styles"` of `angular.json`:',
+                code: `"styles": [\n${styles.map(style => `  "${style}"`).join(',\n')}\n]`,
+                language: 'json'
+            }
+            : {
+                title: 'Link the CSS',
+                text: 'On the page:',
+                code: styles.map(style => `<link rel="stylesheet" href="${style}">`).join('\n'),
+                language: 'html'
+            }
+    ];
+    if (skin === 'mat') {
+        steps.push({
+            title: 'Register the skin and its elements',
+            text: `In the providers of \`app.config.ts\`. ${optional}`,
+            code: [
+                imports({
+                    '@angular/core': ['type ApplicationConfig'],
+                    '@table-bro/angular-material': ['provideTableBroMatSkin', ...features]
+                }),
+                '',
+                'export const appConfig: ApplicationConfig = {',
+                '  providers: [',
+                `    provideTableBroMatSkin(${calls})`,
+                '  ]',
+                '};'
+            ].join('\n'),
+            language: 'typescript'
+        }, {
+            title: 'Keep the theme of Angular Material',
+            text: 'The mat skin takes the theme of the application, as the components of Angular Material do: the table looks as a `mat-table` of the project, and a table in the dark theme takes the dark scheme of the theme. `ng add @angular/material` writes the theme into `styles.scss`; a project without it adds it:',
+            code: [
+                '@use \'@angular/material\' as mat;',
+                '',
+                'html {',
+                '  @include mat.theme((',
+                '    color: (',
+                '      primary: mat.$azure-palette,',
+                '      tertiary: mat.$blue-palette,',
+                '    ),',
+                '    typography: Roboto,',
+                '    density: 0,',
+                '  ));',
+                '}'
+            ].join('\n'),
+            language: 'scss'
+        }, {
+            title: 'Load the fonts of the icons',
+            text: 'The mat skin shows the ligature icons of Material, as Angular Material asks; the cells and the dialogs of the page take the newer Material Symbols. In `index.html`:',
+            code: '<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300,0,0" rel="stylesheet">',
+            language: 'html'
+        });
+    }
+    else if (skin === 'bs') {
+        steps.push({
+            title: 'Register the skin',
+            text: `Once, ${angular ? 'in `main.ts`' : 'before the tables'}: the import registers the skin, which takes the classes of Bootstrap. ${optional}${angular ? ssrImport('@table-bro/bootstrap') : ''}`,
+            code: [
+                imports({ bootstrap: ['Dropdown', 'Tooltip'], '@table-bro/bootstrap': ['useBootstrap', ...features] }),
+                '',
+                'useBootstrap({Dropdown, Tooltip});',
+                ...vanillaCalls
+            ].join('\n'),
+            language: 'typescript'
+        });
+    }
+    else {
+        steps.push({
+            title: 'Register the skin',
+            text: `Once, ${angular ? 'in `main.ts`' : 'before the tables'}: the import registers the skin. ${optional}${angular ? ssrImport('@table-bro/native') : ''}`,
+            code: features.length ? [imports({ '@table-bro/native': features }), '', ...vanillaCalls].join('\n') : 'import \'@table-bro/native\';',
+            language: 'typescript'
+        });
+    }
+    return steps;
+}
+/** The steps of a setup as Markdown, for an agent. */
+export function setupText(steps) {
+    return steps.map((step, index) => [
+        `**${index + 1}. ${step.title}**`,
+        ...(step.text ? [step.text] : []),
+        ...(step.items ? [step.items.map(item => `- ${item}`).join('\n')] : []),
+        ...(step.code ? [`\`\`\`${step.language ?? ''}\n${step.code}\n\`\`\``] : [])
+    ].join('\n\n')).join('\n\n');
+}

package/dist/generate/vanilla.d.ts

@@ -0,0 +1,10 @@
+import type { BroMcpExtension } from '../extension.js';
+import type { BroSpecSkin, BroTableSpec } from '../spec/spec.js';
+import { type BroTableFiles } from './angular.js';
+import type { BroSpecFillings } from './fillings.js';
+/**
+ * The table for a page without a framework, in the skins bs and nv: an ES module with a function that renders
+ * <table-bro> into a container, with its cells, its filter drawer and its CSS variables. The module imports the config
+ * of the skin from its package; the setup of the project registers the skin with the optional elements of the table.
+ */
+export declare function vanillaTable(spec: BroTableSpec, skin: BroSpecSkin, fillings: BroSpecFillings, tagSuffix?: string, extensions?: BroMcpExtension[]): BroTableFiles;