@smwb/ui-mcp-react 2.8.0 → 2.9.0

package/component-meta/navigation/commandPalette/commandPalette.json

@@ -0,0 +1,161 @@
+{
+  "name": "CommandPalette",
+  "description": "Command Palette component from the navigation module.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/commandPalette/commandPalette.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.entry.less",
+      "@smwb/ui-styles/less/components/kbd/kbd.entry.less",
+      "@smwb/ui-styles/less/components/modal/modal.entry.less",
+      "@smwb/ui-styles/less/components/skeleton/skeleton.entry.less"
+    ],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/commandPalette/commandPalette.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/kbd/kbd.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/modal/modal.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";"
+  },
+  "props": {
+    "open": {
+      "type": "boolean",
+      "required": false,
+      "description": "Controlled open state. The palette is controlled while this is not `undefined`."
+    },
+    "defaultOpen": {
+      "type": "boolean",
+      "required": false,
+      "description": "Open state used while `open` is `undefined`; `false` by default."
+    },
+    "onOpenChange": {
+      "type": "(open: boolean) => void",
+      "required": false,
+      "description": "Called for every request to open or close: Escape, a backdrop click, and choosing an item\nwhile `closeOnSelect`. Called in the controlled and in the uncontrolled mode."
+    },
+    "groups": {
+      "type": "CommandPaletteGroup[]",
+      "required": false,
+      "description": "Static groups, filtered locally by `filter`. A group left with no items is hidden, heading included."
+    },
+    "recent": {
+      "type": "CommandPaletteItem[]",
+      "required": false,
+      "description": "Recently used items, kept by the app: it owns the list and updates it from `onSelect`. Shown as\nthe first group while the trimmed query is empty, never filtered, and hidden while searching."
+    },
+    "recentLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Heading of the recent group; `\"Recent\"` by default. That group is `{ id: \"recent\", label: recentLabel, items: recent }` in `onSelect`."
+    },
+    "query": {
+      "type": "string",
+      "required": false,
+      "description": "Controlled query. The palette is controlled while this is not `undefined`."
+    },
+    "defaultQuery": {
+      "type": "string",
+      "required": false,
+      "description": "Query used while `query` is `undefined`; `\"\"` by default. An uncontrolled field goes back to it\neach time the palette opens."
+    },
+    "onQueryChange": {
+      "type": "(query: string) => void",
+      "required": false,
+      "description": "Called for every edit of the field, in the controlled and in the uncontrolled mode."
+    },
+    "filter": {
+      "type": "CommandPaletteFilter | false",
+      "required": false,
+      "description": "Local matching of `groups`; commandPaletteFilter by default (every word of the query\noccurs in the label, the subtitle or a keyword, ignoring case and accents). `false` shows\n`groups` as given, for an app that filters or ranks them itself. Never applied to `recent` or\nto the results of `source`."
+    },
+    "source": {
+      "type": "CommandPaletteSource",
+      "required": false,
+      "description": "Loads results for the trimmed query, appended after the static groups. Called after `debounce`\nmilliseconds of quiet typing and only for a query of at least `minQueryLength` characters;\n`signal` is aborted when a newer query, a close or an unmount makes the answer useless. While a\nrequest is pending its predecessors' groups are not shown, and a rejection that is not an abort\nshows `errorText`."
+    },
+    "debounce": {
+      "type": "number",
+      "required": false,
+      "description": "Milliseconds of quiet typing before `source` is called; `200` by default."
+    },
+    "minQueryLength": {
+      "type": "number",
+      "required": false,
+      "description": "`source` is called only when the trimmed query has at least this many characters; `1` by\ndefault, so an empty query loads nothing. `0` also loads for the empty query."
+    },
+    "loading": {
+      "type": "boolean",
+      "required": false,
+      "description": "App-driven loading: shows the skeleton like a pending `source`; `false` by default."
+    },
+    "onSelect": {
+      "type": "(item: CommandPaletteItem, group: CommandPaletteGroup) => void",
+      "required": false,
+      "description": "Called for every chosen item, after the item's own `onSelect`. The place for the app to run the\ncommand and to update its `recent` list."
+    },
+    "closeOnSelect": {
+      "type": "boolean",
+      "required": false,
+      "description": "Ask to close (`onOpenChange(false)`) when an item is chosen; `true` by default."
+    },
+    "placeholder": {
+      "type": "string",
+      "required": false,
+      "description": "Placeholder of the field; `\"Type a command or search…\"` by default. It is not the field's name."
+    },
+    "searchLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the field and, through `aria-labelledby`, of the listbox; `\"Search commands\"` by default."
+    },
+    "noResultsText": {
+      "type": "string",
+      "required": false,
+      "description": "Shown and announced when nothing matches; `\"No results\"` by default."
+    },
+    "errorText": {
+      "type": "string",
+      "required": false,
+      "description": "Shown and announced when `source` rejects; `\"Couldn't load results\"` by default."
+    },
+    "resultsAnnouncement": {
+      "type": "(count: number) => string",
+      "required": false,
+      "description": "Text of the polite status once a search has settled; `\"1 result\"` / `\"N results\"` by default.\nNot used for zero results, which announce `noResultsText`."
+    },
+    "footer": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "Slot under the results, e.g. key hints built with `Kbd`. Drawn only when given."
+    },
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Added to the dialog element, after `smwb-command-palette`."
+    },
+    "aria-label": {
+      "type": "string",
+      "required": false,
+      "description": "Name of the dialog; `\"Command palette\"` by default. Not set when `aria-labelledby` is given."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "required": false,
+      "description": "Id of the element that names the dialog. Wins over `aria-label`."
+    },
+    "aria-describedby": {
+      "type": "string",
+      "required": false,
+      "description": "Id of the element that describes the dialog."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the dialog element; `\"command-palette\"` unless given."
+    }
+  }
+}

package/component-meta/navigation/sidebar/sidebar.json

@@ -78,6 +78,11 @@
       "type": "string",
       "required": false,
       "description": "Accessible label for the built-in collapse toggle."
+    },
+    "contained": {
+      "type": "boolean",
+      "required": false,
+      "description": "Place the rail inside its container instead of pinning it to the window.\nThe sidebar stays in the page flow (`position: relative`), keeps its\nvariant width as a non-shrinking flex item and scrolls a long menu inside\nitself, so sibling content flows beside it and reflows when it collapses.\nGive the container a definite height (e.g. a fixed-height flex row) to\nmake the rail fill it; with an auto-height container the rail sizes\nitself to the menu. Defaults to `false`: the sidebar stays viewport-fixed."
     }
   }
 }

package/component-meta/navigation/tabs/tab/tab.json

@@ -18,9 +18,10 @@
       "@smwb/ui-styles/less/components/tabs/tab/tab.entry.less"
     ],
     "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.entry.less",
       "@smwb/ui-styles/less/components/ripple/ripple.entry.less"
     ],
-    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";"
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";"
   },
   "props": {
     "label": {
@@ -33,6 +34,11 @@
       "required": false,
       "description": "Is Active. Optional. Type: boolean."
     },
+    "tabStop": {
+      "type": "boolean",
+      "required": false,
+      "description": "Whether the tab is the one in the page's Tab order (`tabIndex` 0, the others -1). `Tabs` sets\nit: the focused tab while focus is in the row, the selected one otherwise. On its own a tab\nis the stop while `isActive`."
+    },
     "contentRef": {
       "type": "React.Ref<unknown>",
       "required": false,
@@ -41,7 +47,7 @@
     "icon": {
       "type": "React.ReactNode",
       "required": false,
-      "description": "Icon node or image source."
+      "description": "Content before the label: a status marker (running, done, failed). The slot is decorative, so\nthe tab's accessible name stays the label alone and nothing is read out twice. An icon that has\nto be announced belongs in `label`, where you can give it words."
     },
     "stacked": {
       "type": "boolean",
@@ -51,17 +57,37 @@
     "tag": {
       "type": "React.ElementType",
       "required": false,
-      "description": "Tag. Optional. Type: React.ElementType."
+      "description": "The element to render. A tab with an `href` is an `a` unless you say otherwise."
     },
     "href": {
       "type": "string",
       "required": false,
-      "description": "With `tag=\"a\"`: where the link goes, so the tab stays a real link."
+      "description": "Navigation mode: where the tab goes. The tab is then a real link (`<a href role=\"tab\">`, with\nno `target`: a tab never opens another window), so it opens in place and middle click, copy\nlink and the like work. A router takes over the plain click in `onClick` with\n`event.preventDefault()`; `Tabs` still calls `onChange` for it. A modified or non-primary click\n(Ctrl, Meta, Shift or Alt held, or a button other than the main one) is the browser's, as\n\"open in a new tab\": the router must let it through, and `Tabs` does not call `onChange`.\nThe one exception is a middle press on a `closable` tab: it closes the tab instead, as in an\neditor, and its default is prevented so nothing opens."
     },
     "disabled": {
       "type": "boolean",
       "required": false,
       "description": "Whether the control is disabled and non-interactive."
+    },
+    "closable": {
+      "type": "boolean",
+      "required": false,
+      "description": "Draw a close button after the tab, and let Delete or Backspace on the focused tab close it too\n(Backspace because a Mac has no Delete key); the tab lists them in `aria-keyshortcuts`. A middle\npress on the tab asks for the same thing (`reason` \"middleClick\") without selecting it. The tab\ndoes not close itself: `onClose` asks for it and the owner removes the `Tab`. The button is a\nsibling of the tab, not inside its `role=\"tab\"`, so the tab's accessible name is its label alone.\nIt is out of the Tab order (`tabIndex` -1), so the row keeps one tab stop, and a press on it takes\nno focus and never selects the tab. When the tab that has focus closes, `Tabs` moves focus to the\ntab that takes its place (the previous one if it was last), skipping disabled tabs. A disabled tab\nhas a disabled button.\n\nThe button stays in the accessibility tree, named by `closeLabel`: it is how a screen reader user\nwho cannot press Delete, as on a touch screen, closes the tab. It sits in the tab list beside its\ntab, though, and ARIA 1.2 lets a `tablist` own only `tab`s: a linter that applies that strictly\n(axe `aria-required-children`) can flag the button, and whatever `actions` holds.\n\nTo switch it off on a tab, pass `false` rather than leaving it out: a tab given `closable` or\n`actions` is wrapped in an item with them, a tab given neither is not, and moving between the two\nrecreates the tab and drops its focus."
+    },
+    "onClose": {
+      "type": "(event: React.SyntheticEvent<HTMLElement>, reason: TabCloseReason) => void",
+      "required": false,
+      "description": "Asks for the tab to close, and receives what asked for it: the close button's click (`reason`\n\"button\"), the key press of Delete or Backspace on the tab (`reason` \"key\", its default is\nprevented), the middle press on the tab (`reason` \"middleClick\", its default is prevented too),\nor the event passed to `close` by the tab's `actions` (`reason` \"actions\"). The owner removes\nthe `Tab`."
+    },
+    "closeLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible label of the close button. English by default; set it to localise, or to name the tab (\"Close Terminal 1\")."
+    },
+    "actions": {
+      "type": "React.ReactNode | ((api: TabActionsApi) => React.ReactNode)",
+      "required": false,
+      "description": "Content after the tab, before the close button: a trigger with a `Menu` (\"Rename\", \"Terminate\"),\nor any control. Give a function to get `{ close }` (see `TabActionsApi`). Like the close button\nthe content is a sibling of the tab, so it is not part of the tab's name; the tab's own `ref`,\n`className` and handlers stay on the `role=\"tab\"` element. It stays in the accessibility tree as\nwritten, inside the tab list (see `closable`).\n\nThe row has one tab stop, so give the trigger `tabIndex={-1}`. Shift+F10 or the Menu key on the\nfocused tab, which the tab lists in `aria-keyshortcuts`, focuses the first control in `actions`\nand clicks it, unless that control says `aria-expanded=\"true\"` (it is already open). If the\ncontrol names its popup in `aria-controls`, the first enabled `menuitem` in that element then\ntakes focus, as the WAI-ARIA menu button pattern asks: ArrowDown moves on, Enter chooses, and\nEscape hands focus back to the trigger. Without `aria-controls` focus stays on the trigger.\n\nThe row clips what overflows it: draw the menu in a portal, anchored to the trigger and with the\n`id` the trigger names. A choice that removes the tab (\"Terminate\") should call `close` with its\nevent, so that `onClose` removes the tab and `Tabs` moves focus on to the neighbour; a tab removed\nsome other way leaves focus on the page."
     }
   }
 }

package/component-meta/navigation/tabs/tabPanel/tabPanel.json

@@ -0,0 +1,42 @@
+{
+  "name": "TabPanel",
+  "description": "Content panel of one tab, linked to it by aria-labelledby; shown while the tab is selected. Goes in the panels of Tabs.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "React.HTMLAttributes<HTMLDivElement>"
+  ],
+  "inheritedAttributes": "Also accepts standard HTML attributes for the underlying element (see extends clause in TypeScript).",
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/tabs/tabPanel/tabPanel.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/tabs/tabs.entry.less"
+    ],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabPanel/tabPanel.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";"
+  },
+  "props": {
+    "index": {
+      "type": "number",
+      "required": true,
+      "description": "The tab this panel belongs to: its index, counted as for the `value` of `Tabs`. The panel\nshows while that tab is selected and is hidden otherwise."
+    },
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Extra class on the panel."
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "The panel's content. It stays in the document while the panel is hidden."
+    }
+  }
+}

package/component-meta/navigation/tabs/tabs.json

@@ -1,6 +1,6 @@
 {
   "name": "Tabs",
-  "description": "Tab list container controlling associated panels.",
+  "description": "Tab list with arrow-key navigation (manual activation), optional TabPanels, link tabs for route navigation, drag-to-reorder, an overflow menu of the clipped tabs, and close/switch keyboard chords.",
   "ssr": {
     "safe": true,
     "rendering": "universal"
@@ -15,10 +15,13 @@
     ],
     "dependencies": [
       "@smwb/ui-styles/less/components/icon/icon.entry.less",
+      "@smwb/ui-styles/less/components/kbd/kbd.entry.less",
+      "@smwb/ui-styles/less/components/menu/menu.entry.less",
       "@smwb/ui-styles/less/components/ripple/ripple.entry.less",
-      "@smwb/ui-styles/less/components/tabs/tab/tab.entry.less"
+      "@smwb/ui-styles/less/components/tabs/tab/tab.entry.less",
+      "@smwb/ui-styles/less/components/tabs/tabPanel/tabPanel.entry.less"
     ],
-    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";"
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/kbd/kbd.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/menu/menu.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabPanel/tabPanel.entry.less\";"
   },
   "props": {
     "value": {
@@ -29,7 +32,22 @@
     "onChange": {
       "type": "(e: React.MouseEvent<HTMLButtonElement>, index: number) => void",
       "required": true,
-      "description": "Called with the index of the clicked tab, counted as for `value`."
+      "description": "Called with the index of the clicked tab, counted as for `value`. A tab chosen from the keyboard\n(Enter or Space on the focused tab) calls it with that click too. A modified or non-primary\nclick (Ctrl, Meta, Shift or Alt held, or a button other than the main one) on a link tab\n(`Tab` with `href`) is the browser's, as \"open in a new tab\": it does not call `onChange`."
+    },
+    "orientation": {
+      "type": "\"horizontal\" | \"vertical\"",
+      "required": false,
+      "description": "Which way the tabs run. It sets `aria-orientation` on the tab list and picks the arrow keys that\nmove between tabs: Left and Right when horizontal, Up and Down when vertical. The styles draw\na horizontal row; a vertical list is yours to lay out."
+    },
+    "panels": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "The content of the tabs: `TabPanel`s, rendered after the tab row. With them each tab gets\n`aria-controls` its panel and each panel `aria-labelledby` its tab. Without them the tabs link\nto nothing, as before. Give a panel to every tab: a tab whose panel is left out still names it.\nA `TabPanel` placed anywhere else is not linked to the tabs and is always shown."
+    },
+    "id": {
+      "type": "string",
+      "required": false,
+      "description": "Base of the ids that link tabs and panels: tab `n` is `{id}-tab-{n}`, its panel `{id}-panel-{n}`.\nIt is also the id of the root element. A generated one by default."
     },
     "indicatorContent": {
       "type": "boolean",
@@ -44,7 +62,22 @@
     "scrollButtons": {
       "type": "boolean",
       "required": false,
-      "description": "With `scrollable`: buttons at both ends that scroll the row while it overflows."
+      "description": "With `scrollable`: buttons at both ends that scroll the row while it overflows. They are for\nthe pointer and stay out of the Tab order: the arrow keys reach every tab and scroll it into\nview."
+    },
+    "onReorder": {
+      "type": "(from: number, to: number) => void",
+      "required": false,
+      "description": "Present ⇒ the row is reorderable by dragging a tab onto another (pointer-only; there is no\nkeyboard reorder). `Tabs` does not move the tabs itself: it reports the drag with\n`onReorder(from, to)` — indexes counted as for `value` — and the owner reorders its state.\nThe tabs keep their focus through a reorder, and a reorder keeps the selection on the same tab:\nwhen the dragged tab is the selected one, its new index is reported through `onChange` too, so\na controlled owner moves its value along with its array. That report carries the drop event in\nplace of the click a keyboard or menu choice makes, so the index argument is the authoritative\none: on a drop `event.currentTarget` is the scroll area, not the moved tab."
+    },
+    "overflowMenu": {
+      "type": "boolean",
+      "required": false,
+      "description": "With `scrollable`: when the row overflows, a trigger button is rendered beside the scroller\n(in the scroll buttons' spot) that opens a menu of the tabs the viewport clips — any clipped\npart beyond a 1px tolerance counts. Each entry shows the tab's icon and label, the selected one\nis marked `aria-current=\"true\"`, and choosing one calls `onChange` for it and scrolls it into\nview. The trigger appears only after the browser has measured an overflow, so the server markup\nshows none."
+    },
+    "overflowMenuAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible label of the overflow-menu trigger. English by default; set it to localise."
     },
     "dense": {
       "type": "boolean",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-mcp-react",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "Model Context Protocol server exposing the @smwb/ui-react (React) component catalog and customization guide.",
   "license": "MIT",
   "type": "module",
@@ -28,8 +28,8 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@smwb/ui-react": "^2.8.0",
-    "@smwb/ui-styles": "^1.6.0",
+    "@smwb/ui-react": "^2.9.0",
+    "@smwb/ui-styles": "^2.0.0",
     "glob": "^13.0.6",
     "typescript": "^6.0.3",
     "vitest": "^2.1.9"