@smartsoft001/pro-claude-plugins 0.2.0

package/plugins/smart-pro/skills/angular-components-multi-column-layout/SKILL.md

@@ -0,0 +1,84 @@
+---
+name: angular-components-multi-column-layout
+description: Multi-column layout component for @smartsoft001/pro-angular. Three variants (constrained, full-width, narrow-sidebar) with composable flags (`sticky`, `secondaryRight`, `hasHeader`).
+user-invocable: false
+---
+
+# Multi-Column Layout Component (Pro)
+
+Use `<smartpro-multi-column-layout>` and pick a variant via `variant`. Each variant renders a three-column page shell — a primary navigation column on the left, a main content area, and an optional secondary aside. Slots come from `IMultiColumnLayoutOptionsPro.navTpl` / `secondaryTpl` / `headerTpl`. Page body goes via `<ng-content>`.
+
+## Variants
+
+| `variant` (default `'constrained'`) | Selector                                      | Description                                                                                                                                                                                                                                                                        |
+| ----------------------------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'constrained'`                     | `smartpro-multi-column-layout-constrained`    | Constrained `max-w-7xl` row with primary nav, main, and secondary aside. Default uses an `xl` breakpoint with a left-bordered secondary aside. `sticky: true` switches to `lg` breakpoint with sticky `top-8` primary nav and sticky aside (no border).                            |
+| `'full-width'`                      | `smartpro-multi-column-layout-full-width`     | Full-width shell with a fixed primary nav column on the left and a fixed secondary aside. Default places the aside on the left (next to the nav, with `xl:pl-96` main offset). `secondaryRight: true` puts the aside on the right (with `xl:pr-96` main offset and a left border). |
+| `'narrow-sidebar'`                  | `smartpro-multi-column-layout-narrow-sidebar` | Narrow (`w-20`) dark rail nav on the left + secondary aside + main. `hasHeader: true` adds a sticky `headerTpl` row on top and offsets the rail and aside below it.                                                                                                                |
+
+## API
+
+### IMultiColumnLayoutOptionsPro (`multi-column-layout.types.ts`, extends `IMultiColumnLayoutOptions`)
+
+```typescript
+type SmartMultiColumnLayoutVariantPro =
+  | 'constrained'
+  | 'full-width'
+  | 'narrow-sidebar';
+
+interface IMultiColumnLayoutOptionsPro {
+  title?: string;
+  navTpl?: TemplateRef<unknown>;
+  secondaryTpl?: TemplateRef<unknown>;
+  headerTpl?: TemplateRef<unknown>;
+  sticky?: boolean;
+  secondaryRight?: boolean;
+  hasHeader?: boolean;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                                | Default         | Description          |
+| --------- | --------------------------------------------------- | --------------- | -------------------- |
+| `variant` | `'constrained' \| 'full-width' \| 'narrow-sidebar'` | `'constrained'` | Variant family.      |
+| `options` | `IMultiColumnLayoutOptionsPro \| undefined`         | `undefined`     | Title, slots, flags. |
+| `class`   | `string`                                            | `''`            | Extra CSS classes.   |
+
+## Usage Example
+
+```html
+<ng-template #nav><nav>…</nav></ng-template>
+<ng-template #secondary><aside>…</aside></ng-template>
+<ng-template #header><div>…</div></ng-template>
+
+<!-- Constrained, sticky -->
+<smartpro-multi-column-layout
+  [options]="{ navTpl: nav, secondaryTpl: secondary, sticky: true }"
+>
+  <div>Page content</div>
+</smartpro-multi-column-layout>
+
+<!-- Full-width with secondary on the right -->
+<smartpro-multi-column-layout
+  variant="full-width"
+  [options]="{ navTpl: nav, secondaryTpl: secondary, secondaryRight: true }"
+>
+  <div>Page content</div>
+</smartpro-multi-column-layout>
+
+<!-- Narrow sidebar with header -->
+<smartpro-multi-column-layout
+  variant="narrow-sidebar"
+  [options]="{ navTpl: nav, secondaryTpl: secondary, headerTpl: header, hasHeader: true }"
+>
+  <div>Page content</div>
+</smartpro-multi-column-layout>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/multi-column-layout/multi-column-layout.component.ts`
+- Types: `packages/shared/angular/src/lib/components/multi-column-layout/multi-column-layout.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/multi-column-layout/{constrained,full-width,narrow-sidebar}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/multi-column-layout/multi-column-layout.component.stories.ts`

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

@@ -0,0 +1,93 @@
+---
+name: angular-components-navbar
+description: Navbar component for @smartsoft001/pro-angular. Five layouts (simple, with-search, with-quick-action, with-secondary-links, with-column-layout) with composable flags `menuPosition`, `searchAlignment`, and `dark`.
+user-invocable: false
+---
+
+# Navbar Component (Pro)
+
+Use `<smartpro-navbar>` and pick a layout via `options.layout`. The component renders a top-of-page navigation bar with logo, items, optional notification + user menu slots, and a mobile-menu toggle. Each layout supports a `dark` flag for dark-themed surfaces.
+
+## Layouts
+
+| `options.layout` (default `'simple'`) | Selector                               | Description                                                                                                                                                                                                                                                                        |
+| ------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'simple'`                            | `smartpro-navbar-simple`               | Logo + horizontal items + notification/user-menu slots. `menuPosition: 'left'` switches to the menu-on-left layout (logo and items grouped on the left, user menu on the right) — replaces the legacy `simple-with-menu-on-left` variant.                                          |
+| `'with-search'`                       | `smartpro-navbar-with-search`          | Logo + items + search box + notification/user-menu. Default puts the search box on the right (`searchAlignment: 'left'`). `searchAlignment: 'centered'` switches to a centered search box with `secondaryItems` on the right — replaces the legacy `with-centered-search` variant. |
+| `'with-quick-action'`                 | `smartpro-navbar-with-quick-action`    | Logo + items + a primary CTA button slot.                                                                                                                                                                                                                                          |
+| `'with-secondary-links'`              | `smartpro-navbar-with-secondary-links` | Logo + items + a row of secondary text links and the user menu.                                                                                                                                                                                                                    |
+| `'with-column-layout'`                | `smartpro-navbar-with-column-layout`   | Logo + multi-column dropdown menus + user menu.                                                                                                                                                                                                                                    |
+
+## API
+
+### INavbarOptionsPro (`navbar.types.ts`, omits + redefines `layout`)
+
+```typescript
+type SmartNavbarLayoutPro =
+  | 'simple'
+  | 'with-search'
+  | 'with-quick-action'
+  | 'with-secondary-links'
+  | 'with-column-layout';
+
+interface INavbarOptionsPro {
+  layout?: SmartNavbarLayoutPro;
+  dark?: boolean;
+  logoUrl?: string;
+  logoAlt?: string;
+  logoHref?: string;
+  logoTpl?: TemplateRef<unknown>;
+  items?: INavbarItem[];
+  secondaryItems?: INavbarItem[];
+  searchTpl?: TemplateRef<unknown>;
+  notificationTpl?: TemplateRef<unknown>;
+  userMenuTpl?: TemplateRef<unknown>;
+  menuPosition?: 'right' | 'left';
+  searchAlignment?: 'left' | 'centered';
+}
+```
+
+### Wrapper Inputs
+
+| Input            | Type                             | Default     | Description                      |
+| ---------------- | -------------------------------- | ----------- | -------------------------------- |
+| `options`        | `INavbarOptionsPro \| undefined` | `undefined` | Layout + items + slots + flags.  |
+| `mobileMenuOpen` | `boolean` (model)                | `false`     | Two-way bound mobile menu state. |
+| `class`          | `string`                         | `''`        | Extra CSS classes.               |
+
+Output: `itemClick: INavbarItemClick` (`{ itemId }`).
+
+## Usage Example
+
+```html
+<!-- Default simple navbar -->
+<smartpro-navbar [options]="{ logoUrl: '...', items }"></smartpro-navbar>
+
+<!-- Menu on left -->
+<smartpro-navbar
+  [options]="{ logoUrl: '...', items, menuPosition: 'left' }"
+></smartpro-navbar>
+
+<!-- With search on the right -->
+<smartpro-navbar
+  [options]="{ layout: 'with-search', logoUrl: '...', items, searchTpl: search }"
+></smartpro-navbar>
+
+<!-- With centered search and secondary items -->
+<smartpro-navbar
+  [options]="{
+    layout: 'with-search',
+    searchAlignment: 'centered',
+    logoUrl: '...',
+    secondaryItems,
+    searchTpl: search
+  }"
+></smartpro-navbar>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/navbar/navbar.component.ts`
+- Types: `packages/shared/angular/src/lib/components/navbar/navbar.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/navbar/{simple,with-search,with-quick-action,with-secondary-links,with-column-layout}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/navbar/navbar.component.stories.ts`

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

@@ -0,0 +1,147 @@
+---
+name: angular-components-notification
+description: Notification (toast / inline alert) for @smartsoft001/pro-angular. Two layouts (simple, condensed), 6 source variants via composable options (iconStyle, actionsPosition, withAvatar).
+user-invocable: false
+---
+
+# Notification Component (Pro)
+
+Use `<smartpro-notification>`. The wrapper picks one of two child layouts based on `layout` input or `options.condensed`.
+
+## Layouts
+
+| `layout` (auto-detected) | Selector                          | Description                                                                                                                                                                                        |
+| ------------------------ | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'simple'` (default)     | `smartpro-notification-simple`    | Full toast — icon/avatar + title + description + actions (inline / below / split) + close. Covers Simple, With actions below, With avatar, With split buttons, With buttons below source variants. |
+| `'condensed'`            | `smartpro-notification-condensed` | Single-line variant — title + inline actions + close. No description, no icon. Triggered by `options.condensed: true`.                                                                             |
+
+## Source variant mapping
+
+| Tailwind UI variant | Pro options                                                    |
+| ------------------- | -------------------------------------------------------------- |
+| Simple              | `iconStyle: 'success' \| 'error' \| 'info' \| 'warning'`       |
+| Condensed           | `condensed: true`                                              |
+| With actions below  | `actionsPosition: 'below'`                                     |
+| With avatar         | `avatarUrl: '...'` (or `withAvatar: true` for a reserved slot) |
+| With split buttons  | `actionsPosition: 'split'`                                     |
+| With buttons below  | `actionsPosition: 'below'`                                     |
+
+## API
+
+### Types (`notification.types.ts`)
+
+```typescript
+type SmartNotificationLayoutPro = 'simple' | 'condensed';
+type SmartNotificationActionsPosition = 'inline' | 'below' | 'split';
+type SmartNotificationIconStyle =
+  | 'none'
+  | 'success'
+  | 'error'
+  | 'info'
+  | 'warning';
+
+interface INotificationOptionsPro extends INotificationOptions {
+  layout?: SmartNotificationLayoutPro;
+  condensed?: boolean;
+  actionsPosition?: SmartNotificationActionsPosition;
+  withAvatar?: boolean;
+  iconStyle?: SmartNotificationIconStyle;
+}
+```
+
+`INotificationOptions` (re-exported from `@smartsoft001/angular`) provides `ariaLive: 'polite' | 'assertive'`.
+
+### Wrapper inputs
+
+| Input         | Type                                   | Default     | Description                                                                      |
+| ------------- | -------------------------------------- | ----------- | -------------------------------------------------------------------------------- |
+| `title`       | `string` (required)                    | —           | Notification heading.                                                            |
+| `description` | `string \| undefined`                  | `undefined` | Optional muted paragraph (simple layout only).                                   |
+| `iconName`    | `string \| undefined`                  | `undefined` | SVG path `d` for a custom leading icon. Used with `iconStyle`.                   |
+| `avatarUrl`   | `string \| undefined`                  | `undefined` | Avatar image URL; auto-promotes the leading slot to avatar mode.                 |
+| `actions`     | `INotificationAction[]`                | `[]`        | Action buttons. Click emits `actionClick`.                                       |
+| `dismissible` | `boolean`                              | `false`     | When true, renders an `×` close button that emits `dismissed`.                   |
+| `layout`      | `'simple' \| 'condensed' \| undefined` | `undefined` | Force a layout; otherwise auto-detected from `options.condensed`.                |
+| `options`     | `INotificationOptionsPro \| undefined` | `undefined` | All pro options.                                                                 |
+| `class`       | `string`                               | `''`        | Forwarded to the host of the chosen layout (lands on the `[role="status"]` div). |
+
+### Outputs
+
+| Output        | Payload                | When                   |
+| ------------- | ---------------------- | ---------------------- |
+| `dismissed`   | `void`                 | Close button clicked.  |
+| `actionClick` | `{ actionId: string }` | Action button clicked. |
+
+## Usage examples
+
+```html
+<!-- Simple success toast -->
+<smartpro-notification
+  title="Successfully saved!"
+  description="Anyone with a link can now view this file."
+  [dismissible]="true"
+  [options]="{ iconStyle: 'success' }"
+/>
+
+<!-- Condensed -->
+<smartpro-notification
+  title="Discussion archived"
+  [actions]="[
+    { id: 'undo', label: 'Undo', variant: 'primary' },
+    { id: 'dismiss', label: 'Dismiss', variant: 'secondary' }
+  ]"
+  [dismissible]="true"
+  [options]="{ condensed: true }"
+/>
+
+<!-- With avatar + reply action -->
+<smartpro-notification
+  title="Emilia Birch"
+  description="Mentioned you in Front End Workflow."
+  avatarUrl="/img/avatar.png"
+  [actions]="[{ id: 'reply', label: 'Reply', variant: 'primary' }]"
+  [dismissible]="true"
+/>
+
+<!-- Actions below description -->
+<smartpro-notification
+  title="Discussion moved"
+  description="…"
+  [actions]="[
+    { id: 'undo', label: 'Undo', variant: 'primary' },
+    { id: 'dismiss', label: 'Dismiss', variant: 'secondary' }
+  ]"
+  [options]="{ iconStyle: 'info', actionsPosition: 'below' }"
+/>
+
+<!-- Split buttons (two side-by-side at the bottom) -->
+<smartpro-notification
+  title="New software update available"
+  description="…"
+  [actions]="[
+    { id: 'update', label: 'Update', variant: 'primary' },
+    { id: 'later', label: 'Later', variant: 'secondary' }
+  ]"
+  [options]="{ actionsPosition: 'split', iconStyle: 'info' }"
+/>
+```
+
+## Accessibility
+
+- `role="status"` on the outer container; `aria-live` driven by `options.ariaLive` (`'polite'` default, `'assertive'` for urgent).
+- Close button has `aria-label="Close"`.
+- Icon SVGs use `aria-hidden="true"`; meaning is carried by the title text.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/notification/notification.component.ts`
+- Types: `packages/shared/angular/src/lib/components/notification/notification.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/notification/notification-classes.util.ts`
+- Layouts: `packages/shared/angular/src/lib/components/notification/{simple,condensed}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/notification/notification.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`NOTIFICATION_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `NotificationBaseComponent`, `INotificationAction`, `INotificationOptions`.
+- No `@tailwindplus/elements` dep required.

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

@@ -0,0 +1,162 @@
+---
+name: angular-components-page
+description: Page layout variants for @smartsoft001/pro-angular — 26 Tailwind UI templates pluggable into the fork's <smartpro-page> via PAGE_VARIANT_COMPONENTS_TOKEN
+user-invocable: false
+---
+
+# Page Variants (pro)
+
+This package provides twenty-six standalone page variants derived from Tailwind UI, organised into three groups (Page Header, Stacked Layouts, Sidebar Layouts). Each variant extends `PageBaseComponent` from `@smartsoft001/angular` and is registered through the `PAGE_VARIANT_COMPONENTS_TOKEN` map so the fork's `<smartpro-page>` wrapper can resolve it by its `variant` slug.
+
+## When to Use This Skill
+
+- Developer wants a specific page layout → pick the matching variant and register it via the DI token map (or rely on `SmartProComponentsModule` which registers all 26)
+- Developer asks which variants exist → show the three group tables below
+- Developer wants to see all variants → open the `Components / Page` Storybook entry (26 stories + `All variants` gallery, dark/light toggle via global theme toolbar)
+
+## Available Variants
+
+### Page Header (9)
+
+| Component                                    | Selector                                          | When to pick it                                   |
+| -------------------------------------------- | ------------------------------------------------- | ------------------------------------------------- |
+| `PageWithActionsComponent`                   | `smartpro-page-with-actions`                      | Title + action buttons                            |
+| `PageWithActionsAndBreadcrumbsComponent`     | `smartpro-page-with-actions-and-breadcrumbs`      | Title + actions, with breadcrumbs row above       |
+| `PageWithMetaAndActionsComponent`            | `smartpro-page-with-meta-and-actions`             | Title + meta info line + actions                  |
+| `PageWithBannerImageComponent`               | `smartpro-page-with-banner-image`                 | Hero banner image, title overlayed below          |
+| `PageWithAvatarAndActionsComponent`          | `smartpro-page-with-avatar-and-actions`           | Avatar on the left of the title + actions         |
+| `PageCardWithAvatarAndStatsComponent`        | `smartpro-page-card-with-avatar-and-stats`        | Card-style header: avatar + title + stats row     |
+| `PageWithMetaActionsAndBreadcrumbsComponent` | `smartpro-page-with-meta-actions-and-breadcrumbs` | Breadcrumbs + title + meta + actions (everything) |
+| `PageWithFiltersAndActionComponent`          | `smartpro-page-with-filters-and-action`           | Title + filter controls row + action              |
+| `PageWithLogoMetaAndActionsComponent`        | `smartpro-page-with-logo-meta-and-actions`        | Logo block + meta details + actions               |
+
+### Stacked Layouts (9)
+
+| Component                                      | Selector                                             | When to pick it                                            |
+| ---------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------- |
+| `PageWithBottomBorderComponent`                | `smartpro-page-with-bottom-border`                   | Top nav + page header with bottom border                   |
+| `PageOnSubtleBackgroundComponent`              | `smartpro-page-on-subtle-background`                 | Subtle gray background with top nav                        |
+| `PageWithLighterPageHeaderComponent`           | `smartpro-page-with-lighter-page-header`             | Top nav + lighter-toned page header                        |
+| `PageBrandedNavCompactLighterHeaderComponent`  | `smartpro-page-branded-nav-compact-lighter-header`   | Branded dense nav + compact lighter header                 |
+| `PageWithOverlapComponent`                     | `smartpro-page-with-overlap`                         | Overlap header over main content card                      |
+| `PageBrandNavWithOverlapComponent`             | `smartpro-page-brand-nav-with-overlap`               | Branded nav with overlap header                            |
+| `PageBrandedNavWithLighterPageHeaderComponent` | `smartpro-page-branded-nav-with-lighter-page-header` | Branded nav paired with a lighter page header              |
+| `PageWithCompactLighterPageHeaderComponent`    | `smartpro-page-with-compact-lighter-page-header`     | Compact lighter header, dense top nav                      |
+| `PageTwoRowNavigationWithOverlapComponent`     | `smartpro-page-two-row-navigation-with-overlap`      | Two-row navigation (primary + secondary) with overlap card |
+
+### Sidebar Layouts (8)
+
+| Component                                 | Selector                                      | When to pick it                             |
+| ----------------------------------------- | --------------------------------------------- | ------------------------------------------- |
+| `PageSimpleSidebarComponent`              | `smartpro-page-simple-sidebar`                | Light sidebar + plain content area          |
+| `PageSimpleDarkSidebarComponent`          | `smartpro-page-simple-dark-sidebar`           | Dark sidebar + plain content area           |
+| `PageSidebarWithHeaderComponent`          | `smartpro-page-sidebar-with-header`           | Light sidebar + top header bar              |
+| `PageDarkSidebarWithHeaderComponent`      | `smartpro-page-dark-sidebar-with-header`      | Dark sidebar + top header bar               |
+| `PageWithConstrainedContentAreaComponent` | `smartpro-page-with-constrained-content-area` | Sidebar + centered max-width content column |
+| `PageWithOffWhiteBackgroundComponent`     | `smartpro-page-with-off-white-background`     | Sidebar + off-white content background      |
+| `PageSimpleBrandSidebarComponent`         | `smartpro-page-simple-brand-sidebar`          | Branded-colour sidebar + plain content      |
+| `PageBrandSidebarWithHeaderComponent`     | `smartpro-page-brand-sidebar-with-header`     | Branded-colour sidebar + top header bar     |
+
+## Registration
+
+```typescript
+import { ApplicationConfig, Type } from '@angular/core';
+import {
+  PageBaseComponent,
+  PAGE_VARIANT_COMPONENTS_TOKEN,
+  SmartPageVariant,
+} from '@smartsoft001/angular';
+import {
+  PageWithActionsComponent,
+  PageSimpleSidebarComponent,
+  // ... other variants you need
+} from '@smartsoft001/pro-angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: PAGE_VARIANT_COMPONENTS_TOKEN,
+      useValue: {
+        'with-actions': PageWithActionsComponent,
+        'simple-sidebar': PageSimpleSidebarComponent,
+        // ...
+      } satisfies Partial<Record<SmartPageVariant, Type<PageBaseComponent>>>,
+    },
+  ],
+};
+```
+
+Pro's `SmartProComponentsModule` already registers the full 26-entry map under `PAGE_VARIANT_COMPONENTS_TOKEN`. Apps that import this module get every variant automatically, so most consumers do not need to register variants manually — just set `options.variant` to the slug you want. Manual registration is only needed when cherry-picking a subset or when replacing individual entries.
+
+## Consumer API (`IPageOptions`, inherited from fork)
+
+| Field            | Type                                                 | Required | Description                                                               |
+| ---------------- | ---------------------------------------------------- | -------- | ------------------------------------------------------------------------- |
+| `title`          | `string`                                             | yes      | Page title                                                                |
+| `variant`        | `SmartPageVariant`                                   | no       | Variant slug — picks which component renders                              |
+| `hideHeader`     | `boolean`                                            | no       | Hide the header region entirely                                           |
+| `showBackButton` | `boolean`                                            | no       | Render a back button                                                      |
+| `endButtons`     | `Array<IIconButtonOptions>`                          | no       | Action buttons on the right of the header                                 |
+| `search`         | `{ text: Signal<string>; set: (t: string) => void }` | no       | Inline search control                                                     |
+| `bodyTpl`        | `TemplateRef<unknown>`                               | no       | Main content template (defaults to projected `<ng-content>`)              |
+| `breadcrumbsTpl` | `TemplateRef<unknown>`                               | no       | Breadcrumbs slot                                                          |
+| `metaTpl`        | `TemplateRef<unknown>`                               | no       | Meta row slot                                                             |
+| `avatarTpl`      | `TemplateRef<unknown>`                               | no       | Avatar slot                                                               |
+| `bannerTpl`      | `TemplateRef<unknown>`                               | no       | Banner image slot                                                         |
+| `filtersTpl`     | `TemplateRef<unknown>`                               | no       | Filters row slot                                                          |
+| `logoTpl`        | `TemplateRef<unknown>`                               | no       | Logo slot                                                                 |
+| `statsTpl`       | `TemplateRef<unknown>`                               | no       | Stats row slot                                                            |
+| `subtitleTpl`    | `TemplateRef<unknown>`                               | no       | Subtitle slot                                                             |
+| `navTpl`         | `TemplateRef<unknown>`                               | no       | Top nav slot (stacked layouts) / header bar (sidebar layouts with header) |
+| `sidebarTpl`     | `TemplateRef<unknown>`                               | no       | Side rail slot (sidebar layouts)                                          |
+
+## Slot Usage by Variant Family
+
+- **Page Header group** — always uses `bodyTpl`. Additional slots vary by variant: `breadcrumbsTpl`, `metaTpl`, `avatarTpl`, `bannerTpl`, `filtersTpl`, `logoTpl`, `statsTpl`, `subtitleTpl` are pulled in as the variant's name suggests (e.g. `with-banner-image` uses `bannerTpl`, `with-meta-actions-and-breadcrumbs` uses `breadcrumbsTpl` + `metaTpl`).
+- **Stacked Layouts group** — uses `navTpl` for the top navigation bar and `bodyTpl` for the main content. `two-row-navigation-with-overlap` additionally uses `filtersTpl` for the secondary nav row.
+- **Sidebar Layouts group** — uses `sidebarTpl` for the side rail and `bodyTpl` for the main content area. Variants whose name contains `with-header` also use `navTpl` for the top header bar.
+
+## Usage Example
+
+Page Header — simplest case (`with-actions`):
+
+```html
+<smartpro-page
+  [options]="{ title: 'Projects', variant: 'with-actions', endButtons: actions }"
+>
+  <p>Main content goes here (flows into bodyTpl automatically).</p>
+</smartpro-page>
+```
+
+Sidebar layout (`simple-sidebar`) with explicit sidebar + body:
+
+```html
+<ng-template #sidebar>
+  <nav class="...">...sidebar items...</nav>
+</ng-template>
+
+<ng-template #body>
+  <section class="...">...main content...</section>
+</ng-template>
+
+<smartpro-page
+  [options]="{
+    title: 'Dashboard',
+    variant: 'simple-sidebar',
+    sidebarTpl: sidebar,
+    bodyTpl: body
+  }"
+></smartpro-page>
+```
+
+## 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/page/<slug>/`
+- Barrel: `packages/shared/angular/src/lib/components/page/index.ts` — exports all 26 components
+- Stories: `packages/shared/angular/src/lib/components/page/page.component.stories.ts` (26 stories + `All variants`)
+- Module registration: `packages/shared/angular/src/lib/components/components.module.ts` (full 26-entry `PAGE_VARIANT_COMPONENTS_TOKEN` map)
+- Base class + `PAGE_VARIANT_COMPONENTS_TOKEN` + `SmartPageVariant` + `IPageOptions`: re-exported from `@smartsoft001/angular`

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

@@ -0,0 +1,96 @@
+---
+name: angular-components-page-heading
+description: Page heading component for @smartsoft001/pro-angular. Three variants (default, with-avatar, with-banner-image) that adapt to the slots provided in `IPageHeadingOptionsPro` (breadcrumbs / meta / filters / avatar / logo / banner / stats / actions).
+user-invocable: false
+---
+
+# Page Heading Component (Pro)
+
+Use `<smartpro-page-heading>` and pick a variant via `variant`. The component reads `IPageHeadingOptionsPro` for title, subtitle, and a set of optional `TemplateRef` slots; the rendered layout adapts based on which slots are populated and which flags are set. Each variant is declared with `CUSTOM_ELEMENTS_SCHEMA` so consumers can drop `el-dropdown` / `el-menu` from `@tailwindplus/elements` directly into action templates.
+
+## Variants
+
+| `variant` (default `'default'`) | Selector                                  | Description                                                                                                                                                                                                                                                                                 |
+| ------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'default'`                     | `smartpro-page-heading-default`           | Adaptive title-and-actions header. Setting `filtersTpl` switches to a single-row layout with filters in line and actions on the right. Setting `breadcrumbsTpl` adds a breadcrumb row above the title. Setting `metaTpl` switches the breakpoint and stacks the meta row beneath the title. |
+| `'with-avatar'`                 | `smartpro-page-heading-with-avatar`       | Avatar / logo / card-style header. Default renders a large avatar + title + subtitle. `options.logo: true` switches to the smaller logo + meta + title layout. `options.cardStyle: true` wraps the heading in a rounded white card and renders `statsTpl` (if set) as the card footer row.  |
+| `'with-banner-image'`           | `smartpro-page-heading-with-banner-image` | Banner-image-led header with avatar overlap and title row beneath the banner.                                                                                                                                                                                                               |
+
+## API
+
+### IPageHeadingOptionsPro (`page-heading.types.ts`, extends `IPageHeadingOptions`)
+
+```typescript
+type SmartPageHeadingVariantPro =
+  | 'default'
+  | 'with-avatar'
+  | 'with-banner-image';
+
+interface IPageHeadingOptionsPro {
+  title?: string;
+  subtitle?: string;
+  breadcrumbsTpl?: TemplateRef<unknown>;
+  metaTpl?: TemplateRef<unknown>;
+  avatarTpl?: TemplateRef<unknown>;
+  bannerTpl?: TemplateRef<unknown>;
+  actionsTpl?: TemplateRef<unknown>;
+  statsTpl?: TemplateRef<unknown>;
+  logoTpl?: TemplateRef<unknown>;
+  filtersTpl?: TemplateRef<unknown>;
+  /** with-avatar only — switches to the smaller logo + meta + title layout. */
+  logo?: boolean;
+  /** with-avatar only — wraps the heading in a rounded white card; `statsTpl` (if set) renders as the card footer row. */
+  cardStyle?: boolean;
+}
+```
+
+### Wrapper Inputs
+
+| Input     | Type                                                | Default     | Description          |
+| --------- | --------------------------------------------------- | ----------- | -------------------- |
+| `variant` | `'default' \| 'with-avatar' \| 'with-banner-image'` | `'default'` | Variant family.      |
+| `options` | `IPageHeadingOptionsPro \| undefined`               | `undefined` | Title, slots, flags. |
+| `class`   | `string`                                            | `''`        | Extra CSS classes.   |
+
+## Usage Example
+
+```html
+<ng-template #actions>
+  <button
+    class="smart:rounded-md smart:bg-indigo-600 smart:px-3 smart:py-2 smart:text-white"
+  >
+    Publish
+  </button>
+</ng-template>
+
+<!-- Default with breadcrumbs and actions -->
+<smartpro-page-heading
+  [options]="{ title: 'Back End Developer', breadcrumbsTpl: crumbs, actionsTpl: actions }"
+></smartpro-page-heading>
+
+<!-- Card with avatar and stats -->
+<smartpro-page-heading
+  variant="with-avatar"
+  [options]="{
+    title: 'Back End Developer',
+    cardStyle: true,
+    avatarTpl: avatar,
+    actionsTpl: actions,
+    statsTpl: stats
+  }"
+></smartpro-page-heading>
+
+<!-- Banner image -->
+<smartpro-page-heading
+  variant="with-banner-image"
+  [options]="{ title: 'Back End Developer', bannerTpl: banner, avatarTpl: avatar, actionsTpl: actions }"
+></smartpro-page-heading>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/page-heading/page-heading.component.ts`
+- Types: `packages/shared/angular/src/lib/components/page-heading/page-heading.types.ts`
+- Variants: `packages/shared/angular/src/lib/components/page-heading/{default,with-avatar,with-banner-image}/<name>.component.ts`
+- Shared utilities: `packages/shared/angular/src/lib/components/page-heading/page-heading-classes.util.ts`
+- Stories: `packages/shared/angular/src/lib/components/page-heading/page-heading.component.stories.ts`