@smartsoft001/pro-claude-plugins 0.2.0

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

@@ -0,0 +1,168 @@
+---
+name: angular-components-command-palette
+description: Command Palette component for @smartsoft001/pro-angular. Three layouts (simple, with-preview, with-groups), auto-detected from options, with built-in filtering, dark/light mode, and @tailwindplus/elements <el-dialog> shell.
+user-invocable: false
+---
+
+# Command Palette Component (Pro)
+
+Use `<smartpro-command-palette>`. The wrapper picks one of three child layouts based on `layout` input or the shape of `options`. Within any layout, the palette filters `commands` by the bound `query` and emits `runCommand` when an item is picked.
+
+## Layouts
+
+| `layout` value       | Selector                                | Description                                                                                                                                                                                                         |
+| -------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'simple'` (default) | `smartpro-command-palette-simple`       | Search input + flat list. Supports `padding`, `appearance`, `withIcons`, `withImages`, `withFooter` to cover the Simple / With padding / With images / With icons / Semi-transparent / With footer source variants. |
+| `'with-preview'`     | `smartpro-command-palette-with-preview` | Split panel — list on the left, preview pane on the right populated from `options.previewTpl`. Pane receives the currently-focused command via `$implicit`.                                                         |
+| `'with-groups'`      | `smartpro-command-palette-with-groups`  | Grouped sections from `options.groups[]`. Each group filters independently; empty groups are hidden after filtering.                                                                                                |
+
+The wrapper auto-detects: `options.groups` → `with-groups`; `options.previewTpl` → `with-preview`; otherwise `simple`. Pass `layout` explicitly to override.
+
+## Source variant mapping
+
+| Tailwind UI variant | Pro options                                        |
+| ------------------- | -------------------------------------------------- |
+| Simple              | (defaults)                                         |
+| With padding        | `padding: 'spacious'`                              |
+| With preview        | `previewTpl: TemplateRef<{ $implicit: ICommand }>` |
+| With images         | `withImages: true` + `command.imageUrl`            |
+| With icons          | `withIcons: true` + `command.icon` (SVG path)      |
+| Semi-transparent    | `appearance: 'semi-transparent'`                   |
+| With groups         | `groups: ICommandPaletteGroup[]`                   |
+| With footer         | `withFooter: true` + `footerHintTpl?: TemplateRef` |
+
+## API
+
+### Types (`command-palette.types.ts`)
+
+```typescript
+type SmartCommandPaletteLayoutPro = 'simple' | 'with-preview' | 'with-groups';
+type SmartCommandPalettePadding = 'normal' | 'spacious';
+type SmartCommandPaletteAppearance = 'opaque' | 'semi-transparent';
+
+interface ICommandPaletteGroup {
+  id: string;
+  label: string;
+  commands: ICommand[];
+}
+
+interface ICommandPaletteOptionsPro extends ICommandPaletteOptions {
+  layout?: SmartCommandPaletteLayoutPro;
+  padding?: SmartCommandPalettePadding;
+  appearance?: SmartCommandPaletteAppearance;
+  withFooter?: boolean;
+  withIcons?: boolean;
+  withImages?: boolean;
+  footerHintTpl?: TemplateRef<unknown>;
+  previewTpl?: TemplateRef<{ $implicit: ICommand }>;
+  groups?: ICommandPaletteGroup[];
+}
+```
+
+`ICommandPaletteOptions` (re-exported from `@smartsoft001/angular`) provides `placeholder`, `emptyText`, `ariaLabel`.
+
+`ICommand` (re-exported): `{ id, label, icon?, group?, href?, description?, imageUrl? }`.
+
+### Wrapper inputs
+
+| Input      | Type                                        | Default     | Description                                                              |
+| ---------- | ------------------------------------------- | ----------- | ------------------------------------------------------------------------ |
+| `commands` | `ICommand[]`                                | `[]`        | Source list, filtered by `query` via the base `filteredCommands` signal. |
+| `open`     | `boolean` (model — two-way)                 | `false`     | Bind with `[(open)]`. When `false`, layouts render nothing.              |
+| `query`    | `string` (model — two-way)                  | `''`        | Bind with `[(query)]`. Filters case-insensitive by `label.includes`.     |
+| `layout`   | `SmartCommandPaletteLayoutPro \| undefined` | `undefined` | Force a layout; when `undefined`, auto-detects from `options`.           |
+| `options`  | `ICommandPaletteOptionsPro \| undefined`    | `undefined` | All pro options.                                                         |
+| `class`    | `string`                                    | `''`        | Forwarded to the chosen layout's host element.                           |
+
+### Outputs
+
+| Output       | Payload                 | When                                                                                   |
+| ------------ | ----------------------- | -------------------------------------------------------------------------------------- |
+| `runCommand` | `{ commandId: string }` | Emitted when a user clicks (or selects) an item; base also calls `close()` internally. |
+
+## Usage examples
+
+```html
+<!-- Simple -->
+<smartpro-command-palette
+  [commands]="commands"
+  [(open)]="paletteOpen"
+  [(query)]="paletteQuery"
+  (runCommand)="run($event.commandId)"
+/>
+
+<!-- With icons + footer hint -->
+<ng-template #hint>
+  <span class="smart:text-xs smart:text-gray-500"
+    >Type a command or press ⌘K</span
+  >
+</ng-template>
+<smartpro-command-palette
+  [commands]="commands"
+  [(open)]="open"
+  [(query)]="query"
+  [options]="{ withIcons: true, withFooter: true, footerHintTpl: hint }"
+/>
+
+<!-- With preview -->
+<ng-template #preview let-cmd>
+  <h2 class="smart:font-semibold">{{ cmd.label }}</h2>
+  <p class="smart:text-sm smart:text-gray-500">{{ cmd.description }}</p>
+</ng-template>
+<smartpro-command-palette
+  [commands]="commands"
+  [(open)]="open"
+  [options]="{ previewTpl: preview }"
+/>
+
+<!-- With groups -->
+<smartpro-command-palette
+  [(open)]="open"
+  [options]="{ groups: [
+    { id: 'recent', label: 'Recent', commands: recent },
+    { id: 'actions', label: 'Quick actions', commands: actions }
+  ] }"
+/>
+
+<!-- Semi-transparent with padding -->
+<smartpro-command-palette
+  [commands]="commands"
+  [(open)]="open"
+  [options]="{ appearance: 'semi-transparent', padding: 'spacious' }"
+/>
+```
+
+## Accessibility
+
+- Outer shell uses `<el-dialog>` from `@tailwindplus/elements` for focus trap + ESC handling.
+- Inner panel has `role="dialog"` + `aria-modal="true"` + `aria-label` from `options.ariaLabel`.
+- Search input has `role="combobox"` with `aria-controls` pointing at the listbox.
+- Each item is `role="option"`; lists use `role="listbox"`.
+
+## Global Cmd+K shortcut
+
+Not built in. Wire a host listener in your shell:
+
+```typescript
+@HostListener('window:keydown', ['$event'])
+onKey(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault();
+    this.paletteOpen.set(true);
+  }
+}
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/command-palette/command-palette.component.ts`
+- Types: `packages/shared/angular/src/lib/components/command-palette/command-palette.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/command-palette/command-palette-classes.util.ts`
+- Layouts: `packages/shared/angular/src/lib/components/command-palette/{simple,with-preview,with-groups}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/command-palette/command-palette.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`COMMAND_PALETTE_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `CommandPaletteBaseComponent`, `ICommand`, `ICommandPaletteOptions`.
+- `@tailwindplus/elements@^1.0.0` — runtime element bundle for `<el-dialog>`.

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

@@ -0,0 +1,93 @@
+---
+name: angular-components-container
+description: Layout container for @smartsoft001/pro-angular. Single `default` layout with composable options (mode, padding, narrow). Pure layout wrapper that projects `<ng-content>`.
+user-invocable: false
+---
+
+# Container Component (Pro)
+
+Use `<smartpro-container>`. A single `default` layout — pure layout wrapper that projects its content. All 5 Tailwind UI variants are composable via `IContainerOptionsPro`.
+
+## Variants matrix
+
+| Option    | Values                                                                                                                 |
+| --------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `mode`    | `'full-width'` (default — no max-width) / `'constrained'` (`max-w-7xl`) / `'container'` (responsive `container` class) |
+| `padding` | `'none'` (default) / `'mobile'` (`px-4 sm:px-6 lg:px-8`) / `'always'`                                                  |
+| `narrow`  | `true` ⇒ `constrained` becomes `max-w-3xl` instead of `max-w-7xl`                                                      |
+
+## Source variant mapping
+
+| Tailwind UI variant               | Pro options                                                   |
+| --------------------------------- | ------------------------------------------------------------- |
+| Full-width on mobile, constrained | `mode: 'constrained'`, `padding: 'mobile'`                    |
+| Constrained padded                | `mode: 'constrained'`, `padding: 'always'`                    |
+| Container mobile constrained      | `mode: 'container'`, `padding: 'mobile'`                      |
+| Container padded                  | `mode: 'container'`, `padding: 'always'`                      |
+| Narrow nested constrained         | outer `constrained` + inner `constrained` with `narrow: true` |
+
+## API
+
+### Types (`container.types.ts`)
+
+```typescript
+type SmartContainerMode = 'full-width' | 'constrained' | 'container';
+type SmartContainerPadding = 'none' | 'mobile' | 'always';
+
+interface IContainerOptionsPro extends IContainerOptions {}
+```
+
+`IContainerOptions` (re-exported from `@smartsoft001/angular`): `{ mode?, padding?, narrow? }`.
+
+### Wrapper inputs
+
+| Input     | Type                                | Default     | Description                  |
+| --------- | ----------------------------------- | ----------- | ---------------------------- |
+| `options` | `IContainerOptionsPro \| undefined` | `undefined` | Mode + padding + narrow.     |
+| `class`   | `string`                            | `''`        | Forwarded to the host `div`. |
+
+### Outputs / Slots
+
+No outputs. `<ng-content>` projects the body.
+
+## Usage examples
+
+```html
+<!-- Constrained padded (most common) -->
+<smartpro-container [options]="{ mode: 'constrained', padding: 'always' }">
+  <!-- content -->
+</smartpro-container>
+
+<!-- Full-width with mobile padding only -->
+<smartpro-container [options]="{ mode: 'constrained', padding: 'mobile' }">
+  <!-- content -->
+</smartpro-container>
+
+<!-- Responsive container class from Tailwind -->
+<smartpro-container [options]="{ mode: 'container', padding: 'always' }">
+  <!-- content -->
+</smartpro-container>
+
+<!-- Narrow nested inside constrained outer -->
+<smartpro-container [options]="{ mode: 'constrained', padding: 'mobile' }">
+  <smartpro-container
+    [options]="{ mode: 'constrained', padding: 'mobile', narrow: true }"
+  >
+    <!-- narrow content -->
+  </smartpro-container>
+</smartpro-container>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/container/container.component.ts`
+- Types: `packages/shared/angular/src/lib/components/container/container.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/container/container-classes.util.ts`
+- Layout: `packages/shared/angular/src/lib/components/container/default/default.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/container/container.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`CONTAINER_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `ContainerBaseComponent`, `IContainerOptions`.
+- No `@tailwindplus/elements` dep required.

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

@@ -0,0 +1,102 @@
+---
+name: angular-components-description-list
+description: Description list component for @smartsoft001/pro-angular. Four layouts (left-aligned, left-aligned-card, two-column, narrow-hidden-labels). The left-aligned layout supports `striped` and `inlineActions` options for alternating row backgrounds and per-item inline action slots.
+user-invocable: false
+---
+
+# Description List Component (Pro)
+
+Use `<smartpro-description-list>`. Pick a layout via `variant`. The component iterates `options.items: IDescriptionListItem[]` and renders `dt` / `dd` pairs. `attachmentsTpl` (extra full-width row) and `footerTpl` (download link, etc.) are optional. `CUSTOM_ELEMENTS_SCHEMA` is set on each variant.
+
+## Layouts
+
+| `variant` (default `'left-aligned'`) | Selector                                         | Description                                                                                                                                                                                                   |
+| ------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'left-aligned'`                     | `smartpro-description-list-left-aligned`         | Plain `dl`, divided rows, 3-col grid (label / value × 2). Supports `options.striped` for alternating row backgrounds and `options.inlineActions` to render each item's `actionTpl` on the right of its value. |
+| `'left-aligned-card'`                | `smartpro-description-list-left-aligned-card`    | Same row layout wrapped in a white rounded shadow card.                                                                                                                                                       |
+| `'two-column'`                       | `smartpro-description-list-two-column`           | `grid-cols-2` per item; attachments span 2.                                                                                                                                                                   |
+| `'narrow-hidden-labels'`             | `smartpro-description-list-narrow-hidden-labels` | Summary card with `sr-only` labels (icons via `valueTpl`) + footer link.                                                                                                                                      |
+
+## API
+
+### IDescriptionListOptionsPro (`description-list.types.ts`, extends `IDescriptionListOptions`)
+
+```typescript
+interface IDescriptionListOptionsPro {
+  title?: string;
+  description?: string;
+  items?: IDescriptionListItem[];
+  attachmentsTpl?: TemplateRef<unknown>;
+  footerTpl?: TemplateRef<unknown>;
+  /** left-aligned only — alternating row backgrounds. */
+  striped?: boolean;
+  /** left-aligned only — render each item's `actionTpl` inline beside its value. */
+  inlineActions?: boolean;
+}
+
+interface IDescriptionListItem {
+  label: string;
+  value?: string;
+  valueTpl?: TemplateRef<unknown>;
+  actionTpl?: TemplateRef<unknown>;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                                                              | Default          | Description                                |
+| --------- | --------------------------------------------------------------------------------- | ---------------- | ------------------------------------------ |
+| `variant` | `'left-aligned' \| 'left-aligned-card' \| 'two-column' \| 'narrow-hidden-labels'` | `'left-aligned'` | Layout family.                             |
+| `options` | `IDescriptionListOptionsPro \| undefined`                                         | `undefined`      | Title, description, items, slots, flags.   |
+| `class`   | `string`                                                                          | `''`             | Extra CSS classes appended to the wrapper. |
+
+## Usage Examples
+
+```html
+<!-- Plain left-aligned list -->
+<smartpro-description-list
+  [options]="{
+    title: 'Applicant Information',
+    description: 'Personal details and application.',
+    items: [
+      { label: 'Full name', value: 'Margot Foster' },
+      { label: 'Email', value: 'margotfoster@example.com' }
+    ]
+  }"
+/>
+
+<!-- Striped rows -->
+<smartpro-description-list
+  [options]="{
+    title: 'Applicant Information',
+    items: [...],
+    striped: true
+  }"
+/>
+
+<!-- Inline actions per item -->
+<ng-template #editName><button>Edit</button></ng-template>
+<smartpro-description-list
+  [options]="{
+    items: [{ label: 'Full name', value: 'Margot Foster', actionTpl: editName }],
+    inlineActions: true
+  }"
+/>
+
+<!-- Wrapped in card -->
+<smartpro-description-list variant="left-aligned-card" [options]="{...}" />
+
+<!-- Two-column grid -->
+<smartpro-description-list variant="two-column" [options]="{...}" />
+
+<!-- Narrow with hidden labels (summary card) -->
+<smartpro-description-list variant="narrow-hidden-labels" [options]="{...}" />
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/description-list/description-list.component.ts`
+- Types: `packages/shared/angular/src/lib/components/description-list/description-list.types.ts`
+- Layouts: `packages/shared/angular/src/lib/components/description-list/{left-aligned,left-aligned-card,two-column,narrow-hidden-labels}/<name>.component.ts`
+- Shared class utilities: `packages/shared/angular/src/lib/components/description-list/description-list-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/description-list/description-list.component.stories.ts`

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

@@ -0,0 +1,70 @@
+---
+name: angular-components-details
+description: Details variants for @smartsoft001/pro-angular — 6 Tailwind UI templates pluggable into the fork's <smartpro-details> via DETAILS_STANDARD_COMPONENT_TOKEN
+user-invocable: false
+---
+
+# Details Variants (pro)
+
+This package provides six standalone details variants derived from Tailwind UI. Each variant extends `DetailsBaseComponent<T>` from `@smartsoft001/angular` and is meant to replace the fork's default `DetailsStandardComponent` by providing `DETAILS_STANDARD_COMPONENT_TOKEN`.
+
+## When to Use This Skill
+
+- Developer wants a specific details layout → pick the matching variant and register it via the DI token
+- Developer asks which details variants exist → list the 6 components below
+- Developer wants to see all variants → open the `Components / Details` Storybook entry (6 stories + `All variants` gallery, dark/light toggle via global theme toolbar)
+
+## Available Variants
+
+| Component                            | Selector                                | When to pick it                                          |
+| ------------------------------------ | --------------------------------------- | -------------------------------------------------------- |
+| `DetailsLeftAlignedComponent`        | `smartpro-details-left-aligned`         | Default left-aligned layout, dl with divide-y separators |
+| `DetailsLeftAlignedCardComponent`    | `smartpro-details-left-aligned-card`    | Left-aligned wrapped in a rounded card with shadow       |
+| `DetailsLeftAlignedStripedComponent` | `smartpro-details-left-aligned-striped` | Alternating gray/white row backgrounds                   |
+| `DetailsTwoColumnComponent`          | `smartpro-details-two-column`           | Two-column responsive grid layout                        |
+| `DetailsLeftAlignedActionsComponent` | `smartpro-details-left-aligned-actions` | Left-aligned with inline action slot per row             |
+| `DetailsNarrowHiddenLabelsComponent` | `smartpro-details-narrow-hidden-labels` | Compact summary card with hidden labels (sr-only)        |
+
+## Registration
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { DETAILS_STANDARD_COMPONENT_TOKEN } from '@smartsoft001/angular';
+import { DetailsLeftAlignedCardComponent } from '@smartsoft001/pro-angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: DETAILS_STANDARD_COMPONENT_TOKEN,
+      useValue: DetailsLeftAlignedCardComponent,
+    },
+  ],
+};
+```
+
+The fork's `<smartpro-details>` wrapper reads the token and renders the provided component. The variant iterates over fields (computed from `@Field({ details: true })` model decorators) and renders each value via `<smartpro-detail>`.
+
+## Consumer API (inherited from `DetailsBaseComponent`)
+
+| Input     | Type                 | Required | Description                                                |
+| --------- | -------------------- | -------- | ---------------------------------------------------------- |
+| `options` | `IDetailsOptions<T>` | yes      | `{ type, item, loading?, cellPipe?, componentFactories? }` |
+| `class`   | `string`             | no       | Extra CSS classes on the container                         |
+
+Each variant exposes a `containerClasses()` computed signal that combines variant-specific Tailwind classes with the optional external `class` input.
+
+## Dark/Light Mode
+
+Every variant uses the `smart:` Tailwind prefix with paired `smart:dark:*` classes. Storybook exposes a global theme toolbar (`light` / `dark`) defined in `.storybook/preview.ts` — stories render in whichever mode the toolbar is set to.
+
+## File Locations
+
+- Variants: `packages/shared/angular/src/lib/components/details/<variant>/`
+- Barrel: `packages/shared/angular/src/lib/components/details/index.ts` — exports all 6 components
+- Stories: `packages/shared/angular/src/lib/components/details/details.component.stories.ts` (6 stories + `All variants`)
+- Module registration: `packages/shared/angular/src/lib/components/components.module.ts` (`DETAILS_COMPONENTS`)
+- Base class + `DETAILS_STANDARD_COMPONENT_TOKEN`: re-exported from `@smartsoft001/angular`
+
+## Tailwind Classes
+
+All classes use the `smart:` prefix. The neutral container family uses `smart:border-t smart:border-gray-100 smart:dark:border-white/10`. The card family adds `smart:rounded-lg smart:bg-white smart:shadow-sm` plus `smart:dark:bg-gray-800/50` and `smart:dark:inset-ring-white/10`. The striped variant alternates `smart:bg-gray-50` / `smart:bg-white` (dark: `gray-800/25` / `gray-900`). The narrow summary variant uses `smart:rounded-lg smart:bg-gray-50 smart:outline-1` (dark: `gray-800/50` / `outline-white/10`) and hides labels via `smart:[&_dt]:sr-only`.

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

@@ -0,0 +1,110 @@
+---
+name: angular-components-divider
+description: Horizontal separator / section header for @smartsoft001/pro-angular. Two layouts (simple, with-toolbar), 8 source variants via composable inputs (label, iconName, title, actionLabel) and `options.position`.
+user-invocable: false
+---
+
+# Divider Component (Pro)
+
+Use `<smartpro-divider>`. A semantic separator that can act as a plain divider, a labeled / iconified divider, a section title, or a section toolbar with actions.
+
+## Layouts
+
+| `layout` (auto-detected) | Selector                        | Description                                                                                                                                                                               |
+| ------------------------ | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'simple'` (default)     | `smartpro-divider-simple`       | `<hr>` if no slots provided; otherwise a horizontal line interrupted by a centered (or left/right) `label` / `iconName` / `title`.                                                        |
+| `'with-toolbar'`         | `smartpro-divider-with-toolbar` | Row with `title` on the left and a primary action button (`actionLabel`) on the right. Extra trailing actions via `<ng-content>`. Triggered automatically when `actionLabel` is provided. |
+
+## Source variant mapping
+
+| Tailwind UI variant | Pro inputs / options                                               |
+| ------------------- | ------------------------------------------------------------------ |
+| With label          | `label: 'Continue'`                                                |
+| With icon           | `iconName: '<svg path d>'`                                         |
+| Label on left       | `label`, `options.position: 'left'`                                |
+| With title          | `title: 'Section'`                                                 |
+| Title on left       | `title`, `options.position: 'left'`                                |
+| With button         | `actionLabel: 'Add'` (auto-selects `with-toolbar`)                 |
+| Title and button    | `title`, `actionLabel`                                             |
+| With toolbar        | `title`, `actionLabel`, projected extra actions via `<ng-content>` |
+
+Plain `<hr>` separator: render `<smartpro-divider />` with no inputs.
+
+## API
+
+### Types (`divider.types.ts`)
+
+```typescript
+type SmartDividerLayoutPro = 'simple' | 'with-toolbar';
+type SmartDividerPosition = 'left' | 'center' | 'right';
+
+interface IDividerOptionsPro extends IDividerOptions {
+  layout?: SmartDividerLayoutPro;
+}
+```
+
+`IDividerOptions` (re-exported from `@smartsoft001/angular`): `{ variant?: SmartDividerVariant, position?: 'left' | 'center' | 'right' }`.
+
+### Wrapper inputs
+
+| Input         | Type                                 | Default     | Description                                                                 |
+| ------------- | ------------------------------------ | ----------- | --------------------------------------------------------------------------- |
+| `label`       | `string \| undefined`                | `undefined` | Inline label centered (or positioned) on the line.                          |
+| `iconName`    | `string \| undefined`                | `undefined` | SVG path `d` for an inline icon (takes priority over `label`).              |
+| `title`       | `string \| undefined`                | `undefined` | Semantic heading (takes priority over `label` / `iconName`).                |
+| `actionLabel` | `string \| undefined`                | `undefined` | When set, switches to `with-toolbar` and renders the primary action button. |
+| `layout`      | `SmartDividerLayoutPro \| undefined` | `undefined` | Force a layout; otherwise auto-detected.                                    |
+| `options`     | `IDividerOptionsPro \| undefined`    | `undefined` | `position` for label/title alignment.                                       |
+| `class`       | `string`                             | `''`        | Forwarded to the host of the chosen layout.                                 |
+
+### Outputs / Slots
+
+| Output        | Payload | When                               |
+| ------------- | ------- | ---------------------------------- |
+| `actionClick` | `void`  | The primary action button clicked. |
+
+`<ng-content>` projects extra trailing actions in the `with-toolbar` layout.
+
+## Usage examples
+
+```html
+<!-- Plain hr -->
+<smartpro-divider />
+
+<!-- With label -->
+<smartpro-divider label="Continue" />
+
+<!-- With icon -->
+<smartpro-divider [iconName]="sparkles" />
+
+<!-- Title on left -->
+<smartpro-divider title="Section" [options]="{ position: 'left' }" />
+
+<!-- With button (auto-toolbar) -->
+<smartpro-divider actionLabel="Add" (actionClick)="add()" />
+
+<!-- Toolbar with projected extras -->
+<smartpro-divider title="Members" actionLabel="Invite" (actionClick)="invite()">
+  <button class="…">Filter</button>
+  <button class="…">Sort</button>
+</smartpro-divider>
+```
+
+## Accessibility
+
+- Plain divider renders `<hr role="separator" aria-orientation="horizontal">` (the `<div>` wrapper carries the role when content is present).
+- Toolbar variant uses `role="separator"` on the row; the action button is a regular `<button>` and can be operated via keyboard.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/divider/divider.component.ts`
+- Types: `packages/shared/angular/src/lib/components/divider/divider.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/divider/divider-classes.util.ts`
+- Layouts: `packages/shared/angular/src/lib/components/divider/{simple,with-toolbar}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/divider/divider.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`DIVIDER_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `DividerBaseComponent`, `IDividerOptions`.
+- No `@tailwindplus/elements` dep required.