@smartsoft001/pro-claude-plugins 0.2.0

package/plugins/smart-pro/skills/angular-components-input/SKILL.md

@@ -0,0 +1,118 @@
+---
+name: angular-components-input
+description: Input field variants for @smartsoft001/pro-angular — 33 Tailwind UI templates pluggable into the fork's <smartpro-input> via INPUT_FIELD_COMPONENTS_TOKEN.
+user-invocable: false
+---
+
+# Input Variants (pro)
+
+This package provides 33 input-field variants derived from Tailwind UI. Each variant extends `InputBaseComponent<T>` (or `InputPossibilitiesBaseComponent<T>`) from `@smartsoft001/angular` and is meant to replace the fork's default input sub-components by providing `INPUT_FIELD_COMPONENTS_TOKEN`.
+
+## When to Use This Skill
+
+- Developer wants a specific input look → pick the matching variant and register it via the DI token
+- Developer asks which input variants exist → list the tables below
+- Developer wants to see all variants → open the `Components / Input` Storybook entry (33 stories, dark/light toggle via global theme toolbar)
+
+## Categories
+
+### Input-like "Primary" variants (12) — Tailwind Plus "Input with leading icon and trailing button"
+
+Single shared template. Each maps 1:1 to a `FieldType`.
+
+| Component                          | Selector                              | FieldType     | HTML input type            |
+| ---------------------------------- | ------------------------------------- | ------------- | -------------------------- |
+| `InputTextPrimaryComponent`        | `smartpro-input-text-primary`         | `text`        | `text`                     |
+| `InputPasswordPrimaryComponent`    | `smartpro-input-password-primary`     | `password`    | `password`                 |
+| `InputEmailPrimaryComponent`       | `smartpro-input-email-primary`        | `email`       | `email`                    |
+| `InputNipPrimaryComponent`         | `smartpro-input-nip-primary`          | `nip`         | `text` + NIP validator     |
+| `InputPeselPrimaryComponent`       | `smartpro-input-pesel-primary`        | `pesel`       | `text`                     |
+| `InputIntPrimaryComponent`         | `smartpro-input-int-primary`          | `int`         | `number step="1"`          |
+| `InputFloatPrimaryComponent`       | `smartpro-input-float-primary`        | `float`       | `number step="0.01"`       |
+| `InputPhoneNumberPrimaryComponent` | `smartpro-input-phone-number-primary` | `phoneNumber` | `tel`                      |
+| `InputCurrencyPrimaryComponent`    | `smartpro-input-currency-primary`     | `currency`    | `number step="0.01"`       |
+| `InputEnumPrimaryComponent`        | `smartpro-input-enum-primary`         | `enum`        | fieldset of checkboxes     |
+| `InputLongTextPrimaryComponent`    | `smartpro-input-long-text-primary`    | `longText`    | `ngx-editor`               |
+| `InputDatePrimaryComponent`        | `smartpro-input-date-primary`         | `date`        | `date` + trailing calendar |
+
+### Phone Number PL (1) — Tailwind Plus "Input with add-on"
+
+| Component                          | Selector                                | FieldType       | Template                  |
+| ---------------------------------- | --------------------------------------- | --------------- | ------------------------- |
+| `InputPhoneNumberPlAddOnComponent` | `smartpro-input-phone-number-pl-add-on` | `phoneNumberPl` | `+48` prefix + `type=tel` |
+
+### Flag (boolean) variants (4)
+
+| Component                                 | Selector                                      | Template                               |
+| ----------------------------------------- | --------------------------------------------- | -------------------------------------- |
+| `InputFlagListDescriptionComponent`       | `smartpro-input-flag-list-description`        | Checkbox + title + description stacked |
+| `InputFlagListInlineDescriptionComponent` | `smartpro-input-flag-list-inline-description` | Checkbox + inline description          |
+| `InputFlagListCheckboxRightComponent`     | `smartpro-input-flag-list-checkbox-right`     | Title+description left, checkbox right |
+| `InputFlagSimpleListHeadingComponent`     | `smartpro-input-flag-simple-list-heading`     | Heading above, simple checkbox         |
+
+### Check (multi-select) variants (4) — same templates as flag
+
+| Component                                  | Selector                                       |
+| ------------------------------------------ | ---------------------------------------------- |
+| `InputCheckListDescriptionComponent`       | `smartpro-input-check-list-description`        |
+| `InputCheckListInlineDescriptionComponent` | `smartpro-input-check-list-inline-description` |
+| `InputCheckListCheckboxRightComponent`     | `smartpro-input-check-list-checkbox-right`     |
+| `InputCheckSimpleListHeadingComponent`     | `smartpro-input-check-simple-list-heading`     |
+
+### Radio variants (12)
+
+| Component                                  | Selector                                       | Template                                   |
+| ------------------------------------------ | ---------------------------------------------- | ------------------------------------------ |
+| `InputRadioSimpleListComponent`            | `smartpro-input-radio-simple-list`             | Simple vertical list                       |
+| `InputRadioSimpleInlineListComponent`      | `smartpro-input-radio-simple-inline-list`      | Horizontal wrap of radios                  |
+| `InputRadioListDescriptionComponent`       | `smartpro-input-radio-list-description`        | Radio + title + description stacked        |
+| `InputRadioListInlineDescriptionComponent` | `smartpro-input-radio-list-inline-description` | Radio + inline description                 |
+| `InputRadioListRadioRightComponent`        | `smartpro-input-radio-list-radio-right`        | Title+description left, radio right        |
+| `InputRadioSimpleListRadioRightComponent`  | `smartpro-input-radio-simple-list-radio-right` | Title left, radio right (no description)   |
+| `InputRadioSimpleTableComponent`           | `smartpro-input-radio-simple-table`            | `<table>` with header + rows               |
+| `InputRadioListDescriptionsPanelComponent` | `smartpro-input-radio-list-descriptions-panel` | Bordered panel per option                  |
+| `InputRadioColorPickerComponent`           | `smartpro-input-radio-color-picker`            | Color swatches (uses `item.text` as color) |
+| `InputRadioCardsComponent`                 | `smartpro-input-radio-cards`                   | Radios as cards (grid)                     |
+| `InputRadioSmallCardsComponent`            | `smartpro-input-radio-small-cards`             | Compact radio cards                        |
+| `InputRadioStackedCardsComponent`          | `smartpro-input-radio-stacked-cards`           | Vertically stacked large cards             |
+
+## Registering Variants
+
+End-application registers chosen variants via `INPUT_FIELD_COMPONENTS_TOKEN`:
+
+```typescript
+import { INPUT_FIELD_COMPONENTS_TOKEN } from '@smartsoft001/angular';
+import { FieldType } from '@smartsoft001/models';
+import {
+  InputTextPrimaryComponent,
+  InputEmailPrimaryComponent,
+  InputRadioCardsComponent,
+  InputFlagListDescriptionComponent,
+} from '@smartsoft001/pro-angular';
+
+providers: [
+  {
+    provide: INPUT_FIELD_COMPONENTS_TOKEN,
+    useValue: {
+      [FieldType.text]: InputTextPrimaryComponent,
+      [FieldType.email]: InputEmailPrimaryComponent,
+      [FieldType.radio]: InputRadioCardsComponent,
+      [FieldType.flag]: InputFlagListDescriptionComponent,
+    },
+  },
+];
+```
+
+The fork's `<smartpro-input>` will then use the pro variant for each mapped `FieldType`; unmapped types fall back to the fork's default sub-component.
+
+## Styling
+
+- Tailwind CSS v4 with `smart:` prefix
+- Dark mode via `smart:dark:` (automatic via global storybook theme toolbar)
+- External classes via `cssClass` input (alias `class`), merged into the outer container
+
+## File Locations
+
+- Variants: `packages/shared/angular/src/lib/components/input/<type>/<variant>/<variant>.component.ts`
+- Index: `packages/shared/angular/src/lib/components/input/index.ts`
+- Stories: `packages/shared/angular/src/lib/components/input/input.component.stories.ts`

package/plugins/smart-pro/skills/angular-components-list/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: angular-components-list
+description: List component for @smartsoft001/pro-angular. Five variants (table, stacked, directory, grid-card, grid-contact) driven by `IListOptionsPro` (extends `IListInternalOptions`). Table feature flags (density, sortable, striped, selectable, avatar) compose on the table variant.
+user-invocable: false
+---
+
+# List Component (Pro)
+
+Use `<smartpro-list>` and pick a variant via `variant`. The component reads `IListOptionsPro` (which extends the base `IListInternalOptions` from `@smartsoft001/angular`) and renders entity collections via the configured provider, fields, and model type. The `table` variant accepts a set of feature flags that compose cleanly.
+
+## Variants
+
+| `variant` (default `'stacked'`) | Selector                     | Description                                                                                                                                                                                                                                                                                                                |
+| ------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'stacked'`                     | `smartpro-list-stacked`      | Vertical list of stacked-text rows, one cell per field.                                                                                                                                                                                                                                                                    |
+| `'directory'`                   | `smartpro-list-directory`    | Sticky-letter directory grouping items by first letter of the first field.                                                                                                                                                                                                                                                 |
+| `'grid-card'`                   | `smartpro-list-grid-card`    | Card-grid showing the first field as a heading and remaining fields as body content.                                                                                                                                                                                                                                       |
+| `'grid-contact'`                | `smartpro-list-grid-contact` | Card-grid with a circular avatar placeholder per item.                                                                                                                                                                                                                                                                     |
+| `'table'`                       | `smartpro-list-table`        | CDK table with composable flags. `density: 'condensed'` shrinks padding and uses `text-xs`; `sortable: true` shows sort affordances on each header; `striped: true` alternates row backgrounds; `selectable: true` prepends a checkbox column; `avatar: true` renders the first column with an avatar placeholder + value. |
+
+## API
+
+### IListOptionsPro (`list.types.ts`, extends `IListInternalOptions<T>`)
+
+```typescript
+type SmartListVariantPro =
+  | 'stacked'
+  | 'directory'
+  | 'grid-card'
+  | 'grid-contact'
+  | 'table';
+
+interface IListOptionsPro<T extends IEntity<string>>
+  extends IListInternalOptions<T> {
+  density?: 'normal' | 'condensed';
+  sortable?: boolean;
+  striped?: boolean;
+  selectable?: boolean;
+  avatar?: boolean;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                                                   | Default     | Description                             |
+| --------- | ---------------------------------------------------------------------- | ----------- | --------------------------------------- |
+| `variant` | `'stacked' \| 'directory' \| 'grid-card' \| 'grid-contact' \| 'table'` | `'stacked'` | Variant family.                         |
+| `options` | `IListOptionsPro<T>` (required)                                        | —           | Provider, type, fields, optional flags. |
+| `class`   | `string`                                                               | `''`        | Extra CSS classes.                      |
+
+## Usage Example
+
+```html
+<!-- Stacked list -->
+<smartpro-list [options]="opts"></smartpro-list>
+
+<!-- Table -->
+<smartpro-list variant="table" [options]="opts"></smartpro-list>
+
+<!-- Selectable + condensed table -->
+<smartpro-list
+  variant="table"
+  [options]="{ ...opts, selectable: true, density: 'condensed' }"
+></smartpro-list>
+
+<!-- Grid card layout -->
+<smartpro-list variant="grid-card" [options]="opts"></smartpro-list>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/list/list.component.ts`
+- Types: `packages/shared/angular/src/lib/components/list/list.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/list/{stacked,directory,grid-card,grid-contact,table}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/list/list.component.stories.ts`

package/plugins/smart-pro/skills/angular-components-list-container/SKILL.md

@@ -0,0 +1,106 @@
+---
+name: angular-components-list-container
+description: List container wrapper for @smartsoft001/pro-angular. Single `default` layout, 4 source variants via `options.variant` plus `fullWidthOnMobile` permutation. Sets `role="list"` and projects `<ng-content>`.
+user-invocable: false
+---
+
+# List Container Component (Pro)
+
+Use `<smartpro-list-container>`. Wraps a list of items with a chosen surface style (dividers / cards / separated cards). Single `default` layout.
+
+## Variants
+
+| `variant`                     | Surface                                                                   |
+| ----------------------------- | ------------------------------------------------------------------------- |
+| `'simple-dividers'` (default) | Flat list with `divide-y` separators.                                     |
+| `'card-dividers'`             | White card with shadow, rounded corners, `divide-y` separators inside.    |
+| `'separate-cards'`            | `space-y-3` between items; the consumer styles each item as its own card. |
+| `'flat-card-dividers'`        | Like `card-dividers` but without shadow.                                  |
+
+| `fullWidthOnMobile` | Effect                                                             |
+| ------------------- | ------------------------------------------------------------------ |
+| `true`              | Adds `rounded-none sm:rounded-lg` (only applied to card variants). |
+
+## Source variant mapping
+
+| Tailwind UI variant           | Pro options                                                |
+| ----------------------------- | ---------------------------------------------------------- |
+| Simple dividers               | `variant: 'simple-dividers'`                               |
+| Card dividers                 | `variant: 'card-dividers'`                                 |
+| Separate cards                | `variant: 'separate-cards'`                                |
+| Flat card dividers            | `variant: 'flat-card-dividers'`                            |
+| Card dividers full-width      | `variant: 'card-dividers'`, `fullWidthOnMobile: true`      |
+| Flat card dividers full-width | `variant: 'flat-card-dividers'`, `fullWidthOnMobile: true` |
+
+## API
+
+### Types (`list-container.types.ts`)
+
+```typescript
+type IListContainerOptionsPro = IListContainerOptions;
+type SmartListContainerVariantPro = SmartListContainerVariant;
+```
+
+`IListContainerOptions` (re-exported): `{ variant?, fullWidthOnMobile? }`.
+
+### Wrapper inputs
+
+| Input     | Type                                    | Default     | Description                            |
+| --------- | --------------------------------------- | ----------- | -------------------------------------- |
+| `options` | `IListContainerOptionsPro \| undefined` | `undefined` | Variant + full-width-on-mobile flag.   |
+| `class`   | `string`                                | `''`        | Forwarded to the host `[role="list"]`. |
+
+### Outputs / Slots
+
+No outputs. `<ng-content>` projects list items (consumer marks each item with `role="listitem"`).
+
+## Usage examples
+
+```html
+<!-- Simple dividers (default) -->
+<smartpro-list-container>
+  <div role="listitem" class="smart:py-4">…</div>
+  <div role="listitem" class="smart:py-4">…</div>
+</smartpro-list-container>
+
+<!-- Card dividers with mobile full-bleed -->
+<smartpro-list-container
+  [options]="{ variant: 'card-dividers', fullWidthOnMobile: true }"
+>
+  <div role="listitem" class="smart:px-4 smart:py-4 smart:sm:px-6">…</div>
+</smartpro-list-container>
+
+<!-- Separate cards — consumer styles each item -->
+<smartpro-list-container [options]="{ variant: 'separate-cards' }">
+  <div
+    role="listitem"
+    class="smart:bg-white smart:shadow smart:rounded-lg smart:p-4"
+  >
+    …
+  </div>
+  <div
+    role="listitem"
+    class="smart:bg-white smart:shadow smart:rounded-lg smart:p-4"
+  >
+    …
+  </div>
+</smartpro-list-container>
+```
+
+## Accessibility
+
+- Host has `role="list"`. Consumers set `role="listitem"` on each child.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/list-container/list-container.component.ts`
+- Types: `packages/shared/angular/src/lib/components/list-container/list-container.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/list-container/list-container-classes.util.ts`
+- Layout: `packages/shared/angular/src/lib/components/list-container/default/default.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/list-container/list-container.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`LIST_CONTAINER_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `ListContainerBaseComponent`, `IListContainerOptions`, `SmartListContainerVariant`.
+- No `@tailwindplus/elements` dep required.

package/plugins/smart-pro/skills/angular-components-media-object/SKILL.md

@@ -0,0 +1,133 @@
+---
+name: angular-components-media-object
+description: Media-object layout (image + body) for @smartsoft001/pro-angular. Single `default` layout, 8 source variants via composable options (alignment, position, responsive, nested, wide).
+user-invocable: false
+---
+
+# Media Object Component (Pro)
+
+Use `<smartpro-media-object>`. Lays out an image on one side and projected body content on the other.
+
+## Variants matrix
+
+| Option       | Values                                                                                 |
+| ------------ | -------------------------------------------------------------------------------------- |
+| `alignment`  | `'top'` (default) / `'center'` / `'bottom'` / `'stretched'`                            |
+| `position`   | `'left'` (default — media on left) / `'right'` (media on right via `flex-row-reverse`) |
+| `responsive` | `true` — stacked on mobile, side-by-side at `sm+` (`flex-col sm:flex-row`)             |
+| `nested`     | `true` — adds `pl-8` for indented sub-items                                            |
+| `wide`       | `true` — wider media slot (`sm:w-48`) + larger image (`size-32`)                       |
+
+## Source variant mapping
+
+| Tailwind UI variant | Pro options                      |
+| ------------------- | -------------------------------- |
+| Basic               | (defaults)                       |
+| Center aligned      | `alignment: 'center'`            |
+| Bottom aligned      | `alignment: 'bottom'`            |
+| Stretched           | `alignment: 'stretched'`         |
+| Media on right      | `position: 'right'`              |
+| Basic responsive    | `responsive: true`               |
+| Wide responsive     | `responsive: true`, `wide: true` |
+| Nested              | `nested: true`                   |
+
+## API
+
+### Types (`media-object.types.ts`)
+
+```typescript
+type SmartMediaObjectAlignment = 'top' | 'center' | 'bottom' | 'stretched';
+type SmartMediaObjectPosition = 'left' | 'right';
+
+type IMediaObjectOptionsPro = IMediaObjectOptions;
+```
+
+`IMediaObjectOptions` (re-exported): `{ alignment?, position?, responsive?, nested?, wide? }`.
+
+### Wrapper inputs
+
+| Input      | Type                                  | Default     | Description                                        |
+| ---------- | ------------------------------------- | ----------- | -------------------------------------------------- |
+| `mediaUrl` | `string` (required)                   | —           | Image URL.                                         |
+| `mediaAlt` | `string` (required)                   | —           | Alt text. Pass empty string for decorative images. |
+| `options`  | `IMediaObjectOptionsPro \| undefined` | `undefined` | Alignment, position, responsive, nested, wide.     |
+| `class`    | `string`                              | `''`        | Forwarded to the inner layout host.                |
+
+### Outputs / Slots
+
+No outputs. `<ng-content>` projects the body content.
+
+## Usage examples
+
+```html
+<!-- Basic -->
+<smartpro-media-object mediaUrl="/img/a.png" mediaAlt="A">
+  <h4>Title</h4>
+  <p>Description…</p>
+</smartpro-media-object>
+
+<!-- Center aligned -->
+<smartpro-media-object
+  mediaUrl="/img/a.png"
+  mediaAlt="A"
+  [options]="{ alignment: 'center' }"
+>
+  <h4>Title</h4>
+  <p>Description…</p>
+</smartpro-media-object>
+
+<!-- Media on right -->
+<smartpro-media-object
+  mediaUrl="/img/a.png"
+  mediaAlt="A"
+  [options]="{ position: 'right' }"
+>
+  <h4>Title</h4>
+  <p>Description…</p>
+</smartpro-media-object>
+
+<!-- Responsive (stack on mobile) -->
+<smartpro-media-object
+  mediaUrl="/img/a.png"
+  mediaAlt="A"
+  [options]="{ responsive: true }"
+>
+  <h4>Title</h4>
+</smartpro-media-object>
+
+<!-- Wide responsive -->
+<smartpro-media-object
+  mediaUrl="/img/a.png"
+  mediaAlt="A"
+  [options]="{ responsive: true, wide: true }"
+>
+  <h4>Title</h4>
+</smartpro-media-object>
+
+<!-- Nested -->
+<smartpro-media-object
+  mediaUrl="/img/a.png"
+  mediaAlt="A"
+  [options]="{ nested: true }"
+>
+  <h4>Reply</h4>
+</smartpro-media-object>
+```
+
+## Accessibility
+
+- `<img>` uses the required `alt` attribute. Pass an empty string `mediaAlt=""` to declare the image as decorative — this still satisfies the required input.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/media-object/media-object.component.ts`
+- Types: `packages/shared/angular/src/lib/components/media-object/media-object.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/media-object/media-object-classes.util.ts`
+- Layout: `packages/shared/angular/src/lib/components/media-object/default/default.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/media-object/media-object.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`MEDIA_OBJECT_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `MediaObjectBaseComponent`, `IMediaObjectOptions`.
+- No `@tailwindplus/elements` dep required.

package/plugins/smart-pro/skills/angular-components-modal/SKILL.md

@@ -0,0 +1,159 @@
+---
+name: angular-components-modal
+description: Modal component for @smartsoft001/pro-angular. Two layouts (centered, alert), auto-detected from options. Covers Centered / Wide / Alert / Left-aligned buttons / With dismiss / Gray footer source variants via composable options. Uses @tailwindplus/elements <el-dialog>.
+user-invocable: false
+---
+
+# Modal Component (Pro)
+
+Use `<smartpro-modal>`. The wrapper picks one of two child layouts based on the `layout` input or the shape of `options`. Slot custom body via `<ng-content>` between the description and the actions footer.
+
+## Layouts
+
+| `layout` value (auto-detected) | Selector                  | Description                                                                                                                             |
+| ------------------------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `'centered'` (default)         | `smartpro-modal-centered` | Title + description + projected body + action footer. `width`, `actionsAlignment`, `withDismiss`, `footerStylePro` modulate appearance. |
+| `'alert'`                      | `smartpro-modal-alert`    | Icon-led layout (`grid` with circular icon left, body right) for confirmation/destructive prompts. Uses `role="alertdialog"`.           |
+
+Auto-detection: `options.iconName` or `options.iconStyle` → `alert`; otherwise `centered`. Pass `layout` explicitly to force.
+
+## Source variant mapping
+
+| Tailwind UI variant    | Pro options                                                       |
+| ---------------------- | ----------------------------------------------------------------- |
+| Centered single action | (defaults)                                                        |
+| Wide                   | `width: 'wide'`                                                   |
+| Alert                  | `iconStyle: 'warning' \| 'danger' \| ...` (+ optional `iconName`) |
+| Left-aligned buttons   | `actionsAlignment: 'left'`                                        |
+| With dismiss           | `withDismiss: true`                                               |
+| Gray footer            | `footerStylePro: 'gray'`                                          |
+
+## API
+
+### Types (`modal.types.ts`)
+
+```typescript
+type SmartModalLayoutPro = 'centered' | 'alert';
+type SmartModalWidth = 'default' | 'wide';
+type SmartModalActionsAlignment = 'right' | 'left';
+type SmartModalFooterStylePro = 'default' | 'gray';
+type SmartModalIconStyle = 'info' | 'success' | 'warning' | 'danger';
+
+interface IModalOptionsPro extends IModalOptions {
+  layout?: SmartModalLayoutPro;
+  width?: SmartModalWidth;
+  actionsAlignment?: SmartModalActionsAlignment;
+  footerStylePro?: SmartModalFooterStylePro;
+  iconName?: string; // SVG path `d` attribute (alert only)
+  iconStyle?: SmartModalIconStyle;
+}
+```
+
+`IModalOptions` (re-exported from `@smartsoft001/angular`) provides `withDismiss`, `ariaLabel`, plus the original `variant`/`footerStyle` types (kept for typing compatibility — prefer the `Pro` variants above).
+
+`IModalAction` (re-exported): `{ id, label, variant?: 'primary' | 'secondary' | 'danger' }`.
+
+### Wrapper inputs
+
+| Input         | Type                               | Default     | Description                                                          |
+| ------------- | ---------------------------------- | ----------- | -------------------------------------------------------------------- |
+| `open`        | `boolean` (model — two-way)        | `false`     | Bind with `[(open)]`. When `false`, layouts render nothing.          |
+| `title`       | `string \| undefined`              | `undefined` | Optional heading; sets `aria-labelledby` when present.               |
+| `description` | `string \| undefined`              | `undefined` | Optional muted paragraph under the title.                            |
+| `actions`     | `IModalAction[]`                   | `[]`        | Footer buttons; click emits `actionClick`.                           |
+| `layout`      | `SmartModalLayoutPro \| undefined` | `undefined` | Force a layout; otherwise auto-detected from `options`.              |
+| `options`     | `IModalOptionsPro \| undefined`    | `undefined` | All pro options.                                                     |
+| `class`       | `string`                           | `''`        | Forwarded to the host of the chosen layout (lands on `<el-dialog>`). |
+
+### Outputs
+
+| Output        | Payload                | When                                                                    |
+| ------------- | ---------------------- | ----------------------------------------------------------------------- |
+| `actionClick` | `{ actionId: string }` | A footer button is clicked. Consumers decide whether to call `close()`. |
+| `closed`      | `void`                 | The dismiss `×` button is clicked (when `withDismiss: true`).           |
+
+### Slots
+
+`<ng-content>` projects custom body between `description` and the footer.
+
+## Usage examples
+
+```html
+<!-- Centered single action -->
+<smartpro-modal
+  [(open)]="confirmOpen"
+  title="Deactivate account"
+  description="Are you sure you want to deactivate your account?"
+  [actions]="[{ id: 'deactivate', label: 'Deactivate', variant: 'primary' }]"
+  (actionClick)="onAction($event.actionId)"
+/>
+
+<!-- Wide with custom body -->
+<smartpro-modal
+  [(open)]="editOpen"
+  title="Edit project"
+  [actions]="[
+    { id: 'save', label: 'Save', variant: 'primary' },
+    { id: 'cancel', label: 'Cancel', variant: 'secondary' }
+  ]"
+  [options]="{ width: 'wide' }"
+>
+  <form>
+    <!-- custom fields -->
+  </form>
+</smartpro-modal>
+
+<!-- Alert -->
+<smartpro-modal
+  [(open)]="deleteOpen"
+  title="Delete account"
+  description="This action cannot be undone."
+  [actions]="[
+    { id: 'delete', label: 'Delete', variant: 'danger' },
+    { id: 'cancel', label: 'Cancel', variant: 'secondary' }
+  ]"
+  [options]="{ iconStyle: 'danger' }"
+/>
+
+<!-- With dismiss -->
+<smartpro-modal
+  [(open)]="successOpen"
+  title="Payment successful"
+  description="Your payment has been processed."
+  [actions]="[{ id: 'ok', label: 'Go to dashboard', variant: 'primary' }]"
+  [options]="{ withDismiss: true }"
+  (closed)="onDismiss()"
+/>
+
+<!-- Gray footer + left-aligned actions -->
+<smartpro-modal
+  [(open)]="settingsOpen"
+  title="Settings"
+  [actions]="[
+    { id: 'save', label: 'Save', variant: 'primary' },
+    { id: 'cancel', label: 'Cancel', variant: 'secondary' }
+  ]"
+  [options]="{ footerStylePro: 'gray', actionsAlignment: 'left' }"
+/>
+```
+
+## Accessibility
+
+- Centered: `role="dialog"` + `aria-modal="true"`; `aria-labelledby` when `title` is set, otherwise `aria-label` from `options.ariaLabel`.
+- Alert: `role="alertdialog"` for screen-reader urgency semantics.
+- Focus trap + ESC handling come from `<el-dialog>` (@tailwindplus/elements).
+- Dismiss button has `aria-label="Close"`.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/modal/modal.component.ts`
+- Types: `packages/shared/angular/src/lib/components/modal/modal.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/modal/modal-classes.util.ts`
+- Layouts: `packages/shared/angular/src/lib/components/modal/{centered,alert}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/modal/modal.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`MODAL_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `ModalBaseComponent`, `IModalAction`, `IModalOptions`.
+- `@tailwindplus/elements@^1.0.0` — runtime element bundle for `<el-dialog>`.