bestax-mcp 1.16.2 → 1.16.3

package/data/catalog.json

@@ -2,7 +2,7 @@
   "schemaVersion": 2,
   "generatedFrom": {
     "package": "@allxsmith/bestax-bulma",
-    "version": "5.39.1"
+    "version": "5.40.0"
   },
   "docsBase": "https://bestax.io/docs",
   "categories": [
@@ -1200,8 +1200,8 @@
       "slug": "components/treeview",
       "import": "import { TreeView } from '@allxsmith/bestax-bulma';",
       "compound": true,
-      "propCount": 20,
-      "exampleCount": 8
+      "propCount": 27,
+      "exampleCount": 9
     },
     {
       "name": "UnorderedList",

package/data/components/TreeView.json

@@ -23,7 +23,11 @@
     },
     {
       "title": "Folders That Load",
-      "code": "function example() {\n  interface Folder {\n    id: string;\n    name: string;\n    hasFolders: boolean;\n  }\n\n  // A pretend server: each folder holds two more, three levels down.\n  const listFolders = (id: string) =>\n    new Promise<Folder[]>(resolve =>\n      setTimeout(\n        () =>\n          resolve(\n            ['a', 'b'].map(name => ({\n              id: `${id}/${name}`,\n              name: `Folder ${name.toUpperCase()}`,\n              hasFolders: id.split('/').length < 3,\n            }))\n          ),\n        800\n      )\n    );\n\n  const [expanded, setExpanded] = useState<string[]>([]);\n  const [loaded, setLoaded] = useState<Record<string, Folder[]>>({});\n\n  function changeOpen(next: string[]) {\n    setExpanded(next);\n    for (const id of next) {\n      if (!loaded[id]) {\n        listFolders(id).then(found =>\n          setLoaded(current => ({ ...current, [id]: found }))\n        );\n      }\n    }\n  }\n\n  const items = (folders: Folder[]): React.ReactNode =>\n    folders.map(folder => (\n      <TreeView.Item\n        key={folder.id}\n        value={folder.id}\n        label={folder.name}\n        icon=\"folder\"\n        hasChildren={folder.hasFolders}\n      >\n        {loaded[folder.id]\n          ? items(loaded[folder.id])\n          : expanded.includes(folder.id) && (\n              <TreeView.Item\n                value={`${folder.id}:loading`}\n                label=\"Loading…\"\n                disabled\n              />\n            )}\n      </TreeView.Item>\n    ));\n\n  return (\n    <TreeView\n      aria-label=\"Folders\"\n      expanded={expanded}\n      onExpandedChange={changeOpen}\n    >\n      {items([\n        { id: 'home', name: 'Home', hasFolders: true },\n        { id: 'shared', name: 'Shared', hasFolders: true },\n      ])}\n    </TreeView>\n  );\n}"
+      "code": "function example() {\n  interface Folder {\n    id: string;\n    name: string;\n    hasFolders: boolean;\n  }\n\n  // A pretend server: each folder holds two more, three levels down.\n  const listFolders = (id: string, fail: boolean) =>\n    new Promise<Folder[]>((resolve, reject) =>\n      setTimeout(() => {\n        if (fail) {\n          reject(new Error(`Couldn't reach ${id}`));\n          return;\n        }\n        resolve(\n          ['a', 'b'].map(name => ({\n            id: `${id}/${name}`,\n            name: `Folder ${name.toUpperCase()}`,\n            hasFolders: id.split('/').length < 3,\n          }))\n        );\n      }, 800)\n    );\n\n  const [expanded, setExpanded] = useState<string[]>([]);\n  // A folder's children, or how loading them is going.\n  const [found, setFound] = useState<\n    Record<string, Folder[] | 'loading' | 'error'>\n  >({});\n  // Shared fails the first time, so there's a Retry to press.\n  const [sharedFails, setSharedFails] = useState(true);\n\n  function load(id: string) {\n    const fail = id === 'shared' && sharedFails;\n    if (fail) setSharedFails(false);\n    setFound(current => ({ ...current, [id]: 'loading' }));\n    listFolders(id, fail).then(\n      folders => setFound(current => ({ ...current, [id]: folders })),\n      () => setFound(current => ({ ...current, [id]: 'error' }))\n    );\n  }\n\n  function changeOpen(next: string[]) {\n    setExpanded(next);\n    for (const id of next) {\n      if (!found[id]) load(id);\n    }\n  }\n\n  const items = (folders: Folder[]): React.ReactNode =>\n    folders.map(folder => {\n      const state = found[folder.id];\n      return (\n        <TreeView.Item\n          key={folder.id}\n          value={folder.id}\n          label={folder.name}\n          icon=\"folder\"\n          hasChildren={folder.hasFolders}\n          isLoading={state === 'loading'}\n          loadError={\n            state === 'error' ? `Couldn't load ${folder.name}` : undefined\n          }\n          onRetry={() => load(folder.id)}\n        >\n          {Array.isArray(state) && items(state)}\n        </TreeView.Item>\n      );\n    });\n\n  return (\n    <TreeView\n      aria-label=\"Folders\"\n      expanded={expanded}\n      onExpandedChange={changeOpen}\n    >\n      {items([\n        { id: 'home', name: 'Home', hasFolders: true },\n        { id: 'shared', name: 'Shared', hasFolders: true },\n      ])}\n    </TreeView>\n  );\n}"
+    },
+    {
+      "title": "Folders That Load",
+      "code": "<TreeView\n  aria-label=\"Dossiers\"\n  loadingLabel=\"Chargement…\"\n  retryLabel=\"Réessayer\"\n  loadingAnnouncement={name => `Chargement de ${name}`}\n  loadedAnnouncement={name => `${name} chargé`}\n>\n  {/* … */}\n</TreeView>"
     },
     {
       "title": "An Outline With Expand All and Collapse All",
@@ -38,8 +42,15 @@
       "code": "<TreeView\n  aria-label=\"Files\"\n  selectionMode=\"single\"\n  defaultSelected=\"src/App.tsx\"\n  defaultExpanded={['src']}\n>\n  <TreeView.Item value=\"src\" label=\"src\" icon=\"folder\">\n    <TreeView.Item value=\"src/index.ts\" label=\"index.ts\" icon=\"file\" />\n    <TreeView.Item value=\"src/App.tsx\" label=\"App.tsx\" icon=\"file\" />\n    <TreeView.Item value=\"src/legacy.ts\" label=\"legacy.ts\" disabled />\n  </TreeView.Item>\n  <TreeView.Item value=\"package.json\" label=\"package.json\" icon=\"file\" />\n</TreeView>"
     }
   ],
-  "accessibility": "`TreeView` follows the [APG Tree View Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).\n\n- **Roles:** the root is a `<ul role=\"tree\">`, each item an `<li role=\"treeitem\">`, and an open\n  parent's children sit in a `<ul role=\"group\">` inside it. A closed item's children have no\n  markup.\n- **A name:** a tree needs one, from `aria-label` or `aria-labelledby`, and a development build\n  warns when it has neither. Each item is named by `aria-labelledby` pointing at its own label, and\n  declares its `aria-level`, which VoiceOver needs according to\n  [GitHub's testing](https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/).\n  `aria-expanded` is on parents only.\n- **One tab stop, with real focus:** one item holds `tabIndex={0}` and the rest `-1`, and focus\n  moves from item to item, rather than through `aria-activedescendant`. When focus comes into the\n  tree, it lands on the selected item, or in a checkbox tree on the first checked item on the page.\n  Without one, it lands where focus last was, or on the first item. If the item holding the stop\n  goes away, its nearest ancestor on the page takes it, and focus goes too if it had focus.\n- **Selection:** a `single` tree marks each enabled item `aria-selected`, `true` or `false`. A\n  `checkbox` tree marks `aria-checked` on every item, `true`, `false` or `mixed`, disabled ones\n  included, and adds `aria-multiselectable=\"true\"` to the tree. A tree never has both, and a tree\n  with no `selectionMode` has neither. Selection doesn't follow focus.\n- **The box** is a [`Checkbox`](https://bestax.io/docs/api/form/checkbox) inside an `aria-hidden` span, with\n  `tabIndex={-1}`, so it's neither a tab stop nor a second thing for a screen reader to read. The\n  item's `aria-checked` is what a screen reader hears.\n- **Disabled items** are `aria-disabled` and stay reachable from the arrow keys, Home, End and\n  typing, so a screen reader user finds them. They're never selected, checked, opened or closed.\n  One that's already open stays open, so what's under it is still reachable.\n\nEnter and Space do the item's one thing, which depends on the mode:\n\n| Key   | No `selectionMode`       | `single`         | `checkbox`               |\n| ----- | ------------------------ | ---------------- | ------------------------ |\n| Enter | Opens or closes a parent | Selects the item | Opens or closes a parent |\n| Space | Opens or closes a parent | Selects the item | Checks or unchecks it    |\n\nThe rest work the same in every mode:\n\n| Key        | What it does                                                                              |\n| ---------- | ----------------------------------------------------------------------------------------- |\n| Down, Up   | The next or previous item on the page, without wrapping                                   |\n| Right      | Opens a closed parent, and focus stays. On an open parent, moves to its first child       |\n| Left       | Closes an open parent. Otherwise moves to its parent                                      |\n| Home, End  | The first item, and the last one on the page                                              |\n| `*`        | Opens every closed parent beside the focused item, itself included. Focus stays           |\n| Characters | Moves to the next item whose label starts with what's typed, several characters adding up |\n| Tab        | Leaves the tree                                                                           |\n\n- **Right to left:** Right and Left swap in a right-to-left page, and the chevron points to the\n  left while closed.\n- **Keys it leaves alone:** anything with Control, Alt or Meta held, anything while an input method\n  is composing, and Escape, so it reaches a Modal or Popover around the tree. An item's own\n  `onKeyDown` runs first, and calling `preventDefault()` there keeps the tree from acting on the\n  key.\n- **Clicks:** the chevron only opens and closes. The rest of the row does the item's one thing:\n  opens or closes it with no `selectionMode`, selects it (and opens or closes a parent) in a\n  `single` tree, and checks it in a `checkbox` tree. A click moves focus and the tab stop to the\n  item.\n- **Not for site navigation:** APG's own\n  [navigation tree example](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/)\n  says \"A pattern more suited for typical site navigation with expandable groups of links is the\n  disclosure pattern\", and a tree's items aren't links. Keep a sidebar on [`Menu`](https://bestax.io/docs/api/components/menu).\n- **Focus and the selected look differ:** the focus ring sits outside the row, so it shows on the\n  selected fill as well as on a plain row.\n- **Forced colors:** in Windows high contrast mode the selected row is the system's Highlight and\n  HighlightText, a disabled row is GrayText, and the focus ring, the chevrons and the guide lines\n  stay visible, since they're outlines and borders. A mixed box keeps its dash.\n- **Motion:** the chevron turns with a short transition, which stops when the reader asks for\n  reduced motion.",
-  "related": ["Checkbox", "Collapse", "Menu", "Sidebar", "useBulmaClasses"],
+  "accessibility": "`TreeView` follows the [APG Tree View Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).\n\n- **Roles:** the root is a `<ul role=\"tree\">`, each item an `<li role=\"treeitem\">`, and an open\n  parent's children sit in a `<ul role=\"group\">` inside it. A closed item's children have no\n  markup.\n- **A name:** a tree needs one, from `aria-label` or `aria-labelledby`, and a development build\n  warns when it has neither. Each item is named by `aria-labelledby` pointing at its own label, and\n  declares its `aria-level`, which VoiceOver needs according to\n  [GitHub's testing](https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/).\n  `aria-expanded` is on parents only.\n- **One tab stop, with real focus:** one item holds `tabIndex={0}` and the rest `-1`, and focus\n  moves from item to item, rather than through `aria-activedescendant`. When focus comes into the\n  tree, it lands on the selected item, or in a checkbox tree on the first checked item on the page.\n  Without one, it lands where focus last was, or on the first item. If the item holding the stop\n  goes away, its nearest ancestor on the page takes it, and focus goes too if it had focus.\n- **Selection:** a `single` tree marks each enabled item `aria-selected`, `true` or `false`. A\n  `checkbox` tree marks `aria-checked` on every item, `true`, `false` or `mixed`, disabled ones\n  included, and adds `aria-multiselectable=\"true\"` to the tree. A tree never has both, and a tree\n  with no `selectionMode` has neither. Selection doesn't follow focus.\n- **The box** is a [`Checkbox`](https://bestax.io/docs/api/form/checkbox) inside an `aria-hidden` span, with\n  `tabIndex={-1}`, so it's neither a tab stop nor a second thing for a screen reader to read. The\n  item's `aria-checked` is what a screen reader hears.\n- **Disabled items** are `aria-disabled` and stay reachable from the arrow keys, Home, End and\n  typing, so a screen reader user finds them. They're never selected, checked, opened or closed.\n  One that's already open stays open, so what's under it is still reachable.\n- **A loading item's row** is a `treeitem` that says Loading…, marked `aria-disabled` and reached\n  the way a disabled item is, so a screen reader user who moves into the folder hears what's\n  happening. It has no value: it's never selected or checked, it has no `aria-selected` or\n  `aria-checked`, and a checkbox tree doesn't count it. If it goes with focus on it, focus moves to\n  the item it was loading for. Bulma's loader turns in its chevron's place, hidden from assistive\n  tech.\n- **A failed load's row** is a `treeitem` named by its message and the Retry button's text, such\n  as \"Couldn't load src Retry\". Enter, Space or a click on the row calls `onRetry`, in every mode.\n  The button is drawn inside an `aria-hidden` span and takes no focus, the way an item's box is,\n  so the tree keeps its one tab stop, and nothing in the message should be a link or a button\n  either. A retry that starts loading keeps the same row, so focus stays on it. With no `onRetry`,\n  the row is disabled and shows the message alone.\n- **Announcements:** a visually hidden `role=\"status\"` region with `aria-live=\"polite\"` sits right\n  after the tree, one for the whole tree, from the moment it mounts, so a screen reader is already\n  listening when something is written into it. It says \"Loading src\" when an open item starts\n  loading, a failed load's message, and \"src loaded\" when the loading row or a failed load's row\n  goes with the item still open.\n  The name is the item's label as a screen reader reads it. A closed item, or one in a closed\n  branch, says nothing. Each announcement is written a moment after the change and cleared soon\n  after, so the page doesn't keep a second copy of the text.\n\nEnter and Space do the item's one thing, which depends on the mode:\n\n| Key   | No `selectionMode`       | `single`         | `checkbox`               |\n| ----- | ------------------------ | ---------------- | ------------------------ |\n| Enter | Opens or closes a parent | Selects the item | Opens or closes a parent |\n| Space | Opens or closes a parent | Selects the item | Checks or unchecks it    |\n\nOn a failed load's row, both retry, whatever the mode. The rest work the same in every mode:\n\n| Key        | What it does                                                                              |\n| ---------- | ----------------------------------------------------------------------------------------- |\n| Down, Up   | The next or previous item on the page, without wrapping                                   |\n| Right      | Opens a closed parent, and focus stays. On an open parent, moves to its first child       |\n| Left       | Closes an open parent. Otherwise moves to its parent                                      |\n| Home, End  | The first item, and the last one on the page                                              |\n| `*`        | Opens every closed parent beside the focused item, itself included. Focus stays           |\n| Characters | Moves to the next item whose label starts with what's typed, several characters adding up |\n| Tab        | Leaves the tree                                                                           |\n\n- **Right to left:** Right and Left swap in a right-to-left page, and the chevron points to the\n  left while closed.\n- **Keys it leaves alone:** anything with Control, Alt or Meta held, anything while an input method\n  is composing, and Escape, so it reaches a Modal or Popover around the tree. An item's own\n  `onKeyDown` runs first, and calling `preventDefault()` there keeps the tree from acting on the\n  key.\n- **Clicks:** the chevron only opens and closes. The rest of the row does the item's one thing:\n  opens or closes it with no `selectionMode`, selects it (and opens or closes a parent) in a\n  `single` tree, and checks it in a `checkbox` tree. A click moves focus and the tab stop to the\n  item.\n- **Not for site navigation:** APG's own\n  [navigation tree example](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/)\n  says \"A pattern more suited for typical site navigation with expandable groups of links is the\n  disclosure pattern\", and a tree's items aren't links. Keep a sidebar on [`Menu`](https://bestax.io/docs/api/components/menu).\n- **Focus and the selected look differ:** the focus ring sits outside the row, so it shows on the\n  selected fill as well as on a plain row.\n- **Forced colors:** in Windows high contrast mode the selected row is the system's Highlight and\n  HighlightText, a disabled row or a loading one is GrayText, and the focus ring, the chevrons and\n  the guide lines stay visible, since they're outlines and borders. A mixed box keeps its dash, and\n  the loader's ring stays open.\n- **Motion:** the chevron turns with a short transition, and the loader spins. Both stop when the\n  reader asks for reduced motion, and the loader stays drawn.",
+  "related": [
+    "Checkbox",
+    "Collapse",
+    "Loader",
+    "Menu",
+    "Sidebar",
+    "useBulmaClasses"
+  ],
   "storybook": "https://bestax.io/storybook/?path=/story/components-treeview--default",
   "summary": "The `TreeView` component renders a tree of items you browse and pick from, the way a file explorer works: one tab stop, the arrow keys to move, and Right and Left to open and close. It's the APG Tree View pattern, drawn to look like Bulma's menu. It isn't for site navigation: items aren't links, and a sidebar whose sections open and close is `Menu`'s job. The root owns which items are open, through `expanded`, `defaultExpanded` and `onExpandedChange`. `selectionMode` picks one of three trees. With `none`, nothing is picked. With `single`, one item is, and `selected` says which. With `checkbox`, each item has a box, a check reaches every enabled item under it, closed branches included, and a parent with some of its items checked is mixed. `selected` is read in a `single` tree only, and `checked` in a `checkbox` tree only. Selection never follows focus. Disabled items stay reachable from the keys, so a screen reader finds them. The tree needs a name, from `aria-label` or `aria-labelledby`, and a development build warns when it has neither.",
   "import": "import { TreeView } from '@allxsmith/bestax-bulma';",
@@ -159,6 +170,42 @@
           "inherited": false,
           "deprecated": false
         },
+        {
+          "name": "loadingLabel",
+          "type": "string",
+          "default": "'Loading…'",
+          "description": "What the row in a loading item's group says. In your app's language.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "retryLabel",
+          "type": "string",
+          "default": "'Retry'",
+          "description": "The Retry button's text on a failed load's row. In your app's language.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "loadingAnnouncement",
+          "type": "(name: string) => string",
+          "default": null,
+          "description": "What the live region says when an open item starts loading, built from the item's name. In your app's language. Default: `` `Loading ${name}` ``.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "loadedAnnouncement",
+          "type": "(name: string) => string",
+          "default": null,
+          "description": "What the live region says when that load finishes. In your app's language. Default: `` `${name} loaded` ``.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
         {
           "name": "className",
           "type": "string",
@@ -251,6 +298,33 @@
           "inherited": false,
           "deprecated": false
         },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "default": "false",
+          "description": "Its children are on their way. While it's open, its group ends in a row that says so, and the tree's live region says it's loading, then that it's loaded once this goes back to `false`. A parent only: pair it with `hasChildren`, or with the children it already has.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "loadError",
+          "type": "React.ReactNode",
+          "default": null,
+          "description": "Its children didn't load. While it's open, its group ends in a row with this message, and a Retry button when there's an `onRetry`, and the live region reads the message out, so name the item in it (\"Couldn't load src\"), then says it's loaded once this goes with the item still open. A parent only, like `isLoading`. Nothing in it should be a link or a button: the row is what's pressed. `isLoading` wins while both are given.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
+        {
+          "name": "onRetry",
+          "type": "() => void",
+          "default": null,
+          "description": "Called by the Retry button on a failed load's row, and by Enter or Space there. Set `isLoading` while the retry runs, so the live region says it's loading, and reads the message out again if it fails again. The same message passed a second time with no loading between is no change the tree can see.",
+          "required": false,
+          "inherited": false,
+          "deprecated": false
+        },
         {
           "name": "disabled",
           "type": "boolean",

package/data/skills/bestax-layout-scaffold/SKILL.md

@@ -110,8 +110,12 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
   other: `<TreeView aria-label="Files" selectionMode="single">` with `selected`/`onSelectedChange`
   picks one, and `selectionMode="checkbox"` with `checked`/`onCheckedChange` draws boxes with
   mixed parents, where a parent's value checks its whole branch. Map the data with a recursive
-  function, and render an item's children whether it's open or not. Its items aren't links, so
-  the app's sidebar and any list of pages stay on `Menu` with `Menu.Item href`.
+  function, and render an item's children whether it's open or not. A folder that loads when it
+  opens takes `hasChildren`, `isLoading` while its children are on their way, and
+  `loadError="Couldn't load src"` with `onRetry` when the load fails, setting `isLoading` again
+  while the retry runs: the tree draws the Loading… and Retry rows and announces them, so don't
+  hand-write a placeholder item. Its items aren't
+  links, so the app's sidebar and any list of pages stay on `Menu` with `Menu.Item href`.
 - Link lists (footer nav, sidebars): a bare `UnorderedList` of `ListItem`s is already
   marker-less and flush — Bulma's reset unstyles `ul` — so no prop or CSS is needed;
   bullets appear only inside `Content`.

package/data/skills/bestax-migrate/references/bulma-classes/unmappables.md

@@ -400,7 +400,8 @@ Run on an HTML page (`bestax-migrate bulma-classes page.html`, or a folder with
 codemod writes a module beside the page and runs everything above on it, so a page gets the same
 TODOs its markup would as JSX. What a component can't carry gets an `html-*` rule. TODOs about the
 whole page sit above the component, the rest above its `return`, and each ends with the page and
-the line it came from (`(index.html:42)`). The page itself stays as it was, so the code a TODO
+the line it came from (`(index.html:42)`), or every line, for a TODO several elements share
+(`(index.html:42, 57)`). The page itself stays as it was, so the code a TODO
 points at is still there to read. A rule names only a tag, an attribute or a fixed word, never
 anything the page says.
 
@@ -414,6 +415,11 @@ A component renders into the `<body>` of the app's own document, so nothing in t
   it into the head; React 18 leaves it in the body, so use `document.title` in an effect there.
 - **`html-head:meta`**: `charset` and `viewport` go once in the app's `index.html`. A page's own
   (a description, Open Graph tags) go where the app sets each page's head.
+- **`html-head:csp`**: a `<meta http-equiv="Content-Security-Policy">`. Its policy was written for
+  what the page loads, and copied into `index.html` as it is, it can block what the app loads
+  instead: a Vite dev server runs an inline script for React's fast refresh and opens a socket for
+  hot reloading, and the build serves the app's own scripts, styles and fonts. Write the app's own
+  policy, best sent as a response header, and try it under both the dev server and the build.
 - **`html-head:link`**: icons, preconnects and preloads are app-wide, so keep them in
   `index.html`; a `canonical` is per page.
 - **`html-head:style`**: the `<style>` block was dropped. Move its rules into the app's stylesheet.
@@ -586,7 +592,9 @@ read for the burger, a carousel and a theme toggle too, and its TODO names the f
   app loads paints the right one, and the toggle's state starts from what it wrote. The
   bestax-theming skill covers `Theme` and `colorMode`, and its `examples/dark-mode.tsx` has the
   script and the app's side.
-- **`html-script:json-ld`** is structured data for search engines. Render it where the app sets
+- **`html-script:json-ld`** is structured data for search engines. Data about the whole site, or
+  about a single-page app's one page, goes in the app's `index.html` as it is, where a crawler that
+  runs no JavaScript still reads it. Data that differs from page to page goes where the app sets
   each page's head, as
   `<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />`.
 - **`html-script`**: any other inline script, or a `<script type>` that isn't code (a template,
@@ -604,8 +612,9 @@ The app's document has its own `<html>` and `<body>`, which a component can't re
   bestax's `Navbar` adds none there, whatever its `fixed` says.
 - **`html-document:data-theme`**, **`html-document:theme-dark`**, **`html-document:theme-light`**:
   the page's color scheme. Put it on the `<html>` in `index.html`, where the first paint has it.
-  `<Theme colorMode="dark">` writes `data-theme` on `<html>` too, but from an effect, after a
-  first frame in the visitor's OS scheme, so keep it for a scheme the visitor switches.
+  For a scheme the visitor switches, `Theme colorMode` writes the choice only after that paint,
+  so write a saved one before it too, as `html-script:theme` says and the bestax-theming skill's
+  `examples/dark-mode.tsx` does.
 - **`html-document:lang`**, **`html-document:dir`**: set them on the `<html>` in `index.html`.
 - **`html-document:class`**: the page's own classes on `<html>` or `<body>`. Put them on the
   app's own `<body>` (or `<html>`), or on an element around the page's content if the styles
@@ -656,6 +665,12 @@ than `this`. A `<body onload>` becomes an effect.
 - **`html-attr:name`**: an attribute JSX can't write (`@click`, `:class`, `x-on:click`), or one the
   element already had under another spelling, was left out. A framework's directive is code to port
   into the component.
+- **`html-attr:stray`**: a stray character in a tag, with no letter or digit in it (`\` in
+  `<figure class="image" \>`, a typo for `/>`), which the browser read as the name of an empty
+  attribute. It was left out, so there is nothing to port; delete it from the page too.
+- **`html-attr:ignored`**: an attribute HTML gives the element no meaning for, so the browser
+  ignored it, and React's types reject it there: `type` on a `<textarea>`. It was left out, so the
+  module typechecks. Nothing reads it, unless a stylesheet or script of the page's selects on it.
 - **`html-attr:unknown`**: an attribute React has no prop for by that name, written as it was.
   React renders it. Whether a TypeScript build takes it depends on the element (React's types
   list `valign` on a `<td>` and not on a `<th>`), so the TODO doesn't say; what to do depends on

package/data/skills.json

@@ -113,7 +113,7 @@
         {
           "id": "bulma-classes-unmappables",
           "file": "references/bulma-classes/unmappables.md",
-          "bytes": 49495
+          "bytes": 50861
         },
         {
           "id": "css-migration",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-mcp",
-  "version": "1.16.2",
+  "version": "1.16.3",
   "mcpName": "io.github.allxsmith/bestax-mcp",
   "description": "MCP server for @allxsmith/bestax-bulma — component props, examples, CSS variables and agent skills, served offline from a version-pinned index",
   "type": "module",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.31.0",
     "zod": "^4.4.3",
-    "@allxsmith/bestax-bulma": "^5.39.1"
+    "@allxsmith/bestax-bulma": "^5.40.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",