@smwb/ui-mcp-solid 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 - Summerweb LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,56 @@
+# @smwb/ui-mcp-solid
+
+A [Model Context Protocol](https://modelcontextprotocol.io/) (MCP) **stdio server** that exposes the
+[`@smwb/ui-solid`](https://www.npmjs.com/package/@smwb/ui-solid) component catalog and customization
+guide to AI coding assistants (Cursor, Claude Desktop/Code, Copilot, …).
+
+![license](https://img.shields.io/badge/license-MIT-blue.svg)
+
+## Tools
+
+| Tool | Purpose |
+| --- | --- |
+| `search_components` | Find components by name, id, description, or prop keywords |
+| `get_component_props` | Full metadata for one component: props (types, required, descriptions) + required LESS imports (`styles.base` / `styles.entries` / `styles.dependencies` / `styles.importExample`) |
+| `search_customization` | Global theming options and per-component customization approaches |
+| `get_customization` | What and how to customize a component or a global topic |
+
+## Run
+
+```sh
+npx -y @smwb/ui-mcp-solid
+```
+
+Communicates over **stdio** only (no HTTP port); startup log goes to stderr.
+
+### Cursor (`.cursor/mcp.json`) / Claude Desktop config
+
+```json
+{
+  "mcpServers": {
+    "smwb-ui-solid": {
+      "command": "npx",
+      "args": ["-y", "@smwb/ui-mcp-solid"]
+    }
+  }
+}
+```
+
+## Example flow
+
+1. `search_components` → `{ "query": "text field", "limit": 5 }`
+2. `get_component_props` → `{ "nameOrId": "TextField" }` (or id `inputs/textField/textField`) —
+   read `styles.entries` / `styles.dependencies` / `styles.importExample` for a minimal LESS bundle
+3. `get_customization` → `{ "nameOrId": "Button" }` or `{ "nameOrId": "global/runtime-css" }`
+
+Component ids follow the metadata path, e.g. `dataDisplay/chat/chat`.
+
+## How the catalog is built
+
+Component metadata is generated from the `@smwb/ui-solid` TypeScript prop interfaces
+(`npm run build:meta`) and shipped inside this package under `component-meta/`. LESS import hints
+reference [`@smwb/ui-styles`](https://www.npmjs.com/package/@smwb/ui-styles).
+
+## License
+
+[MIT](./LICENSE)

package/component-meta/base/animateHeight/animateHeight.json

@@ -0,0 +1,74 @@
+{
+  "name": "AnimateHeight",
+  "description": "Animated height transition wrapper for expandable content.",
+  "extends": [
+    "JSX.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": [],
+    "dependencies": [],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";"
+  },
+  "props": {
+    "animateOpacity": {
+      "type": "boolean",
+      "required": false,
+      "description": "Animate Opacity. Optional. Type: boolean."
+    },
+    "animationStateClasses": {
+      "type": "Partial<AnimationStateClasses>",
+      "required": false,
+      "description": "Animation State Classes. Optional. Type: Partial<AnimationStateClasses>."
+    },
+    "applyInlineTransitions": {
+      "type": "boolean",
+      "required": false,
+      "description": "Apply Inline Transitions. Optional. Type: boolean."
+    },
+    "contentClassName": {
+      "type": "string",
+      "required": false,
+      "description": "CSS class name for the main content area."
+    },
+    "delay": {
+      "type": "number",
+      "required": false,
+      "description": "Delay. Optional. Type: number."
+    },
+    "duration": {
+      "type": "number",
+      "required": false,
+      "description": "Duration. Optional. Type: number."
+    },
+    "easing": {
+      "type": "string",
+      "required": false,
+      "description": "Easing. Optional. Type: string."
+    },
+    "height": {
+      "type": "Height",
+      "required": true,
+      "description": "Height of the skeleton placeholder."
+    },
+    "onHeightAnimationEnd": {
+      "type": "(newHeight: Height) => void",
+      "required": false,
+      "description": "On Height Animation End. Optional. Type: (newHeight: Height) => void."
+    },
+    "onHeightAnimationStart": {
+      "type": "(newHeight: Height) => void",
+      "required": false,
+      "description": "On Height Animation Start. Optional. Type: (newHeight: Height) => void."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

package/component-meta/base/icon/icon.json

@@ -0,0 +1,61 @@
+{
+  "name": "Icon",
+  "description": "Material Symbols icon wrapper with size, weight, fill, and semantic color tokens.",
+  "extends": [
+    "JSX.HTMLAttributes<HTMLSpanElement>"
+  ],
+  "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/icon/icon.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/icon/icon.entry.less\";"
+  },
+  "props": {
+    "name": {
+      "type": "string",
+      "required": true,
+      "description": "Icon name from https://fonts.google.com/icons\nExample: name={\"arrow_right_alt\"}\n/"
+    },
+    "weight": {
+      "type": "number",
+      "required": false,
+      "description": "Weight. Optional. Type: number."
+    },
+    "fill": {
+      "type": "0 | 1",
+      "required": false,
+      "description": "Fill. Optional. Type: 0 | 1."
+    },
+    "size": {
+      "type": "number | string",
+      "required": false,
+      "description": "Pixel number or any CSS length (e.g. \"1.5rem\")."
+    },
+    "grade": {
+      "type": "number",
+      "required": false,
+      "description": "Grade. Optional. Type: number."
+    },
+    "color": {
+      "type": "IconColor | (string & {})",
+      "required": false,
+      "description": "Semantic color token; `inherit` (default) keeps the text color. Any string\nis accepted for backward compatibility, but only known {\ntokens emit a color class.\n/"
+    },
+    "title": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible name. When provided the icon is exposed as `role=\"img\"`;\notherwise it is `aria-hidden` (decorative).\n/"
+    },
+    "ref": {
+      "type": "Ref<HTMLSpanElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLSpanElement>."
+    }
+  }
+}

package/component-meta/base/ripple/ripple.json

@@ -0,0 +1,51 @@
+{
+  "name": "Ripple",
+  "description": "Material-style ripple touch feedback container.",
+  "extends": [
+    "JSX.HTMLAttributes<HTMLSpanElement>"
+  ],
+  "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/ripple/ripple.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/ripple/ripple.entry.less\";"
+  },
+  "props": {
+    "actionRef": {
+      "type": "(actions: RippleActionsRef) => void",
+      "required": false,
+      "description": "Receives the imperative API once on mount."
+    },
+    "classes": {
+      "type": "RippleClasses",
+      "required": false,
+      "description": "Classes. Optional. Type: RippleClasses."
+    },
+    "center": {
+      "type": "boolean | undefined",
+      "required": false,
+      "description": "Center. Optional. Type: boolean | undefined."
+    },
+    "duration": {
+      "type": "number",
+      "required": false,
+      "description": "Ripple lifetime in ms."
+    },
+    "color": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Ripple color (any CSS color). Defaults to inherited currentColor."
+    },
+    "ref": {
+      "type": "Ref<HTMLSpanElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLSpanElement>."
+    }
+  }
+}

package/component-meta/clickAwayListener/clickAwayListener.json

@@ -0,0 +1,40 @@
+{
+  "name": "ClickAwayListener",
+  "description": "Detects pointer events outside its child and invokes a callback.",
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [],
+    "dependencies": [],
+    "importExample": "@import (less) \"node_modules/@smwb/ui-styles/less/foundation.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/theme.less\";"
+  },
+  "props": {
+    "children": {
+      "type": "JSX.Element",
+      "required": true,
+      "description": "Child nodes rendered inside the component."
+    },
+    "mouseEvent": {
+      "type": "ClickAwayMouseEventHandler | false",
+      "required": false,
+      "description": "Mouse Event. Optional. Type: ClickAwayMouseEventHandler | false."
+    },
+    "onClickAway": {
+      "type": "(event: MouseEvent | TouchEvent) => void",
+      "required": true,
+      "description": "On Click Away. Required. Type: (event: MouseEvent | TouchEvent) => void."
+    },
+    "touchEvent": {
+      "type": "ClickAwayTouchEventHandler | false",
+      "required": false,
+      "description": "Touch Event. Optional. Type: ClickAwayTouchEventHandler | false."
+    },
+    "enabled": {
+      "type": "boolean",
+      "required": false,
+      "description": "When false, the listener is inert without unmounting the child."
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+{
+  "name": "Accordion",
+  "description": "Expandable panel with a clickable header and collapsible body.",
+  "styles": {
+    "base": [
+      "@smwb/ui-styles/less/foundation.less",
+      "@smwb/ui-styles/less/theme.less"
+    ],
+    "entries": [
+      "@smwb/ui-styles/less/components/accordion/accordion.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/accordion/accordion.entry.less\";\n@import (less) \"node_modules/@smwb/ui-styles/less/components/icon/icon.entry.less\";"
+  },
+  "props": {
+    "class": {
+      "type": "string",
+      "required": false,
+      "description": "Class. Optional. Type: string."
+    },
+    "title": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible title or tooltip text."
+    },
+    "isOpenByDefault": {
+      "type": "boolean",
+      "required": false,
+      "description": "Is Open By Default. Optional. Type: boolean."
+    },
+    "open": {
+      "type": "boolean",
+      "required": false,
+      "description": "Controlled open state. When set, the component is controlled."
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false,
+      "description": "Disable toggling."
+    },
+    "icon": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "Custom expand icon (replaces the default chevron)."
+    },
+    "id": {
+      "type": "string",
+      "required": false,
+      "description": "Unique identifier for the root element."
+    },
+    "startAdornment": {
+      "type": "(isOpen: boolean) => JSX.Element",
+      "required": false,
+      "description": "Start Adornment. Optional. Type: (isOpen: boolean) => JSX.Element."
+    },
+    "noIcon": {
+      "type": "boolean",
+      "required": false,
+      "description": "No Icon. Optional. Type: boolean."
+    },
+    "onToggleClick": {
+      "type": "(e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void",
+      "required": false,
+      "description": "On Toggle Click. Optional. Type: (e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void."
+    },
+    "onChange": {
+      "type": "(open: boolean) => void",
+      "required": false,
+      "description": "Fired with the next open state on toggle."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+{
+  "name": "AvatarGroup",
+  "description": "Cluster of overlapping avatars with optional surplus counter.",
+  "extends": [
+    "JSX.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/avatar/avatar.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/avatar/avatar.entry.less\";"
+  },
+  "props": {
+    "max": {
+      "type": "number",
+      "required": false,
+      "description": "Maximum avatars to show before collapsing the rest into a \"+N\" surplus."
+    },
+    "total": {
+      "type": "number",
+      "required": false,
+      "description": "Override the total count used for the surplus label (defaults to children count)."
+    },
+    "onSurplusClick": {
+      "type": "() => void",
+      "required": false,
+      "description": "Click handler for the \"+N\" surplus chip."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "Avatar",
+  "description": "User avatar displaying an image or initials fallback.",
+  "extends": [
+    "JSX.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/avatar/avatar.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/avatar/avatar.entry.less\";"
+  },
+  "props": {
+    "src": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Image source. Falls back to children (initials / icon) on error or when absent."
+    },
+    "alt": {
+      "type": "string | undefined",
+      "required": false,
+      "description": "Alternative text for images or icons."
+    },
+    "size": {
+      "type": "AvatarSize | number",
+      "required": false,
+      "description": "Preset size or an explicit pixel value."
+    },
+    "variant": {
+      "type": "\"circular\" | \"rounded\" | \"square\"",
+      "required": false,
+      "description": "Visual style variant."
+    },
+    "color": {
+      "type": "string",
+      "required": false,
+      "description": "Background color for the fallback (initials / icon)."
+    },
+    "imgProps": {
+      "type": "JSX.ImgHTMLAttributes<HTMLImageElement>",
+      "required": false,
+      "description": "Extra attributes forwarded to the underlying <img> (srcSet, loading…)."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+{
+  "name": "Badge",
+  "description": "Small status or count indicator overlay.",
+  "extends": [
+    "JSX.HTMLAttributes<HTMLSpanElement>"
+  ],
+  "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/badge/badge.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/badge/badge.entry.less\";"
+  },
+  "props": {
+    "badgeContent": {
+      "type": "JSX.Element | number | string",
+      "required": false,
+      "description": "Badge Content. Optional. Type: JSX.Element | number | string."
+    },
+    "color": {
+      "type": "\"primary\" | \"success\" | \"danger\"",
+      "required": false,
+      "description": "Semantic color token."
+    },
+    "variant": {
+      "type": "\"inside\" | \"outside\"",
+      "required": false,
+      "description": "Visual style variant."
+    },
+    "vertical": {
+      "type": "\"top\" | \"bottom\"",
+      "required": false,
+      "description": "Vertical. Optional. Type: \"top\" | \"bottom\"."
+    },
+    "horizontal": {
+      "type": "\"right\" | \"left\"",
+      "required": false,
+      "description": "Horizontal. Optional. Type: \"right\" | \"left\"."
+    },
+    "max": {
+      "type": "number",
+      "required": false,
+      "description": "Cap numeric content, rendering `{max}+` when exceeded."
+    },
+    "showZero": {
+      "type": "boolean",
+      "required": false,
+      "description": "Render the badge even when content is 0."
+    },
+    "badgeAriaLabel": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible label for the badge value."
+    },
+    "ref": {
+      "type": "Ref<HTMLSpanElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLSpanElement>."
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+{
+  "name": "Card",
+  "description": "Surface container with optional header, footer, and click handling.",
+  "extends": [
+    "JSX.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/card/card.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/card/card.entry.less\";"
+  },
+  "props": {
+    "variant": {
+      "type": "\"filled\" | \"elevated\" | \"outlined\"",
+      "required": false,
+      "description": "Visual style variant."
+    },
+    "disabled": {
+      "type": "boolean",
+      "required": false,
+      "description": "Whether the control is disabled and non-interactive."
+    },
+    "title": {
+      "type": "string",
+      "required": false,
+      "description": "Accessible title or tooltip text."
+    },
+    "footer": {
+      "type": "JSX.Element",
+      "required": false,
+      "description": "Footer slot rendered after the content."
+    },
+    "ref": {
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "description": "Ref. Optional. Type: Ref<HTMLDivElement>."
+    }
+  }
+}