@smwb/ui-mcp-react 2.8.0 → 2.10.0

package/component-meta/dataDisplay/swimlanes/swimlanes.json

@@ -0,0 +1,90 @@
+{
+  "name": "Swimlanes",
+  "description": "Participant lanes: a virtualised grid (role=grid) with one row per lane, a fixed rowheader column (avatar, name, role) and a content cell that scrolls sideways; fixed rowHeight, single selection (selectedId/defaultSelectedId/onSelectedChange), arrow/Home/End/Page keys with one Tab stop.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\" | \"role\" | \"children\">"
+  ],
+  "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/swimlanes/swimlanes.entry.less"
+    ],
+    "dependencies": [],
+    "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/swimlanes/swimlanes.entry.less\";"
+  },
+  "props": {
+    "lanes": {
+      "type": "readonly SwimlanesLane[]",
+      "required": true,
+      "description": "The lanes, one row each, in the order they are drawn."
+    },
+    "label": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Accessible name of the grid (aria-label); `aria-labelledby` wins when given."
+    },
+    "selectedId": {
+      "type": "string | null | undefined",
+      "required": false,
+      "description": "The selected lane's id (controlled); null selects nothing."
+    },
+    "defaultSelectedId": {
+      "type": "string | null | undefined",
+      "required": false,
+      "description": "The lane selected at first (uncontrolled)."
+    },
+    "onSelectedChange": {
+      "type": "((id: string | null) => void) | undefined",
+      "required": false,
+      "description": "A lane was selected (its id) or the selection was cleared (null)."
+    },
+    "selectable": {
+      "type": "boolean | undefined",
+      "required": false,
+      "description": "Whether lanes can be selected; true by default. False: no aria-selected, no selected look,\nand Enter, Space, Escape and a click select nothing; a `selectedId` given anyway is ignored."
+    },
+    "rowHeight": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "Row height in px (every lane is this tall; virtualisation needs a fixed height). 64 by default."
+    },
+    "headerWidth": {
+      "type": "number | string | undefined",
+      "required": false,
+      "description": "Width of the fixed header column: px or any CSS length; 240px by default from the stylesheet."
+    },
+    "contentMinWidth": {
+      "type": "number | string | undefined",
+      "required": false,
+      "description": "Narrowest width of the content column; when the grid is narrower, it scrolls sideways. 0 by default."
+    },
+    "height": {
+      "type": "number | string | undefined",
+      "required": false,
+      "description": "The grid's height (the scroller): a number of pixels or any CSS length; 480\nby default, from the stylesheet, so a height in `style` works too."
+    },
+    "overscan": {
+      "type": "number | undefined",
+      "required": false,
+      "description": "Lanes rendered above and below the visible ones. 4 by default."
+    },
+    "emptyLabel": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "Shown instead of the grid when `lanes` is empty."
+    },
+    "data-testid": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Test id of the root `<div>`; `swimlanes` unless given."
+    }
+  }
+}

package/component-meta/dataDisplay/treeView/treeView.json

@@ -71,18 +71,33 @@
     "selectable": {
       "type": "boolean",
       "required": false,
-      "description": "Enables label click selection."
+      "description": "Enables row selection: a click, Enter or Space on a row toggles its selection. The chevron and the\nLeft/Right keys never change it."
     },
     "checkboxes": {
       "type": "boolean",
       "required": false,
       "description": "Renders a checkbox per node bound to selection."
     },
+    "toggleOnRowClick": {
+      "type": "boolean",
+      "required": false,
+      "description": "Whether a click, Enter or Space on a row also expands or collapses its children. The chevron and the\nRight/Left keys always do. Defaults to `true` while the tree is not `selectable` (a row has nothing else to\ndo) and to `false` otherwise, so that selecting a row leaves it open or closed."
+    },
     "renderLabel": {
       "type": "(item: ITreeNodeItem, nodeId: string) => ReactNode",
       "required": false,
       "description": "Custom node renderer."
     },
+    "renderActions": {
+      "type": "(item: ITreeNodeItem, nodeId: string) => ReactNode",
+      "required": false,
+      "description": "Per-node actions (buttons, a menu trigger), drawn at the end of the row. They sit beside the row's\nbutton, not inside it, so they take their own clicks, Enter and Space, focus and accessible names."
+    },
+    "loadingText": {
+      "type": "string",
+      "required": false,
+      "description": "Text shown while `loadChildren` is pending; \"Loading…\" unless given."
+    },
     "loadChildren": {
       "type": "(item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>",
       "required": false,

package/component-meta/inputs/button/button.json

@@ -64,6 +64,16 @@
       "required": false,
       "description": "Link URL when rendered as an anchor."
     },
+    "target": {
+      "type": "string | null",
+      "required": false,
+      "description": "Where a link (with `href`) opens. By default `\"_blank\"`: a new tab. `null` leaves the `target`\nattribute out, so the link opens in place, like an internal one; an empty string does the same, and\nany other string is used as is."
+    },
+    "rel": {
+      "type": "string",
+      "required": false,
+      "description": "The `rel` of a link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or\nwindow, and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\nif you still want it; an empty string drops the attribute."
+    },
     "disabled": {
       "type": "boolean",
       "required": false,

package/component-meta/inputs/composer/composer.json

@@ -0,0 +1,222 @@
+{
+  "name": "Composer",
+  "description": "A task input: a multi-line field that grows from minRows to maxRows, a toolbar slot under it for chip selectors, a send button that becomes Stop while busy, keyboard send (Ctrl/⌘+Enter by default), optional attach button and drop target, and a character counter.",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal"
+  },
+  "extends": [
+    "Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\" | \"onKeyDown\" | \"onFocus\" | \"onBlur\" | \"children\"\n>"
+  ],
+  "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/composer/composer.entry.less"
+    ],
+    "dependencies": [
+      "@smwb/ui-styles/less/components/icon/icon.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/composer/composer.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";"
+  },
+  "props": {
+    "value": {
+      "type": "string",
+      "required": false,
+      "description": "Controlled text. The composer is controlled while this is not `undefined` (checked on every render); a parent\nthat ignores `onValueChange` keeps the field showing this value."
+    },
+    "defaultValue": {
+      "type": "string",
+      "required": false,
+      "description": "Initial text while uncontrolled. Defaults to an empty string."
+    },
+    "onValueChange": {
+      "type": "(value: string) => void",
+      "required": false,
+      "description": "Called on every text change: typing, a newline, and the clear after a send. Called in both modes."
+    },
+    "onSend": {
+      "type": "(text: string) => void",
+      "required": false,
+      "description": "Called with the trimmed text when the user sends it: the send key (see `sendKey`) or a click on the action\nbutton. Nothing is called while sending is not allowed: no `onSend`, an empty or whitespace-only text, `disabled`,\n`readOnly`, `busy`, or a text over `maxLength`. Async work is shown with `busy`; the return value is ignored."
+    },
+    "sendKey": {
+      "type": "ComposerSendKey",
+      "required": false,
+      "description": "Which Enter sends. `\"modEnter\"` (default): Ctrl/⌘+Enter sends and Enter inserts a newline. `\"enter\"`: Enter sends,\nShift+Enter inserts a newline, Ctrl/⌘+Enter sends too. An Enter that commits an IME composition never sends."
+    },
+    "clearOnSend": {
+      "type": "boolean",
+      "required": false,
+      "description": "Clear the text after `onSend`: the composer's own state while uncontrolled, `onValueChange(\"\")` while controlled.\nDefaults to `true`."
+    },
+    "busy": {
+      "type": "boolean",
+      "required": false,
+      "description": "The agent is working: the action button turns into Stop and calls `onStop`, and the keys and the button do not\nsend. The text stays editable. The composer never changes `busy` itself, the parent owns it."
+    },
+    "onStop": {
+      "type": "() => void",
+      "required": false,
+      "description": "Called when Stop is pressed (click, Enter or Space on the button) while `busy` and not `disabled`. Without it the\nStop button does nothing, so pass it whenever `busy` can be set."
+    },
+    "placeholder": {
+      "type": "string",
+      "required": false,
+      "description": "Placeholder of the textarea. It is not a name for the field, set `aria-label` or `aria-labelledby` as well."
+    },
+    "maxLength": {
+      "type": "number",
+      "required": false,
+      "description": "Hard limit on the text (the native `maxlength` of the textarea, counted in UTF-16 units, so an emoji is 2).\nTurns the counter on."
+    },
+    "counter": {
+      "type": "boolean",
+      "required": false,
+      "description": "Show the counter (`n / maxLength`, or `n` without `maxLength`). Defaults to `true` when `maxLength` is set."
+    },
+    "counterAnnouncement": {
+      "type": "(remaining: number, maxLength: number) => string",
+      "required": false,
+      "description": "Text for the polite status region that announces how many characters are left. It is spoken only near the limit\n(within the larger of 10 characters and 10% of `maxLength`) and when the text is over it, with a negative\n`remaining`. Defaults to \"N characters left\" / \"N characters over the limit\"."
+    },
+    "minRows": {
+      "type": "number",
+      "required": false,
+      "description": "Height of the empty field in rows, and the `rows` of the textarea. Defaults to `1`."
+    },
+    "maxRows": {
+      "type": "number",
+      "required": false,
+      "description": "Rows the field grows to before it scrolls. Clamped to at least `minRows`. Defaults to `8`."
+    },
+    "layout": {
+      "type": "ComposerLayout",
+      "required": false,
+      "description": "`\"stacked\"` (default): the field on top, a bar under it with the attach button, the toolbar, the counter and the\naction. `\"inline\"`: the attach button, the field, the counter and the action in one row, the toolbar (if any)\nin a row under it."
+    },
+    "toolbar": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "Slot under the field for chips and selectors (agent, model, mode, …). Drawn in every state. It is a plain `div`,\nnot `role=\"toolbar\"`: the content brings its own keyboard handling and disabled state."
+    },
+    "attachments": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "Slot above the field for the app's file chips. The composer keeps no file state: the app lists what `onAttach`\ngave it here."
+    },
+    "onAttach": {
+      "type": "(files: File[]) => void",
+      "required": false,
+      "description": "Turns on the attach button, the hidden file input and the drop target (the whole composer). Called with the files\nof a pick or a drop that are left after `accept`, `multiple` and `maxFiles`, never with an empty list. Only a drag\nof files is taken: dragged text or a link still goes into the field."
+    },
+    "accept": {
+      "type": "DropzoneAccept",
+      "required": false,
+      "description": "Accepted file types, as a record of mime type to extensions or a raw `accept` string (`image/*`, `.pdf`, an exact\nmime type). It sets the picker's filter, and the files of a pick or a drop that do not match are left out."
+    },
+    "multiple": {
+      "type": "boolean",
+      "required": false,
+      "description": "Allow several files per pick or drop. When `false` the picker takes one and a drop keeps the first. Defaults to `true`."
+    },
+    "maxFiles": {
+      "type": "number",
+      "required": false,
+      "description": "Files beyond this number are dropped from a pick or a drop (counted after `accept`)."
+    },
+    "dropTarget": {
+      "type": "boolean",
+      "required": false,
+      "description": "Whether `onAttach` also makes the composer a drop target for files. Set `false` when a parent already takes drops\n(a chat panel): the attach button and the picker stay, and a drop on the composer bubbles to the parent untouched.\nDefaults to `true`."
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false,
+      "description": "Disables the textarea, the attach button, the action button and the drop target. Toolbar content is the app's to\ndisable."
+    },
+    "readOnly": {
+      "type": "boolean",
+      "required": false,
+      "description": "The textarea is `readonly`: sending is unavailable, Stop still works."
+    },
+    "autoFocus": {
+      "type": "boolean",
+      "required": false,
+      "description": "Focus the textarea on mount."
+    },
+    "name": {
+      "type": "string",
+      "required": false,
+      "description": "Name of the textarea."
+    },
+    "id": {
+      "type": "string",
+      "required": false,
+      "description": "Id of the textarea (the root keeps no id). Generated when not given."
+    },
+    "aria-label": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the textarea. Set this or `aria-labelledby`: a placeholder is not a name."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "required": false,
+      "description": "Id(s) of the element(s) that name the textarea."
+    },
+    "aria-describedby": {
+      "type": "string",
+      "required": false,
+      "description": "Id(s) that describe the textarea. They come first, the counter's id is appended."
+    },
+    "onKeyDown": {
+      "type": "React.KeyboardEventHandler<HTMLTextAreaElement>",
+      "required": false,
+      "description": "Key handler of the textarea. It runs before the composer's own; if it calls `preventDefault()`, the composer does nothing for that key."
+    },
+    "onFocus": {
+      "type": "React.FocusEventHandler<HTMLTextAreaElement>",
+      "required": false,
+      "description": "Focus handler of the textarea."
+    },
+    "onBlur": {
+      "type": "React.FocusEventHandler<HTMLTextAreaElement>",
+      "required": false,
+      "description": "Blur handler of the textarea."
+    },
+    "inputRef": {
+      "type": "React.Ref<HTMLTextAreaElement>",
+      "required": false,
+      "description": "Ref of the textarea (the root takes the component's own `ref`)."
+    },
+    "sendLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the action button while it sends. Defaults to \"Send\"."
+    },
+    "stopLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the action button while `busy`. Defaults to \"Stop\"."
+    },
+    "attachLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the attach button. Defaults to \"Attach file\"."
+    },
+    "className": {
+      "type": "string",
+      "required": false,
+      "description": "Class name(s) for the root `<div>`. `style`, `ref`, `data-*` attributes and every other HTML attribute or event\nhandler go to the root too; the root's drag handlers run after yours."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root `<div>`. Defaults to `composer`; the parts inside have their own (`composer-input`, `composer-action`, …)."
+    }
+  }
+}

package/component-meta/layout/sheet/sheet.json

@@ -66,6 +66,26 @@
       "required": false,
       "description": "Reverse Header Actions. Optional. Type: boolean."
     },
+    "closeAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the header close button (default \"Close sheet\")."
+    },
+    "expandAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the size toggle while the sheet is at its normal size (default \"Expand sheet\"). The toggle\ncycles normal, expanded, collapsed and back, and its name always says what the next press does; the\nname changing is how it exposes its state. It shows the `open_in_full` icon, and `close_fullscreen` while expanded."
+    },
+    "collapseAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the size toggle while the sheet is expanded (default \"Collapse sheet\")."
+    },
+    "restoreAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name of the size toggle while the sheet is collapsed to its header (default \"Restore sheet size\")."
+    },
     "size": {
       "type": "string",
       "required": false,

package/component-meta/layout/tabGroups/tabGroups.json

@@ -0,0 +1,101 @@
+{
+  "name": "TabGroups",
+  "description": "Tab groups in a split area: move tabs between groups by drag and drop or keyboard, split right or down, resize, close the last tab to close a group; the layout is a versioned JSON (layout/onLayoutChange).",
+  "ssr": {
+    "safe": true,
+    "rendering": "universal",
+    "note": "Renders the groups, tab rows and selected panels on the server; drag and drop and resizing run in the browser."
+  },
+  "extends": [
+    "Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"onChange\">"
+  ],
+  "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/tabGroups/tabGroups.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/menu/menu.entry.less",
+      "@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/tabGroups/tabGroups.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/tabs/tabs.entry.less\";"
+  },
+  "props": {
+    "layout": {
+      "type": "TabGroupsLayout | undefined",
+      "required": false,
+      "description": "The arrangement to draw: the split tree, the tabs of every group and which of them is\nselected. Controlled while it is not `undefined` — the component then draws what it is given\nand an owner that ignores `onLayoutChange` sees nothing move."
+    },
+    "defaultLayout": {
+      "type": "TabGroupsLayout | undefined",
+      "required": false,
+      "description": "The layout of the uncontrolled mode's first render: one empty group by default."
+    },
+    "onLayoutChange": {
+      "type": "((layout: TabGroupsLayout, change: TabGroupsChange) => void) | undefined",
+      "required": false,
+      "description": "Called with the new layout and what changed (`select`, `activate`, `move`, `split`, `close`,\n`resize`) in the controlled and the uncontrolled mode alike. Store the layout here; the\n`change` says which of them are worth writing (an `activate` is a focus move, not an edit)."
+    },
+    "getTab": {
+      "type": "(tabId: string) => TabGroupsTab | undefined",
+      "required": true,
+      "description": "What a tab shows, by its id: `undefined` draws the id as the label."
+    },
+    "renderPanel": {
+      "type": "(tabId: string) => React.ReactNode",
+      "required": true,
+      "description": "The content of a tab's panel, by its id. Called from the first time the tab is selected and\nkept mounted after that, so a panel keeps its state while hidden and while its tab moves."
+    },
+    "onTabClose": {
+      "type": "| ((tabId: string, event: React.SyntheticEvent<HTMLElement>, reason: TabCloseReason) => boolean | void) | undefined",
+      "required": false,
+      "description": "Asked before a tab closes (its close button, Delete or Backspace, a middle press or its\n`actions`), with what asked for it. Return `false` to keep the tab; anything else closes it."
+    },
+    "empty": {
+      "type": "React.ReactNode",
+      "required": false,
+      "description": "Drawn, centred, when nothing is open: the only group has no tabs."
+    },
+    "minGroupSize": {
+      "type": "number",
+      "required": false,
+      "description": "The smallest a group can be resized to, in px of its split; 120 by default."
+    },
+    "keyboardStep": {
+      "type": "number",
+      "required": false,
+      "description": "A separator's arrow-key step, in percent of its split; 5 by default, as `ScreenDivider`."
+    },
+    "groupActions": {
+      "type": "boolean",
+      "required": false,
+      "description": "Draw each group's actions button and its menu; true by default."
+    },
+    "dense": {
+      "type": "boolean",
+      "required": false,
+      "description": "Compact tab rows (`Tabs`' `dense`); false by default."
+    },
+    "labels": {
+      "type": "Partial<TabGroupsLabels> | undefined",
+      "required": false,
+      "description": "The component's texts, to localise them. English by default."
+    },
+    "id": {
+      "type": "string",
+      "required": false,
+      "description": "Base of the generated ids and the root's own id. Generated by default."
+    },
+    "data-testid": {
+      "type": "string",
+      "required": false,
+      "description": "Test id of the root element; \"tab-groups\" by default."
+    }
+  }
+}

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

@@ -66,11 +66,26 @@
       "required": false,
       "description": "Accessible title or tooltip text."
     },
+    "titleAs": {
+      "type": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+      "required": false,
+      "description": "Tag the `title` is rendered in: a `div` (default) or a heading, `h1`–`h6`,\nfor the page's main heading. Only the tag changes — a heading is drawn with\nthe bar's own font size, weight and no margins, so it looks exactly like the\ndiv. The heading's text is the `title` itself, so pass a string or plain\nmarkup rather than a `Typography` heading."
+    },
     "midContentAlign": {
       "type": "\"middle\" | \"left\" | \"right\"",
       "required": false,
       "description": "Mid Content Align. Optional. Type: \"middle\" | \"left\" | \"right\"."
     },
+    "variant": {
+      "type": "\"default\" | \"window\"",
+      "required": false,
+      "description": "`window`: the bar is the title bar of a desktop app window (Electron, Tauri, an installed PWA with Window\nControls Overlay). The bar drags the window; buttons, links, fields and other controls in it stay clickable,\nand room is left for the OS window buttons (`windowControls`). In a plain browser tab it looks like `default`."
+    },
+    "windowControls": {
+      "type": "\"auto\" | \"left\" | \"right\" | \"none\"",
+      "required": false,
+      "description": "With `variant=\"window\"`: where the OS window buttons are, so the bar's content keeps clear of them.\n`auto` (default) takes the area from the shell's `env(titlebar-area-*)` (Window Controls Overlay, Electron\n`titleBarOverlay`) and reserves nothing without it; `left` is macOS (traffic lights, `titleBarStyle: \"hiddenInset\"`),\n`right` is Windows/Linux caption buttons drawn by the OS; `none` reserves nothing. The reserved width is\nthe `--smui-appBarWindowControlsWidth` custom property (64px on the left, 138px on the right by default)."
+    },
     "color": {
       "type": "AppBarColor",
       "required": false,