@smwb/ui-mcp-react 2.10.0 → 2.12.0

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

@@ -29,7 +29,7 @@
     "src": {
       "type": "string",
       "required": false,
-      "description": "Image source. Falls back to children (initials / icon) on error or when absent."
+      "description": "Image source. Falls back to children (initials / icon) on error or when absent. While the image is shown the\navatar paints no background under it, so a transparent PNG/SVG shows what is behind the avatar."
     },
     "alt": {
       "type": "string",
@@ -49,7 +49,7 @@
     "color": {
       "type": "string",
       "required": false,
-      "description": "Background color for the fallback (initials / icon)."
+      "description": "Background color for the fallback (initials / icon); not painted under an image."
     },
     "imgProps": {
       "type": "ImgHTMLAttributes<HTMLImageElement>",

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

@@ -1,6 +1,6 @@
 {
   "name": "Chart",
-  "description": "An ECharts chart in the theme's palette (import from @smwb/ui-react/chart; echarts is an optional peer): option or option(palette), lazy-loaded ECharts or your own loader, a skeleton until it draws, redrawn on theme switches and resizes (not at zero size).",
+  "description": "An ECharts chart in the theme's palette (import from @smwb/ui-react/chart, which loads the whole of echarts unless you pass a loader, or from @smwb/ui-react/chart/core, where loader is required and the whole of echarts is never bundled; echarts is an optional peer): option or option(palette), lazy-loaded ECharts or your own loader (a module built on echarts/core), a skeleton until it draws, redrawn on theme switches and resizes (not at zero size).",
   "ssr": {
     "safe": true,
     "rendering": "universal",
@@ -52,7 +52,7 @@
     "loader": {
       "type": "() => Promise<ChartModule>",
       "required": false,
-      "description": "Loads ECharts in the browser: `import(\"echarts\")` by default, the whole\nlibrary. For a smaller bundle pass `() => import(\"./my-echarts\")`, a module\nthat registers only the charts you use with `echarts/core`."
+      "description": "Loads ECharts in the browser. Optional in `@smwb/ui-react/chart`, where\n`import(\"echarts\")` — the whole library — is the default; required in\n`@smwb/ui-react/chart/core`, which has no default and so never puts the\nwhole library in your bundle. For a smaller bundle pass\n`() => import(\"./my-echarts\")`, a module that registers only the charts\nyou use with `echarts/core`."
     },
     "renderer": {
       "type": "\"canvas\" | \"svg\"",

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

@@ -66,6 +66,21 @@
       "required": false,
       "description": "The bar only; the text stays available to assistive technology."
     },
+    "textPosition": {
+      "type": "MeterTextPosition",
+      "required": false,
+      "description": "Where the text sits against the bar: `after` it (the default) or `before` it."
+    },
+    "size": {
+      "type": "MeterSize",
+      "required": false,
+      "description": "`compact`: a fixed-width bar and small secondary text, and the block shrinks to its\ncontent instead of filling the parent. `medium` (the default) fills the parent."
+    },
+    "aria-valuetext": {
+      "type": "string",
+      "required": false,
+      "description": "What assistive technology reads as the value, e.g. the text you format for the\neye (\"$4.18 / $20\"); \"X of Y\" built from `value`, `ofLabel` and `max` unless given."
+    },
     "data-testid": {
       "type": "string",
       "required": false,

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

@@ -1,6 +1,6 @@
 {
   "name": "StatusDot",
-  "description": "Small status marker dot coloured by status or theme colour, with a pulse for active (role=img).",
+  "description": "Small status marker, a dot or a diamond, coloured by status or theme colour, with a pulse for active (role=img).",
   "ssr": {
     "safe": true,
     "rendering": "universal"
@@ -41,6 +41,11 @@
       "required": false,
       "description": "`md` (12px) unless given; `sm` is 8px."
     },
+    "shape": {
+      "type": "StatusDotShape | undefined",
+      "required": false,
+      "description": "The marker's outline, `dot` unless given: `diamond` turns the same square corner-up. The shape is the caller's\nchoice, not the status's — a diamond takes its colour from `color` or `status`, its size from `size` and its\npulse from `pulse` exactly as the dot does, so `unknown` is a ring and `active` pulses in either shape. Its box\nis the box of a dot of the same `size`, so the two swap places without moving a row."
+    },
     "pulse": {
       "type": "boolean | undefined",
       "required": false,

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

@@ -24,14 +24,24 @@
   },
   "props": {
     "nodeIcon": {
-      "type": "{ opened?: string; closed?: string; }",
+      "type": "{ opened?: string; closed?: string } | false",
       "required": false,
-      "description": "Node Icon. Optional. Type: { opened?: string; closed?: string; }."
+      "description": "Icons of the nodes that have children, by state; `{ closed: \"folder\", opened: \"folder_open\" }` unless given.\n`false` draws none, and the label starts where the icon did."
     },
     "listIcon": {
-      "type": "string",
+      "type": "string | false",
+      "required": false,
+      "description": "Icon of a node without children; \"draft\" unless given. `false` draws none."
+    },
+    "dense": {
+      "type": "boolean",
+      "required": false,
+      "description": "Compact look: the row is as tall as the small control (`--smui-control-h-sm`, 32px) instead of the medium one\n(40px), and a level steps 16px (`@treeViewIndentDense`) instead of 40px. A tree with `--smwb-tree-row-h` or\n`--smwb-tree-indent` set on it (the `style` prop) takes those values, e.g. a 26px row."
+    },
+    "guides": {
+      "type": "boolean",
       "required": false,
-      "description": "List Icon. Optional. Type: string."
+      "description": "Whether the vertical lines and corners that join a node to its parent are drawn. They are by default; turning\nthem off leaves the levels where they were."
     },
     "data": {
       "type": "ITreeNodeItem[]",

package/component-meta/feedBack/tooltip/tooltip.json

@@ -46,7 +46,7 @@
     "trigger": {
       "type": "TooltipTrigger",
       "required": false,
-      "description": "What shows the tooltip. `hover` (default): the pointer over the target or keyboard focus\nin it, until both have left. Keyboard focus is focus with a focus ring (`:focus-visible`),\nnot the focus a mouse press gives a button. `click`: a click on the target shows or hides\nit. `manual`: `open` alone. Escape hides a `hover` or `click` tooltip."
+      "description": "What shows the tooltip. `hover` (default): the pointer over the target or keyboard focus\nin it, until both have left. Keyboard focus is focus with a focus ring (`:focus-visible`),\nnot the focus a mouse press gives a button. `click`: a click on the target shows or hides\nit. `manual`: `open` alone. `auto`: `hover` where the primary pointer is precise (a mouse), and\na tap on the target where it is coarse (`(pointer: coarse)`, a touch screen), which also hides on\na press outside the target. Escape hides a `hover`, `click` or `auto` tooltip."
     },
     "openDelay": {
       "type": "number",

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

@@ -44,6 +44,11 @@
       "required": false,
       "description": "Icon node or image source."
     },
+    "iconOnly": {
+      "type": "boolean",
+      "required": false,
+      "description": "Icon-only button: a square of its size's control height (`--smui-control-h-sm/md/lg`), with no `min-width` and no padding. Works for every `variant` and for a link (`href`). It has no text, so its name comes from `aria-label` (or `aria-labelledby`); without one the component warns in the console. Apart from `fullWidth`: a square does not stretch."
+    },
     "iconProps": {
       "type": "Omit<IconProps, \"name\">",
       "required": false,

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

@@ -89,6 +89,11 @@
       "type": "boolean",
       "required": false,
       "description": "Whether the control is in an error state."
+    },
+    "compact": {
+      "type": "boolean",
+      "required": false,
+      "description": "A compact look for a status row or a toolbar: the label shares the line with the switch (\"top\", the default,\ncounts as \"left\"), no line is kept for helper text unless `helperText` is set, and the row is the theme's small\ncontrol height, at most 28px. The default look is unchanged."
     }
   }
 }

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

@@ -81,7 +81,7 @@
     "stickyHeader": {
       "type": "boolean",
       "required": false,
-      "description": "Keep the header pinned while content scrolls."
+      "description": "Keep the header pinned while content scrolls. A pinned header's height is published as `--smui-sheet-offset-top`\non the document element, so a `Sheet` opens below it and leaves it visible and clickable (a `Sheet` with its own\n`offsetTop` ignores it). The height is taken from the top of the window, so the layout is assumed to start\nthere; with several layouts the most recent one wins."
     },
     "className": {
       "type": "string",

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

@@ -51,6 +51,21 @@
       "type": "string",
       "required": false,
       "description": "Accessible label for the resizer handle."
+    },
+    "minSizeFirst": {
+      "type": "number | string",
+      "required": false,
+      "description": "Smallest size of the first pane that dragging and the keyboard (arrows, Home, End) leave it:\na number is pixels, a string is `\"120px\"` or `\"20%\"`; any other unit is ignored. Unset means no minimum."
+    },
+    "minSizeSecond": {
+      "type": "number | string",
+      "required": false,
+      "description": "Smallest size of the second pane, same units as `minSizeFirst`. If both minimums do not fit, the first one wins."
+    },
+    "collapsed": {
+      "type": "\"first\" | \"second\"",
+      "required": false,
+      "description": "Folds one pane to zero and hides the resizer; the other pane takes the whole divider. Both panes stay mounted,\nand clearing it brings back the split the divider had. `onSizeChange` is not called for the fold."
     }
   }
 }

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

@@ -91,6 +91,11 @@
       "required": false,
       "description": "Visual size preset."
     },
+    "offsetTop": {
+      "type": "number | string",
+      "required": false,
+      "description": "Gap between the top edge of the window and the top of the sheet and of its modal scrim (px, or any CSS length),\nso a panel can start below a fixed app bar and leave it visible and clickable. It applies to the `top`, `left`\nand `right` placements and to the scrim of every placement. Without it the sheet takes the page's\n`--smui-sheet-offset-top`, which `AppLayout` sets to the height of its sticky header and which is 0 elsewhere;\n`offsetTop={0}` covers the header anyway. A press in the strip above a modal scrim belongs to the page and does\nnot close the sheet, so a header button can toggle it. The modal sheet keeps `aria-modal`, though that strip can\nstill be reached by pointer and Tab; for a header that must stay available to assistive technology, use\n`variant=\"default\"`."
+    },
     "disableOutsideClick": {
       "type": "boolean",
       "required": false,

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

@@ -77,11 +77,21 @@
       "required": false,
       "description": "Draw each group's actions button and its menu; true by default."
     },
+    "stripActions": {
+      "type": "((group: TabGroupsStripGroup) => React.ReactNode) | undefined",
+      "required": false,
+      "description": "Content at the end of a group's tab row, before the group's actions button: buttons that act on\nthe group (\"new terminal\", \"split\"). Called for every group with `{ index, count, active }`:\nits place from 0, how many groups there are and whether it is the one in use, so the app can\nreturn content for some groups only; `null`, `undefined`, `false` or an empty fragment draws\nnothing, not even a wrapper. A component that renders nothing cannot be told from outside: its\nwrapper is in the DOM, empty, and drawn as nothing (`:empty`); return `null` from the function\ninstead to leave it out. The tabs scroll beside the content while it stays in view; in a header\ntoo narrow for both, the tabs give way first, then the content is clipped at its end, and the\ngroup's actions button stays. It comes after the tabs in the Tab order, and the tab row's arrow\nkeys neither enter it nor read the keys pressed in it.\n\nThe function runs on every render, and React keeps the nodes it returns from one call to the\nnext as usual (the same element types in the same places).\n\nA slot control that has the focus when a change takes it out of the document (a split or a\nclose from the slot, the slot going to the group in use) hands the focus on: to the control at\nthe same place in its group's slot, else in the slot of the group in use (the last one when\nthere are fewer), else to that group's selected tab."
+    },
     "dense": {
       "type": "boolean",
       "required": false,
       "description": "Compact tab rows (`Tabs`' `dense`); false by default."
     },
+    "fit": {
+      "type": "boolean",
+      "required": false,
+      "description": "Content-width tabs (`Tabs`' `fit`); false by default. Each tab is as wide as its marker, label\nand close button, between `--smui-tabFitMinWidth` and `--smui-tabFitMaxWidth`, and what is left\nof the header stays empty: `stripActions` and the group's actions button keep the end of it. A\nlong label is cut with an ellipsis and shows its text as a tooltip: a string label is its own,\nand the tab's `title` is the tooltip of a label that is not a string."
+    },
     "labels": {
       "type": "Partial<TabGroupsLabels> | undefined",
       "required": false,

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

@@ -54,7 +54,7 @@
     "midContent": {
       "type": "React.ReactNode",
       "required": false,
-      "description": "Mid Content. Optional. Type: React.ReactNode."
+      "description": "Content of the middle area, e.g. a search field. The area takes only the room the title and the right group leave\nfree (`flex: 1 1 0`), so it is the first to narrow when the bar does. A direct child narrows with it (`max-width: 100%`)\nonly as far as its own content can: a control with a minimum width, or a nowrap row of buttons or tabs, keeps it and\nruns under the right group when the title takes the whole bar, so give such content `min-width: 0` or let it shrink."
     },
     "rightContent": {
       "type": "React.ReactNode",
@@ -64,7 +64,7 @@
     "title": {
       "type": "React.ReactNode | string",
       "required": false,
-      "description": "Accessible title or tooltip text."
+      "description": "Title in the left group. It keeps its content size while the middle area has room to give up; when the bar is\nnarrower than the title and the right group together, a text title is cut with an ellipsis and the right group stays\ninside the bar. The cut leaves a margin for a focus ring (`overflow: clip`), so a link or a button in the title keeps\nits ring."
     },
     "titleAs": {
       "type": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",

package/component-meta/navigation/bottomBar/bottomBar.bottomBarMenuItem.json

@@ -19,5 +19,11 @@
     "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/bottomBar/bottomBar.entry.less\";"
   },
-  "props": {}
+  "props": {
+    "badge": {
+      "type": "number | string",
+      "required": false,
+      "description": "A count (or a short text) drawn as a `Badge` at the item's icon, or after the title when the item has no icon.\n`0`, `\"0\"`, an empty string and `undefined` draw nothing. The item's accessible name reads `\"<title> <badge>\"`."
+    }
+  }
 }

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

@@ -18,12 +18,13 @@
       "@smwb/ui-styles/less/components/bottomBar/bottomBar.entry.less"
     ],
     "dependencies": [
+      "@smwb/ui-styles/less/components/badge/badge.entry.less",
       "@smwb/ui-styles/less/components/icon/icon.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/sidebar/sidebar.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/bottomBar/bottomBar.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/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/sidebar/sidebar.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/bottomBar/bottomBar.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/badge/badge.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/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/sidebar/sidebar.entry.less\";"
   },
   "props": {
     "className": {
@@ -32,9 +33,9 @@
       "description": "Additional CSS class name(s) for the root element."
     },
     "menuItems": {
-      "type": "SidebarMenuItemProps[]",
+      "type": "BottomBarMenuItemProps[]",
       "required": false,
-      "description": "Menu Items. Optional. Type: SidebarMenuItemProps[]."
+      "description": "Menu Items. Optional. Type: BottomBarMenuItemProps[]."
     },
     "visibleCount": {
       "type": "number",

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

@@ -61,6 +61,11 @@
       "required": false,
       "description": "Accessible label for the expand button."
     },
+    "noWrap": {
+      "type": "boolean",
+      "required": false,
+      "description": "Keep the trail on one line: the crumbs do not wrap, they shrink and cut their text with an ellipsis, the last one\ngiving way last, and a cut crumb shows its full text as a `title` on hover. Plain text and a block child (a heading,\n`Typography`) are cut with an ellipsis; a crumb laid out as a row (an icon with a label, say) is clipped as far as\nits own layout allows. A leading crumb is never narrower than `@breadcrumbsLeadingMinWidth`, so a one- or\ntwo-letter one takes that width even when everything fits, and the last one is never narrower than\n`@breadcrumbsLastMinWidth`: in a box smaller than those floors the trail runs past it instead of shrinking further."
+    },
     "data-testid": {
       "type": "string",
       "required": false,

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

@@ -19,9 +19,10 @@
     ],
     "dependencies": [
       "@smwb/ui-styles/less/components/icon/icon.entry.less",
-      "@smwb/ui-styles/less/components/ripple/ripple.entry.less"
+      "@smwb/ui-styles/less/components/ripple/ripple.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/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\";"
+    "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\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/tabs/tabs.entry.less\";"
   },
   "props": {
     "label": {

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

@@ -84,6 +84,11 @@
       "required": false,
       "description": "Compact tabs: a shorter row — `--smui-tabDenseHeight` (36px) — with labels as written (no\ncapitals, no letter spacing) and less padding."
     },
+    "fit": {
+      "type": "boolean",
+      "required": false,
+      "description": "Content-width tabs: each tab is as wide as what it holds (marker, label, close button) and the\nrow does not stretch them, so what is left of the row stays empty; a plain row shares its whole\nwidth between its tabs. A tab stays between `--smui-tabFitMinWidth` (80px) and\n`--smui-tabFitMaxWidth` (256px), set in the theme; a longer label is cut with an ellipsis, and a\nstring `label` is also the label's `title`, so the full text shows on hover (a `Tab` whose label\nis not a string takes a `title` of its own, which is the tooltip of the whole tab). The indicator, `scrollable`, `scrollButtons`, the\noverflow menu and the close button need nothing more. Dropping a dragged tab on the row's empty\npart does nothing."
+    },
     "scrollBackAriaLabel": {
       "type": "string",
       "required": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-mcp-react",
-  "version": "2.10.0",
+  "version": "2.12.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.10.0",
-    "@smwb/ui-styles": "^2.1.0",
+    "@smwb/ui-react": "^2.12.0",
+    "@smwb/ui-styles": "^2.3.0",
     "glob": "^13.0.6",
     "typescript": "^6.0.3",
     "vitest": "^2.1.9"