wavemaker-dev-mcp 0.1.3 → 1.0.0

package/skills/components/wm-datatable.md

@@ -0,0 +1,146 @@
+---
+component: WmDataTable
+category: data
+import: components/data/table
+tags: [table, grid, data, list, pagination, sort, filter, inline-edit, export, rows, columns]
+summary: Full-featured data table with sorting, filtering, pagination, inline/dialog editing, row selection, and export.
+related: [WmList, WmDataGrid, WmPagination]
+---
+
+# WmDataTable
+
+Full-featured data table. Handles pagination, sorting, multi-column filtering, inline/dialog row editing, multi-select, row expansion, export, and summary rows. Composed of `WmTableColumn`, `WmTableAction`, and `WmTableRowAction` children.
+
+## Minimal Usage
+
+```jsx
+<WmDataTable
+  name="usersTable"
+  dataset={users}
+  shownavigation="Basic"
+  pagesize={10}
+>
+  <WmTableColumn field="name" caption="Name" sortable={true} />
+  <WmTableColumn field="email" caption="Email" />
+  <WmTableColumn field="role" caption="Role" />
+</WmDataTable>
+```
+
+## Key Props — WmDataTable
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| name | `string` | — | Required. Widget identifier |
+| dataset | `array \| string` | — | Data array or variable binding |
+| editmode | `"inline" \| "dialog" \| "form" \| "quickedit" \| "none"` | `"none"` | Row edit mode |
+| shownavigation | `"Basic" \| "Classic" \| "Advanced" \| "Pager" \| false` | — | Pagination style |
+| pagesize | `number` | — | Rows per page |
+| pagesizeoptions | `number[]` | — | Options for rows-per-page selector |
+| showheader | `boolean` | `true` | Show column header row |
+| showrowindex | `boolean` | `false` | Show row number column |
+| filtermode | `"multicolumn" \| "search"` | — | Filter UI type |
+| filteronkeypress | `boolean` | `false` | Filter as user types |
+| multiselect | `boolean` | `false` | Enable checkbox multi-select |
+| radioselect | `boolean` | `false` | Enable radio single-select |
+| gridfirstrowselect | `boolean` | `false` | Auto-select first row on load |
+| exportformat | `"EXCEL" \| "CSV"` | — | Enable export and set format |
+| exportdatasize | `number` | — | Max rows to export |
+| nodatamessage | `string` | — | Text shown when dataset is empty |
+| loadingdatamsg | `string` | — | Text shown while data loads |
+| onRowclick | `function` | — | `(event, widget, row) => void` |
+| onRowselect | `function` | — | `(event, widget, row) => void` |
+| onRowdeselect | `function` | — | `(event, widget, row) => void` |
+| onBeforedatarender | `function` | — | Fires before rows are rendered |
+| onDatarender | `function` | — | Fires after rows are rendered |
+| onSort | `function` | — | `(event, widget, sortInfo) => void` |
+| onRowDelete | `function` | — | `(event, widget, row) => void` |
+| onRowUpdate | `function` | — | `(event, widget, row) => void` |
+| onSuccess | `function` | — | CRUD success callback |
+| onError | `function` | — | CRUD error callback |
+
+## WmTableColumn Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| field | `string` | — | Data field name |
+| caption | `string` | — | Column header label |
+| sortable | `boolean` | `false` | Enable column sort |
+| searchable | `boolean` | `false` | Include in filter |
+| show | `boolean` | `true` | Column visibility |
+| width | `string` | — | Column width (e.g. `"150px"`, `"20%"`) |
+| textalignment | `string` | — | Text alignment (`"left"`, `"center"`, `"right"`) |
+| widgetType | `string` | — | Display widget type for read view |
+| editWidgetType | `string` | — | Widget type for inline edit cell |
+| required | `boolean` | `false` | Validation in edit mode |
+| readonly | `boolean` | `false` | Non-editable in edit mode |
+| renderCellContent | `function` | — | Custom cell renderer `(row, col) => ReactNode` |
+
+## WmTableAction Props (header/footer toolbar buttons)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| displayName | `string` | Button label |
+| iconclass | `string` | Icon class |
+| action | `function` | Click handler |
+| position | `"header" \| "footer"` | Where to show the button |
+| variant | `string` | Button variant class |
+| disabled | `boolean \| function` | Disable condition |
+
+## Patterns
+
+**Read-only table with pagination and sorting:**
+```jsx
+<WmDataTable name="ordersTable" dataset={orders} shownavigation="Basic" pagesize={20}>
+  <WmTableColumn field="orderId" caption="Order #" sortable={true} width="100px" />
+  <WmTableColumn field="customer" caption="Customer" sortable={true} />
+  <WmTableColumn field="total" caption="Total" textalignment="right" />
+  <WmTableColumn field="status" caption="Status" />
+</WmDataTable>
+```
+
+**Inline edit with delete row action:**
+```jsx
+<WmDataTable name="usersTable" dataset={users} editmode="inline" onRowUpdate={handleUpdate} onRowDelete={handleDelete}>
+  <WmTableColumn field="name" caption="Name" editWidgetType="text" required={true} />
+  <WmTableColumn field="email" caption="Email" editWidgetType="text" />
+  <WmTableRowAction displayName="Delete" iconclass="wm-sl-l sl-trash" action={(row) => handleDelete(row)} />
+</WmDataTable>
+```
+
+**Multi-select with header action:**
+```jsx
+<WmDataTable name="itemsTable" dataset={items} multiselect={true} onRowselect={handleSelect}>
+  <WmTableColumn field="name" caption="Name" />
+  <WmTableAction displayName="Delete Selected" iconclass="wm-sl-l sl-trash" position="header" action={handleBulkDelete} />
+</WmDataTable>
+```
+
+**Searchable/filterable table:**
+```jsx
+<WmDataTable name="productsTable" dataset={products} filtermode="multicolumn" filteronkeypress={true}>
+  <WmTableColumn field="name" caption="Name" searchable={true} sortable={true} />
+  <WmTableColumn field="category" caption="Category" searchable={true} />
+  <WmTableColumn field="price" caption="Price" textalignment="right" />
+</WmDataTable>
+```
+
+**Custom cell renderer:**
+```jsx
+<WmDataTable name="statusTable" dataset={tasks}>
+  <WmTableColumn field="status" caption="Status"
+    renderCellContent={(row) => (
+      <span className={`badge badge-${row.status === 'done' ? 'success' : 'warning'}`}>
+        {row.status}
+      </span>
+    )}
+  />
+</WmDataTable>
+```
+
+## Notes
+
+- `dataset` can be a WaveMaker variable binding string (e.g. `"Variables.getUserList.dataSet"`) or a JavaScript array.
+- `editmode="inline"` shows edit/save/cancel controls per row; `"dialog"` opens a modal form.
+- Export requires `exportformat` to be set; `exportdatasize` defaults to all rows if unset.
+- Use `nodatamessage` to show a meaningful empty-state message instead of a blank table.
+- `onBeforedatarender` is the right place to transform or sort data before it renders.

package/skills/components/wm-date-time.md

@@ -0,0 +1,80 @@
+---
+component: WmDateTime
+category: input
+import: components/input/epoch/datetime
+tags: [input, date, time, form-field]
+summary: Date Time input field.
+generated: true
+---
+
+# WmDateTime
+
+Date Time input field.
+
+## Usage
+
+```jsx
+<WmDateTime
+  name="dateTime"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| placeholder | `string` | No | — | Placeholder text shown when no datetime is selected. |
+| showampmbuttons | `boolean` | No | — | Whether to show AM/PM toggle buttons. |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the datetime picker. |
+| datavalue | `string \| Date \| null` | No | — | The bound data value of the datetime input. |
+| datepattern | `string` | No | — | Date pattern for display formatting. |
+| hourstep | `number` | No | `1` | Step increment for hours. |
+| minutestep | `number` | No | `1` | Step increment for minutes. |
+| outputformat | `string` | No | — | Output format for the datetime value. |
+| required | `boolean` | No | — | Whether a datetime selection is required. |
+| mindate | `string \| Date` | No | — | The earliest selectable date. |
+| maxdate | `string \| Date` | No | — | The latest selectable date. |
+| excludedays | `string` | No | — | Comma-separated day indices to exclude (0=Sunday). |
+| excludedates | `string \| string[] \| Date[]` | No | — | Dates to exclude from selection. |
+| showweeks | `boolean` | No | — | Whether to show week numbers. |
+| showbuttonbar | `boolean` | No | — | Whether to show the button bar (today/clear buttons). |
+| autofocus | `boolean` | No | — | Whether the input should be focused on mount. |
+| readonly | `boolean` | No | — | Whether the datetime picker is read-only. |
+| disabled | `boolean` | No | — | Whether the datetime picker is disabled. |
+| selectfromothermonth | `boolean` | No | — | Whether dates from other months can be selected. |
+| todaybutton | `boolean` | No | — | Whether to show a "Today" button. |
+| clearbutton | `boolean` | No | — | Whether to show a "Clear" button. |
+| todaybuttonlabel | `string` | No | — | Label for the "Today" button. |
+| clearbuttonlabel | `string` | No | — | Label for the "Clear" button. |
+| showcustompicker | `boolean` | No | — | Whether to show a custom picker UI. |
+| adaptiveposition | `boolean` | No | — | Whether to adaptively position the popover. |
+| showdropdownon | `string` | No | — | When to show the dropdown picker. |
+| dataentrymode | `string` | No | — | Data entry mode for the datetime input. |
+| onDateChange | `(date: Date \| null) => void` | No | — | Callback invoked when the date changes. |
+| isValidDate | `(date: Date) => boolean` | No | — | Checks whether a given value is a valid date. |
+| getDateObj | `(value: string \| Date \| null) => Date` | No | — | Converts a value to a Date object. |
+| minDateMaxDateValidationOnInput | `(date: Date) => boolean` | No | — | Validates a date against min/max constraints. |
+| formatValidation | `(date: Date, dateString: string) => boolean` | No | — | Validates the format of the input value. |
+| updatePrevDatavalue | `(date: Date \| null) => void` | No | — | Updates the previously bound data value. |
+| updateBoundVariable | `(date: Date \| null) => void` | No | — | Updates the bound variable with a new value. |
+| handleKeyDown | `(event: KeyboardEvent) => void` | No | — | Handles key down events on the datetime input. |
+| onChange | `( event: SyntheticEvent, widget: Record<string, unknown>, newValue: Date \| st...` | No | — | Callback invoked when the datetime value changes. |
+| onClick | `(event: MouseEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the datetime picker is clicked. |
+| onFocus | `(event: FocusEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the datetime picker receives focus. |
+| onBlur | `(event: FocusEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the datetime picker loses focus. |
+| onMouseEnter | `(event: MouseEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the mouse enters the datetime picker. |
+| onMouseLeave | `(event: MouseEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked when the mouse leaves the datetime picker. |
+| onBeforeload | `(event: SyntheticEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked before the datetime widget loads. |
+| floatinglabel | `string` | No | — | Whether to show a floating label. |
+| validators | `ValidatorConfig[]` | No | — | Array of validator functions or configurations. |
+| validationmessage | `string` | No | — | Custom validation error message. |
+| fieldName | `string` | No | — | Field name used by the form controller. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-date-time-*`
+
+See foundation-css: `src/tokens/web/components/date/date.json`

package/skills/components/wm-date.md

@@ -0,0 +1,78 @@
+---
+component: WmDate
+category: input
+import: components/input/epoch/date
+tags: [input, date, form-field]
+summary: Date input field.
+generated: true
+---
+
+# WmDate
+
+Date input field.
+
+## Usage
+
+```jsx
+<WmDate
+  name="date"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| placeholder | `string` | No | — | Placeholder text shown when no date is selected. |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the date picker. |
+| datavalue | `string \| Date` | No | — | The bound data value of the date input. |
+| datepattern | `string` | No | — | Date pattern for display formatting. |
+| outputformat | `string` | No | — | Output format for the date value. |
+| required | `boolean` | No | — | Whether a date selection is required. |
+| mindate | `string \| Date` | No | — | The earliest selectable date. |
+| maxdate | `string \| Date` | No | — | The latest selectable date. |
+| excludedays | `string` | No | — | Comma-separated day indices to exclude (0=Sunday). |
+| excludedates | `string` | No | — | Comma-separated dates to exclude from selection. |
+| showweeks | `boolean` | No | — | Whether to show week numbers. |
+| showbuttonbar | `boolean` | No | — | Whether to show the button bar (today/clear buttons). |
+| autofocus | `boolean` | No | — | Whether the input should be focused on mount. |
+| readonly | `boolean` | No | — | Whether the date picker is read-only. |
+| disabled | `boolean` | No | — | Whether the date picker is disabled. |
+| showdropdownon | `string` | No | — | When to show the dropdown picker. |
+| showindevices | `string` | No | — | Devices to show the widget on. |
+| adaptiveposition | `boolean` | No | — | Whether to adaptively position the popover. |
+| selectfromothermonth | `boolean` | No | — | Whether dates from other months can be selected. |
+| todaybutton | `boolean` | No | — | Whether to show a "Today" button. |
+| clearbutton | `boolean` | No | — | Whether to show a "Clear" button. |
+| todaybuttonlabel | `string` | No | `"Today"` | Label for the "Today" button. |
+| clearbuttonlabel | `string` | No | `"Clear"` | Label for the "Clear" button. |
+| showcustompicker | `boolean` | No | — | Whether to show a custom date picker UI. |
+| showdateformatasplaceholder | `boolean` | No | — | Whether to show the date format as placeholder. |
+| viewmode | `string` | No | — | Initial calendar view mode. |
+| dataentrymode | `string` | No | — | Data entry mode for the date input. |
+| onDateChange | `(date: Date \| null) => void` | No | — | Callback invoked when the date changes. |
+| getFormattedDate | `(date: Date \| null, pattern?: string) => string` | No | — | Formats a date to a display string. |
+| invokeOnChange | `(value: Date \| string \| null, event?: SyntheticEvent) => void` | No | — | Invokes the onChange callback (from form controller). |
+| datepickerRef | `RefObject<HTMLElement \| null>` | No | — | Ref to the date picker DOM element. |
+| customValidator | `(value: Date \| null) => boolean` | No | — | Custom validator function. |
+| updatePrevDatavalue | `(value: Date \| string \| null) => void` | No | — | Updates the previously bound data value. |
+| updateBoundVariable | `(value: Date \| string \| null) => void` | No | — | Updates the bound variable with a new value. |
+| handleKeyDown | `(event: KeyboardEvent) => void` | No | — | Handles key down events on the date input. |
+| getDateObj | `(date: string \| Date \| null) => Date \| null` | No | — | Converts a value to a Date object. |
+| isValidDate | `(date: string \| Date \| null) => boolean` | No | — | Checks whether a given value is a valid date. |
+| minDateMaxDateValidationOnInput | `(date: Date, displayValue?: string) => boolean` | No | — | Validates a date against min/max constraints. |
+| formatValidation | `(newVal: Date, inputVal: string) => boolean` | No | — | Validates the format of the input value. |
+| onChange | `( event: SyntheticEvent, widget: Record<string, unknown>, newValue: Date \| st...` | No | — | Callback invoked when the date value changes. |
+| onBeforeload | `(event: SyntheticEvent, widget: Record<string, unknown>) => void` | No | — | Callback invoked before the date widget loads. |
+| validationmessage | `string` | No | — | Custom validation error message. |
+| validators | `ValidatorConfig[]` | No | — | Array of validator functions or configurations. |
+| fieldName | `string` | No | — | Field name used by the form controller. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-date-*`
+
+See foundation-css: `src/tokens/web/components/date/date.json`

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

@@ -0,0 +1,28 @@
+---
+component: WmDialogBody
+category: dialogs
+import: components/dialogs/dialog-body
+tags: [dialogs, dialog, body]
+summary: Dialog Body — modal dialog.
+generated: true
+---
+
+# WmDialogBody
+
+Dialog Body — modal dialog.
+
+## Usage
+
+```jsx
+<WmDialogBody
+  name="dialogBody"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| children | `ReactNode` | No | — | Content to render inside the dialog body. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

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

@@ -0,0 +1,48 @@
+---
+component: WmDialogContainer
+category: dialogs
+import: components/dialogs/dialog
+tags: [dialogs, dialog, container, icon]
+summary: Dialog Container — modal dialog.
+generated: true
+---
+
+# WmDialogContainer
+
+Dialog Container — modal dialog.
+
+## Usage
+
+```jsx
+<WmDialogContainer
+  name="dialogContainer"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| modal | `boolean` | No | — | Whether the dialog is modal (blocks background). |
+| dialogtype | `"design-dialog" \| "login-dialog" \| "page-dialog" \| "iframe-dialog"` | No | — | The type of dialog being rendered. |
+| showheader | `boolean` | No | — | Whether to show the dialog header. |
+| title | `string` | No | — | Title text for the dialog. |
+| iconclass | `string` | No | — | CSS class for the header icon. |
+| iconurl | `string` | No | — | URL for the header icon. |
+| iconwidth | `string` | No | — | Width of the header icon. |
+| iconheight | `string` | No | — | Height of the header icon. |
+| iconmargin | `string` | No | — | Margin for the header icon. |
+| iconstyle | `string` | No | — | Inline style for the header icon. |
+| closable | `boolean` | No | — | Whether the dialog is closable by the user. |
+| sheetposition | `"top" \| "bottom" \| "left" \| "right"` | No | — | Position of the sheet (if sheet is true). |
+| sheet | `boolean` | No | — | Whether the dialog is a sheet. |
+| onClose | `(event?: any) => 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-dialog-container-*`
+
+See foundation-css: `src/tokens/web/components/modal-dialog/modal-dialog.json`

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

@@ -0,0 +1,31 @@
+---
+component: WmDialogContent
+category: dialogs
+import: components/dialogs/dialog-content
+tags: [dialogs, dialog, content]
+summary: Dialog Content — modal dialog.
+generated: true
+---
+
+# WmDialogContent
+
+Dialog Content — modal dialog.
+
+## Usage
+
+```jsx
+<WmDialogContent
+  name="dialogContent"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| children | `ReactNode` | No | — | Content to render inside the dialog content area. |
+| sheet | `boolean` | No | — | Whether the parent dialog is a sheet. |
+| sheetposition | `"top" \| "bottom" \| "left" \| "right"` | No | — | Position of the sheet. |
+| isDialog | `boolean` | No | — | Whether the component is part of a dialog. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

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

@@ -0,0 +1,28 @@
+---
+component: WmDialogFooter
+category: dialogs
+import: components/dialogs/dialog-actions
+tags: [dialogs, dialog, footer]
+summary: Dialog Footer — modal dialog.
+generated: true
+---
+
+# WmDialogFooter
+
+Dialog Footer — modal dialog.
+
+## Usage
+
+```jsx
+<WmDialogFooter
+  name="dialogFooter"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| children | `ReactNode` | No | — | Content to render inside the footer. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

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

@@ -0,0 +1,43 @@
+---
+component: WmDialogHeader
+category: dialogs
+import: components/dialogs/dialog-header
+tags: [dialogs, dialog, header, icon]
+summary: Dialog Header — modal dialog.
+generated: true
+---
+
+# WmDialogHeader
+
+Dialog Header — modal dialog.
+
+## Usage
+
+```jsx
+<WmDialogHeader
+  name="dialogHeader"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| closable | `boolean` | No | — | Whether the close button is shown. |
+| title | `string` | No | — | Title text for the header. |
+| headinglevel | `"h1" \| "h2" \| "h4"` | No | — | Heading level for the title element. |
+| iconclass | `string` | No | — | CSS class for the header icon. |
+| iconurl | `string` | No | — | URL for the header icon image. |
+| iconwidth | `string` | No | — | Width of the header icon. |
+| iconheight | `string` | No | — | Height of the header icon. |
+| iconmargin | `string` | No | — | Margin for the header icon. |
+| iconstyle | `string` | No | — | Inline style for the header icon. |
+| heading | `string` | Yes | — | The main heading text. |
+| subheading | `string` | No | — | Subheading text. |
+| onClose | `((event?: SyntheticEvent) => void) \| (() => void)` | Yes | — | Callback fired when the close button is clicked. |
+| titleid | `string` | Yes | — | Unique ID for the title element (for ARIA). |
+| dialogLocale | `{ LABEL_CLOSE: string; }` | No | — | Locale data for the dialog. |
+| isDialog | `boolean` | No | — | Whether the component is part of a dialog. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-dialog.md

@@ -0,0 +1,40 @@
+---
+component: WmDialog
+category: dialogs
+import: components/dialogs
+tags: [dialogs, dialog]
+summary: Dialog — modal dialog.
+generated: true
+---
+
+# WmDialog
+
+Dialog — modal dialog.
+
+## Usage
+
+```jsx
+<WmDialog
+  name="dialog"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| open | `boolean` | No | — | Whether the dialog is open. |
+| onClose | `(event?: SyntheticEvent \| {}) => void` | No | — | Callback fired when the dialog requests to be closed. |
+| closable | `boolean` | No | `true` | Whether the dialog can be dismissed by the user. |
+| modal | `boolean` | No | — | When `true`, prevents backdrop & escape dismissal. |
+| sheet | `boolean` | No | — | When `true`, renders the dialog as a bottom/side sheet. |
+| sheetposition | `"top" \| "bottom" \| "left" \| "right"` | No | — | Position of the sheet when `sheet` is `true`. |
+| role | `string` | No | — | ARIA role for the dialog element. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-dialog-*`
+
+See foundation-css: `src/tokens/web/components/modal-dialog/modal-dialog.json`

package/skills/components/wm-file-upload.md

@@ -0,0 +1,58 @@
+---
+component: WmFileUpload
+category: input
+import: components/input/fileupload
+tags: [input, file, upload, multi-select, caption, icon, form-field]
+summary: File Upload input field.
+generated: true
+---
+
+# WmFileUpload
+
+File Upload input field.
+
+## Usage
+
+```jsx
+<WmFileUpload
+  name="fileUpload"
+  caption="My File Upload"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| caption | `string` | No | — | Caption text displayed on the upload button. |
+| name | `string` | Yes | — | The unique name of the file upload widget (required). |
+| multiple | `boolean` | No | — | Whether multiple file uploads are allowed. |
+| fileuploadmessage | `string` | No | — | Message displayed in the file upload area. |
+| disabled | `boolean` | No | — | Whether the file upload is disabled. |
+| contenttype | `string` | No | — | Accepted content type(s) for uploads. |
+| maxfilesize | `string \| number` | No | — | Maximum file size allowed (in bytes or as a string with unit). |
+| iconclass | `string` | No | — | CSS class for the upload button icon. |
+| cleariconclass | `string` | No | — | CSS class for the clear icon. |
+| cleariconhint | `string` | No | — | Tooltip for the clear icon. |
+| uploadpath | `string` | No | — | Server path to upload files to. |
+| datasource | `Record<string, unknown>` | No | — | Data source variable for the upload service. |
+| selectedFiles | `string` | No | — | Comma-separated list of selected file names. |
+| destination | `string` | No | — | Upload destination folder. |
+| filelistheight | `number` | No | — | Height of the file list in pixels. |
+| showprogressbar | `boolean` | No | — | Whether to show the progress bar. |
+| showprogressbarpercentage | `boolean` | No | — | Whether to show the percentage on the progress bar. |
+| deleteiconhint | `string` | No | — | Tooltip for the delete icon. |
+| extensions | `string` | No | — | Allowed file extensions (comma-separated). |
+| filetype | `string` | No | — | File type filter (e.g., "image", "audio"). |
+| readonly | `boolean` | No | — | Whether the file upload is read-only. |
+| required | `boolean` | No | — | Whether file upload is required. |
+| deletedatasource | `Record<string, unknown>` | No | — | Data source variable for the delete service. |
+| displayname | `string` | No | — | Field to use as the display name for uploaded files. |
+| onBeforeselect | `( $event: MouseEvent \| ChangeEvent, widget: Record<string, unknown>, selected...` | No | — | Callback invoked before files are selected. Return `false` to prevent. |
+| onSelect | `( $event: MouseEvent \| ChangeEvent, widget: Record<string, unknown>, selected...` | No | — | Callback invoked when files are selected. |
+| onDelete | `( $event: MouseEvent \| ChangeEvent, widget: Record<string, unknown> ) => void` | No | — | Callback invoked when a file is deleted. |
+| onBeforedelete | `( $event: MouseEvent \| ChangeEvent, widget: Record<string, unknown>, file: Fi...` | No | — | Callback invoked before a file is deleted. |
+| onError | `( $event: MouseEvent \| ChangeEvent, widget: Record<string, unknown>, file: Fi...` | No | — | Callback invoked when an upload error occurs. |
+| id | `string` | No | — | The unique ID for the widget. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-footer.md

@@ -0,0 +1,31 @@
+---
+component: WmFooter
+category: layout
+import: components/layout/footer
+tags: [layout, footer]
+summary: Footer page layout component.
+generated: true
+---
+
+# WmFooter
+
+Footer page layout component.
+
+## Usage
+
+```jsx
+<WmFooter
+  name="footer"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| children | `ReactNode` | No | — | — |
+| className | `string` | No | — | — |
+| styles | `CSSProperties` | No | — | — |
+| id | `string` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*