@table-bro/mcp 1.1.0 → 1.2.0

package/dist/docs/topics.js

@@ -118,7 +118,7 @@ ${JSON.stringify(builtinSpecs[0].spec, null, 2)}
 
 The columns of a page are \`BroCol<Row>[]\` of its row type: TypeScript checks \`name\` and \`sortKey\` against the fields of the row.
 
-A date or an amount of money is a string field that holds the text as the cell shows it, as \`"Sep 1, 2026"\` or \`"$15"\`, formatted for the language of the user by \`Intl.DateTimeFormat\` and \`Intl.NumberFormat\` with its currency, never the raw \`2026-09-01\` or \`15\`: the search of the toolbar looks in the string fields of the columns, so the user finds what he sees on the screen. For the order of the sort add a number field with the time or the amount (\`createdAt\`, \`total\`) and name it in \`sortKey\` of the column; the filters (\`range\`) read that number field too.
+A date or an amount of money is a string field that holds the text as the cell shows it, as \`"Sep 1, 2026"\` or \`"$15"\`, formatted by \`Intl.DateTimeFormat\` and \`Intl.NumberFormat\` with its currency in the language of the other texts of the page (\`'en-US'\` for a page in English, not the default language of the browser, which would mix two languages on one page), never the raw \`2026-09-01\` or \`15\`: the search of the toolbar looks in the string fields of the columns, so the user finds what he sees on the screen. For the order of the sort add a number field with the time or the amount (\`createdAt\`, \`total\`) and name it in \`sortKey\` of the column; the filters (\`range\`) read that number field too.
 
 The table measures the widths of the columns itself. A column may get narrower down to the width of its short title, by default the first word of the title; \`config.shortColumnTitle(col)\` gives other short titles. A column of a component is never narrower than its content.
 
@@ -130,7 +130,7 @@ Ready elements of the skins:
 | switch | \`bro-mat-slide-toggle\` | \`bro-switch\` | \`bro-switch\` | a boolean; \`bro-switch\` takes it from the attribute \`checked\`: \`attrs: {checked: (_col, row) => row.done}\`. With the attribute \`name\` and \`event: 'action'\` a change sends the action \`name\` with the column and the row |
 | details button | \`bro-details-button\` | the same | the same | \`attrs: {title: 'Details', name: events.detailsToggleEvent}, event: 'action'\` |
 
-The tags and the switch are optional elements of the skins, as the menu of the toolbar in the skin mat: the setup of the project gives \`withTags()\`, \`withSwitch()\` and \`withToolbarMenu()\` to \`provideTableBroMatSkin()\`, and calls \`withTags()\` and \`withSwitch()\` after the import of a vanilla skin.`
+The tags and the switch are optional elements of the skins, as the menu of the toolbar in the skin mat: the setup of the project gives \`withTags()\`, \`withSwitch()\` and \`withToolbarMenu()\` to \`provideTableBroMatSkin()\`, and calls \`withTags()\` and \`withSwitch()\` after the import of a vanilla skin. \`withTags({texts: {empty: 'No tags'}})\` gives the text of a cell of tags without items, No data by default (since 1.2.0); \`setTagsTexts({empty})\` of bs and nv and the signal \`empty\` of \`TableBroMatTagsTexts\` of mat change it at any time, and the tags on the page take it at once.`
     },
     {
         name: 'config',
@@ -150,7 +150,7 @@ The tags and the switch are optional elements of the skins, as the menu of the t
 | \`rowCounter\` | The column of the row numbers, on by default |
 | \`shadowsEnabled\` | The shadows of the table, on by default |
 | \`theme\` | \`auto\` by default, the theme of the system; \`light\` or \`dark\` for a page that keeps one theme |
-| \`texts\` | The words of the table in the language of the application, English by default: \`rowCounter\`, \`rowCounterName\` (its name for screen readers), \`search\`, \`searchField\`, \`back\`, \`clear\`, \`close\`, \`filters\`, \`pagination\`, the paginator of bs and nv, \`rangeLabel(page, pageSize, length)\`, \`noItems\`, \`loadingProgress\`, \`detailsLoading\` and \`states\` with the messages of the states. The paginator of mat takes \`MatPaginatorIntl\` |
+| \`texts\` | The words of the table in the language of the application, English by default (since 1.2.0): first the texts of the core, the parts that the core renders, flat and named as the options of the config: \`rowCounterTitle\`, the title of the column of the row numbers, \`rowCounterLabel\`, its name for screen readers, and \`rowDetailsLoadingMessage\`, what screen readers hear while row details load from the server; then the texts of the components of the skin, by groups in the order of the skin config: \`filterDrawer\` with \`title\` and \`close\`; \`paginator\` with the labels of the paginator of bs and nv in the order of \`MatPaginatorIntl\`, \`itemsPerPageLabel\`, \`nextPageLabel\`, \`previousPageLabel\`, \`firstPageLabel\`, \`lastPageLabel\` and \`getRangeLabel(page, pageSize, length)\`, then \`label\`, the name of the paginator, \`navigationLabel\`, the name of its navigation, and \`firstText\`, \`previousText\`, \`nextText\` and \`lastText\`, the words of its buttons; \`progressBar\` with \`label\`, the name of the progress bar of bs and nv; \`state\` with the messages of the states by their names; \`toolbarMain\` with \`search\` and the visually hidden words after the titles of the toolbar links of bs and nv: \`searchRole(title)\` by the title of the toolbar (Search for Orders, or Search for rows), \`buttonRole\` (Filters button, for search engines only: a screen reader hears the role button), \`menuRole\` (More menu) and \`menuItemRole\` of the items of the menu of bs (Print menu item); \`toolbarSearch\` with \`field\`, \`back\` and \`clear\`; as \`{paginator: {itemsPerPageLabel: 'Rows:'}, state: {'no-data': 'No orders'}}\`. The text of a cell of tags without items belongs to the tags of the skin: \`withTags({texts: {empty}})\`. The flat fields of 1.1.0, as \`itemsPerPage\`, still work and are deprecated; they are removed in 2.0. A field in a group and a text of the core win over their flat field. The paginator of mat takes \`MatPaginatorIntl\` |
 | \`rowDetailsComponent\` | The tag of the element of the row details: see the topic row-details |
 | \`rowDetailsServer\` | The row details load from the server |
 | \`rowDetailsMotion\` | \`'kinetic'\` by default: the row details move as the pages do; \`'eased'\` opens and closes them in \`--bro-details-duration\` |
@@ -197,7 +197,7 @@ The table does not ask for its first page: the page loads it itself, \`{page: 1,
 3. The page drops stale answers: it keeps the query of each load and cancels the old ones (\`switchMap\`, \`AbortController\` or a generation number).
 4. The filters of the table and the filters of the page are merged: each field has one owner, the page wins.
 5. A change of a filter of the page loads page 1 and replaces the rows.
-6. The rows are an array, \`[]\` an empty result; an empty result of a query with a search or filters is the state \`not-found\`, the input \`emptyState\` in Angular, \`replaceRows(rows, {total, emptyState: 'not-found'})\` in Vanilla JS, else the state \`no-data\` of an empty table shows. The state messages go into \`config.texts.states\`, the icons stay the ones of the skin. The loading and a failure are the inputs \`loading\` and \`failed\` in Angular, \`table.setState('loading')\` and \`table.setState('fail')\` in Vanilla JS.
+6. The rows are an array, \`[]\` an empty result; an empty result of a query with a search or filters is the state \`not-found\`, the input \`emptyState\` in Angular, \`replaceRows(rows, {total, emptyState: 'not-found'})\` in Vanilla JS, else the state \`no-data\` of an empty table shows. The state messages go into \`config.texts.state\`, the icons stay the ones of the skin. The loading and a failure are the inputs \`loading\` and \`failed\` in Angular, \`table.setState('loading')\` and \`table.setState('fail')\` in Vanilla JS.
 
 In Angular the contracts of \`@table-bro/angular\` hold the parts apart:
 - the page implements \`BroServerContainer<Row>\`: the signals \`cols\`, \`rows\`, \`conf\`, \`total\` and \`rowsToAppend\`, \`initTable()\` that starts the table and asks for page 1, and \`onQueryTable(query)\` that asks the service for a page and delivers it: the first page of a query to \`rows\`, the next pages to \`rowsToAppend\`, an answer to an older query left out;
@@ -229,6 +229,8 @@ The filters of the application live outside of the table, in the Filter Drawer n
 | mat | \`<table-bro-filter-drawer-container-ng>\` of table-bro.angular-material: it takes the inputs and outputs of \`<table-bro-ng>\` and renders the table | its content |
 | bs, nv | \`<table-bro-filter-drawer-container skin="bs">\` of the core, defined by \`defineTableBroFilterDrawerContainer()\` | an element with \`slot="filters"\` next to the table |
 
+The title of the drawer and the name of its close button come from \`texts.filterDrawer\` (\`title\`, \`close\`) of the config of the table in every skin (since 1.2.0); the container of bs and nv reads them when it connects and when it opens, so a new \`configure()\` of the table shows at the next opening. The property \`texts\` of \`<table-bro-filter-drawer-container>\` of 1.1.0 still works and wins over the config of the table; it is deprecated and removed in 2.0.
+
 - The page gives the filters to the table: the input \`filter\` of the wrapper, or the action \`bro-filters-filter\` in Vanilla JS. The table accumulates the changes, so a cleared field goes as \`undefined\`.
 - Local mode: the table searches by itself; the other filters go through \`config.filtersTransform(rows, filters)\`. The table calls it only when some filter has a value: undefined, null and '' clear a filter, false and 0 are values. \`matchesFilterCondition(value, {eq, in, contains, startsWith, gte, lte})\` of @table-bro/core compares one value; an undefined condition matches.
 - Server mode: the filters come in \`query.filter\`, and the server applies them.
@@ -259,7 +261,7 @@ Rules:
 8. Vanilla JS puts values in with \`textContent\`.
 9. Inputs and outputs with \`@Input()\` and \`@Output()\`, not \`input()\` and \`output()\`; a component imports the classes of Angular Material (\`MatIcon\`), not their NgModules.
 10. The components of a library keep their own look: no colors, sizes, fonts or tokens (\`--mat-*\`, \`--mdc-*\`, \`--bs-*\`) of their own unless the user asks for them; the styles of a cell only place them. A custom element that needs a color, as an avatar, reads a color role of the theme: \`var(--mat-sys-*)\` for mat, \`var(--bs-*)\` for bs, the system colors (\`Canvas\`, \`CanvasText\`, \`GrayText\`, \`AccentColor\`) for nv. No literal colors.
-11. Angular Material by the selectors of version 20: \`matButton="text|filled|tonal|outlined|elevated"\`, \`matIconButton\`, \`matMiniFab\`, \`matFab\`; not \`mat-button\`, \`mat-icon-button\` and the other old ones. A tooltip shows above its element: \`matTooltipPosition="above"\`. An icon of a cell or of a dialog is a Material Symbol, the current set of Material icons, Rounded and light (weight 300), with the glyphs of Material 3, as \`badge\`, \`alternate_email\`, \`business_center\`, \`travel_explore\`, \`check_circle\`: \`<mat-icon fontSet="material-symbols-rounded">edit</mat-icon>\`. An icon of a cell or of a dialog of bs is the inline SVG of Bootstrap Icons, the set of Bootstrap 5.3, first: its \`<svg>\` as the site of Bootstrap Icons gives it, of 16 by 16 px, with \`fill="currentColor"\` and \`aria-hidden="true"\`, the counterpart of the Material Symbol of mat, as \`person-vcard\`, \`at\`, \`briefcase\`, \`globe-americas\`, \`check-circle\`. The SVG needs no package and no font; a project that already loads the font of Bootstrap Icons may keep \`<i class="bi bi-at"></i>\`.
+11. Angular Material by the selectors of version 20: \`matButton="text|filled|tonal|outlined|elevated"\`, \`matIconButton\`, \`matMiniFab\`, \`matFab\`; not \`mat-button\`, \`mat-icon-button\` and the other old ones. A tooltip shows above its element: \`matTooltipPosition="above"\`. An icon of a cell or of a dialog is a Material Symbol, the current set of Material icons, Rounded and light (weight 300), with the glyphs of Material 3, as \`badge\`, \`alternate_email\`, \`business_center\`, \`travel_explore\`, \`check_circle\`: \`<mat-icon fontSet="material-symbols-rounded">edit</mat-icon>\`. An icon of a cell or of a dialog of bs is the inline SVG of Bootstrap Icons, the set of Bootstrap 5.3, first: its \`<svg>\` as the site of Bootstrap Icons gives it, of 16 by 16 px, with \`fill="currentColor"\` and \`aria-hidden="true"\`, the counterpart of the Material Symbol of mat, as \`person-vcard\`, \`at\`, \`briefcase\`, \`globe-americas\`, \`check-circle\`. Its paths are never written from memory: an icon of these docs, as the states of the table and the buttons of the skin, takes the SVG they give, and any other icon takes the file \`node_modules/bootstrap-icons/icons/<name>.svg\` of the package \`bootstrap-icons\` or the SVG of https://icons.getbootstrap.com; the page needs no font of Bootstrap Icons and no \`<i class="bi">\`.
 12. The actions of a row stay in the row, not in a menu, and look as the Details button of the skin, in its color: mat, \`matIconButton\` with a \`mat-icon\` and a tooltip in the primary color, a delete too, \`:host { --mat-icon-button-icon-color: var(--mat-sys-primary); }\`; bs, buttons with the classes \`btn btn-link\` and no size, as \`btn-sm\`; nv, links as buttons in the color of links, \`<a href="" role="button" (click)="$event.preventDefault(); action.emit('edit')">Edit</a>\` with \`a { color: LinkText; }\`.
 13. The row details start where the cells of the row do: the paddings of the row are on their content, \`dl { padding: 16px 24px; }\` for mat and \`padding: 12px 16px\` for bs and nv. Their host is \`:host { display: block; }\` without paddings or borders: the table opens the details by the height of the host. Values show as pairs of a label and a value in columns, a \`<dl>\` in a grid; a list of items as the chips of Angular Material, the badges of Bootstrap, or one line; no bulleted list. A label takes the secondary color role: \`var(--mat-sys-on-surface-variant)\`, \`var(--bs-secondary-color)\`, \`GrayText\`.
 14. A progress bar fills the width of its cell, whatever the width of the column: \`mat-progress-bar\` and the \`.progress\` of Bootstrap do it themselves, a native \`<progress>\` or \`<meter>\` takes \`progress { width: 100%; }\`.
@@ -288,6 +290,7 @@ ${cellCode(spec, cell, 'vanilla', builtinSpecs[0].fillings.cells?.['actions']?.b
 - A button, \`BroButton\`: \`{buttonTitle, eventType, iconHTML, buttonTooltip}\`. A click sends the action \`eventType\`. In the mat skin a button is an icon with a tooltip: \`iconHTML\` is the name of a Material icon.
 - The Filters button: \`eventType: events.filtersToggleEvent\`, in the mat skin with \`iconHTML: 'filter_list'\`.
 - A menu, \`BroDropdown\`: \`{buttonTitle, mode: 'navbar-dropdown', options: [{value, title, iconHTML}]}\`; an item sends its \`value\`.
+- The titles of the buttons, the menu and its items say what they do, as \`More actions\` or \`Export orders\`, not \`More\` or \`Read more\`: the skin bs renders them as links, and nv its buttons, which screen readers and search engines read by their text. A link that acts on the table, the search, a button or the menu, has the role \`button\`, as Bootstrap gives it to a link that goes nowhere, and takes Space; the items of the menu of bs stay links, as in the markup of Bootstrap. The skin adds visually hidden words after the title that say what the link is: \`texts.toolbarMain.searchRole(title)\` of the search by \`toolbarTitle\` (Search for Orders, or Search for rows without a title), \`texts.toolbarMain.buttonRole\` (\`button\`, which only the text of the link keeps: a screen reader hears its role), \`texts.toolbarMain.menuRole\` of the menu (\`menu\`) and \`texts.toolbarMain.menuItemRole\` of its items (\`menu item\`); an empty string turns them off.
 
 The search is not among these buttons: the toolbar of every table has its search button first, in every skin, and there is nothing to turn on. A click opens the field of the search. In the local mode the table searches the string fields of its columns, so a date or an amount that the cell shows as a string is found by the text the user sees (get_docs, topic columns). With \`config.server: true\` the text goes to the server as \`filter.search\` of the query. \`components.toolbarSearch.beforeRender\` of the config of the skin changes the opened field.`
     },
@@ -369,6 +372,17 @@ Other sizes, fonts and colors of a skin need changes of its SCSS and a new build
 | \`action\` | Every other action of \`bro-action\`: \`BroActionDetail<Row>\`, with \`data?.row\` for custom cells |
 
 The wrapper creates the table outside of the Angular zone; its outputs emit inside it.`
+    },
+    {
+        name: 'ssr',
+        title: 'Server-side rendering, the prerender',
+        summary: 'The prerender of the loading state on a server: <table-bro-ng> in Angular SSR, prerenderTableBro() without Angular, and its limits',
+        text: () => `
+- The prerender renders a table in its loading state on a server: the toolbar, the column headers, the loading row and the paginator, in the markup of the skin, sized by its CSS. The page shows the table before any script runs; in the browser the table renders with its rows in the same element, and the loading animation goes on.
+- Angular: \`<table-bro-ng>\` prerenders during the server-side rendering of Angular itself, in the skins mat, bs and nv; the template and the inputs stay as in the browser. The application needs the server render of Angular: \`@angular/ssr\` with \`provideServerRendering()\` in the config of the server, and \`provideClientHydration()\`. The skin mat renders on the server by \`provideTableBroMatSkin()\`. The skins bs and nv render there when a file of the server bundle imports \`@table-bro/bootstrap\` or \`@table-bro/native\`, as \`app.config.ts\` or the component of the table; a skin that only \`main.ts\` imports leaves \`<table-bro-ng>\` empty on the server.
+- Without Angular: \`prerenderTableBro(element, {cols, conf})\` of \`@table-bro/core\` renders into a \`<table-bro>\` of a server DOM, appended to its document before the call. The rows wait for the browser, where \`configure({cols, rows, conf})\` on the same element renders the table in its place. The imports of the core and of the skins bs and nv work without a DOM: they register the skins and define no elements.
+- Limits: the loading state only. With the theme \`auto\` the prerendered table takes no theme class and shows the theme of the page, since the server knows no system theme. The elements of a skin render on the server only where the skin has \`BroSkinConfig.defineElements(registry)\` (bs, nv) and the window of the server DOM has \`customElements\`; else they stay empty tags until the browser renders the table. Angular inlines the critical CSS of a prerendered page with Beasties, and the CSS of the core and of the skins keeps the layout of a prerendered table there.
+- The page of Docs with the code: get_docs topic \`ssr/prerendering\`.`
     },
     // The pages of Docs on table-bro.com, from the same source as the site
     ...docPages.map(page => ({ name: page.path, title: page.name, summary: `The page of Docs ${page.name}, with its code`, text: () => docPageMarkdown(page) }))

package/dist/generate/config.js

@@ -42,11 +42,11 @@ export function configCode(spec, skin, fillings, indent, tagSuffix = '', extensi
         result.imports['@table-bro/core'].push('events');
     }
     merge(components, { toolbarMain: { buttons: toolbarButtons(spec, skin, hasFilters) } });
-    // The messages of the states go into 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
+    // 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'] = { states: Object.fromEntries(states) };
+        value['texts'] = { state: Object.fromEntries(states) };
     }
     for (const callback of spec.skinConfig?.[skin]?.callbacks ?? []) {
         const known = skinCallbacks.find(item => item.path === callback.path);

package/dist/generate/setup.js

@@ -50,6 +50,8 @@ export function setupSteps(target, skin, extraPackages = [], features = []) {
     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'] : []), ...{
@@ -125,7 +127,7 @@ export function setupSteps(target, skin, extraPackages = [], features = []) {
     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}`,
+            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] }),
                 '',
@@ -138,7 +140,7 @@ export function setupSteps(target, skin, extraPackages = [], features = []) {
     else {
         steps.push({
             title: 'Register the skin',
-            text: `Once, ${angular ? 'in `main.ts`' : 'before the tables'}: the import registers the skin. ${optional}`,
+            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'
         });

package/dist/spec/skin-config.js

@@ -56,7 +56,7 @@ export const skinCallbacks = [
     { path: 'components.sortHeader.beforeRender', signature: '(element: Element, value: string) => void', skins: ['mat', 'bs', 'nv'], description: 'before the header of a column renders' },
     { path: 'components.sortHeader.afterRender', signature: '(element: Element, value: string) => void | (() => void)', skins: ['bs', 'nv'], description: 'after the header of a column renders, for example to add a tooltip; a returned function cleans up' },
     { path: 'components.textEllipsis.afterRender', signature: '(element: Element, value: string) => void | (() => void)', skins: ['bs', 'nv'], description: 'after a cut value renders, for example to add a tooltip; a returned function cleans up' },
-    { path: 'components.toolbarMain.beforeRender', signature: '(searchButton: Element, value: string) => void', skins: ['bs', 'nv'], description: 'before the search button of the toolbar renders; value is its word, texts.search' },
+    { path: 'components.toolbarMain.beforeRender', signature: '(searchButton: Element, value: string) => void', skins: ['bs', 'nv'], description: 'before the search button of the toolbar renders; value is its word, texts.toolbarMain.search' },
     { path: 'components.toolbarSearch.beforeRender', signature: '(backButton: Element, clearButton: Element) => void', skins: ['mat', 'bs', 'nv'], description: 'before the buttons of the search line render' },
     { path: 'components.fontIcon.html', signature: '(iconName: string) => string', skins: ['mat', 'bs', 'nv'], description: 'the markup of a state icon with components.state.fontIcon' },
     { path: 'components.state.lottieHTML', signature: '(iconSrc: string) => string', skins: ['mat', 'bs', 'nv'], description: 'the markup of a state icon with components.state.lottie' }

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 /** The version of Table, Bro that this package describes: one version for all packages of Table, Bro. */
-export declare const tableBroVersion = "1.1.0";
+export declare const tableBroVersion = "1.2.0";

package/dist/version.js

@@ -1,2 +1,2 @@
 /** The version of Table, Bro that this package describes: one version for all packages of Table, Bro. */
-export const tableBroVersion = '1.1.0';
+export const tableBroVersion = '1.2.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@table-bro/mcp",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Pixel-perfect Material data tables for Angular, and more. A Web Components table engine on top of existing UI components.",
   "keywords": [
     "mcp",
@@ -9,8 +9,22 @@
     "table",
     "data-table",
     "angular",
-    "web-components"
+    "web-components",
+    "ai-coding-agents",
+    "vibe-coding",
+    "claude-code",
+    "cursor",
+    "codex",
+    "github-copilot",
+    "windsurf",
+    "gemini-cli",
+    "grok",
+    "cline",
+    "zed",
+    "jetbrains-ai",
+    "angular-material-table"
   ],
+  "mcpName": "io.github.table-bro/table-bro",
   "author": "table-bro",
   "homepage": "https://table-bro.com",
   "repository": {