wavemaker-dev-mcp 0.1.3 → 1.0.0

package/dist/skills/loader.js

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadIndex = loadIndex;
+exports.readSkillFile = readSkillFile;
+exports.findComponentSkill = findComponentSkill;
+exports.findTokenSkill = findTokenSkill;
+exports.searchSkills = searchSkills;
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+// Walk up from dist/skills/loader.js to find the skills/ directory at the package root
+function findSkillsRoot() {
+    // dist/skills/loader.js → resolve ../../skills → <package-root>/skills
+    const candidates = [
+        node_path_1.default.resolve(__dirname, "../../skills"),
+        node_path_1.default.resolve(__dirname, "../../../skills"),
+    ];
+    for (const candidate of candidates) {
+        if (node_fs_1.default.existsSync(node_path_1.default.join(candidate, "index.json"))) {
+            return candidate;
+        }
+    }
+    throw new Error(`skills/index.json not found. Searched: ${candidates.join(", ")}`);
+}
+let _index = null;
+let _skillsRoot = null;
+function getSkillsRoot() {
+    if (!_skillsRoot) {
+        _skillsRoot = findSkillsRoot();
+    }
+    return _skillsRoot;
+}
+function loadIndex() {
+    if (_index)
+        return _index;
+    const root = getSkillsRoot();
+    const raw = node_fs_1.default.readFileSync(node_path_1.default.join(root, "index.json"), "utf8");
+    _index = JSON.parse(raw);
+    return _index;
+}
+function readSkillFile(relativePath) {
+    const root = getSkillsRoot();
+    const absolute = node_path_1.default.resolve(root, relativePath);
+    // Prevent directory traversal
+    if (!absolute.startsWith(root + node_path_1.default.sep) && absolute !== root) {
+        throw new Error(`Invalid skill path: ${relativePath}`);
+    }
+    if (!node_fs_1.default.existsSync(absolute)) {
+        throw new Error(`Skill file not found: ${relativePath}`);
+    }
+    return node_fs_1.default.readFileSync(absolute, "utf8");
+}
+/** Find a component skill by name (case-insensitive, strips "Wm" prefix for matching). */
+function findComponentSkill(query) {
+    const index = loadIndex();
+    const normalised = query.toLowerCase().replace(/^wm/, "");
+    return index.components.find((c) => c.name.toLowerCase() === query.toLowerCase() ||
+        c.name.toLowerCase().replace(/^wm/, "") === normalised ||
+        c.file.toLowerCase().includes(normalised));
+}
+/** Find a token skill by name. */
+function findTokenSkill(query) {
+    const index = loadIndex();
+    const q = query.toLowerCase();
+    return index.tokens.find((t) => t.name.toLowerCase() === q || t.tags.includes(q));
+}
+/** Score a skill entry against a free-text query. Returns 0 if no match. */
+function scoreEntry(entry, terms) {
+    const name = ("name" in entry ? entry.name : "").toLowerCase();
+    const summary = entry.summary.toLowerCase();
+    const tags = entry.tags.map((t) => t.toLowerCase());
+    let score = 0;
+    for (const term of terms) {
+        if (name.includes(term))
+            score += 3;
+        if (tags.some((t) => t === term))
+            score += 2;
+        if (tags.some((t) => t.includes(term)))
+            score += 1;
+        if (summary.includes(term))
+            score += 1;
+    }
+    return score;
+}
+/** Search components and tokens by free-text query. Returns top matches. */
+function searchSkills(query, topN = 5) {
+    const index = loadIndex();
+    const terms = query
+        .toLowerCase()
+        .split(/\s+/)
+        .filter((t) => t.length > 1);
+    const results = [];
+    for (const c of index.components) {
+        const score = scoreEntry(c, terms);
+        if (score > 0)
+            results.push({ type: "component", entry: c, score });
+    }
+    for (const t of index.tokens) {
+        const score = scoreEntry(t, terms);
+        if (score > 0)
+            results.push({ type: "token", entry: t, score });
+    }
+    return results.sort((a, b) => b.score - a.score).slice(0, topN);
+}
+//# sourceMappingURL=loader.js.map

package/dist/skills/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../src/skills/loader.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wavemaker-dev-mcp",
-  "version": "0.1.3",
-  "description": "MCP server for WaveMaker React runtime and foundation-css: search, read props, and tokens from node_modules",
+  "version": "1.0.0",
+  "description": "MCP server for WaveMaker React — pre-built component and token skill docs for AI-assisted code generation",
   "keywords": [
     "mcp",
     "wavemaker",
@@ -22,6 +22,7 @@
   },
   "files": [
     "dist",
+    "skills",
     "README.md",
     "LICENSE"
   ],
@@ -29,20 +30,23 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "rm -rf dist && tsc",
     "postbuild": "chmod +x dist/index.js",
     "start": "node dist/index.js",
     "test": "playwright test",
+    "generate-skills": "tsx scripts/generate-skills.ts",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "fast-glob": "^3.3.3",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@playwright/test": "^1.59.0",
     "@types/node": "^25.5.0",
+    "fast-glob": "^3.3.3",
+    "ts-morph": "^27.0.2",
+    "tsx": "^4.21.0",
     "typescript": "^6.0.2"
   }
 }

package/skills/components/wm-accordion-pane.md

@@ -0,0 +1,44 @@
+---
+component: WmAccordionPane
+category: container
+import: components/container/accordion/accordion-pane
+tags: [container, accordion, pane, icon, panel, badge]
+summary: Accordion Pane layout container.
+generated: true
+---
+
+# WmAccordionPane
+
+Accordion Pane layout container.
+
+## Usage
+
+```jsx
+<WmAccordionPane
+  name="accordionPane"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| title | `string` | No | `"Title"` | Pane header title. |
+| subheading | `string` | No | — | Optional subheading below the title. |
+| iconclass | `string` | No | — | Icon class for the pane header (e.g., "wi wi-home"). |
+| badgevalue | `string \| number` | No | — | Badge value displayed in the header. |
+| badgetype | `AccordionPaneBadgeType` | No | `"default"` | Badge style variant. |
+| isdefaultpane | `boolean` | No | — | Whether this pane is the default expanded pane. |
+| active | `boolean` | Yes | — | Whether the pane is currently expanded. Injected by parent. |
+| smoothscroll | `boolean` | No | `false` | Enable smooth scroll when expanding. |
+| onExpand | `(event?: Event, props?: WmAccordionPaneProps) => void` | No | — | Called when pane expands. Injected by parent. |
+| onCollapse | `(event?: Event, props?: WmAccordionPaneProps) => void` | No | — | Called when pane collapses. Injected by parent. |
+| toggle | `(event?: Event, name?: string) => void` | No | — | Toggle function. Injected by parent. |
+| expand | `(event?: Event, name?: string) => void` | No | — | Expand function. Injected by parent. |
+| collapse | `(event?: Event, name?: string) => void` | No | — | Collapse function. Injected by parent. |
+| onLoad | `(props: WmAccordionPaneProps, onLoadCallback?: () => void) => void` | No | — | Called when pane loads. |
+| render | `(props: WmAccordionPaneProps, onLoadCallback?: () => void) => ReactNode` | No | — | Custom render function for pane content. Receives props and onLoad callback. |
+| tabindex | `number` | No | — | Tab index for keyboard navigation. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-accordion.md

@@ -0,0 +1,43 @@
+---
+component: WmAccordion
+category: container
+import: components/container/accordion
+tags: [container, accordion, data-binding, input]
+summary: Accordion layout container.
+generated: true
+---
+
+# WmAccordion
+
+Accordion layout container.
+
+## Usage
+
+```jsx
+<WmAccordion
+  name="accordion"
+  dataset={items}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| closeothers | `boolean` | No | `true` | When true, expanding a pane collapses all other panes. |
+| defaultpaneindex | `number` | No | `0` | Index of the pane to show by default (0-based). |
+| statehandler | `StateHandler` | No | `"none"` | Where to persist accordion state (active pane index). |
+| dataset | `Record<string, unknown>[]` | No | — | Data source for dynamic accordion. Each item renders a pane. |
+| nodatamessage | `string` | No | `"No Data Found"` | Message shown when dataset is empty in dynamic mode. |
+| type | `"static" \| "dynamic"` | No | `"static"` | Accordion type: static (children) or dynamic (dataset). |
+| onChange | `(event: { newPaneIndex: number; oldPaneIndex: number }) => void` | No | — | Called when the active pane changes. |
+| onLoad | `(props: WmAccordionProps, onLoadCallback?: () => void) => void` | No | — | Called when accordion loads. Receives props and optional callback. |
+| render | `( item: Record<string, unknown>, index: number, dataset: Record<string, unkno...` | No | — | Render function for dynamic accordion. Receives item, index, and full dataset. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-accordion-*`
+
+See foundation-css: `src/tokens/web/components/accordion/accordion.json`

package/skills/components/wm-alert-dialog.md

@@ -0,0 +1,42 @@
+---
+component: WmAlertDialog
+category: dialogs
+import: components/dialogs/alert-dialog
+tags: [dialogs, alert, dialog, icon]
+summary: Alert Dialog — modal dialog.
+generated: true
+---
+
+# WmAlertDialog
+
+Alert Dialog — modal dialog.
+
+## Usage
+
+```jsx
+<WmAlertDialog
+  name="alertDialog"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| oktext | `string` | No | — | Text for the OK button. |
+| title | `string` | No | — | Title text for the alert dialog. |
+| alerttype | `string` | No | — | The type of alert (e.g. "error", "info"). |
+| iconclass | `string` | No | — | CSS class for the icon. |
+| text | `string` | No | — | Message text content for the alert. |
+| message | `string \| ReactNode` | No | — | Message content for the alert (can be React node). |
+| onOk | `() => void` | No | — | Callback fired when the OK button is clicked. |
+| onClose | `(event?: SyntheticEvent) => void` | No | — | Callback fired when the dialog requests to be closed. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-alert-dialog-*`
+
+See foundation-css: `src/tokens/web/components/modal-dialog/modal-dialog.json`

package/skills/components/wm-anchor.md

@@ -0,0 +1,51 @@
+---
+component: WmAnchor
+category: basic
+import: components/basic/anchor
+tags: [basic, anchor, caption, icon, badge]
+summary: Anchor display widget.
+generated: true
+---
+
+# WmAnchor
+
+Anchor display widget.
+
+## Usage
+
+```jsx
+<WmAnchor
+  name="anchor"
+  caption="My Anchor"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| caption | `string` | Yes | `"Link"` | The text to be displayed as the anchor caption. |
+| iconclass | `string` | No | — | The CSS class for the icon to be displayed. |
+| encodeurl | `string` | No | — | If true, the hyperlink URL will be encoded. |
+| hyperlink | `string` | No | — | The URL to navigate to when the anchor is clicked. |
+| iconheight | `string` | No | — | The height of the icon. |
+| iconwidth | `string` | No | — | The width of the icon. |
+| iconurl | `string` | No | — | The URL of the icon image. |
+| iconmargin | `string` | No | `"0 4"` | The margin around the icon. |
+| iconposition | `IconPositionType` | No | `"left"` | The position of the icon relative to the caption. |
+| badgevalue | `string \| number` | No | — | The value to be displayed in a badge next to the anchor. |
+| shortcutkey | `string` | No | — | The keyboard shortcut for the anchor. |
+| target | `string` | No | — | The target attribute for the anchor (e.g., '_blank', '_self'). |
+| id | `string` | No | — | — |
+| itemLink | `string` | No | — | Internal prop for linked items in lists. |
+| href | `string` | No | — | Prop to allow overriding the href, though it's typically computed internally. |
+| variant | `"standard"` | No | — | — |
+| action | `string` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-anchor-*`
+
+See foundation-css: `src/tokens/web/components/anchor/anchor.json`

package/skills/components/wm-audio.md

@@ -0,0 +1,41 @@
+---
+component: WmAudio
+category: basic
+import: components/basic/audio
+tags: [basic, audio]
+summary: Audio display widget.
+generated: true
+---
+
+# WmAudio
+
+Audio display widget.
+
+## Usage
+
+```jsx
+<WmAudio
+  name="audio"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| mp3format | `string` | Yes | — | The URL or source of the MP3 file. |
+| muted | `boolean` | No | `false` | If true, the audio will be muted. |
+| controls | `boolean` | No | `false` | If true, audio controls will be displayed. |
+| loop | `boolean` | No | `false` | If true, the audio will loop back to the start when finished. |
+| audiopreload | `"auto" \| "metadata" \| "none"` | No | `"auto"` | Specifies if and how the audio should be preloaded. |
+| audiosupportmessage | `string` | No | — | Message to display if the browser does not support the audio element. |
+| autoplay | `boolean` | No | `false` | If true, the audio will start playing automatically. |
+| id | `string` | No | — | The unique ID for the audio element. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-audio-*`
+
+See foundation-css: `src/tokens/web/components/audio/audio.json`

package/skills/components/wm-button-group.md

@@ -0,0 +1,36 @@
+---
+component: WmButtonGroup
+category: form
+import: components/form/button-group
+tags: [form, button, group]
+summary: Button Group form element.
+generated: true
+---
+
+# WmButtonGroup
+
+Button Group form element.
+
+## Usage
+
+```jsx
+<WmButtonGroup
+  name="buttonGroup"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| vertical | `boolean` | No | `false` | If true, the buttons in the group will be arranged vertically. |
+| horizontalalign | `string` | No | — | The horizontal alignment of the button group. |
+| children | `ReactNode` | Yes | — | The children elements (typically buttons) to be rendered inside the group. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-button-group-*`
+
+See foundation-css: `src/tokens/web/components/button-group/button-group.json`

package/skills/components/wm-button.md

@@ -0,0 +1,114 @@
+---
+component: WmButton
+category: form
+import: components/form/button
+tags: [button, action, submit, reset, icon, form, click]
+summary: Clickable button with optional icon, badge, and caption. Supports submit/reset form roles.
+related: [WmAnchor, WmIcon, WmToolbar]
+---
+
+# WmButton
+
+Standard clickable button. Supports captions, icons (left or right), badge counters, and HTML button types (`button`, `submit`, `reset`).
+
+## Usage
+
+```jsx
+<WmButton
+  name="saveBtn"
+  caption="Save"
+  iconclass="wm-sl-l sl-cloud-upload"
+  onClick={(e, widget) => handleSave()}
+/>
+```
+
+## Key Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| name | `string` | — | Required. Widget identifier |
+| caption | `string` | — | Button label text |
+| type | `"button" \| "submit" \| "reset"` | `"button"` | HTML button type. Use `"submit"` inside a `WmForm` |
+| disabled | `boolean` | `false` | Disable the button |
+| iconclass | `string` | — | CSS class for the icon (e.g. WaveMaker icon classes or FontAwesome) |
+| iconurl | `string` | — | URL of an image icon |
+| iconposition | `"left" \| "right"` | `"left"` | Position of icon relative to caption |
+| iconwidth | `string` | — | Icon width (e.g. `"16px"`) |
+| iconheight | `string` | — | Icon height |
+| iconmargin | `string` | `"0 4"` | Margin around the icon (CSS shorthand) |
+| badgevalue | `string \| number` | — | Badge count shown on the button |
+| shortcutkey | `string` | — | Keyboard shortcut (e.g. `"s"` for Alt+S) |
+| stopPropagation | `boolean` | `false` | Stop click event from bubbling |
+| formName | `string` | — | Associate with a named form (for `type="submit"`) |
+| onClick | `function` | — | `(event, widget) => void` |
+| className | `string` | — | Additional CSS class names |
+| show | `boolean` | `true` | Visibility |
+
+## Patterns
+
+**Icon-only button (no caption):**
+```jsx
+<WmButton name="deleteBtn" iconclass="wm-sl-l sl-trash" title="Delete" />
+```
+
+**Submit button inside a form:**
+```jsx
+<WmButton name="submitBtn" caption="Submit" type="submit" />
+```
+
+**Button with badge (notification count):**
+```jsx
+<WmButton name="notifBtn" iconclass="wm-sl-l sl-bell" badgevalue={unreadCount} />
+```
+
+**Right-aligned icon:**
+```jsx
+<WmButton name="nextBtn" caption="Next" iconclass="wm-sl-l sl-arrow-right" iconposition="right" />
+```
+
+**Disabled state driven by expression:**
+```jsx
+<WmButton name="saveBtn" caption="Save" disabled={!formValid} onClick={handleSave} />
+```
+
+**Row of actions using WmLinearLayout:**
+```jsx
+<WmLinearLayout name="formActions" direction="row" spacing={12}>
+  <WmLinearLayoutItem name="formActions_item1">
+    <WmButton name="saveBtn" caption="Save" type="submit" />
+  </WmLinearLayoutItem>
+  <WmLinearLayoutItem name="formActions_item2">
+    <WmButton name="cancelBtn" caption="Cancel" onClick={handleCancel} />
+  </WmLinearLayoutItem>
+</WmLinearLayout>
+```
+
+## CSS Tokens
+
+| Token | CSS Variable | Applied to |
+|-------|-------------|-----------|
+| Primary | `--wm-color-primary` | Filled button background |
+| On-primary | `--wm-color-on-primary` | Filled button text |
+| Label large | `--wm-label-large-font-size` | Button text size |
+| Border radius | `--wm-radius-md` | Button corner rounding |
+| Disabled opacity | `--wm-opacity-active` (38%) | Disabled state |
+
+## Appearance Classes (apply via `className`)
+
+WaveMaker buttons accept Bootstrap-compatible variant classes:
+
+| Class | Appearance |
+|-------|-----------|
+| `btn-primary` | Filled primary color |
+| `btn-secondary` | Filled secondary color |
+| `btn-outline-primary` | Outlined primary |
+| `btn-danger` | Filled error/danger color |
+| `btn-link` | Text-only, no background |
+| `btn-sm` | Small size |
+| `btn-lg` | Large size |
+
+## Notes
+
+- Always set a unique `name` per button — it is used for widget references and accessibility.
+- Use `type="submit"` when the button is inside a `WmForm`; it triggers form validation automatically.
+- `iconclass` accepts WaveMaker icon classes (`wm-sl-l sl-*`) and FontAwesome classes (`fa fa-*`).

package/skills/components/wm-calendar.md

@@ -0,0 +1,54 @@
+---
+component: WmCalendar
+category: input
+import: components/input/calendar
+tags: [input, calendar, data-binding]
+summary: Calendar input field.
+generated: true
+---
+
+# WmCalendar
+
+Calendar input field.
+
+## Usage
+
+```jsx
+<WmCalendar
+  name="calendar"
+  dataset={items}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| dataset | `unknown[] \| Record<string, unknown>` | No | — | The data source bound to the calendar (array of events). |
+| datavalue | `string \| Date \| null` | No | — | The currently selected data value / date. |
+| eventtitle | `string` | No | — | Field in the dataset used as the event title. |
+| eventstart | `string` | No | — | Field in the dataset used as the event start date. |
+| eventend | `string` | No | — | Field in the dataset used as the event end date. |
+| eventallday | `string` | No | — | Field in the dataset indicating if the event is all-day. |
+| eventclass | `string` | No | — | Field in the dataset used for the event CSS class. |
+| controls | `string` | No | — | Calendar controls to display (e.g., navigation buttons). |
+| calendartype | `string` | No | — | Type of calendar. |
+| view | `string` | No | — | Default calendar view. |
+| selectionmode | `string` | No | — | Selection mode for the calendar. |
+| onSelect | `($start: Date, $end: Date, $view: string, $data: unknown[]) => void` | No | — | Callback invoked when a date or event is selected. |
+| onBeforerender | `(event: SyntheticEvent, widget?: Record<string, unknown>) => void` | No | — | Callback invoked before the calendar is rendered. |
+| onEventdrop | `( $event: SyntheticEvent, $newData: unknown[], $oldData: unknown[], $delta: u...` | No | — | Callback invoked when an event is dropped (drag-and-drop). |
+| onEventresize | `( $event: SyntheticEvent, $newData: unknown[], $oldData: unknown[], $delta: u...` | No | — | Callback invoked when an event is resized. |
+| onEventclick | `($event: SyntheticEvent, $data: unknown[], $view: string) => void` | No | — | Callback invoked when an event is clicked. |
+| onEventrender | `($event: SyntheticEvent, $data: unknown[], $view: string) => void` | No | — | Callback invoked when an event is rendered. |
+| onViewrender | `($view: unknown) => void` | No | — | Callback invoked when the calendar view changes. |
+| onDateclick | `(event: SyntheticEvent, widget?: Record<string, unknown>) => void` | No | — | Callback invoked when a date cell is clicked. |
+| tabindex | `number` | No | — | Tab index for keyboard navigation. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-calendar-*`
+
+See foundation-css: `src/tokens/web/components/calendar/calendar.json`

package/skills/components/wm-card.md

@@ -0,0 +1,60 @@
+---
+component: WmCard
+category: data
+import: components/data/card
+tags: [data, card, icon]
+summary: Card data widget.
+generated: true
+---
+
+# WmCard
+
+Card data widget.
+
+## Usage
+
+```jsx
+<WmCard
+  name="card"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| title | `string` | No | — | Title of the card. |
+| subheading | `string` | No | — | Subheading of the card. |
+| iconclass | `string` | No | — | CSS class for the icon in the card header. |
+| iconurl | `string` | No | — | URL for the icon image in the card header. |
+| actions | `string` | No | — | Actions available for the card, typically shown in a menu. |
+| picturesource | `string` | No | — | Source URL for the card's main image. |
+| picturetitle | `string` | No | — | Title for the card's main image. |
+| imageheight | `string` | No | `"200px"` | Height of the card's main image. |
+| itemaction | `string` | No | — | Action to perform when a menu item is clicked. |
+| itemchildren | `string` | No | — | Property to use for submenu items. |
+| itemicon | `string` | No | — | Property to use for menu item icons. |
+| itemlabel | `string` | No | — | Property to use for menu item labels. |
+| itemlink | `string` | No | — | Property to use for menu item links. |
+| isactive | `string` | No | — | Property to determine if a menu item is active. |
+| cardItem | `any` | No | — | The data item associated with the card. |
+| userrole | `string` | No | — | User role for access control. |
+| autoclose | `string` | No | `"always"` | When to close the action menu. |
+| isFirst | `boolean` | No | — | Whether the card is the first item in a list. |
+| isLast | `boolean` | No | — | Whether the card is the last item in a list. |
+| currentItemWidgets | `any` | No | — | Widgets for the current item in a list. |
+| onClick | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for click event on the card. |
+| onDblclick | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for double click event on the card. |
+| onMouseover | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for mouse over event on the card. |
+| onMouseout | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for mouse out event on the card. |
+| onMouseenter | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for mouse enter event on the card. |
+| onMouseleave | `(event: MouseEvent, widget: any, item: any, currentItemWidgets: any) => void` | No | — | Callback for mouse leave event on the card. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-card-*`
+
+See foundation-css: `src/tokens/web/components/cards/cards.json`