@aleph-alpha/lib-mcp 1.2.0 → 1.4.0

package/components-meta.json

@@ -1,148 +1,4 @@
 {
-  "UiCompositionPlaceholder": {
-    "description": "Placeholder for composition components (internal development use).",
-    "category": "Compositions",
-    "useCases": [
-      "development placeholder"
-    ],
-    "keywords": [
-      "placeholder",
-      "composition",
-      "internal"
-    ],
-    "related": [],
-    "props": [],
-    "examples": [],
-    "_autoGenerated": true
-  },
-  "UiDataTable": {
-    "description": "A feature-rich data table with sorting, filtering, and pagination. Use for displaying and managing large datasets with interactive features.",
-    "category": "Layout",
-    "useCases": [
-      "data grid",
-      "admin table",
-      "user list",
-      "product catalog",
-      "reports"
-    ],
-    "keywords": [
-      "datatable",
-      "grid",
-      "sorting",
-      "filtering",
-      "pagination",
-      "data",
-      "list",
-      "table"
-    ],
-    "related": [
-      "UiTable"
-    ],
-    "props": [],
-    "examples": [
-      "Basic",
-      "WithSorting",
-      "WithPagination",
-      "WithToolbar",
-      "WithGlobalFilter",
-      "WithRowSelection",
-      "FullExample",
-      "WithCustomEmptyText",
-      "WithCustomEmptySlot",
-      "WithColumnHeader",
-      "WithPageSizeSelector",
-      "WithMinHeightSmallDataset",
-      "WithRowActions",
-      "WithCellFormatting"
-    ],
-    "_autoGenerated": true
-  },
-  "UiDatePicker": {
-    "description": "A date picker combining a button trigger with a popover calendar. Provides an accessible way to select dates or date ranges.",
-    "category": "Form Inputs",
-    "useCases": [
-      "date selection",
-      "booking form",
-      "event picker",
-      "schedule",
-      "deadline"
-    ],
-    "keywords": [
-      "date",
-      "picker",
-      "calendar",
-      "datepicker",
-      "range",
-      "schedule"
-    ],
-    "related": [
-      "UiCalendar",
-      "UiPopover"
-    ],
-    "props": [
-      "class",
-      "open",
-      "mode",
-      "modelValue",
-      "defaultValue",
-      "placeholder",
-      "minValue",
-      "maxValue",
-      "disabled",
-      "readonly",
-      "locale",
-      "weekStartsOn",
-      "numberOfMonths",
-      "weekdayFormat",
-      "fixedWeeks",
-      "layout",
-      "preventDeselect",
-      "calendarLabel",
-      "isDateDisabled",
-      "isDateUnavailable",
-      "dateFormat",
-      "closeOnSelect",
-      "pagedNavigation",
-      "ariaLabel",
-      "rangeSeparator"
-    ],
-    "examples": [
-      "Default",
-      "WithPreselectedDate",
-      "WithMonthYearDropdowns",
-      "WithDateRange",
-      "DisabledWeekends",
-      "GermanLocale",
-      "Disabled",
-      "CustomWidth",
-      "KeepOpenOnSelect",
-      "TwoMonthsView",
-      "FormExample",
-      "RangeMode",
-      "RangeTwoMonths",
-      "RangeWithConstraints",
-      "RangePreselected",
-      "RangeFormExample",
-      "RangeKeepOpen"
-    ],
-    "_autoGenerated": true
-  },
-  "UiPlaceholder": {
-    "description": "Placeholder for foundation components (internal development use).",
-    "category": "Foundations",
-    "useCases": [
-      "development placeholder"
-    ],
-    "keywords": [
-      "placeholder",
-      "foundation",
-      "internal"
-    ],
-    "related": [],
-    "props": [],
-    "examples": [],
-    "_autoGenerated": true
-  },
   "UiAccordion": {
     "description": "Collapsible sections for organizing content. Use for FAQs, settings panels, or any content that benefits from show/hide.",
     "category": "Navigation",
@@ -561,6 +417,41 @@
     ],
     "_autoGenerated": true
   },
+  "UiEmpty": {
+    "description": "A component to display empty states when there is no content to show.",
+    "category": "Feedback",
+    "useCases": [
+      "no data available",
+      "empty list",
+      "empty search results",
+      "no items found"
+    ],
+    "keywords": [
+      "empty",
+      "no data",
+      "placeholder",
+      "blank state",
+      "zero state"
+    ],
+    "related": [
+      "UiSkeleton",
+      "UiSpinner"
+    ],
+    "props": [
+      "title",
+      "description",
+      "icon"
+    ],
+    "examples": [
+      "Default",
+      "TitleOnly",
+      "WithCustomIcon",
+      "WithAction",
+      "WithMultipleActions",
+      "Minimal"
+    ],
+    "_autoGenerated": true
+  },
   "UiField": {
     "description": "A form field wrapper that groups label, input, description, and error messages. Provides consistent layout and accessibility for form controls.",
     "category": "Form Inputs",
@@ -631,8 +522,7 @@
       "name",
       "size",
       "strokeWidth",
-      "ariaLabel",
-      "class"
+      "ariaLabel"
     ],
     "examples": [
       "Default",
@@ -727,6 +617,55 @@
     ],
     "_autoGenerated": true
   },
+  "UiItem": {
+    "description": "A versatile component that you can use to display any content. The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the ItemGroup component to create a list of items.",
+    "category": "Layout",
+    "useCases": [
+      "list item",
+      "menu entry",
+      "settings row",
+      "navigation item",
+      "notification",
+      "user card"
+    ],
+    "keywords": [
+      "item",
+      "list",
+      "row",
+      "entry",
+      "menu",
+      "settings",
+      "navigation",
+      "selectable",
+      "card"
+    ],
+    "related": [
+      "UiCard",
+      "UiButton",
+      "UiListbox"
+    ],
+    "props": [
+      "variant",
+      "size",
+      "asChild"
+    ],
+    "examples": [
+      "Basic",
+      "Variants",
+      "Sizes",
+      "WithIcon",
+      "WithAvatar",
+      "WithImage",
+      "Group",
+      "WithHeaderAndFooter",
+      "AsLink",
+      "TeamMembersList",
+      "NotificationList",
+      "EmptyStateWithInvite",
+      "AllStates"
+    ],
+    "_autoGenerated": true
+  },
   "UiKbd": {
     "description": "A keyboard key indicator component. Use to display keyboard shortcuts, hotkeys, or key combinations in documentation and UI hints.",
     "category": "Feedback",
@@ -828,8 +767,7 @@
       "disabled",
       "selectionBehavior",
       "highlightOnHover",
-      "by",
-      "class"
+      "by"
     ],
     "examples": [
       "Default",
@@ -842,6 +780,41 @@
     ],
     "_autoGenerated": true
   },
+  "UiNavigationMenu": {
+    "description": "A horizontal navigation menu for site-wide navigation. Displays a list of navigation links with optional dropdown content for nested navigation.",
+    "category": "Navigation",
+    "useCases": [
+      "site navigation",
+      "main menu",
+      "header navigation",
+      "mega menu"
+    ],
+    "keywords": [
+      "navigation",
+      "menu",
+      "nav",
+      "header",
+      "links",
+      "dropdown",
+      "mega menu"
+    ],
+    "related": [
+      "UiDropdownMenu",
+      "UiTabs"
+    ],
+    "props": [],
+    "examples": [
+      "Default",
+      "WithLinks",
+      "WithIndicator",
+      "VerticalOrientation",
+      "WithCustomContent",
+      "ControlledState",
+      "KeyboardNavigation",
+      "WithActivePage"
+    ],
+    "_autoGenerated": true
+  },
   "UiPopover": {
     "description": "A floating panel that appears relative to a trigger element. Use for rich content like forms, pickers, or detailed information.",
     "category": "Overlays",
@@ -1062,6 +1035,80 @@
     ],
     "_autoGenerated": true
   },
+  "UiSheet": {
+    "description": "A panel that slides in from the edge of the screen to display supplementary content. Use for forms, filters, detail views, or any content that complements the main screen.",
+    "category": "Overlays",
+    "useCases": [
+      "side panel",
+      "filter panel",
+      "detail view",
+      "settings panel",
+      "form drawer"
+    ],
+    "keywords": [
+      "sheet",
+      "drawer",
+      "panel",
+      "slide",
+      "overlay",
+      "side panel"
+    ],
+    "related": [
+      "UiDrawer",
+      "UiAlertDialog"
+    ],
+    "props": [
+      "open",
+      "defaultOpen",
+      "modal"
+    ],
+    "examples": [
+      "Default",
+      "Controlled",
+      "SideVariants",
+      "NonModal",
+      "WithForm",
+      "LongContent",
+      "OpenByDefault"
+    ],
+    "_autoGenerated": true
+  },
+  "UiSidebar": {
+    "description": "A collapsible sidebar navigation component for application layouts. Use for primary navigation, page hierarchy, and secondary actions in dashboard-style applications.",
+    "category": "Layout",
+    "useCases": [
+      "navigation",
+      "dashboard layout",
+      "app shell",
+      "admin panel",
+      "settings menu"
+    ],
+    "keywords": [
+      "sidebar",
+      "navigation",
+      "menu",
+      "drawer",
+      "collapsible",
+      "layout"
+    ],
+    "related": [
+      "UiDrawer",
+      "UiSheet"
+    ],
+    "props": [
+      "side",
+      "variant",
+      "collapsible"
+    ],
+    "examples": [
+      "Default",
+      "WithSearch",
+      "WithActions",
+      "WithSubmenu",
+      "WithSkeleton"
+    ],
+    "_autoGenerated": true
+  },
   "UiSkeleton": {
     "description": "A placeholder loading state for content. Use to indicate loading state while preserving layout structure.",
     "category": "Feedback",
@@ -1170,6 +1217,37 @@
     ],
     "_autoGenerated": true
   },
+  "UiStepper": {
+    "description": "A step-by-step navigation component for multi-step workflows. Use for wizards, checkout flows, onboarding sequences, or any process with sequential steps.",
+    "category": "Navigation",
+    "useCases": [
+      "wizard",
+      "checkout flow",
+      "onboarding",
+      "multi-step form",
+      "progress tracker"
+    ],
+    "keywords": [
+      "stepper",
+      "steps",
+      "wizard",
+      "progress",
+      "sequential",
+      "workflow",
+      "multi-step"
+    ],
+    "related": [
+      "UiProgress",
+      "UiTabs"
+    ],
+    "props": [],
+    "examples": [
+      "Default",
+      "Horizontal",
+      "Vertical"
+    ],
+    "_autoGenerated": true
+  },
   "UiSwitch": {
     "description": "A toggle switch for on/off states. Use for settings, preferences, or any binary choice that takes effect immediately.",
     "category": "Form Inputs",
@@ -1368,6 +1446,46 @@
     ],
     "_autoGenerated": true
   },
+  "UiToggleGroup": {
+    "description": "A set of two-state buttons that can be toggled on or off. Use for toolbar actions, formatting options, or any grouped toggle selections. This is a discriminated union type keyed by `type`: - `type: 'single'` → `modelValue` is `string` - `type: 'multiple'` → `modelValue` is `string[]`",
+    "category": "Form Inputs",
+    "useCases": [
+      "toolbar buttons",
+      "text formatting",
+      "view options",
+      "filter toggles"
+    ],
+    "keywords": [
+      "toggle",
+      "group",
+      "button",
+      "pressed",
+      "on",
+      "off",
+      "state",
+      "multiple",
+      "single"
+    ],
+    "related": [
+      "UiToggle",
+      "UiButton",
+      "UiRadioGroup"
+    ],
+    "props": [],
+    "examples": [
+      "Default",
+      "Outline",
+      "Single",
+      "Small",
+      "Large",
+      "Disabled",
+      "WithText",
+      "ViewToggle",
+      "IndividualDisabled",
+      "AllStates"
+    ],
+    "_autoGenerated": true
+  },
   "UiTooltip": {
     "description": "A popup that displays information on hover or focus. Use for explaining icons, providing hints, or showing additional context.",
     "category": "Overlays",
@@ -1412,6 +1530,134 @@
     ],
     "_autoGenerated": true
   },
+  "UiDataTable": {
+    "description": "A feature-rich data table with sorting, filtering, and pagination. Use for displaying and managing large datasets with interactive features.",
+    "category": "Layout",
+    "useCases": [
+      "data grid",
+      "admin table",
+      "user list",
+      "product catalog",
+      "reports"
+    ],
+    "keywords": [
+      "datatable",
+      "grid",
+      "sorting",
+      "filtering",
+      "pagination",
+      "data",
+      "list",
+      "table"
+    ],
+    "related": [
+      "UiTable"
+    ],
+    "props": [],
+    "examples": [
+      "Basic",
+      "WithSorting",
+      "WithPagination",
+      "WithToolbar",
+      "WithGlobalFilter",
+      "WithRowSelection",
+      "FullExample",
+      "WithCustomEmptyText",
+      "WithCustomEmptySlot",
+      "WithColumnHeader",
+      "WithPageSizeSelector",
+      "WithMinHeightSmallDataset",
+      "WithRowActions",
+      "WithCellFormatting"
+    ],
+    "_autoGenerated": true
+  },
+  "UiDatePicker": {
+    "description": "A date picker combining a button trigger with a popover calendar. Provides an accessible way to select dates or date ranges.",
+    "category": "Form Inputs",
+    "useCases": [
+      "date selection",
+      "booking form",
+      "event picker",
+      "schedule",
+      "deadline"
+    ],
+    "keywords": [
+      "date",
+      "picker",
+      "calendar",
+      "datepicker",
+      "range",
+      "schedule"
+    ],
+    "related": [
+      "UiCalendar",
+      "UiPopover"
+    ],
+    "props": [
+      "class",
+      "open",
+      "mode",
+      "modelValue",
+      "defaultValue",
+      "placeholder",
+      "minValue",
+      "maxValue",
+      "disabled",
+      "readonly",
+      "locale",
+      "weekStartsOn",
+      "numberOfMonths",
+      "weekdayFormat",
+      "fixedWeeks",
+      "layout",
+      "preventDeselect",
+      "calendarLabel",
+      "isDateDisabled",
+      "isDateUnavailable",
+      "dateFormat",
+      "closeOnSelect",
+      "pagedNavigation",
+      "ariaLabel",
+      "rangeSeparator"
+    ],
+    "examples": [
+      "Default",
+      "WithPreselectedDate",
+      "WithMonthYearDropdowns",
+      "WithDateRange",
+      "DisabledWeekends",
+      "GermanLocale",
+      "Disabled",
+      "CustomWidth",
+      "KeepOpenOnSelect",
+      "TwoMonthsView",
+      "FormExample",
+      "RangeMode",
+      "RangeTwoMonths",
+      "RangeWithConstraints",
+      "RangePreselected",
+      "RangeFormExample",
+      "RangeKeepOpen"
+    ],
+    "_autoGenerated": true
+  },
+  "UiPlaceholder": {
+    "description": "Placeholder for foundation components (internal development use).",
+    "category": "Foundations",
+    "useCases": [
+      "development placeholder"
+    ],
+    "keywords": [
+      "placeholder",
+      "foundation",
+      "internal"
+    ],
+    "related": [],
+    "props": [],
+    "examples": [],
+    "_autoGenerated": true
+  },
   "UiTemplatePlaceholder": {
     "description": "Placeholder for template components (internal development use).",
     "category": "Templates",

package/dist/cli.js

@@ -6838,8 +6838,15 @@ function findMatchingBrace(text2, openingBraceIndex, openChar = "{", closeChar =
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
 var IDE_CONFIG = {
-  claude: { dir: null, file: ".mcp.json", name: "Claude Code" },
-  cursor: { dir: ".cursor", file: "mcp.json", name: "Cursor" }
+  claude: { dir: null, file: ".mcp.json", name: "Claude Code", rootKey: "mcpServers" },
+  cursor: { dir: ".cursor", file: "mcp.json", name: "Cursor", rootKey: "mcpServers" },
+  vscode: {
+    dir: ".vscode",
+    file: "mcp.json",
+    name: "VS Code",
+    rootKey: "servers",
+    extraFields: { type: "stdio" }
+  }
 };
 function getProjectRoot() {
   let dir = process.cwd();
@@ -6858,15 +6865,16 @@ function getMcpServerPath(projectRoot) {
   throw new Error("Could not find lib-mcp. Make sure @aleph-alpha/lib-mcp is installed.");
 }
 function configureIDE(ide, projectRoot, mcpPath) {
-  const { dir, file, name } = IDE_CONFIG[ide];
+  const { dir, file, name, rootKey, extraFields } = IDE_CONFIG[ide];
   const settingsDir = dir ? path.join(projectRoot, dir) : projectRoot;
   const settingsFile = path.join(settingsDir, file);
   if (dir && !fs2.existsSync(settingsDir)) {
     fs2.mkdirSync(settingsDir, { recursive: true });
   }
   const settings = readJsonFile(settingsFile) ?? {};
-  settings.mcpServers ??= {};
-  settings.mcpServers["ui-library"] = { command: "node", args: [mcpPath, "serve"] };
+  const servers = settings[rootKey] ?? {};
+  servers["ui-library"] = { command: "node", args: [mcpPath, "serve"], ...extraFields };
+  settings[rootKey] = servers;
   const tempFile = `${settingsFile}.tmp`;
   try {
     fs2.writeFileSync(tempFile, JSON.stringify(settings, null, 2) + "\n");
@@ -6885,10 +6893,11 @@ function configureIDE(ide, projectRoot, mcpPath) {
 function runInstall(args) {
   if (args.includes("--help") || args.includes("-h")) {
     console.log(`
-Usage: npx @aleph-alpha/lib-mcp mcp-install [--cursor]
+Usage: npx @aleph-alpha/lib-mcp mcp-install [--cursor] [--vscode]
 
 Options:
   --cursor    Also configure for Cursor IDE
+  --vscode    Also configure for VS Code
   --help      Show this help message
 `);
     return;
@@ -6903,6 +6912,9 @@ Installing UI Library MCP Server...
     if (args.includes("--cursor")) {
       configureIDE("cursor", projectRoot, mcpPath);
     }
+    if (args.includes("--vscode")) {
+      configureIDE("vscode", projectRoot, mcpPath);
+    }
     console.log(`
 \u2705 Done! Restart your IDE to use these tools:
    - list_components
@@ -21556,12 +21568,13 @@ Usage:
   npx @aleph-alpha/lib-mcp <command> [options]
 
 Commands:
-  mcp-install [--cursor]    Configure MCP server for Claude Code (and optionally Cursor)
-  serve                     Start the MCP server (used internally by IDE)
+  mcp-install [--cursor] [--vscode]  Configure MCP server for Claude Code (and optionally Cursor/VS Code)
+  serve                              Start the MCP server (used internally by IDE)
 
 Examples:
   npx @aleph-alpha/lib-mcp mcp-install
   npx @aleph-alpha/lib-mcp mcp-install --cursor
+  npx @aleph-alpha/lib-mcp mcp-install --vscode
 
 After installation, restart your IDE to use these MCP tools:
   - list_components: Browse all UI components (optionally filter by name/category/description)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/lib-mcp",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/server.js",
@@ -28,7 +28,7 @@
     "@aleph-alpha/tsconfig-frontend": "0.5.0"
   },
   "peerDependencies": {
-    "@aleph-alpha/ui-library": "1.12.0"
+    "@aleph-alpha/ui-library": "1.14.0"
   },
   "homepage": "https://docs.aleph-alpha.com",
   "scripts": {