wavemaker-dev-mcp 0.1.3 → 1.0.0

package/skills/components/wm-carousel.md

@@ -0,0 +1,43 @@
+---
+component: WmCarousel
+category: advanced
+import: components/advanced/carousel
+tags: [advanced, carousel, data-binding, input]
+summary: Carousel advanced widget.
+generated: true
+---
+
+# WmCarousel
+
+Carousel advanced widget.
+
+## Usage
+
+```jsx
+<WmCarousel
+  name="carousel"
+  dataset={items}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| animation | `CarouselAnimationType` | No | — | — |
+| animationinterval | `number` | No | — | — |
+| controls | `CarouselControlsType` | No | — | — |
+| dataset | `any[]` | No | — | — |
+| nodatamessage | `string` | No | — | — |
+| onChange | `( event: any, widget?: Record<string, any>, newIndex?: number, oldIndex?: num...` | No | — | — |
+| currentslide | `any` | No | — | — |
+| previousslide | `any` | No | — | — |
+| render | `(item: any, index: number) => ReactNode` | No | — | — |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-carousel-*`
+
+See foundation-css: `src/tokens/web/components/carousel/carousel.json`

package/skills/components/wm-chart.md

@@ -0,0 +1,104 @@
+---
+component: WmChart
+category: chart
+import: components/chart
+tags: [chart, data-binding, icon, input]
+summary: Chart — chart widget.
+generated: true
+---
+
+# WmChart
+
+Chart — chart widget.
+
+## Usage
+
+```jsx
+<WmChart
+  name="chart"
+  dataset={items}
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| title | `string` | No | — | Chart title displayed in panel header |
+| type | `TChartType` | Yes | — | Chart type |
+| subheading | `string` | No | — | Subheading below title |
+| datavalue | `string` | No | — | Data value binding path |
+| groupby | `string` | No | — | Column(s) to group data by |
+| aggregation | `string` | No | — | Aggregation function: none, sum, average, count, min, max |
+| aggregationcolumn | `string` | No | — | Column to apply aggregation on |
+| orderby | `string` | No | — | Order by expression |
+| xaxisdatakey | `string` | No | — | X-axis data key (comma-separated for multiple) |
+| xaxislabel | `string` | No | — | X-axis label text |
+| xnumberformat | `string` | No | — | X-axis number format |
+| xdigits | `number` | No | — | X-axis decimal digits |
+| xdateformat | `string` | No | — | X-axis date format |
+| xaxislabeldistance | `number` | No | — | Distance of x-axis label from axis |
+| xunits | `string` | No | — | X-axis units suffix |
+| yaxisdatakey | `string` | No | — | Y-axis data key (comma-separated for multiple series) |
+| yaxislabel | `string` | No | — | Y-axis label text |
+| ynumberformat | `string` | No | — | Y-axis number format |
+| ydigits | `number` | No | — | Y-axis decimal digits |
+| yaxislabeldistance | `number` | No | — | Distance of y-axis label from axis |
+| yunits | `string` | No | — | Y-axis units suffix |
+| iconclass | `string` | No | — | Icon class for panel header |
+| nodatamessage | `string` | No | — | Message when no data is available |
+| loadingdatamsg | `string` | No | — | Message shown during data loading |
+| tooltips | `boolean` | No | — | Show tooltips on hover |
+| showlegend | `string` | No | — | Legend position: top, bottom, right, hide |
+| showlabels | `TChartShowValues` | No | — | Label position for pie/donut: hide, inside, outside |
+| showlabelsoutside | `boolean` | No | — | Show labels outside (legacy) |
+| showvalues | `boolean` | No | — | Show values on bars/columns |
+| staggerlabels | `boolean` | No | — | Stagger x-axis labels to avoid overlap |
+| reducexticks | `boolean` | No | — | Reduce number of x-axis ticks |
+| labeltype | `TChartValuesDisplay` | No | — | Label format for pie/donut: key, percent, value, key-value |
+| barspacing | `string` | No | — | Bar spacing: 0.3, 0.5, 0.8 or small, medium, large |
+| donutratio | `string` | No | — | Donut inner radius: small, medium, large |
+| bubblesize | `string` | No | — | Bubble size data key |
+| showxdistance | `boolean` | No | — | Show x-axis tick lines |
+| showydistance | `boolean` | No | — | Show y-axis tick lines |
+| areaviewtype | `StackOffsetType` | No | — | Area chart stack offset type |
+| interpolation | `TChartInterpolation` | No | — | Line interpolation: linear, step, cardinal |
+| centerlabel | `string` | No | — | Center label for donut chart |
+| customcolors | `string[] \| string` | No | — | Custom colors array or comma-separated string |
+| theme | `string` | No | — | Theme name for default colors |
+| offset | `number` | No | — | Chart offset |
+| offsettop | `number` | No | — | Top offset |
+| offsetbottom | `number` | No | — | Bottom offset |
+| offsetright | `number` | No | — | Right offset |
+| offsetleft | `number` | No | — | Left offset |
+| showxaxis | `boolean` | No | — | Show x-axis |
+| showyaxis | `boolean` | No | — | Show y-axis |
+| linethickness | `string` | No | — | Line thickness for line/area charts |
+| highlightpoints | `boolean` | No | — | Highlight data points on line/area charts |
+| formattype | `string` | No | — | Format type for numbers |
+| dataset | `ChartDataset` | No | — | Chart dataset - array of objects |
+| datasource | `unknown` | No | — | Datasource for server-side data |
+| width | `string` | No | — | Chart width |
+| height | `string` | No | — | Chart height |
+| shape | `TBubbleChartShape` | No | — | Bubble shape: circle, cross, diamond, square, triangle-up, triangle-down, random |
+| deferload | `boolean` | No | — | Defer chart loading |
+| xdomain | `string` | No | — | X-axis domain |
+| ydomain | `string` | No | — | Y-axis domain |
+| labelthreshold | `number` | No | — | Minimum percent to show pie label |
+| legendtype | `TChartLegendType` | No | — | Legend style: classic, furious |
+| viewtype | `TChartViewType` | No | — | Bar/Column view: Stacked, Grouped |
+| fontsize | `string` | No | — | Font size |
+| fontunit | `string` | No | — | Font unit (px, em, etc.) |
+| color | `string` | No | — | Text color |
+| fontfamily | `string` | No | — | Font family |
+| fontweight | `string` | No | — | Font weight |
+| fontstyle | `string` | No | — | Font style |
+| textdecoration | `string` | No | — | Text decoration |
+| show | `boolean` | No | — | Whether to show the chart |
+| styles | `CSSProperties` | No | — | Inline styles |
+| onSelect | `( event: MouseEvent \| unknown, widget: ChartProps & BaseProps, selectedItem: ...` | No | — | Callback when chart data point is selected |
+| onTransform | `(event: MouseEvent, widget: ChartProps & BaseProps) => ChartDataset \| void` | No | — | Callback to transform data before rendering |
+| onBeforerender | `(widget: ChartProps & BaseProps, chartInstance: () => void) => void` | No | — | Callback before chart render |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*

package/skills/components/wm-checkbox.md

@@ -0,0 +1,52 @@
+---
+component: WmCheckbox
+category: input
+import: components/input/default/checkbox
+tags: [input, checkbox, caption, form-field]
+summary: Checkbox input field.
+generated: true
+---
+
+# WmCheckbox
+
+Checkbox input field.
+
+## Usage
+
+```jsx
+<WmCheckbox
+  name="checkbox"
+  caption="My Checkbox"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| caption | `string` | No | — | Label text displayed alongside the checkbox. |
+| checkedvalue | `string \| boolean \| number` | No | — | The value used when the checkbox is checked. |
+| uncheckedvalue | `string \| boolean \| number` | No | — | The value used when the checkbox is unchecked. |
+| datavalue | `string \| boolean \| number` | No | — | The current data value of the checkbox. |
+| disabled | `boolean` | No | — | Whether the checkbox is disabled. |
+| name | `string` | Yes | — | The unique name of the checkbox widget (required). |
+| readonly | `boolean` | No | — | Whether the checkbox is read-only. |
+| required | `boolean` | No | — | Whether the checkbox is required. |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to toggle the checkbox. |
+| type | `string` | No | — | The type of the underlying input. |
+| onChange | `( event: ChangeEvent<HTMLInputElement> \| undefined, widget: Record<string, un...` | No | — | Callback invoked when the checkbox value changes. |
+| onClick | `( event?: MouseEvent<HTMLElement> \| ChangeEvent<HTMLInputElement>, widget?: R...` | No | — | Callback invoked when the checkbox is clicked. |
+| onFocus | `( event: FocusEvent<HTMLElement> \| ChangeEvent<HTMLInputElement>, widget?: Re...` | No | — | Callback invoked when the checkbox receives focus. |
+| displayValue | `string` | No | — | Formatted display value. |
+| selectedicon | `string` | No | — | CSS class for the selected state icon. |
+| unselectedicon | `string` | No | — | CSS class for the unselected state icon. |
+| 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-checkbox-*`
+
+See foundation-css: `src/tokens/web/components/checkbox/checkbox.json`

package/skills/components/wm-checkboxset.md

@@ -0,0 +1,75 @@
+---
+component: WmCheckboxset
+category: input
+import: components/input/default/checkboxset
+tags: [input, checkboxset, data-binding, collapsible, dropdown, form-field]
+summary: Checkboxset — dropdown input field bound to a dataset.
+generated: true
+---
+
+# WmCheckboxset
+
+Checkboxset — dropdown input field bound to a dataset.
+
+## Usage
+
+```jsx
+<WmCheckboxset
+  name="checkboxset"
+  dataset={items}
+  displayfield="label"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| layout | `"inline" \| "stacked"` | No | `"stacked"` | Layout of the checkboxes. |
+| itemclass | `string` | No | — | CSS class applied to each item. |
+| listclass | `string` | No | — | CSS class applied to the list container. |
+| showcount | `boolean` | No | — | Whether to show the count of selected items. |
+| disabled | `boolean` | No | — | Whether the checkboxset is disabled. |
+| readonly | `boolean` | No | — | Whether the checkboxset is read-only. |
+| type | `"button" \| "submit" \| "reset"` | No | — | Button type attribute (rarely used). |
+| dataset | `unknown[] \| string \| Record<string, unknown>` | No | — | The data source bound to the checkboxset. |
+| datafield | `string` | No | — | The field from the dataset to use as the data value. |
+| displayfield | `string` | No | — | The field from the dataset to display as the label. |
+| getDisplayExpression | `(data: Record<string, unknown>) => string` | No | — | Custom function to compute the display text for each item. |
+| datavalue | `unknown[] \| unknown` | No | — | The currently selected data values. |
+| usekeys | `boolean` | No | — | Whether to use keys as values. |
+| groupby | `string` | No | — | The field to group items by. |
+| match | `string` | No | — | Match mode for filtering. |
+| orderby | `string` | No | — | Field(s) to order items by. |
+| name | `string` | Yes | — | The unique name of the checkboxset widget (required). |
+| onClick | `( event: ChangeEvent<HTMLInputElement> \| MouseEvent<HTMLElement>, widget?: Re...` | No | — | Callback invoked when a checkbox is clicked. |
+| onChange | `( event: ChangeEvent<HTMLInputElement> \| SyntheticEvent, widget: Record<strin...` | No | — | Callback invoked when the selected values change. |
+| onMouseEnter | `( event: MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: ...` | No | — | Callback invoked when the mouse enters the widget. |
+| onMouseLeave | `( event: MouseEvent<HTMLElement>, widget?: Record<string, unknown>, newVal?: ...` | No | — | Callback invoked when the mouse leaves the widget. |
+| required | `boolean` | No | — | Whether a selection is required. |
+| label | `string` | No | — | Label text for the checkboxset. |
+| collapsed | `boolean` | No | — | Whether the group is collapsed. |
+| collapsible | `boolean` | No | — | Whether the checkboxset group is collapsible. |
+| compareby | `string[]` | No | — | Fields used for comparing values. |
+| datasetItems | `DatasetItem[]` | No | — | Transformed dataset items (injected by HOC). |
+| selectedItems | `DatasetItem[]` | No | — | Currently selected items (injected by HOC). |
+| transformFormData | `( containerWidget: Record<string, unknown>, dataset: DatasetItem[], options: ...` | No | — | Function to transform form data (injected by HOC). |
+| groupedData | `GroupedDataset[]` | No | — | Grouped dataset items. |
+| onchange | `(value: unknown) => void` | No | — | Legacy change callback. |
+| onblur | `() => void` | No | — | Legacy blur callback. |
+| validation | `Record<string, unknown>` | No | — | Validation configuration. |
+| isDestroyed | `boolean` | No | — | Whether the widget has been destroyed. |
+| height | `string \| number` | Yes | — | Height of the checkboxset container. |
+| width | `string \| number` | Yes | — | Width of the checkboxset container. |
+| itemsperrow | `string` | No | — | Number of items per row. |
+| tabIndex | `number` | No | — | Tab index for keyboard navigation. |
+| displayValue | `string` | No | — | Formatted display value. |
+| 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-checkboxset-*`
+
+See foundation-css: `src/tokens/web/components/checkboxset/checkboxset.json`

package/skills/components/wm-chips.md

@@ -0,0 +1,78 @@
+---
+component: WmChips
+category: input
+import: components/input/chips
+tags: [input, chips, data-binding, dropdown]
+summary: Chips — dropdown input field bound to a dataset.
+generated: true
+---
+
+# WmChips
+
+Chips — dropdown input field bound to a dataset.
+
+## Usage
+
+```jsx
+<WmChips
+  name="chips"
+  dataset={items}
+  displayfield="label"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| allowonlyselect | `boolean` | No | — | When true, only items from the dataset can be selected (no custom input). |
+| autofocus | `boolean` | No | — | Whether the chips input should be focused on mount. |
+| chipclass | `string` | No | — | CSS class applied to individual chips. |
+| datafield | `string` | No | — | The field from the dataset to use as the data value. |
+| dataset | `unknown[] \| string \| Record<string, unknown>` | No | — | The data source bound to the chips widget. |
+| datavalue | `unknown[] \| string \| Record<string, unknown>` | No | — | The current selected data values. |
+| dateformat | `string` | No | — | Date format applied to date-type fields. |
+| disabled | `boolean` | No | — | Whether the chips input is disabled. |
+| displayexpression | `(data: Record<string, unknown>) => string` | No | — | Custom function to compute the display text for each chip. |
+| displayfield | `string` | No | — | The field from the dataset to display as the chip label. |
+| displayimagesrc | `string` | No | — | The field from the dataset to use as the chip image source. |
+| enablereorder | `boolean` | No | — | Whether chip reordering via drag-and-drop is enabled. |
+| groupby | `string` | No | — | The field to group chips by. |
+| inputposition | `"first" \| "last"` | No | `"last"` | Position of the text input relative to chips. |
+| inputwidth | `"default" \| "full" \| string` | No | `"default"` | Width of the text input. |
+| limit | `number` | No | — | Maximum number of chips that can be selected. |
+| match | `string` | No | — | Match mode for filtering the dataset. |
+| matchmode | `string` | No | — | Strategy for matching search input against dataset items. |
+| maxsize | `number` | No | — | Maximum number of characters allowed in the chip input. |
+| minchars | `number` | No | — | Minimum characters required before showing suggestions. |
+| name | `string` | Yes | — | The unique name of the chips widget (required). |
+| orderby | `string` | No | — | Field(s) to order the dataset by. |
+| placeholder | `string` | No | — | Placeholder text shown in the input. |
+| readonly | `boolean` | No | — | Whether the chips input is read-only. |
+| searchkey | `string` | No | — | The field(s) to search on when filtering. |
+| showsearchicon | `boolean` | No | — | Whether to show a search icon in the input. |
+| type | `"search" \| "autocomplete"` | No | — | Type of input behavior. |
+| debouncetime | `number` | No | — | Debounce time in milliseconds for search input. |
+| datacompletemsg | `string` | No | — | Message shown when all items are selected. |
+| compareby | `string` | No | — | Field used for comparing chip values. |
+| dataoptions | `Record<string, unknown>` | No | — | Additional data options for the chips widget. |
+| datasource | `Record<string, unknown>` | No | — | Data source configuration. |
+| datavaluesource | `Record<string, unknown>` | No | — | Data value source for binding. |
+| onAdd | `(event: Event, widget: Record<string, unknown>, item: ChipItem) => void` | No | — | Callback invoked when a chip is added. |
+| onBeforeadd | `( event: Event, widget: Record<string, unknown>, newItem: DataSetItem ) => bo...` | No | — | Callback invoked before a chip is added. Return `false` to prevent adding. |
+| onBeforeremove | `( event: Event, widget: Record<string, unknown>, item: ChipItem \| ChipItem[] ...` | No | — | Callback invoked before a chip is removed. Return `false` to prevent removal. |
+| onBeforereorder | `( event: Event, widget: Record<string, unknown>, data: ChipItem[], changedIte...` | No | — | Callback invoked before chips are reordered. Return `false` to prevent reordering. |
+| onBeforeservicecall | `( widget: Record<string, unknown>, inputData: Record<string, unknown> ) => void` | No | — | Callback invoked before a service call is made. |
+| onChipclick | `(event: Event, widget: Record<string, unknown>, item: ChipItem) => void` | No | — | Callback invoked when a chip is clicked. |
+| onChipselect | `(event: Event, widget: Record<string, unknown>, item: ChipItem) => void` | No | — | Callback invoked when a chip is selected. |
+| onChange | `( event: Event, widget: Record<string, unknown>, newVal: unknown[], oldVal: u...` | No | — | Callback invoked when the selected chips change. |
+| onRemove | `(event: Event, widget: Record<string, unknown>, item: ChipItem \| ChipItem[]) ...` | No | — | Callback invoked when a chip is removed. |
+| onReorder | `( event: Event, widget: Record<string, unknown>, data: ChipItem[], changedIte...` | No | — | Callback invoked after chips are reordered. |
+
+*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
+
+## CSS Tokens
+
+Component-specific CSS variables: `--wm-chips-*`
+
+See foundation-css: `src/tokens/web/components/chips/chips.json`

package/skills/components/wm-composite.md

@@ -0,0 +1,30 @@
+---
+component: WmComposite
+category: input
+import: components/input/composite
+tags: [input, composite, form-field]
+summary: Composite input field.
+generated: true
+---
+
+# WmComposite
+
+Composite input field.
+
+## Usage
+
+```jsx
+<WmComposite
+  name="composite"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| captionposition | `"left" \| "right" \| "top" \| "floating"` | No | `"left"` | Position of the label relative to the input. |
+| required | `boolean` | No | — | Whether the contained input is required. |
+| 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-confirm-dialog.md

@@ -0,0 +1,43 @@
+---
+component: WmConfirmDialog
+category: dialogs
+import: components/dialogs/confirm-dialog
+tags: [dialogs, confirm, dialog, icon]
+summary: Confirm Dialog — modal dialog.
+generated: true
+---
+
+# WmConfirmDialog
+
+Confirm Dialog — modal dialog.
+
+## Usage
+
+```jsx
+<WmConfirmDialog
+  name="confirmDialog"
+  title="My Panel"
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| oktext | `string` | No | — | Text for the OK button. |
+| canceltext | `string` | No | — | Text for the Cancel button. |
+| title | `string` | No | — | Title text for the confirm dialog. |
+| message | `string \| ReactNode` | No | — | Message content for the confirm dialog. |
+| text | `string \| ReactNode` | No | — | Text content for the confirm dialog. |
+| iconclass | `string` | No | — | CSS class for the icon. |
+| onOk | `(event?: SyntheticEvent) => void` | No | — | Callback fired when the OK button is clicked. |
+| onCancel | `(event?: SyntheticEvent) => void` | No | — | Callback fired when the Cancel 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-confirm-dialog-*`
+
+See foundation-css: `src/tokens/web/components/modal-dialog/modal-dialog.json`

package/skills/components/wm-container.md

@@ -0,0 +1,100 @@
+---
+component: WmContainer
+category: container
+import: components/container
+tags: [container, flex, wrapper, section, panel, alignment, gap]
+summary: General-purpose flex container with alignment, gap, wrap, overflow, and z-index control.
+related: [WmLinearLayout, WmLayoutGrid, WmPanel]
+---
+
+# WmContainer
+
+General-purpose flex container. Use for sections, cards, and any area needing alignment control, overflow clipping, or z-index stacking. Unlike `WmLinearLayout`, it does not require `WmLinearLayoutItem` wrappers — children are placed directly.
+
+## Usage
+
+```jsx
+<WmContainer
+  name="profileCard"
+  direction="row"
+  alignment="middle-left"
+  gap={16}
+  width="100%"
+  padding="16px"
+>
+  <WmPicture name="avatar" />
+  <WmLabel name="userName" caption="Jane Doe" />
+</WmContainer>
+```
+
+## Key Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| direction | `"row" \| "column"` | `"column"` | Flex direction |
+| alignment | `ContainerAlignment` | `"top-left"` | Combined horizontal + vertical alignment (see table below) |
+| gap | `string \| number` | — | Gap between children in px |
+| columngap | `string \| number` | — | Column gap when `wrap` is true |
+| wrap | `boolean` | `false` | Allow children to wrap to next line |
+| clipcontent | `string \| boolean` | — | Clip overflowing content |
+| position | `string` | — | CSS position (`"relative"`, `"absolute"`, `"fixed"`) |
+| overflow | `string` | — | CSS overflow (`"auto"`, `"hidden"`, `"scroll"`) |
+| zindex | `string \| number` | — | CSS z-index |
+| content | `string` | — | Named partial for deferred rendering |
+| name | `string` | — | Required. Widget identifier |
+| width | `string` | — | CSS width |
+| height | `string` | — | CSS height |
+| padding | `string` | — | CSS padding shorthand |
+| className | `string` | — | Additional CSS class names |
+
+## Alignment Values
+
+| Value | Flex equivalent |
+|-------|----------------|
+| `"top-left"` | justify: start, align: start |
+| `"top-center"` | justify: center, align: start |
+| `"top-right"` | justify: end, align: start |
+| `"middle-left"` | justify: start, align: center |
+| `"middle-center"` | justify: center, align: center |
+| `"middle-right"` | justify: end, align: center |
+| `"bottom-left"` | justify: start, align: end |
+| `"bottom-center"` | justify: center, align: end |
+| `"bottom-right"` | justify: end, align: end |
+| `"center"` | both centered |
+
+## Patterns
+
+**Card with header and body:**
+```jsx
+<WmContainer name="card" direction="column" gap={0} padding="16px" className="app-card">
+  <WmLabel name="cardTitle" caption="Summary" />
+  <WmContainer name="cardBody" direction="column" gap={12}>
+    <WmLabel name="stat1" caption="42 users" />
+    <WmLabel name="stat2" caption="7 active" />
+  </WmContainer>
+</WmContainer>
+```
+
+**Sticky overlay (absolute positioned):**
+```jsx
+<WmContainer name="overlay" position="absolute" zindex={100} alignment="middle-center" width="100%" height="100%">
+  <WmLabel name="loadingMsg" caption="Loading..." />
+</WmContainer>
+```
+
+**Scrollable content area:**
+```jsx
+<WmContainer name="scrollArea" direction="column" overflow="auto" height="400px">
+  {/* long content */}
+</WmContainer>
+```
+
+## WmContainer vs WmLinearLayout
+
+| | WmContainer | WmLinearLayout |
+|---|---|---|
+| Child wrappers needed | No | Yes (`WmLinearLayoutItem`) |
+| Spacing control | `gap` prop (px) | `spacing` prop (token-based) |
+| Alignment | Single `alignment` prop | Separate `horizontalalign` / `verticalalign` |
+| Wrap support | Yes | No |
+| Use for | Sections, cards, panels | Item lists, toolbars, stacks |

package/skills/components/wm-currency.md

@@ -0,0 +1,69 @@
+---
+component: WmCurrency
+category: input
+import: components/input/currency
+tags: [input, currency, form-field]
+summary: Currency input field.
+generated: true
+---
+
+# WmCurrency
+
+Currency input field.
+
+## Usage
+
+```jsx
+<WmCurrency
+  name="currency"
+  datavalue={value}
+/>
+```
+
+## Props
+
+| Prop | Type | Req | Default | Description |
+|------|------|-----|---------|-------------|
+| currency | `string` | No | `"USD"` | ISO 4217 currency code. |
+| currencySymbol | `string` | No | — | The symbol to display for the currency. |
+| currencySymbolPosition | `"left" \| "right"` | No | `"left"` | Position of the currency symbol relative to the input. |
+| currencySymbolWidth | `string` | No | — | Width of the currency symbol area. |
+| disabled | `boolean` | No | — | Whether the input is disabled. |
+| name | `string` | Yes | — | The unique name of the currency widget (required). |
+| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the input. |
+| autofocus | `boolean` | No | — | Whether the input should be focused on mount. |
+| inputProps | `Record<string, unknown>` | No | — | Props passed to the inner number input element. |
+| displayValue | `string` | No | — | Formatted display value for the currency. |
+| class | `string` | No | — | CSS class name override. |
+| readonly | `boolean` | No | — | Whether the currency input is read-only. |
+| required | `boolean` | No | — | Whether a value is required. |
+| placeholder | `string` | No | `"Enter value"` | Placeholder text shown when the input is empty. |
+| maxvalue | `number` | No | — | Maximum value allowed. |
+| minvalue | `number` | No | — | Minimum value allowed. |
+| step | `number` | No | `1` | Step increment for arrow key changes. |
+| textAlign | `string` | No | — | Text alignment within the input. |
+| trailingzero | `boolean` | No | — | Whether to display trailing zeros. |
+| inputmode | `"natural" \| "financial"` | No | `"natural"` | Input mode for the currency widget.
+- `"natural"`: Standard number input.
+- `"financial"`: Financial format. |
+| decimalplaces | `number` | No | `0` | Number of decimal places to display. |
+| updateon | `"blur" \| "keypress"` | No | `"blur"` | When the data value should be updated. |
+| updatedelay | `string` | No | `"0"` | Delay in milliseconds before updating the data value. |
+| datavalue | `number \| null` | No | — | The bound data value of the currency input. |
+| onChange | `( event: ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newV...` | No | — | Callback invoked when the currency value changes. |
+| onBlur | `(event: FocusEvent<HTMLInputElement>, widget?: Record<string, unknown>) => void` | No | — | Callback invoked when the input loses focus. |
+| onFocus | `(event: FocusEvent<HTMLInputElement>) => void` | No | — | Callback invoked when the input receives focus. |
+| onClick | `(event: MouseEvent<HTMLInputElement>, widget?: Record<string, unknown>) => void` | No | — | Callback invoked when the input is clicked. |
+| onMouseEnter | `( event: MouseEvent<HTMLInputElement>, widget?: Record<string, unknown> ) => ...` | No | — | Callback invoked when the mouse enters the input. |
+| onMouseLeave | `( event: MouseEvent<HTMLInputElement>, widget?: Record<string, unknown> ) => ...` | No | — | Callback invoked when the mouse leaves the input. |
+| onKeyDown | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Callback invoked on key down. |
+| onEnter | `(event: KeyboardEvent<HTMLInputElement>) => void` | No | — | Callback invoked when the Enter key is pressed. |
+| 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-currency-*`
+
+See foundation-css: `src/tokens/web/components/currency/currency.json`