bestax-mcp 1.18.24 → 1.18.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/catalog.json +1 -1
- package/data/components/Delete.json +1 -1
- package/data/components/Table.json +2 -2
- package/data/skills/bestax-migrate/references/rbx/component-map.md +23 -16
- package/data/skills/bestax-migrate/references/rbx/unmappables.md +23 -3
- package/data/skills/bestax-optimize/references/modular-build.md +37 -5
- package/data/skills/bestax-theming/references/css-variables.md +3 -1
- package/data/skills.json +4 -4
- package/package.json +2 -2
package/data/catalog.json
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"code": "<Message color=\"success\" title=\"Success Message\">\n This is a success message with a delete button in the header.\n</Message>"
|
|
32
32
|
}
|
|
33
33
|
],
|
|
34
|
-
"accessibility": "- **ARIA label:** Always set a meaningful `ariaLabel` for screen readers (default is `'Close'`).\n- **Keyboard:** The button is focusable and supports keyboard activation.\n- **Forms:** It renders `type=\"button\"`, so a delete button inside a form doesn't submit it.\n- **Disabled:** Uses both `disabled` and Bulma’s `is-disabled` for proper styling and accessibility.\n\n:::tip\nFor custom close actions, use the `onClick` prop.\n:::",
|
|
34
|
+
"accessibility": "- **ARIA label:** Always set a meaningful `ariaLabel` for screen readers (default is `'Close'`).\n- **Keyboard:** The button is focusable and supports keyboard activation.\n- **Forms:** It renders `type=\"button\"`, so a delete button inside a form doesn't submit it.\n- **Disabled:** Uses both `disabled` and Bulma’s `is-disabled` for proper styling and accessibility.\n- **Forced colors:** Bulma draws the circle and the cross as background colors, which forced colors (Windows' contrast themes) replaces, so the button would vanish there while it still works and takes focus. bestax's styles keep it drawn in the system's button colors, with its focus ring in the system's highlight color, and a disabled one, or one inside a disabled `<fieldset>`, in the system's color for disabled controls. Every close button bestax renders is a `Delete`, apart from the [Modal](https://bestax.io/docs/api/components/modal)'s floating close and a [Tag](https://bestax.io/docs/api/elements/tag) with `isDelete`, and those are drawn the same way.\n\n:::tip\nFor custom close actions, use the `onClick` prop.\n:::",
|
|
35
35
|
"related": ["Message", "Notification", "Tag", "useBulmaClasses"],
|
|
36
36
|
"storybook": "https://bestax.io/storybook/?path=/story/elements-delete--default",
|
|
37
37
|
"summary": "The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more. It renders `type=\"button\"`, so a delete button inside a form does not submit it.",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"code": "<Table isStriped>\n <Table.Thead>\n <Table.Tr>\n <Table.Th>Team</Table.Th>\n <Table.Th>Points</Table.Th>\n </Table.Tr>\n </Table.Thead>\n <Table.Tbody>\n <Table.Tr>\n <Table.Td>Maple Leafs</Table.Td>\n <Table.Td>98</Table.Td>\n </Table.Tr>\n </Table.Tbody>\n</Table>"
|
|
39
39
|
}
|
|
40
40
|
],
|
|
41
|
-
"accessibility": "- **Semantics:** Uses `<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, and `<td>`—all proper HTML table elements.\n- **Responsive:** When using `isResponsive`, the table is wrapped in a scrollable container.\n- **Screen Readers:** Always use `<Th>` for header cells, and provide descriptive column headings.\n\n:::tip\nFor responsive tables, ensure your column headers are clear and concise for small screens.\n:::",
|
|
41
|
+
"accessibility": "- **Semantics:** Uses `<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, and `<td>`—all proper HTML table elements.\n- **Responsive:** When using `isResponsive`, the table is wrapped in a scrollable container.\n- **Screen Readers:** Always use `<Th>` for header cells, and provide descriptive column headings.\n- **Right to left:** with `bestax.css` and its variants, a header cell aligns to the start of the line, as the body cells do, so on a right-to-left page both sit on the right. They build Bulma with `$table-cell-text-align: start`, where Bulma's own default, in the table below, is `left`. With `extras.css` and a Bulma of your own, set `$table-cell-text-align: start` in your Bulma build, or `--bulma-table-cell-text-align: start` on the table, to get the same. `isAligned` or an `align` attribute still sets a cell's own alignment.\n\n:::tip\nFor responsive tables, ensure your column headers are clear and concise for small screens.\n:::",
|
|
42
42
|
"related": ["Block", "useBulmaClasses"],
|
|
43
43
|
"storybook": "https://bestax.io/storybook/?path=/story/elements-table--default",
|
|
44
44
|
"summary": "The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React.",
|
|
@@ -292,7 +292,7 @@
|
|
|
292
292
|
"name": "isAligned",
|
|
293
293
|
"type": "'left' | 'right' | 'centered'",
|
|
294
294
|
"default": null,
|
|
295
|
-
"description": "Text alignment for the header cell ('left', 'right', 'centered').",
|
|
295
|
+
"description": "Text alignment for the header cell ('left', 'right', 'centered'). Without it, `bestax.css` and its variants align a header to the start of the line, as the body cells are, so it sits on the right on a right-to-left page.",
|
|
296
296
|
"required": false,
|
|
297
297
|
"inherited": false,
|
|
298
298
|
"deprecated": false
|
|
@@ -45,7 +45,7 @@ test holds to rbx's own export surface in both directions.
|
|
|
45
45
|
| `Field` | `Field` | mapped |
|
|
46
46
|
| `Field.Label` | `Field.Label` | mapped |
|
|
47
47
|
| `Field.Body` | `Field.Body` | mapped |
|
|
48
|
-
| `Fieldset` |
|
|
48
|
+
| `Fieldset` | `Fieldset` | mapped |
|
|
49
49
|
| `File` | `File` | mapped |
|
|
50
50
|
| `File.CTA` | — _(see unmappables)_ | todo |
|
|
51
51
|
| `File.Icon` | — _(see unmappables)_ | todo |
|
|
@@ -142,21 +142,28 @@ test holds to rbx's own export surface in both directions.
|
|
|
142
142
|
|
|
143
143
|
## The renames worth memorising
|
|
144
144
|
|
|
145
|
-
| rbx | bestax-bulma
|
|
146
|
-
| ---------------------------------- |
|
|
147
|
-
| `Tag.Group` | `Tags`
|
|
148
|
-
| `Button.Group` | `Buttons`
|
|
149
|
-
| `Column.Group` | `Columns`
|
|
150
|
-
| `Card.Footer.Item` | `Card.FooterItem`
|
|
151
|
-
| `Table.Head` / `.Body` / `.Foot` | `Table.Thead` / `.Tbody` / `.Tfoot`
|
|
152
|
-
| `Table.Row` / `.Cell` / `.Heading` | `Table.Tr` / `.Td` / `.Th`
|
|
153
|
-
| `Textarea` | `TextArea`
|
|
154
|
-
| `
|
|
155
|
-
| `
|
|
156
|
-
| `
|
|
157
|
-
| `
|
|
158
|
-
| `
|
|
159
|
-
| `
|
|
145
|
+
| rbx | bestax-bulma |
|
|
146
|
+
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
147
|
+
| `Tag.Group` | `Tags` |
|
|
148
|
+
| `Button.Group` | `Buttons` |
|
|
149
|
+
| `Column.Group` | `Columns` |
|
|
150
|
+
| `Card.Footer.Item` | `Card.FooterItem` |
|
|
151
|
+
| `Table.Head` / `.Body` / `.Foot` | `Table.Thead` / `.Tbody` / `.Tfoot` |
|
|
152
|
+
| `Table.Row` / `.Cell` / `.Heading` | `Table.Tr` / `.Td` / `.Th` |
|
|
153
|
+
| `Textarea` | `TextArea` |
|
|
154
|
+
| `Fieldset` | `Fieldset` with `variant="unstyled"`, the bestax look that draws no box, as rbx's bare `<fieldset>` drew none. Like any bestax `Fieldset` it keeps a block's spacing under it unless it's the last child, which `mb="0"` takes away |
|
|
155
|
+
| `PageLoader` | `Loading` with `isFullPage` |
|
|
156
|
+
| `Loader` | a plain `<div className="loader">` — bestax's `Loading` is an overlay that renders nothing unless `active`; bestax's `Loader` renders the same ring as a named progressbar, so swap it in by hand |
|
|
157
|
+
| `Menu.List.Item` | `Menu.Item` |
|
|
158
|
+
| `Tab` / `Tab.Group` | `Tabs.Item` / `Tabs` |
|
|
159
|
+
| `Panel.Tab.Group` | `Panel.Tabs` |
|
|
160
|
+
| `Title subtitle` | `SubTitle` |
|
|
161
|
+
|
|
162
|
+
Inside a `Field` or a `Control` in the same component, `Fieldset` stays the plain `<fieldset>` rbx
|
|
163
|
+
rendered instead. bestax's `Fieldset` starts a Field scope of its own, so an input placed straight
|
|
164
|
+
in it there would render its own `.field` and `.control`. A `Field` in another component that
|
|
165
|
+
renders this one is out of the codemod's sight, so where an input sits straight in a `Fieldset` it
|
|
166
|
+
converts, it leaves a `component:Fieldset` TODO (see [unmappables.md](unmappables.md)).
|
|
160
167
|
|
|
161
168
|
## Value-chosen targets
|
|
162
169
|
|
|
@@ -182,10 +182,30 @@ Nothing flags this — the markup is valid either way — so audit your navbars
|
|
|
182
182
|
Bulma v1 does not ship it. Use `<UnorderedList>`/`<UnorderedList.Item>` for a plain list, or
|
|
183
183
|
`<Menu>`/`<Menu.Item>` when the items are navigation.
|
|
184
184
|
|
|
185
|
-
## `component:Fieldset
|
|
185
|
+
## `component:Fieldset` — an input placed straight in it
|
|
186
186
|
|
|
187
|
-
|
|
188
|
-
|
|
187
|
+
bestax's `Fieldset` starts its own Field scope, and rbx's bare `<fieldset>` never did. So an input
|
|
188
|
+
placed straight in it, such as an `Input`, renders as it does outside any `Field`, with a `.field`
|
|
189
|
+
of its own where it has one. Where the `Fieldset` sits inside a `Field` or a `Control` in the same
|
|
190
|
+
component, the codemod keeps the plain `<fieldset>` rbx rendered. It can't see one in another
|
|
191
|
+
component, so it converts the `Fieldset` and leaves this TODO where an input sits straight in it.
|
|
192
|
+
|
|
193
|
+
If nothing renders the `Fieldset` inside a `Field` or a `Control`, delete the comment. If something
|
|
194
|
+
does, render a plain `<fieldset>` instead, which leaves their scope alone:
|
|
195
|
+
|
|
196
|
+
```jsx
|
|
197
|
+
<Fieldset disabled variant="unstyled">
|
|
198
|
+
<Input />
|
|
199
|
+
</Fieldset>
|
|
200
|
+
<fieldset disabled>
|
|
201
|
+
<Input />
|
|
202
|
+
</fieldset>
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## `component:Numeric`, `component:Highlight`
|
|
206
|
+
|
|
207
|
+
No bestax equivalents, and none needed: use `Intl.NumberFormat` directly, and use `<Pre>` with your
|
|
208
|
+
own highlighter.
|
|
189
209
|
|
|
190
210
|
## `responsive` — `touch` and `{ only: true }`
|
|
191
211
|
|
|
@@ -88,9 +88,10 @@ is **more complete** than the docs page's Option C example, which omits several)
|
|
|
88
88
|
**Form** (`@allxsmith/bestax-bulma/scss/form/<name>`):
|
|
89
89
|
`checkbox`, `checkboxcard`, `radio`, `radiocard`, `switch`, `slider`, `numberinput`, `pininput`,
|
|
90
90
|
`rate`, `autocomplete`, `combobox`, `taginput`, `picker-popover`, `dateinput`, `timeinput`,
|
|
91
|
-
`datetimeinput`, `daterangeinput`, `file`, `fieldset`, `dropzone`, `colorpicker`,
|
|
91
|
+
`datetimeinput`, `daterangeinput`, `file`, `fieldset`, `field`, `dropzone`, `colorpicker`,
|
|
92
|
+
`colorinput`
|
|
92
93
|
|
|
93
|
-
**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `colorswatch`,
|
|
94
|
+
**Elements** (`@allxsmith/bestax-bulma/scss/elements/<name>`): `colorswatch`, `delete`,
|
|
94
95
|
`descriptionlist`, `kbd`, `linkbutton`, `loader`, `notification`, `progress`, `ringprogress`,
|
|
95
96
|
`skeleton`
|
|
96
97
|
|
|
@@ -139,10 +140,20 @@ Notes:
|
|
|
139
140
|
@use '@allxsmith/bestax-bulma/scss/form/file' as bestax-file;
|
|
140
141
|
```
|
|
141
142
|
|
|
143
|
+
- The `field` partial **extends** stock Bulma's field (`bulma/sass/form/tools`): it puts the
|
|
144
|
+
`message` of a horizontal form component (`Input horizontal`, `Checkboxes horizontal`,
|
|
145
|
+
`Rate horizontal` and the rest) under its control, where Bulma's row would set it beside. An
|
|
146
|
+
app with one needs it next to `bulma/sass/form/tools`, in either order:
|
|
147
|
+
|
|
148
|
+
```scss
|
|
149
|
+
@use 'bulma/sass/form/tools';
|
|
150
|
+
@use '@allxsmith/bestax-bulma/scss/form/field';
|
|
151
|
+
```
|
|
152
|
+
|
|
142
153
|
- `Dropzone`'s zone is Bulma's file widget, so an app using it needs `bulma/sass/form/file` and the
|
|
143
154
|
`file` partial (its keyboard focus ring) next to `scss/form/dropzone`, plus
|
|
144
|
-
`bulma/sass/elements/delete` for the remove buttons and
|
|
145
|
-
lines.
|
|
155
|
+
`bulma/sass/elements/delete` and the `delete` partial for the remove buttons and
|
|
156
|
+
`bulma/sass/form/tools` for its help lines.
|
|
146
157
|
- `DateInput`/`TimeInput`/`DateTimeInput` also need `picker-popover`.
|
|
147
158
|
- `DateRangeInput` needs `daterangeinput` for its field and `dateinput` for its calendar, and
|
|
148
159
|
`picker-popover` too.
|
|
@@ -178,6 +189,25 @@ Notes:
|
|
|
178
189
|
so its text clears the button, so include it (`as bestax-notification`) next to the Bulma
|
|
179
190
|
module in any build that shows a dismissible notification. It doesn't depend on the order of
|
|
180
191
|
the two `@use` lines either.
|
|
192
|
+
- `Delete` is stock Bulma too (`bulma/sass/elements/delete`), and it's the close button of
|
|
193
|
+
`Notification`, `Message`, `Toast`, a `Modal` card and the tags of `Taginput`, `Combobox` and
|
|
194
|
+
`Dropzone`. Bulma draws its circle and cross as background colors, which forced colors
|
|
195
|
+
(Windows' contrast themes) replaces, so they vanish there. The `delete` extras partial keeps
|
|
196
|
+
them drawn in the system's button colors, and the `Modal`'s floating close
|
|
197
|
+
(`bulma/sass/components/modal`) and `Tag isDelete` (`bulma/sass/elements/tag`) with them, so
|
|
198
|
+
include it (`as bestax-delete`) in any build that shows a close button. Its rules win over
|
|
199
|
+
Bulma's either way, so the order of the `@use` lines does not matter.
|
|
200
|
+
- `Table` is stock Bulma (`bulma/sass/elements/table`), and `DataTable` renders one. The prebuilt
|
|
201
|
+
stylesheets build it with `$table-cell-text-align: start`, so header cells line up with the
|
|
202
|
+
body cells under them on a right-to-left page, where Bulma's default, `left`, keeps them on the
|
|
203
|
+
left. A build with a table gets the same by configuring the module where it loads it:
|
|
204
|
+
|
|
205
|
+
```scss
|
|
206
|
+
@use 'bulma/sass/elements/table' with (
|
|
207
|
+
$table-cell-text-align: start
|
|
208
|
+
);
|
|
209
|
+
```
|
|
210
|
+
|
|
181
211
|
- Stock-Bulma form controls still need their Bulma module (`bulma/sass/form/…`); the extras
|
|
182
212
|
form partials above style only the bestax-specific behavior.
|
|
183
213
|
- Bulma component modules pull their own internal sub-elements — e.g.
|
|
@@ -227,7 +257,8 @@ not `flexbox` — `flexbox` holds only the alignment props. Verified failure mod
|
|
|
227
257
|
|
|
228
258
|
The `npm create bestax` starter renders `Container`, `Section`, `Columns`/`Column`, `Image`,
|
|
229
259
|
`Title`/`SubTitle`, `Box`, `Card`, `Buttons`/`Button`, and `Notification` with its close
|
|
230
|
-
button: all stock Bulma, plus the `notification` extras
|
|
260
|
+
button: all stock Bulma, plus the `notification` and `delete` extras partials for that close
|
|
261
|
+
button. Its
|
|
231
262
|
helper props are `display` (visibility), `flexGrow` (flexbox), and `textAlign` (typography);
|
|
232
263
|
it uses no spacing or color props. That inventory compiles to the following, verified
|
|
233
264
|
pixel-equivalent to the prebuilt `complete` flavor in headless Chromium (light and dark, phone
|
|
@@ -259,6 +290,7 @@ Scaffolded with an icon library, the starter also needs `bulma/sass/elements/ico
|
|
|
259
290
|
@use 'bulma/sass/helpers/flexbox'; // flexGrow
|
|
260
291
|
@use 'bulma/sass/helpers/typography'; // textAlign
|
|
261
292
|
|
|
293
|
+
@use '@allxsmith/bestax-bulma/scss/elements/delete' as bestax-delete; // the close button in forced colors
|
|
262
294
|
@use '@allxsmith/bestax-bulma/scss/elements/notification' as bestax-notification; // text clears the close button
|
|
263
295
|
```
|
|
264
296
|
|
|
@@ -67,7 +67,9 @@ If compiling Bulma's Sass yourself, set the SCSS variables before the CSS variab
|
|
|
67
67
|
);
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
-
(The library itself ships `$primary: #1e6b99` — HSL `202 / 67% / 36%` — this way
|
|
70
|
+
(The library itself ships `$primary: #1e6b99` — HSL `202 / 67% / 36%` — this way, and
|
|
71
|
+
`$table-cell-text-align: start`, so table header cells line up with the body cells under them on
|
|
72
|
+
a right-to-left page, where Bulma's default is `left`.)
|
|
71
73
|
|
|
72
74
|
## Colors — override the H/S/L trio to recolor
|
|
73
75
|
|
package/data/skills.json
CHANGED
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
{
|
|
124
124
|
"id": "rbx-component-map",
|
|
125
125
|
"file": "references/rbx/component-map.md",
|
|
126
|
-
"bytes":
|
|
126
|
+
"bytes": 14814
|
|
127
127
|
},
|
|
128
128
|
{
|
|
129
129
|
"id": "rbx-prop-map",
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
{
|
|
134
134
|
"id": "rbx-unmappables",
|
|
135
135
|
"file": "references/rbx/unmappables.md",
|
|
136
|
-
"bytes":
|
|
136
|
+
"bytes": 16581
|
|
137
137
|
},
|
|
138
138
|
{
|
|
139
139
|
"id": "react-bulma-components-component-map",
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
{
|
|
163
163
|
"id": "modular-build",
|
|
164
164
|
"file": "references/modular-build.md",
|
|
165
|
-
"bytes":
|
|
165
|
+
"bytes": 15849
|
|
166
166
|
}
|
|
167
167
|
],
|
|
168
168
|
"examples": []
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
{
|
|
177
177
|
"id": "css-variables",
|
|
178
178
|
"file": "references/css-variables.md",
|
|
179
|
-
"bytes":
|
|
179
|
+
"bytes": 64506
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
182
|
"id": "themeable-components",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bestax-mcp",
|
|
3
|
-
"version": "1.18.
|
|
3
|
+
"version": "1.18.26",
|
|
4
4
|
"mcpName": "io.github.allxsmith/bestax-mcp",
|
|
5
5
|
"description": "MCP server for @allxsmith/bestax-bulma — component props, examples, CSS variables and agent skills, served offline from a version-pinned index",
|
|
6
6
|
"type": "module",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@modelcontextprotocol/sdk": "^1.32.2",
|
|
44
44
|
"zod": "^4.6.7",
|
|
45
|
-
"@allxsmith/bestax-bulma": "^5.57.
|
|
45
|
+
"@allxsmith/bestax-bulma": "^5.57.5"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@types/node": "^26.6.6",
|